#main {overflow: hidden;}

.visual {height: 100vh; background: url('../img/main/main_visual.jpg') no-repeat center/cover;}
.visual video {width: 100%; height: 100%; object-fit: cover;}
.visual .cont {padding: 0 7rem}
.visual .txt_area {padding-bottom: 5%;}
.visual .txt_area .ico {margin-bottom: 2.4rem}
.visual .txt_area .tit {}
.visual .txt_area .tit::before {content: ''; display: block; position: absolute; right: 0; top: 50%; height: 2px; background: #56E2AA; width: 42%}
.visual .txt_area .subt {margin: 14.8rem 0 1.6rem 0;}
.visual .txt_area .subt span {padding-left: 1rem; margin-left: 1rem}
.visual .txt_area .subt span::before {content: ''; display: block; position: absolute; left: 0; height: 100%; background: #56E2AA; width: 4px}
.visual .txt_area .wrt {line-height: 2.8rem;}
.visual .v_img {width: 100%; max-width: 33%;}

@media all and (max-width: 880px){
    .visual {height: 109rem; position: relative; overflow: hidden;}
    .visual .cont {padding: 0; max-width: 100%; top: 8%; bottom: auto}
    .visual .cont::before {content: ''; display: block; position: absolute; width: 100%; height: 30%; bottom: 0; background: background: rgb(11,36,45); background: linear-gradient(180deg, rgba(11,36,45,0) 0%, rgba(57,98,104,0.9) 100%); z-index: 1;}
    .visual .txt_area {z-index: 2; text-align: center; margin: 0 auto; padding-bottom: 10%;}
    .visual .txt_area .ico {max-width: 3.2rem}
    .visual .txt_area .tit {font-size: 4.2rem; text-align: center;}
    .visual .txt_area .tit::before {display: none}
    .visual .txt_area .subt {flex-direction: column; align-items: baseline; margin-top: 43rem; gap: 1rem;}
    .visual .txt_area .wrt {text-align: left}
    .visual .v_img {position: absolute; max-width: 90%; bottom: 0; left: 50%; transform: translateX(-50%);}
}

.s1 {}
.s1 .flow {overflow: hidden; top: 13%;}
.s1 .inner {padding: 36rem 0 0 0;}
.s1 .txt {margin-bottom: 17.4rem;}
.s1 .txt .tit {}
.s1 .txt .tit b.pc_view {display: inline-block;}
.s1 .txt .tit b::before {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: #7AFFCA}
.s1 .txt .wrt {margin-top: 6.4rem; line-height: 2.6rem;}
.s1 .marquee {overflow: hidden;}
.s1 .banners {gap: 2.4rem; overflow: hidden;}
.s1 .banners li {max-width: 31.2rem;}
.s1 .banners li.last {max-width: 64.8rem;}

@media all and (max-width: 880px){
    .s1 .flow {font-size: 18rem; top: 3%;}
    .s1 .inner {padding: 15rem 0 0 0; max-width: 87%;}
    .s1 .txt {margin-bottom: 3.8rem}
    .s1 .txt .tit {font-size: 4.2rem}
    .s1 .txt .tit b.pc_view {display: none}
    .s1 .txt .tit b.mo_view {display: inline-block;}
    .s1 .txt .wrt {margin-top: 3.8rem;}
}

.s2 {}
.s2 .title {padding: 24.3rem 0 0 0;}
.s2 .title .line {width: 12rem; height: 4px; background: #56E2AA}
.s2 .title .tit {margin: 4.8rem 0 7.2rem}
.s2 .s2_swiper {overflow: hidden;}
.s2 .swiper-slide {}
.s2 .swiper-slide img {}
.s2 .swiper-slide .txt {left: 11%; padding-top: 11rem;}
.s2 .swiper-slide .txt .subt {}
.s2 .swiper-slide .txt .tit {margin: 1.6rem 0 11.4rem; line-height: 6.4rem;}
.s2 .swiper-slide .txt .wrt {line-height: 2.6rem; margin-bottom: 6.4rem}
.s2 .swiper-slide .txt .more {color: #fff; padding: 0.9rem 3.5rem; border: 1px solid #A4AAB1; transition: 0.4s;}
.s2 .swiper-slide .txt .more::before {content: ''; display: block; position: absolute; left: 0; height: 100%; top: 0; width: 0; background: #A4AAB1; transition: 0.4s}
.s2 .swiper-slide .txt .more:hover::before {width: 100%;}
.s2 .swiper-option {bottom: 0; right: 6.7%; width: 29.2rem; height: 11.5rem; z-index: 1; border-radius: 40px 0;}
.s2 .swiper-button-next,
.s2 .swiper-button-prev {z-index: 99; color: #fff}
.s2 .swiper-button-next::after,
.s2 .swiper-button-prev::after {font-size: 2rem; font-weight: bold;}
.s2 .swiper-button-next {right: 20%}
.s2 .swiper-button-prev {left: 20%;}
.s2 .swiper-pagination {top: 50%; transform: translateY(-50%); bottom: auto}
.s2 .swiper-pagination-current {font-size: 3.6rem; font-weight: bold;}
.s2 .lst {margin-top: 8.8rem;}
.s2 .lst li {flex: 1;}
.s2 .lst li + li {border-left: 1px solid #C9CDD2}
.s2 .lst li .tit {}

@media all and (max-width: 880px){
    .s2 .title {padding: 16rem 0 0 0; max-width: 87%}
    .s2 .title .line {width: 5.4rem;}
    .s2 .title .tit {font-size: 3.6rem; margin: 4rem 0 5.7rem}
    .s2 .s2_swiper {max-width: 87%; margin: 0 auto;}
    .s2 .swiper-slide .txt {padding: 0;}
    .s2 .swiper-slide .txt .subt {font-size: 1.8rem}
    .s2 .swiper-slide .txt .tit {font-size: 3.2rem; margin: 3rem 0 7.7rem; line-height: 4.4rem; margin-bottom: 28rem;}
    .s2 .swiper-option {right: 0; width: 50%; height: 10%;}
    .s2 .swiper-pagination {font-size: 1.4rem}
    .s2 .swiper-pagination-current {font-size: 2.2rem}
    .s2 .swiper-button-next::after,
    .s2 .swiper-button-prev::after {font-size: 1.5rem}
    .s2 .swiper-button-next {right: 10%}
    .s2 .swiper-button-prev {left: 10%}
    .s2 .swiper-slide .txt .more {padding: 0.5rem 1.5rem; font-size: 1.4rem}
    .s2 .lst {flex-direction: column; max-width: 87%; }
    .s2 .lst li .tit {font-size: 7rem; margin-bottom: 1rem}
    .s2 .lst li + li {border: 0; padding-top: 4.3rem; margin-top: 4.3rem; border-top: 1px solid #C9CDD2}
}

.s34_wrap {padding: 19.2rem 0 28.5rem; position: relative; margin-top: 28.8rem;}
.s34_wrap::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url('../img/main/s34_bg.jpg') no-repeat bottom/cover; bottom: 0; left: 0}

.s3 {padding: 17rem 0 11rem;}
.s3::before {content: ''; display: block; position: absolute; background: #222527; width: 100%; bottom: 0; height: 40%; left: 0}
.s3 .title {}
.s3 .title .line {width: 12rem; height: 4px; background: #56E2AA}
.s3 .title .tit {margin: 4.8rem 0 6.4rem}
.s3 .swiper_wrap {max-width: 90%; margin: 0 auto}
.s3 .s3_swiper {overflow: hidden;}
.s3 .s3_swiper .swiper-wrapper {height: auto}
.s3 .s3_swiper .tit {margin: 3.2rem 0 0.8rem;}
.s3 .s3_swiper .wrt {}
.s3 .s3_prev {background: url('../img/main/s3_prev_ico.svg') no-repeat center/contain;}
.s3 .s3_next {background: url('../img/main/s3_next_ico.svg') no-repeat center/contain;}
.s3 .s3_prev, .s3 .s3_next {width: 4rem; height: 4rem;}
.s3 .s3_prev::after,
.s3 .s3_next::after {display: none;}
.s3 .whole_line {height: 1px; background: #C9CDD2; margin: 20.8rem auto 19.2rem;}

@media all and (max-width: 880px){
    .s34_wrap {background: url('../img/main/s34_bg.jpg') no-repeat bottom; background-size: 100% 74.5%; padding: 12.6rem 0 16rem;}

    .s3 {padding: 12rem 0 0 0;}
    .s3::before {display: none;}
    .s3 .title {max-width: 87%;}
    .s3 .title .line {width: 5.4rem;}
    .s3 .title .tit {font-size: 3.6rem; margin: 4rem 0 9.4rem;}
    .s3 .s3_swiper::before {content: ''; display: block; position: absolute; background: #fff; width: 37%; height: 16%; bottom: 0; right: 12%; z-index: 9;}
    .s3 .s3_swiper::after {content: ''; display: block; position: absolute; background: #C9CDD2; width: 2px; height: 6%; bottom: 5%; right: 30%; z-index: 9}
    .s3 .s3_swiper .txt {position: absolute; bottom: 0; background: rgba(0,0,0,0.9); height: 48%; padding: 0 1.6rem; width: 100%;}
    .s3 .s3_swiper .tit {font-size: 2.4rem; font-weight: 400; margin: 2.7rem 0 1.7rem}
    .s3 .s3_swiper .wrt {font-size: 1.4rem; line-height: 2.2rem}
    .s3 .s3_prev,
    .s3 .s3_next {background: none; bottom: 3%; top: auto; color: #000;}
    .s3 .s3_prev {left: 55%;}
    .s3 .s3_next {right: 15%;}
    .s3 .s3_prev::after,
    .s3 .s3_next::after {display: block; font-size: 2rem; font-weight: bold;}
}

.s4 {}
.s4 .box {gap: 7.2rem}
.s4 .box + .box {margin-top: 15.7rem;}
.s4 .box:nth-child(1) {left: 7rem;}
.s4 .box:nth-child(2) {right: 7rem;}
.s4 .box .txt_box {}
.s4 .box .txt_box .tit {line-height: 9.2rem; margin-bottom: 18.7rem;}
.s4 .box .txt_box .wrt {line-height: 2.6rem; margin: 3.2rem 0 12.8rem;}
.s4 .box .txt_box .lst {}
.s4 .box .txt_box .lst li {background: rgba(51,56,60,0.6); padding: 1.8rem 4rem; border-radius: 20px; width: 67.4rem}
.s4 .box .txt_box .lst li + li {margin-top: 1.6rem}
.s4 .box .txt_box .lst li span {padding-left: 1.8rem;}
.s4 .box .img_box {}

@media all and (max-width: 880px){
    .s4 {}
    .s4 .box {max-width: 87%}
    .s4 .box + .box {margin-top: 12.4rem}
    .s4 .box:nth-child(1) {left: 0;}
    .s4 .box:nth-child(2) {right: 0;}
    .s4 .box .txt_box {width: 100%}
    .s4 .box .txt_box .tit {font-size: 4.8rem; line-height: 6.4rem; margin-bottom: 4rem;}
    .s4 .box .txt_box .wrt {margin: 1.2rem 0 5rem}
    .s4 .box .txt_box .lst {margin-top: 2.4rem}
    .s4 .box .txt_box .lst li {padding: 2.2rem 1.4rem; width: 100%}
    .s4 .box .txt_box .lst li span {padding-left: 1rem}
}

.s5 {}
.s5 .inner {padding: 19.5rem 0; background: url('../img/main/s5_bg.png') no-repeat center/cover;}
.s5 .marquee3 {overflow: hidden;}
.s5 .banners {gap: 4rem; overflow: hidden;}
.s5 .banners li {}
.s5 .banners li.last {}

@media all and (max-width: 880px){
    .s5 .inner {padding: 19.5rem 0; background: url('../img/main/s5_bg_mo.png') no-repeat center/cover;}
    .s5 .inner {padding: 12rem 0}
    .s5 .marquee3_mo {overflow: hidden;}
}

.s6 {}
.s6 .inner {}
.s6 .txt {margin-bottom: 26.7rem;}
.s6 .txt::before {content: ''; display: block; position: absolute; height: 6.8rem; width: 164rem; background: #fff; bottom: 100%; left: -6.8rem;}
.s6 .txt .tit {line-height: 6.4rem; top: -2rem;}
.s6 .txt .wrt {line-height: 2.8rem;}
.s6 .cont {}
.s6 .cont video {width: 100%}
.s6 .cont .title {background: rgba(0,0,0,0.8); padding: 0 20rem;}
.s6 .cont .title .subt {background: #56E2AA; padding: 0.7rem 1.6rem;}
.s6 .cont .title .tit {margin: 0.8rem 0 1.6rem}
.s6 .cont .title .more {color: #7AFFCA;}

@media all and (max-width: 880px){
    .s6 .inner {max-width: 100%; padding-top: 6.3rem}
    .s6 .txt {max-width: 87%; margin: 0 auto; margin-bottom: 30.6rem; }
    .s6 .txt::before {display: none}
    .s6 .txt .tit {font-size: 3.6rem; line-height: 4.4rem;}
    .s6 .txt .wrt {font-size: 1.4rem; line-height: 2.4rem;}
    .s6 .cont .title {background: transparent; padding: 0 0 11rem 0; justify-content: flex-end; width: 100%;}
    .s6 .cont .title .subt {font-size: 1.2rem}
    .s6 .cont .title .tit {left: 7%; margin: 2.5rem 0 2.8rem}
    .s6 .cont .title .more {left: 7%}
}

.s7 {overflow: hidden;}
.s7 .inner {width: calc(150.4rem + ((100% - 150.4rem) / 2)); margin-left: auto; padding-top: 24.4rem;}
.s7 .inner::before {content: ''; display: block; position: absolute; bottom: 0; width: 132rem; background: #F6F7F9; height: 33.6rem; right: 0}
.s7 .txt {}
.s7 .txt .tit {line-height: 6.4rem; margin-bottom: 3.2rem;}
.s7 .txt .tit::before {content: ''; display: block; position: absolute; height: 4px; background: #56E2AA; width: 12rem; left: 0; top: -3.2rem;}
.s7 .txt .wrt {line-height: 2.6rem;}
.s7 .s7_swiper {max-width: 93.2rem; overflow: hidden; padding-bottom: 12rem;}
.s7 .s7_swiper .img {}
.s7 .s7_swiper .img span {display: inline-block; width: 15rem; text-align: center; padding: 1.5rem 0; z-index: 1}
.s7 .s7_swiper .img span.before {}
.s7 .s7_swiper .img span.after {top: 50%}
.s7 .s7_swiper .img .lock {height: 50%; bottom: 0; backdrop-filter: blur(8px); background: rgba(255,255,255,0.1);}
.s7 .s7_swiper .tit {margin: 4rem 0 0.8rem;}
.s7 .s7_swiper .wrt {}
.s7 .swiper-option {width: 19rem; bottom: 20%;}
.s7 .s7_prev,
.s7 .s7_next {z-index: 99}
.s7 .s7_prev::after,
.s7 .s7_next::after {color: #C9CDD2; font-size: 2.6rem; font-weight: bold}
.s7 .s7_prev {left: 0;}
.s7 .s7_next {right: 0;}
.s7 .s7_page {top: 50%; transform: translateY(-50%); bottom: auto; font-size: 3.2rem; font-weight: bold; color: #454C53}

@media all and (max-width: 880px){
    .s7 .inner {width: 100%; flex-direction: column; padding-top: 15rem}
    .s7 .inner::before {display: none}
    .s7 .txt {padding-bottom: 12rem; max-width: 87%; margin: 0 auto; width: 100%}
    .s7 .txt .tit {font-size: 4rem; line-height: 5.2rem; margin-bottom: 3.8rem;}
    .s7 .txt .tit::before {width: 5.4rem; top: -4rem}
    .s7 .s7_swiper {width: 100%; max-width: 87%; margin: 0 auto; padding-bottom: 0}
    .s7 .s7_swiper .tit {font-size: 2.4rem; margin: 2rem 0 4px;}
    .s7 .s7_swiper .wrt {font-size: 1.4rem}
    .s7 .s7_swiper .img span {font-size: 1.3rem; width: 10rem; padding: 1rem 0;}
    .s7 .s7_swiper .img .lock {font-size: 1.3rem; gap: 1rem;}
    .s7 .s7_swiper .img .lock img {max-width: 2rem}
    .s7 .swiper-option {bottom: auto; top: 45%; left: 7%; width: 14rem;}
    .s7 .s7_prev::after,
    .s7 .s7_next::after {font-size: 1.3rem;}
    .s7 .s7_page {font-size: 1.8rem}
}

.s8 {}
.s8 .inner {height: 100vh; background: url('../img/main/s8_bg.jpg') no-repeat center/cover;}
.s8 .inner::after {content: ''; display: block; position: absolute; left: 50%; width: 1px; background: #56E2AA; height: 0; top: 0; transition: 1.4s}
.s8 .txt {}
.s8 .txt .subt {gap: 1.6rem; letter-spacing: 3px;}
.s8 .txt .tit {margin-top: 3rem; line-height: 4.4rem;}

.s8 .inner.trigger_hit_on::after {height: 35%}

@media all and (max-width: 880px){
    .s8 {}
    .s8 .inner {height: 80vh;}
    .s8 .inner::after {height: 13%}
    .s8 .txt .subt {flex-direction: column; align-items: center; font-size: 1.4rem;}
    .s8 .txt .subt img {max-width: 3.2rem}
}

.s9 {padding: 24rem 0 28rem}
.s9 .s9_swiper .swiper-wrapper {height: auto}

@media all and (max-width: 880px){
    .s9 {padding: 15.4rem 0 16.4rem}
}