@media (hover: hover) and (pointer: fine) {
  .section08 .sns_wrap .tit:hover {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #000;
    color: #fff;
  }
  .section08 .sns_wrap .tit:hover::after {
    background: url("../images/wht_arrow_right.svg") no-repeat;
    background-size: cover;
  }
  .section06 .sns_wrap .tit:hover {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    color: #374EA2;
  }
  .section06 .sns_wrap .tit:hover::after {
    background: url("../images/blue_arrow_right.svg") no-repeat;
    background-size: cover;
  }
}
@media (hover: none) and (pointer: coarse) {
  .section08 .sns_wrap .tit {
    -webkit-tap-highlight-color: transparent;
  }
  .section08 .sns_wrap .tit:active {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #000;
    color: #fff;
  }
  .section08 .sns_wrap .tit:active::after{
    background: url("../images/wht_arrow_right.svg") no-repeat;
    background-size: cover;
  }
  .section06 .sns_wrap .tit:active {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background-color: #fff;
    color: #374EA2;
  }
  .section06 .sns_wrap .tit:active::after {
    background: url("../images/blue_arrow_right.svg") no-repeat;
    background-size: cover;
  }
}
/* 데스크탑 중간 화면 (1920px 이상) */
@media (min-width: 1920px) {

}
@media (max-width: 1700px) {

}
@media (max-width: 1600px) {
  .pc {
    display: none;
  }
  .mo {
    display: block;
  }
  .header {
    padding-top: 30px;
  }
  .header h1 a img{
    margin-left: 20px;
    width: 80px;
    height: 43px;
  }
  .swiper-pagination {
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    align-items: center;
    display: flex
;
  }
  .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
  }
  .swiper-pagination-bullet-active {
    width: 30px;
    border-radius: 6.479px;
  }
  .main-section {
    overflow: hidden;
    height: 100vh;
  }
  .main-section .contents {
    padding-bottom: 0;
  }
  .main-section .contents .container {
    padding: 0;
  }
  .main-section .contents .container .text-wrap {
    width: 78%;
    margin: 47px auto 0 auto;
  }
  .main-section .contents .container .text-wrap p {
    width:  auto;
  }
  .main-section .contents .container .text-wrap p:first-child {
    font-size: 26px;
    letter-spacing: -1.04px;
  }
  .main-section .contents .container .text-wrap p:nth-child(2) {
    font-size: 54px;
  }
  .main-section .contents .container .text-wrap p.mid {
    font-size: 16px;;
    margin-bottom: 10px;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: -0.64px;
  } 
  .main-section .contents .container .text-wrap p.last {
    font-size: 13px;
    font-weight: 300;
    padding-bottom: 330px;
    letter-spacing: -0.52px;
  }
  .main-section .new_year_btn {
    width: 100%;
    height: 100px;
    padding: 20px 0 20px 34px;
    font-size: 22px;
    line-height: 30px;
    position: absolute;
    bottom: 1px;
    z-index: 9;
  }
  .main-section .visual .slide_bg01{
    background: url('../images/main_img01.jpg') no-repeat 80% / cover;
  }
  .main-section .visual .slide_bg02{
    background: url('../images/main_img02.jpg') no-repeat 80% / cover;
  }
  .main-section .visual .slide_bg03{
    background: url('../images/main_img03.jpg') no-repeat 80% / cover;
  }
  .main-section .visual .slide_bg04{
    background: url('../images/main_img04.jpg') no-repeat 80% / cover;
  }

  .section06 .sns_wrap {
    width: 100%;
    padding: 0 20px;
  }

  /* section02 */
  .section02 {
    padding-top: 70px;
  }
  .section02 .title-sticky.on .section02_title{
    transform: translateY(22vh);
  }
  .section02 .container {
    padding: 0 20px;
  }
  .section02_title {
    font-size: 45px;
    line-height: 65px;
    flex-wrap: wrap;
    /* letter-spacing: -2.9px; */
  }
  .s02-left, .s02-right{ 
    height: 55px;
  }
  .section02_title .mo {
    display: none;
  }
  .section02 .container .title .on {
    border: 3px solid #000;
    padding: 0 5px;
  }
  .section02 .container .child-dream .contents {
    width: 38%;
    top:50%;
    transform: translate(0, -50%);
  }
  .section02 .container .child-dream .contents .tit {
    font-size: 22px;
    line-height: 32px;
  }
  .section02 .container .child-dream .contents p {
    font-size: 12px;
    line-height: 22px;
  }
  
  /* .section03 */
  .section03 .text_wrap { 
    font-size: 60px;
    line-height: 85px;
  }
  .section03 .mo {
    display: none;
  } 

  /* section04 */
  .section04 {
    padding-bottom: 0;
  }
  .section04 .container {
    padding: 0 20px;
  }
  .section04 .container .text {
    font-size: 45px;
    line-height: 65px;
    letter-spacing: -1.8px;
    margin-bottom: 30px;
  }
  .section04 .image__wrap {
    margin-bottom: 67px;
    overflow: hidden;
  }

  .section04 .image__wrap .img01 {
    padding-left: 20px;
    margin-bottom: 30px;
    float: right;
  }
  .section04 .image__wrap .img02 {
    padding-right: 20px;
    float: left;
  }


  /* section05 */
  .section05 .play_bar {
    left: 20px;
    bottom: 220px;
  }
  .section05 .text {
    font-size: 45px;
    line-height: 65px;
    letter-spacing: -1.8px;
    left: 20px;
    bottom: 70px;
  }
  .section05 .resolution  img.pc {
    display: block;
  }
  .section05 .resolution  img.mo {
    display: none;
  }
  .section05 .resolution .slide_common .source {
    position: absolute;
    left: auto;
    top: 30px;
    right: 20px;
    writing-mode: vertical-rl;
    color: #fff;
    opacity: 0.6;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.2px;
  }

  /* section06 */
  .section06 {
    padding: 70px 0;
  }
  .section06 .title {
    font-size: 45px;
    line-height: 63px;
    letter-spacing: -1.8px;
    margin-bottom: 12px;
  }
  .section06 .text {
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.072px;
    padding: 0 20px;
    margin-bottom: 50px;
  }
  .section06 .sns_wrap .tit {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 18px 0;
    font-size: 18px;
  }
  .section06 .sns_wrap .tit::after {
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
  .section06 .with-challenge .pc {
    display: block;
  }
  .section06 .with-challenge .mo {
    display:none;
  }

  /* section07 */
  .section07 {
    padding: 70px 0 90px 0;
  }
  .section07 .container {
    width: 100%;
    padding: 0 20px;
  }
  .section07 .container .title {
    font-size: 42px;
    line-height: 55px; 
    margin-bottom: 20px;
  }
  .section07 .diary__detail {
    display: block;
  }
  .section07 .diary__detail li {
    margin-bottom: 14px;
    gap: 14px;
    align-items: flex-start;
  }
  .section07 .diary__detail li .cate {
    width: 65px;
    padding: 4px 20px;
    font-size: 15px;
    line-height: 16px;
    letter-spacing: -0.6px;
  }
  .section07 .diary__detail li .detail {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.64px;
  }
  .section07 .image_wrap {
    padding: 0 20px;
    margin-top: 40px;
    gap: 10px;
  }
  .section07 .image_wrap.mo div {
    margin-bottom: 20px;
  }
  .section07 .image_wrap.mo img{
    margin:  0 auto;
  }
  /* section08 */
  .section08 {
    padding: 70px 0 70px 0;
  }
  .section08 .container {
    padding: 0 20px;
  }
  .section08 .container .title {
    font-size: 45px; 
  }
  .section08 .container .title .mo {
    display: none;
  }
  .section08 .sns_wrap .tit {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 18px 0;
    font-size: 18px;
  }
  .section08 .sns_wrap .tit::after {
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
  .section08 .text {
    margin: 20px 0 40px 0;
  }
  .section08 .container .text p{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.064px;
  }
  .section08 .marquee .marquee__track .marquee__item {
    width: 200px;
    height: 270px;
  }
  .section08 .sns_wrap {
    width: 100%;
    padding: 0 20px;
  }
  .section08 .sns_wrap .notice {
    font-size: 12px;
  }

  /* FAQ */
  .section09 {
    padding-bottom: 70px;
  }
  .section09 .title {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: -1.6px;
    padding: 60px 0 30px 0;
  }
  .section09 .container {
    width: 100%;
    padding: 0 20px;
  }
  .section09 .container .faq__list li .faq__question {
    padding: 24px 40px 24px 20px;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: -0.34px;
  }
  .section09 .container .faq__list li .faq__answer {
    font-size: 15px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: -0.3px;
  }
  .section09 .container .faq__list li.open .faq__answer {
    padding: 30px 53px 30px 30px;
  }
  .section09 .container .faq__list li .Q {
    font-size: 19px;
    letter-spacing: 1.9px;
    margin: 0 10px 0 0;
  }
  .section09 .container .faq__list li .A {
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 1.9px;
    margin: 0 10px 0 0;
  }
  .section09 .container .faq__list li .faq__question::after {
    width: 18px;
    height: 9px;
    right: 20px;
  }

  /* footer */
  footer {
    height: 426px;
    font-size: 12px;
    padding: 44px 20px 60px 20px
  }

  footer .logo {
    width: 240px;
    height: 31px;
  }

  /* floating */
  .float { 
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    font-size: 22px;
    line-height: 30px;
  }
  .float.mo { 
    display: block;
  }
  .float .link {
    max-width: 78%;
    /* padding: 20px 0 20px 34px; */
    padding: 20px 0 20px 0;
    margin: 0 auto;
  }
  .float .link:hover {
    overflow: visible;
  }
  .float .link:hover .float_book {
    height: 111px;
    background-size: cover;
  }
  .float .link .float_book {
    /* width: 116px; */
    width: 98px;
    height: 82px;
    top: 18px;
    right: 20px;
  }
.border01::before,
.border02::before,
.border03::before,
.border04::before,
.border05::before,
.border06::before {
  --bw: 3px;                   /* 선 두께: 필요시 클래스별 오버라이드 가능 */
}

/* 추가: 세로 2줄은 ::after로 분리(→ 퍼센트 연산 흔들림 감소) */
.border01::after,
.border02::after,
.border03::after,
.border04::after,
.border05::after,
.border06::after {
  --bw: 3px;
}
}

/* 데스크탑 작은 화면 (1440px 이하) */
@media (max-width: 1440px) {
  .section02 .title-sticky.on .section02_title{
    transform: translateY(20vh);
  }
}

/* 태블릿 가로 화면 (1280px 이하) */
@media (max-width: 1280px) {

  .s02-divider {
    margin: 0;
    margin-left: 10px;
  }
}

/* 태블릿 세로 화면 (1024px 이하) */
@media (max-width: 1024px) {
  .main-section .contents .container .text-wrap {
    width: auto;
    margin: 47px 20px 0 20px;
  }
  .float .link {
    max-width: none;
    padding: 20px 0 20px 34px;
    margin: 0 auto;
  }
  .section02 .title-sticky.on .section02_title{
    transform: translateY(25vh);
  }
  .main-section .visual {
    height: 100vh;
  }
  .main-section .visual .slide_bg01{
    background: url('../images/mo_main_img01.jpg') no-repeat bottom / cover;
  }
  .main-section .visual .slide_bg02{
    background: url('../images/mo_main_img02.jpg') no-repeat bottom / cover;
  }
  .main-section .visual .slide_bg03{
    background: url('../images/mo_main_img03.jpg') no-repeat bottom / cover;
  }
  .main-section .visual .slide_bg04{
    background: url('../images/mo_main_img04.jpg') no-repeat bottom / cover;
  }
  .section02 .container .child-dream .contents {
    width: 30%;
    transform: none;
  }
  .section02 .container .child-dream .contents {
    width: 100%;
  }
  .section02 .container .child-dream .contents .tit {
    font-size: 22px;
    line-height: 32px;
  }
  .section02 .container .child-dream .contents p {
    font-size: 12px;
    line-height: 22px;
  }
  .section02 .container .child-dream .contents {
    right: auto;
    top: auto;
    bottom: 0;
    left: 20px;
    padding: 99px 50px 90px 0;
  }
  .section02 .container .child-dream .slide_common .source {
    font-size: 8px;
    writing-mode: vertical-rl;
    letter-spacing: 0.16px;
    left: auto;
    bottom: auto;
    right: 20px;
    top:30px;
  }
  .section02 .play_bar {
    transform: none;
    left: 20px;
  }
  .section02 .container .child-dream .contents .icon {
    width: 25px;
    height: 25px;
    background-size: cover!important;
    margin-bottom: 25px;
  }
}

/* 모바일 가로 화면 (768px 이하) */
@media (max-width: 768px) {
  .section02_title {
    gap: 10px;
  }
  .section02 .container .child-dream .slide_bg01 {
    background: url("../images/mo_section02_img01.jpg") no-repeat;
    background-size: cover;
  }
  .section02 .container .child-dream .slide_bg02 {
    background: url("../images/mo_section02_img02.jpg") no-repeat;
    background-size: cover;
  }
  .section02 .container .child-dream .slide_bg03 {
    background: url("../images/mo_section02_img03.jpg") no-repeat;
    background-size: cover;
  }
  .section02 .container .child-dream .slide_bg04 {
    background: url("../images/mo_section02_img04.jpg") no-repeat;
    background-size: cover;
  }
  .section02 .container .child-dream .slide_bg05 {
    background: url("../images/mo_section02_img05.jpg") no-repeat;
    background-size: cover;
  }
  .section02 .container .child-dream .slide_bg06 {
    background: url("../images/mo_section02_img06.jpg") no-repeat;
    background-size: cover;
  }
  .section02 .title-sticky.on .section02_title{
    transform: translateY(15vh);
  }
  .section03 {
    padding: 21vh 0 20px;
    letter-spacing: -2.5px;
  }
  .section03 .mo {
    display: block;
  }
  .section03 .float__left{
    float: left;
  }
  .section03 .float__right {
    float: right;
  }
  .section05 .resolution  img.pc {
    display: none;
  }
  .section05 .resolution  img.mo {
    display: block;
  }
  .section06 .swiper-button-prev {
    width: 40px;
    height: 40px;
    left: 20px;
  }
  .section06 .swiper-button-next {
    width: 40px;
    height: 40px;
    right: 20px;
  }
  .section06  .play_bar {
    bottom: 20px;
  }
  .section08 .container .title .mo {
    display: block;
  }
  .section08 .container .title .mo_float_left{
    float: left;
  }
  .section08 .container .title .mo_float_right{
    float: right;
  }
  .section07 .image_wrap div {
    margin-bottom: 20px;
  }
  .section07 .image_wrap div:last-child{
    margin-bottom: 0;
  }
  .section06 .with-challenge .pc {
    display: none;
  }
  .section06 .with-challenge img.mo {
    display: block;
    width: 100%;
  }
  .border01, .border02, .border03, .border04 {
    padding: 0 7px;
  }

  .modal__body {
    padding: 32px 16px 20px;
    font-size: 13px;
  }
  .modal__btn button {
    font-size: 13px;
  }
}

@media (max-width: 564px) {
  .s02-divider {
    min-width: 144px;
    display: block!important;
  }
}
@media (max-width: 407px) {
  .s02-left {
    text-align: left;
  }
  .section02 .title-sticky.on .section02_title{
    transform: translateY(5vh);
  }
  .section03 {
    height: 100vh;
  }
  .section03 .text_wrap {
    padding-top: 20vh;
  }
  
}
@media (max-width: 375px) {
  .section02 .title-sticky.on .section02_title{
    transform: translateY(10vh);
  }
}