@charset "utf-8";
/* ===================首页样式========================== */
.banner{width: 100%;overflow: hidden;position: relative;background: #050506;}
.banner-image{width: 100%;overflow: hidden;}
.banner-image img{width: 100%;height: 100vh;}
.banner-cont{position: absolute;z-index: 2;width: 100%;height: 100%;top: 0;left: 0;color: #fff;text-align: center;background: rgba(0, 0, 0, 0.34);}
/* 图片缩放效果 */
.banner .banner-image img {transform: matrix(1.16, 0, 0, 1.16, 0, 0);transition: transform .4s ease 1s;}
.swiper-slide-active .banner-image img {transform: matrix(1, 0, 0, 1, 0, 0);transition: transform 4s ease .4s;}
/* banner视频 */
.banner .hasVideo .banner-image{animation: hasVideoImg 1s ease both;}
@keyframes hasVideoImg {0%{opacity: 1;}100%{opacity: 0;}}
.banner video{width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;z-index: 2;}
@media all and (max-width:1100px) {.banner .hasVideo .banner-image{animation: none;}.banner video{display: none;}}
/* 文字效果-上下版 */
.banner-cont .title, .banner-cont .text{max-width: max(700px,9.3rem);margin-left: auto;margin-right: auto;}
.banner-cont .title, .banner-cont .text, .banner-cont .link{opacity: 0;}
.swiper-slide-active .banner-cont .title{animation: bannerUp 1s ease both 1s;}
.swiper-slide-active .banner-cont .text{animation: bannerUp 1s ease both 1.1s;}
.swiper-slide-active .banner-cont .link{animation: bannerUp 1s ease both 1.2s;}
.oneSlide .banner-cont .title{animation: bannerUp 1s ease both .4s;}
.oneSlide .banner-cont .text{animation: bannerUp 1s ease both .5s;}
.oneSlide .banner-cont .link{animation: bannerUp 1s ease both .6s;}
@keyframes bannerUp{0%{opacity: 0;transform: translateY(max(60px,1.2rem));filter: blur(max(4px,0.06rem));}100%{opacity: 1;transform: translateY(0);filter: blur(0);}}
/* -- */
.banner .swiper-pagination{bottom: max(24px,0.5rem);width: 100%;font-size: 0;}
.banner .swiper-pagination-bullet{width: max(6px,0.12rem);height: max(6px,0.12rem);background: #fff;opacity: 1;margin: 0 max(10px,0.14rem);position: relative;}
.banner .swiper-pagination-bullet:after{content: '';display: block;width: max(16px,0.3rem);height: max(16px,0.3rem);border-radius: 50%;position: absolute;top: 50%;left: 50%;margin: min(-8px,-0.15rem) 0 0 min(-8px,-0.15rem);border: 1px solid #fff;transform: scale(0);transition: transform .6s ease;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active:after{transform: scale(1);}

.indgy{background: #fff;display: flex;justify-content: flex-end;}
.indgy-img{width: 64%;overflow: hidden;position: absolute;top: 0;left: 0;}
.indgy-img img{width: 100%;height: 9.46rem;}
.indgy-img::before{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: rgba(0, 0, 0, 0.2);z-index: 1;}
.indgy-img::after{content: "";position: absolute;width: 0%;height: 100%;top: 0;left: 0;background: #e9e9e9;z-index: 2;clip-path: polygon(0% 0%, 100% 0%, calc(100% - 0.88rem) 100%, 0% 100%);}
.indgy.animated .indgy-img::after{animation: indgyImg 2s cubic-bezier(0.22, 0.61, 0.36, 1) both .5s;}
@keyframes indgyImg{0%{width: 120%;}100%{width: 0%;}}
.indgy-cont{width: 42%;padding-left: 0.88rem;clip-path: polygon(0.88rem 0%, 100% 0%, 100% 100%, 0% 100%);background: #e9e9e9;display: flex;align-items: center;height: 9.46rem;position: relative;z-index: 2;overflow: hidden;}
.indgy-cont .limit{padding: max(18px,0.4rem) max(24px,0.6rem);text-align: center;}

.indcp{background: #fff;}
.indcp-imgs{width: 47.18%;position: absolute;top: 0;right: 0;overflow: hidden;}
.indcp-imgs img{width: 100%;height: 10.09rem;transform: matrix(1.12, 0, 0, 1.12, 0, 0);transition: transform .4s ease 1s;}
.indcp-imgs .swiper-slide-active img {transform: matrix(1, 0, 0, 1, 0, 0);transition: transform 4s ease .4s;}
.indcp-imgs::after{content: "";position: absolute;width: 0%;height: 100%;top: 0;right: 0;z-index: 2;background: #fff;clip-path: polygon(0.96rem 0%, 100% 0%, 100% 100%, 0% 100%);}
.indcp.animated .indcp-imgs::after{animation: indcpImg 2s cubic-bezier(0.22, 0.61, 0.36, 1) both .5s;}
@keyframes indcpImg{0%{width: 116%;}100%{width: 0%;}}
.indcp-main{height: 10.09rem;width: 58%;position: relative;z-index: 2;padding: 0.86rem 0.8rem 0 0.5rem;display: flex;flex-direction: column;overflow: hidden;}
.indcp-main::before{content: "";position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #fff;clip-path: polygon(0% 0%, 100% 0%, calc(100% - 0.96rem) 100%, 0% 100%);}
.indcp-head{position: relative;z-index: 4;}
.indcp-menu{width: 100%;position: relative;justify-content: space-between;user-select: none;}
.indcp-menu::before{content: "";position: absolute;width: 100%;height: 1px;background: #c5c5c5;top: 0;left: 0;}
.indcp-menu .link{position: relative;padding-top: max(14px,0.28rem);cursor: pointer;transition: color .4s ease;}
.indcp-menu .link::before{content: "";position: absolute;width: 100%;height: max(3px,0.07rem);background: #2998e7;top: 0;left: 0;transform-origin: top center;transform: scaleY(0);transition: transform .4s ease;}
@media (hover: hover) {.indcp-menu .link:hover{color: #2998e7;}.indcp-menu .link:hover::before{transform: scaleY(1);}.indcp-menu .link.active:hover{color: #333;}}
.indcp-menu .link.active::before{transform: scaleY(1);}
.indcp-list{width: 100%;flex: 1;overflow: hidden;position: relative;z-index: 4;}
.indcp-list .item{width: 100%;display: none;flex-direction: column;height: 100%;}
.indcp-list .item.active{display: flex;}
.indcp-list .item .img{width: 70%;margin-left: auto;margin-right: auto;flex: 1;}
.indcp-list .item .img img{transition: all .6s ease;max-width: 100%;max-height: 90%;}
.indcp-list .item .img:hover img{transform: scale(1.1);}
.indcp-list .item.active .title{animation: indcpUp 1s ease both;}
.indcp-list .item.active .text{animation: indcpUp 1s ease both .2s;}
.indcp-list .item.active .link{animation: indcpUp 1s ease both .4s;}
.indcp-list .item.active .img{animation: indcpUp 1s ease both .6s;}
@keyframes indcpUp{0%{opacity: 0;transform: translateY(max(30px,0.6rem));filter: blur(max(4px,0.06rem));}100%{opacity: 1;transform: translateY(0);filter: blur(0);}}

.indfw{background: #fff;}
.indfw li{position: relative;overflow: hidden;}
.indfw li:first-child{width: 53%;}
.indfw li:last-child{width: 47%;}
.indfw li img.bg{width: 100%;height: 9.98rem;transition: transform .6s ease;}
.indfw li .cont{position: absolute;z-index: 4;width: 100%;height: 100%;top: 0;left: 0;z-index: 4;transform: translate3d(0,0,4px);background: rgba(0, 0, 0, 0.5);color: #fff;}
.indfw li:hover img.bg{transform: scale(1.06);}

.indxw{background: linear-gradient(135deg,#818589,#eaeaea);padding-left: 0.5rem;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.indxw-head{color: #fff;}
.indxw-loop{width: 11.97rem;position: relative;}
.indxw-link{display: block;width: 100%;overflow: hidden;position: relative;}
.indxw-link img{width: 100%;height: 6.74rem;transition: transform .6s ease;}
.indxw-link .cont{position: absolute;z-index: 4;width: 100%;left: 0;bottom: 0;color: #fff;padding: 0 max(140px,2.8rem) max(16px,0.4rem) max(20px,0.42rem);}
.indxw-link:hover img{transform: scale(1.06);}
.swiper-slide-active .indxw-link .cont .title{animation: indxwUp 1s ease both 0.7s;}
.swiper-slide-active .indxw-link .cont .time{animation: indxwUp 1s ease both 0.9s;}
@keyframes indxwUp{0%{opacity: 0;transform: translateY(max(30px,0.6rem));filter: blur(max(4px,0.06rem));}100%{opacity: 1;transform: translateY(0);filter: blur(0);}}
.indxw-loop .swiper-button{position: absolute;right: max(20px,0.42rem);z-index: 10;transform: translate3d(0,0,10px);bottom: max(16px,0.32rem);}
.indxw-loop .swiper-button>div{height: max(30px,0.74rem);padding: 0 max(12px,0.36rem);background: #fff;cursor: pointer;line-height: 1;font-size: max(14px,0.24rem);color: #000;transition: background .4s ease, color .4s ease;position: relative;overflow: hidden;}
.indxw-loop .swiper-button>div::before{content: "";position: absolute;width: 0%;height: 102%;background: #2998e7;clip-path: polygon(0% 0%, 100% 0%, calc(100% - max(4px,0.07rem)) 100%, 0% 100%);top: -1%;left: 0;transition: width .4s ease;}
.indxw-loop .swiper-button>div.prev{clip-path: polygon(0% 0%, 100% 0%, calc(100% - max(4px,0.07rem)) 100%, 0% 100%);}
.indxw-loop .swiper-button>div.prev::before{right: 0;left: auto;clip-path: polygon(max(4px,0.07rem) 0%, 100% 0%, 100% 100%, 0% 100%);}
.indxw-loop .swiper-button>div.next{clip-path: polygon(max(4px,0.07rem) 0%, 100% 0%, 100% 100%, 0% 100%);}
.indxw-loop .swiper-button>div i{display: flex;transition: transform .4s ease;position: relative;z-index: 4;}
.indxw-loop .swiper-button>div.next i::before{transform: rotateY(180deg);}
.indxw-loop .swiper-button>div:hover{color: #fff;}
.indxw-loop .swiper-button>div:hover::before{width: calc(100% + 10px);}
.indxw-loop .swiper-button>div.prev:hover i{transform: translateX(-4px);}
.indxw-loop .swiper-button>div.next:hover i{transform: translateX(4px);}



/* -------------------------PC端--------------------------- */
@media all and (max-width:1800px){
    /* 1600 × (900) */
}

@media all and (max-width:1590px){
    /* 1440 × (700)  */
}

@media all and (max-width:1430px){
    /* 1360 */
}

@media all and (max-width:1350px){
    /* 1280 */
}

@media all and (max-width:1270px){
    /* 1152 × (700) */
}

/* --------------------平板(横屏1024)---------------------- */
@media all and (max-width:1100px){}

/* --------------------平板(竖屏768)----------------------- */
@media all and (max-width:1000px){
    .indgy-cont{width: 47%;}
    .indcp-main{width: 53%;}
    .indcp-imgs{width: 54%;}
    .indxw-head{width: 100%;display: flex;align-items: flex-end;justify-content: space-between;}
    .indxw-loop{width: 100%;margin-top: 40px;}
    .indxw-link img{height: 418px;}
    .indxw{padding-left: 4%;padding-right: 4%;}
}

/* --------------------手机端(360)------------------------- */
@media all and (max-width:720px){
    .indgy{padding: 0 4% 36px;margin-top: 36px;flex-wrap: wrap;}
    .indgy-img{width: 100%;position: relative;}
    .indgy-img img{height: auto;}
    .indgy-cont{width: 100%;clip-path: none;padding-left: 0;height: auto;}
    .indgy-cont .limit{padding: 28px 16px;}
    .indcp-imgs{position: relative;width: 100%;}
    .indcp-imgs img{height: 360px;}
    .indcp-main{width: 100%;height: auto;padding: 24px 4%;}
    .indcp-list .item .img{width: 100%;height: 220px;padding: 30px 30px 10px;}
    .indfw li{width: 100% !important;margin-top: 10px;}
    .indfw li:first-child{margin-top: 0;}
    .indfw li img.bg{height: auto;}
    .indxw-loop{margin-top: 20px;}
    .indxw-link img{height: 200px;}
    .indxw-loop .swiper-button{position: relative;width: 100%;justify-content: center;margin-top: 16px;right: 0;bottom: 0;}
    .indxw-link .cont{width: 100%;padding: 0 16px 12px;}
}