/*home*/
html.autoheight{ height: 100%;}
body.autoheight{ overflow-y: scroll; height: auto;}
.wrapper { position:fixed; top: 0; left: 0; width:100%; height:100%;  transition:transform 0.8s cubic-bezier(.77,0,.175,1); -webkit-transition:transform 0.8s cubic-bezier(.77,0,.175,1); z-index: 3;}
.wrapper.scos{ position: relative;}
.wrapper .page { position: relative; overflow:hidden; width: 100%; height: 100vh; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 1s 0ms cubic-bezier(.77,0,.175,1); -webkit-transition: opacity 0.8s 0ms cubic-bezier(.77,0,.175,1);}
.wrapper .page2{ height: auto !important; overflow: visible;}

.homeload{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background-color: #fff; transition: 0.88s; overflow: hidden;}
.homeload.hide{ opacity: 0; height: 0; visibility: hidden;}
.loadline{ width: 0; transition: 2s linear; height: 6px; background-color: #333;}
.loadline.load{ width: 100%;}
.homeload-text{ width: 100%; height: 100vh; top: 0; text-align: center; position: absolute; left: 0;}
.homeload-text strong{ width: 100%; display: block; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -35px; color: #333; font-family: "Gilroy-Bold.woff"; font-size: 70px; line-height: 1; opacity: 0; font-variant-ligatures: no-common-ligatures;}
.homeload-text strong b{ font-weight: normal; font-family: "Gilroy-Regular.woff";}

.banner{ position: relative; overflow: hidden;}
.banner-swiper{ position: relative; z-index: 2;}
.banner-swiper-item{ float: left; width: 100%; position: relative;}
.banner-swiper-item figure{ overflow: hidden; line-height: 1;}
.banner-swiper-item figure img{ display: block; position: relative; width: 100%; height: auto;}
.banner-swiper-item.slick-current .banner-text small,.banner-swiper-item.slick-current .banner-text strong{ transform: translateY(0px); -webkit-transform: translateY(0px); opacity: 1; visibility: visible;}
.banner-text{ position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%);}
.banner-swiper-item.slick-current .banner-text strong{ transition-delay: 1.1s;}
.banner-text-hide{ overflow: hidden; line-height: 1.2;}
.banner-text small{ width: 1200px; margin: auto; display: block; line-height: 1; color: #fff; font-size: 300px; font-family: "Gilroy-Regular.woff"; opacity: 0; visibility: hidden; transform: translateY(100%); -webkit-transform: translateY(100%); transition: 0.6s 0.6s;}
.banner-text strong{ width: 1200px; margin: auto; margin-top: -10px; display: block; line-height: 1; color: #fff; font-size: 60px; opacity: 0; visibility: hidden; transition: 0.7s 1.2s;}
.banner-btn{ line-height: 1; color: #fff; opacity: 0.5; transition: 0.4s; cursor: pointer; position: absolute; top: 50%; font-size: 26px; margin-top: -13px; z-index: 10;}
.banner-btn.prev{ left: 60px;}
.banner-btn.next{ right: 60px;}
.banner-btn.prev:hover{ opacity: 1; left: 55px;}
.banner-btn.next:hover{ opacity: 1; right: 55px;}

.banner-link{ position: absolute; left: 60px; bottom: 60px; z-index: 10;}
.banner-link a{ display: block; line-height: 1; text-align: center; color: rgba(255,255,255,0.5); margin-top: 16px; font-size: 20px;}
.banner-link a:hover{ color: #fff;}
.banner-link a.kuzhan{ width: 18px; height: 18px; background: url(../image/kuzhan.png) center no-repeat; opacity: 0.5;}
.banner-link a.be{ width: 19px; height: 13px; background: url(../image/be.png) center no-repeat; opacity: 0.5;}
.banner-link a.kuzhan:hover,.banner-link a.be:hover{ opacity: 1;}
.scroll-arrow{ position: absolute; right: 60px; bottom: 56px; line-height: 1.4; color: #ffffff; font-size: 16px; font-family: "Gilroy-Regular.woff"; z-index: 10; animation:moveDownSpot 1000ms infinite; -webkit-animation:moveDownSpot 1000ms infinite; -moz-animation:moveDownSpot 1000ms infinite;}

@keyframes moveDownSpot {
	from{
		transform: translateY(0);
    }
    50%{
        transform: translateY(8px);
    }
	to{
		transform: translateY(0);
	}
}
.commonhidde{ position: relative;}
.us-team{ padding: 174px 60px 0 60px; position: relative; z-index: 5;}
.us-team-title{ margin-bottom: 60px;}
.us-team-hide{ overflow: hidden;}
.us-team-hide strong{ display: block; color: #000000; font-size: 70px; line-height: 1.1;}
.us-team-item{ width: 482px; float: left;}
.us-team-item p{ color: #000000; font-size: 16px; line-height: 1.4;}
.us-team .more{ position: relative; display: inline-block; margin-top: 56px; color: #000000; font-size: 16px; line-height: 1.2; padding-bottom: 13px; border-bottom: 1px solid #ddd; font-weight: normal; transition: .45s;}
.us-team .more.fadeOut{ opacity: 0; visibility: hidden;}
.us-team .more:before{ content: ""; position: absolute; right: 0; bottom: -1px; background-color: #333; width: 0; height: 1px; transition: 0.42s cubic-bezier(0.77, 0, 0.175, 1);}
.us-team .more:hover:before{ width: 100%; right: 0; left: 0;}
.us-team-item1{ width: 388px; margin-left: 58px;}
.infinite-small{ position: relative; height: 300vh; width: 100%; top: -25vh;}
.infinite-small-wraps{  position: absolute; top: 100vh; bottom: 130vh;}
.infinite-small-wrap{ width: 100%; position: sticky; top: 0; height: 100vh; overflow: hidden;}

.infinite-small.fixedbott .backwr{ position: absolute; top: auto; bottom: 0;}
.infinite-small-wrap.fonts .infinite-en small{ color: #fff; translate: color 0.4s;}
.infinite-en{ width: 100%; position: absolute; right: -40%; top: 50%; margin-top: -115px;}
.infinite-en small{ display: block; color: #000000; font-size: 230px; line-height: 1; white-space: nowrap; font-family: "Gilroy-Regular.woff"; transition: 0.35s;  font-variant-ligatures: no-common-ligatures;}
.infinite-en small b{ font-family: "Gilroy-Bold.woff";}
.backwr{ background: #000; position: fixed; width: 100%; height: 100%; left: 0; top: 0; display: none;}

.serve-diff{ padding: 0 60px 228px 60px; background-color: #333; z-index: 5; margin-top: -45vh;}
.serves-title{ float: left; width: 28%;}
.serves-title strong{ display: block; color: #fff; font-size: 70px; line-height: 1.2;}
.serves-title a{ position: relative; display: inline-block; margin-top: 56px; color: #ffffff; font-size: 16px; line-height: 1.2; padding-bottom: 13px; border-bottom: 1px solid #666666;}
.serves-title a:before{ content: ""; position: absolute; right: 0; bottom: -1px; background-color: #fff; width: 0; height: 1px; transition: 0.42s cubic-bezier(0.77, 0, 0.175, 1);}
.serves-title a:hover:before{ width: 100%; right: 0; left: 0;}
.serve-diff-content{ width: 56.666%; float: right;}
.serve-diff-text{ margin-bottom: 130px;}
.serve-diff-item{ width: 47.35%; float: left;}
.serve-diff-item:last-child{ float: right;}
.serve-diff-item p{ color: #ffffff; font-size: 16px; line-height: 1.3; font-family: "Gilroy-Regular.woff";}
.serves-list{ float: left; margin-right: 155px;}
.serves-list li a{ display: inline-block; line-height: 1.2; color: #ffffff; font-size: 24px;}
.serves-list li a:hover{ font-weight: normal;}

.serve-info{ float: left;}
.serve-info p{ color: #666666; font-size: 16px; line-height: 1.3;}
.dynamic{ padding: 0 60px;}
.dynamic-title{ padding: 180px 0 82px; border-bottom: 1px solid #dddddd;}
.dynamic-title h5{ float: left; color: #000000; font-weight: lighter; line-height: 1; font-size: 16px; width: 16.666%;} 
.dynamic-s{ float: left; margin-top: -6px;}
.dynamic-hide{ overflow: hidden;}
.dynamic-hide span{ display: block; color: #000000; font-size: 70px; line-height: 1.2;}
.dynamic-title-text{ float: right; width: 30%;}
.dynamic-title-text p{ color: #000000; font-size: 16px; line-height: 1.4;}
.dynamic-list{ margin-top: 56px;}
.dynamic-list li{ width: 31.3333%; float: left; position: relative;}
.dynamic-list li strong{ margin-bottom: 35px; display: block; line-height: 1.2; color: #000000; font-size: 30px; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.dynamic-list li figure{ display: block; overflow: hidden; line-height: 1;}
.dynamic-list li figure img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.dynamic-list li figure img.mb{ display: none;}
.dynamic-text{ padding: 32px 0 40px; position: relative; border-bottom: 1px solid #dddddd;}
.dynamic-text:before{ content: ""; width: 0; height: 1px; background-color: #292929; position: absolute; right: 0; bottom: -1px; transition: 0.65s cubic-bezier(0.77, 0, 0.175, 1);}
.dynamic-text span{ display: block; float: left; line-height: 1.2; color: #000000; font-size: 15px; width: 76%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.dynamic-text time{ display: block; float: right; color: #000000; font-size: 15px; line-height: 1.2; font-family: "Gilroy-Regular.woff";}
.dynamic-list li a:hover figure img{ transform: scale(1.08); -webkit-transform: scale(1.08);}
.dynamic-list li a:hover .dynamic-text:before{ width: 100%; right: auto; left: 0;}
.dynamic-posite2{ margin-left: 37%; margin-top: 23%;}
.dynamic-posite3{ margin-left: 34.44%; margin-top: -64px; margin-right: 30%;}
.dynamic-list li.dynamic-posite5{ float: right; margin-top: 20%;}
.dynamic-more{ padding: 6.5% 0 11%; text-align: center;}
.dynamic-more a{ position: relative; display: inline-block; margin: auto; line-height: 1; color: #000000; font-size: 16px; padding-bottom: 15px; margin: auto; border-bottom: 1px solid #dddddd;} 
.dynamic-more a:before{ content: ""; width: 0; height: 1px; background-color: #333; position: absolute; right: 0; bottom: -1px; transition: 0.3s;}
.dynamic-more a:hover:before{ width: 100%; right: auto; left: 0;}

.infinate-logo{ height: 100vh; position: relative; }
.infinate-logo-small{ width: 100%; height: 100%; background: url(../image/6.jpg) center no-repeat; background-size: cover; text-align: center;}
.infinate-logo-small small{ position: absolute; left: 0; top: 50%; margin-top: -184px; width: 100%; display: block; text-align: center; font-size: 260px; line-height: 1.4; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; white-space: nowrap; background-attachment: local; background-image: url(../image/6.jpg); background-position: 0 50%; font-family: "Gilroy-Regular.woff"; background-size: cover; font-variant-ligatures: no-common-ligatures; background-repeat: no-repeat;}
.infinate-logo-small.googles small{ background-repeat: repeat-x;}
.infinate-logo-small small b{ font-family: "Gilroy-Bold.woff";}
.information{ padding: 0 60px;}
.informate-list{ margin-top: 88px;}
.informate-list li{ margin-bottom: 60px;}
.informate-list li:last-child{ margin-bottom: 0;}
.informate-list li a{ display: block; overflow: hidden;}
.informate-list li figure{ float: left; display: block; line-height: 1; overflow: hidden; width: 300px; height: auto;}
.informate-list li figure img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.informate-list li strong{ display: block; width: 26.66%; float: left; margin-left: 3.222%; color: #000000; font-size: 40px; font-weight: lighter; line-height: 1.2;}
.informate-list li p{ float: left; margin-left: 3.333%; color: #000000; font-size: 16px; font-weight: lighter; line-height: 1.3; width: 24%;}
.informate-data{ text-align: right; float: right;}
.informate-data b{ display: block; line-height: 1; color: #000000; font-size: 50px; font-family: "Gilroy-Regular.woff"; font-weight: lighter;}
.informate-data time{ display: block; line-height: 1; color: #000000; font-size: 16px; font-family: "Gilroy-Regular.woff";}
.informate-data i{ margin-right: 15px; margin-top: 22px; display: inline-block; color: #000000; font-size: 30px; line-height: 1; opacity: 0; visibility: hidden; transition: 0.3s;}
.informate-list li a:hover figure img{ transform: scale(1.1); -webkit-transform: scale(1.1);}
.informate-list li a:hover .informate-data i{ opacity: 1; visibility: visible; margin-right: 0;}

/* .us-team-title .us-team-hide strong,.serves-title.article-block .serves-hide strong,.dynamic-title.article-block .dynamic-hide span,.probanner-text.article-block .dynamic-hide span,.serves-titles.article-block .dynamic-hide span,.servedtt.article-block .dynamic-hide span,.serves-top-tt.article-block .dynamic-hide span,.about-tops.article-block .prohide .dynamic-hide span,.serves-top-tt.article-block .dynamic-hide span,.article-block.fadetop .dynamic-hide span{ visibility: hidden; transform: translateY(100%); transition: 0.46s 0.2s;}
.active-page2 .us-team-title .us-team-hide strong,.serves-title.articleShow .serves-hide strong,.dynamic-title.articleShow .dynamic-hide span,.probanner-text.articleShow .dynamic-hide span,.serves-titles.articleShow .dynamic-hide span,.servedtt.articleShow .dynamic-hide span,.serves-top-tt.articleShow .dynamic-hide span,.about-tops.articleShow .prohide .dynamic-hide span,.serves-top-tt.articleShow .dynamic-hide span,.articleShow.fadetop .dynamic-hide span{ opacity: 1; visibility: visible; transform: translateY(0px);}
.active-page2 .us-team-title .us-team-hide:nth-child(2) strong,.serves-title.articleShow .serves-hide:nth-child(2) strong,.dynamic-title.article-block .dynamic-hide:nth-child(2) span,.probanner-text.articleShow .dynamic-hide:nth-child(2) span,.serves-titles.articleShow .dynamic-hide:nth-child(2) span,.servedtt.articleShow .dynamic-hide:nth-child(2) span,.serves-top-tt.articleShow .dynamic-hide:nth-child(2) span,.about-tops.articleShow .prohide .dynamic-hide:nth-child(2) span,.about-tops.articleShow .prohide .dynamic-hide span,.serves-top-tt.articleShow .dynamic-hide:nth-child(2) span,.articleShow.fadetop .dynamic-hide:nth-child(2) span{ transition-delay: 0.4s;}
.active-page2 .us-team-title .us-team-hide:nth-child(3) strong,.serves-titles.articleShow .dynamic-hide:nth-child(3) span,.servedtt.articleShow .dynamic-hide:nth-child(3) span{ transition-delay: 0.6s;} */

.infinite-small-wrap small.article-block{ opacity: 0; visibility: hidden; transition:transform 0.8s 0.2s,opacity 0.8s 0.2s,color 0.4s; transform: translateY(160px);}
.infinite-small-wrap small.articleShow,.active-page2 .infinite-small-wrap small{ opacity: 1; visibility: visible; transform: translateX(0); transform: translateY(0px);}
.active-page2 .infinite-small-wrap small{ transition-delay:transform 0.56s,opacity 0.56s;}
.serves-hide{ overflow: hidden;}
.serves-title.article-block .serve-more{ opacity: 0; visibility: hidden; visibility: hidden; transition: 0.8s 0.4s;}
.serves-title.articleShow .serve-more{ opacity: 1; visibility: visible;}

.article-block.fade{ opacity: 0; visibility: hidden; transform: translateY(100px); transition: 0.65s 0.15s;}
.us-team .us-team-item,.aboutmores{ opacity: 0; visibility: hidden; transform: translateY(100px); transition: 0.65s 0.4s;}
.articleShow.fade,.active-page2 .us-team-item,.active-page2 .aboutmores{ opacity: 1; visibility: visible; transform: translateY(0px);}
.article-block.delay1.fade{ transition-delay: 0.35s;}
.active-page2 .us-team-item.delay1{ transition-delay: 0.55s;}
.article-block.delay2.fade{ transition-delay: 0.55s;}


.dynamic-list li.article-block,.informate-list li.article-block{ opacity: 0; visibility: hidden; transform: translateY(120px); transition: 1s cubic-bezier(0.77, 0, 0.175, 1);}
.dynamic-list li.articleShow,.informate-list li.articleShow{ opacity: 1; visibility: visible; transform: translateY(0px);}


/*案例*/
.product{ padding: 0 60px;}
.product-title{ padding: 234px 0 80px;}
.product-list li.dynamic-posite5{ width: 65.55%; margin-top: 3.11%; margin-left: 30%;}
.product-more{ padding: 16.1% 0 16.66%; text-align: center;}
.product-more span{ display: block; width: 112px; height: 110px; background: url(../image/more.png) center no-repeat; margin: auto; transition: 0.4s;}
.product-more span.animates{ animation: rorates 0.5s linear;}

@keyframes rorates {
	from{
		transform: rotate(0deg);
    }
	to{
		transform: rotate(360deg);
	}
}

.product-banner{ position: relative; width: 75%; margin-top: 240px;}
.product-banner figure{ display: block; overflow: hidden; line-height: 1;}
.product-banner figure img{ display: block; width: 100%; height: auto;}
.probanner-text{ position: absolute; right: -20%; z-index: 5; top: 25%;}
.probanner-text .dynamic-hide span{ font-size: 80px; font-weight: lighter;}

.pronet{ width: 780px; margin: auto; max-width: 90%; padding: 12.3% 0 17.5%;}
.pronet-left{ float: left;}
.pronet-left time{ display: block; margin-bottom: 22px; color: #000000; font-size: 16px; font-family: "Gilroy-Bold.woff";}
.pronet-list{ padding-left: 14px; padding-bottom: 20px; border-left: 1px solid #dddddd;}
.pronet-list li{ margin-bottom: 8px; color: #999999; font-size: 18px; font-weight: lighter; line-height: 1;}
.pronet-box{ float: right; width: 355px;}
.pronet-box p{ color: #010101; font-size: 16px; line-height: 1.5; margin-bottom: 18px;}
.checkbtn{ padding-top: 35px;}
.checkbtn a{ display: inline-block; color: #000000; font-size: 16px;}
.checkbtn a i{ display: inline-block; margin-right: 8px; font-size: 22px; font-weight: bold; position: relative; left: 0; top: 1px; transition: 0.35s;}
.checkbtn a:hover i{ left: 3px; top: -2px;}
.product-imgs img{ display: block; width: 100%; height: auto;}

.product-introduct{ padding: 10.7% 0 11.77%; position: relative; perspective: 1000px; transform-style: preserve-3d;}
.product-tro{ width: 900px; float: right; margin-right: 60px;}
.product-tro p{ color: #eeeeee; font-size: 100px; line-height: 1;}
.product-inner-img{ width: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); perspective: 500px; pointer-events: none;}
.product-inner-img img{ display: block; width: 30%; height: auto; max-height: 80%; margin: auto; transform: rotateY(0deg); transform-origin: center bottom; transition: 0.8s;}
.product-inner-img.active img{ transform: rotateY(5deg);}
.product-banner-inner{ padding-top: 240px; background-color: #000000;}
.product-banner-inner .product-banner{ float: right; margin-top: 0;}
.product-banner-inner .probanner-text{ right: auto; left: -20%; }
.product-banner-inner .dynamic-hide span{ color: #fff;}
.pronets-box{ background-color: #000000;}
.pronets-box .pronet-left time{ color: #fff;}
.pronets-box .pronet-box p{ color: #ffffff;}
.pronets-box .checkbtn a i,.pronets-box .checkbtn a{ color: #999999;}
.product-introduct1{ background-color: #000000;}
.product-introduct1 .product-tro p{ color: #111111;}
.product-fades{ background-color: #333; height: 250vh; position: relative;}
.sticky-content{ position: sticky; position: -webkit-sticky; top: 0; height: 100vh; overflow: hidden;}
.stickybg{ width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; background-position: center top; opacity: 0;}
.stickybg img{ display: none;}
.product-imgs{ position: relative; z-index: 5;}
.prevcase{ padding: 9.27% 0 12%;} 
.prevcase-wrap{ width: 1200px; margin: auto; max-width: 90%; border-top: 1px solid #dddddd; padding-top: 56px;}
.prevcase-wrap span{ display: block; line-height: 1; color: #000000; font-size: 16px; margin-bottom: 32px;}
.prevcase-wrap p{ color: #000000; font-size: 70px; line-height: 1.1; transition: 0.35s;}
.prevcase-wrap a:hover p{ color: #999;}
.prevcase1{ background-color: #333;}
.prevcase1 .prevcase-wrap span,.prevcase1 .prevcase-wrap p{ color: #fff;}
.footer1{ background-color: #333;}
.footer1 .footer-top{ border-top: 1px solid #292929;}
.footer1 .mark-tels span{ color: #ffffff;}
.footer1 .header-mark-tel-item p{ color: #666;}
.footer1 .mark-tels .mark-tels-li a{ color: #fff;}

.serves-top{ padding: 178px 60px 156px;}
.serves-texts{ padding-top: 15.888%;}
.serves-titles p{ color: #000000; font-size: 16px; line-height: 1; margin-bottom: 32px;}
.serves-wraps{ width: 56.666%; float: right;}
.serves-items{ width: 48%; float: left;}
.serves-items:last-child{ float: right;}
.serves-items p{ color: #000000; font-size: 16px; line-height: 1.4;}
.product-fades-ff{ background-color: #fff;}
.serve-diffbox{ padding: 170px 60px 220px; overflow: hidden;}
.servedtt{ margin-bottom: 7.77%;}
.servedtt .prohide{ float: left;}
.served-te{ float: left; width: 485px; margin-left: 190px; margin-top: 12px;}
.served-te p{ color: #000000; font-size: 16px; line-height: 1.4;}
.serves-gif{ position: relative; text-align: center;}
.serveimg1{ width: 41.666%; margin: auto; position: relative; left: -1.5%;}
.serves-img-wrap1{ width: 18.8888%; position: absolute; left: 12.555%; bottom: -9.15%;}
.serves-img-wrap1 img{ width: 100%; height: auto;}
.serves-img-wrap1 .arrow{ display: block; line-height: 1; color: #333; font-size: 50px; font-style: normal; position: absolute; left: -60px; bottom: 0; font-weight: bold; animation: move2 2s linear infinite;}
.serves-img-wrap2{ width: 9.4444%; height: auto; position: absolute; right: 32.55%; bottom: -30.96%; z-index: 2;}
.serves-img-wrap2 img{ width: 100%; height: auto;}
.serves-img-wrap2 .arrow{ display: block; line-height: 1; color: #333; font-size: 34px; font-style: normal; position: absolute; left: -35px; bottom: 0; font-weight: bold;}
.serveimg4{ width: 9.444%; height: auto; position: absolute; right: 26.111%; bottom: 0;}
.serves-gif-wrap{ width: 9.444%; position: absolute; right: 15.222%; bottom: 0;}
.serves-gif-wrap .servei1{ width: 100%; height: auto;}
.serves-gif-wrap .arlcle{ width: 65.88%; height: auto; position: absolute; right: -31.2%; bottom: -11.76%; animation: rorates 3s linear infinite;}
.serves-gif-wrap .arrow{ display: block; width: 21px; height: 15px; background: url(../image/arrow.png) center no-repeat; position: absolute; right: -31px; top: 0px; animation: move1 2s infinite;}

@keyframes move1 {
	from{
		transform: translateY(0px);
	}
	50%{
		transform: translateY(8px);
    }
	to{
		transform: translateY(0);
	}
}

@keyframes move2 {
	from{
		transform: translate(0, 0);
	}
	50%{
		transform: translate(8px, -8px);
    }
	to{
		transform: translate(0, 0);
	}
}

.serves-info{ margin-top: 15.55%; }
.serves-ttspan{ float: left; color: #000000; font-size: 16px; line-height: 1.3; width: 30%;}
.serves-list1{ float: left; margin-right: 0;}
.serves-list1 li a{ color: #333;}
.serves-box{ width: 490px; float: left; margin-left: 8.333%;}
.serves-box p{ color: #000000; font-size: 16px; line-height: 1.3;}
.serve-studio{ overflow: hidden; padding: 167px 60px 11.45%; background-color: #333;}
.serves-top-tt{ margin-bottom: 118px;}
.serves-top-tt .dynamic-hide span{  display: inline-block; color: #fff;}
.serves-top-tt .dynamic-hide span b{ font-weight: normal;}
.serves-top-tt strong{ display: block; color: #fff; font-size: 70px; line-height: 1.2; font-weight: lighter;}
.serves-studio-text{ width: 423px; margin-left: 30%;}
.serves-studio-text p{ color: #ffffff; font-size: 16px; line-height: 1.4; margin-bottom: 18px;}
.serves-smalls{ position: relative; right: auto; left: 0; top: 0; margin-top: 0; padding-top: 80px;}
.serves-smalls small{ position: relative; color: #fff; transition: 0s;}
.serves-smalls small b{ font-family: "Gilroy-Bold.woff";}

.infinate-list{ margin-top: 9%;}
.infinate-list-wrap{ float: right; padding-right: 314px; margin-right: 12.444%; }
.infinate-list-wrap li{ position: relative;}
.infinate-list-wrap li span{ display: block; color: #ffffff; font-size: 24px; line-height: 1.3;}
.infinate-list-wrap li b{ display: block; position: absolute; right: -314px; bottom: 12px; line-height: 1; color: #ffffff; font-size: 80px; font-family: "Gilroy-Bold.woff"; font-weight: normal; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: 0.45s;}
.infinate-list-wrap li i{ display: block; width: 238px; width: 0; height: 1px; background-color: #ffffff; position: absolute; right: -314px; bottom: 12px; transition: 0.5s;}
.infinate-list-wrap li.active b{ opacity: 1; visibility: visible; transform: translateY(0px); transition-delay: 0.2s;}
.infinate-list-wrap li.active i{ width: 238px; right: auto; left: 242px;}

.about-boxs{ background-color: #333; padding: 230px 60px 15.6%;}
.about-tops{ margin-bottom: 7.3333%;}
.about-tops p{ display: block; float: left; color: #fff; font-size: 16px; line-height: 1.2;}
.about-tops .prohide{ margin-top: -6px; display: block; margin-left: 180px; color: #ffffff; font-size: 70px; line-height: 1.1;}
.about-tops .prohide .dynamic-hide span{ color: #fff;}
.about-studio{ margin-left: 23.333%;}
.about-listd{ margin-top: 7.38%; padding-right: 16.666%;}
.about-list-it{ float: right;}
.about-list-it p{ color: #fff; font-size: 24px; line-height: 1.2;}
.about-small{ float: right; margin-right: 124px;}
.about-small p{ color: #fff; font-size: 24px; line-height: 1.1;  font-family: "Gilroy-Regular.woff";}
.about-help{ margin-bottom: 10.333%;}
.about-help-text{ float: right; width: 360px; margin-right: 10.3333%;}
.about-help-text p{ color: #fff; font-size: 16px; line-height: 1.2;}
.about-year{ margin-top: 8.333%;}
.about-year-wrap{ float: right; margin-right: -90px;}
.about-year-wrap p{ color: #ffffff; font-size: 15px; line-height: 1;}
.about-year-wrap time{ display: block; line-height: 1; color: #fff; font-size: 500px; font-family: "Gilroy-Regular.woff"; margin-top: -50px;}

.about-support{ padding: 172px 60px 11.45%; background-color: #333;}
.about-support-left{ width: 354px; float: left;}
.about-support-left p{ color: #fff; font-size: 16px; line-height: 1.2;}
.about-support-text{ margin-left: 540px; margin-top: -10px;}
.about-support-text .dynamic-hide span{ color: #fff;}
.abouts-support-list{ margin-top: 88px; padding-top: 70px; border-top: 1px solid #fff;}
.abouts-supports-li li{ position: relative; border-bottom: 1px solid rgba(255,255,255,0.1);}
.abouts-supports-li li a{ display: block; height: 99px;}
.aboutimg{ width: 24.9%; height: 99px; float: left; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center;}
.aboutimg img{ max-width: 100%;}
.abouts-supports-li li p{ color: #ffffff; font-size: 16px; line-height: 1; margin-top: 38px; width: 24.5%; float: left; transition: 0.3s;}
.abouts-supports-li li p.name1{ width: 29.95%;}
.abouts-supports-li li span{ display: block; float: left; line-height: 1; color: #fff; font-size: 16px; margin-top: 38px; transition: 0.3s;}
.abouts-supports-li li i{ display: block; float: right; line-height: 1; color: #fff; font-size: 20px; font-weight: bold; margin-top: 35px; transition: 0.35s;}
.abouts-supports-li li a:hover i{ opacity: 0.5;}
.abouts-supports-li li a:hover p,.abouts-supports-li li a:hover span{ color: #666;}
.news-fid{ float: right; width: 50%; }
.news-fid .dynamic-wrs{ width: 405px; max-width: 100%;}
.dynamic-infos{ padding: 90px 0 140px;}
.dynamic-infos a{ display: block; position: relative;}
.dynamic-infos figure{ display: block; width: 46.666%; float: left; line-height: 1; overflow: hidden;}
.dynamic-infos figure img{ display: block; width: 100%; height: auto; transition: 0.78s;}
.dynamic-infos-text{ width: 50%; position: absolute; right: 0; height: 100%; top: 0;}
.dynamic-infos-wrap strong{ display: block; float: left; color: #000000; font-size: 50px; line-height: 1.2; width: 45.555%; margin-top: -8px;}
.dynamic-infos-wrap p{ float: right; width: 47.111%; color: #000000; font-size: 16px; line-height: 1.2;}
.dynamic-infos-text time{ display: block; width: 58.444%; position: relative; color: #000000; font-size: 50px; line-height: 1; position: absolute; left: 0; bottom: 0; font-family: "Gilroy-Regular.woff";}
.dynamic-infos-text time i{ display: block; color: #333; font-size: 38px; font-style: normal; transition: 0.35s;}
.dyrrow{ position: absolute; right: 0; top: 0;overflow: hidden;}
.dyrrow .show{ transition-delay: 0.3s;}
.dyrrow .hide{ position: absolute; left: -100%; top: 0;}


.dynamic-infos a:hover figure img{ transform: scale(1.05);}
.dynamic-infos a:hover .dynamic-infos-text time i.show{ transform: translateX(100%); transition-delay: 0s;}
.dynamic-infos a:hover .dynamic-infos-text time i.hide{ left: 0; transition-delay: 0.3s;}
.dynamic-btns{ padding-bottom: 40px; border-bottom: 1px solid #dddddd;}
.dynamic-btns a{ display: block; float: left; margin-right: 50px; color: #999; font-size: 16px; font-weight: lighter;}
.dynamic-btns a.active,.dynamic-btns a:hover{ color: #333;}
.informate-list1{ margin-top: 58px;}
.news-title-top{ padding: 12% 60px 6.97%;}
.news-title-fix time{ display: block; float: left; color: #000000; font-size: 16px; width: 16.666%;}
.news-title-fix h4{ color: #000000; font-size: 70px; font-weight: lighter; line-height: 1; float: left;}
.news-title-top strong{ display: block; color: #333; font-size: 70px; line-height: 1.1;}
.news-viewsd{ width: 1200px; margin: auto;}
.news-viewsd .newsttd{ display: block; color: #000000; font-size: 30px; line-height: 1.2; margin-bottom: 50px;}
.news-viewsd p,.news-viewsd a{ color: #222222; font-size: 16px; line-height: 1.5;}
.news-viewsd img{ max-width: 100%; width: auto !important; height: auto !important;}
.news-share{ position: fixed; left: 60px; bottom: 60px; z-index: 20;}
.share{ position: relative; margin-bottom: 10px;}
.share span{ display: block; width: 60px; height: 60px; border-radius: 50%; text-align: center; line-height: 60px; color: #fff; background-color: #333; font-size: 18px;}
.share:hover .share-btn,.share:hover .share-btn a{ opacity: 1; visibility: visible; transform: translateX(0px);}
.share:hover .share-btn a.sina{ transition-delay: 0.15s;}
.share-btn{ width: 140px; position: absolute; left: 60px; top: 0; padding-left: 10px; opacity: 0; visibility: hidden; transform: translateX(20px); transition: 0.4s;}
.share-btn a{ display: block; float: left; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 60px; background-color: #00cc0b; color: #fff; font-size: 20px; margin-right: 10px; opacity: 0; visibility: hidden; transform: translateX(30px); transition: 0.4s;}
.share-btn a.sina{ background-color: #e6162c;}
.news-share .backlist{ display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; border-radius: 50%; color: #333; font-size: 20px; font-weight: bold; background-color: #eeeeee;}
.news-share .backlist:hover{ background-color: #333; color: #fff; text-indent: -4px;}
.contact-ti{ margin-bottom: 140px;}
.contacts .footer-text-list .header-mark-tel-item:first-child{ margin-left: 0;}
.contacts .mark-tels span.tel{ text-decoration: underline;}
.contacts .mark-tels a{ font-size: 24px;}
.contact-content{ float: left; width: 416px; margin-left: 165px;}
.contact-content p{ color: #000000; font-size: 1.4rem; line-height: 25px;}
.contacts .allow-item{ display: block; margin-left: 622px;}
.message-box{ padding: 9.375% 60px 4.54%; overflow: hidden;}
.message-title{ float: left; color: #000000; font-size: 16px; line-height: 1;}
.message-text{ width: 1020px; float: right; margin-right: 58px;}
.message-tt{ display: block; line-height: 1.2; color: #000000; font-size: 70px; font-weight: lighter; margin-bottom: 78px;}
.message-text .dynamic-s{ float: none;}
.message-input{ margin-top: 78px;}
.message-item{ margin-bottom: 58px; width: 47%; float: left;}
.message-item:last-child{ float: right;}
.message-item span{ display: block; color: #000000; font-size: 16px; line-height: 1.2;}
.message-item input,.message-item .sele{ padding: 0; border: none; margin: 0; width: 100%; padding-top: 14px; padding-bottom: 20px; border-bottom: 1px solid #dddddd; color: #333; font-size: 16px; font-weight: lighter; transition: 0.35s; outline: none;  }
.message-item input:focus::placeholder{ opacity: 0;}
.message-item .sele{ background: url(../image/arrow1.png) right 18px no-repeat;}
.message-item input:focus{ border-color: #333;}
.message-item .citys .sele{ width: 100%;}
/*.message-item .citys .sele:last-child{ float: right;}*/
.contact-usd{ margin-bottom: 98px; padding-top: 28px;}
.contact-usd strong{ display: block; line-height: 1.2; color: #000000; font-size: 30px;}
.contact-list{ margin-top: 28px;}
.contact-i{ float: left; margin-right: 60px; position: relative;}
.contact-i label{ cursor: pointer; display: block;}
.contact-i span{ display: block; float: left; width: 14px; height: 14px; border: 1px solid #eeeeee; cursor: pointer; position: relative; background-color: #fff; transition: 0.3s;}
.contact-i span:before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #333; opacity: 0; visibility: hidden; transform: scale(0); transition: 0.3s;}
.contact-i input{ width: 16px; height: 16px; position: absolute; left: 0; top: 0; margin: 0; z-index: 2; opacity: 0; filter:alpha(opacity=0);}
.contact-i p{ float: left; color: #333; font-size: 16px; line-height: 1; margin-left: 10px;}
.contact-i.active span{ border-color: #333;}
.contact-i.active span:before{ opacity: 1; visibility: visible; transform: scale(1);}
.contact-message{ margin-bottom: 50px;}
.contact-message span{ display: block; line-height: 1; color: #000000; font-size: 16px; margin-bottom: 18px;}
.contact-message textarea{ width: 100%; box-sizing: border-box; height: 205px; border: 1px solid #dddddd; padding: 23px 24px; color: #999999; font-size: 16px; line-height: 1.5; font-family: "微软雅黑"; resize: none; transition: 0.4s;}
.contact-message textarea:focus{ border-color: #333;}
.send-us a{ cursor: pointer; position: relative; display: inline-block; padding: 15px 0; color: #000000; font-size: 16px; border-bottom: 1px solid #dddddd; line-height: 1;}
.send-us a:before{ content: ""; width: 0; height: 1px; background-color: #333; position: absolute; right: 0; bottom: -1px; transition: 0.35s;}
.send-us a i{ display: inline-block; vertical-align: middle; color: #333; font-size: 30px; font-weight: normal; font-style: bold; margin-left: 9px; margin-top: -2px; line-height: 1; transition: 0.3s;}
.send-us a:hover i{ margin-left: 14px;}
.send-us a:hover:before{ width: 100%; right: auto; left: 0;}
.contacts{ overflow: hidden;}
.contact-fade{ height: auto;}
.contact-fade .sticky-content{ height: auto;}
.contact-fade .sticky-content figure{ opacity: 1;}
.contact-fade .sticky-content figure img{ display: block; width: 100%; height: auto;}