/* html,body{overflow:hidden;width:100%;height:100%;} */
body{margin:0;padding:0;font-family: Arial, '微软雅黑';}
a {text-decoration: none;}
img{ border:0;}
p{margin:0}

.nav, .nav-sub {float:left;height:100%;}
ul, li {list-style: none;}
.fl { float: left; }
.fr { float: right; }
input:focus { outline: none; }
.input_noline{ background-color:transparent;border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;}

/* main */


/*banner*/
.h_banner{ width:100%; height:900px; overflow:hidden; position:relative;background:url(../images/wxban.jpg) no-repeat center center;background-size:cover }
.h_b_desc{ position:absolute;top:0; right:0; width:66%; height:100%; z-index:8; background:rgba(84,181,52,0.8); color:#fff;}
.h_b_descbox{position:absolute; height:100%;left:15%;right:10%; top:0;}
.h_b_descbox .h_b_F{vertical-align:middle;display:inline-block;}
.h_b_descbox em{vertical-align:middle;display:inline-block;height:100%}
.h_b_desc .h_b_F .h_b_F01{ font-size:12px; line-height:20px; font-weight:lighter; font-style:normal; display:block; padding-top:20PX; width:70%; overflow:auto;}
.h_b_desc .h_b_F .h_b_F02{ font-size:48px; line-height:60px; font-weight:bold;display:block; padding-bottom:20px; color:#fff; letter-spacing:1px}
.h_b_desc .h_b_F .h_b_F03{ font-size:24px; line-height:30px; font-weight:lighter;letter-spacing:2px}
.h_b_desc .h_b_F .h_b_more{ width:150px; height:40px; margin-top:40px ;background:#54a838; float:left;border-radius:4px;}
.h_b_desc .h_b_F .h_b_more a{ float: left;display: block; width:14px;background: url(../images/h_b_more.png) no-repeat center center / 14px; height:14px; padding:13px; margin-left:8px}
.h_b_desc .h_b_F .h_b_more p{ font-size:14px; line-height:40px; font-weight:lighter; color:#fff;}

/*wxpage1*/
.wxpage1{ width:80%; margin:0 auto; height:700px; overflow:hidden; position:relative;max-width:1100px;}
.wxpage1 .wxp1-font{ width:50%; padding-right:5%; height:auto; margin-top:20%; display:block; float:left;}
.wxpage1 .wxp1-font p{ font-size:14px; color:#96989d; line-height:30px}
.wxpage1 .wxp1-font span{ font-size:36px; color:#54a838;display:block; padding:20PX 0; }

.wxpage1 .wxp2-ipon{ width:40%; height:100%; background:url(../images/ipon1.png) no-repeat center center; float:right;}
.wxpage1 .wxp2-ipon .img{ width:100%; height:50%; padding-top:45%; margin-left:30px; }


/*wxpage2*/
.wxpage2{ width:100%; overflow:hidden; background:#54a838;padding-bottom:100px;}
.wxp2-font{ color:#fff; text-align:center; width:80%; height: auto; margin:0 auto;}
.wxp2-font span{ font-size:36px; font-weight:lighter; font-style:normal; font-family:微软雅黑 Light; padding:100px 0 50px 0; display:block;}
.wxp2-font p{ font-size:14px; line-height:20px; font-style:normal; display:block; width:70%;margin:0 auto;}
.wxp2-ul{ width:80%; height:auto; margin:0 auto; padding-top:70px;}
.wxp2-ul ul{ width:100%; height:auto; overflow:auto; padding:0}
.wxp2-ul ul li{ width:23%; height:300px; margin:0 1%; float:left; display:block; position:relative; overflow:hidden; text-align:center;}
.wxp2-ul ul li .wxp2-li{ width:100%; height:300px; color:#fff; padding-top:50px;border-radius:4px}
.wxp2-ul ul li .wxp2-li a{ /*width:90px;*/ height:80px; display:block; padding-right:100px }
.wxp2-ul ul li .wxp2-li span{ font-size:24px; font-weight:600; font-style:normal; line-height:80px; display:block;}
.wxp2-ul ul li .wxp2-li i{font-size:14px; font-weight:lighter; font-style:normal; line-height:20px; display:block; width:80%; text-align:center; padding-top:30px; margin:0 auto;}
.wxp2-ul ul li .wxp2-li p{ opacity:1;font-size:12px; font-weight:300;color:#54a828;line-height:20px; text-align:left; width:auto; margin:0 auto; padding:10px 20px;}
.wxp2-ul ul li .wxp2-li1 a{ background:url(../images/Desktop.png)no-repeat center center;}
.wxp2-ul ul li .wxp2-li2 a{ background:url(../images/Gift.png)no-repeat center center;}
.wxp2-ul ul li .wxp2-li3 a{ background:url(../images/Hourglasses.png)no-repeat center center;}
.wxp2-ul ul li .wxp2-li4 a{ background:url(../images/Diamond.png)no-repeat center center;}

.wxp2-ul ul li:hover .wxp2-li{ background:#fff; border-radius:4px; width:98%; height:99%; padding:0; margin:0;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);} 
.wxp2-ul ul li .wxp2-li:hover span{ position:absolute; top:45px; left:20px; color:#54a838;line-height:30px;}
.wxp2-ul ul li .wxp2-li:hover a{ position: absolute; right:20px; top:20px; padding:0}
.wxp2-ul ul li .wxp2-li:hover em{  height:1px; background:#54a838; margin:0 auto; display:block; position:absolute; top:100px; left:20px; right:20px}
.wxp2-ul ul li .wxp2-li:hover i{font-size:14px; font-weight:600; color:#54a828; text-align:left;padding:120px 0 0 20px; width:80%; float:left; }
.wxp2-ul ul li .wxp2-li:hover p{font-size:12px; font-weight:300; color:#54a828;line-height:20px; opacity:1;text-align:left; padding:10px 20px; margin:0;width:auto; float:left;}
.wxp2-ul ul li:hover .wxp2-li1 a{ background:url(../images/Desktop_.png)no-repeat center center}
.wxp2-ul ul li:hover .wxp2-li2 a{ background:url(../images/Gift_5.png)no-repeat center center}
.wxp2-ul ul li:hover .wxp2-li3 a{ background:url(../images/Hourglasses_4.png)no-repeat center center}
.wxp2-ul ul li:hover .wxp2-li4 a{ background:url(../images/Diamond_8.png)no-repeat center center}

.wxpage3{ width:100%; height:800px;}
.wxpage3 .wxp3-sp{ width:40%; height:700px; padding-top:100px; margin-left:10%; float:left}
.wxpage3 .ico-wx3{ width:80px; height:8px; margin:0 auto; }
.wxpage3 .ico-wx3 em{ width:8px; height:8px; border-radius:8px; background:#96989d; display:block; float:left; margin:0 6px; }
.wxpage3 .wxp3-font{ width:40%; height:auto; padding-top:150px;float:left; margin-left:0%}
.wxpage3 .wxp3-font span{ font-size:36px; color:#707579;  font-weight:lighter; font-style:normal; font-family:微软雅黑 Light; width:100%; display:block;}
.wxpage3 .wxp3-font strong{font-size:36px; color:#707579; width:100%}
.wxpage3 .wxp3-font ul{ width:100%; height:auto; float:left; overflow:hidden; margin:50px 0; padding:0}
.wxpage3 .wxp3-font li{ width:100%; height:96px; padding:10px 0; position:relative;overflow: hidden;}
.wxpage3 .wxp3-font ul li span{font-size:18px;font-weight:400; font-style:normal; font-family:微软雅黑; width:78%; padding:10px 0}
.wxpage3 .wxp3-font ul li p{font-size:14px; color:#707579;  font-weight:400; font-style:normal; display:block; line-height:20px;width:auto; margin-left:75px;}
.wxpage3 .wxp3-font ul li a{ width:75px; height:75px; display:block; float:left; margin-right:20px}
.wxpage3 .wxp3-font .wxp3-li1 a{ background:url(../images/Pin.png)no-repeat center center;}
.wxpage3 .wxp3-font .wxp3-li2 a{ background:url(../images/Settings_72.png)no-repeat center center;}
.wxpage3 .wxp3-font .wxp3-li3 a{ background:url(../images/Statics_73.png)no-repeat center center;}
.wxpage3 .wxp3-font .wxp3-li4 a{ background:url(../images/Sound_73.png)no-repeat center center;}

.wxpage3 .wxp3-font ul li:hover span{color:#54a838}
.wxpage3 .wxp3-font ul li:hover p{color:#54a838}
.wxpage3 .wxp3-font ul .wxp3-li1:hover a{ background:url(../images/Pin-1.png)no-repeat center center}
.wxpage3 .wxp3-font ul .wxp3-li2:hover a{ background:url(../images/Settings_73.png)no-repeat center center}
.wxpage3 .wxp3-font ul .wxp3-li3:hover a{ background:url(../images/Statics_74.png)no-repeat center center}
.wxpage3 .wxp3-font ul .wxp3-li4:hover a{ background:url(../images/Sound_79.png)no-repeat center center}


.card-container-3 {
  color: #998100;
  position: relative;
  margin: 40px auto;
  width: 363px;
  height: 647px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.card-container-3 .controller {
  position: relative;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  padding: 40px 0;
  cursor: pointer;
  cursor: hand;
  position: absolute;
  z-index: 200;
  top: 0;
  width: 30%;
  height: 100%;
  background: none;
}
.card-container-3 .controller.left {
  left: 0;
}
.card-container-3 .controller.right {
  right: 0;
}
.card-container-3 .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  border-radius: 2px;
}
.card-container-3 .card:first-of-type {
  z-index: 100;
}
.card-container-3 .card:nth-of-type(2) {
  z-index: 90;
}
.card-container-3 .card:last-of-type {
  z-index: 80;
}
.card-container-3 .right:hover ~ .card:first-of-type {
  -webkit-transform: rotateY(20deg) translateZ(0px);
          transform: rotateY(20deg) translateZ(0px);
}
.card-container-3 .right:hover ~ .card:nth-last-of-type(2) {
  -webkit-transform: rotateY(20deg) translateZ(-100px);
          transform: rotateY(20deg) translateZ(-100px);
}
.card-container-3 .right:hover ~ .card:last-of-type {
  -webkit-transform: rotateY(20deg) translateZ(-200px);
          transform: rotateY(20deg) translateZ(-200px);
}
.card-container-3 .left:hover ~ .card:first-of-type {
  -webkit-transform: rotateY(-20deg) translateZ(0px);
          transform: rotateY(-20deg) translateZ(0px);
}
.card-container-3 .left:hover ~ .card:nth-last-of-type(2) {
  -webkit-transform: rotateY(-20deg) translateZ(-100px);
          transform: rotateY(-20deg) translateZ(-100px);
}
.card-container-3 .left:hover ~ .card:last-of-type {
  -webkit-transform: rotateY(-20deg) translateZ(-200px);
          transform: rotateY(-20deg) translateZ(-200px);
}




/*page*/
.page8{ margin:0; width:100%; height:30px; background-color:#3E3F4C;float: left}
.page8 p{ font-size:12px; color:#FFFFFF; float:left; display:block; margin:6px 30px;}
.page8 span{font-size:12px; color:#FFFFFF; float: right; display:block; margin:6px 30px; }


/* transition */

.wxp2-ul ul li .wxp2-li,
.case-page ul li a,
.wxp3-font ul li span,
.wxp3-font ul li a,
.nav ul li a i,
.nav ul li a em,
.main {transition: .5s;-moz-transition: .5s;-webkit-transition: .5s;-o-transition: .5s;}



/*效果*/
/*1650分辨率下的样式*/
@media (max-width:1650px) {
	
	
	
	
}


/*1366分辨率下的样式*/
@media (max-width:1366px) {
	
	.wxpage1{ width:80%}
	.wxpage1 .wxp2-ipon{ width:40%; float:left;}
	
	.wxpage2{}
	.wxp2-ul ul li{ width:48%;}
	.wxp2-ul ul li{ height:270px;}
	
	}




/*960分辨率下的样式*/
@media (max-width:960px) {
	
	.banner{ height:250px}
	
	.wxp2-font span {padding: 50px 0;font-size:20px;}
	.wxp2-ul { padding-top: 50px;}
	
	.wxpage1 .wxp1-font{ width:40%;}
	.wxpage1 .wxp2-ipon { width: 55%;}
	.wxpage3 .wxp3-sp { width: 50%; margin-left: 5%;}
	.wxpage3 .wxp3-font { width: 38%; margin-left: 3%;}
	
	.page8{ margin-top:30px; height:auto; float:left; padding:10px 0; text-align:center;}
	.page8 p{float:none;}
	.page8 span{ float:none;}
	
	.wxp2-ul ul li{ width:47%; height:300px; margin-left:2%; margin-bottom:10px; float:left; display:block; position:relative; overflow:hidden; text-align:center;}
	.wxp2-ul ul li .wxp2-li{ background:#fff; border-radius:4px; width:98%; height:99%; padding:0; margin:0;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);} 
	.wxp2-ul ul li .wxp2-li span{ position:absolute; top:45px; left:20px; color:#54a838;line-height:30px;}
	.wxp2-ul ul li .wxp2-li a{ position: absolute; right:20px; top:20px; padding:0}
	.wxp2-ul ul li .wxp2-li em{  height:1px; background:#54a838; margin:0 auto; display:block; position:absolute; top:100px; left:20px; right:20px}
	.wxp2-ul ul li .wxp2-li i{font-size:14px; font-weight:600; color:#54a828; text-align:left;padding:120px 0 0 20px; width:80%; float:left; }
	.wxp2-ul ul li .wxp2-li p{font-size:12px; font-weight:300; color:#54a828;line-height:20px; opacity:1;text-align:left; padding:10px 20px; margin:0;width:auto; float:left;}
	.wxp2-ul ul li .wxp2-li1 a{ background:url(../images/Desktop_.png)no-repeat center center}
	.wxp2-ul ul li .wxp2-li2 a{ background:url(../images/Gift_5.png)no-repeat center center}
	.wxp2-ul ul li .wxp2-li3 a{ background:url(../images/Hourglasses_4.png)no-repeat center center}
	.wxp2-ul ul li .wxp2-li4 a{ background:url(../images/Diamond_8.png)no-repeat center center}
	.h_b_desc .h_b_F .h_b_F02{font-size:26px;line-height:36px;padding-bottom:0}
	.h_b_desc .h_b_F .h_b_F03{font-size:16px;line-height:26px;}
	.wxpage1 .wxp1-font span { font-size: 18px;}
	}
	


/*640分辨率下的样式*/
@media (max-width:640px) {
	.h_banner{ width:100%; height:360px; overflow:hidden; position:relative;}
	
	
	.wxpage1 .wxp1-font{ width:100%;}
	.wxpage1 .wxp2-ipon { width: 100%; height: 85%;}
	.wxp2-font p { width:100%;}
	.wxp2-ul ul li{ width:98%;}
	.wxp2-ul ul li .wxp2-li p{font-size:14px;}
	.wxp2-ul {width: 90%;}
	.wxpage2{padding-bottom:40px}
	.wxpage3 .wxp3-font ul li p { width: 65%;margin-left: 95px;}
	.wxpage1 .wxp2-ipon .img{padding-top: 20%;}
	.wxpage1 .wxp2-ipon .img img{ width:90%;}
	
	.h_b_desc .h_b_F .h_b_F01{display:none;}
	
	.wxpage3 .wxp3-sp { width: 90%; margin-left: 5%;  padding-top: 10px;height:584px}
	.wxpage3 .wxp3-font span{font-size:24px;margin-bottom:6px}
	.wxpage3 .wxp3-font strong{font-size:24px}
	.wxpage3 .wxp3-font { width: 80%; margin-left: 10%; padding-top: 50px;}
	.wxpage3 .wxp3-sp img{ max-width: 100%;margin:0 auto}
	.card-container-3 { height:580px;width:100%}
	.h_b_desc .h_b_F .h_b_F02{font-size:20px;}
	.h_b_desc .h_b_F .h_b_F03{font-size:14px;}
	.page8{ margin-top:30px; height:auto; float:left; padding:10px 0; text-align:center;}
	.page8 p{ font-size:16px;float:none;}
	.page8 span{ font-size:16px; float:none;}
	}