/* banner */
.index-banner{background-color:#fff;height:100vh}
.index-banner .swiper-container{width: 100%; z-index: 0; height: 100%;}
.index-banner .swiper-slide{background-color: rgba(255,255,255,.5);}
.index-banner .swiper-wrapper, .index-banner [data-swiper-parallax]{will-change:transform}
.index-banner .headbg{position:absolute;z-index:0;width:100%;height: 100%;background-repeat:no-repeat;background-size:cover;background-position:center center;-webkit-animation-fill-mode: both; animation-fill-mode: both;}
.index-banner .swiper-slide-active .headbg{-webkit-animation: scaleBigToSmall 4s; animation: scaleBigToSmall 4s;}
.index-banner .swiper-slide .txt{ display: flex; justify-content: center; flex-direction: column; position: absolute; left: 7%; height: 100%;z-index: 5;}
.index-banner .swiper-slide .txt .f70{ animation: fadeOutUp 2s; -webkit-animation: fadeOutUp 2s;  animation-fill-mode: both;opacity: 0; }
.index-banner .swiper-slide .txt .f26{ animation: fadeOutDown 2s; -webkit-animation: fadeOutDown 2s; animation-fill-mode: both; opacity: 0;}
.index-banner .swiper-slide-active .txt .f70{ animation: fadeInDown 1.5s; animation-fill-mode: both; -webkit-animation: fadeInDown 1.5s; opacity: 1;}
.index-banner .swiper-slide-active .txt .f26{ animation: fadeInUp 1.5s; animation-fill-mode: both; -webkit-animation: fadeInUp 1.5s;opacity: 1;}
.index-banner .pagination{ position: absolute; bottom: 10%; left: 10vw;  }
.index-banner .pagination .prev,.index-banner .pagination .next{ width:60px; height: 60px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.index-banner .pagination .prev:hover .iconfont,.index-banner .pagination .next:hover .iconfont{ color: #0054ae;}

/* 关于 */
.index-about { height: 850px;}
.index-about:hover .index-aboutbg{left: -100%;}
.index-about:hover, .index-about:hover .color-666,.index-about:hover .color-888, .index-about:hover .color-black { color: #fff;} 
.index-about:hover .aboutit,.index-about:hover .line{filter: grayscale(100%) brightness(500%);}
.index-aboutbg{width: 100%;position: absolute;height: calc(100% + 2px);top: -1px;left: -1px;transition: all 1.56s;z-index: 6;}
.index-aboutbg img{width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: cover;width: 100%;min-width: 100%;min-height: 100%}
.index-about .con{position: absolute;width: 60%;height: 100%;top: 0;left: 0;z-index: 10; padding-left: 10vw;}
.index-about .aboutit{ margin-bottom: -50px;width: 38vw;} 
.index-about .play{width: 100px;cursor: pointer;background: #fff;border-radius: 50%;height: 100px;position: absolute;right: 10vw;top: 50%;box-shadow: 0 0 rgba(255, 255, 255, 0.1),0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1);animation: ripple-wave1 1s linear infinite;animation-play-state: running;opacity: 1;
                   visibility: visible;transform:translateY(-50%) scale(1);-webkit-animation: ripple-wave1 1s linear infinite;transform: scale(0.8);-webkit-transform:translateY(-50%) scale(1);-moz-transform:translateY(-50%) scale(1);-ms-transform:translateY(-50%) scale(1);-o-transform:translateY(-50%) scale(1);
}
.index-about .video{width: 100%;height: 100%;position: relative; }
.index-about .video .video-img{ width: 100%; height: 100%; object-fit: cover;  }
.video-play{position:fixed;top:0;bottom:0;right:0;left:0;width:100vw;height:100vh;z-index:10001;display:none}
.video-bg{position:absolute;top:0;bottom:0;width:100%;z-index:1001;background:#0b0b0b;opacity:.8}
.video-wrap{z-index:1002;position:fixed;top:52%;left:50%;-webkit-transform:translate3d(-50%, -52%, 0);transform:translate3d(-50%, -52%, 0);width:1000px;height:570px;  }
.video-wrap video{width:100%;height:auto}
.video-wrap .close-btn{cursor: pointer; transition: all .36s;text-align: center;line-height: 40px;z-index: 9999;position: absolute;background: #000;border: 2px solid #fff;width: 50px;height: 50px;border-radius: 50%; opacity: 0.5;right: -20px;top: -25px;}
.video-wrap .close-btn:hover{ transform: rotate(180deg); opacity: 1;}

@keyframes ripple-wave1{
    to {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1),0 0 0 45px rgba(255, 255, 255, 0.02);
    }
}
.index-tit .line{width: 16px;height: 2px;background-color: #cdcdcd;}

/* 产品 */
.index-product .img .txt{position: absolute;bottom: 0;left: 0;width: 100%;transition: all .6s;background-image: linear-gradient(to top,rgba(0,0,0,0.2),transparent); -webkit-transition: all .6s; -moz-transition: all .6s; -ms-transition: all .6s; -o-transition: all .6s;height: 20%;} 
#product-swiper{ padding-bottom: 170px;}
.product-slide {width: 180px;height: 50px;border: 2px solid #fff;line-height:50px;color: #fff;position: relative;border-radius: 25px;display: none;margin-top: 40px;animation: rightTop 2s;-webkit-animation: rightTop 2s;}
.product-slide i {position: absolute; width: 40px; height:  40px; top:2.5px; right:8px; background: url(../images/right.png ) no-repeat center center  #fff; background-size: 20% auto; border-radius: 50%;z-index: 8;  transition: all .8s;}
.product-slide .tips {  position: absolute;  z-index: 1;left:15px;overflow: hidden;height: 100%;transition: ease 1s;}
.product-slide:hover { box-shadow: 0 0 15px  rgba(255, 255, 255,.5);}
.product-slide:hover i{  right:  125px;  transform:  rotate(1800deg);   }
.product-slide:hover .tips{ opacity: 0;}
.index-product .swiper-slide:hover .txt{width: 100%; height: 100%; background-color: rgba(53, 57, 57,.9);}
.index-product .swiper-slide:hover .product-slide{ display: inline-block;}
.swiper-pagination-progressbar{ top: auto !important; bottom: 0 !important; width: 1440px !important; left: 50% !important; margin-left: -720px; }
.product-btn  .mouse{ margin: 0 30px; }
.product-btn .next{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); }
.product-btn{  position: absolute; bottom:30px; left: 0; width: 100%; z-index: 9;}
.product-btn .next,.product-btn .prev{ cursor: pointer; filter: grayscale(100%); -webkit-filter: grayscale(100%); }
.product-btn .next:hover,.product-btn .prev:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); }
.index-product .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #0054ae}
.shou {position: absolute;bottom: 10px;width: 100%;left: 0;}
.shouImg {height: 30px;}

/* 应用领域 */
.app-box{ width: 100%; height: 800px;}
.yyImg { position: absolute; top: 0; left: 0; z-index: 1; width:100%;}
.yyImg .img{ display: none; transition: all .36s; animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93); -webkit-animation: scaleIn 2s forwards cubic-bezier(0.4, 0, 0.49, 0.93); }
.yyImg .img.on{ display: block;}
.yyImg .img span{ position: absolute; top: 0; left: 0; background: rgba(0,0,0,.22); width: 100%; height: 100%;z-index: 10;}
.yyImg .img img{ width: 100%; height: 100%; object-fit: cover;}
.app-box .con{position: relative;z-index: 5;}
.app-box .left{ width: 80%; padding-left: 10vw;}
.app-box .right{ width: 20%; background-color: rgba(0, 0, 0, 0.2);}
.yyTabtit {  width: 90%;}
.yyTabtit::after{ width: 94%; height: 1px; background-color: rgba(255, 255, 255, 0.3); display: block; content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 34px;z-index: -1;  -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.yyTabtit .yuan{ width: 70px; height: 70px;  }
.yyTabtit .yuan img{max-width: 85%; max-height: 50%; opacity: 0; position: relative; z-index: 5;}
.yyTabtit .yuan i::after{ width: 124%; height: 124%; transition: all .36s; transform: scale(0); position: absolute; left: -12%; top: -12%; border: 1px  #fff  dashed; border-radius: 50%; display: block; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); }
.yyTabtit .yuan i::before{ transition: all .36s; transform:scale(0.2) ; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; display: block; content: ''; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(0.2) ; -moz-transform:scale(0.2) ; -ms-transform:scale(0.2) ; -o-transform:scale(0.2) ; }
.yyTabtit li:hover i::after,.yyTabtit li.on i::after{ transform:scale(1) ; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; }
.yyTabtit li:hover i::before,.yyTabtit li.on i::before{ transform:scale(1) ; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; }
.yyTabtit li:hover  .yuan img,.yyTabtit li.on  .yuan img{opacity: 1;}
.app-box .left  .swiper{ width: 80%;}
.tabBtnUl  li{ display: none;}
.tabBtnUl  li.on{ display:flex;}
.tabBtnUl .btn{width: 100px;height: 100px;background: rgba(255, 255, 255, 0.5);box-shadow: 0 0 rgba(255, 255, 255, 0.1),0 0 0 15px rgba(255, 255, 255, 0.1),0 0 0 30px rgba(255, 255, 255, 0.1);animation: ripple-wave1 1s linear infinite;animation-play-state: running;-webkit-animation: ripple-wave1 1s linear infinite;}
.tabBtnUl .btn img{ height: 50%; filter: grayscale(100%) brightness(500%); }
#swiperTab::after{ width: calc(100% - 100px) ; background-color: rgba(255, 255, 255, 0.4); left: 50px; top: 32px; display: block; content: ''; position: absolute; height: 1px;}
.wapIcontab { padding: 9px ;}
.wapIcontab .yuan{ width: 50px; height: 50px;   }
.wapIcontab .yuan img{max-width: 85%; max-height: 50%; position: relative; z-index: 5;}
.wapIcontab .yuan i::after{ width: 124%; height: 124%; transition: all .36s; transform: scale(1); position: absolute; left: -12%; top: -12%; border: 1px  #fff  dashed; border-radius: 50%; display: block; content: ''; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); }
.wapIcontab .yuan i::before{ transition: all .36s; transform:scale(1) ; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #fff; display: block; content: ''; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform:scale(1) ; -moz-transform:scale(1) ; -ms-transform:scale(1) ; -o-transform:scale(1) ; }
.swiper-slide-thumb-active .wapIcontab .yuan i::before{ background-color: #0054ae;}
.swiper-slide-thumb-active  .wapIcontab .yuan img{filter: grayscale(100%) brightness(500%);  }

/* 合作客户 */
.index-partnerul li {width: calc((100% - 120px)/6);margin-right: 24px;margin-bottom: 24px;height: 140px;}
.index-partnerul li:nth-child(6n) {margin-right: 0;}
.index-partnerul li:hover {transform: scale(0.95);box-shadow: 0 0 10px rgba(16, 51, 115, .15);-webkit-transform: scale(0.95);-moz-transform: scale(0.95);-ms-transform: scale(0.95);-o-transform: scale(0.95);}

/* 新闻资讯 */
.index-news .news-tab span{ cursor: pointer;}
.index-news .news-tab span.on{ color: #0054ae; border-bottom: 1px solid #0054ae;}
.news-box figure{ display: none;}
.news-box figure.on{ display: block;}
.line-height1{ line-height: 1;}
.news-item .more{ width: 160px; height: 50px;}
.news-item .desc{ position: absolute; top: 0; left: 0; width: 100%; z-index: 1;}
.news-item img{ width: 100%; height:270px ; object-fit: cover; position: relative; z-index: 2; transform: translateY(-100%);}
.news-item .more{ position: absolute; z-index: 3; bottom: 0; right: 0;}
.news-item .more::before{ width: 100%;  height: 0; background-color: #0054ae; transition: all .36s; display: block; content: ''; top: 0; left: 0;  position: absolute;}
.news-item .more i{ z-index: 5;}
.news-item:hover img{ transform: translateY(0);}
.news-item:hover .more{ background-color: #0054ae; color: #fff; border-color: #0054ae;}
.news-item:hover .more::before{ height: 100%;}
.news-item:hover .time{ color: #0054ae;}
.news-item.swiper-slide-active img{ transform: translateY(0);}
.news-item.swiper-slide-active .more{ background-color: #0054ae; color: #fff; border-color: #0054ae;}
.news-item.swiper-slide-active .more::before{ height: 100%;}
.news-item.swiper-slide-active  .time{ color: #0054ae;}

@media screen and (max-width:1440px) {
    .index-banner .swiper-slide .txt{left: 5%;}
    .index-about .con{padding-left: 5vw;}
    .index-about .play{ width: 80px; height: 80px;right:5vw}
    .index-about{height: 750px;}
    .news-item img{ height: 220px;}
}

@media screen and (max-width:1280px) { 
    .index-banner .swiper-slide .txt{left: 2%;}
    .index-about .con{padding-left: 2vw;}
    .index-about .play{right:2vw}
    .video-wrap {width: 90vw;height: auto;}
}

@media screen and (max-width:1000px) {
    .index-about{ height: 650px;}
    .index-about .con{ width: 80%;}
    .index-partnerul li{ width: calc((100% - 50px)/3); margin-right: 25px; margin-bottom: 25px; height: 140px;}
    .index-partnerul li:nth-child(3n){ margin-right: 0;}
}

@media screen and (max-width:750px) {
    .index-banner{ height: 340px; }
    .index-banner .swiper-container{ height: 340px;}
    .index-banner .headbg{ height: 340px;}
    .index-banner .pagination{ height: auto; left: 20px; bottom: 10px; right: 20px;}
    .index-banner .swiper-slide .txt{ left: 20px;}
    .index-banner .f70{ font-size: 22px;}
    .index-banner .pagination .prev, .index-banner .pagination .next{ width: 30px; height: 30px;}

    .index-aboutbg{ display: none;}
    .index-about{ height: auto; display: flex; flex-direction: column-reverse;  }
    .index-about .con{ position: relative; top: auto; left: auto; width: 100%; padding: 10px 20px;}
    .index-about:hover, .index-about:hover .color-666,.index-about:hover .color-888, .index-about:hover .color-black { color: #333;} 
    .index-about:hover .aboutit,.index-about:hover .line{ filter: grayscale(0%) brightness(100%); -webkit-filter: grayscale(0%) brightness(100%); }
    .index-about .video{ height: auto;}
    .index-about .play{ width: 50px; height: 50px; bottom: 50px; top: auto; right: 50%;  margin-right: -25px; }
    .index-about .video .videoImg{ height: 200px;} 
    .video-box{ height: 50vh;}
    .video-box .video-background{ min-height: 50vh;}
    .video-wrap .close-btn{width: 35px;height: 35px;line-height:35px;right: 0px;top: -15px}
    .video-wrap .close-btn img{width: 60%;}
    /*    .numUl{ flex-wrap: wrap;}
        .numUl li{ width: 50%; text-align: center; margin-bottom: 10px;}*/
    #product-swiper{ padding-bottom: 50px;}
    .product-slide{ width: 90%; height: 38px; line-height: 38px;}
    .product-slide i{ width: 22px; height: 22px;     top: 8px;}
    .swiper-pagination-progressbar{ width: 100% !important;   margin-left: -50% !important; }
    .product-btn{ display: none;}

    .app-box .right{ display: none;}
    .app-box .left{ padding:0 20px 40px 20px; width: 100%;} 
    .yyTabtit{ width: 100%; display: none;}
    .app-box .left .swiper{ width: 100%;}
    .app-box{ height: auto;}
    #tabs-container  .f34 { padding-top: 0;}

    .index-partnerul li{ width: 48%; margin-right:4%; margin-bottom: 20px; height: 80px;}
    .index-partnerul li:nth-child(3n){ margin-right:4%;}
    .index-partnerul li:nth-child(6n){ margin-right: 4%;}
    .index-partnerul li:nth-child(2n){ margin-right: 0;}
    .wap-partner .swiper-container{ height: 300px;}
    .wap-partner .swiper-container .swiper-slide{    height: calc((100% - 15px) / 2);} 
    
    .news-item img{ height: 150px;}
    .news-item .more{ width: 100px; height: 40px;}
    .news-item:hover img{ transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); }

}

@media screen and (max-width:500px) {
    .wap-partner .swiper-container{ height: 200px;}
}