.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;}
.swiper-pagination {position: relative;}

#s1, #menu2, #s4, #s5, #s6, #s11 {scroll-margin-top: 16.3rem;}

@media screen and (max-width: 880px) {
  #s1, #menu2, #s4, #s5, #s6, #s11 {scroll-margin-top: 7.4rem;}
}

/* visual */
#visual {height: 108rem; overflow: hidden; background: url('../video/visual_video.png') center no-repeat; background-size: cover;}
#visual video {width: 100%; height: 100%; object-fit: cover;}

@media screen and (max-width: 880px) {
  #visual {height: 81.1rem;}
}
/* visual */

/* s1 */
#s1 {padding: 18.1rem 0 8.3rem 0;}
#s1 .img_bx {width: 144.4rem; margin-bottom: 9.6rem;}
#s1 .text_bx .tit {line-height: 12rem;}

@media screen and (max-width: 880px) {
  #s1 {padding: 5.2rem 0 6.8rem 0;}
  #s1 .img_bx {width: 36.8rem; margin-bottom: 5.7rem;}
  #s1 .text_bx .tit {font-size: 2.4rem; line-height: 3.6rem; margin-bottom: 2.4rem;}
  #s1 .text_bx .txt {line-height: 4.8rem;}
}
/* s1 */

/* s2 */
#s2 {padding-bottom: 18.5rem;}
#s2 .slide_bx {position: relative; z-index: 1;}
#s2 .cont_bx {width: 155.4rem; height: 52.7rem; padding-top: 21.1rem; border-radius: 5rem; background: #fff; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16); transform: translateY(-14.2rem); margin-bottom: 3.3rem;}
#s2 .cont_bx .box {width: 33.333%; }
#s2 .cont_bx .box:not(:last-child)::before {content: ''; position: absolute; top: -4.6rem; right: 0; width: 1px; height: 32.5rem; background: #FFC900;}
#s2 .cont_bx .box .tit {margin-bottom: 4.3rem;}
#s2 .cont_bx .box .txt {line-height: 4rem;}
#s2 .title_bx .tit {margin-bottom: 4rem;}
#s2 .title_bx .txt {line-height: 6rem; margin-bottom: 4rem;}

@media screen and (max-width: 880px) {
  #s2 {padding-bottom: 16.3rem;}
  #s2 .cont_bx {flex-direction: column; width: 37.3rem; height: auto; padding-top: 16.3rem; padding-bottom: 7.2rem; transform: translateY(-10.3rem); margin-bottom: 0;}
  #s2 .cont_bx .box {width: 100%; padding-bottom: 7.5rem; margin-bottom: 7.5rem;}
  #s2 .cont_bx .box:last-child {margin-bottom: 0; padding-bottom: 0;}
  #s2 .cont_bx .box:not(:last-child)::before {width: 32.5rem; height: 1px; top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%);}
  #s2 .cont_bx .box .tit {margin-bottom: 2.4rem;}
  #s2 .cont_bx .box .txt {font-size: 2.4rem; line-height: 3.6rem;}
  #s2 .title_bx .tit {font-size: 4.8rem; line-height: 6rem; margin-bottom: 2.4rem;}
  #s2 .title_bx .txt {font-size: 2.4rem; line-height: 3.2rem; margin-bottom: 3.5rem;}
}
/* s2 */

/* s4 */
#s4 {height: 55rem; background-image: url('../img/s4_bg.png'); background-repeat: no-repeat; background-position: center;}
#s4 .title_bx .tit {line-height: 8.8rem;}
#s4 .title_bx .tit .pc_view {display: inline-block;}

@media screen and (max-width: 880px) {
  #s4 {height: 56.3rem; background-image: url('../img/s4_bg_mo.png'); background-size: cover;}
  #s4 .title_bx .txt {margin-bottom: 3.7rem;}
  #s4 .title_bx .tit {font-size: 4.6rem; line-height: 6.6rem;}
  #s4 .title_bx .tit .pc_view {display: none;}
}
/* s4 */

/* s5 */
#s5 .swiper-slide img {width: 100%;}
/* s5 */

/* s6 */
#s6 {padding-top: 12rem;}
#s6 .title_bx {margin-bottom: 2.5rem;}
#s6 .title_bx .tit {line-height: 9.2rem;}
#s6 .text_list .type1 {right: 27.4rem; top: 16.9rem;}
#s6 .text_list .type2 {left: 29.4rem; top: 22.8rem;}
#s6 .text_list .type3 {right: 22.1rem; top: 54.9rem;}
#s6 .text_list .type4 {left: 25.3rem; top: 53.8rem;}

@media screen and (max-width: 880px) {
  #s6 {padding-top: 8.6rem;}
  #s6 .title_bx {margin-bottom: 4.9rem;}
  #s6 .title_bx .tit {font-size: 3.2rem; line-height: 4.2rem;}
  #s6 .cont_bx {flex-direction: column; align-items: center;}
  #s6 .text_list {position: static; display: flex; flex-direction: column; align-items: center;}
  #s6 .text_list>div {position: static;}
  #s6 .text_list img {width: 36.8rem;}
  #s6 .ct_img {width: 27.8rem;}
}
/* s6 */

/* s7 */
#s7 {background-image: url('../img/s7_bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
#s7 .inner {width: 155.5rem; padding: 21rem 0 22.1rem 0;}
#s7 .lf_txt {top: 8.8rem; gap: 2rem;}
#s7 .lf_txt .bar {width: 5.5rem; height: 0.2rem; background: #C9CDD2;}
#s7 .lf_txt p {letter-spacing: 0.5rem;}
#s7 .title_bx .tit {margin-bottom: 4.3rem;}

@media screen and (max-width: 880px) {
  #s7 {background-image: url('../img/s7_bg_mo.png');}
  #s7 .inner {width: 100%; padding: 20.1rem 0 13.5rem 1.5rem;}
  #s7 .lf_txt {top: 7.1rem; left: 1.5rem;}
  #s7 .title_bx {text-align: left;}
  #s7 .title_bx .tit {font-size: 6.4rem; line-height: 8.1rem; margin-bottom: 7rem;}
  #s7 .title_bx .txt {line-height: 5.5rem;}
}
/* s7 */

/* s8 */
#s8 {padding: 10.3rem 0 10.5rem 0;}
#s8 .inner {width: 155.4rem;}
#s8 .title_bx {margin-bottom: 4.3rem;}
#s8 .title_bx .tit {margin-bottom: 4.3rem;}
#s8 .title_bx .txt {line-height: 2.7rem;}
#s8 .eft_wrap {width: 146.8rem;}
#s8 .img_con {padding-bottom: 9.2rem;}
#s8 .img_con::before {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0.3rem; height: 9.4rem; background: #FF6600;}
#s8 .img_con::after {content: ''; position: absolute; bottom: -1.3rem; left: 50%; transform: translateX(-50%); width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #FF6600; z-index: 1;}
#s8 .gray_bar {width: 100%; height: 0.7rem; position: relative; overflow: hidden;}
#s8 .gray_bar::after {content: ''; position: absolute; right: 0; top: 0; height: 100%; background: #EBECEE; width: 0;}
#s8 .text_wrap {margin-bottom: 4.3rem;}
#s8 .text_box {width: 50%; text-align: center; padding-top: 3.7rem;}
#s8 .text_box .tit {margin-bottom: 1.3rem;}
#s8 .text_box .txt {margin-bottom: 1.7rem;}
#s8 .text_box .txt2 {line-height: 2.5rem;}
#s8 .check_bx {padding: 4.8rem 9.3rem 4.8rem 13rem; background: #F2F2F2; border-radius: 6.9rem; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16);}
#s8 .check_bx li {gap: 1.1rem;}
#s8 .check_bx li:not(:last-child) {margin-bottom: 3.1rem;}

/* 키프레임 정의 */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes drawLineLeftToRight {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 기본 상태: 투명하게 숨김 */
#s8 .motion_img,
#s8 .timeline_bx .text_box,
#s8 .check_bx .left_text .motion_text_img,
#s8 .check_bx .right_list li {
  opacity: 0; 
}

/* 1. 사진 모션 */
#s8.on .img_con:nth-child(1) .motion_img {
  animation: fadeInLeft 0.5s ease-out forwards;
  animation-delay: 0.5s;
}
#s8.on .img_con:nth-child(2) .motion_img {
  animation: fadeInRight 0.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* 2. 타임라인 바 모션  */
#s8 .gray_bar::after {
  left: 0;      
  right: auto;  
}
#s8.on .gray_bar::after {
  animation: drawLineLeftToRight 1.2s ease-out forwards;
  animation-delay: 1s; 
}

/* 3. 타임라인 텍스트 모션 */
#s8.on .timeline_bx .text_box {
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 2s; 
}

/* 4. 하단 체크 박스 좌측 이미지 모션 (0.9 + 0.3 = 1.2초 딜레이) */
#s8.on .check_bx .left_text .motion_text_img {
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 2.8s; 
}

/* 5. 우측 리스트 항목들 공통 애니메이션 설정 (0.5초 재생) */
#s8.on .check_bx .right_list li {
  animation: fadeInUp 0.3s ease-out forwards;
}

/* 리스트 항목 순차적 등장 (1.2초부터 0.3초씩 딜레이 중첩) */
#s8.on .check_bx .right_list li:nth-child(1) { animation-delay: 3.2s; } 
#s8.on .check_bx .right_list li:nth-child(2) { animation-delay: 3.4s; }
#s8.on .check_bx .right_list li:nth-child(3) { animation-delay: 3.6s; }
#s8.on .check_bx .right_list li:nth-child(4) { animation-delay: 3.8s; }
#s8.on .check_bx .right_list li:nth-child(5) { animation-delay: 4.1s; }

@media screen and (max-width: 880px) {
  #s8 {padding: 9.2rem 0 7.3rem 0 ;}
  #s8 .inner {width: 100%;}
  #s8 .title_bx {margin-bottom: 4rem;}
  #s8 .title_bx .tit {line-height: 6.2rem; margin-bottom: 2rem;}
  #s8 .title_bx .txt {line-height: 2.7rem;}
  #s8 .slide_bx {margin-bottom: 6.3rem;}
  #s8 .check_bx_mo {width: 100%; padding: 3.32rem 2rem 7.5rem 2rem; background: #F2F2F2; border-radius: 3.9rem;}
  #s8 .check_bx_mo>img {width: 35.4rem; margin-bottom: 1.9rem; display: block;}
  #s8 .check_bx_mo li {gap: 0.2rem; align-items: flex-start;}
  #s8 .check_bx_mo li:not(:last-child) {margin-bottom: 3.9rem;}
  #s8 .check_bx_mo li .txt {font-size: 2.2rem; font-weight: 700;}
  #s8 .check_bx_mo li img {width: 1.96rem; margin-top: 0.3rem;}
}
/* s8 */

/* s9 */
#s9 {padding-bottom: 8.8rem;}
#s9::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 44.2rem; background: #FFC900;}
#s9 .title_bx {margin-bottom: 8.8rem;}
#s9 .title_bx .tit {font-size: 3.7rem;}
#s9 .list {gap: 2rem;}
#s9 .list .box {width: 32.5rem; height: 54.5rem; border-radius: 6rem; background: #FFFFFF; box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.16); padding-top: 6.4rem;}
#s9 .list .box .num {width: 6.3rem; height: 6.3rem; border-radius: 50%; top: -3.15rem; background: #FFC900;}
#s9 .list .box .num.type2 {background: #FFA200;}
#s9 .list .box .num.type3 {background: #FF6600;}
#s9 .list .box .tit {margin: 2.9rem 0;}
#s9 .list .box .txt {line-height: 2.8rem;}

@media screen and (max-width: 880px) {
  #s9 {padding-bottom: 9.5rem;}
  #s9::before {height: 31.9rem;}
  #s9 .title_bx {margin-bottom: 6.6rem;}
  #s9 .list .box {margin: 0 auto;}
  #s9 .slide_bx img {width: 28rem;}
}
/* s9 */

/* s10 */
#s10 {padding: 18.1rem 0 10.5rem 0;}
#s10 .title_bx {margin-bottom: 6.6rem;}
#s10 .title_bx .tit {margin-bottom: 3.8rem;}
#s10 .title_bx .txt {line-height: 2.8rem;}
#s10 .slide_bx {width: 136.6rem; overflow: hidden;}
#s10 .slide_bx img {margin: 0 auto;}
#s10 .slide_bx .text_bx {width: 113.6rem; margin: 0 auto; padding: 1.3rem 0 1.1rem 0; background: #EBECEE; gap: 1.6rem;}
#s10 .slide_bx .btn {width: 1.5rem; height: 3.1rem; position: absolute; background-repeat: no-repeat; background-size: 100%;}
#s10 .slide_bx .btn.prev {background-image: url('../img/s10_prev.png'); left: 0;}
#s10 .slide_bx .btn.next {background-image: url('../img/s10_next.png'); right: 0;}
#s10 .slide_bx .page {width: 113.6rem; margin: 0 auto; display: flex; justify-content: space-between; margin-bottom: 4.1rem;}
#s10 .slide_bx .page .swiper-pagination-bullet {width: 18.6rem; height: 6.3rem; border-radius: 3rem; background: #fff; color: #FF6600; font-size: 3rem; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; box-shadow: 0 0.3rem 0.6rem rgba(0,0,0,0.16); opacity: 1;}
#s10 .slide_bx .page .swiper-pagination-bullet-active {background: #FF6600; color: #fff;}

@media screen and (max-width: 880px) {
  #s10 {padding: 14.8rem 0 8.9rem 0;}
  #s10 .title_bx {margin-bottom: 2.9rem;}
  #s10 .title_bx .tit {font-size: 4.4rem; line-height: 5.8rem; margin-bottom: 2.4rem;}
  #s10 .title_bx .txt {font-size: 1.6rem; line-height: 2.5rem;}
  #s10 .slide_bx {width: 100%;}
  #s10 .slide_bx .btn {display: none;}
  #s10 .slide_bx img {width: 100%;}
  #s10 .slide_bx .page {width: 36.7rem; flex-wrap: wrap; gap: 1.1rem 1.5rem;}
  #s10 .slide_bx .page .swiper-pagination-bullet {width: 17.6rem; height: 6rem; font-size: 2.8rem;}
}
/* s10 */

/* s11 */
#s11 {padding: 13rem 0 5rem 0; background-image: url('../img/s11_bg.png'); background-repeat: no-repeat; background-position: top center;}
#s11 .inner {width: 155.4rem;}
#s11 .left_bx {width: 50%;}
#s11 .left_bx .logo_bx {margin-bottom: 2.3rem;}
#s11 .left_bx .title_bx {margin-bottom: 2.8rem;}
#s11 .left_bx .title_bx .tit {line-height: 7.4rem; margin-bottom: 2.3rem;}
#s11 .left_bx .title_bx .txt {line-height: 3.2rem;}
#s11 .left_bx .map_bx {width: 100%; height: 48.7rem;}
#s11 .root_daum_roughmap {width: 100% !important; height: 100%;}
#s11 .root_daum_roughmap .wrap_map {height: 100% !important;}

#s11 .right_bx {width: 50%;}
#s11 .right_bx .form_wrap {width: 59rem; padding: 6.5rem 1.7rem 4.2rem 2.3rem; background: #fff; border-radius: 6rem; box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.16);}
#s11 .right_bx .form_wrap .tit {margin-bottom: 2.3rem;}
#s11 .right_bx .form_wrap .tit_bx {margin-bottom: 2.3rem; gap: 1.2rem;}
#s11 .right_bx .form_wrap .tit_bx .bar {width: 20.5rem; height: 1px; background: #707070;}
#s11 .right_bx .form_wrap .tit2 {width: max-content;}

#s11 .check_grid {display: flex; justify-content: center; gap: 2.2rem 7rem; flex-wrap: wrap; margin-bottom: 4.4rem;}
#s11 .check_item {display: flex; align-items: center; cursor: pointer;}
#s11 .check_item {width: 11.5rem;}
#s11 .check_item input {display: none;}
#s11 .check_item span {display: flex; align-items: center; font-size: 2rem; font-weight: 500; color: #51585E;}
#s11 .check_item span::before {content: ""; display: inline-block; width: 1.8rem; height: 1.6rem; margin-right: 0.5rem; background-image: url('../img/s11_check.png'); background-repeat: no-repeat; background-size: 100%;}
#s11 .check_item input:checked + span::before {background-image: url('../img/s11_check_on.png');}
#s11 .info_txt {margin-bottom: 0.8rem;}
#s11 .form_input {width: 100%; height: 3.9rem; border: 1px solid #707070; padding: 0 0.8rem; font-size: 1.9rem; margin-bottom: 1.5rem; outline: none; border-radius: 0; background: #fff;}
#s11 .form_input::placeholder {color: #7D838A;}
#s11 .agree_wrap {margin-bottom: 5.5rem;}
#s11 .check_item.agree {width: 100%;}
#s11 .check_item.agree span {font-size: 1.4rem; color: #51585E;}
#s11 .submit {display: block; width: 25.9rem; height: 7.6rem; background: #FFC900; border-radius: 3.8rem;}

@media screen and (max-width: 880px) {
  #s11 {padding: 8.9rem 0 9.1rem 0; background-image: url('../img/s11_bg_mo.png'); background-position: bottom center; background-size: 100%;}
  #s11 .inner {width: 37.7rem; flex-direction: column; gap: 6.3rem;}
  #s11 .left_bx {width: 100%;}
  #s11 .left_bx .logo_bx {margin-bottom: 3.7rem;}
  #s11 .left_bx .logo_bx img {width: 30.9rem;}
  #s11 .left_bx .title_bx {margin-bottom: 4.7rem;}
  #s11 .left_bx .title_bx .tit {font-size: 3.1rem; line-height: 3.8rem; margin-bottom: 5.2rem;}
  #s11 .left_bx .title_bx .txt {font-size: 1.9rem; line-height: 2.7rem;}
  #s11 .left_bx .map_bx {height: 23rem;}
  #s11 .right_bx {width: 100%;}
  #s11 .right_bx .form_wrap {width: 100%; padding: 5.4rem 1.1rem 4.5rem 1.2rem; border-radius: 2.9rem;}
  #s11 .right_bx .form_wrap .tit {font-size: 2.8rem; margin-bottom: 1.8rem;}
  #s11 .right_bx .form_wrap .tit_bx {margin-bottom: 3.6rem;}
  #s11 .right_bx .form_wrap .tit_bx .bar {width: 8.2rem;}
  #s11 .check_grid {gap: 2.3rem 2rem; margin-bottom: 2.9rem;}
  #s11 .check_item {width: 9.4rem;} 
  #s11 .check_item span {font-size: 1.6rem;}
  #s11 .check_item span::before {margin-right: 0.05rem; background-image: url('../img/s11_check_mo.png');}
  #s11 .check_item input:checked + span::before {background-image: url('../img/s11_check_on_mo.png');}
  #s11 .form_input {font-size: 1.6rem;}
  #s11 .agree_wrap {margin: 2.6rem 0 4.7rem 0;}
  #s11 .check_item.agree span {font-size: 1.6rem; margin: 0 auto;}
  #s11 .check_item.agree span::before {margin-right: 0.3rem;}
  #s11 .submit {width: 16.5rem; font-size: 3.3rem; border-radius: 1.7rem;}
}
/* s11 */

/* s12 */
#s12 .slide_bx {width: 50%; height: 60rem; overflow: hidden;}
#s12 .text_bx {width: 50%;}

@media screen and (max-width: 880px) {
  #s12 .flex_bx {flex-direction: column;}
  #s12 .slide_bx, #s12 .text_bx {width: 100%;}
  #s12 .slide_bx {height: 25.2rem;}
  #s12 .slide_bx img {width: 100%;}
}
/* s12 */