@charset "utf-8";

 
/* product-svg */

.screen-1 {position: relative;}
.screen-1 .title-style{}
.screen-1 .title-style h5{font-size: 24px;line-height: 34px;}
.screen-1 .title-style h4{font-size: 24px;}
.screen-1 .img {}
.screen-1 .img img{display: block;margin: auto;} 

 

.screen-2 {position: relative;}
.screen-2 .left{width: 50%;}
.screen-2 .left .title-style h2{color: #fff;}
.screen-2 .left .text{clear: both;color: #b9babc;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;}
.screen-2 .right{}
.screen-2 .img {}
.screen-2 .img img{display: block;margin: auto;}


 
.screen-3 {position: relative;}
.screen-3 .left{width: 34%;}
.screen-3 .left .title-style h2{color: #fff;}
.screen-3 .left .text{clear: both;color: #b9babc;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;}
.screen-3 .right{}
.screen-3 .img {}
.screen-3 .img img{display: block;margin: auto;}


.screen-4 {position: relative;text-align: center;padding: 140px 0 100px 0;overflow: hidden;}
.screen-4 .top{}
.screen-4 .top .title-style .line{margin: 20px auto auto;}
.screen-4 .top .text{clear: both;color: #000;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;opacity: .6;}
.screen-4 .img {text-align: center;padding-top:70px;overflow: hidden;}
.screen-4 .img img{display: inline-block;}


.screen-5 {position: relative;}
.screen-5 .left{width: 55%;}
.screen-5 .left .title-style h2{color: #fff;}
.screen-5 .left .text{clear: both;color: #b9babc;font-size: 16px;line-height: 26px;padding:40px 0;overflow: hidden;}
.screen-5 .img img{display: block;margin: auto;}

 

.screen-6 {position: relative;}
.screen-6 .left{width: 45%;}
.screen-6 .left .title-style {margin-top: 50px;}
.screen-6 .left .text{clear: both;color: #000;font-size: 16px;line-height: 26px;padding: 20px 0;opacity: .6; overflow: hidden;}
.screen-6 .right{}
.screen-6 .img img{display: block;margin: auto;}


.screen-7 {position: relative;}
.screen-7 .left{width: 55%;}
.screen-7 .left .title-style {margin-top: 50px;}
.screen-7 .left .title-style h2 {color: #fff;}
.screen-7 .left .text{clear: both;color: #b9babc;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;width: 80%;}
.screen-7 .img img{display: block;margin: auto;} 

 

.screen-8 {position: relative;}
.screen-8 .right{width:50%;}
.screen-8 .right .title-style {margin-top: 50px;text-align: right}
.screen-8 .right .title-style h2 {color: #fff;}
.screen-8 .right .title-style .line {margin: 20px 0 0 ;float: right;clear: both;}
.screen-8 .right .text{clear: both;color: #b9babc;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;text-align: right;}
.screen-8 .right .text h3 {font-size: 24px;}
.screen-8 .img img{display: block;margin: auto;} 

 
.screen-9 {position: relative;text-align: center;padding: 140px 0 100px 0;overflow: hidden;}
.screen-9 .top{}
.screen-9 .top .title-style h2 {font-size: 35px;}
.screen-9 .top .title-style .line{margin: 20px auto auto;}
.screen-9 .top .text{clear: both;color: #000;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;opacity: .6;}
.screen-9 .img {text-align: center;padding-top:70px;overflow: hidden;}
.screen-9 .img img{display: inline-block;}




.screen-10 {position: relative;}
.screen-10 .left{width: 55%;}
.screen-10 .left .title-style {margin-top: 50px;}
.screen-10 .left .title-style h2 {color: #fff;}
.screen-10 .left .text{clear: both;color: #b9babc;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;width: 80%;}
.screen-10 .img img{display: block;margin: auto;} 



.screen-11 {position: relative;}
.screen-11 .right{width:50%;}
.screen-11 .right .title-style {}
.screen-11 .right .title-style h2 {}
.screen-11 .right .title-style .line {margin: 20px 0 0 ;}
.screen-11 .right .text{clear: both;font-size: 16px;line-height: 26px;padding: 20px 0;overflow: hidden;}
.screen-11 .right .text h3 {font-size: 24px;}
.screen-11 .img img{display: block;margin: auto;}




.screen-12 {background-position:center;background-repeat:no-repeat;}
.screen-12 *{-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.screen-12 .left {width: 50%;}
.screen-12 .swiper-big-img1 {}
.screen-12 .swiper-big-img1 .swiper-slide {background: url('7-bg1.jpg') center repeat-x;}
.screen-12 .swiper-big-img1 .img{position: relative;}
.screen-12 .swiper-big-img1 .img img {display: block;width: 100%;height: auto;}
.screen-12 .left-swiper-img {position: absolute;left: 0;top: 0;width: 140px;height: 100%;z-index: 3;background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.5));}
.screen-12 .swiper-small-img2 {height:70%;margin: 150px 0 0px 0;overflow: hidden;}
.screen-12 .swiper-small-img2 .img{position: relative;cursor: pointer;width: 80%;margin: auto;}
.screen-12 .swiper-small-img2 .img img {display: block;width: 100%;height: auto;opacity: .3;}
.screen-12 .swiper-small-img2 .swiper-slide-thumb-active .img img {opacity: 1;}
.screen-12 .right {width: 50%;padding-bottom: 130px;overflow: hidden;}
.screen-12 .swiper-right {margin-top: 100px;color: #000;background: #fff;padding:0 10%;position: relative;height: 710px;overflow: hidden;}
.screen-12 .swiper-right .swiper-text  {height: 100%;}
.screen-12 .swiper-right .swiper-text .swiper-wrapper {display: table;width: 100%;height: 100%;}
.screen-12 .swiper-right .swiper-text .swiper-wrapper .swiper-slide {display: table-cell;vertical-align: middle;height: auto;}
.screen-12 .swiper-right .swiper-text .item {position: relative;}
.screen-12 .swiper-right .swiper-text .item .title-1{border-bottom: 4px solid #000;padding-bottom: 20px;position: relative;}
.screen-12 .swiper-right .swiper-text .item .title-1 h3 {font-size: 36px;color: #1a1a1a;margin: 0;text-transform: uppercase;}
.screen-12 .swiper-right .swiper-text .item .title-1 h5 {font-size: 20px;color: #00bf86;margin: 0;text-transform: uppercase;}
.screen-12 .swiper-right .swiper-text .item .text {padding:30px 0 0 0;overflow: hidden;line-height: 24px;font-size: 14px;color: #666666;}
.screen-12 .swiper-right .swiper-text .item .text .rolling-height {height: 420px;}
.screen-12 .swiper-right .swiper-text .item .text .rolling-height .rolling1 {padding-right: 3%;}
.screen-12 .swiper-right .swiper-text .item .text  strong{color: #1a1a1a;}
.screen-12 .swiper-right .swiper-text .item .text .rolling-height h2 {color: #1a1a1a;text-transform: uppercase;font-size: 24px;margin:3px 0;}
.swiper-tab-screen .swiper-button-next,.swiper-tab-screen .swiper-button-prev  {width: 100px;height: 60px;bottom:100px;top: auto;background-color: #333333;}
.swiper-tab-screen .swiper-button-next {right: 95px;left: auto;background-image: url("right1.png");background-size: auto;}
.swiper-tab-screen .swiper-button-prev {right: 210px;left: auto;background-image: url("left1.png");background-size: auto;}
.swiper-tab-title {position: absolute;left:10%;bottom: 7%;width:620px;height: 100px;}
.swiper-tab-title h4{color: #666;font-size: 14px;text-transform: uppercase;margin: 0;}
.swiper-tab-title .swiper-slide {cursor: pointer;}
.swiper-tab-title .swiper-slide-thumb-active  h4 {color: #fff;}
.ulli {display: inline-block;vertical-align: top; margin-right: 50px;margin-bottom: 30px;}
.ulli ul,.ulli li,.olli ol{list-style: none;margin: 0;padding: 0;font-size: 16px;}
.ulli strong,.olli strong{padding-bottom: 10px;display: block;font-size: 16px;}
.ulli li {line-height: 30px;}
.olli {display: inline-block;vertical-align: top;margin-bottom: 30px;}
.olli ol li {font-size: 14px;}
.leftw40 {width: 39%;}
.leftw60 {width: 59%;}




.screen-13 {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: #00bf86;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: #00bf86; }
.screen8-swiper-img .section-item .item3 a {background: url("b3.png") no-repeat;width: 282px;height: 77px;}
.screen8-swiper-img .section-item .item3 a:hover {background: url("b31.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: #00bf86;}
.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;}







@media screen and (max-width: 5120px) {
	.screen {background-size: 100%;}
	.screen8-swiper-img .section-item {background-size: 100%;}
	.screen-12 .swiper-right {height: 910px;}
	.screen-12 .swiper-right .swiper-text .item .text .rolling-height {height: 500px;}
	.swiper-tab-screen .swiper-button-next, .swiper-tab-screen .swiper-button-prev {bottom: 150px;}
	.screen-1 .img img,.screen-2 .img img,.screen-3 .img img,.screen-5 .img img,.screen-6 .img img,.screen-7 .img img,.screen-8 .img img,.screen-10 .img img,.screen-11 .img img{width: 100%;}
	.screen-6 .right .swiper-img .img img {width: 100%!important;}
}
@media screen and (max-width: 1920px) {
	.screen {background-size: auto;}
	.screen8-swiper-img .section-item {background-size:auto;}
	.screen-12 .swiper-right {height: 710px;}
	.screen-12 .swiper-right .swiper-text .item .text .rolling-height {height: 420px;}
	.swiper-tab-screen .swiper-button-next, .swiper-tab-screen .swiper-button-prev {bottom: 100px;}
	.screen-1 .img img,.screen-2 .img img,.screen-3 .img img,.screen-5 .img img,.screen-6 .img img,.screen-7 .img img,.screen-8 .img img,.screen-10 .img img,.screen-11 .img img{width: auto;}
	.screen-6 .right .swiper-img .img img {width: auto!important;}
}
@media screen and (max-width: 1680px) {
	.screen-8 .right {width: 55%;}	 
}

@media screen and (max-width: 1440px) {
	.upper {left: 8%;width: 84%;} 
	.title-style h1 {font-size:50px;line-height:50px;}
	.screen-1 .title-style h5,.screen-8 .right .text h3 {font-size:18px;line-height: 28px;margin: 0;}
	.screen-2 .left .text,.screen-3 .left .text,.screen-7 .left .text,.screen-8 .right .text,.screen-10 .left .text{font-size:14px;line-height: 24px;}
	.screen-4 .img,.screen-9 .img {padding-top: 0px;width: 90%;margin: auto;}
	.screen-9 .img {padding-top: 30px;}
	.screen-4 .img img,.screen-5 .left .text,.screen-9 .img img { width: 50%;}
	.screen-8 .right .title-style h2,.screen-8 .right .title-style {margin: 0;}
	.screen-12 .swiper-right {margin-top: 0px;}
	.screen-12 .right {padding-bottom: 0px;}
	.swiper-tab-screen .swiper-button-next, .swiper-tab-screen .swiper-button-prev,.swiper-tab-title {bottom: 0px;}
}

@media screen and (max-width: 1366px) {
	.screen-2 .left .text, .screen-3 .left .text, .screen-7 .left .text, .screen-8 .right .text, .screen-10 .left .text {font-size: 13px;line-height: 23px;}	
	.upper {left:5%;width: 90%;}
	.screen-2 .left .text {padding: 0px 0;}
}

@media screen and (max-width: 1280px) {
	.screen-2 .left .text, .screen-3 .left .text, .screen-7 .left .text, .screen-8 .right .text, .screen-10 .left .text {font-size: 12px;line-height: 22px;}
	.title-style h2 {line-height: 40px;}
	.swiper-tab-title {display: none;}
	.screen-12 .swiper-right {margin-top:0px;height: 600px;}
}


@media screen and (max-width: 1152px) {
	.view-btn h5 {font-size: 12px;}
	.view-btn a{padding: 15px 30px;}
	.title-style h1, .title-style h2 {font-size: 30px;line-height: 30px;}
	.screen-1 .upper .title-style h1,.screen-9 .top .title-style h2 {font-size: 30px;}	
	.screen-6 .right {width: 50%;}	
	.screen-1 .title-style h5, .screen-8 .right .text h3 {font-size: 14px;line-height: 24px;}
	.screen8-swiper-img .section-item {height: 650px;}
	.screen8-swiper-img .section-item .item {margin-top: 0px;}
	.screen8-swiper-img .section-item .text {width: 90%;font-size: 12px;line-height: 22px;}
}


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


@media screen and (max-width: 860px) {
	.upper {left:5%;width:90%;}
	.screen-1 .table,.screen-1 .table-cell,.screen-6 .table,.screen-6 .table-cell,.screen-3 .table,.screen-3 .table-cell,.screen-7 .table,.screen-7 .table-cell,.screen-8 .table,.screen-8 .table-cell,.screen-10 .table,.screen-10 .table-cell {display: block;}
	.screen-1 .upper,.screen-6  {padding:20% 0;}
	.screen-2 .left,.screen-2 .right,.screen-3 .left,.screen-5 .left,.screen-6 .left,.screen-7 .left,.screen-8 .right,.screen-10 .left,.screen-11 .right,.screen-12 .left,.screen-12 .right {width: 100%;float: none;}
	.screen-3 .title-style{padding-top: 20%;}
	.screen-4,.screen-9 {padding: 20% 0;}
	.screen-6 .left .title-style,.screen-7 .left .title-style,.screen-10 .left .title-style {margin-top: 0px;}
	.screen-4 .img img,.screen-5 .left .text  {width: 100%;}
	.screen-5 .left .text {font-size: 14px;line-height: 24px;padding: 40px 0 0;}
	.screen-6 .upper {position: relative;left: auto;width: 90%;margin: auto;}
	.screen-6 .img,.swiper-tab-title {display: none;}
	.screen-6 .upper .right {margin-top: 50px;}
	.screen-4 .img img, .screen-5 .left .text, .screen-9 .img img {width: 100%;}
	.screen-12 {background-size: cover;}
	.screen8-swiper-img .section-item .text {padding: 10px 0 30px 0;}
	.swiper-tab-screen .swiper-button-next, .swiper-tab-screen .swiper-button-prev {height: 40px;}
	.swiper-tab-screen .swiper-button-next {width: 50%;right: 0px;}
	.swiper-tab-screen .swiper-button-prev {width: 50%;right: auto;left: 0px;}
	.screen-12 .swiper-right {height: auto;padding: 15% 5% 25% 5%}
	.screen8-swiper-img .section-item .text {width: 90%;font-size: 12px;line-height: 22px;}
	.screen8-swiper-img .section-item .item a {margin-bottom:10px;}
	.screen-6 .right {width: 100%;}	
	.screen-12 .swiper-right .swiper-text .item .title-1 h3 {font-size: 26px;}
	.screen-7 .left .title-style,.screen-10 .left .title-style {margin-top: 50px;}
}
/* iPad x */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	.screen-12 .swiper-right .swiper-text .item .title-1 h3 {font-size: 26px;}
}
/* iPad y */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	
}