.header{background: none;color: #fff;}
.header .logo img{filter: brightness(0) invert(1);}
.header.scroll,
.header:hover{background-color: #fff;color: #333;}
.header.scroll .logo img,
.header:hover .logo img{filter: none;}
.header.scroll .nav> li> a,
.header:hover .nav> li> a{color: #333;}
.header.scroll .search,
.header:hover .search{border-color: #ccc;}

.index_title{text-align: center;line-height: 1;}
.index_title .en{font-family: Arial;font-weight: bold;font-size: 60px;color: rgba(255, 255, 255, .3);text-transform: uppercase;}
.index_title .cn{font-size: 34px;font-weight: bold;color: #fff;margin-top: -30px;position: relative;}
.index_title p{color: rgba(255, 255, 255, .9);margin-top: 25px;}
.index_title.black .en{color: rgba(0, 0, 0, .1);}
.index_title.black .cn{color: #333;}
.index_title.black p{color: #333 ;margin-top: 25px;}

.index_more{margin-top: 50px;}
.index_more a{padding: 5px 30px;border-radius: 30px;background-color: var(--primary-color);color: #fff;display: inline-block;font-size: 14px;}
.index_more a:hover{background-color: var(--primary-color);color: #fff;}

.index_banner{width: 100%;height: 100vh;position: relative;}
.index_banner .txt{height: 100%;display: flex;flex-direction: column;justify-content: center;color: #fff;text-shadow: 0 1px 1px #000;}
.index_banner video{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.index_banner .btn_play{position: absolute;left: calc(50% - 25px);bottom: 30%;cursor: pointer;opacity: .5;width: 50px;height: 50px;transition: all .3s ease-out;}
.index_banner .btn_play svg{width: 100%;height: 100%;}
.index_banner .btn_play:hover{opacity: 1;}
.index_banner_cover{position: absolute;bottom: 0;left: 0;z-index: 5;width: 100%;}
.index_banner_cover img{width: 100%;}

.index_desc p{text-align: center;line-height: 1;margin-left: 50px;}

.index_products::before{content: '';position: absolute;top: 0;left: 0;z-index: -1;;width: 100%;height: 65%;background: url(../images/02.jpg) no-repeat center/cover;}
.index_products .swiper{height: 500px;}
.index_products .swiper .swiper-slide{position: relative;z-index: 1;overflow: hidden;}
.index_products .swiper .swiper-slide::before{content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(20, 44, 125, 0.7);opacity: 0;}
.index_products .swiper .swiper-slide .main{height: 100%;padding: 10vh 30px 0;color: #fff;transition: all .3s ease-out;background-color: rgba(0, 0, 0, 0.3)}
.index_products .swiper .swiper-slide .pic{position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;object-fit: cover;transition: all .8s ease-out;}
.index_products .swiper .swiper-slide .title{font-size: 24px;font-weight: bold;}
.index_products .swiper .swiper-slide .desc{margin: 10px 0; overflow-wrap: break-word;}
.index_products .swiper .swiper-slide .layui-icon{font-size: 30px;opacity: 0;transition: all .3s ease-out;}
.index_products .swiper .swiper-slide .vertical{-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;-webkit-writing-mode: tb-rl;writing-mode: tb-rl;text-transform: uppercase;position: absolute;bottom: 0;left: 30px;}
.index_products .swiper .swiper-slide:hover .main{background-color: rgba(20, 44, 125, 0.7)}
.index_products .swiper .swiper-slide:hover .pic{transform: scale(1.1);}
.index_products .swiper .swiper-slide:hover .layui-icon{opacity: 1;}

.index_about{background: url(../images/01.jpg) no-repeat center/cover;}
.index_about .desc{width: 85%;text-align: center;margin: 50px auto; line-height: 35px; font-size: 17px;}
.index_about .counts ul{display: flex;}
.index_about .counts ul li{width: 33.333%;border-right: 1px solid #cacaca;line-height: 1;text-align: center;}
.index_about .counts ul li:last-child{border-right: 0;}
.index_about .counts ul li span{font-size: 14px;font-weight: bold;color: var(--primary-color);background-image: linear-gradient(to right, #0d2daf, #77cff5);-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: block;}
.index_about .counts ul li span b{font-size: 40px;}
.index_about .counts ul li p{margin-top: 10px;color: #666;}

.index_case .swiper-slide .pic{overflow: hidden;}
.index_case .swiper-slide:hover .pic img{transform: scale(1.05);}
.index_case .swiper-slide{padding: 8px;background-color: #f5f5f5;}
.index_case .swiper-slide .title{padding: 15px 0 7px;text-align: center;}

.index_choose{background: url(../images/01.jpg) no-repeat center/cover; min-height: 780px;}
.index_choose ul{position: relative;margin-top: 50px;}
.index_choose ul li{width: 35%;margin: 50px 0;}
.index_choose ul li .title{display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, .4);padding-bottom: 10px;margin-bottom: 10px;}
.index_choose ul li .title img{ max-width: 42px;}
.index_choose ul li .title b{font-size: 18px;color: #fff;margin-left: 15px;}
.index_choose ul li .title span{font-size: 26px;color: rgba(255, 255, 255, .2);font-weight: bold;}
.index_choose ul li .desc{color: rgba(255, 255, 255, .8);line-height: 1.8;}
@keyframes circleRoate{  from{transform: rotate(0deg);}  to{transform: rotate(360deg);}  } 
.index_choose .img{position: absolute;top: 0;left: 35%;width: 30%;height: 100%;padding: 0 20px;}
.index_choose .img img{width: 100%;animation: circleRoate 8s infinite linear;}

.index_news .top{width: 45%;background-color: #f8f8f8;display: flex;flex-direction: column;}
.index_news .top .pic{flex: 1;position: relative;overflow: hidden;}
.index_news .top .pic img{height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;}
.index_news .top .pic:hover img{transform: scale(1.05);}
.index_news .top .txt{padding: 20px;}
.index_news .top .title{font-size: 18px;}
.index_news .top .desc{font-size: 14px;color: #888;margin: 5px 0;}
.index_news .top .more{font-size: 14px;color: var(--primary-color);}
.index_news ul{width: 52%;background-color: #f8f8f8;}
.index_news ul li{border-bottom: 1px solid #eee;}
.index_news ul li:last-child{border-bottom: 0;}
.index_news ul li a{display: flex;align-items: center;padding: 20px 0;}
.index_news ul li .date{width: 140px;line-height: 1;text-align: center;}
.index_news ul li .date span{font-size: 40px;color: #777;}
.index_news ul li .date p{font-size: 14px;color: #999;margin-top: 5px;}
.index_news ul li .main{width: calc(100% - 220px);}
.index_news ul li .title{font-size: 18px;}
.index_news ul li .desc{font-size: 14px;color: #888;margin-top: 10px;}
.index_news ul li .icon{width: 80px;font-size: 20px;color: #999;text-align: center;}
.index_news ul li .more{padding: 5px 20px;font-size: 12px;color: #999;border: 1px solid #eee;display: inline-block;border-radius: 20px;}
.index_news ul li a:hover{background-color: var(--primary-color);}
.index_news ul li a:hover *{color: #fff !important;}

@media screen and (min-width: 1280px){
    .index_banner .swiper-pagination{bottom: 40px;}
    .index_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width: 12px;height: 12px;margin: 0 6px;background-color: #fff;}
    .index_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active{width: 30px;border-radius: 10px;}
}

@media screen and (max-width: 1279px){
    .index_title .en{font-size: 34px;}
    .index_title .cn{font-size: 24px;margin-top: -15px;}

    .index_desc img{height: 40px;}
    .index_desc p{margin: 20px 0 0 0;}

    .index_about .desc{width: 100%;margin: 30px 0;}
    .index_about .counts ul li span b{font-size: 30px;}
    .index_about .counts ul li p{font-size: 14px;}

    .index_case .swiper,
    .index_products .swiper{padding-bottom: 40px;}

	.index_choose ul li .title span{display: none;}

    .index_news .top{width: 100%;display: block;}
    .index_news .top .pic{width: 100%;}
    .index_news .top .pic img{width: 100%;height: 40vw;position: static;}
    .index_news ul{width: 100%;margin-top: 20px;}
    .index_news ul li .date{width: 80px;}
    .index_news ul li .date span{font-size: 26px;}
    .index_news ul li .date p{font-size: 12px;}
    .index_news ul li .main{width: calc(100% - 120px);}
    .index_news ul li .title{font-size: 16px;}
    .index_news ul li .desc{margin-top: 5px;}
    .index_news ul li .icon{width: 40px;}
}

@media screen and (max-width: 768px){
    .index_choose ul{padding-top: 360px;margin-top: 30px;}
	.index_choose ul li{width: 100%;margin: 20px 0;}
	.index_choose ul li .desc{line-height: 1.5;font-size: 14px;}
	.index_choose ul li .title span{font-size: 20px;display: block;}
	.index_choose .img{left: 0;width: 100%;height: 360px;padding: 0;}
	.index_choose .img img{max-width: 360px;}
}