/* 공통 */
html.no-scroll, body.no-scroll {
  overflow: hidden;               /* 데스크톱 보조 */
  overscroll-behavior: none;      /* 모바일 바운스 억제 */
  -webkit-overflow-scrolling: auto;
 }
* {
  font-family: 'Paperlogy';
  transition: ease 0.2s all;
}
a {
  text-decoration: none;
  color: inherit;
}
.container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.bold{
  font-weight: bold;
}
.blk {
  color:#000;
}
.wht {
  color:#fff;
}
.main-color {
  color: #1CABE2;
}
.op60 {
  opacity: 0.6;
}
.flex {
  display: flex;
}
.pc {
  display: block;
}
.mo {
  display: none;
}
.swiper {
  position: relative;
}
.swiper-pagination {
  width: auto!important;
  height: 58px;
  line-height: 58px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.10);
  padding: 0 30px;
  position: initial;
}
.swiper-pagination-bullet {
  background-color: #fff;
  opacity: 1;
}
.swiper-pagination-bullet-active {
  width: 50px;
  border-radius: 10px;
}
.play_bar {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translate( -50%, 0);
  z-index: 1;
  gap: 10px ;
}
.auto_play {
  width: 58px;
  height: 58px;
  background: url("../images/auto_stop.svg") no-repeat;
  background-size: auto;
  cursor:pointer
}
.auto_play.off {
  background: url("../images/auto_play.svg") no-repeat;
}

/* 헤더 */
.header {
  padding-top: 60px;
}
.header h1 {
  display: inline-block;
}
.header h1 a img{
  width: 160px;
  height: 85px;
}

/* 메인 */
.main-section {
  width: 100%;
  height: 100%;
  position: relative;
}
.main-section .visual {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.main-section .visual .slide_common{
  background: url('../images/main_test01.png') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.main-section .visual .slide_bg01{
  background: url('../images/main_img01.jpg') no-repeat center center / cover;
}
.main-section .visual .slide_bg02{
  background: url('../images/main_img02.jpg') no-repeat center center / cover;
}
.main-section .visual .slide_bg03{
  background: url('../images/main_img03.jpg') no-repeat center center / cover;
}
.main-section .visual .slide_bg04{
  background: url('../images/main_img04.jpg') no-repeat center center / cover;
}
.main-section .contents {
  padding-bottom: 161px;
}
.main-section .contents .container {
  padding: 55px 0 0 100px ;
}
.main-section .contents .container .text-wrap p:first-child {
  font-size: 60px;
  font-weight: 250;
  color:#2D2926;
}
.main-section .contents .container .text-wrap p:nth-child(2) {
  font-size: 120px;
  color:#000;
}
.main-section .contents .container .text-wrap p.mid {
  font-size: 28px;
  margin-bottom: 16px;
  font-weight: 300;
  line-height: 48px; /* 171.429% */
  letter-spacing: -1.12px;
  color: #77777A;
}
.main-section .contents .container .text-wrap p.last {
  font-size: 21px;
  margin-bottom: 60px;
  font-weight: 300;
  letter-spacing: -0.84px;
  color: #2D2926;
}
.main-section .new_year_btn {
  background-color: #1CABE2;
  width: 440px;
  height: 152px;
  color: #fff;
  padding: 30px 40px 30px;
  font-size: 34px;
  font-weight: 400;
  line-height: 46px ;
}
.main-section .new_year_btn .flex {
  align-items: center;
  gap: 20px;
}
.main-section .new_year_btn .flex img {
  width: 22px;
  height: 22px;
}

/* section02 */
.section02 {
  padding-top: 190px; 
}
.section02 .container {
  padding-bottom: 290px;
}
.section02 .title-sticky {
  position: relative;
  text-align: center;
  transition: none !important;
  display: flex;
  align-items: center;
}
.section02 .title-sticky.on .section02_title{
  margin-bottom: 0;
  transform: translateY(33vh);
}
.pin-spacer-s02-sticky {
  text-align: center;
}
.section02_title{
  width: 100%;
  font-size: 90px;
  font-weight: 700;
  color: #000;
  margin-bottom: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  gap: 18px;
  transition: all 0.7s ease;
  will-change: transform;
}
.s02-left, .s02-right{ 
  font-weight:700; 
  display: inline-flex;
  height: 110px;
  align-items: center;
}
.s02-divider{
  display: none; /* 처음엔 숨김 */
  height:3px;
  background:currentColor;
  border-radius:2px;
  --divTarget: clamp(144px, 22vw, 360px);
  width: calc(var(--divTarget) * var(--divP, 0));
  transition:none;
  margin: 0 40px;
}

.section02 .container .title .on {
  border: 5px solid #000;
  padding: 0 5px;
}
.section02 .container .child-dream .slide_common {
  width: 100%;
  height: 660px;
  position: relative;
}
.section02 .container .child-dream .slide_common .source {
  position: absolute;
  left: 150px;
  bottom: 50px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #fff;
  opacity: 0.6;
}
.section02 .container .child-dream .contents{
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  max-width: 730px;
  /* padding: 99px 12% 160px 0; */
  padding: 99px 50px 160px 0;
  color: #fff ;
}
.section02 .container .child-dream .contents .icon {
  width: 45px;
  height: 45px;
  background-size: cover;
  margin-bottom: 30px;
}
.section02 .container .child-dream .contents .tit {
  font-size: 44px;
  font-weight: 600;
  line-height: 60px;
  margin-bottom: 15px;
}
.section02 .container .child-dream .contents p {
  font-size: 22px;
  font-weight: 400;
  line-height: 38px; 
  letter-spacing: -0.44px;
  color: #BBB7B3;
}
.section02 .container .child-dream .contents p .highlight {
  color: #fff;
  font-weight: 500;
}
.section02 .container .child-dream .slide_bg01 {
  background: url("../images/section02_img01.jpg") no-repeat;
  background-size: cover;
}
.section02 .container .child-dream .slide_bg02 {
  background: url("../images/section02_img02.jpg") no-repeat;
  background-size: cover;
}
.section02 .container .child-dream .slide_bg03 {
  background: url("../images/section02_img03.jpg") no-repeat;
  background-size: cover;
}
.section02 .container .child-dream .slide_bg04 {
  background: url("../images/section02_img04.jpg") no-repeat;
  background-size: cover;
}
.section02 .container .child-dream .slide_bg05 {
  background: url("../images/section02_img05.jpg") no-repeat;
  background-size: cover;
}
.section02 .container .child-dream .slide_bg06 {
  background: url("../images/section02_img06.jpg") no-repeat;
  background-size: cover;
}
.section02 .container .child-dream .slide_bg01 .contents .icon {
  background: url("../images/section02_icon01.svg") no-repeat;
}
.section02 .container .child-dream .slide_bg02 .contents .icon {
  background: url("../images/section02_icon02.svg") no-repeat;
}
.section02 .container .child-dream .slide_bg03 .contents .icon {
  background: url("../images/section02_icon03.svg") no-repeat;
}
.section02 .container .child-dream .slide_bg04 .contents .icon {
  background: url("../images/section02_icon04.svg") no-repeat;
}
.section02 .container .child-dream .slide_bg05 .contents .icon {
  background: url("../images/section02_icon05.svg") no-repeat;
}
.section02 .container .child-dream .slide_bg06 .contents .icon {
  background: url("../images/section02_icon06.svg") no-repeat;
}
.section02 .container .child-dream .swiper-pagination {
  background: rgba(216, 209, 202, 0.30);
}

/* section03 */
.section03 {
  min-height: 100vh;          /* 화면 채우고 */
  display: flex;              /* 중앙 정렬 */
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 16vh 0; 
}

.section03 .text_wrap {
  font-size: 130px;
  font-weight: 800;
  text-align: center;
}

.section03 .on {
  border: 5px solid  #1CABE2;
  padding: 0 5px;
}

/* section04 */
.section04 {
  transition: none;
    padding-bottom: 178px;
}
.section04 .section04__wrap {

}
.section04 .section04__wrap .inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.section04 .container .text{
  font-size: 90px;
  font-weight: 700;
  margin-bottom: 50px;
}
.section04 .container .text .on {
  border: 5px solid  #1CABE2;
  padding: 0 5px;
}
.section04 .scroll_slide{
  /* margin-top: 60px; */
  overflow: hidden;
  position: relative;
}
.section04 .wrap {
  display: flex;
  width: 230vw;
  will-change: transform;
  gap: 40px;
  margin-left: 32vw;
}

.section04 .scroll_slide img{
  height: 660px;
  width: auto;
  display: block;
}
/* 선택사항: 각 카드 가로폭 강제 (필요할 때만) */
/* .section04 .scroll_slide > div { width: 60vw; }
.section04 .scroll_slide img { width: 100%; height: auto; object-fit: cover; } */

/* section05 */
.section05 {
  position: relative;
}
.section05 .play_bar {
  bottom: 262px;
  left: 260px;
  transform: none;
}
.section05 .text {
  position: absolute;
  bottom: 100px;
  left: 260px;
  font-size: 90px;
  font-weight: 700;
  color: #FFF;
  z-index: 1;
}
.section05 .text .on {
  border: 5px solid #1CABE2;
  background: rgba(45, 41, 38, 0.50);
  padding: 0 5px;
}
.section05 .resolution .slide_common .source {
  position: absolute;
  left: 80px;
  top: 100px;
  writing-mode: vertical-rl;
  color: #fff;
  opacity: 0.6;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* section06 */
.section06 {
  padding: 120px 0;
  background-color: #374EA2;
}
.section06 .title {
  font-size: 80px;
  font-weight: 700;
  line-height: 100px; 
  letter-spacing: -3.2px;
  text-align: center;
  color: #fff;
  margin-bottom: 20px;
}
.section06 .title .border02{
  margin-right: 4px;
}
.section06 .title .on {
  border: 5px solid  #1CABE2;
  padding: 0 5px;
}
.section06 .text {
  text-align: center;
  color: #C3CAE3;
  font-size: 30px;
  font-weight: 300;
  line-height: 36px;
  letter-spacing: -0.12px;
  margin-bottom: 62px;
}
.section06 .text .highlight {
  color: #fff;
}
.section06 .with-challenge {
  position: relative;
}
.section06 .swiper-button-next:after, 
.section06 .swiper-rtl .swiper-button-prev:after,
.section06 .swiper-button-prev:after, 
.section06 .swiper-rtl .swiper-button-next:after{
  content: '';

}
.section06 .swiper-button-prev {
  width: 80px;
  height: 80px;
  background: url("../images/section06_arrow_left.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 14%;
  transform: translate(0, -50%);
  margin-top: 0;
}
.section06 .swiper-button-next {
  width: 80px;
  height: 80px;
  background: url("../images/section06_arrow_right.svg") no-repeat;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: 14%;
  transform: translate(0, -50%);
  margin-top: 0;
}
.section06 .sns_wrap {
  width: 1300px;
  margin: 0 auto;
}
.section06 .sns_wrap .tit {
  margin-top: 50px;
  margin-bottom: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid  #fff;
  padding: 30px 0;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.section06 .sns_wrap .tit::after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: url("../images/wht_arrow_right.svg") no-repeat;
  background-size: cover;
  margin-left: 30px;
}
.section06 .sns_wrap .tit:focus-visible {
  outline: 2px solid #1CABE2;
  outline-offset: 3px;
}

/* section07 */
.section07 {
  background: #F9F9F9;
  padding: 120px 0 140px 50px;
}
.section07 .container {
  width: 1400px;
}
.section07 .container .title {
  font-size: 80px;
  font-weight: 700;
  line-height: 110px;
  margin-bottom: 30px;
}
.section07 .diary__detail {
  display: flex;
  align-items: center;
  gap: 74px;
}
.section07 .diary__detail  li {
  display: flex;
  align-items: center;
  gap: 20px;
}
.section07 .diary__detail  li .cate {
  display: flex;
  width: 90px;
  padding: 3px 28px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  background: #77777A;
  font-size: 20px;
  color:#fff;
  font-weight: 400;
  letter-spacing: -0.8px;
}
.section07 .diary__detail  li .detail {
  color: #2D2926;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.88px;
  opacity: 0.6;
}
.section07 .image_wrap {
  gap: 40px;
  /* padding: 0 50px; */
  margin-top: 60px;
}
/* section08 */
.section08 {
  padding: 140px 0 120px 0;
}
.section08 .title {
  font-size: 88px;
  font-weight: 700;
  text-align: center;
}
.section08 .title span.main-color {
  color: #1CABE2;
  padding: 0 10px;
  margin: 0 5px;
}
.section08 .title span.on {
  border: 5px solid #1CABE2
}
.section08 .text {
  margin: 30px 0 40px 0;
}
.section08 .text p {
  font-size: 30px;
  font-weight: 300;
  line-height: 46px;
  letter-spacing: -0.12px;
  color: #77777A;
  text-align: center;
}
.section08 .text p .main-color {
  font-weight: 500;
}
.section08 .marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  user-select: none;
}
.section08 .marquee .marquee__track {
  display: flex;
  align-items: center;
  will-change: transform;
  transition: none;
}
.section08 .marquee .marquee__track .marquee__item {
  white-space: nowrap;
  width: 410px;
  height: 547px;
  flex-shrink: 0;
  aspect-ratio: 410/547;    
}
.section08 .sns_wrap {
  width: 1300px;
  margin: 0 auto;
}
.section08 .sns_wrap .tit {
  margin-top: 50px;
  margin-bottom: 30px;
  border-top: 1px solid #77777A;
  border-bottom: 1px solid  #77777A;
  padding: 30px 0;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #2D2926;
}
.section08 .sns_wrap .tit::after {
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: url("../images/blk_arrow_right.svg") no-repeat;
  background-size: cover;
  margin-left: 30px;
}
.section08 .sns_wrap .tit:focus-visible {
  outline: 2px solid #1CABE2;
  outline-offset: 3px;
}
.section08 .sns_wrap .notice {
  color:#77777A;
  font-size: 22px;
  font-weight: 400;
}

/* FAQ */
.section09 {
  background: #f9f9f9;
  padding-bottom: 160px;
}
.section09 .title {
  padding: 80px 0 60px 0;
  text-align: center;
  font-size: 90px;
  font-weight: 700;
  color:#2D2926;
}
.section09 .container {
  width: 1300px;
}
.section09 .container .faq__list li .faq__question {
  color:#000; 
  display:flex; 
  background:#fff; 
  font-size:25px; 
  font-weight:600;
  letter-spacing:-0.5px; 
  padding:30px; 
  border:1px solid #E8E8E8;
  position:relative; cursor:pointer;
}
.section09 .container .faq__list li:not(:last-child) .faq__question {
  border-bottom: none;
}
.section09 .container .faq__list li .Q {
  font-size:26px; font-weight:800; letter-spacing:2.6px; color:#1CABE2;
  margin:0 20px 0 30px;
}
.section09 .container .faq__list li .faq__question::after {
  content:''; display:block; width:20px; height:11px;
  background:url("../images/accordian_arrow_close.svg") repeat-x 0 0 / contain;
  position:absolute; top:50%; right:60px; transform:translate(0,-50%);
}
.section09 .container .faq__list li .faq__answer{
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    grid-template-rows .35s ease,
    opacity .25s ease,
    transform .35s ease,
    padding .35s ease;
  padding: 0 83px 0 30px;
  color:#2D2926; 
  font-size:23px; 
  font-weight:300;
  letter-spacing:-0.46px; 
  background:#f9f9f9; 
  word-break:auto-phrase;
}
.section09 .faq__answer .answer__inner{
  overflow: hidden;
  display: flex;
}
.section09 .container .faq__list li .A{
  height: 22px;
  font-size:26px; 
  font-weight:800; 
  letter-spacing:2.6px; 
  color:#1CABE2;
  margin:0 20px 0 30px; 
  line-height: 33px;
}
.section09 .container .faq__list li.open .faq__answer {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  padding: 30px 83px 30px 30px;
}
.section09 .container .faq__list li.open{  
  border:1px solid #000; 
}
.section09 .container .faq__list li.open .faq__question { 
  border:none; background:#000; color:#fff; 
}
.section09 .container .faq__list li.open .faq__question::after {
  background:url("../images/accordian_arrow_open.svg") repeat-x 0 0 / contain;
}


/* 푸터 */
footer {
  display: block;
  width: 100%;
  background-color: #2D2926;
  color: #fff;
  padding: 84px 20px 76px 20px; 
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
}

footer .logo {
  margin: 0 auto 19px auto;
  width: 317px;
  height: 41px;
}

footer .copyright {
  margin-top: 41px;
  opacity: 0.5;
}

/* floating */
.float {
  width: 440px;
  height: 152px;
  background: #1CABE2;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 9;
  font-size: 34px;
  font-weight: 400;
  line-height: 46px;
  color: #fff;
  display: block;
  transform: translateX(120%);  /* 화면 밖에서 시작 */
}
.float.mo {
  display: none;
  left: 0; right: 0; margin: 0 auto;
  transform: translateY(120%);
}
.float.is-show { 
  transform: translateX(0%)!important; 
}
.float.mo.is-show {
  transform: translateY(0%)!important;
}
.float .link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 30px 40px 30px;
}
.float .link:hover .float_book{
  top: -10px;
  height: 162px;
} 
.float .link .flex {
  align-items: center;
  gap: 20px;
}
.float .link .float_book {
  width: 135px;
  height:  122px;
  background: url("../images/floating_img.png") no-repeat;
  background-size: cover;
  position: absolute;
  right: 20px;
  top: 30px;
  transition: all .25s ease;
}

/* gsap */
/* 텍스트 테두리 그리기 공통 */
.border01, 
.border02, 
.border03,
.border04,
.border05, 
.border06 {
  position: relative;
  padding: 0 10px;
  /* 안드 합성 안정화 */
  transform: translateZ(0);
  contain: paint;               /* 페인트 범위 고정 */
  -webkit-backface-visibility: hidden;
}
.border01, .border02, .border03, .border04, .border05, .border06 {
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.border01::before,
.border02::before,
.border03::before,
.border04::before,
.border05::before,
.border06::before {
  /* 기존 background 정의는 유지하고, 위치만 강제 오버라이드 */
  background-position:
    left 0 top 0.8px,            /* top 라인 살짝 아래로 */
    right 0 calc(100% - 0.5px);  /* bottom 라인 살짝 위로 */
}

/* 기존 ::before에 4개 라인 모두 그리던 걸 → 가로 2줄만 */
.border01::before,
.border02::before,
.border03::before,
.border04::before,
.border05::before,
.border06::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  --bdc: currentColor;
  --bw: 5px;
  background:
    /* top */
    linear-gradient(var(--bdc) 0 0) left top
      / clamp(0px, calc(var(--tW,0%) - 2.5px), 100%) var(--bw) no-repeat,
    /* bottom */
    linear-gradient(var(--bdc) 0 0) right bottom
      / clamp(0px, calc(var(--bW,0%) - 2.2px), 100%) var(--bw) no-repeat;
  will-change: background-size;
  transform: translateZ(0);
}

/* 추가: 세로 2줄은 ::after로 분리(→ 퍼센트 연산 흔들림 감소) */
.border01::after,
.border02::after,
.border03::after,
.border04::after,
.border05::after,
.border06::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  --bdc: currentColor;
  --bw: 5px;
  background:
    /* right */
    linear-gradient(var(--bdc) 0 0) right top
      / var(--bw) clamp(0px, calc(var(--rH,0%) - 2.5px), 100%) no-repeat,
    /* left  */
    linear-gradient(var(--bdc) 0 0) left  bottom
      / var(--bw) clamp(0px, calc(var(--lH,0%) - 2.5px), 100%) no-repeat;
  will-change: background-size;
  transform: translateZ(0);
}

/* 색상 유지(필요 시 그대로 둠) */
.border02, .border03, .border04, .border05, .border06 { 
  --bdc: #1CABE2; 
}

.border01::before,
.border01::after,
.border02::before,
.border02::after,
.border03::before,
.border03::after,
.border04::before,
.border04::after,
.border05::before,
.border05::after,
.border06::before,
.border06::after {
  inset: 0.3px;                 /* 필요하면 1px 까지 */
  will-change: background-size;
  transform: translateZ(0);
}

/* 종료 팝업 */
.popup__container {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.2);
}
.popup__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 30px 10px;
}
.popup__modal {
  width: 100%;
  max-width: 400px;
  background: #fff;
  position: relative;
  z-index: 1 ;
  display: flex;
  flex-direction: column;
  margin: auto 0;
}
.modal__body {
  padding: 32px;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}
.modal__btn {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0 16px 32px;
}
.modal__btn button {
  flex: 1;
  max-width: 100px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #1cabe2;
  color: #1cabe2;
}
.modal__btn .btn__color {
  background: #1cabe2;
  color: #fff;
}