@charset "utf-8";
*{box-sizing:border-box}
*::before, *::after{box-sizing:border-box}
*:focus{outline:none}

.indSection{width: 100%;position: relative;z-index: 8;background: #fff;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

.indjs{background: #fff;}
.indjs-imgs{width: 100%;overflow: hidden;position: relative;}
.indjs-imgs .swiper-wrapper{height: 888px;}
.indjs-imgs img{width: 100%;object-fit: cover;height: 100%;transition: transform 0.5s 0.4s;}
.indjs-cont, .indjs-menu{position: absolute;width: 100%;margin-top: -15rem; left: 0;pointer-events: none;user-select: none;z-index: 4;transform: translate3d(0,0,10px);}
.indjs-cont-info{width: calc(100% - 650px - 100px);pointer-events: auto;display: none;}
.indjs-cont-info .title{opacity:0; color: #FFF; font-size: 2.4rem; margin-left: 5%; font-weight: bold;}
.indjs-cont-info .link{opacity:0; color: #FFF; font-size: 1.07rem; margin-left: 5%;}
.indjs-cont-info.active{display: block;}
.indjs-cont-info.active .title{animation: indjsText 1s ease both .2s;}
.indjs-cont-info.active .link{animation: indjsText 1s ease both .4s;}
@keyframes indjsText{0%{opacity: 0;transform: translateY(60px);}100%{opacity: 1;transform: translateY(0);}}

.indjs-menu .contain{display: flex;justify-content: flex-end;}
.indjs-menu-box{width: 650px;border: 1px solid #fff;pointer-events: auto;position: relative;border-radius: 30px;height: 130px;padding: 0 58px; margin-right: 10%;}
.indjs-menu-box:before {content: "";position: absolute;left: 0;top: 0;right: 0;bottom: 0;background: rgba(0,0,0,.1);backdrop-filter: blur(30px);border-radius: 30px;}
.indjs-menu-box .swiper-container{height: 100%;padding: 0 0 20px;overflow-x: clip;overflow-y: visible;}
.indjs-menu-box .swiper-slide {position: relative;width: 70px;height: 70px;margin-bottom: 10px;border-radius: 35px;overflow: hidden;align-self: end;}
.indjs-menu-box .swiper-slide.swiper-slide-active {width: 160px;height: 212px;margin-bottom: 0;background: #eee;border-radius: 20px;transition: height .3s,border-radius .3s;}
.indjs-menu-mix{width: 100%;position: relative;height: 100%;cursor: pointer;}
.swiper-slide-active .indjs-menu-mix{padding: 14px 14px 20px 18px;}
.indjs-menu-logo{text-align: right;}
.indjs-menu-logo img {width: 70px;height: 70px;}
.swiper-slide-active .indjs-menu-logo img{width: 55px;height: 55px;border-radius: 50%;}
.indjs-menu-info{display: none;width: 100%;}
.indjs-menu-info .hint strong{height: 20px;padding: 0 8px;border-radius: 10px;border: 1px solid #000;font-weight: 400;}
.swiper-slide-active .indjs-menu-info{display: block;margin-top: 12px;text-align: left;}
.swiper-slide-active .indjs-menu-info .name{font-size: 20px;font-weight: bold;}
.swiper-slide-active .indjs-menu-info .text{font-size: 14px; color: #888; margin: 8px 0;}
.swiper-slide-active .indjs-menu-info .tiyan{font-size: 13px; border: 1px solid #666; border-radius: 40px; text-align: center; padding: 6px 0;  margin-right: 30px;}
.indjs-menu-btn{position: absolute;width: 30px;height: 30px;background: rgba(0,0,0,.1);border: 1px solid #fff;border-radius: 15px;backdrop-filter: blur(5px);z-index: 10;transform: translate3d(0,0,12px);margin-top: -15px;top: 50%;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 12px;cursor: pointer;}
.indjs-menu-btn i{font-size: inherit;line-height: 1;}
.indjs-menu-btn.prev{left: 14px;transform: translate3d(0,0,10px);}
.indjs-menu-btn.next{right: 14px;transform: translate3d(0,0,10px) rotateY(180deg);}




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

    .indjs-imgs .swiper-wrapper {height: 828px;}
    .indjs-menu-box{width: 800px;padding: 0 50px;border-radius: 26px;}
    .indjs-menu-box:before{border-radius: 26px;}
    .indjs-menu-btn.prev{left: 10px;}
    .indjs-menu-btn.next{right: 10px;}
    .indjs-cont-info {width: calc(100% - 800px - 80px);}
    .indjs-menu-box .swiper-slide.swiper-slide-active {border-radius: 16px;}

}

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

    .indjs-imgs .swiper-wrapper{height: 745px;}
    .indjs-menu-box{width: 640px;border-radius: 20px;padding: 0 58px;}
    .indjs-menu-box:before{border-radius: 20px;}
    .indjs-menu-btn.prev{left: 14px;}
    .indjs-menu-btn.next{right: 14px;}
    .indjs-cont-info {width: calc(100% - 640px - 60px);}
    .indjs-menu-box .swiper-slide.swiper-slide-active{height: 204px;}

}

@media all and (max-width:1430px) {
    /* 1360 */
    .indjs-imgs .swiper-wrapper{height: 702px;}
}

@media all and (max-width:1350px) {
    /* 1280 */
    .indjs-imgs .swiper-wrapper{height: 662px;}
    .indjs-menu-box{width: 620px;padding: 0 50px;}
    .indjs-menu-btn.prev{left: 10px;}
    .indjs-menu-btn.next{right: 10px;}
    .indjs-cont-info {width: calc(100% - 620px - 40px);}

}

@media all and (max-width:1270px) {
    /* 1152 × (700) */
    .indjs-imgs .swiper-wrapper{height: 595px;}
    .indjs-menu-box{width: 440px;border-radius: 14px;}
    .indjs-menu-box:before{border-radius: 14px;}
    .indjs-cont-info {width: calc(100% - 440px - 40px);}
    .indjs-menu-box .swiper-slide.swiper-slide-active {border-radius: 12px;}
    .indjs-menu-box .swiper-slide.swiper-slide-active{height: 200px;}

}

/* ------------------------平板端-------------------------- */
@media all and (max-width:1100px) {
    /* 1024 横屏 */
    .indjs-shade{display: none;}
    .indjs-cont-info .link{font-size: 14px;margin-top: 0;}
}

@media all and (max-width:1000px) {
    /* 720 竖屏 */
    .indjs-imgs .swiper-wrapper{height: auto;}
    .indjs-menu-box{width: 100%;padding: 0;margin-right:0;}
    .indjs-menu{margin-top: -7rem;}
    .indjs-cont{margin-top: -12rem;}
    .indjs-cont-info .title, .indjs-cont-info .link{opacity:1;animation:none !important}
    .indjs-cont-info{width: 100%;}
}

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

    .swiper-slide-active .indjs-menu-info{display: none;}
    .swiper-slide-active .indjs-menu-mix{padding: 0;}
	.indjs-menu {margin-top: -6rem;}
    .indjs-menu-logo img {width: 40px;height: 40px;}
    .indjs-menu-box .swiper-slide {width: 40px;height: 40px;margin-bottom: 10px;border-radius: 28px;margin-top: 10px;}
    .indjs-menu-box .swiper-slide.swiper-slide-active{width: 46px;height: 46px;border-radius: 28px;background: transparent;margin-bottom: 10px;}
    .swiper-slide-active .indjs-menu-logo img {width: 46px;height: 46px;}
    .indjs-menu-box{width: 91%;height: 68px;border-radius: 8px; margin: 0 auto;}
    .indjs-menu-box:before {border-radius: 8px;}
    .indjs-menu-box .swiper-container {padding: 0 0 4px;}
    .indjs-menu-btn.prev{left: 6px;}
    .indjs-menu-btn.next{right: 6px;}
    .indjs-cont-info .title{font-size: 20px;}
    .indjs-menu-box::after{content: "";position: absolute;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #fff;width: 0;height: 0;bottom: 0;left: 0;right: 0;margin: 0 auto;}
    .indjs-menu-btn{display:none}
	
}