﻿@charset "utf-8";
/* CSS Document */
.pro_ban{position:relative;overflow:hidden; height:280px;}
	.pro_ban img{max-width:1920px;left:50%;position:relative; margin-left:-960px;}
	.pro_ban .red{ background-color:#FF0004;}
	.pro_subnav_box{ width:100%; background-color:#f3f3f3;}
	.pro_subnav{ width:1000px; margin:0 auto;position:relative;}
	.pro_subnav ul{ position:absolute; top:-33px;left:0; width:100%;}
	.pro_subnav li{ float:left; width:100%;text-align:center; background-color:#f2f2f2; height:66px; border-bottom:solid 1px #c2c2c2;
	-moz-box-shadow:-1px 0px 0px #e4e4e4 inset;
	-webkit-box-shadow:-1px 0px 0px #e4e4e4 inset; 
	box-shadow:-1px 0px 0px #e4e4e4 inset; 
	}
	.pro_subnav li a{line-height:66px; font-size:18px;color:#4c4c4c;
	float:left; width:33.3%; background-color:#f2f2f2; height:66px; border-bottom:solid 1px #c2c2c2;
	-moz-box-shadow:-1px 0px 0px #e4e4e4 inset;
	-webkit-box-shadow:-1px 0px 0px #e4e4e4 inset; 
	box-shadow:-1px 0px 0px #e4e4e4 inset; 
	 }
	.pro_subnav li .b_color{ background-color:#e5e5e5;}
	.pro_subnav li:hover{ background-color:#e6e6e6;}
	.pro_subnav a:hover{ color:#fff;}
	.pro_subnav_text_box{ width:100%; background-color:#f3f3f3;}
	.pro_subnav_text{ width:1000px; margin:0 auto; padding-top:40px; padding-bottom:10px}
	.pro_subnav_text h1{ float:left; color:#333333; font-size:24px; font-weight:bold;}
	.pro_subnav_text h2{ float:right; color:#666666; margin-top:10px;}
	.pro_subnav_text h2 a{color:#666666;}
	.tiao{ width:100%;background-image:url(../img/product/tiao.png); height:3px;}
	/*产品*/
	.product_box{ width:100%; background-color:#f3f3f3; margin-top:15px;}
	.product_nav_box{ width:1000px; margin:0 auto;}
	.product_nav_box .product_nav{ float:left; position:relative; z-index:1; height:455px;}
	.product_nav_box .product_nav_img{ width:250px; height:135px; position:absolute; bottom:5px; left:0;}
	.product_nav_box .product_nav_img_2{ height:180px; width:250px;position:absolute; bottom:5px; left:0;}

	
	.product_nav_box dl{float:right; position:relative;}
	.product_nav_box dl h1{ position:absolute; top:100px; right:150px; font-size:36px; color:#333333;}
	.product_nav_box dl p{ width:240px;position:absolute; top:160px; right:50px; font-size:18px; color:#333333;}
	.product_nav_box dl div{position:absolute; top:240px; right:160px;}
	.product_nav_box dl a{display:block;color:#ff921d;font-size:14px;}
	.product_nav_box dl a:hover{ color:#27c9ff;}
	
	
	
	
	
	.product samp{ width:250px;height:44px;background-color:#5aade3; margin-bottom:1px; display:block;}
	.product h1{ font-size:18px; line-height:44px; color:#FFFFFF; margin-left:15px;}
	.product_box_nav{ position:absolute; top:0; left:250px;width:750px; height:455px; display:none; overflow:hidden;}
	.product:hover .product_box_nav{ display:block;}
	
	.product:hover samp{ background-color:#d5eeff;}
	.product_box_nav_width{ position:absolute; left:auto;top:0px; width:10000px;}
	
	.product_box_scroll_left{ width:24px; height:55px; position:absolute; left:-80px; top:197px; background-image:url(../img/index/you.png);background-position: 0px 55px;}
	.product_box_scroll_right{ width:24px; height:55px; position:absolute; left:750px; top:197px; background-image:url(../img/index/zuo.png);background-position: 0px 55px;}
	
	
	.product_box_nav ul{ float:left; background-color:#fff; }
	.product_box_nav ul li{ border:solid 1px #fff; width:250px;}
	.product_box_nav ul li:hover{ background-color:#d5eeff;}
	.product_box_nav ul li:hover p{ color:#ff921d;}
	.product_box_nav ul a{height:111px; display:block;}
	.product_box_nav p{color:#333333; float:left; text-align:center; margin:0 15px; margin-top:15px;}
	
	.product_box_nav ul li img{ height:111px; float:left; display:block;
	border:none;
	border-style:none;
		}
	
	/*开关*/
	.switch_box{ width:100%; background-color:#f3f3f3; margin-top:15px;}
	.switch_width{ width:1000px; margin:0 auto; }
	.switch_title{ float:right;padding:20px 0;}
	
	
	.switch_title img{border:none;
	border-style:none;}
	
	
	.switch_width ul li{ width:240px; height:240px;float:left; margin:3px 3px; overflow:hidden;position:relative;
	}
	
	
	
	.switch_width ul li img{border:none;
	border-style:none;}
	
	
	
	.switch_width ul li div{ width:240px; height:240px; background:#000;opacity: 0.522; position:absolute; top:0; left:0;
	display:none;
	animation:myfirst 1s; /*调用动画定义时间*/
	-webkit-animation:myfirst 1s;
	-moz-transform:myfirst 1s;
 	-o-transform:myfirst 1s;
 	-ms-transform:myfirst 1s;
 
	transform:rotate(-90deg) scale(0.7);/*定义初始化旋转角度／初始化大小*/
	-ms-transform:rotate(-90deg) scale(0.7); 
	-moz-transform:rotate(-90deg) scale(0.7); 
	-webkit-transform:rotate(-90deg) scale(0.7);
	-o-transform:rotate(-90deg) scale(0.7);
	
	transition: All 0.4s ease;
	-webkit-transition: All 0.4s ease;
	-moz-transition: All 0.4s ease;
	-o-transition: All 0.4s ease;
	}
	@keyframes myfirst 
{
0% {background:#ff921d; left:-200px;}/*定义动画*/
20% {background:#ff921d; left:0px;}
50% {background:#000; left:0px;}
100% {background: #000; left:0px;}
}

	.switch_width ul li:hover div{ display:block;}
	
	
	.switch_width ul li div:hover{ 
	transform:rotate(0deg) scale(1);/*定义旋转后角度及大小*/
-ms-transform:rotate(0deg) scale(1); 	
-moz-transform:rotate(0deg) scale(1); 
-webkit-transform:rotate(0deg) scale(1); 
-o-transform:rotate(0deg) scale(1);
}
	
.switch_width ul li div p{ width:240px;color:#fff; font-size:18px; text-align:center; line-height:24px; margin-top:80px;}
.switch_width ul li div h1{ width:110px; margin:0 auto; text-align:center; font-size:24px;margin-top:20px;  border:2px solid #fff; color:#fff;}
.switch_width ul li div h1:hover{ border:2px solid #27c9ff; color:#27c9ff;}