@charset "utf-8";



 
/* index - banner */
.banner {position: relative;}
.index-banner-swiper {position: relative;background: #000;z-index:1;}
.banner-slide {position: relative;}
.banner-slide .txt{position: absolute;width: 900px;height: 100%;left:6.25%;top:0;z-index: 33;}
.banner-slide .txt h4{font-size: 1.1rem;font-weight: normal;color: #000;margin: 0;padding: 0;position: relative;text-transform: uppercase;padding-left: 1.2rem;}
.banner-slide .txt h4::before {content: '';display:block;width: 4px;height: 4px;border: 2px solid #fa8d3e;border-radius: 100%;position: absolute;left: 0;top: 50%;margin-top: -3px;}
.banner-slide .txt h2{font-size: 8rem;color: #000;margin:0;line-height: 9rem;font-weight: bold;}
.banner-slide .txt h3{font-size: 2rem;color: #000;padding: 1.3rem 0;margin:0;font-weight: normal;line-height: 1;}
.banner-slide .txt-bottom {position: absolute;width: 40rem;left: 0;bottom: 10rem;z-index: 40;}
.banner-slide .txt-bottom h6{font-size: 1rem;color: #929292;margin: 0;padding-bottom: 3rem;font-weight: normal;line-height: 2;display: block;}
.viewmore {width: 10rem;height: 3.5rem;line-height: 3.5rem;text-align: center;background: #fa8d3e;font-size: 0;margin: 0;clear: both;/* top: -50%; */}
.viewmore span{color: #fff;font-size: 0.9rem;text-transform: uppercase;display: inline-block;text-align:  center;vertical-align:middle;}
.viewmore i{background: url("../images/r1.png") center no-repeat;width: 1.4rem;height: 1.4rem;margin-left: 0.5rem;display: inline-block;vertical-align:middle;}
.viewmore a {display: block;overflow: hidden;}
.viewmore a:hover {background: #868686;}
.banner-slide .img {text-align: center;}
.banner-slide .txt h4 {transform:translateY(200px);opacity:0;transition:all 0.3s;}
.banner-slide .txt h2 {transform:translateY(200px);opacity:0;transition:all 0.5s;}
.banner-slide .txt h3 {transform:translateY(200px);opacity:0;transition:all 0.8s;}
.banner-slide .viewmore {transform:translateY(200px);opacity:0;transition:all 1s;}
.banner-slide .txt-bottom {transform:translateY(200px);opacity:0;transition:all 0.4s;}
.index-banner-swiper .swiper-slide-active .txt h4,
.index-banner-swiper .swiper-slide-active .txt h2,
.index-banner-swiper .swiper-slide-active .txt h3,
.index-banner-swiper .swiper-slide-active .txt h6,
.index-banner-swiper .swiper-slide-active .viewmore,
.index-banner-swiper .swiper-slide-active .txt-bottom{transform:translateY(0px);opacity:1;}

.banner-slide.center .txt{width: 900px;left:50%;top:0;margin-left: -450px;text-align: center;}
.banner-slide.center .product-img {display: none;}
.banner-slide.center .viewmore {margin: auto;}
.banner-slide.center .txt h4 {display: inline-block;}
.banner-slide.right .txt{width: 800px;left:auto;right:6.25%;top:0;}
.banner-slide.right .product-img { left:0;right:auto;text-align: left;}
.banner-slide.none .txt{display: none;}



.product-img {position: absolute;bottom:1%;right: 0;width:60%;z-index: 1;transform: translate3d(500px,-40px,0px);opacity:0;transition:all 0.6s;}
.product-img img {display: block;width: 100%;height: auto;}
.index-banner-swiper .swiper-slide-active .product-img {right:6.25%;transform:translate3d(0,0px,0px);opacity:1;}

.spagination {position: absolute;width:40px;height:80px; left: auto;right:6.25%;top: 50%;margin-top: -40px;z-index: 1;color: #fff;text-align: right;}
.spagination::after {content: '';display: block;width: 100%;height: 1px;position: absolute;left: 0;top: 50%;background: #535353;opacity: .3;}
.spagination span {font-size: 0.9rem;color: #666;padding: 0.2rem 0;display: block;}
.spagination span.swiper-pagination-current {font-size: 1.4rem;color: #000;}

.swiper-bottom { position:absolute;bottom:9%;right:0px;width:100%;padding:0;z-index:2;}
.swiper-relative {position: relative;height: 3rem;overflow:hidden;}
.swiper-relative::before,.swiper-relative::after {content: '';display: block;height: 2px;background: #fff;opacity: .1;position: absolute;top: 23px;display: none;}
.swiper-relative::before {width:88%;left: 0;}
.swiper-relative::after {width:5.5%;right: 0;}
.banner .swiper-button-next,.banner .swiper-button-prev{top:auto;bottom:50%;margin-bottom: -1.5rem;left:auto;width: 2.8rem;height: 2.8rem;border: 0.05rem solid rgb(255, 255, 255);border-radius:100%;margin-top:auto;background: none;z-index: 99;outline: none;opacity:0.6;overflow: visible;}
.banner .swiper-button-next:hover,.banner .swiper-button-prev:hover { opacity:1;}
.banner .swiper-button-prev { background:url(../images/left-b.svg) center no-repeat;right:9%; }
.banner .swiper-button-next { background:url(../images/right-b.svg) center no-repeat;right:6.25%;}
.banner .swiper-button-next .contain .path{animation: dash 5000ms infinite;}
.contain  {position:absolute; width:100%; height:100%; z-index:3; left:0; top:0; display:block;}
.contain .path { stroke-dasharray: 135;stroke-dashoffset: 135;}








/* animation */

@keyframes going{0% { transform:rotate(10deg);}100%{ transform:rotate(-10deg);}}
@keyframes goout{0% { transform:rotate(-10deg);}100%{ transform:rotate(10deg);}}

@keyframes topdown{0% { top:8%;} 50%{ top:10%; }100%{ top:8%; }}
@keyframes ftranslateY {0% {transform:translateY(200px);opacity:0;}100% {transform:translateY(0px);opacity:1;}}
@keyframes run {to {stroke-dashoffset: 0;}}
@keyframes dash {from {stroke-dashoffset: 135;}to {stroke-dashoffset: 0;}}
@-ms-keyframes spin {from { -ms-transform: rotate(360deg); }to { -ms-transform: rotate(0deg); }}
@-moz-keyframes spin {from { -moz-transform: rotate(360deg); }to { -moz-transform: rotate(0deg); }}
@-webkit-keyframes spin {from { -webkit-transform: rotate(360deg); }to { -webkit-transform: rotate(0deg); }}
@keyframes spin {from {transform:rotate(360deg);}to{transform:rotate(0deg);}}
@keyframes dash2 {from {stroke-dashoffset: 140;}to {stroke-dashoffset: 0;}}


.bowen {position: absolute;width: 100%;height:100%;left: 0;top: 0;z-index: 10;}
.bowen h1,.bowen h2,.bowen h3,.bowen h4 { z-index:-1;margin:0; padding:0;background: none;border:#39425c 2px solid;display:block;position:absolute;left:50%;top:50%;-moz-border-radius: 100% / 100%;-webkit-border-radius: 100% / 100%;border-radius:100% / 100%;filter:alpha(opacity=0); -moz-opacity:0; opacity:0;-webkit-box-shadow: inset -2px 0px 10px 0px #2f3953;-moz-box-shadow:inset -2px 0px 10px 0px #2f3953;box-shadow:inset -2px 0px 10px 0px #2f3953;}
.bowen h1 {width:10px;height:10px;margin-left:-5px; margin-top:-5px;}
.bowen h2 {width:100px;height:100px;margin-left:-50px;margin-top:-50px;}
.bowen h3 {width:300px;height:300px;margin-left:-150px;margin-top:-150px;}
.bowen h4 {width:600px;height:600px;margin-left:-300px;margin-top:-300px;}
.bowen h1{animation:bowen 1s linear 0s infinite normal;-moz-animation:bowen 1s linear 0s infinite normal;-webkit-animation:bowen 1s linear 0s infinite normal;-o-animation:bowen 1s linear 0s infinite normal;}
.bowen h2{animation:bowen 2s linear 0s infinite normal;-moz-animation:bowen 2s linear 0s infinite normal;-webkit-animation:bowen 2s linear 0s infinite normal;-o-animation:bowen 2s linear 0s infinite normal;}
.bowen h3{animation:bowen 3s linear 0s infinite normal;-moz-animation:bowen 3s linear 0s infinite normal;-webkit-animation:bowen 3s linear 0s infinite normal;-o-animation:bowen 3s linear 0s infinite normal;}
.bowen h4{animation:bowen 4s linear 0s infinite normal;-moz-animation:bowen 4s linear 0s infinite normal;-webkit-animation:bowen 4s linear 0s infinite normal;-o-animation:bowen 4s linear 0s infinite normal;}
@keyframes bowen{0%{-webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0);transform:scale(0); filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}50%{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); -ms-transform:scale(1.0);transform:scale(1.0);filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}100% {-webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5);transform:scale(1.5);filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}} 
@-moz-keyframes bowen{0%{-webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0);transform:scale(0); filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}50%{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); -ms-transform:scale(1.0);transform:scale(1.0);filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}100% {-webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5);transform:scale(1.5);filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}} 
@-webkit-keyframes bowen{0%{-webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0);transform:scale(0); filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}50%{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); -ms-transform:scale(1.0);transform:scale(1.0);filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}100% {-webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5);transform:scale(1.5);filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}} 
@-o-keyframes bowen{0%{-webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0);transform:scale(0); filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}50%{ -webkit-transform:scale(1.0); -moz-transform:scale(1.0); -o-transform:scale(1.0); -ms-transform:scale(1.0);transform:scale(1.0);filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}100% {-webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); -ms-transform:scale(1.5);transform:scale(1.5);filter:alpha(opacity=0); -moz-opacity:0; opacity:0;}} 








/* fonts/overflow */
.banner-slide .txt h2,.viewmore span,.index-products .product3 .item a .text h2,.product-1.screen-7 .center .num h2,.product-1.screen-7 .center .num h2 span, .newsdate strong,.service-aftersale .aftersale-tel h2,.about-brand-date .center-pic .item4 li h3 strong,.about-news .about-news-header .newsenname,.product-top-nav .content h5
{font-family: 'Conv_d-din.exp-bold', Arial;}
.spagination span,.coredata .item h2,.mt-number-animate *, .newsdate span,.service-video-list .item a .text h5,.service-classroom-list .item a .text h5,.service-gallery .sgright .item a .text h5,.gallery-list .item a .text h5,.gallery-title h5,.title-2 h5,.right-contact-information .item li,.about-media .media-content .item .text h5,.slideyear h4,.slidemain .year,.slidemain .text,.contact-left .contact3 .contact-list .list .title i,.contact-left .contact3 .contact-list .list .children,.product-parameter-main ul li,.header .content .right .language .language-show a
{font-family: 'Conv_d-din.regular', Arial;}
.title h4,.date li h5,.vmore span,.product-activities-swiper .item a .text h5,.page-title h5{font-family: 'Conv_MyriadPro-Regular', Arial;}

.cnav ul li a h5,.cnav li a h4,.date li h5,.bottom-page-npturn a.next,.about-randd .randd-content .item3 li span,.gallery-list .item a .text h3 {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

.twoclamp {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}