@charset "utf-8";


.product-section .content{width:75%;}
.screen {position: relative;background-repeat: no-repeat;overflow: hidden;}
.upper {position: absolute;left:12.5%;width:75%;height: 100%;top: 0;z-index: 1;}



 
/* product-svg */

.screen-1 {position: relative;}
.screen-1 .upper {position: absolute;top: 20%;left:20%;width:60%;text-align: center;}
.screen-1 .upper .title-style{}
.screen-1 .upper .title-style h1{font-size: 80px;}
.screen-1 .upper .text {font-size:20px;line-height: 30px;color: #8b8b8b;}
.screen-1 .upper .item4 {text-align: center;margin-top: 50px;}
.screen-1 .upper .item4 li{display: inline-block;vertical-align: top;list-style: none;margin: 0;padding: 0;position: relative;width: 22%;}
.screen-1 .upper .item4 li::after{content: '';background: #ccc;display: block;width: 2px;height: 100%;position: absolute;right: 0;top: 5px;}
.screen-1 .upper .item4 li:last-child::after {display: none;}
.screen-1 .upper .item4 li h2{margin: 0px 0 10px 0;font-size: 40px;color: #4db560;}
.screen-1 .upper .item4 li h5{font-weight: normal;margin: 0;color: #999999;font-size: 14px;}
.screen-1 .img {}
.screen-1 .img img{display: block;margin: auto;} 
 


.screen-2 {}
.screen-2 .upper{}
.screen-2 .upper .title-style{text-align: center;margin-top: 160px;}
.screen-2 .upper .title-style h2{color: #fff;width:50%;margin: auto;display: block;}
.screen-2 .upper .title-style h6 {margin: 0;font-size: 12px;color: #999;}
.screen-2 .upper .title-style .line{margin: 20px auto auto;}
.screen-2 .upper .text{width: 70%;color: #b0b2b3;font-size: 16px;line-height: 26px;margin: 20px auto;text-align: center;}
.screen-2 .upper .text .view-btn{}
.screen-2 .upper .img {padding-top: 100px;margin: auto;text-align: center;overflow: hidden;}
.screen-2 .img {}



.screen-3 {position: relative;}
.screen-3 .left{position: absolute;width: 45%;height: 100%; top: 0;left: 12.5%;z-index: 33;}
.screen-3 .left .title-style{}
.screen-3 .left .title-style h2{}
.screen-3 .left .text{padding:20px 0;overflow: hidden;font-size: 18px;line-height: 28px;color: #666666;width: 65%;}
.screen-3 .left .item2{position: relative;overflow: hidden;font-size: 0;}
.screen-3 .left .item2 li{color: #fff;display:block;margin: 0;list-style: none;margin-bottom: 30px;}
.screen-3 .left .item2 li h2{font-size: 24px;margin: 0;}
.screen-3 .left .item2 li h2 strong{font-size: 40px;color: #4db560; margin: 0;}
.screen-3 .left .item2 li h2 sup{font-weight: normal;display: inline-block;vertical-align:super;color: #666;}
.screen-3 .left .item2 li h5 {font-weight: normal;margin: 0;font-size: 14px;color: #666;line-height: 24px;}
.screen-3 .img {position: relative;}	
.screen-3 .img .text {position: absolute;right:19%;top: 40%;}
.screen-3 .img .text h1{font-size: 160px;color: #1f926d;margin: 0;display: inline-block;vertical-align: middle;}
.screen-3 .img .text h3{margin: 0;padding-left:5px; color: #1f926d;display: inline-block;vertical-align: middle;}
.screen-3 .img .text h3 strong{font-size: 70px;}
.screen-3 .img .text h3 p{font-size:18px;text-transform: uppercase;}
 


.screen-4 {min-height: 937px;position: relative;background: url("4-03.jpg") center no-repeat;}
.screen-4 .upper{}
.screen-4 .upper .left {width: 45%;}
.screen-4 .upper .left .title-style{}
.screen-4 .upper .left .title-style h2{}
.screen-4 .upper .left .text{font-size: 16px;line-height: 26px;color: #666666;padding-top:20px;}
.screen-4 .upper .right {text-align: center;}
.screen-4 .upper .right img{display: inline-block;}




.screen-5 {position: relative;}
.screen-5 .upper{}
.screen-5 .upper .top{text-align: center;}
.screen-5 .upper .top .title-style {}
.screen-5 .upper .top .title-style h2{color: #fff;}
.screen-5 .upper .bottom{padding-top: 100px;overflow: hidden;}
.screen-5 .upper .bottom .left{width: 43%;}
.screen-5 .upper .bottom .left li{list-style: none;margin: 0;color: #fff;}
.screen-5 .upper .bottom .left li h2{margin:0;display: inline-block;vertical-align: middle;font-size: 50px;}
.screen-5 .upper .bottom .left li h4{margin:0;display: inline-block;vertical-align: middle;font-size: 16px;line-height: 22px; padding-left: 10px;}
.screen-5 .upper .bottom .left li h6{display: block;clear: both;font-weight: normal;padding:20px 0;margin:10px 0;overflow: hidden;font-size: 14px;line-height: 24px;opacity: .4;background: url("5-03.jpg") left top no-repeat;}
.screen-5 .upper .bottom .right{width: 55%;}
.screen-5 .img img{display: block;}




.screen-6 {position: relative;}
.screen-6 .upper{width: 100%;margin: auto;left: 0;}
.screen-6 .upper {text-align: center;}
.screen-6 .upper .title-style {text-align: center;}
.screen-6 .upper .title-style h2{}
.screen-6 .upper img{display: inline-block;}
.screen-6 .img img{display: block;}




.screen-7 {position: relative;}
.screen-7 .title-style {position: absolute;left: 12.5%;top: 15%;z-index: 3;}
.screen-7 .title-style h2{}
.screen-7 .screen-7-swiper {width: 100%;height: 100%;text-align: center;}
.screen-7 .screen-7-swiper .swiper-slide{}
.screen-7 .screen-7-swiper .swiper-slide img{display: inline-block;}
.screen-7 .screen-7-swiper .spagination7{bottom: auto;left: auto;top: 35%;right: 5%; width:100px;}
.screen-7 .screen-7-swiper .spagination7 span {width: 30px;border-radius: 0;height: auto; display: block;margin:30px auto;overflow: hidden;background: none;position: relative;opacity: 1;font-size: 20px;color: #666;}
.screen-7 .screen-7-swiper .spagination7 span::after {content: '';display: block;width: 100%;height: 2px;background: #ccc;margin-top: 5px;}
.screen-7 .screen-7-swiper .spagination7 span.swiper-pagination-bullet-active::after {background: #4db560;}
 


 


.screen-8 {background-position:center;background-repeat:no-repeat;}
.screen8-swiper-img {height: 100%;position: relative;}
.screen8-swiper-img .section-item::after {content: '';width: 0;height: 2px;background: #4db560;display: block;position: absolute;left: 0;bottom: 0;z-index: 33;}
.screen8-swiper-img .swiper-slide-active .section-item::after {-webkit-animation: w100 4000ms 1;animation: w100 4000ms 1;}
.screen8-swiper-img .section-item{height: 937px;background-position:center;background-repeat:no-repeat;}
.screen8-swiper-img .section-item .title-style {text-align: center;}
.screen8-swiper-img .section-item .title-style h2{color: #fff;}
.screen8-swiper-img .section-item .title-style .line{margin: 10px auto;}
.screen8-swiper-img .section-item .text {width: 975px;margin: auto; font-size: 16px;line-height: 28px;color: #fff;padding: 30px 0;overflow: hidden;text-align: center;}
.screen8-swiper-img .section-item .item {text-align: center;font-size: 0;margin-top: 50px;}
.screen8-swiper-img .section-item .item a{display: inline-block;vertical-align: middle;margin: 0 1%;text-align: center;}
.screen8-swiper-img .section-item .item a h4{display: table;width: 100%; height: 100%;margin: 0;}
.screen8-swiper-img .section-item .item a h4 strong{margin: 0;display: table-cell;vertical-align: middle;font-size: 14px;line-height: 24px; color: #fff;}
.screen8-swiper-img .section-item .item a:hover h4 strong{color: #4db560; }
.screen8-swiper-img .section-item .item1 {margin-top: 50px;}
.screen8-swiper-img .section-item .item1 a {background: url("b1.png") no-repeat;width: 960px;height: 277px;}
.screen8-swiper-img .section-item .item1 a h4 {width: 75%;margin: auto;}
.screen8-swiper-img .section-item .item2 a {background: url("b4.png") no-repeat;width: 295px;height: 120px;}
.screen8-swiper-img .section-item .item2 a:hover {background: url("b41.png") no-repeat;}
.screen8-swiper-img .section-item .item4 a {background: url("b4.png") no-repeat;width: 295px;height: 120px;}
.screen8-swiper-img .section-item .item4 a:hover {background: url("b41.png") no-repeat;}
.screen8-swiper-img .section-item .item3 a {background: url("b3.png") no-repeat;width: 395px;height: 120px;}
.screen8-swiper-img .section-item .item3 a:hover {background: url("b31.png") no-repeat;}
.screen8-swiper-img .section-item .item5 {width: 70%;margin:50px auto auto;}
.screen8-swiper-img .section-item .item5 a {background: url("b5.png") no-repeat;width: 375px;height: 120px;margin: 0 1% 1.5% 1%;}
.screen8-swiper-img .section-item .item5 a:hover {background: url("b51.png") no-repeat;}
.screen8-swiper-img .section-item .item6 {width: 60%;margin:50px auto auto;}
.screen8-swiper-img .section-item .item6 a {background: url("b4.png") no-repeat;width: 295px;height: 120px;margin: 0 1% 1.5% 1%;}
.screen8-swiper-img .section-item .item6 a:hover {background: url("b41.png") no-repeat;}
.swiper-button-bottom {position: absolute;left: 0;bottom: 0;width: 100%;height:60px;background: rgba(128,128,128,.1);overflow: hidden;z-index: 33;color: #fff;font-size: 14px;text-transform: uppercase;}
.swiper-button-bottom .snext8,.swiper-button-bottom .sprev8{opacity: 1;width: auto;height:60px; cursor: pointer;margin-top: 0px;top: 0;z-index: 53;}
.swiper-button-bottom .snext8 h6,.swiper-button-bottom .sprev8 h6{margin: 0;font-size: 14px; line-height:60px;display: block;}
.swiper-button-bottom .snext8:hover h6,.swiper-button-bottom .sprev8 h6:hover {color: #4db560;}
.swiper-button-bottom .sprev8{left: 10%; padding-left:20px;background-image: url("left1.png");background-position: left center;background-size: auto;}
.swiper-button-bottom .snext8{right: 10%;padding-right:20px;background-image: url("right1.png");background-position: right center;background-size: auto;}
.swiper-button-bottom .swiper-pagination.spagination8{bottom: 23px;z-index:13;width: 100px;left: 50%;margin-left: -50px;}



.screen-9 { background-position:center;background-repeat:no-repeat;}
.screen-9 .upper-video {width: 75%;padding: 150px;overflow: hidden; margin: auto;position: relative;}
.screen-9 .upper-video .title-style{width: 400px; position: absolute;left: 8.5%;top: 50%;margin-top: -100px; z-index: 1;}
.screen-9 .upper-video .title-style h2{color: #fff;font-size: 80px;line-height: 80px;}
.screen-9 .upper-video .video-img {width: 90%;float: right;}
.screen-9 .upper-video .video-img .img{position: relative;overflow: hidden;}
.screen-9 .upper-video .video-img .img img{display: block;width: 100%;height: auto;}			
.play{position: absolute;top: 50%;left: 50%;z-index: 10;margin-left: -37.5px;margin-top: -37.5px;cursor: pointer;}
.play i{border: 2px solid #fff;border-radius: 100%; display: block;width: 71px;height: 71px;background: url("play.png") center no-repeat;}
.screen-9 .upper-video .video-img  a {display: block;}
.screen-9 .upper-video .video-img  a:hover i {border: 2px solid #4db560;}
.screen-9 .upper-video .video-img  a:hover img {transform:scale(1.05);transition: all .4s;}





@media screen and (max-width: 5120px) {
	.screen {background-size: 100%;}
	.screen-1 .img img,.screen-2 .img img,.screen-3 .img img,.screen-5 .img img,.screen-6 .img img{width: 100%;}
	.screen-2 .upper .img img{width: auto;display: inline-block;}
	.screen-4 .upper .right {width: 50%;}
	.screen-4 .upper .right img{width: 100%;}
	.screen8-swiper-img .section-item {background-size: 100%;}
}
@media screen and (max-width: 1920px) {
	.screen {background-size: auto;}
	.screen-1 .img img,.screen-2 .img img,.screen-3 .img img,.screen-5 .img img,.screen-6 .img img {width: auto;}
	.screen-4 .upper .right {width: auto;}
	.screen-4 .upper .right img{width: auto;}
	.screen8-swiper-img .section-item {background-size:auto;}
}

@media screen and (max-width: 1680px) {
	.screen-2 .upper .title-style h2 {width: 100%;}
	.screen-3 .left {width: 50%;left: 10%;}
	.screen-3 .img .text {right: 16%;top: 36%;}
	.upper {left: 10%;width: 80%;}
	.screen-7 .screen-7-swiper .spagination7 {right: 1%;}
}

@media screen and (max-width: 1440px) {
	.screen-1 .upper .title-style h1 {font-size: 60px;}
	.screen-1 .upper .text,.screen-2 .upper .text {font-size: 14px;line-height: 24px;}
	.screen8-swiper-img .section-item .item6 {width: 70%;}
	.screen-9 .upper-video .title-style h2 {font-size: 60px;line-height: 60px;}
	.screen-1 .upper {top: 10%;}
	.screen-1 .upper .item4 { margin-top: 20px;}
	.screen-2 .upper .title-style h2 {width: 100%;}
	.screen-2 .upper .title-style { margin-top: 100px;}
	.screen-2 .upper .img {padding-top: 50px;}
	.screen-3 .left {left: 8%;}
	.screen-3 .img .text {right: 12%;top: 33%;}
	.upper {left: 8%;width: 84%;}
	.screen-5 .upper .bottom {padding-top: 30px;}
	.screen-7 .screen-7-swiper .swiper-slide img {width: 80%;margin: auto;}
	.screen-7 .screen-7-swiper .spagination7 {right: 1%;}
	.screen8-swiper-img .section-item .item5 {width:90%;}
	.screen-5 .upper .bottom .right { margin-top: 30px;}
	.screen8-swiper-img .section-item {height: 850px;}
	.screen-7 .right {padding-bottom:0px;}
	.screen-7 .swiper-right {margin-top: 0px;}
	.screen-7 .left-swiper-img {width: 100px;}
	.swiper-tab-title {bottom: 1%;}
	.screen-5 .upper .bottom .left li h6 {;font-size: 12px;line-height: 22px;}
}

@media screen and (max-width: 1366px) {
	.screen-4 {min-height: 700px;}	
}

@media screen and (max-width: 1280px) {
	.screen-2 .upper .text {width: 90%;}
	.screen-2 .upper .img {padding-top: 30px;}
	.screen-2 .upper .img img {width: 60%;}
	.screen-3 .left {left:5%;}
	.screen-3 .left .text {font-size: 14px;line-height: 24px;}
	.screen-3 .img .text {right: 13%;top: 33%;}
	.screen-3 .img .text h1 {font-size: 130px;}
	.title-style h2 { line-height: 40px;}
	.upper {left: 5%;width:90%;}
	.screen-7 .title-style {left: 5%;}
	.screen8-swiper-img .section-item .item5 {width:100%;}
	.screen8-swiper-img .section-item .item a h4 strong {font-size: 12px;line-height: 22px;}
	.screen8-swiper-img .section-item .item4 a {background: url(b4.png) no-repeat;background-size: 100%; width:23%;height: 120px;}
	.screen-9 .upper-video {width: 90%;padding: 150px 0px;}
	.screen-9 .upper-video .title-style {left: 0;}
}


@media screen and (max-width: 1152px) {
	.screen-1 .upper .title-style h1 {font-size: 30px;line-height: 30px;}
	.screen-1 .upper .item4 li h5,.screen-1 .upper .text,.screen-2 .upper .text,.screen-3 .left .text,.screen-3 .left .item2 li h5,.screen-4 .upper .left .text,.screen8-swiper-img .section-item .text {font-size: 12px;line-height: 22px;}
	.screen-1 .upper {top: 10%;left: 0;width: 100%;}
	.screen-1 .upper .item4 li h2 {font-size: 30px;margin: 0;}
	.view-btn h5 {font-size: 12px;}
	.view-btn a{padding: 15px 30px;}
	.screen-3 .left .text {width: 100%;}
	.screen-3 .img .text h1 {font-size: 90px;}
	.screen-3 .img .text h3 strong {font-size: 30px;}
	.screen-3 .left .item2 li {float: left;}
	.screen-3 .left .item2 li:first-child {margin-right: 40px;}
	.screen-4 .upper .right {width: 55%;}
	.screen-4 {min-height: 500px;}
	.screen-5 .upper .bottom .left li h2 {font-size: 30px;}
	.screen-5 .upper .bottom .left li h4 {font-size: 14px;line-height: 20px;}
	.title-style h1, .title-style h2 {font-size: 30px;line-height: 30px;}
	.screen-5 .upper .bottom {padding-top: 0px;}
	.screen8-swiper-img .section-item {height: 650px;}
	.screen8-swiper-img .section-item .item {margin-top: 0px;}
	.screen8-swiper-img .section-item .item a{height: 100px;}
	.screen8-swiper-img .section-item .item a:hover {background: url(b3.png) no-repeat;background-size: 100%;}
	.screen8-swiper-img .section-item .item4 a:hover {background: url(b4.png) no-repeat;background-size: 100%;}
	.screen8-swiper-img .section-item .item3 a,.screen8-swiper-img .section-item .item5 a {background: url(b3.png) no-repeat;background-size: 100%; width: 30%;height: 100px;}
	.screen8-swiper-img .section-item .item1 a {height:240px;background: url(b1.png) no-repeat;background-size: 100%;width:80%;margin: auto;}
	.screen8-swiper-img .section-item .item1 a:hover {background: url(b1.png) no-repeat;background-size: 100%;}
	.screen-9 .upper-video .title-style h2 {font-size: 50px;}
}


@media screen and (max-width: 1024px) {
	
}


@media screen and (max-width: 860px) {
	.upper {left:5%;width:90%;}
	.screen-1 .upper .title-style h1 {font-size: 30px;}	
	.screen-1 .upper {top: 15%;left:5%;width:90%;}
	.screen-1 .upper .item4 li h2 {font-size: 24px;}
	.screen-1 .upper .item4 li h5 {font-size: 12px;line-height:18px;}
	.screen-1 .upper .item4 li {width: 49%;margin-bottom: 20px;}
	.screen-1 .upper .item4 li::after {display: none;}
	.screen-2 .upper .text,.screen-4 .upper .left,.screen-4 .upper .right,.screen-5 .upper .bottom .left,.screen-5 .upper .bottom .right {width: 100%;}
	.screen-2 .upper .title-style {margin-top: 50px;}
	.screen-2 .upper .img {padding-top: 40px;}
	.screen-2 .upper .img img {width: 100%;}
	.screen-3 .left {left: 5%;width: 90%;padding-top:20%;}
	.screen-3 .left .text {font-size: 14px;line-height: 24px;width: 100%;}
	.screen-3 .img .text {display: none;}
	.screen-3 .left .table,.screen-3 .left .table-cell {display: block;}
	.screen-4 {min-height: auto;}
	.screen-4 .upper {width: 90%;position: relative;left: auto;top: auto;margin: auto;padding: 20% 0;}
	.screen-4 .upper .right {margin-top: 50px;}
	.screen-5 .upper .bottom .left li h2 {font-size: 30px;}
	.screen-5 .upper .bottom .left li h4 {font-size: 14px;line-height: 20px;}
	.screen-5 .upper .bottom .left li h6 {font-size: 12px;line-height: 20px;}
	.screen-7 .title-style {left:5%;top:15%;}
	.screen-7 .screen-7-swiper .swiper-slide img {width: 100%;}
	.screen8-swiper-img .section-item .text {width: 90%;font-size: 12px;line-height: 22px;}
	.screen8-swiper-img .table,.screen8-swiper-img .table-cell  {display: block;overflow: hidden;}
	.screen8-swiper-img .section-item {height:auto;padding:20% 0;background-size: cover;min-height:auto;}
	.screen8-swiper-img .section-item .item {margin-top: 0px;}
	.screen8-swiper-img .section-item .item a:hover {background: url(b3.png) no-repeat;background-size: 100%;}
	.screen8-swiper-img .section-item .item4 a {margin: 0 2% 20px 2%;width: 96%;height:112px;background: url(b3.png) no-repeat;background-size: 100%;}
	.screen8-swiper-img .section-item .item3 a,.screen8-swiper-img .section-item .item5 a {width:96%;height: 112px;background-size: 100%;margin: 0 2% 20px 2%;}
	.screen8-swiper-img .section-item .item3 a h4  {width: 90%;margin: auto;}
	.screen8-swiper-img .section-item .item1 a h4,.screen8-swiper-img .section-item .item1 a {width: 100%;margin: 0 0px 20px 0px;}
	.screen8-swiper-img .section-item .item1 a {background:none;background-size: 100%;width:90%;height: 277px;}
	.screen8-swiper-img .section-item .item a h4 strong {font-size: 12px;line-height: 24px;}
	.screen-9 .upper-video {width: 100%;padding: 20% 0;}
	.screen-9 .upper-video .title-style {width: 100%;position: relative;left: 5%;top: auto;margin-top: 0px;}
	.screen-9 .upper-video .video-img {width: 90%;margin: auto;margin-top: 30px;float: none;}
	.screen-9 .upper-video .title-style h2 {font-size: 50px;line-height: 50px;}
	.play i {width: 50px;height: 50px;}
	.play { margin-left: -25px;margin-top: -25px;}
	.screen-6 .upper img.mbshow {width: 86%;margin: auto;}
	.screen-3 .left .item2 li:first-child {margin-right: 20px;width: 40%;}
	.screen-5 .upper .top .title-style h2 {text-align: left;}
	.screen-6 .upper .title-style h2 {text-align: left;width: 80%;display: block;margin: auto;}
	.screen-7 .screen-7-swiper .spagination7 {top: 25%;right: 0;}
	.screen8-swiper-img .section-item .item.item1 a:hover {background:none;}
}
/* iPad x */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.screen-2 .upper .img {padding-top: 0px;}
	.screen-2 .upper .title-style {margin-top: 80px;}
	.screen-5 .upper .bottom .left li h6 { line-height: 18px;}
	.screen-5 .upper .bottom .left li:last-child h6{padding: 20px 0 0 0;margin: 10px 0 0 0;}
}
/* iPad y */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.screen-1 .upper .item4 li {width: 22%;}
	.screen-1 .upper .item4 li::after {display: none;}
	.screen-6 .upper .title-style h2 {width: 80%;}
	.screen-6 .upper img.mbshow {width: 86%!important;}
	.screen8-swiper-img .section-item .item4 a,.screen8-swiper-img .section-item .item3 a,.screen8-swiper-img .section-item .item5 a {width: 46%;}
}