/* .index_banner{height: 45vw;} */
.index_banner .swiper-slide{height: auto;overflow: hidden;}
.index_banner .swiper-slide img,
.index_banner .swiper-slide video{width: 100%;height: 100%;transform: scale(1.1);transition: all 3s ease-out;}
.index_banner .swiper-slide-active img,
.index_banner .swiper-slide-active video{transform: scale(1);}
.index_banner .txt{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.index_banner .txt .wrapper{height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;color: #fff;}
.index_banner .txt h2{font-size: 30px;font-weight: bold;}
.index_banner .txt p{line-height: 2;}
.index_banner .txt a{padding: 5px 30px;border: 1px solid rgba(255, 255, 255, .3);background-color: rgba(255, 255, 255, .1);border-radius: 30px;}
.index_banner video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.index_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width: 10px;height: 10px;margin: 0 6px;}
.index_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{width: 30px;border-radius: 10px;}
.index_banner .swiper-button-next,
.index_banner .swiper-button-prev{color: #fff;font-weight: bold;font-size: 20px;}

.more_btn{padding: 10px 20px;background-color: var(--primary-color);border-radius: 50px;box-shadow: 0px 0 13px 0px rgba(1, 60,139, .4);color: #fff;position: relative;overflow: hidden;display: inline-flex;align-items: center;font-size: 15px;}
.more_btn i{transform: rotate(180deg);margin-left: 30px;font-size: 15px;width: 15px;height: 17px;}
.more_btn::before{content: "";position: absolute;}
.more_btn::before{display: block;transition: all .6s;width: 100%;height: 0;border-radius: 50%;left: 50%;top: 50%;padding-top: 100%;transform: translateX(-50%) translateY(-50%);}
.more_btn:hover::before{animation: ani_circle .75s;z-index: 1;}
.more_btn:hover{color: #fff;}

@keyframes ani_circle {
    0% {
        background: rgba(0,0,0,.25);
        transform: translateX(-50%) translateY(-50%) scale(0)
    }
    to {
        background: 0 0;
        transform: translateX(-50%) translateY(-50%) scale(1)
    }
}

.index_title{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;gap: 20px;}
.index_title h3{color: var(--primary-color);font-weight: bold;font-size: 36px;}
.index_title p{font-size: 18px;margin-top: 10px;}

.index_product .list{display: flex;gap: 3px;}
.index_product .list>li{width: calc(33.333% - 2px);background-color: #faf8f9;padding: 30px 30px 80px;position: relative;z-index: 1;transition: all .3s ease-out;}
.index_product .list>li:hover{width: 45%;background-color: #dedede;}
.index_product .list>li .en{position: absolute;bottom: 0;right: 0;z-index: -1;font-size: 100px;font-weight: bold;font-family: Arial;color: #f2f0f1;line-height: 1;text-transform: uppercase;cursor: default;}
.index_product .list>li .top{display: flex;justify-content: space-between;align-items: center;}
.index_product .list>li .top .title{font-size: 24px;font-weight: bold;}
.index_product .list>li .top .more{width: 40px;height: 40px;border-radius: 40px;border: 1px solid #9a9a9a;font-size: 16px;font-weight: bold;display: flex;align-items: center;justify-content: center; color: #999;}
.index_product .list>li .top .more:hover{border-color: var(--primary-color);}
.index_product .list>li .pic{margin: 20px 0;height: 300px;display: block;}
.index_product .list>li .pic img{width: 100%;height: 100%;object-fit: cover;}
.index_product .list>li .children{display: flex;flex-wrap: wrap;gap: 10px 20px;}
.index_product .list>li .children li{width: calc((100% - 40px) / 2);}
.index_product .list>li .children li a{position: relative;}
.index_product .list>li .children li a::before{content: '\e623';font-family: layui-icon;}

.index_tabs .swiper_main .swiper-slide{height: auto;padding: 100px 0 300px;;font-size: 14px;color: #fff;}
.index_tabs .swiper_main .title{font-size: 26px;font-weight: bold;}
.index_tabs .swiper_main .desc{color: rgba(255, 255, 255, .8)}
.index_tabs .swiper_main .title::after{content: '';display: block;width: 2em;height: 3px;background-color: #fff;margin: 15px 0 20px;}
.index_tabs .swiper_main ul{width: 700px;gap: 20px;}
.index_tabs .swiper_main ul li{height: 55px;border: 1px solid rgba(255, 255, 255, .3);padding: 10px;transition: all .3s ease-out; background-color: #fff;}
.index_tabs .swiper_main ul li img{width: 100%;height: 100%;object-fit: contain;}
.index_tabs .swiper_main ul li:hover{border-color: var(--primary-color);}
.index_tabs .swiper_main .btns{gap: 20px;}
.index_tabs .swiper_main .btns a{background: none;border: 2px solid #fff;box-shadow: none;}
.index_tabs .swiper_tabs{position: absolute;bottom: 0;left: 0;width: 100%;height: 90px;background-color: rgba(255, 255, 255, .1);}
.index_tabs .swiper_tabs .swiper-slide{padding: 0 10px;border-right: 1px solid rgba(0, 0, 0, .2);display: flex;align-items: center;justify-content: center;font-size: 18px;color: #fff;cursor: pointer;transition: all .3s ease-out;}
.index_tabs .swiper_tabs .swiper-slide img{height: 30px;margin-right: 10px;}
.index_tabs .swiper_tabs .swiper-slide:hover,
.index_tabs .swiper_tabs .swiper-slide-thumb-active{background-color: var(--primary-color);}
.index_tabs .swiper-button-next, 
.index_tabs .swiper-button-prev{background: #fff;border-radius: 100%;width: 50px;height: 50px;color: #333;font-size: 18px;left: auto;right: 10%;transition: all .3s ease-out;}
.index_tabs .swiper-button-prev{top: calc(50% - 30px);}
.index_tabs .swiper-button-next{top: calc(50% + 30px);}
.index_tabs .swiper-button-next:hover, 
.index_tabs .swiper-button-prev:hover{background-color: var(--primary-color);color: #fff;}

.index_about .main{width: 48%;}
.index_about .main .title .p1{color: var(--primary-color);}
.index_about .main .title .p2{font-size: 36px;margin: 10px 0;}
.index_about .main .title .p3{font-size: 16px;color: #666;}
.index_about .main .title .logo{margin: 15px 0;height: 35px;}
.index_about .main .desc{line-height: 1.8;}
.index_about .main .more{display: inline-flex;align-items: center;color: var(--primary-color);}
.index_about .main .more i{font-size: 24px;margin-right: 15px;}
.index_about .main .more:hover{font-weight: bold;}
.index_about .counts{gap: 20px 30px;}
.index_about .counts li{display: flex;align-items: center;flex-direction: column-reverse;}
.index_about .counts li .lf{font-size: 18px;color: #666;}
.index_about .counts li .hr{width: 20px;height: 1px;background-color: #e3e3e3;margin: 0 20px;}
.index_about .counts li .rt{display: flex;align-items: center;}
.index_about .counts li .rt span{color: var(--primary-color);font-weight: bold;font-size: 40px;line-height: 1;}
.index_about .counts li .rt .unit{display: flex;flex-direction: column;align-items: center;margin-left: 10px;}
.index_about .counts li .rt i{font-size: 14px;line-height: 1;}
.index_about .vd{width: 48%;}
.index_about .vd  video{width: 100%;}

.index_news{background-color: #f1f1f1;}
.index_news ul{display: flex;flex-wrap: wrap;gap: 20px 30px;}
.index_news ul li{width: calc(33.333% - 20px);}
.index_news ul li a{background-color: #fff;padding: 25px 15px 40px;transition: all .3s ease-out;display: block;}
.index_news ul li .top{font-size: 26px;color: #999;}
.index_news ul li .more{width: 32px;height: 32px;border-radius: 40px;border: 1px solid #9a9a9a;font-size: 14px;font-weight: bold;display: flex;align-items: center;justify-content: center;transition: all .3s ease-out;}
.index_news ul li .pic_constant{margin: 20px 0;}
.index_news ul li .pic_constant .inner::after{padding-top: 55%;}
.index_news ul li a:hover{background-color: var(--primary-color);}
.index_news ul li a:hover *{color: #fff;}
.index_news ul li a:hover .more{border-color: #fff;color: #fff;}

.index_honor .swiper{padding: 20px 0 80px;}
.index_honor .swiper-slide img{width: 100%;height: 100%;object-fit: contain;}
.index_honor .swiper-slide .title{margin-top: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;opacity: 0;position: absolute;bottom: -30px;width: 100%;transition: all .3s ease-out;}
.index_honor .swiper-slide-active .title{opacity: 1;}
.index_honor .swiper-pagination{bottom: 0;}
.index_honor .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width: 15px;height: 6px;border-radius: 10px;margin: 0 4px;}
.index_honor .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{width: 30px;border-radius: 10px;}

.index_form .p1{color: var(--primary-color);font-size: 20px;font-weight: bold;}
.index_form form{width: 100%;display: flex;flex-wrap: wrap;gap: 30px;}
.index_form .layui-input{width: 200px;border: none;border-bottom: 1px solid #ced4da;padding: 0;border-radius: 0;}
.layui-input:focus{box-shadow: none;}
.index_form .text{flex: 1;}
.index_form .submit{width: 160px;justify-content: center;}

@media screen and (max-width: 1279px){
    .index_product .list{flex-wrap: wrap;}
    .index_product .list>li,
    .index_product .list>li:hover{width: 100%;}

    .index_tabs .swiper_tabs{height: 50px;}
    .index_tabs .swiper-button-next, 
    .index_tabs .swiper-button-prev{top: auto;bottom: 80px;width: 40px;height: 40px;}
    .index_tabs .swiper-button-next{right: 4%;}
    .index_tabs .swiper-button-prev{right: calc(4% + 50px);}

    .index_about .main{width: 100%;}
    .index_about .vd{width: 100%;margin-top: 30px;}
}

@media screen and (max-width: 1024px){
    .index_banner{height: 70vh;}
    .index_banner img{width: 100%;height: 100%;object-fit: cover;}
    .index_news ul li{width: 100%;}
}

@media screen and (max-width: 768px){
    .index_title p{font-size: 16px;}

    .index_title h3,
    .index_about .main .title .p2{font-size: 24px;}
    .index_about .main .title .p3{font-size: 18px;}

    .index_product .list>li .top .title{font-size: 20px;}
    .index_product .list>li .top .more{width: 30px;height: 30px;}
    .index_product .list>li .children li{width: auto;}
    .index_product .list>li{padding: 15px 15px 50px;}
    .index_product .list>li .en{font-size: 40px;}

    .index_about .counts li .hr{margin: 0 10px;}
    .index_about .counts li .rt span{font-size: 30px;}
    
    .index_tabs .swiper_main .swiper-slide{padding: 50px 0 150px;}
    .index_tabs .swiper_main ul{width: 100%;}
    .index_tabs .swiper_tabs .swiper-slide{font-size: 14px;}
    .index_tabs .swiper_tabs .swiper-slide img{height: 16px;margin-right: 5px;}

    .index_news ul li .top{font-size: 20px;}

    .index_form .text{width: 100%;flex: none;}
}