@import url(global.css);
/*--------------------------*/
.flexslider{position:relative;height:600px;overflow:hidden;background:url(../images/loading.gif) 50% no-repeat; }
.slides{position:relative;z-index:1;left: 50%; margin: 0 auto 0 -960px;overflow: hidden; text-align: center; width: 1920px;}
.slides li{height:600px; z-index:10;}
.slides li img{ z-index:10;}
.flex-control-nav{position:absolute;bottom:20px;z-index:2;width:100%;text-align:center; z-index:10;}
.flex-control-nav li{ height:600px; display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
.flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(../images/dot2.png) right 0 no-repeat;cursor:pointer;}
.flex-control-nav .flex-active{background-position:0 0;}
.flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
.flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute; z-index:10;}
.flex-direction-nav li a.flex-prev{left:130px;background:url(../images/prev.png) center center no-repeat;}
.flex-direction-nav li a.flex-prev:hover{left:130px;background:url(../images/prev2.png) center center no-repeat;}
.flex-direction-nav li a.flex-next{right:130px;background:url(../images/next.png) center center no-repeat;}
.flex-direction-nav li a.flex-next:hover{right:130px;background:url(../images/next2.png) center center no-repeat;}
/*--------------------------*/
.process{width:1200px;height:auto;margin:0 auto;padding-top:50px; overflow:hidden;}
.process ul{width:1280px; display:block; height:100%; overflow:hidden;}
.process ul li{width:280px;margin-right:20px; float:left;}
.process ul li img{width:280px;}
.process1 ul li:nth-child(1){ width:240px;}
.process1 ul li:nth-child(1) img{width:240px;height:170px;}
/*--------------------------*/
.new_product{width:100%;height:auto;overflow:hidden; background: url(../images/home/bg1.jpg) fixed no-repeat center center; -webkit-background-size: cover;} 
.new_product .box{width:1200px;margin:0 auto;height:720px; padding:60px 0; }
.new_product .box .tit{ font-size:36px; color:#fff; text-align:center;  padding-bottom:20px;}
.new_product .box .con{width:1200px;margin-top:20px; float:left; overflow:hidden;}
.new_product .box .con ul{width:1250px; overflow:hidden;}
.new_product .box .con ul li{ float:left;width:293px;margin:10px 10px 0 0;transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}
.new_product .box .con ul li:hover {transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}
.new_product .box .con ul li img{width:293px;height:293px;}
/*--------------------------*/
.show{width:1200px;height:auto;margin:0 auto; overflow:hidden; padding:80px 0;}
.show .title{ text-align:center; margin-bottom:30px;}
.show .title h3{ font-size:24px; font-weight:lighter; margin-bottom:20px;}
.show .title p{ font-size:14px; line-height:30px; color:#666;}
.show .left{width:370px;height:512px; overflow:hidden; float:left;}
.show .left img{width:370px;height:512px;cursor: pointer;transition: all 0.8s;}   
.show .left img:hover{ transform: scale(1.2); }
.show .right{width:800px; float:right; overflow:hidden;}
.show .right ul{width:860px;}
.show .right ul li{width:244px;height:244px; border:1px solid #f7f7f7; position:relative; margin-bottom:20px; float:left; background:#ffffff; text-align:center;margin-right:30px; text-align:center;}
.show .right ul li img{width:244px;height:244px;}
.show .right .text {width: 100%; height: auto; position: absolute; left: 0;bottom: 0;}
.show .right .imgtext {width: 100%;height: auto; float: left;padding:67px 0;color: #FFF; font-size: 14px;line-height: 200%;text-align: center; background:#fff; FILTER: alpha(opacity=90);opacity: 0.9;-moz-opacity: 0.9;}
.show .right ul li h3{color:#333;margin-top:16px; font-weight:normal;}
.show .right ul li p{ color:#666; font-size:16px; margin-bottom:10px;}
.show .right ul li a{ background:#c83c3f; color:#fff; padding:7px 15px; font-size:12px;}
.show .right ul li a:hover{ background:#f60}
/*--------------------------*/
.product{width:1200px;height:auto;margin:0 auto; overflow:hidden; padding:80px 0 90px 0;}
.product .title{ text-align:center; margin-bottom:30px;}
.product .title h3{ font-size:24px; font-weight:lighter; margin-bottom:10px;}
.product .title p{ font-size:14px; line-height:24px; color:#666;}
.product .con{width:360px; height:800px; overflow:hidden; float:left; margin:0 20px;}
.product .con img{width:360px;height:780px;pointer;transition: all 0.8s;}   
.product .con img:hover{ transform: scale(1.2); }
.product .pro{width:1250px; height:100%; overflow:hidden;}
.product .pro ul{width:1250px; height:100%; overflow:hidden;}
.product .pro ul li{width:290px;height:290px; border:1px solid #f3f3f3; position:relative; margin:10px 10px 0 0; float:left; background:#ffffff; text-align:center; text-align:center;}
.product .pro ul li img{width:290px;height:290px;}
.product .pro .text {width: 100%; height: auto; position: absolute; left: 0;bottom: 0;}
.product .pro .imgtext {width: 100%;height: auto; float: left;padding:67px 0;color: #FFF; font-size: 14px;line-height: 200%;text-align: center; background:#000; FILTER: alpha(opacity=80);opacity: 0.8;-moz-opacity: 0.8;}
.product .pro ul li h3{color:#fff; font-size:16px;}
.product .pro ul li p{ height:128px; overflow:hidden; color:#fff; font-size:12px; line-height:22px; padding:0 30px;}

/*--------------------------*/
.advertisement{position:relative;height:450px;overflow:hidden;background:url(../images/loading.gif) 50% no-repeat; }
.advertisement .con{position:relative;z-index:1;left: 50%; margin: 0 auto 0 -960px;overflow: hidden; text-align: center; width: 1920px;}
.advertisement img{ width:1920px; height:450px; height:auto; overflow:hidden;}
.advertisement figure {position: relative;z-index: 1;display: inline-block;overflow: hidden;margin: -0.135em;width: 100%;	height: 450px;background: #3085a3;text-align: center;cursor: pointer;}
.advertisement figure img {position: relative;display: block;min-height: 100%;opacity: 0.8;}
.advertisement figure figcaption {padding: 2em;color: #fff;text-transform: uppercase;font-size: 0.8em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.advertisement figure figcaption::before,.grid figure figcaption::after {pointer-events: none;}
.advertisement figure figcaption,.grid figure a {position: absolute;	top: 0;	left: 0;width: 100%;height: 100%;}
.advertisement figure a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}
.advertisement figure h2 {word-spacing: -0.15em; font-size:28px;font-weight: 300;}
.advertisement figure h2 span {font-weight: 800;}
.advertisement figure h2,.grid figure p {margin: 0;}
.advertisement figure p {letter-spacing: 1px;font-size:14px;}
figure.effect-at {background: #c83c3f;}
figure.effect-at img {opacity: 0.7;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
figure.effect-at:hover img {opacity: 0.4;}
figure.effect-at figcaption::before,figure.effect-at figcaption::after {position: absolute;top: 30px;right: 30px;bottom:30px;left:30px;content: '';opacity: 0;-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;transition: opacity 0.6s, transform 0.6s;}
figure.effect-at figcaption::before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0,1);transform: scale(0,1);}
figure.effect-at figcaption::after {border-right: 1px solid #fff;border-left: 1px solid #fff;-webkit-transform: scale(1,0);transform: scale(1,0);}
figure.effect-at h2 {padding-top: 5%;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,-20px,0);	transform: translate3d(0,-20px,0);}
figure.effect-at p {padding: 20px 2.5em; line-height:26px; opacity: 0;	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;	transition: opacity 0.35s, transform 0.35s;	-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);}
figure.effect-at:hover figcaption::before,figure.effect-at:hover figcaption::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
figure.effect-at:hover h2,figure.effect-at:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
figcaption, figcaption:after, figcaption:before { border-box; box-sizing: border-box; }
/*--------------------------*/
.wikipedia{width:1200px;height:auto;margin:0 auto; overflow:hidden; padding:50px 0;}
.wikipedia .title{ width:730px; float:left; overflow:hidden; margin-bottom:30px;}
.wikipedia .title h6{ float:left; font-size:24px;color:#c83c3f; font-weight:lighter; display:block; width:100%; margin-bottom:50px;}
.wikipedia .title ul li{ height:42px; float:left;display:block; float:left;transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}
.wikipedia .title ul li:hover {transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}
.wikipedia .title ul li a{ display:block;height:46px; line-height:46px; margin-right:30px; padding:0 30px;color:#666; background:#eee; display:block; font-size:16px;}
.wikipedia .title ul .hover a{color:#fff; background:#c83c3f;}
.wikipedia .title ul li a:hover{color:#fff; background:#c83c3f;}
.wikipedia .box{ width:730px; float:left;height:400px; overflow:hidden; padding-top:20px;}
.wikipedia .con ul li{ float:left; width:100%;height:100px; padding-bottom:20px; border-bottom:1px dashed #dedede; margin-bottom:35px;transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}
.wikipedia .con ul li:hover {transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}
.wikipedia .con span {width: 86px;height: 86px; float: left; display: block; margin-right: 15px; color: #999; font-size: 14px;}
.wikipedia .con span font {display: block;font-size: 24px; color:#333;}
.wikipedia .con li h6 {font-size: 18px;font-weight: lighter;margin-bottom: 10px;}
.wikipedia .con li h6 a{color: #333;}
.wikipedia .con  li p {font-size: 14px;color: #999;line-height: 24px;}
.wikipedia .right{ width:400px; float:right; margin-top:60px}
.wikipedia .right ul li{ width:400px; height:250px; overflow:hidden; display:block; position:relative; margin-bottom:30px;transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}
.wikipedia .right ul li:hover {transform:translate(0,-10px); -webkit-transform:translate(0,-10px); -moz-transform:translate(0,-10px); -o-transform:translate(0,-10px); -ms-transform:translate(0,-10px);}
.wikipedia .right ul li img{ width:400px; display:block;}
.wikipedia .right ul li span{ width:100%; display:block; line-height:32px; text-align:center; font-size:14px; color:#fff; text-align:center; position:absolute; bottom:0; background:#000; FILTER: alpha(opacity=60);opacity: 0.6;-moz-opacity: 0.6;}
/*--------------------------*/
.about{width:1200px;height:auto;margin:0 auto; overflow:hidden;}
.about .box{width:1200px; float:left;margin-right:20px; position: relative;}
.about .banner-img {width:1200px; height:460px; overflow: hidden;margin: 0 auto;}
.about .banner-img img {width:1200px;height:460px;}
.about .banner-nav {position: absolute;left:42%;bottom:20px;}
.about .banner-nav li {float: left;padding-left: 5px;}
.about .banner-nav span{float: left;padding: 0 1px; width:14px; height:14px; background:url(../images/bn1.png) no-repeat; cursor: pointer;}
.about .banner-nav .this span{ background:url(../images/bn2.png) no-repeat; color: #FFFFFF;}
.about .con{ width:410px; line-height:26px; color:#333; font-size:14px;position: absolute;right:-100px;top:80px;background:#fff; FILTER: alpha(opacity=98);opacity: 0.98;-moz-opacity: 0.98; padding:40px 130px 40px 40px;transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out;}
.about .con:hover {transform:translate(-100px,0px); -webkit-transform:translate(-100px,0px); -moz-transform:translate(-100xp,0px); -o-transform:translate(-100px,0px); -ms-transform:translate(-100px,0px);}
.about .con h3{ margin-bottom:10px; display:block; font-size:24px;font-weight:lighter;}
.about .con h3 span{ font-size:16px; color:#999;}
.about .con font{ margin-bottom:20px; display:block;}
.about .con p{ color:#666;}
/*--------------------------*/
.class{ width:1200px; margin:0 auto; padding-top:50px;}
.class .view{ width:280px; height:186px; overflow:hidden; position:relative; margin:10px; float:left;}
.class .view img{ width:280px; height:186px;}
.class .hover{
	width:280px;  position:absolute; top:60px; left:0; text-align:center; color:#fff; 
	transform:rotate(55deg); 
	-moz-transform:rotate(55deg); 
	-webkit-transform:rotate(55deg); 	
	transition:all 0.5s; 
	-moz-transition:all 0.5s; 
	-webkit-transition:all 0.5s; 
overflow:hidden; height:0; z-index:4000;/*transform:translateX(200px);*/}/*写好样式，进行隐藏，用overflow:hidden; height:0;*/
.class .hover h3{color:#fff;  padding-bottom:10px; font-size:22px; font-weight:lighter; color:#c83c3f;}
.class .hover p{ font-size:14px;}
.class .view:hover .hover{
	height:120px;	
	transform:rotate(0deg); 
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}
/*before   after为选择器，一般给选择器加动画背景，设置动画样式*/
.class .view:before{
	content:""; position:absolute; top:-300px; right:0;width:360px; height:360px; background:rgba( 0,0, 0,0.5); 
	transform:rotate(55deg) translateX(60px);
	-moz-transform:rotate(55deg) translateX(60px);
	-webkit-transform:rotate(55deg) translateX(60px);	 
	transform-origin:100% 0%; 
	-moz-transform-origin:100% 0%; 
	-webkit-transform-origin:100% 0%;	
	transition:all 0.5s ease 0.3s;
	-moz-transition:all 0.5s ease 0.3s;
	-webkit-transition:all 0.5s ease 0.3s;

}/*写好样式，进行隐藏，用top:-240px;*/
.class .view:hover:before{ top:0;}
.class .view:after{
	content:""; position:absolute;bottom:-300px; left:0;width:360px; height:360px; background:rgba( 0, 0, 0,0.5);	
	transform:rotate(55deg) translateX(-60px);
	-moz-transform:rotate(55deg) translateX(-60px);
	-webkit-transform:rotate(55deg) translateX(-60px);
	transform-origin:0% 100%;
	-moz-transform-origin:0% 100%;
	-webkit-transform-origin:0% 100%;	
	transition:all 0.5s ease 0.3s;
	-moz-transition:all 0.5s ease 0.3s;
	-webkit-transition:all 0.5s ease 0.3s;
}
.class .view:hover:after{ bottom:0px;}
 
 
 /*------支付------*/

#wxpay_body{ background:#e6e6e6;}

#wxpay_header{ width:100%; height:100%; overflow:hidden;border-bottom:1px solid #dedede; background:#fff; margin-bottom:3%;}
#wxpay_header .box{ width:1100px; margin:0 auto; height:100px; line-height:100px; overflow:hidden;} 
#wxpay_header .logo{ float:left; margin-top: 10px;}
#wxpay_header .title{ font-size:22px; float:right;  color:#999; font-weight:lighter;}

#wxpay_bottom{ width:100%; height:100px; overflow:hidden;border-top:1px solid #dedede; background:#fff; position:fixed; bottom:0; left:0;}
#wxpay_bottom .box{ width:1100px; margin:0 auto; height:100px; line-height:100px; overflow:hidden; color:#666; text-align:center;} 


#wxpay{ width:100%; max-width:600px;  height:100%; overflow:hidden; margin:0 auto;}
#wxpay .box{ background:#fff; border-radius: 12px; overflow:hidden; margin:20px 10px;}
#wxpay .title{ width:100%; height:80px; line-height:80px; font-size:24px; color:#111; position:relative; text-align:center; }
#wxpay .title img{ padding-top:20px;}
#wxpay .con{ width:100%; overflow:hidden; background:#2ca43a; padding:20px 0;}
#wxpay .con h1{ font-size:18px; font-weight: bold; padding:20px 0 0 0; text-align:center; color:#FFF; }
#wxpay .con h2{ font-size:16px; font-weight: bold; line-height:50px; text-align:center; color:#FFF; margin-bottom:12px;}
#wxpay .con h2 span{ font-size:20px; color:#fc0;}
#wxpay .con .money{ width:260px; height:36px; line-height:36px; background:#fff; color:#333; font-size:16px; text-align:center; margin:0 auto; border-radius:50px; margin-bottom:15px;}
#wxpay .con .money span{ font-size:22px; color:#f60;}
#wxpay .con .smm{ width:260px; height:100%; overflow:hidden; background:#fff; margin:0 auto;border-radius: 12px; text-align:center; padding:10px 0 30px 0; margin-bottom:30px;}
#wxpay .con .smm img{ width:230px; height:230px;}
#wxpay .con .smm span{ display:block; color:#333; text-align:center; font-size:14px;}

#wxpay .button{ width:94%; height:50px; line-height:50px; background:#2ca43a; color:#fff; text-align:center; display:block; margin-bottom:20px; font-size:16px; border-radius: 6px; border:none; margin:20px 3% 20px 3%;}