﻿/* .main {overflow: hidden;} */

.swiper-button-next, .swiper-button-prev {position: static; background-repeat: no-repeat; background-size: cover; background-position: center; color: transparent; margin-top: 0; padding: 0;}
.swiper-pagination {position: relative;}

#s3, #s4, #s5, #s7, #s11, #s12, #s15, #s16 {scroll-margin-top: 12rem;}

@media screen and (max-width: 880px) {
  #s3, #s4, #s5, #s7, #s11, #s12, #s15, #s16 {scroll-margin-top: 5.7rem;}
}

.s11_slide img {width: 100%;}

/* visual */
#visual {height: 108rem; overflow: hidden;}
#visual::before {content: ''; position: absolute; top: 12rem; left: 0; width: 108rem; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.7), transparent); z-index: 1; pointer-events: none;}
#visual video {width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0;}
#visual .text_bx {left: 14.3rem; top: 39rem; z-index: 2;}
#visual .text_bx img {margin-bottom: 4.7rem;}
#visual .text_bx .tit {line-height: 10.6rem; margin-bottom: 2.7rem;}
#visual .text_bx .txt {line-height: 3.8rem;}

@media screen and (max-width: 880px) {
    #visual {height: 81.2rem;}
    #visual::before {width: 20rem; top: 6.3rem; background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);}
    #visual .text {top: 11.4rem; left: 50%; transform: translateX(-50%);}
    #visual .text img {width: 29rem;}
    #visual .text_bx {top: 47.3rem; left: 1.6rem;}
    #visual .text_bx .tit {font-size: 3.4rem; line-height: 4.1rem; margin-bottom: 3.4rem; text-shadow: 0.1rem 0.1rem 0.3rem #000;}
    #visual .text_bx .txt {font-size: 2.4rem; line-height: 2.9rem; text-shadow: 0.1rem 0.1rem 0.3rem #000;}
}
/* visual */

/* s1 */
#s1 {overflow: hidden; padding: 17rem 0 30rem 0; background-image: url('../img/s1_bg.png'); background-repeat: no-repeat; background-position: center bottom; background-size: 100%;}
#s1::before {content: ''; position: absolute; top: 17rem; left: 56rem; width: 30rem; height: 29rem; background-image: url('../img/s1_icon.png'); background-size: 100%; background-repeat: no-repeat;}
#s1 .inner {width: 150.3rem;}
#s1 .left_bx .tit {height: 40.2rem; margin-bottom: 4.9rem; line-height: 13.4rem; letter-spacing: -0.06rem;}
#s1 .left_bx .txt {margin-bottom: 3.6rem;}
#s1 .left_bx .txt2 {line-height: 3.8rem;}
/* --- 오른쪽 이미지 리스트 애니메이션 초기 상태 --- */
#s1 .right_bx li {opacity: 0; transform: translateY(40px); /* 아래로 40px 내려가 있는 상태 */ transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
/* --- 활성화 (is-active) 상태일 때 --- */
#s1 .right_bx.is-active li {opacity: 1; transform: translateY(0);}
/* --- 순서대로 나타나도록 딜레이(지연 시간) 부여 --- */
#s1 .right_bx.is-active li:nth-child(1) {transition-delay: 1s;   /* 바로 시작 */}
#s1 .right_bx.is-active li:nth-child(2) {transition-delay: 1.5s; /* 0.3초 뒤 시작 */}
#s1 .right_bx.is-active li:nth-child(3) {transition-delay: 2s; /* 0.6초 뒤 시작 */}
#s1 .right_bx li:not(:last-child) {margin-bottom: 3.3rem;}

/* 등장 애니메이션 초기 상태 (숨김 및 아래로 이동) */
#s1 .left_bx .txt, #s1 .left_bx .txt2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* 타이핑 완료 후 활성화 상태 */
#s1 .left_bx.is-active .txt {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s; /* 타이핑 종료 후 0.2초 뒤 등장 */
}
#s1 .left_bx.is-active .txt2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s; /* txt 등장 후 이어서 등장 */
}

@media screen and (max-width: 880px) {
    #s1 {padding: 3.9rem 0 2.5rem 0; background-image: url('../img/s1_bg_mo.png');}
    #s1::before {top: 5.3rem; left: 25.6rem; width: 12.98rem; height: 12rem; background-image: url('../img/s1_icon_mo.png');}
    #s1 .inner {width: auto; padding: 0 1.6rem; align-items: flex-start; flex-direction: column; gap: 3rem;}
    #s1 .left_bx .tit {height: 20.8rem; font-size: 5.1rem; margin-bottom: 1.6rem; line-height: 7rem;}
    #s1 .left_bx .txt {font-size: 1.6rem; margin-bottom: 2rem;}
    #s1 .left_bx .txt2 {font-size: 2rem; line-height: 3.2rem;}
    #s1 .right_bx li img {width: 100%;}
    #s1 .right_bx li:not(:last-child) {margin-bottom: 1.4rem;}
}
/* s1 */

/* s2 */
#s2 {background: #FFF7E9; overflow: hidden;}
#s2 .s2_page {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
#s2 .s2_page .swiper-pagination-bullet {width: 20.8rem; height: auto; font-size: 2rem; color: #D6AF69; font-weight: 700; border-radius: 0; opacity: 1; background: transparent; padding-bottom: 1.5rem; border-bottom: 2px solid #D6AF69;}
#s2 .s2_page .swiper-pagination-bullet-active {color: #144A4D; border-bottom: 2px solid #144A4D;}
/* s2 */

/* s3 */
#s3 {overflow: hidden; padding: 8.9rem 0 9.6rem 0; background-image: url('../img/s3_bg.png'); background-size: cover; background-repeat: no-repeat;}
#s3 .inner {width: 150.4rem;}
#s3 .title_bx {margin-bottom: 5rem;}
#s3 .title_bx .tit {margin-bottom: 3.9rem;}
#s3 .title_bx .txt {line-height: 3.6rem;}
#s3 .list li {background: #fff; width: 100%; height: 22rem; padding-left: 6.8rem; border-left: 0.8rem solid #D6AF69;}
#s3 .list li:first-child {gap: 13.7rem; margin-bottom: 5rem;}
#s3 .list li:last-child {gap: 6.8rem;}
#s3 .list li .tit {margin-bottom: 2rem;}
#s3 .list li .txt {line-height: 3.3rem;}
#s3 .list .t_icon {top: 2rem; right: 3.2rem; padding: 0.4rem 0.9rem 0.4rem 2.5rem; border: 1px solid #298A8F; animation: blinkBg 1.5s infinite;}
.t_icon p {animation: blinkText 1.5s infinite;}
#s3 .list .t_icon::before {content: ''; position: absolute; top: 1.3rem; left: 0.9rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #298A8F; animation: blinkBg2 1.5s infinite;}
/* 배경색 변경 (0~49%까지는 기본, 50~100% 구간은 색상 채움) */
@keyframes blinkBg {
  0%, 49% {
    background-color: transparent;
  }
  50%, 100% {
    background-color: #29848F;
  }
}
@keyframes blinkBg2 {
  0%, 49% {
    background-color: #298A8F;
  }
  50%, 100% {
    background-color: #fff;
  }
}

/* 텍스트 색상 변경 */
@keyframes blinkText {
  0%, 49% {
    color: #298A8F; /* 원래 p태그(.fc6)의 색상 유지 */
  }
  50%, 100% {
    color: #fff; /* 배경이 칠해질 때 흰색으로 변경 */
  }
}

@media screen and (max-width: 880px) {
    #s3 {padding: 6.6rem 1.6rem 12.7rem 1.6rem; background-image: url('../img/s3_bg_mo.png');}
    #s3 .inner {width: 100%;}
    #s3 .title_bx {margin-bottom: 3rem;}
    #s3 .title_bx .tit {font-size: 3.2rem; line-height: 4rem; margin-bottom: 3.2rem;}
    #s3 .title_bx .txt {font-size: 2rem; line-height: 3.2rem;}
    #s3 .list li {flex-direction: column; height: auto; text-align: center;}
    #s3 .list li:first-child {padding: 2.4rem 0 3.8rem 0; gap: 4rem;}
    #s3 .list li:first-child .icon img {width: 30.4rem;}
    #s3 .list li:last-child {padding: 4.6rem 0 3.8rem 0; gap: 5.8rem;}
    #s3 .list li:last-child .icon img {width: 29.7rem;}
    #s3 .list li .tit {margin-bottom: 1.4rem;}
    #s3 .list li .txt {font-size: 1.8rem; line-height: 2.8rem;}
    #s3 .list li .t_icon {top: 1rem; right: 1rem;}
}
/* s3 */

/* s4 */
#s4 {overflow: hidden; padding: 15rem 0 18.2rem 0; background-image: url('../img/s4_bg.png'); background-size: cover; background-repeat: no-repeat;}
#s4 .inner {width: 150.4rem; overflow: hidden;}
#s4 .title_bx {margin-bottom: 6rem;}
#s4 .title_bx .tit {line-height: 9.3rem; margin-bottom: 6rem;}
#s4 .title_bx .txt {line-height: 3.8rem;}
#s4 .s4_page {width: 85.6rem; display: flex; flex-wrap: wrap; row-gap: 3.1rem; margin-bottom: 4rem;}
#s4 .swiper-pagination-bullet {margin:0 ; width: 21.4rem; height: auto; padding-bottom: 1.6rem; border-bottom: 2px solid #707070; font-size: 2rem; font-weight: 700; color: #707070; border-radius: 0; opacity: 1; background: transparent;}
#s4 .swiper-pagination-bullet-active {color: #FFF7E9; border-bottom: 2px solid #D6AF69;}
#s4 .s4_slide .text_bx {margin-bottom: 6.8rem;}
#s4 .s4_slide .text_bx .txt {margin-bottom: 2.2rem;}
#s4 .s4_slide .text_bx .tit {margin-bottom: 2.2rem;}
#s4 .s4_slide .text_bx .txt2 {line-height: 3.2rem;}
#s4 .s4_slide .img_list li {width: 33.333%;}
#s4 .s4_slide .img_list li .img_bx {height: 30.4rem; background: #fff; z-index: 1;}
#s4 .s4_slide .img_list li .text {padding: 4.3rem 0 0 4.2rem; height: 22.6rem; background: #144A4D;}
#s4 .s4_slide .img_list li .text .txt {margin-bottom: 0.9rem;}
#s4 .s4_slide .img_list li .text .tit {margin-bottom: 2.3rem;}
#s4 .s4_slide .img_list li .text .txt2 {line-height: 2.8rem;}
#s4 .s4_slide .text_bx2 {padding: 3.2rem 0 2.7rem 0; background: #144A4D; margin-top: 0.6rem;}
#s4 .s4_slide .img_list.type2 {gap: 0.6rem;}
#s4 .s4_slide .img_list.type2>li {width: calc(50% - 0.3rem);}
#s4 .s4_slide .img_list.type2>li.img_wrap {padding: 3.9rem 3.3rem 0 4.2rem; height: 69rem; background: #144A4D;}
#s4 .s4_slide .img_list.type2>li.img_wrap .img_bx {height: 42.5rem;}
#s4 .s4_slide .img_list.type2 .bg_list li {width: 100%; height: 22.6rem; padding: 4.3rem 0 0 4.2rem; background-color: #144A4D; background-repeat: no-repeat; background-size: cover;}
#s4 .s4_slide .img_list.type2 .bg_list li:first-child:hover {background-image: url('../img/s4_list1.png');}
#s4 .s4_slide .img_list.type2 .bg_list li:nth-child(2):hover {background-image: url('../img/s4_list1_2.png');}
#s4 .s4_slide .img_list.type2 .bg_list li:last-child:hover {background-image: url('../img/s4_list1_3.png');}
#s4 .s4_slide .img_list.type2 .bg_list li .tit {margin: 0.9rem 0 2.3rem 0;}
#s4 .s4_slide .img_list.type2 .bg_list li .txt2 {line-height: 2.8rem;}
#s4 .s4_slide .img_list.type2 .bg_list li:not(:last-child) {margin-bottom: 0.6rem;}
#s4 .s4_slide .img_list.type2 .bg_list.type2 {width: 100%;}
#s4 .s4_slide .img_list.type2 .bg_list.type2 ul {gap: 0.6rem; width: 100%;}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li {width: calc(50% - 0.3rem); margin-bottom: 0;}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li:first-child:hover {background-image: url('../img/s4_list2.png');}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li:nth-child(2):hover {background-image: url('../img/s4_list2_2.png');}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li:nth-child(3):hover {background-image: url('../img/s4_list2_3.png');}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li:nth-child(4):hover {background-image: url('../img/s4_list2_4.png');}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li:nth-child(5):hover {background-image: url('../img/s4_list2_5.png');}
#s4 .s4_slide .img_list.type2 .bg_list.type2 li:last-child:hover {background-image: url('../img/s4_list2_6.png');}

@media screen and (max-width: 880px) {
    #s4 {padding: 13.6rem 2rem 8.8rem 2rem; background: #051E1F;}
    #s4 .inner {width: 100%;}
    #s4 .title_bx {margin-bottom: 6.7rem;}
    #s4 .title_bx .tit {font-size: 3.2rem; line-height: 4.8rem; margin-bottom: 4rem;}
    #s4 .title_bx .txt {font-size: 2rem; line-height: 3.2rem;}
    #s4 .s4_page {width: 100%; row-gap: 3.3rem; margin-bottom: 6.4rem;}
    #s4 .swiper-pagination-bullet {width: 50%; padding-bottom: 1.6rem; font-size: 2rem; margin: 0;}
    #s4 .s4_slide .text_bx {margin-bottom: 3.3rem;}
    #s4 .s4_slide .text_bx .txt2 {font-size: 2rem; line-height: 3.2rem;}
    #s4 .s4_slide .text_bx2 {padding: 2rem 0 1.4rem 0;}
    #s4 .s4_slide .text_bx2 p {font-size: 2rem; line-height: 3.2rem;}
    #s4 .s4_slide .swiper-slide {overflow: hidden;}
    #s4 .s4_slide .s4_mo_slide5 {margin-top: 1.6rem;}
}
/* s4 */

/* s5 */
#s5 {position: relative;}
#s5 .inner {width: 150.4rem;}
#s5 .title_wrap {padding-top: 22.1rem; padding-bottom: 21.7rem;}
#s5 .title_bx {position: sticky; top: 22.1rem;}
#s5 .title_bx .txt {margin-bottom: 6rem;}
#s5 .title_bx .tit {line-height: 9.3rem; margin-bottom: 6.8rem;}
#s5 .title_bx .txt2 {line-height: 3.8rem;}

@media screen and (max-width: 880px) {
  #s5 .inner {width: 100%; flex-direction: column; gap: 4rem; padding: 7.6rem 1.6rem 2.9rem 1.6rem; overflow: hidden;}
  #s5 .title_wrap {padding: 0;}
  #s5 .title_bx {position: static;}
  #s5 .title_bx .txt {font-size: 2rem; margin-bottom: 3.7rem;}
  #s5 .title_bx .tit {font-size: 3rem; line-height: 4.5rem; margin-bottom: 4rem;}
  #s5 .title_bx .txt2 {font-size: 2rem; line-height: 3.2rem;}
  #s5 .btn {opacity: 1; width: 1.4rem; height: 2.8rem; background-repeat: no-repeat; background-size: 100%; position: absolute !important;}
  #s5 .btn.prev {background-image: url('../img/s5_prev.png');}
  #s5 .btn.next {background-image: url('../img/s5_next.png');}
}
/* s5 */

/* s6 */
#s6 {overflow: hidden; height: 119.5rem; padding-bottom: 33.7rem; background-color: #FFF7E9; background-image: url('../img/s6_img.png'); background-repeat: no-repeat; background-position: top center; background-size: 100%;}
#s6 .text_bx {bottom: 14.5rem; width: 139.2rem; background: #fff; padding: 8rem 13.5rem 8rem 7.9rem;}
#s6 .left_bx .txt {margin-bottom: 3.8rem;}
#s6 .left_bx .tit {line-height: 7.4rem;}
#s6 .list li:not(:last-child) {margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid #D6AF69;}
#s6 .list li .tit {margin-bottom: 0.7rem;}

@media screen and (max-width: 880px) {
  #s6 {height: 136.6rem; padding-bottom: 51.1rem; background-image: url('../img/s6_img_mo.png');}
  #s6 .text_bx {bottom: 7.4rem; width: 34rem; padding: 4.1rem 2.5rem; flex-direction: column; gap: 2.7rem; align-items: flex-start;}
  #s6 .left_bx .txt {margin-bottom: 1.5rem;}
  #s6 .left_bx .tit {font-size: 3.2rem; line-height: 4.8rem;}
  #s6 .list li:not(:last-child) {margin-bottom: 1.7rem; padding-bottom: 1.7rem;}
  #s6 .list li .tit {margin-bottom: 1rem;}
  #s6 .list li .txt {font-size: 2rem; line-height: 2.8rem;}
}
/* s6 */

/* s7 */
#s7 {overflow: hidden; padding: 9rem 0 10.1rem 0; overflow: hidden; background-image: url('../img/s7_bg.png'); background-repeat: no-repeat; background-size: cover;}
#s7 .inner {width: 150.4rem;}
#s7 .title_bx {margin-bottom: 6.6rem;}
#s7 .title_bx .txt {margin-bottom: 2rem;}
#s7 .title_bx .tit {margin-bottom: 5rem;}
#s7 .title_bx .txt2 {line-height: 5.6rem;}
#s7 .list li {width: 31rem; height: 5.4rem; border: 1px solid #fff;}

@media screen and (max-width: 880px) {
  #s7 {padding: 8.4rem 1.6rem 6.4rem 1.6rem; background-image: url('../img/s7_bg_mo.png');}
  #s7 .inner {width: 100%;}
  #s7 .title_bx {margin-bottom: 4rem; text-align: left;}
  #s7 .title_bx .txt {font-size: 2rem; margin-bottom: 3rem;}
  #s7 .title_bx .tit {font-size: 3.2rem; line-height: 4.8rem; margin-bottom: 4rem;}
  #s7 .title_bx .txt2 {font-size: 2rem; line-height: 3.2rem;}
  #s7 .list {flex-wrap: wrap; gap: 1.4rem;}
  #s7 .list li {width: calc(50% - 0.7rem); height: auto; padding: 1rem 0 1rem 2rem; text-align: left; justify-content: flex-start; font-size: 1.8rem;}
}
/* s7 */

/* s8 */
#s8 {padding: 14.8rem 0 10.1rem 0; overflow: hidden;}
#s8 .inner {padding-left: 20.8rem;}
#s8 .text_bx .txt {margin-bottom: 2rem;}
#s8 .text_bx .tit {margin-bottom: 4.8rem;}
#s8 .text_bx .txt2 {line-height: 3.7rem; margin-bottom: 4.2rem;}
#s8 .text_bx .green_bx {width: 74.4rem; padding: 3.2rem 0 3.5rem 3.4rem; background: #144A4D; border-left: 0.6rem solid #D6AF69;}
#s8 .text_bx .green_bx p {line-height: 4rem;}

@media screen and (max-width: 880px) {
  #s8 {padding: 6rem 0 4rem 0;}
  #s8 .inner {padding: 0 1.6rem;}
  #s8 .text_bx {width: 100%;}
  #s8 .text_bx .txt {font-size: 2rem; margin-bottom: 1.3rem;}
  #s8 .text_bx .tit {font-size: 3.2rem; margin-bottom: 0.3rem;}
  #s8 .text_bx img {margin-bottom: 3.5rem; width: 35rem;}
  #s8 .text_bx .txt2 {font-size: 2rem; line-height: 3.2rem; margin-bottom: 3rem;}
  #s8 .text_bx .green_bx {width: 100%; padding: 1.9rem 0 2.1rem 2.2rem;}
  #s8 .text_bx .green_bx p {font-size: 1.8rem; line-height: 2.8rem;}
}
/* s8 */

/* s9 */
#s9 {padding-bottom: 14.6rem; overflow: hidden;}
#s9 .inner {width: 150.4rem;}
#s9 .title_bx {margin-bottom: 4.8rem;}
#s9 .title_bx .txt {margin-bottom: 1.1rem;}
#s9 .list {width: 123.2rem; gap: 3.2rem 0.7rem;}
#s9 .list li {width: 60rem; height: 17.6rem; padding: 1.9rem 0 2.2rem 3.9rem; background: #144A4D; border-left: 0.6rem solid #D6AF69;}
#s9 .list li .num {margin-bottom: 0.5rem;}
#s9 .list li .tit {margin-bottom: 1.5rem;}
#s9 .list li .txt {line-height: 2.8rem;}

@media screen and (max-width: 880px) {
  #s9 {padding-bottom: 5.3rem;}
  #s9 .inner {width: 100%; padding: 0 1.6rem;}
  #s9 .title_bx {margin-bottom: 3.9rem;}
  #s9 .title_bx .txt {font-size: 2rem; margin-bottom: 1.2rem;}
  #s9 .title_bx .tit {font-size: 3.2rem;}
  #s9 .list {flex-direction: column; gap: 1.6rem; width: 100%;}
  #s9 .list li {width: 100%; height: 15rem; padding: 1.4rem 0 2rem 3.9rem;}
  #s9 .list li .mo_view_flex {gap: 1.1rem; margin-bottom: 1rem;}
}
/* s9 */

/* s10 */
#s10 {padding-bottom: 9.9rem; overflow: hidden;}
#s10::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 62.6rem; background: #F7F7F7;}
#s10 .inner {width: 150.4rem;}
#s10 .title_bx {margin-bottom: 9rem;}
#s10 .title_bx .txt {margin-bottom: 1.1rem;}
#s10 .list {gap: 2rem; margin-bottom: 10.4rem;}
.reserve_bx .text_bx .tit {margin-bottom: 2rem;}
.reserve_bx a {width: 23.3rem; height: 7.1rem; text-align: center; background: #D6AF69;}

@media screen and (max-width: 880px) {
  #s10 {padding-bottom: 4.3rem;}
  #s10::before {height: 39.2rem;}
  #s10 .inner {width: 100%; padding: 0 1.6rem;}
  #s10 .title_bx {margin-bottom: 3.1rem;}
  #s10 .title_bx .txt {font-size: 2rem; margin-bottom: 1.2rem;}
  #s10 .title_bx .tit {font-size: 3.2rem;}
  #s10 .s10_slide img {width: 30.3rem;}
  #s10 .s10_slide .swiper-slide {text-align: center;}
  .reserve_bx {flex-direction: column; align-items: center; text-align: center; margin-top: 3rem;}
  .reserve_bx .text_bx .tit {font-size: 2.4rem; margin-bottom: 1.2rem;}
  .reserve_bx .text_bx .txt {font-size: 1.8rem; line-height: 2.8rem; margin-bottom: 2.4rem;}
  #s10 .btn {opacity: 1; width: 1.4rem; height: 2.8rem; background-repeat: no-repeat; background-size: 100%; position: absolute !important;}
  #s10 .btn.prev {background-image: url('../img/s10_prev.png');}
  #s10 .btn.next {background-image: url('../img/s10_next.png');}
}
/* s10 */

/* s11 */
#s11 {overflow: hidden; background: #F7F7F7;}
#s11::before {content: ''; position: absolute; top: 26.2rem; right: 0; width: 154.1rem; height: 42rem; background-image: url('../img/s11_bg.png'); background-repeat: no-repeat; background-size: 100%;}
#s11 .inner {width: 150.4rem;}
#s11 .title_bx {padding: 12.9rem 0 12.4rem 0; background: #144A4D;}
#s11 .title_bx .txt {margin-bottom: 2rem;}
#s11 .title_bx img {margin-bottom: 0.5rem;}
#s11 .reserve_bx {padding: 10.4rem 0 9.3rem 0;}
#s11 .s11_slide img {width: 100%;}
#s11 .s11_page {position: absolute; bottom: auto; left: auto; top: 15.2rem; right: 36.5rem; display: flex; flex-direction: column; gap: 3.2rem; width: auto;}
#s11 .s11_page .swiper-pagination-bullet {width: 31rem; height: 5.4rem; border: 1px solid #fff; padding: 1rem 0 1rem 1.1rem; border-radius: 0; background: transparent; font-size: 2.8rem; color: #fff; font-weight: 500; text-align: left; opacity: 1;}

@media screen and (max-width: 880px) {
  #s11::before {top: auto; right: auto; left: 0; width: 40rem; height: 13.4rem; background-image: url('../img/s11_bg.png');}
  #s11 .inner {width: 100%; padding: 0 1.6rem;}
  #s11 .title_bx {padding: 7rem 0 20.4rem 0;}
  #s11 .title_bx .txt {font-size: 2rem; margin-bottom: 3.rem;}
  #s11 .title_bx img {width: 36.2rem; margin-bottom: 0;}
  #s11 .title_bx .txt2 {line-height: 3.1rem; text-align: center; font-size: 2rem;}
  #s11 .reserve_bx {padding: 3.2rem 0;}
  #s11 .s11_page {width: 100%; flex-direction: row; top: 51rem; left: 1.6rem; flex-wrap: wrap; gap: 1.4rem;}
  #s11 .s11_page .swiper-pagination-bullet {width: 18.4rem; height: 4rem; font-size: 1.8rem; padding: 0.8rem 0 1rem 0.4rem;}
  #s11_slide  {width: 100%; height: auto;}
}
/* s11 */

/* s12 */
#s12 {overflow: hidden; padding: 9rem 0 10.1rem 0; overflow: hidden; background-image: url('../img/s12_bg.png'); background-repeat: no-repeat; background-size: cover;}
#s12 .inner {width: 150.4rem;}
#s12 .title_bx {margin-bottom: 6.6rem;}
#s12 .title_bx .txt {margin-bottom: 2rem;}
#s12 .title_bx .tit {margin-bottom: 5rem;}
#s12 .title_bx .txt2 {line-height: 5.6rem;}
#s12 .list {gap: 4rem;}
#s12 .list li {width: 31rem; height: 5.4rem; border: 1px solid #fff;}

@media screen and (max-width: 880px) {
  #s12 {padding: 8.4rem 1.6rem 6.4rem 1.6rem; background-image: url('../img/s12_bg_mo.png');}
  #s12 .inner {width: 100%;}
  #s12 .title_bx {margin-bottom: 4rem; text-align: left;}
  #s12 .title_bx .txt {font-size: 2rem; margin-bottom: 3rem;}
  #s12 .title_bx .tit {font-size: 3.2rem; line-height: 4.8rem; margin-bottom: 4rem;}
  #s12 .title_bx .txt2 {font-size: 2rem; line-height: 3.2rem;}
  #s12 .list {justify-content: flex-start; flex-wrap: wrap; gap: 1.4rem;}
  #s12 .list li {width: calc(50% - 0.7rem); height: auto; padding: 1rem 0 1rem 2rem; text-align: left; justify-content: flex-start; font-size: 1.8rem;}
}
/* s12 */

/* s13 */
#s13 {padding: 13.2rem 0 16.8rem 0; overflow: hidden;}
#s13 .inner {padding-left: 20.8rem; gap: 4.7rem;}
#s13 .title_bx .txt {margin-bottom: 2rem;}
#s13 .title_bx .tit {margin-bottom: 4.8rem;}
#s13 .title_bx .txt2 {line-height: 3.7rem; margin-bottom: 4.2rem;}
#s13 .title_bx .list li {width: 74.4rem; height: 17.6rem; padding-left: 3.4rem; background: #144A4D; border-left: 0.6 solid #D6AF69;}
#s13 .title_bx .list li:not(:last-child) {margin-bottom: 2rem;}
#s13 .title_bx .list li p {line-height: 4rem;}
#s13 .slide_bx {overflow: hidden;}
#s13 .slide_bx.pc_view .swiper-slide {width: 55.5rem !important; margin-right: 3.5rem;}

@media screen and (max-width: 880px) {
  #s13 {padding: 6.4rem 0 4.8rem 0;}
  #s13 .inner {padding: 0 1.6rem; display: block;}
  #s13 .title_bx .txt {font-size: 2rem; margin-bottom: 1.3rem;}
  #s13 .title_bx .tit {font-size: 3.2rem; margin-bottom: 3.5rem;}
  #s13 .title_bx .txt2 {font-size: 2rem; line-height: 3.2rem;}
  #s13 .title_bx .list li {width: 100%; height: 12rem; padding-left: 2.2rem;}
  #s13 .title_bx .list li:not(:last-child) {margin-bottom: 1.6rem;}
  #s13 .title_bx .list li p {font-size: 1.8rem; line-height: 2.8rem;}
  #s13 .slide_bx.mo_view {margin-bottom: 3rem;}
  #s13 .slide_bx.mo_view .swiper-slide {width: 19.2rem; margin-right: 0;}
  #s13 .slide_bx.mo_view .swiper-slide img {width: 100%;}
}
/* s13 */

/* s14 */
#s14::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 62.6rem; background: #F7F7F7;}
#s14 .inner {max-width: 150.4rem;}
#s14 .title_bx {margin-bottom: 4.8rem;}
#s14 .title_bx .txt {margin-bottom: 1.1rem;}
#s14 .img_bx {gap: 1.4rem;}
#s14 .img_bx img {transition: all 0.5s; position: relative;}
#s14 .img_bx img:hover {transform: scale(1.03); z-index: 1;}
#s14 .reserve_bx {padding: 12.3rem 0 12.6rem 0;}

@media screen and (max-width: 880px) {
  #s14::before {height: 39.2rem;}
  #s14 .inner {width: 100%; padding: 0 1.6rem; overflow: hidden;}
  #s14 .title_bx {margin-bottom: 4rem;}
  #s14 .title_bx .txt {font-size: 2rem; margin-bottom: 1.3rem;}
  #s14 .title_bx .tit {font-size: 3.2rem;}
  #s14 .s14_slide {width: 100%; overflow: hidden;}
  #s14 .reserve_bx {padding: 2rem 0 3.2rem 0; margin-top: 0;}
}
/* s14 */

/* s15 */
#s15 {overflow: hidden; background: #F7F7F7;}
#s15::before {content: ''; position: absolute; top: 0; left: 1.2rem; width: 192rem; height: 54.1rem; background-image: url('../img/s15_bg.png'); background-repeat: no-repeat; background-size: 100%; z-index: 1;}
#s15 .inner {width: 150.4rem;}
#s15 .title_bx {padding: 13.5rem 0 8.2rem 0; background: #144A4D;}
#s15 .title_bx .txt {margin-bottom: 2rem;}
#s15 .title_bx img {margin-bottom: 3.6rem; position: relative; left: -0.8rem;}
#s15 .title_bx .txt2 {line-height: 3.3rem;}
#s15 .reserve_bx {padding: 10.4rem 0 9.3rem 0;}
#s15 .s15_page {position: absolute; bottom:auto; left:auto; width: auto; top: 15.2rem; right: 36.5rem; display: flex; flex-direction: column; gap: 3.2rem;}
#s15 .s15_page .swiper-pagination-bullet {width: 31rem; height: 5.4rem; border: 1px solid #fff; padding: 1rem 0 1rem 1.1rem; border-radius: 0; background: transparent; font-size: 2.8rem; color: #fff; font-weight: 500; text-align: left; opacity: 1;}

@media screen and (max-width: 880px) {
  #s15::before {top: 10.5rem; right: auto; left: 0; width: 40rem; height: 25.3rem; background-image: url('../img/s15_bg_mo.png');}
  #s15 .inner {width: 100%; padding: 0 1.6rem;}
  #s15 .title_bx {padding: 7rem 0 20.4rem 0;}
  #s15 .title_bx .txt {font-size: 2rem; margin-bottom: 5.7rem;}
  #s15 .title_bx img {width: 37.6rem; margin-bottom: 5rem;}
  #s15 .title_bx .txt2 {line-height: 3.1rem; text-align: center; font-size: 2rem;}
  #s15 .reserve_bx {padding: 3.2rem 0; margin-top: 0;}
  #s15 .s15_page {width: 100%; flex-direction: row; top: 61.3rem; left: 1.6rem; flex-wrap: wrap; gap: 1.4rem;}
  #s15 .s15_page .swiper-pagination-bullet {width: 18.4rem; height: 4rem; font-size: 1.8rem; padding: 0.8rem 0 1rem 0.4rem;}
}
/* s15 */

/* s16 */
#s16 {height: 107.1rem; overflow: hidden;}
#s16 .inner {width: 150.4rem;}
#s16 .title_bx .icon {margin-bottom: 5.3rem;}
#s16 .title_bx .tit {line-height: 8rem; margin-bottom: 4rem;}
#s16 .title_bx .txt {line-height: 3.1rem;}
#s16 .slide_bx {height: 107.1rem; display: flex; gap: 3.4rem; overflow: hidden;}
#s16 .slide_col {flex: 1;}
#s16 .slide_list {display: flex; flex-direction: column; gap: 3rem;}
#s16 .slide_list img {width: 100%;}
/* --- 애니메이션 설정 --- */
/* 1. 위로 올라가는 애니메이션 */
#s16 .slide_col.up .slide_list {animation: scrollUp 20s linear infinite;}
@keyframes scrollUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); } /* 전체 높이의 절반(복제본 시작점)까지 이동 */
}
/* 2. 아래로 내려가는 애니메이션 */
#s16 .slide_col.down .slide_list {animation: scrollDown 20s linear infinite;}
@keyframes scrollDown {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* 모바일용 가로 흐름 애니메이션 추가 */
@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 가로 너비의 절반만큼 이동 */
}

@media screen and (max-width: 880px) {
  #s16 {height: auto; padding: 4.3rem 0 9.2rem 0;}
  #s16 .inner {flex-direction: column; width: 100%; padding: 0 0.8rem; overflow: hidden; gap: 4.7rem;}
  #s16 .title_bx .icon {margin-bottom: 2.6rem;}
  #s16 .title_bx .icon img {width: 21.7rem;}
  #s16 .title_bx .tit {font-size: 4.3rem; line-height: 5.4rem; margin-bottom: 3.5rem;}
  #s16 .title_bx .txt {font-size: 2rem; line-height: 3.2rem;}

  /* 슬라이드 레이아웃 가로 배치로 변경 */
  #s16 .slide_bx {height: auto; width: 100%;}
  #s16 .slide_col.up .slide_list {width: max-content; flex-direction: row; align-items: flex-start; animation: scrollLeft 20s linear infinite;}
  #s16 .slide_list {gap: 1.5rem;}
  #s16 .slide_list img {width: 38.6rem; flex-shrink: 0;}
}
/* s16 */

/* s17 */
#s17 {padding: 31.9rem 0 25.5rem 0; background-image: url('../img/s17_bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
#s17 .title_bx .tit {margin-bottom: 5rem; line-height: 6rem;}
#s17 .title_bx .txt {line-height: 3.6rem;}

@media screen and (max-width: 880px) {
  #s17 {padding: 11.5rem 0 9.8rem 0; background-image: url('../img/s17_bg_mo.png');}
  #s17 .title_bx {padding-left: 1.6rem; text-align: left;}
  #s17 .title_bx .tit {font-size: 4rem; line-height: 5.5rem; margin-bottom: 8.8rem;}
  #s17 .title_bx .txt {font-size: 2.4rem; line-height: 3.6rem;}
}
/* s17 */
