html,body,.indexContainer{width: 100%;height: 100%;}

.indexContainer>.swiper-wrapper>.swiper-slide:last-child{height: auto;}
.indexContainer> .swiper-pagination .swiper-pagination-bullet-active{height: 40px;border-radius: 10px;box-shadow: 0 0 2px #eee;}

.index_title{text-align: center;line-height: 1;}
.index_title .en{font-family: Arial;font-weight: bold;font-size: 60px;color: rgba(238, 238, 238, 1);}
.index_title .cn{font-size: 34px;color: #000;font-weight: bold;margin-top: -20px;position: relative;}
.index_title .cn::before{content: '';width: 8em;height: 2px;background-color: #000;display: block;position: absolute;bottom: -20px;left: 50%;transform: translateX(-50%);}
.index_title .cn::after{content: "\e61a";font-family: layui-icon;position: absolute;bottom: -31px;left: 50%;transform: translateX(-50%);padding: 0 10px;background-color: #fff;font-size: 24px;color: #019a01;}

.index_banner .swiper{width: 100%;height: 100%;}
.index_banner .swiper .swiper-slide{overflow: hidden;}
.index_banner .swiper .slide_inner{width: 100%;height: 100%;}
.index_banner .swiper .slide_inner .txt{height: 100%;display: flex;flex-direction: column;justify-content: center;color: #fff;text-shadow: 0 1px 1px #000;}
.index_banner .swiper .slide_inner .txt h4{margin: 3vh 0 7vh;}
.index_banner .swiper .slide_inner .txt .desc{width: 400px;border-left: 2px solid rgba(255, 255, 255, .6);padding-left: 20px;font-size: 14px;line-height: 2;}
.index_banner .swiper video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}

.index_banner .scroll{position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);z-index: 3;}
.index_banner .scroll i{width: 20px;height: 30px;margin: 0 auto;border-radius: 12px;border: 2px #fff solid;position: relative;display: block;}
.index_banner .scroll i::after{content: "";display: block;width: 4px;height: 10px;background: #fff;border-radius: 2px;position: absolute;left: 50%;transform: translate(-50%, 0);top: 3px;animation: scrollmouse 2s linear infinite;}
@keyframes scrollmouse {from {transform: translate(-50%,0);opacity: 1}to {transform: translate(-50%,10px);opacity: 0}}

.index_counts{display: flex;flex-direction: column;justify-content: center;padding-top: 90px;text-align: center; background-image: url(../images/bg.jpg);}
.index_counts .txt{width: 100%;padding: 140px 0 240px;color: #fff;background-color: #00620090;}
.index_counts .txt p{margin-top: 20px;color: rgba(255, 255, 255, .6);}
.index_counts .counts{padding: 50px 0;margin-top: -80px;background-color: #fff;box-shadow: 0 0 5px #ccc;}
.index_counts .counts ul{display: flex;justify-content: space-between;}
.index_counts .counts ul li{width: 25%;border-right: 1px solid #cacaca;line-height: 1;}
.index_counts .counts ul li:last-child{border-right: 0;}
.index_counts .counts ul li span{font-size: 40px;font-weight: bold;}
.index_counts .counts ul li p{font-size: 14px;margin-top: 10px;}
.index_counts .counts ul li:hover{ color:#019a01; cursor: pointer;}

.index_products{display: flex;flex-direction: column;justify-content: center;}
.index_products .swiper{width: 100%;margin-top: 10vh;padding-bottom: 80px;}
.index_products .swiper-slide{background-color: #f8f8f8;border-radius: 15px;padding: 8px;transform: scale(.9);transition: all .3s ease-out;}
.index_products .swiper-slide-active{transform: scale(1);}
.index_products .swiper-slide .pic_constant .inner::after{padding-top: 80%;}
.index_products .swiper-slide .pic_constant img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: auto;height: auto;max-width: 100%;max-height: 100%;}
.index_products .swiper-slide:hover .pic_constant img{transform: translate(-50%, -50%) scale(1.05);}
.index_products .swiper-slide .title{padding: 20px;text-align: center;font-weight: bold;font-size: 18px;}
.index_products .swiper-slide .tag{position: absolute;top: 8px;left: 8px;background-color: #d50000;padding: 2px 10px;border-radius: 8px 0 8px 0;color: #fff;font-size: 12px;}

.index_about{position: relative;background-image: url(../images/bg.jpg);}
/*
.index_about::before,
.index_about::after{display: block;position: absolute;left: 0;z-index: -1;content: '';width: 100%;}
.index_about::before{top: 0;height: 70%;background: url(../images/bg.jpg) no-repeat center/cover;}
.index_about::after{bottom: 0;height: 30%;background-color: #f5f5f5;}*/
.index_about .wrapper{height: 100%;display: flex;flex-direction: column;justify-content: center;}
.index_about .main{margin-top: 50px;}
.index_about .since{font-size: 60px;text-align: right;color: rgba(255, 255, 255, .6);font-weight: bold;}
.index_about .video{width: 45%;}
.index_about .video video{width: 100%;height: 100%;object-fit: cover;}
.index_about .txt{width: 55%;padding: 50px;background-color: #fff;display: flex;flex-direction: column;justify-content: center;}
.index_about .txt p{line-height: 2;}
.index_about .more a{padding: 5px 30px;border: 1px solid #019a01;color: #019a01;display: inline-block;font-size: 14px;}
.index_about .more a:hover{background-color: #019a01;color: #fff;}

.index_news .wrapper{height: 100%;display: flex;flex-direction: column;justify-content: center;background: url(../images/map.png) no-repeat center;}
.index_news ul{margin-top: 10vh;display: flex;justify-content: space-between;}
.index_news ul li{width: 23%;}
.index_news ul li .pic_constant .inner::after{padding-top: 65%;}
.index_news ul li .txt{padding: 0 20px 20px 20px;}
.index_news ul li .txt .inner{padding: 20px;transform: translateY(-30px);background-color: #fff;box-shadow: 0 2px 4px #eee;border-bottom: 2px solid #eee;transition: all .3s ease-out;}
.index_news ul li .txt .date{background-color: #019a01;border-radius: 8px;font-size: 14px;color: #fff;padding: 3px 10px;display: inline-block;}
.index_news ul li .txt .title{font-weight: bold;margin: 10px 0;}
.index_news ul li .txt .desc{font-size: 14px;color: #999;line-height: 1.8;margin-bottom: 20px;}
.index_news ul li .txt .more{padding: 5px 20px;font-size: 12px;color: #999;border: 1px solid #eee;display: inline-block;border-radius: 20px;}
.index_news ul li:hover .txt .inner{border-color: #019a01;box-shadow: 0 0 20px #cacaca;}
.index_news ul li:hover .pic_constant img{transform: scale(1.1);}


@media screen and (min-width: 1280px){
    .header{background-color: rgba(0, 0, 0, .2);color: #fff;}
    .header:hover{background-color: #fff;color: #333;}
    .header .logo img{filter: brightness(0) invert(1);}
    .header:hover .logo img{filter: none;}

    .index_banner .swiper-pagination{width: auto;left: 4%;bottom: 40px;}
    .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;}
}

@media screen and (max-width: 1279px){
    .ani{visibility: visible !important;}
    html,body,.indexContainer{height: auto;}
    .indexContainer>.swiper-wrapper{display: block;}
    .indexContainer>.swiper-wrapper>.swiper-slide{height: auto;}

    .header{background-color: #fff;}
    .header:hover{background-color: #fff;}

    .index_banner .swiper{height: 30vh;}
    .index_banner .swiper .slide_inner .txt .desc{width: 100%;}
    .index_banner .scroll{display: none;}

    .index_counts{padding-top: 0;}
    .index_counts .txt{padding: 50px 0 90px;}
    .index_counts .counts{padding: 30px 0;margin-top: -50px;}
    .index_counts .counts ul li{font-size: 12px;}
    .index_counts .counts ul li span{font-size: 24px;}

    .index_products{padding: 50px 4%;}
    .index_products .swiper{padding-bottom: 50px;margin-top: 8vh;}

    .index_title .en{font-size: 30px;}
    .index_title .cn{font-size: 20px;margin-top: -10px;}

    .index_about{padding: 30px 0;}
    .index_about .since{font-size: 30px;}

    .index_about .main{margin-top: 30px;}
    .index_about .video{width: 100%;}
    .index_about .txt{width: 100%;padding: 30px 20px;}

    .index_news{padding: 50px 0;}
    .index_news ul{flex-wrap: wrap;}
    .index_news ul li{width: 100%;}
    .index_news ul li .txt{padding: 0 20px;}
}