@charset "utf-8";

/*--wrap-title--*/
.wrap-title{text-align:center;animation:fadeInDownSmall 1s;}
.wrap-title em{display:block;margin-bottom:1.25rem;font-size:1rem;color:var(--vi-color);}
.wrap-title h2{font-size:2.625rem;line-height:1.25;font-weight:bold;}
.wrap-title h2{color:#999;}
.wrap-title h2 span{color:var(--vi-color);}
.wrap-title.white em,.wrap-title.white h2{color:#fff;}
.wrap-title.white h2 span{color:#9bb2c4;}
@media(max-width:1024px){
.wrap-title em{font-size:1.25rem;}
}
/*--end wrap-title--*/

/*--banner--*/
.banner{position:relative;overflow:hidden;}
.banner .swiper-slide{display:block;position:relative;overflow:hidden;}
.banner .swiper-slide .pic img{display:block;width:100%;transform:scale(1.05);transition:all 5s linear;}
.banner .swiper-slide .text{position:absolute;z-index:9;left:50%;bottom:32%;width:73%;color:#fff;transform:translateX(-50%);clip-path:inset(0 0 100% 0);}
.banner .swiper-slide .text h3{font-size:3.875rem;}
.banner .swiper-slide .text p{margin-top:1.125rem;font-size:1.125rem;}
.banner .swiper-slide-active .pic img{transform:scale(1);}
.banner .swiper-slide-active .text{clip-path: inset(0 0 0 0);transition:all 2s 1s;}
.banner .prev,.banner .next{position:absolute;z-index:9;top:50%;width:3.125rem;height:3.125rem;line-height:3.125rem;text-align:center;color:#fff;cursor:pointer;background:rgba(0,0,0,0.5);border-radius:50%;opacity:0;transform:translateY(-50%);transition:all .5s;}
.banner .prev{left:5%;}
.banner .next{right:5%;}
.banner .prev:hover,.banner .next:hover{color:var(--vi-color);background:var(--vi-subColor);}
.banner:hover .prev,.banner:hover .next{opacity:1;}
.banner .swiper-pager{position:absolute;z-index:3;left:0;bottom:8%;width:100%;text-align:center;}
.banner .swiper-pager .swiper-pagination-bullet{position:relative;margin:0 .5rem;width:8px;height:8px;background-color:transparent;cursor:pointer;border:#fff solid 1px;}
.banner .swiper-pager .swiper-pagination-bullet-active{border-color:var(--vi-subColor); background-color:var(--vi-subColor);}
@media(max-width:1024px){
.banner .swiper-slide .text{bottom:60%;}
.banner .swiper-slide .text h3{font-size:2.4rem;}
.banner .swiper-slide .text p{margin-top:1rem;font-size:1.4rem;}
}
/*--end banner--*/

/*--abouts--*/
.abouts{padding:var(--wrap-padding) 2rem;overflow:hidden;background:#fff;}
.abouts-inner{display:flex;flex-wrap:wrap;justify-content:space-between;}
.abouts-title{width:37.5rem;animation:fadeInDownSmall 1s;}
.abouts-title .wrap-title{text-align:left;}
.abouts-cont{padding-top:3rem;width:39.375rem;animation:fadeInUpSmall 1s;}
.abouts-cont .summary{font-size:1rem;line-height:1.75;color:var(--vi-color);overflow:hidden;}
.abouts-cont .more{margin-top:5rem;}
.abouts-cont .more a{display:flex;align-items:center;font-size:0.875rem;color:var(--vi-color);}
.abouts-cont .more a:after{display:block;margin-left:1.25rem;width:2rem;line-height:2rem;text-align:center;color:#fff;font-family:"iconfont";content:"\e694";background:var(--vi-color);border-radius:50%;}
@media(max-width:1200px){
.abouts-title,.abouts-cont{width:100%;}
.abouts-cont .summary{font-size:1.25rem;}
.abouts-cont .more a{font-size:1rem;}
}
/*--end abouts--*/

/*--video--*/
.video{position:relative;z-index:1;padding:calc(var(--wrap-padding)*1.5) 2rem var(--wrap-padding);overflow:hidden;background:url(../images/video_bg.jpg) no-repeat center / cover;}
.video .inner{position:relative;display:flex;justify-content:space-between;align-items:flex-end;padding-left:6.25%;}
.video .inner .datas{width:22rem;}
.video .inner .datas .item{margin-top:2rem;color:#fff;}
.video .inner .datas .item em{display:block;font-size:3.25rem;}
.video .inner .datas .item span{display:block;font-size:1rem;}
.video .inner .player-btn{position:absolute;left:50%;top:50%;cursor:pointer;transform:translate(-50%,-50%);}
.video .inner .player-btn i{display:block;font-size:3.75rem;color:var(--vi-subColor);}
.video .inner .more a{display: flex;align-items:center;line-height:2rem;white-space:nowrap;color:#fff;}
.video .inner .more a::after{display: block;margin-left:1.25rem;width:2rem;height: 2rem;text-align: center; font-family: "iconfont"; color: var(--vi-color); content: "\e694";background-color:#fff; border-radius:50%;}
.video .inner .more a:hover{color: var(--vi-subColor);}
.video .inner .more a:hover::after{color: var(--vi-color); background-color: var(--vi-subColor);}
.video .mask{display:block;position:absolute;z-index:-1;left:0;top:0;width:18.75%;height:100%;background:var(--vi-color);opacity:.9;}
@media(max-width:1200px){
.video .inner .player-btn{display:none;}
}
/*--end video--*/

/*--mode--*/
.mode{padding:var(--wrap-padding) 2rem;overflow:hidden;background:#fff;}
.mode-inner{position:relative;margin-top:var(--wrap-padding);overflow:hidden;}
.mode-inner .pic{position:relative;z-index:1;overflow:hidden;}
.mode-inner .pic img{display:block;width:100%;}
.mode-inner .pic .mask{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--vi-color);opacity:.9;clip-path:circle(200% at 100% 0%);}
.mode-inner .list{position:absolute;z-index:3;top:100%;right:6.25%;width:33.125%;}
.mode-inner .item{position:relative;padding:var(--wrap-padding) 0;color:#fff;overflow:hidden;}
.mode-inner .item .hd{overflow:hidden;}
.mode-inner .item .hd em{display:block;font-size:var(--title-size);line-height:1;clip-path:inset(0% 0% 50% 0%);}
.mode-inner .item .hd h3{font-size:var(--title-size);}
.mode-inner .item .bd{padding-top:5rem;overflow:hidden;}
.mode-inner .item .bd p{font-size:var(--text-size);line-height:1.75;}
.mode-inner .item .bd a{display: flex;align-items:center;margin-top:4rem;line-height:2rem;white-space:nowrap;color:#fff;}
.mode-inner .item .bd a::after{display: block;margin-left:1.25rem;width:2rem;height: 2rem;text-align: center; font-family: "iconfont"; color: var(--vi-color); content: "\e694";background-color:#fff; border-radius:50%;}
.mode-inner .item .bd a:hover{color: var(--vi-subColor);}
.mode-inner .item .bd a:hover::after{color: var(--vi-color); background-color: var(--vi-subColor);}
@media(max-width:1024px){
.mode-inner{width:100%;}
.mode-inner .list{right:0;width:auto;}
.mode-inner .item{padding:var(--wrap-padding) 2rem;}
}
/*--end mode--*/

/*--product--*/
.product{padding:var(--wrap-padding) 2rem;overflow:hidden;background:url(../images/product_bg.jpg) no-repeat center 0 / cover;}
.product-inner{margin-top:5.625rem;overflow:hidden;}
.product-list{display:flex;flex-wrap:wrap;justify-content:space-between;}
.product-list .item{display:block;margin-bottom:7.5rem;width:46.25%;background:#fff;}
.product-list .item:nth-child(2n){transform:translateY(5.625rem);}
.product-list .item .pic{position:relative;overflow:hidden;background:var(--vi-color);}
.product-list .item .pic img{display:block;width:100%;}
.product-list .item .pic img:nth-child(2){position:absolute;top:0;left:0;opacity:0;transition:all 1s;}
.product-list .item .text{padding:9.45%;overflow:hidden;}
.product-list .item .text em{display:flex;align-items:center;font-size:1rem;color:#999;text-transform:uppercase;}
.product-list .item .text em:before{display:block;margin-right:1.25rem;width:1.875rem;height:1px;content:"";background:#999;}
.product-list .item .text h3{margin-top:0.625rem;height:calc(1.5rem * 1.5 * 2);font-size:1.5rem;color:var(--vi-color);font-weight:bold;}
.product-list .item .text span{display:flex;align-items:center;margin-top:2.5rem;font-size:0.875rem;color:var(--vi-color);}
.product-list .item .text span:after{display:block;margin-left:1.25rem;width:2rem;line-height:2rem;text-align:center;font-family:"iconfont";content:"\e694";color:#fff;background:var(--vi-color);border-radius:50%;}
.product-list .item:hover .pic img:nth-child(2){opacity:1;}
.product-list .item:hover .text span:after{color:var(--vi-color);background:#ffee00;}
.product-more{margin-top:5rem;text-align:center;}
.product-more a{display:flex;flex-direction:column;justify-content:center;margin:0 auto;width:8.375rem;height:8.375rem;font-size:0.875rem;color:var(--vi-color);border:var(--vi-color) solid 1px;border-radius:50%;transition:all 1s;}
.product-more a:before{display:block;margin-bottom:0.625rem;font-family:"iconfont";content:"\e609";font-size:1rem;}
.product-more a:hover{color:#fff;background:var(--vi-color);}
@media(max-width:1200px){
.product-list .item{margin-bottom:2rem;width:100%;}
.product-list .item:nth-child(2n){transform:translateY(0);}
.product-list .item .text em{font-size:1.25rem;}
.product-list .item .text span{font-size:1rem;}
.product-more{margin-top:3rem;}
}
/*--end product--*/

/*--news--*/
.news{padding:var(--wrap-padding) 2rem;overflow:hidden;background:#fff;}
.news-inner{margin-top:var(--wrap-padding);}
.news-list-wrap{}
.news-list-wrap .list{margin-top:-2.75rem}
.news-list-wrap .list .item{display:flex;justify-content:flex-end;position:relative;width:100%;color:#999;}
.news-list-wrap .list .item:after{display:block;position:absolute;z-index:1;right:0;bottom:0;width:calc(100% - 23.125rem);height:1px;content:"";background:var(--vi-color);transform:scaleX(0);transform-origin:right 0;transition:all 1s;}
.news-list-wrap .list .item:before{display:block;position:absolute;top:50%;right:0;font-family:"iconfont";content:"\e694";}
.news-list-wrap .list .pic{position:absolute;z-index:3;left:0;width:23.125rem;transform:translateY(-2rem);overflow:hidden;clip-path:inset(0% 100% 0% 0%);transition:all 1s;}
.news-list-wrap .list .pic img{display:block;width:100%;transition:all 1s;}
.news-list-wrap .list .pic:hover img{transform:scale(1.1);}
.news-list-wrap .list .text{padding:2.75rem 0;width:calc(100% - 28.75rem);overflow:hidden;border-bottom:#ced5da solid 1px;}
.news-list-wrap .list .text em{display:block;font-size:0.875rem;}
.news-list-wrap .list .text h3{margin-top:1rem;width:35rem;height:calc((var(--subTitle-size) * 1.25) * 2);line-height:1.25;font-size:var(--subTitle-size);overflow:hidden;}
.news-list-wrap .list .item.active{color:var(--vi-color);}
.news-list-wrap .list .item.active .pic{clip-path:inset(0% 0% 0% 0%);}
.news-list-wrap .list .item.active:after{transform:scaleX(1);}
.news-list-wrap .more{margin-top:6.25rem;padding-left:28.75rem;}
.news-list-wrap .more a{display: flex;align-items:center;line-height:2rem;white-space:nowrap;color:var(--vi-color);}
.news-list-wrap .more a::after{display: block;margin-left:1.25rem;width:2rem;height: 2rem;text-align: center; font-family: "iconfont"; color:#fff; content: "\e694";background-color:var(--vi-color); border-radius:50%;}
.news-list-wrap .more a:hover{color: var(--vi-subColor);}
.news-list-wrap .more a:hover::after{color: var(--vi-color); background-color: var(--vi-subColor);}
@media(max-width:1024px){
.news-list-wrap .list .pic{display:none;}
.news-list-wrap .list .text{padding:2rem 0;width:100%;}
.news-list-wrap .list .text h3{height:auto;}
.news-list-wrap .more{margin-top:3rem;padding-left:0;text-align:center;}
}
/*--end news--*/

/*--indexForm--*/
.indexForm{padding:var(--wrap-padding) 2rem;overflow:hidden;background:var(--vi-color);}
.indexForm .hd{color:#fff;overflow:hidden;}
.indexForm .hd h2{font-size:var(--title-size);}
.indexForm .hd p{font-size:var(--text-size);}
.indexForm .bd{margin-top:var(--wrap-padding);overflow:hidden;}
.indexForm .bd .inner{float:right;width:58.75rem;overflow:hidden;}
.indexForm .bd .ipt-box{display:flex;flex-wrap:wrap;justify-content:space-between;}
.indexForm .bd .ipt-box input{display:block;margin-bottom:3%;padding:1.25rem;width:47.87%;color:var(--vi-color);background:#fff;outline:none;border:none;}
.indexForm .bd .text-box{overflow:hidden;}
.indexForm .bd .text-box textarea{display:block;padding:1.25rem;width:100%;height:6.875rem;color:var(--vi-color);background:#fff;outline:none;border:none;resize:none;}
.indexForm .bd .btn-box{margin-top:3%;display:flex;flex-wrap:wrap;align-items:center;width:100%;overflow:hidden;}
.indexForm .bd .btn-box button{display:block;padding:1.25rem;width:36.2%;color:var(--vi-color);text-align:center;background:var(--vi-subColor);transition:all 1s;}
.indexForm .bd .btn-box button:after{display:inline-block;margin-left:1rem;font-family:"iconfont";content:"\e694";}
.indexForm .bd .btn-box button:hover{color:#fff;background:#000;}
.indexForm .bd .btn-box p{margin-left:3rem;font-size:0.75rem;line-height:1.5;color:#fff;}
.indexForm .bd .btn-box p span{color:var(--vi-subColor);}
@media(max-width:1024px){
.indexForm .bd .inner{float:none;width:100%;}
.indexForm .bd .ipt-box input{width:100%;}
.indexForm .bd .btn-box a{width:100%;}
.indexForm .bd .btn-box p{margin-left:0;margin-top:2rem;}
}
/*--end indexForm--*/

/*--loading--*/
.loading{position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;background:var(--vi-color);}
.loading .logo{position:absolute;z-index:3;top:50%;left:50%;max-width:29.5rem;transform:translate(-50%,-50%);}
.loading .logo img{display:block;width:100%;}
.loading .circle{position:absolute;top:0;left:0;width:100%;height:100%;clip-path:circle(0% at 50% 50%);}
.loading .circle1{z-index:2;background:#fff;transition:all 6s;}
.loading .circle2{z-index:1;background:var(--vi-subColor);transition:all 3s;}
/*--end loading--*/