/* body{width: 100vw;overflow: hidden;height: auto;overflow-y: auto} */
.banner{position: relative;}
.abouts{position: relative;padding-top: 36px;padding-bottom: 100px;margin-top: 240px;}
.tit{}
.tit h5{font-size: 36px;color: #333333;line-height: 114px;padding-bottom: 12px;letter-spacing: 0;}
.tit h5 span{color: #333333;font-weight: bold;}
.tit h5 em{float: left;display: block;width: 4px;height: 35px;background-color: #d20a10;margin-top: 42px;margin-right: 8px;}
.tit h5 p{font-size: 22px;color: #b5b5b5;font-family: 'Arial';font-weight: bold;display: inline-block;vertical-align: -webkit-baseline-middle;}
.tit a{display: block;line-height: 113px;position: relative;}
.tit a p{font-size: 16px;color: #333333;line-height: 113px;padding-right: 52px;font-family: 'Arial'}
.abouts .bg{position: absolute;top: 0;left: 0;height: 320px;width: 100%;background-color: #f2f0f0;z-index: -1;}
.tit a em{position: absolute;height: 1px;background-color: #bababa;}
.tit a .l1{width: 60px;top: 50%;right: 116px;transition-duration: 0.5s;}
.tit a .l2{width: 20px;top: 50%;left: 60px;transition-duration: 0.5s;}
.tit a:hover .l1{width: 20px;}
.tit a:hover .l2{width: 60px;}
.tit a:hover p{color: #d20a10;}
.abouts .tit h5{color: #d20a10;}
.abouts .tit h5 p{color: #b5b5b5;}
.abouts .tit span{color: #ffffff;}
.abouts .tit a p{color: #333333;}
.abouts .tit em{background-color: #bababa;}
.abouts .tit h5 em{background-color: #d20a10;}

.aboutsIn{}
.aboutsIn .ab01{width: 43.714%;}
.aboutsIn .ab011{padding-bottom: 70px;}
.aboutsIn .ab011 a{line-height: 50px; display: block;float: left;font-size: 20px;color: #7f7f7f;padding-right: 110px;position: relative;}
.aboutsIn .ab011 .about_name{padding-right: 70px;}
.aboutsIn .ab011 .about_name em{left: 134px;}
/* .aboutsIn .ab011 a p{line-height: 50px;} */
.aboutsIn .ab011 a em{position: absolute;top: 50%;left: 98px;background-color: #333333;height: 1px;width: 0px;transition-duration: 0.5s;}
.aboutsIn .ab011 a:nth-last-child(1) em{left: 140px;}
.aboutsIn .ab011 a:hover em{width: 20px;}
.aboutsIn .ab011 a:hover{color: #333333;}
.aboutsIn .ab012{padding-top: 36px;}
.aboutsIn .ab012 p{font-size: 16px;color: #333333;line-height: 32px;margin-bottom: 32px;}
.aboutsIn .ab012 p em{color: #d20a10;font-weight: bold;}
.aboutsIn .ab02{width: 45.785%;}
.service{position: relative;}
.service .stit{float: right;margin-right: 200px;height: 113px;}
.service .stit .sear{width: 28px;height: 100%;background: url(../images/index/i19.png) center 46px no-repeat;cursor: pointer;transition-duration: 0.5s;background-size: 24px auto;}
.service .stit .sear:hover{background-position: center 40px;}
.service .swiper1{width: 610px;}
.service .swiper1 span{font-size: 20px;color: #b5b5b5;line-height: 52px;text-align: center;border-bottom: 1px solid transparent;display: block;width: fit-content;width: -moz-fit-content;}
.service .swiper1 .selected span{color: #d20a10;border-color: #d20a10;}
.service  a{display: block;position: relative;}
.service .contents{position: absolute;bottom: 0;left: 0;width: 100%;padding: 0 26px;height: 60px;overflow: hidden;transition-duration: 0.5s;}
.service .contents h6{line-height: 60px; font-size: 20px;color: #ffffff;font-weight: 400;}
.service .serText span{font-size: 14px;color: #333333;line-height: 24px;display: block;}
.service a:hover .contents{background-color: #fff;height: 140px;padding-bottom: 22px;}
.service a:hover .contents h6{color: #333333;}
.serviceIn{position: relative;}
/* .serviceIn .bd{width: 300%;} */
.serviceIn .bd li{padding: 0;float: left;}
.serviceIn .pic{width: 30.3733%;float: left;}
.serviceIn .pic img{display: block;max-width: 100%;}
.serviceIn .pic .pic02{margin: 12px 12px 0 12px;}
.serviceIn .pic .pic01{margin: 0 12px;}
.serviceIn .piss{width: 28.1%;}
.serviceIn .piss2{width: 31.533%;}
.serviceIn .hd{position: absolute;top:0;left: 88%;height: 100%;width: 20px;}
.serviceIn .hd a{display: block;width: 14px;height: 11px;}
.serviceIn .hd .next{background: url(../images/index/i13.png) center no-repeat;transform: rotate(180deg);margin-bottom: 24px;}
.serviceIn .hd .prev{background: url(../images/index/i13.png) center no-repeat;}
.serviceIn .hd .pageStates{position: absolute;bottom: 0;left: 0;font-size: 20px;color: #333333;}
.serviceIn .hd em{display: block;}
.serviceIn .hd .line{width: 19px;height: 1px;background-color: #d20a10;}
.serviceIn .hd .now{padding-bottom: 20px;}
.serviceIn .hd .total{padding-top: 20px;}
.serviceIn .hd .lines{position: absolute;top: 15%;left: 9px; height: 65%;width: 1px;background-color: #5f636a;}
.service .searchBox{}
.service .searchBox .bottomCon{}
.service .bottomCon .br{width: 768px;}
.service .bottomCon .br h5{font-size: 24px;color: #d20a10;margin-bottom: 58px;}
.service .bottomCon .brCon .item{display: block;width: 224px;height: 155px;float: left;position: relative;margin-right: 48px;margin-bottom: 50px;overflow: hidden;}
.service .bottomCon .brCon .item:nth-child(3n){margin-right: 0;}
.service .bottomCon .brCon .text{text-align: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition-duration: 0.5s;background-color: rgba(0,0,0,0.5);opacity: 0;}
.service .bottomCon .textIn{position: absolute;top: 50%;left: 50%;width: 100%;}
.service .bottomCon .text p{padding-top: 28px; font-size: 16px;color: #ffffff;}
.service .bottomCon .text span{padding-bottom: 20px;padding-top: 8px; font-size: 16px;color: #ffffff;display: block;display: block;font-family: 'Arial';display: none;}
.service .bottomCon .text em{font-size: 16px;color: #b5b5b5;display: block;display: block;}
.service .bottomCon .brCon .item:hover .text{opacity: 1;}
.service .bottomCon .brCon .item img{display: block;width: 100%;height: 100%;}

.serviceIn .xmMore{display: block;width: 100%;height: 100%;}
.service .searchBox{ position: fixed;top:0;left: 0;background-color: rgba(0,0,0,0.9);width: 100%;height: 100%;z-index: 22;background: url(../images/index/i28.jpg) center no-repeat;background-size: 100% 100%;}
.searchBox{padding-top: 10vh;display: none;}
.searchBox .top{}
.searchBox .top a{display: block;}
.searchBox .top a img{display: block;}
.searchBox .top span{display: block;width: 72px;height: 72px;background: #ffffff url(../images/index/i16.png) center no-repeat;transition-duration: 0.5s;cursor: pointer;}
.searchBox .bottomCon{padding-top: 100px;}
.searchBox .bottomCon .bL{width: 406px;text-align: center;padding-top: 40px;}
.searchBox .bottomCon .bL h5{font-size: 30px;color: #ffffff;margin-bottom: 40px;}
.searchBox .bottomCon .select{display: block; font-size: 20px;color: #ffffff;background-color: transparent;border: 0;width: 100%;height: 60px;line-height: 60px;border-bottom: 1px solid #d20a10;margin-bottom: 48px;position: relative;}
.searchBox .bottomCon .select p{font-size: 18px;background-color: rgba(0,0,0,0.6);background: url(../images/index/i17.png) center right no-repeat;text-align: left;line-height: 60px;color: #ffffff;cursor: pointer;}
.searchBox .bottomCon .bL a{display: block;font-size: 18px;color: #ffffff;width: 100%;height: 72px;line-height: 72px;background-color: #d20a10;margin-top: 60px;}
.searchBox .bottomCon .select .seCon{width: 100%;position: absolute;left: 0;top: 120%;z-index: 5;display: none;background-color: #fff;padding: 16px 30px;height: 252px;overflow-y: auto; box-sizing: border-box;}
.searchBox .bottomCon .select .seIn{width: 100%;height: 100%;overflow-y: scroll;}
.searchBox .bottomCon .select .seCon span{display: block;width: 100%;font-size: 18px;color: #5f636a;line-height: 36px;text-align: left;cursor: pointer;}
.searchBox .bottomCon .select .seIn::-webkit-scrollbar-track-piece { 
    background-color:#b5b5b5;
    }
    .searchBox .bottomCon .select .seIn::-webkit-scrollbar {
    width:1px;
    /* height:9px; */
    }
    .searchBox .bottomCon .select .seIn::-webkit-scrollbar-thumb {
    background-color:#d20a10;
    background-clip:padding-box;
    min-height:28px;
    }
    .searchBox .bottomCon .select .seIn::-webkit-scrollbar-thumb:hover {
    background-color:#bbb;
    }
    .searchBox .bottomCon .select .seCon span:hover{
        color: #d20a10;
    }
    .searchBox .top span:hover{background: #d20a10 url(../images/index/i29.png) center no-repeat;}
.service .serb{margin-top: 20px;}
.brand{position: relative;padding-bottom: 146px;}
.brand .cards .card .content .content-box .text{font-size:16px;color: #5f636a;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
-webkit-box-orient: vertical;top: 166px;bottom: 0;}
.brand section.advantages{height: 422px;}
.brand section.advantages .cards{top: 40px;}
.brand section.advantages .floating-layer-1{background-color: #f2f0f0;}
.brand .snews{padding-top: 46px;}
.brand .snews .hd li{font-size: 20px;color: #333333;float: left;margin-right: 38px;border-bottom: 1px solid transparent;padding: 0;cursor: pointer;}
.brand .snews .hd li.on{color: #d20a10;border-color: #d20a10;}
ul li:before{display: none;}
.brand .bd li{width: 48%;float: left;padding: 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.brand .bd li:nth-child(2n){float: right;}
.brand .bd a{display: block;line-height: 78px;border-bottom: 1px solid #dddddd;}
.brand .bd a p{font-size: 16px;color: #333333;float: left;line-height: 78px;width: 80%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.brand .bd a p em{color: #d20a10;}
.brand .bd a span{font-size: 16px;color: #b5b5b5;float: right;display: block;}


.poster__fake-headings .card .l1 .letter{font-size: 48px;color: #ffffff;font-weight: 400;max-width: 1200px;}
.poster__fake-headings .card .l2 .letter{font-size: 30px;color: #ffffff;font-weight: 400;max-width: 1200px;}
.poster__fake-headings .card .l3 .letter{font-size: 16px;color: #ffffff;font-weight: 400;max-width: 1200px;}
.slider-nav .card__name, .slider-nav .item__name{padding-right: 60px;box-sizing: border-box;height: 40px;display: block;}
/* .poster__list .card__h2 .l1 .letter{font-size: 48px;} */
/* .poster__list .card__mask{font-size: 48px;height: 300px;} */
.status{top: calc(88.7% - -5px);}
.poster__scroll::before{background-color: #d20a10;}
.scroll{height: 200px;bottom: -78px;}
.brand .scroll{height: 80px;bottom: -17px;}
.service .scroll,.abouts .scroll,.join .scroll{height: 80px;bottom: -85px;}
.service .scroll{bottom: -151px;}
.abouts .scroll{bottom: -54px;}
.ab02In{position: relative;}
.ab02In .ab02_video{width: 87.667%;top: 0;position: relative;max-width: 700px;right: 0;transition: transform .5s ease;}
.ab02In .ab02_video>em{position: absolute;top: 50%;left: 50%;width: 154px;height: 154px;background: url(../images/icon/icon8.png) center no-repeat;background-size: 100% auto;z-index: 2;}
.ab02In .ab02_text{background: #e0e0e0;position: absolute;bottom: -100px;left: -16.6%;width: 320px;height: 200px;border-radius: 6px;transform-origin: 0 100%;transition: transform .5s ease;}
.ab02In .ab02_text .texts{margin-top: 98px;padding-left: 40px;padding-right: 32px;}
.ab02In .ab02_text .texts .names{color: #767676;margin-bottom: 20px;font-size: 26px;float: none;font-family:"sourceCN";}
.ab02In .ab02_text .texts .en{color: rgba(0,0,0,0.04);font-size: 66px;font-weight: bold;font-family:"sourceEN";}
.ab02In .ab02_text .texts .en img{display: block;}
.aboutsIn .ab02:hover .ab02_video{transform: scale(1.1);}
.aboutsIn .ab02:hover .ab02_text {transform: scale(0.7);}


.joins{padding-top: 100px;position: relative;padding-bottom: 100px;background: url(../images/icon/icon9.png) center right no-repeat;}
.joins .scroll{height: 80px;bottom: -50px;}
.joins .joinsInl{width: 610px;height: 500px;position: relative;}
.joins .joinsInl>div{position: absolute;}
.joins .joinsInl .img01{top: 0;left: 68px;}
.joins .joinsInl .img02{bottom: 0;right: 0;}
.joins .joinsInr{width: 510px;margin-right: 65px;}
.joins .joinsInr h6{font-size: 28px;color: #d20a10;font-weight: 400;line-height: 50px;width: 304px;margin-bottom: 20px;}
.joins .joinsInr p{font-size: 16px;color: #333333;line-height: 34px;}
.joins .joinsInr a{display: block;font-size: 18px;color: #333333;width: 126px;margin-top: 50px;position: relative;}
.joins .joinsInr a em{position: absolute;left: 100%; width: 20px;height: 1px;background-color: #d20a10;margin-top: 12px;transition-duration: 0.5s;}
.joins .joinsInr a:hover{color: #d20a10;}
.joins .joinsInr a:hover em{width: 30px;}
.contacts{padding-top: 138px; background: url(../images/index/i20.png) center top no-repeat;background-size: 100% 100%;}
.contacts .contactsIn{position: relative;}
.contacts .contactsIn .w1400{padding: 70px 0 84px;box-sizing: border-box;}
.contacts .contactl{width: 50%;}
.contacts .contactl a{display: block;margin-bottom: 12px;}
.contacts .contactl a img{display: block;}
.contacts .contactsIn p{font-size: 14px;color: #ffffff;line-height: 40px;}
.contacts .contactsIn .more{margin-top: 24px; display: block;font-size: 14px;color: #ffffff;height: 60px;width: 224px;border: 1px solid #ffffff;line-height: 60px;text-align: center;position: relative;overflow: hidden;}
.contacts .contactsIn .more::after{webkit-transition: all .6s cubic-bezier(.165,.84,.44,1);
    transition: all .6s cubic-bezier(.165,.84,.44,1);
    -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
    transition-timing-function: cubic-bezier(.165,.84,.44,1);
    height: 100%;
    left: -35%;
    top: 0;
    -webkit-transform: skew(50deg);
    transform: skew(50deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    width: 0;    background: #ffffff;
    content: '';
    position: absolute;
    z-index: -1;}
    .contacts .contactsIn .more:hover{color: #333333;}
.contacts .contactsIn .more:hover::after{height: 100%;
    width: 135%;}
.contacts .contactr{padding-left: 204px;box-sizing: border-box;width: 50%;}
.contacts .contactr h6{font-size: 22px;color: #ffffff;font-family: 'Arial';font-weight: 400;margin-bottom: 20px;}
.contacts .contactr h6 em{float: left;width: 74px;height: 1px;background-color: #ffffff;margin-top: 16px;margin-right: 24px;}
.contacts .contactsIn .w1400>em{height: 230px;width: 1px;background-color: #ffffff;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.featured-categories-container .slider-nav{width: auto;}
.contacts .contactsIn .bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #848c94;z-index: -1;}
.contacts .joinL{width: 58%;}
.contacts .joinL h5{font-size: 32px;color: #ffffff;margin-bottom: 26px;}
.contacts .joinL p{font-size: 18px;color: #ffffff;line-height: 30px;}
.contacts .joinR{font-size: 14px;color: #ffffff;height: 60px;width: 224px;border: 1px solid #ffffff;line-height: 60px;text-align: center;position: relative;overflow: hidden;display: block;z-index: 2;margin-top: 62px;}
.contacts .joinR::after{-webkit-transition: all .6s cubic-bezier(.165,.84,.44,1);
  transition: all .6s cubic-bezier(.165,.84,.44,1);
  -webkit-transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transition-timing-function: cubic-bezier(.165,.84,.44,1);
  height: 100%;
  left: -35%;
  top: 0;
  -webkit-transform: skew(50deg);
  transform: skew(50deg);
  -webkit-transform-origin: top left;
  transform-origin: top left;
  width: 0;    background: #ffffff;
  content: '';
  position: absolute;
  z-index: -1;}
 .contacts .joinR:hover{color: #333333;}
 .contacts .joinR:hover::after{height: 100%;width: 135%;}




.serviceIn .serText{position: absolute;bottom: 0;left: 0;width: 100%;padding:24px 4% 15px;transition-duration: 0.5s;background: url(../images/icon/bac_2.png) left bottom no-repeat;
background-size: 100% 100%;}
.serviceIn .serText h6{font-size: 20px;color: #ffffff;font-weight: 400;padding-bottom: 10px;}
.serviceIn .serText p{font-size: 16px;color: #ffffff;}
.service .serText span{font-size: 14px;color: #333333;line-height: 24px;display: block;height: 0;transition-duration: 0.5s;overflow: hidden;}



.serviceIn .serText2{position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,0.8);transition-duration: 0.5s;opacity: 0;transition-duration: 0.5s;}
.serviceIn .serText2In{width: 90%; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);visibility: hidden;}
.serviceIn .serText2 h6{font-size: 20px;color: #333333;font-weight: 400;padding-bottom: 4px;margin-bottom: 10px;text-align: center;}
.serviceIn .serText2 p{font-size: 16px;color: #333333;padding-bottom: 20px;text-align: center;}
.serviceIn .serText2 span{width: 40px;height: 2px;background-color: #c6312d;display:block;margin-top:8px;margin:0 auto;}
.service .interest-card .img:hover .serText2{opacity: 1;}
.service .interest-card .img:hover .serText2In{visibility: visible;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
-webkit-animation-name: fadeInUp3;
  animation-name: fadeInUp3;}


.service .interest-card .img:hover .serText{background-color: #fff;display: none;}
.service .interest-card .img:hover .serText h6{color: #333333;}
.service .interest-card .img:hover .serText p{color: #333333;}
.service .interest-card .img:hover .serText span{height: 48px;}
.service .serText span img{display: inline-block;}
.sssss{position: absolute;top: 50%;left: 50%;margin-top:-55px;margin-left:-55px;cursor: pointer; display: block;width: 110px;height: 110px;background: url(../images/icon/icon8.png) center no-repeat;background-size: 100% auto;}
.contacts .contactr,.contacts .contactl{width: 50%;}
.brand .bd a:hover p,.brand .bd a:hover span{color: #d20a10;}
.mask_about{display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background-color: rgba(0,0,0,0.9);z-index: 999;}
.mask_about .panel{position: absolute;top: 50%;left: 50%;width: 92%;}
.mask_about .panel video{width: 100%;display: block;}
.mask_about .clo{position: absolute;top: 0.7rem;right: 0.3rem;width: 0.4rem;height: 0.4rem;background: url(../images/page/p65.png) center no-repeat;cursor: pointer;z-index: 2;background-size: 100% auto;}










.poster__image:after{background: none;}

.tit h5,
.tit a,
.brand section.advantages,
.brand .snews,.serviceIn,
.aboutsIn .ab011 a,
.aboutsIn .ab02,
.aboutsIn .ab012,
.joinsIn .joinsInl .img01,
.joinsIn .joinsInl .img02,
.joinsIn .joinsInr,
.footer .w1400,
.service .tit .stit,
.featured-categories-container.loaded,
.contacts,
.contacts .contactr{visibility: hidden;}
.brand.active .tit h5,
.brand.active .tit a,
.brand.active section.advantages,
.brand .snews.active,
.service.active .tit h5,
.service.active .tit a,
.abouts.active .tit h5,
.abouts.active .tit a,
.joins.active .tit h5,
.joins.active .tit a,
.contacts.active .tit h5,
.contacts.active .tit a,
.serviceIn.active .featured-categories-container.loaded,
.aboutsIn.active .ab02,
.aboutsIn.active .ab012,
.joinsIn.active .joinsInl .img01,
.joinsIn.active .joinsInl .img02,
.joinsIn.active .joinsInr,
.footer.active .w1400,
.contacts.active,
.contacts.active .contactr,
.service.active .tit .stit{visibility: visible;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
-webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;}
    .brand.active .tit a,.service.active .tit a,.abouts.active .tit a,.joins.active .tit a,.contacts.active .tit a{
        animation-delay: 0.2s;
        -webkit-animation-delay: 0.2s;
    }
    .brand.active section.advantages{animation-delay: 0.5s;-webkit-animation-delay: 0.5s;}
    /* .brand.active .snews{animation-delay: 0.5s;-webkit-animation-delay: 0.5s;} */
    .aboutsIn.active .ab011 a{visibility: visible;
   
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    -webkit-animation-name: fadeInUp2;
        animation-name: fadeInUp2;}
    .aboutsIn.active .ab011 a:nth-child(2){animation-delay: 0.1s;-webkit-animation-delay: 0.1s;}
    .aboutsIn.active .ab011 a:nth-child(3){animation-delay: 0.2s;-webkit-animation-delay: 0.2s;}
    .aboutsIn.active .ab011 a:nth-child(4){animation-delay: 0.3s;-webkit-animation-delay: 0.3s;}
    .aboutsIn.active .ab011 a:nth-child(5){animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
    .aboutsIn.active .ab02{animation-delay: 0.8s;-webkit-animation-delay: 0.8s;}
    .aboutsIn.active .ab012{animation-delay: 1s;-webkit-animation-delay: 1s;}
    .joinsIn.active .joinsInl .img01{animation-delay: 0.3s;-webkit-animation-delay: 0.3s;}
    .joinsIn.active .joinsInl .img02{animation-delay: 0.5s;-webkit-animation-delay: 0.5s;}
    .joinsIn.active .joinsInr{animation-delay: 0.7s;-webkit-animation-delay: 0.7s;}
    .brand .snews.active{animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
    .serviceIn.active .featured-categories-container.loaded{animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
    .contacts.active .contactr{animation-delay: 0.2s;-webkit-animation-delay: 0.2s;}
    .service.active .tit .stit{animation-delay: 0.1s;-webkit-animation-delay: 0.1s;}

      @-webkit-keyframes fadeInUp2 {
        from {
          opacity: 0;
          -webkit-transform: translate3d(0, 5px, 0);
          transform: translate3d(0, 5px, 0);
        }
      
        to {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
      }
      
      @keyframes fadeInUp2 {
        from {
          opacity: 0;
          -webkit-transform: translate3d(0, 5px, 0);
          transform: translate3d(0, 5px, 0);
        }
      
        to {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
        }
      }
  

      @-webkit-keyframes bounce-up {
        25% {-webkit-transform: translateY(5px);}
        50%, 100% {-webkit-transform: translateY(0);}
        75% {-webkit-transform: translateY(-5px);}
       }

       @keyframes bounce-up {
        25% {transform: translateY(5px);}
        50%, 100% {transform: translateY(0);}
        75% {transform: translateY(-5px);}
       }

       /* .bounce-up {
        -webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1s linear infinite;

      } */
      @-webkit-keyframes fadeInUp3 {
        from {
          opacity: 0;
          -webkit-transform: translate3d(-50%, 5px, 0);
          transform: translate3d(-50%, 5px, 0);
        }
      
        to {
          opacity: 1;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
        }
      }
      
      @keyframes fadeInUp3 {
        from {
          opacity: 0;
          -webkit-transform: translate3d(-50%, 5px, 0);
          transform: translate3d(-50%, 5px, 0);
        }
      
        to {
          opacity: 1;
          -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
        }
      }
      
      .featured-categories-container .slide-inner,.cards .card .arrow{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
      .modal_active {
        transform: translate3D(-100%, 0, 1px);
    }
    .banner .scroll{
      height: 120px;
    }
    .banner .go {
      position: absolute;
      left: 50%;
      bottom: 7%;
      margin-left: -12px;
      width: 25px;
      height: 37px;
      background: url(../images/icon/icon11.png) center no-repeat;
      background-size: 25px auto;
      -webkit-animation: TopBots 0.8s ease-in-out infinite both;
      -moz-animation: TopBots 0.8s ease-in-out infinite both;
      -ms-animation: TopBots 0.8s ease-in-out infinite both;
      animation: TopBots 0.8s ease-in-out infinite both;
      z-index: 100;
    }

    .body-wrap {
      width: 100%;
      position: relative;
      transition: all 0.5s ease 0s;
      z-index: 1;
    }
    
    .body-wrap.left, header.left .header-main {
      transform: translateX(-66%);
    }
    .i-ban {
      position: relative;
      overflow: hidden;
      width: 100%;
      z-index: 1;
      height: 95vh;
    }
    .i-ban ul, .i-ban li {
      width: 100%;
      height: 100%;
      padding-left: 0;
    }
    .i-ban li {
      background-size: cover !important;
      position: absolute;
      left: 100%;
      top: 0;
      overflow: hidden;
    }
    .i-ban li a{
      display: block;
      width: 100%;
      height: 100%;
    }
    .i-ban li .cent-cont {
      position: absolute;
      left: 12.5%;
      left:10%;
      top: 50%;
      margin-top: -70px;
      color: #fff;
      z-index: 3;
      width: 90%;
    }
    .i-ban li video{
      width: 100%;
	  height:100%;
	  object-fit:cover;
    }
    .i-ban li .gray-bg {
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #000;
      opacity: 0.3;
      filter: alpha(opacity=30);
    }
    .i-ban li .word {
      color: #fff;
      font-size: 50px;
      line-height: 68px;
    }
    .i-ban li .word p {
      position: relative;
      width: 90%;
    }
    .i-ban li .word p .font-sign {
      position: relative;
      display: block;
      top: 20px;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .i-ban li .word p .s1{
      font-size: 48px;color: #ffffff;
      line-height: 68px;
      font-weight: bold;
      margin-bottom: 15px;
    }
    .i-ban li .word p .s2{
      font-size: 30px;color: #ffffff;
      line-height: 50px;
    }
    .i-ban li .word p .s3{
      font-size: 16px;color: #ffffff;
      line-height: 36px;
    }
    .i-ban li .word span.line {
      display: block;
      height: 4px;
      background-color: #fff;
      opacity: 0.7;
      filter: alpha(opacity=70);
      width: 0;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -2px;
    }
    .i-ban li .word .font {
      display: block;
      position: relative;
      top: 20px;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .i-ban li .link {
      display: block;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      margin-top: 50px;
      transition: all 0.3s ease 0s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .i-ban li .link i {
      display: block;
      width: 100%;
      height: 100%;
      background: url(https://design.citic/themes/simpleboot3/public/assets/img/ico_16.png) no-repeat center;
      position: absolute;
      left: 0;
      top: 0;
    }
    .i-ban li .link:hover {
      border: 1px solid white;
    }
    .i-ban li.active .word p .font-sign {
      top: 0;
      opacity: 1;
      filter: alpha(opacity=100);
      transform: rotate(0);
      transition: all 0.5s ease 0s;
    }
    .i-ban li.active .link {
      opacity: 1;
      filter: alpha(opacity=1);
      transition: all 0.3s ease 0.6s;
    }
    .i-ban li.active .link i {
      animation: downico 1.5s ease-out infinite;
    }
    .i-ban .btns {
      position: absolute;
      bottom: 76px;
      right: 10.5%;
      z-index: 10;
    }
    .i-ban .btns span {
      display: inline-block;
      width: 50px;
      height: 2px;
      margin-right: 10px;
      background-color: rgba(255,255,255,0.7);
      
      position: relative;
      cursor: pointer;
    }
    .i-ban .btns span i {
      display: block;
      height: 100%;
      position: absolute;
      width: 0;
      background-color: #d20a10;
    }
    
    @keyframes downico {
      0% {
        top: 0;
        opacity: 1;
      }
      35% {
        top: 50%;
        opacity: 0;
      }
      65% {
        top: -50%;
        opacity: 0;
      }
      100% {
        top: 0;
        opacity: 1;
      }
    }
    .body-wrap .loader {
      z-index: 10;
    }
    @keyframes TopBots {
      0% {transform:translateY(-8px)}
      50% {transform:translateY(0px)}
      100% {transform:translateY(-8px)}
  }
  @-webkit-keyframes TopBots {
      0% {transform:translateY(-8px)}
      50% {transform:translateY(0px)}
      100% {transform:translateY(-8px)}
  }
  @-moz-keyframes TopBots {
      0% {transform:translateY(-8px)}
      50% {transform:translateY(0px)}
      100% {transform:translateY(-8px)}
  }
  @-ms-keyframes TopBots {
      0% {transform:translateY(-8px)}
      50% {transform:translateY(0px)}
      100% {transform:translateY(-8px)}
  }
  .service .stit p{font-size: 14px;color: #cccccc;line-height: 119px;height: 113px;margin-left: 10px;}

    @media (max-width:1401px){
      .service .slider-nav{right: 20%;}
      .aboutsIn .ab012{padding-top: 35px;}
      .aboutsIn .ab011 a{padding-right: 101px;font-size: 18px;}
      .aboutsIn .ab012 p{font-size: 14px;line-height: 28px;margin-bottom: 20px;}
      .aboutsIn.active .ab02{padding-top: 50px;}
      .joins .joinsInr{margin-right: 0;}
      .contacts .contactr{padding-left: 110px;}
      /* .footer .fo3 .bs2{margin-right: 56px;}
      .footer .fo3 .bs1{margin-right: 63px;} */
      .abouts{margin-top: 200px;}
	  .aboutsIn .ab011 .about_name{padding-right:64px;}
    }
    @media only screen and (max-width: 1280px){
      .service .slider-nav{height: 376px;}
      .serviceIn .serText h6{font-size: 0.2rem;}
      .serviceIn .serText p{font-size: 0.14rem;}
    }
    @media only screen and (max-width: 991px){
      .serviceIn .serText h6{font-size: 0.32rem;padding-bottom: 0.1rem;}
  .serviceIn .serText p{font-size: 0.28rem;}
    }
.m_brands{display: none;}
/* .m_tit{display: none;} */
@media (max-width:1201px){
  .i-ban{height: 100vh;}
  .i-ban li .word p{line-height: 0.74rem;}
  .i-ban li .word p .s1{font-size: 0.48rem;margin-bottom: 0;line-height: 0.68rem;}
  .i-ban li .word p .s2{font-size: 0.3rem;line-height: 0.5rem;}
  .banner .scroll{height: 1.2rem;bottom: -0.58rem;}
  /* .abouts{display: none;} */
  .tit{display: block;padding-top: 0.32rem;padding-bottom: 0.2rem;}
  /* .p_tit{display: none;} */
  .tit h5{color: #333333;font-size: 0.4rem;line-height: 1.4rem;padding-bottom: 0;}
  .tit h5 p{font-size: 0.22rem;color: #b5b5b5;}
  .tit h5 em{height: 0.38rem;margin-top: 0.5rem;}
  .tit .w1400{width: 91.667%;margin: 0 auto;}
  .tit a{line-height: 1.4rem;font-size: 0.22rem;margin-top: 0.02rem;}
  .tit a p{line-height: 1.4rem;font-size: 0.22rem;padding-right: 0.3rem;}
  .tit a .l1{width: 0.6rem;right: 1.1rem;top:49%;}
  .tit a .l2{width: 0.2rem;left: 0.78rem;top:49%;}
  .pc_brands{display: none;}
  .brand{padding-bottom: 3rem;}
  .brand .bd li{width: 100%;padding: 0 4%;margin-bottom: 0;}
  .brand .bd a{line-height: 0.9rem;}
  .brand .bd a p{font-size: 0.28rem;line-height: 0.9rem;width: 75%;}
  .brand .bd a span{font-size: 0.26rem;}
  .m_brands{display: block;background-color: #f2f0f0;padding: 0.6rem 0;}
  .m_brands .brandsIn{width: 80.9333%;margin: 0 auto;background-color: #fff;}
  .m_brands .brandsIn .beandsImg{height: 4.55rem;width: 100%;overflow: hidden;}
  .m_brands .brandsIn img{display: block;height: 100%;margin: 0 auto;}
  .m_brands .beandsDesc{padding-top: 0.694rem;padding-bottom: 0.5rem;padding: 0.64rem 0.5rem 0.5rem 0.5rem;}
  .m_brands .beandsDesc p{font-size: 0.32rem;color: #333333;line-height: 0.42rem;margin-bottom: 0.42rem;} 
  .m_brands .beandsDesc span{font-size: 0.28rem;color: #333333;display: block;line-height: 0.42rem;height: 1.26rem;} 
  .m_brands .swiper-button-next,.m_brands  .swiper-button-prev{width: 1.1rem;height: 1.1rem;border-radius: 50%;background-color: #fff;opacity: 1;margin-top: -0.55rem;}
  .m_brands .swiper-button-next{background: #ffffff url(../images/mobile/icon/i2.png) center no-repeat;background-size: 0.32rem 0.27rem;}
  .m_brands .swiper-button-prev{background: #ffffff url(../images/mobile/icon/i3.png) center no-repeat;background-size: 0.32rem 0.27rem;}
  .service .stit{margin-right: 0.9rem;height: 1.4rem;}
  .service .stit .sear{width: 0.35rem;background-size: 0.35rem auto;background-position: center center;height: 1.4rem;}
  
  .abouts{margin-top: 2.4rem;padding-top: 0;padding-bottom: 1.5rem;}
  .aboutsIn .w1400{width: 91.6333%;}
  .aboutsIn .ab01{width: 100%;}
  .aboutsIn .ab011 a{font-size: 0.32rem;padding-right: 1rem;line-height: 0.75rem;}
  .aboutsIn .ab011 .about_name{padding-right: 0.38rem;}
  .abouts .bg{height: 4.1rem;}
  .aboutsIn .ab011{padding-bottom: 0.7rem;}
  .aboutsIn .ab012{padding-top: 0.35rem;}
  .aboutsIn .ab012 p{font-size:0.28rem;line-height: 0.41rem;margin-bottom: 0.4rem;}
  .aboutsIn .ab02{width: 100%;height: 5.77rem;padding-top: 10px;}
  .aboutsIn.active .ab02{padding-top: 10px;}
  .ab02In .ab02_video{width: 100%;}
  .ab02In .ab02_text{left: 0;width: 3.3rem;height: 2.06rem;bottom: -0.6rem;display: none;}
  .ab02In .ab02_text .texts .names{font-size: 0.32rem;margin-bottom: 0.1rem;}
  .ab02In .ab02_text .texts{margin-top: 0.8rem;padding-left: 0.24rem;padding-right: 0.2rem;}
  .ab02In .ab02_video>em{width: 1.54rem;height: 1.54rem;}
  .contacts{background: url(../images/mobile/index/m_ind02.png) center bottom no-repeat;background-size: 100% auto;padding-top: 2rem;}
  .contacts .contactsIn .w1400{width: 91.8667%;padding:0;padding-bottom: 0.7rem;}
  .contacts .joinL{width: 100%;float: none;}
  .contacts .joinL h5{font-size: 0.4rem;margin-bottom: 0.44rem;}
  .contacts .joinL h5 a{font-size: 0.4rem;margin-bottom: 0.44rem;}
  .contacts .joinL p{font-size: 0.28rem;line-height: 0.4rem;}
  .contacts .joinR{font-size: 0.28rem;float: none;width: 2.7rem;height: 0.8rem;line-height: 0.8rem;margin: 0 auto;margin-top: 0.44rem;}
  .service .searchBox{height: 100vh;overflow-y: scroll;}
  .searchBox .bottomCon .bL{width: 100%;}
  .searchBox .top a{width: 4.77rem;margin-top: 0.15rem;}
  .searchBox .top a img{width: 3.77rem;}
  .searchBox .top span{width: 0.7rem;height: 0.7rem;background-size: 0.22rem auto;}
  .searchBox .bottomCon .bL h5{font-size: 0.36rem;margin-bottom: 0.38rem;}
  .searchBox .bottomCon .select{width: 72.383%;margin: 0 auto;margin-bottom: 0.36rem;height: 0.64rem;}
  .searchBox .bottomCon .select p{font-size: 0.28rem;line-height: 0.64rem;}
  .searchBox .bottomCon .select .seCon span{font-size: 0.22rem;line-height: 0.48rem;}
  .searchBox .bottomCon{padding-top: 5vh;}
  .searchBox .bottomCon .bL a{font-size: 0.28rem;margin: 0 auto; margin-top: 0.58rem;width: 64.58%;height: 0.73rem;line-height: 0.73rem;}
  .service .bottomCon .br{width: 100%;}
  .service .bottomCon .brCon .item{width: 44.992%;height: 2.14rem;overflow: hidden; margin-right: 9.72%;margin-bottom: 0.58rem;}
  .service .bottomCon .brCon .item:nth-child(3n){margin-right: 9.72%;}
  .service .bottomCon .brCon .item:nth-child(2n){margin-right: 0;}
  .service .bottomCon .br h5{font-size: 0.34rem;margin-top: 0.9rem;margin-bottom: 0.58rem;}
  .abouts .scroll{bottom: -0.15rem;}
  .service{padding-bottom: 1rem;}
  .service .scroll{bottom: -1.4rem;}
  .brand .scroll{bottom: 0.4rem;}
  .service .interest-card .img:hover .serText2{opacity: 0;}
/* .service .interest-card .img:hover .serText2In{visibility: visible;} */

  .service .interest-card .img:hover .serText{display: block;background-color: transparent;}
  .service .interest-card .img:hover .serText h6{color: #ffffff;}
  .service .interest-card .img:hover .serText p{color: #ffffff;}
  .service .bottomCon .brCon .text{opacity: 1;padding: 0 0.2rem;box-sizing: border-box;}
  .service .bottomCon .text p{font-size: 0.32rem;padding-top: 0.4rem;}
  .service .bottomCon .text span{font-size: 0.26rem;padding: 0 0 0 0;}
  .service .bottomCon .text em{font-size: 0.24rem;}
  .aboutsIn .ab011 a:hover em{display: none;}
  .aboutsIn.active .ab011 a:nth-child(1){padding-right: 1.65rem;}
  .aboutsIn.active .ab011 a:nth-child(3n){padding-right: 0;}
  .aboutsIn.active .ab011 a:nth-child(4){padding-right: 1rem;}
  .mask_about{display: none;}
  .aboutsIn .ab02:hover .ab02_video{transform: scale(1)}
}
.serviceIn .s1 .slide-item1 .img-container{}
.serviceIn .s1 .slide-item2 .img-container{margin:0 6px;}
.serviceIn .s1 .slide-item3 .img-container{}
.serviceIn .s2 .slide-item1 .img-container{margin-right:110px;}
.serviceIn .s2 .slide-item2 .img-container{margin:0 6px;margin-left: -104px;}
.serviceIn .s2 .slide-item3 .img-container{}
.serviceIn .s3 .slide-item1 .img-container{margin-right: 110px;}
.serviceIn .s3 .slide-item2 .img-container{margin:0 6px;margin-right: 103px;margin-left: -103px;}
.serviceIn .s3 .slide-item3 .img-container{margin-left: -96px;}

@media only screen and (max-width: 1280px){

}
@media only screen and (max-width: 1024px){}
@media only screen and (max-width: 991px){
  .serviceIn .s1 .slide-item1 .img-container{}
  .serviceIn .s1 .slide-item2 .img-container{margin:0 6px;}
  .serviceIn .s1 .slide-item3 .img-container{}
  .serviceIn .s2 .slide-item1 .img-container{margin-right:1.1rem;}
  .serviceIn .s2 .slide-item2 .img-container{margin:0 6px;margin-left: -1rem;}
  .serviceIn .s2 .slide-item3 .img-container{}
  .serviceIn .s3 .slide-item1 .img-container{margin-right: 1.1rem;}
  .serviceIn .s3 .slide-item2 .img-container{margin:0 6px;margin-right: 1rem;margin-left: -1rem;}
  .serviceIn .s3 .slide-item3 .img-container{margin-left: -0.96rem;}
}

.bic_gray{
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}