@charset "utf-8";
/* ===================首页样式========================== */
.banner{position: relative;}
.banner .hasvideo .banner-img img.pc{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;}
@media all and (max-width:1151px) {.hasvideo .banner-img img.pc{animation: none;}.hasvideo video{display: none;}}
.banner-bg{position: relative;}
.banner-bg::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .1);}
.banner-bg img{width: 100%;height: 100vh;}
.banner-con{z-index: 98; position: absolute;left: 0;top: 0;width: 100%;height: 100%;align-items: center;}
.banner-pagination{z-index: 99; bottom: 50px;position: absolute;left: 50%;transform: translatex(-50%);z-index: 10;}
.banner-pagination .swiper-pagination-bullet{width: 6px;height: 6px;background: #fff;opacity: 1;position: relative;margin: 0 22px !important;transition: all .4s ease;}
.banner-pagination .swiper-pagination-bullet i{position: absolute;width: 24px;height: 24px;margin: -12px 0 0 -12px;top: 50%;left: 50%;opacity: 0;transition: all .4s ease;border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.5);}
.banner-pagination .swiper-pagination-bullet svg{position: absolute;z-index: 2;left: 50%;top: 50%;margin: -12px 0 0 -12px;width: 24px;height: 24px;transform: rotate(-90deg);opacity: 0;transition: all .4s ease;}
.banner-pagination .swiper-pagination-bullet svg circle{stroke-dasharray:100,100;stroke-dashoffset:100;}
.banner-pagination .swiper-pagination-bullet-active i{opacity: 1;}
.banner-pagination .swiper-pagination-bullet-active svg{opacity: 1;}
.banner-pagination .swiper-pagination-bullet-active svg circle{animation: bulletrun 6s linear both;}
.banner-pagination .swiper-pagination-bullet-active.onebullet svg circle{animation: bulletrun 5s linear both;}
@keyframes bulletrun{0%{stroke-dashoffset:100;}100%{stroke-dashoffset:0;}}
/* .banner-svg{position: relative;display: flex;justify-content: center;}
.banner-svg svg{width: 850px;}
.banner-svg path{fill:none;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:10;}
.banner-svg .clip-mask rect{transform: translatex(-100%);}
.banner-svg .clip-mask.active rect{transform: translatex(-120%) scalex(0.5) skew(-40deg);animation: bannerrun 4s ease both;}
.banner-svg .clip-mask.on rect{transform: translatex(0%);transition: all 2s ease;}
@keyframes bannerrun {0%{transform: translatex(-120%) scalex(0.5) skew(-40deg);}100%{transform: translatex(70%) scalex(0.4) skew(-40deg);}} */

.banner-svg{position: relative;display: flex;justify-content: center;}
.banner-svg svg{width: 850px;}
.banner-svg path{fill:none;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:10;}
.banner-svg .clip-mask rect{transform: translatex(-120%);}
.banner-svg .clip-mask.active rect{transform: translatex(-120%) scalex(0.5) skew(-40deg);animation: bannerrun 4s ease both;}
.banner-svg .clip-mask.on rect{transform: translatex(70%) scalex(0.4) skew(-40deg);transition: all 2s ease;}
@keyframes bannerrun {0%{transform: translatex(-120%) scalex(0.5) skew(-40deg);}100%{transform: translatex(70%) scalex(0.4) skew(-40deg);}}


.indab{height: 100vh;}
.indab-con{position: relative;z-index: 99;flex-direction: column;max-width: 1100px;margin: 0 auto;}
.indab-img{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 98;}
.indab-img img{height: 100%;width: 100%;}
.indab-img li{position: absolute;overflow: hidden;}
.indab-img li:nth-child(1){left: 10vw;top: 2vw;width: 13.5vw;height: 8vw;}
.indab-img li:nth-child(2){right: 0;top: 8.5vw;width: 21vw;height: 15.5vw;}
.indab-img li:nth-child(3){left: 0;top: 22vw;width: 12.5vw;height: 17vw;}
.indab-img li:nth-child(4){right: 13.5vw;bottom: -2vw;width: 10vw;height: 13.5vw;}
.indab-img .marsk{background: #ede9e4;position: absolute;}
.indab-img li:nth-child(1) .marsk{left: 0;top: 0;width: 100%;height: 100%;}
.indab-img li:nth-child(2) .marsk{left: 0;top: 0;width: 100%;height: 100%;}
.indab-img li:nth-child(3) .marsk{right: 0;top: 0;width: 100%;height: 100%;}
/* .indab-img li:nth-child(4) .marsk{left: 0;bottom: 0;width: 100%;height: 100%;} */
.abmarskw{animation: abmarskw 1.5s ease forwards;position: absolute;}
.abmarskh{animation: abmarskh 1.5s ease forwards;position: absolute;}
@keyframes abmarskw {
    0%{width: 100%;}
    100%{width: 0;}
}
@keyframes abmarskh {
    0%{height: 100%;}
    100%{height: 0;}
}
.indline{position: absolute;left: 9%;bottom: 0;width: 87%;}
.indpro .marsk{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: #222;z-index: 10;}
.indpro-swp{padding: 0 100px;}
.indpro-swp .swiper-container{overflow: visible;}
.indpro-img{height: 500px;}
.indpro-img .img{width: 100%;overflow: hidden;}
.indpro-img .img::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .5);transition: all .4s ease;}
.indpro-img img{width: 100%;height: 440px;transition: all .8s ease;}
.indpro-img:hover img{transform: scale(1.08);}
.indpro-title{opacity: 0;transform: translatex(100px);transition: all .8s ease;}
.swiper-slide-active .indpro-img img{height: 500px;}
.swiper-slide-active .indpro-img .img::after{opacity: 0;}
.swiper-slide-active .indpro-title{opacity: 1;transform: translatex(0); transition-delay: .5s;}
.indpro-btn{z-index: 2;position: absolute;top: 250px;user-select: none;cursor: pointer;}
.indpro-btn.prev{left: 0;}
.indpro-btn.next{right: 0;transform: rotate(180deg);}
.indpro-btn:hover{color: #ffec87;}
.indpro-pagination{position: relative !important;background: #3c3e3d !important;height: 1px;margin-top: 40px;}
.indpro-page{display: flex;align-items: center; color: #4e504f;position: absolute;right: 100px;z-index: 2;bottom: 40px;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background: #ffec87 !important;}
.indcase{background: #222;}
.indcase-bg{overflow: hidden;}
.indcase-bg::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.8));}
.indcase-bg img{width: 100%;height: 900px;transition: all 1.2s linear;}
.indcase-slide:hover .indcase-bg img{transform: scale(1.04);}
.indcase-con{position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding-bottom: 80px;display: flex;align-items: flex-end;}
.indcase-con-item{width: 570px; transform: translatey(100px);transition: all .6s 1s ease;}
.swiper-slide-active .indcase-con-item{transform: translatey(0);transition-delay: 0s;}
.indcase-con-item .title:hover{color: #ffec87;}
.indcase-con-item .more{align-items: center;}
.indcase-con-item .more i{display: block;font-size: 20px; margin:4px 0 0 10px;transition: all .4s ease;transform: rotate(180deg);}
.indcase-con-item .more:hover{color: #ffec87;}
.indcase-con-item .more:hover i{margin-left: 20px;}
.indcase-switch{z-index: 4; align-items: center;position: absolute;right: calc((100% - 1200px)/2);bottom: 90px;}
.indcase-btn{position: relative; width: 48px;height: 48px;user-select: none;cursor: pointer; border-radius: 50%;border: 1px solid #fff;font-size: 20px;}
.indcase-btn::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 50%;background: #ffec87;transition: all .4s ease;transform: scale(0);}
.indcase-btn::before{position: relative;z-index: 2;}
.indcase-btn.next{transform: rotate(180deg);}
.indcase-btn:hover{color: #222;border-color: #ffec87;}
.indcase-btn:hover::after{transform: scale(1);}
.indcase-page{margin: 0 25px;}
.indnews-list{justify-content: space-between;}
.indnews-list::after{content: "";width: 31%;}
.indnews-item{width: 31%;}
.indnews-img::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .25);}
.indnews-img img{width: 100%;height: 370px;}
.indnews-con{transition:all .6s ease; background: #f2efeb; padding: 35px; position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.indnews-con .date{color: #bcbcbc;align-items: center;position: absolute;left: 35px;bottom: 40px;}
.indnews-con .date i{display: block;margin-right: 10px;}
.indnews-item:hover .indnews-con{background: transparent;}
.indnews-item:hover .indnews-con .title,.indnews-item:hover .indnews-con .text{color: #fff;}
/* -------------------------pc端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900) */
}
@media all and (max-width:1590px) {
    /* 1440 × (700)  */
    .indab-con{max-width: 900px;}
}
@media all and (max-width:1430px) {
    /* 1360 */
}
@media all and (max-width:1350px) {
    /* 1280 */
}
@media all and (max-width:1270px) {
    /* 1152 × (700) */
    .indpro-img{height: 450px;}
    .indpro-swp{padding: 0 50px;}
    .indpro-img img{height: 400px;}
    .swiper-slide-active .indpro-img img{height: 450px;}
    .indcase-bg img{height: 540px;}
    .indcase-con{padding-bottom: 40px;}
    .indcase-switch{right: calc((100% - 1000px) / 2);bottom: 50px;}
    .indnews-con{padding: 25px;}
    .indnews-img img{height: 310px;}
    .indnews-con .date{left: 25px;bottom: 25px;}
}
/* ------------------------平板端-------------------------- */
@media all and (max-width:1100px) {
    /* 1024 横屏 */
}
@media all and (max-width:1000px) {
    /* 720 竖屏 */
    .banner-bg img{height: calc(100vh - 60px);}
    .indab{height: auto;padding: 50px 4%;}
    .indab-img{display: none;}
    .indab-con br{display: none;}
    .indab-con .logo{width: 50%;}
    .indcase-con-item{width: 100%;}
    .indpro-swp{padding: 0;margin-top: 30px;}
    .indpro-btn{display: none;}
    .indpro-img img{height: 164px;}
    .indpro-img{height: 180px;}
    .swiper-slide-active .indpro-img img{height: 180px;}
    .indpro-page{display: none;}
    .indpro-pagination{margin-top: 20px;}
    .indcase-bg img{height: 250px;}
    .indcase-con-item{transform: unset;}
    .indcase-switch{display: none;}
    .indcase-pagination{position: absolute;left: 0;bottom: 15px;width: 100%;text-align: center;z-index: 3;}
    .indcase-pagination .swiper-pagination-bullet{margin: 0 4px; width: 20px;height: 2px;opacity: 1;border-radius: 0;background: #666;}
    .indcase-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #ffec87;}
    .indnews-item{width: 100%;margin-top: 15px;}
    .indnews-item:first-child{margin-top: 0;}
    .indnews-con{padding: 25px 15px;background: transparent;}
    .indnews-con .date{left: 25px;bottom: 15px;}
    .indnews-img::after{background: rgba(0, 0, 0, .5);}
    .indnews-img img{height: 250px;}
    .indnews-con .title{height: auto;max-height: 40px;}
    .indnews-con .title,.indnews-con .text{color: #fff;}

}
/* ------------------------手机端-------------------------- */
@media all and (max-width:720px) {
    /* 移动终端 360 适配 */
}