@charset "utf-8";
/*
    author:sdw;
    date:2023-04-08;
*/

/*--public--*/
.header{position:fixed;}
.section-ctrl{display:none;position:fixed;z-index:999;left:0;top:0;bottom:0;width:80px;background:rgba(0,0,0,0.2);}
.section-ctrl .menu-btn{position:absolute;z-index:3;top:0;left:0;width:80px;line-height:80px;color:#fff;text-align:center;cursor:pointer;border-bottom:rgba(255,255,255,.1) solid 1px;transition:all .5s;}
.section-ctrl .menu-btn i{display:block;font-weight:300;font-size:30px;}
.section-ctrl .menu-btn:hover{background:var(--vi-color);}
.section-ctrl .arrow{position:absolute;z-index:3;left:0;bottom:40px;width:80px;color:#fff;text-align:center;}
.section-ctrl .arrow span{display:inline-block;width:14px;font-size:14px;line-height:1;}
.section-ctrl .arrow i{display:block;margin-top:10px;animation:fadeInDown linear 1s infinite;}
.section-ctrl .swiper-pager{display:flex;flex-wrap:wrap;margin:0 auto;width:7px;height:100%;align-content:center;}
.section-ctrl .swiper-pager span{display:block;margin:15px 0;width:7px;height:7px;background:#fff;}
body::-webkit-scrollbar{
    display:none;
}
@media(min-width:1201px){
#app{height:100vh;}
.main{height:100%;overflow:hidden;}
.section-wrapper,.section-slide{height:100%;}
.section-slide.autoHeight{height:auto !important;}
.section-ctrl{display:block;}
}
/*--end public--*/

/*--wrap-title--*/

/*--end wrap-title--*/

/*--banner--*/
.banner{position:relative;width:100%;height:100%;}
.banner .swiper-wrapper{height:100%;}
.banner .swiper-slide{display:block;position:relative;z-index:1;height:100%;overflow:hidden;}
.banner .swiper-slide .pic{position:absolute;z-index:-1;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transition:transform 4s 0s ease;transform:matrix(1, 0, 0, 1, 0, 0);}
.banner .swiper-slide .pic img{display:none;width:100%;}
.banner .swiper-slide .text{margin:0 auto;width:72.92%;max-width:1400px;}
.banner .swiper-slide .text img{display:block;margin-top:24%;width:57.14%;max-width:800px;transform:translateX(20%);opacity:0;transition:all 2s;}
.banner .swiper-slide.swiper-slide-active .text img{transform:translateX(0);opacity:1;}
.banner .swiper-ctrl{position:absolute;z-index:9;left:50%;bottom:12%;width:72.92%;max-width:1400px;line-height:1.5rem;color:#fff;transform:translateX(-50%);display:flex;justify-content:flex-end;}
.banner .swiper-ctrl .swiper-pager{margin-right:0.625rem;width:3.75rem;font-size:0.875rem;}
.banner .swiper-ctrl .swiper-pager span{opacity:.8;}
.banner .swiper-ctrl .swiper-pager span:before{content:"0";}
.banner .swiper-ctrl .swiper-pager span.swiper-pagination-current{opacity:1;font-weight:bold;}
.banner .swiper-ctrl .swiper-arrow{display:flex;justify-content:space-between;position:relative;width:80px;}
.banner .swiper-ctrl .swiper-arrow:before{display:block;position:absolute;left:50%;top:50%;transform:translateY(-50%);width:1px;height:22px;content:"";background:#fff;}
.banner .swiper-ctrl .swiper-arrow div{cursor:pointer;}
@media(max-width:1200px){
.banner,.banner .swiper-wrapper{height:auto;}
.banner .swiper-slide .pic{position:static;background:none !important;}
.banner .swiper-slide .pic img{display:block;}
.banner .swiper-slide .text{position:absolute;left:20px;right:20px;top:50%;width:auto;transform:translateY(-50%);}
.banner .swiper-slide .text img{margin-top:0;width:100%;}
.banner .swiper-slide.swiper-slide-active .pic{transform:none;}
.banner .swiper-ctrl{left:0;width:100%;justify-content:center;transform:translateX(0);}
.banner .swiper-ctrl .swiper-pager{margin-right:0;width:100%;text-align:center;font-size:14px;}
.banner .swiper-ctrl .swiper-arrow{display:none;}
}
/*--end banner--*/

/*--aboutus--*/
.aboutus{display:flex;align-items:center;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;}
.aboutus .inner{margin:0 auto;width:83.33vw;max-width:1600px;}
.aboutus .text{overflow:hidden;}
.aboutus .text span{display:block;font-size:1.25rem;color:#333;transform:translateY(50px);opacity:0;transition:all 1s;}
.aboutus .text h2{font-size:3.25rem;color:#333;transform:translateY(50px);opacity:0;transition:all 1.5s;}
.aboutus .text a{display:block;margin-top:4.375%;font-size:1rem;line-height:2rem;color:#333;transform:translateY(50px);opacity:0;transition:all 2s;}
.aboutus .text a:after{display:inline-block;margin-left:8px;width:1.625rem;line-height:1.625rem;font-size:12px;font-family:"iconfont";content:"\e694";text-align:center;color:#fff;background:var(--vi-color);border-radius:50%;}
.aboutus .text a:hover{color:var(--vi-color);}
.aboutus .datas{display:flex;flex-wrap:wrap;margin-top:11.25%;}
.aboutus .datas .item{padding:0 20px;color:var(--vi-color);overflow:hidden;border-right:#d8d8d8 solid 1px;}
.aboutus .datas .item em{display:flex;align-items:flex-start;font-weight:bold;font-size:2.625rem;font-family:"DIN Medium";}
.aboutus .datas .item em:after{display:block;font-size:1rem;font-weight:bold;font-family:"iconfont";content:"+";}
.aboutus .datas .item span{display:block;font-size:1rem;line-height:1.5;}
.aboutus .datas .item:first-child{padding-left:0;}
.aboutus .datas .item:last-child{padding-right:0;border-right:none;}
.swiper-slide-active .aboutus .text span{transform:translateY(0);opacity:1;}
.swiper-slide-active .aboutus .text h2{transform:translateY(0);opacity:1;}
.swiper-slide-active .aboutus .text a{transform:translateY(0);opacity:1;}
@media(max-width:1200px){
.aboutus{display:block;padding:40px 20px;height:auto;background-color:#f1f1f1;background-position:50% bottom;background-size:100%;}
.aboutus .inner{width:100%;}
.aboutus .text{transform:translateY(30px);opacity:0;transition:all 1s;}
.aboutus .text span{font-size:16px;transform:translateY(0);opacity:1;}
.aboutus .text h2{font-size:22px;transform:translateY(0);opacity:1;white-space:nowrap;}
.aboutus .text a{font-size:14px;transform:translateY(0);opacity:1;}
.aboutus .text.animated{transform:translateY(0);opacity:1;}
.aboutus .datas{transform:translateY(30px);opacity:0;transition:all 1s;}
.aboutus .datas .item{margin-bottom:20px;width:33.33%;}
.aboutus .datas .item:nth-child(3){padding-right:0;border-right:none;}
.aboutus .datas .item:nth-child(4){padding-left:0;}
.aboutus .datas .item em{font-size:24px;}
.aboutus .datas .item span{font-size:14px;}
.aboutus .datas.animated{transform:translateY(0);opacity:1;}
}
/*--end aboutus--*/

/*--product--*/
.product{display:flex;align-items:center;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;}
.product .inner{display:flex;justify-content:space-between;margin:0 auto;width:83.33vw;max-width:1600px;height:68vh;}
.product .text{padding:3.75%;width:30%;height:100%;overflow:hidden;background:rgba(0,0,0,.3) url(../images/Index/product_txt_bg.png) no-repeat 0 0 / 75%;transform:translateY(20%);opacity:0;transition:all 2s;}
.product .text .hd{overflow:hidden;}
.product .text .hd span{display:block;font-size:1.25rem;color:#fff;}
.product .text .hd h2{font-size:3.25rem;color:#fff;}
.product .text .hd h2 a{color:#fff;}
.product .text .bd{padding-top:13%;overflow:hidden;}
.product .text .bd li{line-height:3.5rem;font-size:1.25rem;border-bottom:rgba(255,255,255,.1) solid 1px;}
.product .text .bd li a{display:block;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product .text .bd li a:before{display:block;float:right;font-family:"iconfont";content:"\e694";opacity:.5;}
.product .text .bd li:hover{border-color:#fff;transition:all .5s;}
.product .text .bd li:hover a:before{opacity:1;}
.product .text .bd ul.tile{display:flex;}
.product .text .bd ul.tile li{padding:0 1.25rem;text-align:center;color:#fff;border-bottom:none;border-right:#fff solid 1px;}
.product .text .bd ul.tile li:first-child{padding-left:0;}
.product .text .bd ul.tile li:last-child{padding-right:0;border-right:0;}
.product .text .bd ul.tile li a:before{display:none;}
.product .text .bd ul.tile li i{display:block;margin:0 auto;width:2rem;}
.product .text .bd ul.tile li span{display:block;margin-top:1rem;line-height:1;}
.product .text .bd .more{margin-top:30%;overflow:hidden;}
.product .text .bd .more a{font-size:1rem;line-height:1.75rem;color:#fff;}
.product .text .bd .more a:after{display:inline-block;margin-left:0.625rem;width:1.75rem;text-align:center;font-size:12px;font-family:"iconfont";content:"\e694";color:#fff;background:var(--vi-color);border-radius:50%;}
.product .text .bd .more a:hover{color:var(--vi-color);}
.product .num{width:200px;text-align:center;}
.product .num em{display:block;margin:0 auto;width:50px;line-height:50px;font-size:20px;font-family:"DIN Medium";color:#fff;background:var(--vi-color);border-radius:50%;}
.product .num span{display:block;line-height:30px;font-size:16px;font-weight:300;color:#fff;}
.product .num i{display:block;margin:16px auto 0;width:50px;height:50px;}
.swiper-slide-active .product .text{transform:translateY(0);opacity:1;}
@media(max-width:1200px){
.product{display:block;padding:40px 20px;height:auto;}
.product .inner{width:100%;height:auto;}
.product .text{width:calc(100% - 140px);min-height:320px;}
.product .text .hd span{font-size:14px;}
.product .text .hd h2{font-size:24px;}
.product .text .bd li{line-height:2.5;font-size:14px;}
.product .text.animated{transform:translateY(0);opacity:1;}
.product .num{width:120px;}
.product .num em{width:30px;line-height:30px;font-size:16px;}
.product .num span{line-height:1.5;font-size:12px;}
.product .num i{margin-top:8px;width:30px;height:30px;}
}
/*--end product--*/

/*--case--*/
.case{display:flex;align-items:center;width:100%;height:100%;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;}
.case .inner{margin:0 auto;width:83.33vw;max-width:1600px;}
.case-title{width:100%;}
.case-title span{display:block;font-size:1.25rem;color:#333;transform:translateY(50px);opacity:0;transition:all 1s;}
.case-title h2{font-size:3.25rem;color:#333;transform:translateY(50px);opacity:0;transition:all 1.5s;}
.case-title a{display:block;margin-top:1rem;font-size:1rem;line-height:2rem;color:#333;transform:translateY(50px);opacity:0;transition:all 2s;}
.case-title a:after{display:inline-block;margin-left:8px;width:1.625rem;line-height:1.625rem;font-size:12px;font-family:"iconfont";content:"\e694";text-align:center;color:#fff;background:var(--vi-color);border-radius:50%;}
.case-title a:hover{color:var(--vi-color);}

.case-slide{position:relative;margin-top:2rem;width:65%;transform:translateY(50%);opacity:0;transition:all 2s;}
.case-slide .swiper-slide{position:relative;overflow:hidden;}
.case-slide .swiper-slide .pic{overflow:hidden;}
.case-slide .swiper-slide .pic img{display:block;transition:all 1s;}
.case-slide .swiper-slide .pic:hover img{transform:scale(1.05);}
.case-slide .swiper-slide .text{position:absolute;top:0;right:0;display:flex;flex-wrap:wrap;align-content:center;padding:5%;width:40.5%;height:100%;color:#fff;}
.case-slide .swiper-slide .hd{width:100%;}
.case-slide .swiper-slide .hd span{display:block;font-size:1.2rem;}
.case-slide .swiper-slide .hd h3{font-size:1.5rem;}
.case-slide .swiper-slide .hd h3 a{color:#fff;}
.case-slide .swiper-slide .bd{margin-top:40%;width:100%;}
.case-slide .swiper-slide .bd a{display:block;font-size:1rem;color:#fff;}
.case-slide .swiper-slide .bd a:after{display:inline-block;margin-left:8px;width:1.625rem;line-height:1.625rem;font-family:"iconfont";content:"\e694";text-align:center;color:var(--vi-color);background:#fff;border-radius:50%;}

.case-ctrl{position:absolute;z-index:999;left:100%;top:0;display:flex;align-content:center;flex-wrap:wrap;width:170px;height:100%;text-align:center;}
.case-ctrl .swiper-arrow{width:100%;}
.case-ctrl .swiper-arrow .prev,.case-ctrl .swiper-arrow .next{margin:2rem auto;width:3.75rem;line-height:3.75rem;color:#fff;text-align:center;cursor:pointer;background:#d4d4d4;border-radius:50%;transition:all .5s;}
.case-ctrl .swiper-arrow .prev:hover,.case-ctrl .swiper-arrow .next:hover{background:var(--vi-color);}
.case-ctrl .swiper-pager{margin-top:50px;line-height:25px;font-family:"DIN Medium";font-size:14px;color:#666;}
.case-ctrl .swiper-pager span:before{content:"0";}
.case-ctrl .swiper-pager span.swiper-pagination-current{color:#333;}
.swiper-slide-active .case-slide{transform:translateY(0);opacity:1;}
.swiper-slide-active .case .case-title span{transform:translateY(0);opacity:1;}
.swiper-slide-active .case .case-title h2{transform:translateY(0);opacity:1;}
.swiper-slide-active .case .case-title a{transform:translateY(0);opacity:1;}

@media(max-width:1200px){
.case{display:block;padding:40px 20px;height:auto;}	
.case .inner{width:100%;height:auto;}
.case-slide{margin:0 auto;width:80%;transform:translateY(0);opacity:1;}
.case-slide .swiper-slide .text{display:block;position:absolute;top:unset;left:0;bottom:0;padding:20px;width:100%;height:auto;opacity:0;}
.case-slide .swiper-slide .hd{position:relative;}
.case-slide .swiper-slide .hd:after{display:block;position:absolute;top:50%;right:0;width:24px;line-height:24px;font-size:12px;font-family:"iconfont";content:"\e694";text-align:center;color:var(--vi-color);background:#fff;border-radius:50%;transform:translateY(-50%);}
.case-slide .swiper-slide .hd span{font-size:12px;}
.case-slide .swiper-slide .hd h3{font-size:16px;}
.case-slide .swiper-slide .bd{display:none;}
.case-slide .swiper-slide-active .text{opacity:1;transition:all .5s .15s;}
.case-ctrl{position:static;width:100%;height:auto;}
.case-ctrl .swiper-arrow{display:none;}
.case-ctrl .swiper-pager{margin-top:10px;}
}
/*--end case--*/

/*--news--*/
.news{display:flex;align-items:center;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;}
.news .inner{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 auto;width:83.33vw;max-width:1600px;}
.news-text{width:25rem;}
.news-text span{display:block;font-size:1.25rem;color:#333;transform:translateY(50px);opacity:0;transition:all 1s;}
.news-text h2{margin-top:10px;font-size:1.5rem;color:#333;transform:translateY(50px);opacity:0;transition:all 1.5s;}
.news-text a{display:block;margin-top:4.375%;font-size:1rem;line-height:2rem;color:#333;transform:translateY(50px);opacity:0;transition:all 2s;}
.news-text a:after{display:inline-block;margin-left:8px;width:1.625rem;line-height:1.625rem;font-size:12px;font-family:"iconfont";content:"\e694";text-align:center;color:#fff;background:var(--vi-color);border-radius:50%;}
.news-text a:hover{color:var(--vi-color);}

.news-slide{width:56.25%;overflow:hidden;}
.news-slide .item{display:block;overflow:hidden;}
.news-slide .pic{overflow:hidden;}
.news-slide .pic img{display:block;transition:all 1s;}
.news-slide .txt{padding:1.875rem 0;overflow:hidden;border-bottom:#d8d8d8 solid 1px;}
.news-slide .txt em{font-size:0.875rem;line-height:24px;color:#a3a3af;font-family:"DIN Medium";}
.news-slide .txt em:after{display:inline-block;margin:0 1rem;content:"|";}
.news-slide .txt span{font-size:1rem;line-height:24px;color:#a3a3af;}
.news-slide .txt h3{margin-top:1rem;height:4rem;line-height:2rem;font-size:1.5rem;color:#333;overflow:hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.news-slide .txt b{display:block;margin-top:1.5rem;font-size:0.875rem;color:#a3a3af;text-transform:uppercase;}
.news-slide .txt b:after{display:inline-block;margin-left:8px;font-weight:400;font-family:"iconfont";content:"\e694";}
.news-slide .item:hover .pic img{transform:scale(1.1);}
.news-slide .item:hover .txt h3,.news-slide .item:hover .txt b{color:var(--vi-color);}

.swiper-slide-active .news .news-text span{transform:translateY(0);opacity:1;}
.swiper-slide-active .news .news-text h2{transform:translateY(0);opacity:1;}
.swiper-slide-active .news .news-text a{transform:translateY(0);opacity:1;}

@media(max-width:1200px){
.news{display:block;padding:40px 20px;height:auto;}
.news .inner{width:100%;height:auto;}
.news-text{width:100%;}
.news-text span{font-size:16px;transform:translateY(0);opacity:1;}
.news-text h2{font-size:22px;transform:translateY(0);opacity:1;white-space:nowrap;}
.news-text a{font-size:14px;transform:translateY(0);opacity:1;}
.news-slide{margin-top:30px;width:100%;}
.news-slide .txt{padding:15px 0;}
.news-slide .txt em{font-size:14px;}
.news-slide .txt span{font-size:14px;}
.news-slide .txt h3{margin-top:10px;height:50px;font-size:16px;line-height:25px;}
.news-slide .txt b{margin-top:10px;font-size:14px;}
}
/*--end news--*/