@font-face {font-family: 'YeogiOttaeJalnan'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff'); font-weight: normal; font-display: swap;}
@font-face {font-family: 'MoveSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/MoveSans-Light.woff2') format('woff2'); font-weight: 300; font-display: swap;}
@font-face {font-family: 'MoveSans'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2405-2@1.0/MoveSans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap;}

:root {
    --point:#ff5515; /* 오렌지 */
    --text:#43312c;
    --pink:#ff668b; /* 핑크 */
    --purple:#987bfa; /* 퍼플 */
    --green:#06B276; /* 그린 */
    --blue:#29A8E6; /* 블루 */
    --title:#ffffff;
    letter-spacing:-2%;
}
* {margin:0;padding:0;box-sizing:border-box;}

* {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;}

html {
    scroll-behavior:smooth; 
    font-size:min(1.282vw, 0.926vh);
}
body {
    font-family:'Pretendard', sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
    width:100%;
    min-width:360px;
}
img {max-width:100%;display:block;}
a {color:inherit;text-decoration:none;}
ul {list-style:none;}

.pink {color:#ff668b;}
.green {color:#06B276;}
.point {color:#ff5515;}
.purple {color:#987bfa;}

.wide {}
.mob {display:none !important;}


@media all and (max-width:780px) {
    html {font-size:min(1.218vw, 0.642vh);}
}




/* ================= HEADER ================= */
.header {
    width:100%;
    height:11rem;
    background:#fff;
    border-bottom:.2rem solid #F56400;
    position:relative;
    z-index:100;
}
.header-inner {
    max-width:1200px;
    margin:0 auto;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header a + a img {width:235px; height:40px;}

@media all and (max-width:1600px) {
    .header-inner {padding:0 2rem;}
}

@media all and (max-width:1200px) {
    .header-inner {padding:0 2rem;}
}

@media all and (max-width:780px) {
    .header {height:80px;}
    .header a + a {display:none;}
    .header-inner {justify-content:center;}
    .wide {display:none;}
    .mob {display:block !important;}
}

/* ================= SECTION1 : HERO ================= */
.section1 {
    width:100%;
    height:100%;
    background:url("/images/hero_bg-89b35f6665bf49ed321bd41ecf66d59a.webp") no-repeat center center/cover;
    min-height:calc(100vh - 10rem);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.s1-bg-bottom {
    position:absolute;
    width:100%;
    bottom:0;
}
.s1-bg-bottom img {
    display: block;
    width: 100%;
    margin-bottom: -1px;
}
.section1 .inner {
    position:relative;
    max-width:70rem;
    width:100%;
    height:100%;
    padding:6rem .2rem 10rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:0 auto;
}
.s1-logo {margin:0 auto; width:64rem;}
.s1-text {
    margin:8rem auto 0;
    text-align:left;
    align-self:flex-start;
    line-height:1.45;
    color:var(--text);
}
.s1-text p {
    font-family: 'YeogiOttaeJalnan';
    font-size:6rem;
}
.s1-text p span {
    color:var(--green);
    font-size:6rem;
}
.s1-text p.s1-slogan {
    font-size:8.6rem;
    color:var(--point);
}
.scroll-down {
    display:flex;
    flex-direction:column;
    align-items:center;
    margin:8rem 0 0;
}
.scroll-down img {
    width:6rem;
    animation:bounce 1.6s ease-in-out infinite;
}
  
@keyframes bounce {
    0%,100% {transform:translateY(0);opacity:.5;}
    50% {transform:translateY(1rem);opacity:1;}
}

@media all and (max-width:780px) {
    .section1 {
       background:url("/images/hero_bg_m-e8c4f312a6935b2c72c7ceaa725d7789.webp") no-repeat center center/cover;
       min-height:150rem;
    }
    
    .section1 .inner {
        margin-bottom:4rem;
    }
    
    .scroll-down {
        position:absolute;
        left:50%; -webkit-transform:translateX(-50%); -ms-transformX:translate(-50%); transform:translateX(-50%);
        width:60px;
        bottom:-7rem;
        margin:0;
    }
}


/* ================= SECTION2 ================= */
.section2 {
    width:100%;
    position:relative;
    background:var(--point);
    padding:12rem 0 15rem;
    overflow:hidden;
    background-color:#ff5515;
    background-image: url('/images/s2_bg1-7a55ca5204e65ae138dc998122e417e3.webp'), url('/images/s2_bg2-77d9414f916de7b2a8adeaafc9243180.webp');
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, right 94%;
}
.s2-bg-left, .s2-bg-right {
    position:absolute;
    pointer-events:none;
}
.s2-bg-left {
    left:0;
    bottom:0rem;
}
.s2-bg-right {
    right:0;
    bottom:6%;
}
.s2-bg-bottom {
    position:absolute;
    width:100%;
    bottom:0;
}

.section2 .inner {
    max-width:70rem;
    margin:0 auto;
    position:relative;
    z-index:2;
    text-align:center;
}
.s2-title {
    font-family: 'MoveSans';
    color:#FBFAF1;
    font-size:9rem;
    font-weight:700;
    line-height:1.2;
    margin-bottom:6rem;
}
.s2-title span {
    color:#FFE7B3;
     font-family: 'YeogiOttaeJalnan';
     font-size:4rem;
     line-height:1.2;
     display:block;
}
.s2-box {
    background:#fff;
    width:100%;
    padding:6rem;
    border-radius:6rem;
    box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
}
.s2-box h3 {
    font-family: 'YeogiOttaeJalnan';
    font-size:4rem;
    line-height:8rem;
    margin-bottom:1.8rem;
    color:var(--text);
    }
.s2-box h3 div {
    display:inline-block; 
    vertical-align:middle;
    width:30rem;
    height:8rem;
    line-height:7.6rem;
    border-radius:4rem;
    border:.4rem solid var(--point);
    font-family: 'YeogiOttaeJalnan';
    font-size:4rem;
    color:var(--point);
    margin:0 .5rem;
}
.s2-box  p {
    font-size:2.4rem;
    color:var(--text);
    line-height:1.3;
}
.s2-box .s2-list {
    margin:4rem 0;
    border:.6rem solid #FFE7B3;
    padding:3rem 1rem 3rem 3rem;
    border-radius:4rem;
}
.s2-box .s2-list .list {
    height:34rem;
    padding-right:2.5rem;
    overflow-y:auto;
}
.s2-box .s2-list .list li {
    line-height:5rem;
    display:flex; 
    align-items: flex-start; 
    flex-wrap: wrap;
    gap:1.5rem;
    
}
.s2-box .s2-list .list li span {
    font-size:3rem;
    font-family: 'YeogiOttaeJalnan';
}
.s2-box .s2-list .list li + li {
    margin:2rem 0 0;
}
.s2-box .s2-list .list .num {
    width:5rem;
    height:5rem;
    line-height:5rem;
    text-align:center;
    border-radius:50%;
    color:#fff;
    font-size:3rem;
    background:var(--pink);
    flex-shrink: 0;
}
.s2-box .s2-list .list .school {
    font-size:3rem;
    width:calc(100% - 20rem);
    text-align:left;
}
.s2-box .s2-list .list .cnt {
    width:12rem;
    text-align:right;
    flex-shrink: 0;
}
.s2-box .s2-list .list .cnt b {
    font-size:3rem;
    display:inline-block;
    vertical-align:middle;
    margin:0 0 .2rem;
    color:var(--pink);
}
/* 색은 목록에서의 위치가 아니라 등수를 따른다 — 동점이 있으면 둘이 어긋난다
   (DENSE_RANK라 1등이 둘이면 목록은 1,1,2인데 위치로 칠하면 두 번째 1등이 초록이 된다).
   li의 rank-N 클래스는 index.html이 rankNo로 찍는다. */
.s2-box .s2-list .list li.rank-1 .num {
    background:var(--pink);
}
.s2-box .s2-list .list li.rank-1 .cnt b {
    color:var(--pink);
}
.s2-box .s2-list .list li.rank-2 .num {
    background:var(--green);
}
.s2-box .s2-list .list li.rank-2 .cnt b {
    color:var(--green);
}
.s2-box .s2-list .list li.rank-3 .num {
    background:var(--purple);
}
.s2-box .s2-list .list li.rank-3 .cnt b {
    color:var(--purple);
}

.s2-submit {
    position:relative;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    background:var(--point);
    color:#FFE7B3;
    font-size:3.5rem;
    border-radius:5rem;
    width:58rem;
    height:10rem;
    padding:.4rem;
    font-family: 'YeogiOttaeJalnan';
    box-shadow:0rem 1rem 2rem rgba(250, 122, 27, 0.2);
    margin:0 auto;
}
.s2-submit div {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    border:.3rem solid #FFE7B3;
    width:100%;
    height:100%;
    border-radius:5rem;
    font-size:3.5rem;
}
.s2-submit span {
    font-family: 'MoveSans';
    font-weight:700;
    font-size:4rem;
    color:#fff;
    margin:.5rem 0 0 1rem;
}

.s2-submit:before {
    content:'';
    position:absolute;
    bottom:-5rem;
    right:5%;
    width:13.7rem;
    height:13.7rem;
    background:url("/images/btn_test_hand-fac47d474463174c791aedcc4b71daa5.webp") no-repeat center center/cover;
    transition: .3s;
}
.s2-submit:hover {
    top:.2rem;
}
.s2-submit:hover:before {
    bottom:-4.5rem;
    right:6%;
}

@media all and (max-width:1780px) {
    .section2 {
        background-size:30%, 30%;
    }
}

@media (hover: hover) and (pointer: fine) and (max-width: 780px) {
    .section2 {
        background-size:20%, 20%;
    }
}

@media all and (max-width:780px) {
    .simplebar-track.simplebar-vertical {
      width: 5px !important;
    }
    .section2 {
        padding:12rem 0 54.6rem;
        background-size:auto, auto;
        background-image: url('/images/s2_bg1_m-09698ac8c092ed19670e851f889e5c1c.webp'), url('/images/s2_bg2_m-c2898120ad9412d257f202fe6713660e.webp');
        background-position: left bottom, right bottom;
        background-size:50%, 50%;
    }
    .section2:before {
        content:'';
        position:absolute;
        left:0;
        bottom:-1px;
        width:100%;
        height:4rem;
        background:url(/images/frame_green_m-15d293a20f858e9c08b2b46b8e8b98e2.webp) no-repeat center bottom;
        z-index:10;
    }

    .s2-bg-bottom {
        display:none !important;
    }
    .s2-bg-right {
        right:0;
        bottom:0;
    }
    .s2-submit div {
        border:.3rem solid #FFE7B3;
        border-radius:5rem;
        font-size:3.5rem;
    }
    .s2-submit span {
        line-height:1;
    }
    .s2-submit:hover {
        top:0rem;
    }
    .s2-submit:hover:before {
        bottom:-5rem;
        right:5%;
    }
}

/* ================= SECTION3 ================= */
.section3 {
    position:relative;
    width:100%;
    height:100vh;
    min-height:114rem;
    background:#06b276;
}

.s3-bg-right {
    position:absolute;
    pointer-events:none;
    right:0;
    bottom:0;
}
.s3-bg-bottom {
    position: absolute;
    width: 100%;
    bottom: -1px;
    z-index:10;
}

.s3-scroll {
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%); -ms-transformY:translate(-50%); transform:translateY(-50%);
    right:4rem;
    font-size:2rem;
    color:#fff;
    font-family: 'YeogiOttaeJalnan';
    z-index:10;
}
.s3-scroll span {
    color:#FFE7B3;
    font-size:2rem;
}
.s3-scroll img {
    animation:bounce2 1.6s ease-in-out infinite;
    transform:rotate(90deg);
    display:inline-block;
    vertical-align:middle;
    margin:0 0 .4rem;
}
@keyframes bounce2 {
    0%,100% {transform:translateY(0); opacity:.5;}
    50% {transform:translateY(.5rem);opacity:1;}
}

.s3-sticky {
    position:sticky;
    top:0;
    width:100%;
    height:100vh;
    overflow:hidden;
}

.s3-sticky2 {
    position:absolute;
    top:50%; -webkit-transform:translateY(-50%); -ms-transformY:translate(-50%); transform:translateY(-50%);
    color:#fff;
    font-size:2rem;
    font-family: 'YeogiOttaeJalnan';
}
.s3-sticky2 span {color:#FFE7B3;}
.s3-sticky2 img {animation:bounce 1.6s ease-in-out infinite;}
.s3-nav {
    position:absolute;
    left:4rem;
    top:50%;
    transform:translateY(-50%);
    z-index:5;
}
.s3-nav ul {display:flex;flex-direction:column;gap:0rem;}
.s3-nav li {display:flex;align-items:center;gap:1rem;cursor:pointer; }
.s3-nav .bullet {
    width:1rem;
    height:1rem;
    border-radius:50%;
    background:#fff;opacity:.2;
    transition:opacity .3s;
    flex-shrink:0;
}
.s3-nav .label {
    color:#fff;
    font-size:2rem;
    font-family: 'YeogiOttaeJalnan';
    opacity:0;
    max-width:0;
    overflow:hidden;
    white-space:nowrap;
    transition:opacity .3s;
    line-height:4rem;
    letter-spacing:0;
}
.s3-nav li.active .bullet {opacity:1;}
.s3-nav li.active .label {opacity:1;max-width:22rem;}

.s3-track {
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.section3 .slide-1 .scroll-down,
.section3 .slide-2 .scroll-down {
    position:absolute;
    align-items:flex-start;
    bottom:2%;
    width:40px;
    height:80px;
    left:50%;
    margin:0;
    -webkit-transform:translateX(-50%); -ms-transformX:translate(-50%); transform:translateX(-50%);
    z-index:1000;
}
.section3 .scroll-down img {
    width:40px;
}
.section3 .slide-1 .scroll-down {display:none;}
.section3 .slide-2 .scroll-down {display:flex;}
.slide {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:100%;
    z-index:1;
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:visible;
    opacity:0;
    pointer-events:none;
    transition:opacity .7s ease;
}
.slide.active {
    opacity:1;
    pointer-events:auto;
    z-index:2;
}
.slide div[data-audience],
.slide .phone {
    margin:10rem auto 0;
    width:86rem;
    display: flex;
    text-align:center;
    justify-content:center;
    flex-wrap: wrap;
}
.slide-title {
    position:relative;
    color:var(--text);
    font-family: 'YeogiOttaeJalnan';
    line-height:1.5;
    font-size:4rem;
    margin-bottom:6.7rem;
    text-align:center;
    position: relative;
    display: inline-block;
    width:70rem;
    background: #fff;
    border-radius: 6rem;
    padding: 4rem;
    filter: drop-shadow(0rem .5rem 1rem rgba(67, 49, 44, 0.5))
        drop-shadow(0rem 6rem 6rem rgba(67, 49, 44, 0.2));
}
.slide-title.non {
    margin-bottom:4.5rem;
}
.slide-title span {
    font-size:4rem;
    color:var(--purple);
}

.slide-title::after {
   content: "";
    position: absolute;
    bottom:-2.3rem;
    left:12.3rem;
    width: 4.6rem;
    height: 3.4rem;
    background:url("/images/slide-title_tail-72e65965011a86e34c6c2c5f16af74d0.webp") no-repeat center center/cover;
    z-index:0;
}
.slide-num {
    position:absolute;
    right:3.6rem;
    top:-7rem;
    width:19rem;
    height:13rem;
    border-radius:50%;
    background:url("/images/s3_num-35866ff366994129472f37480379be6f.webp") no-repeat center center;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    color:#fff;
    font-size:3rem;
    padding:2.6rem 0 0;
}
.slide-img {position:relative;}
.slide-option {
    position:absolute; 
    top:60.6rem;
    color:#fff;
    font-size:2.5rem;
    font-family: 'YeogiOttaeJalnan';
    left:50%; -webkit-transform:translateX(-50%); 
    width:100%;
    text-align:center;
    letter-spacing:0;
}
.slide-option span {
    color:#FFE7B3;
    font-size:2.5rem;
}

.slide-2 .phone {
    margin-top:0rem;
    width:45rem;
    height:80rem;
    flex-shrink:0; /* 컨테이너가 좁아져도 크기를 절대 줄이지 않음 */
    background:#F3F2E7;
    border-radius:6rem;
    padding:2rem 0;
    border:1.1rem solid #fff;
    box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
}
.phone-screen {
    width:100%;
    height:calc(100% - 4rem);
    overflow:hidden;
    position:relative;
    border-radius:6rem;
}
.phone-screen:before {
    content:'';
    position:absolute; 
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:url("/images/shadow_top-605b0e265b15485367e676d2499f390a.webp") no-repeat center top/cover;
    z-index:2;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
}
.phone-screen.scrolled:before {
    opacity:1;
}
.phone-screen:after {
    content:'';
    position:absolute; 
    left:0;
    bottom:-.4rem;
    width:100%;
    height:100%;
    border-radius:5.5rem;
    background:url("/images/shadow_bottom-1736c7f27e75d7c03d0f22a04a50bc2b.webp") no-repeat center bottom/cover;
    z-index:2;
    opacity:1;
    pointer-events:none;
    transition:opacity .3s ease;
}
.phone-screen.end:after {
    opacity:0;
}
.phone-title {
    text-align:center;
    font-size:2rem;
    font-family: 'YeogiOttaeJalnan';
    var(--text);
    margin:0 0 2rem;
    line-height:4rem;
}
.chat-text {
    position:absolute;
    left:0; top:1.5rem;
    width:100%;
    height:164rem;
    padding:0 3rem 0 1rem;
    will-change:transform;
}
.chat-text .bubble,
.chat-text .close {
    opacity:0;
    transform:translateY(1.2rem);
    transition:opacity .4s ease, transform .4s ease;
}
.chat-text .bubble.show,
.chat-text .close.show {
    opacity:1;
    transform:translateY(0);
}
.bubble {
    position:relative;
    margin:0 0 2rem;
    padding:1rem 1.8rem;
    border-radius:1.6rem;
    font-size:2rem;
    font-weight:600;
    line-height:1.5;
    text-align:left;
    color:var(--text);
    filter: drop-shadow(0rem .3rem .3rem rgba(67, 49, 44, 0.2))
    drop-shadow(0rem 1.5rem 1.5rem rgba(67, 49, 44, 0.1));
}
.bubble.miya {
    max-width:100%;
    background:#fff;
    border-radius:1.5rem;
    margin-right:auto;
    margin-left:8rem;
}
.bubble.miya.icon {
    max-width:8rem;
    padding-top:.5rem;
    padding-bottom:.5rem;
}
.bubble.miya:before {
    content:'';
    position:absolute;
    left:-8rem; top:0;
    width:8rem; 
    height:8rem;
    background:url("/images/s3_talk_profile-dd5e79cc347d0b19e3421ff625f28704.webp") no-repeat center center/cover;
}
.bubble.miya:after {
  content: "";
  position: absolute;
  top:2rem;
  left: -5.2rem;
  width: 5.2rem;
  height: 5.8rem;
  background:#fff;
  clip-path: path('M 52 2.9 L 45.41 1.23 Q 40.56 0 43.82 3.8 L 52 13.34 Z');
}
.bubble.me {
    background:var(--blue);
    color:#fff;
    width: fit-content;
    margin-left: auto;
}
.bubble.me:after {
  content: "";
  position: absolute;
  bottom:-3rem;
  right: -5.2rem;
  width: 5.2rem;
  height: 5.8rem;
  background:var(--blue);
  clip-path: path('M 0 2.9 L 6.59 1.23 Q 11.44 0 8.18 3.8 L 0 13.34 Z');
}
.chat-text .close {
    display:block;
    width:36.8rem;
    height:7rem; 
    line-height:7rem;
    text-align:center;
    color:#fff;
    background:var(--purple);
    font-size:3rem;
    font-family: 'YeogiOttaeJalnan';
    border-radius:5rem;
    margin:4rem auto 3rem 2rem;
    letter-spacing:0;
}
.chat-text .close span {
    font-size:3rem;
    color:#FFE7B3;
}
/* 지시 1번으로 문구가 <a>로 감싸였다. 인라인 그대로면 글자 위만 눌려서
   버튼 여백을 눌렀을 때 섹션 이동이 안 된다 — 버튼 전체를 링크 영역으로 만든다. */
.chat-text .close a {display:block;}

@media all and (min-width:781px) and (max-width:1780px) {
    .s3-bg-right {
        max-width:50%;
    }
}

@media all and (max-width:780px) {
    .section3:before {
        content:'';
        position:absolute;
        left:0;
        bottom:-1px;
        width:100%;
        height:4rem;
        background:url(/images/frame_purple_m-43b6a6fb165f070b01870199c8638abe.webp) no-repeat center bottom;
        z-index:10;
    }

     .s3-sticky {
        height:100vh;
        height:100dvh; 
      }
     .s3-track {
        align-items:flex-start;
        justify-content:flex-start;
      }
    .section3 .slide-1 .scroll-down,
    .section3 .slide-2 .scroll-down {
        bottom:10%;
    }
    .section3 .slide-1 .scroll-down {display:flex;}
      .slide {
        justify-content:flex-start;
      }

    .slide div[data-audience],
    .slide .phone {
        padding:12rem 0 54rem;
        margin:0 auto;
        width:78rem;
    }
    .slide-title {
        margin-bottom:3rem;
    }
    .slide-title.non {
        margin-bottom:1.5rem;
    }
    .slide-2 .phone {
        margin:12rem 0 0;
        width:54rem;
        height:96rem;
        padding:2rem 0;
        border:1.1rem solid #fff;
        box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
    }
    .phone-title {
        font-size:3.3rem;
    }
    .chat-text .close {
        width:45.8rem;
        height:8rem; 
        line-height:8rem;
    }

    .s3-bg-right {max-width:70%;}
    .bubble {margin:0 0 3rem; font-size:2.5rem;}

    .bubble.miya {margin-left:9rem;}
    .bubble.miya:before {left:-9rem; }
    .bubble.miya:after {
        clip-path:polygon(
            100% 5%,
            87% 2%,
            78% 0%,
            84% 7%,
            100% 23%
        );
    }
    .bubble.me:after {
      bottom:-2.5rem;
    }

}

/* ================= SECTION4 ================= */
.section4 {
    width:100%;
    position:relative;
    background:var(--purple) url("/images/s4_bg-0d465c584e7cea082c2fae2e59f586a6.webp") no-repeat left top;
    padding:12rem 0;
    overflow:hidden;
}
.s4-bg-left, .s4-bg-right {
    position:absolute;
    pointer-events:none;
}
.s4-bg-left {
    left:0;
    top:40%;
    -webkit-transform:translateY(-40%); -ms-transformY:translate(-40%); transform:translateY(-40%);
}
.s4-bg-bottom {
    position: absolute;
    width: 100%;
    bottom: 0px;
}

.section4 .inner {
    max-width:700px;
    margin:0 auto;
    position:relative;
    z-index:2;
    text-align:center;
}
.s4-title {
    font-family: 'YeogiOttaeJalnan';
    color:#fff;
    font-size:4rem;
    line-height:1.5;
    margin-bottom:6rem;
}
.s4-title span {
    font-size:4rem;
    color:#FFE7B3;
}

.s4-ballon-wrap {
    position:relative;
}
.s4-ballon {
    position:relative;
    z-index:2;
    color:var(--text);
    font-family: 'YeogiOttaeJalnan';
    line-height:1.3;
    font-size:4rem;
    margin-bottom:5.6rem;
    text-align:center;
    position: relative;
    display: inline-block;
    width: 48rem;
    height:20rem;
    background: #fff;
    border-radius: 6rem;
    padding: 4.2rem .6rem 0;
    margin:0 0 34rem;
    filter:
        drop-shadow(0rem .5rem 1rem rgba(67, 49, 44, 0.5))
        drop-shadow(0rem 6rem 6rem rgba(67, 49, 44, 0.2));
}
.s4-ballon::before {
    content: "";
    position: absolute;
    top: 8.8rem;
    left: -2.5rem;
    width: 3.4rem;
    height: 4.6rem;
    background: url("/images/s4-ballon-tail-900fe24ab141e4f88f8d616913cfbae8.webp") no-repeat center center/cover;
    z-index: -1;
}
.s4-ballon-wrap::after { 
    content:'';
    position:absolute;
    bottom:0;
    left:50%;  -webkit-transform:translateX(-44%);
    width:81rem; 
    height:31rem;
    background:url("/images/s4_money-5ee43949b24ebe84e64895e0ecd29d45.webp") no-repeat center center/cover;
}
.s4-ballon span {
    font-size:4rem;
}
.s4-box {
    position:relative;
    top:-4rem;
    background:#fff;
    width:100%;
    padding:6rem 4rem;
    border-radius:6rem;
    box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
}
.s4-box h3 {
    font-family: 'YeogiOttaeJalnan';
    font-size:4rem;
    line-height:1.5;
    margin-bottom:4rem;
    letter-spacing:-0.03em;
    color:var(--text);
    }
.s4-box h3 span {
    font-size:4rem;
}
.s4-submit {
    position:relative;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    background:var(--green);
    color:#FFE7B3;
    font-size:3.5rem;
    border-radius:5rem;
    width:58rem;
    height:10rem;
    padding:.4rem;
    font-family: 'YeogiOttaeJalnan';
    box-shadow:0rem 1rem 2rem rgba(6, 178, 118, 0.2);
    margin:0 auto;
}
.s4-submit div {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    border:.3rem solid #FFE7B3;
    width:100%;
    height:100%;
    border-radius:5rem;
    font-size:3.5rem;
}
.s4-submit span {
    font-size:3.5rem;
    font-weight:700;
    color:#fff;
    margin:0 0 0 1rem;
}

.s4-submit:before {
    content:'';
    position:absolute;
    bottom:-5rem;
    right:5%;
    width:13.7rem;
    height:13.7rem;
    background:url("/images/btn_test_hand-fac47d474463174c791aedcc4b71daa5.webp") no-repeat center center/cover;
    transition: .3s;
}
.s4-submit:hover {
    top:.2rem;
}
.s4-submit:hover:before {
    bottom:-4.5rem;
    right:6%;
}

@media all and (max-width:1780px) {
    .section4 {
        background-size:30%;
    }
}
@media all and (max-width:780px) {
    .section4 {
        background-size:auto;
        background-position:left 7.4rem;
        background-image:url("/images/s4_bg_m-0249d1d62eea5fe0d18f93ba2d1e6986.webp")
    }
    .section4 .inner {
    width:70rem;
    }
    .s4-bg-left {
        left:0;
        top:7.4rem;
        -webkit-transform:translateY(0); -ms-transformY:translate(0); transform:translateY(0);
    }
    .s4-ballon-wrap {
        left:12rem;
    }
    .s4-ballon {
        width: 47.4rem;
        margin:0 0 38rem;
     }
    .s4-ballon-wrap::after { 
        bottom:-1.8rem;
        -webkit-transform:translateX(-59%);
    }
    .s4-submit:hover {
        top:0rem;
    }
    .s4-submit:hover:before {
        bottom:-5rem;
        right:5%;
    }

    .section4 {
        background-size:35%;
    }
}

  /* ================= section5 ================= */
.section5 {
    position:relative;
    overflow:hidden;
    width:100%;
    background:#ff668b;
    padding:12rem 0 20rem;
}
.s5-bg-right {
    position:absolute;
    pointer-events:none;
    right:0;
    top:0;
    z-index:0;
}
.s5-scroll {
    position:absolute;
    top:50%;
    -webkit-transform:translateY(-50%); -ms-transformY:translate(-50%); transform:translateY(-50%);
    right:4rem;
    font-size:2rem;
    color:#fff;
    font-family: 'YeogiOttaeJalnan';
    z-index:10;
}
.s5-scroll span {
    font-size:2rem;
    color:#FFE7B3;
}
.s5-scroll img {
    animation:bounce3 1.6s ease-in-out infinite;
    display:inline-block;
    vertical-align:middle;
    margin:0 0 .4rem;
}
@keyframes bounce3 {
    0%,100% {transform:translateX(0) rotate(90deg); opacity:.5;}
    50% {transform:translateX(-1rem) rotate(90deg);opacity:1;}
}
.section5 .inner {
    position:relative;
    max-width:70rem;
    margin:0 auto;
    z-index:2;
}
.dropdown {
    position:relative;
    width:100%;
    background:#fff;
    border-radius:6rem;
    height:14rem;
    overflow:hidden;
    transition:height .4s ease, border-radius .4s ease;
    margin:0 0 14rem;
    box-shadow:0rem .5rem 1rem rgba(67, 49, 44, 0.5), 0rem 6rem 6rem rgba(67, 49, 44, 0.2);
}
.dropdown.open {height:auto; border-radius:6rem;}
.dropdown-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:14rem;
    padding:0 6rem;
}
.dh-title {
    font-family: 'YeogiOttaeJalnan';
    font-size:3.5rem;
    color:var(--pink);
}
.dh-title span {
    font-family: 'MoveSans';
    font-size:4rem;
    font-weight:700;
    display:inline-block;
    margin:.3rem 0 0;
    vertical-align:middle;
}
.dh-arrow {
    display:flex;align-items:center;justify-content:center;
    transition:transform .35s ease;
    color:var(--pink);
}
.dropdown.open .dh-arrow {transform:rotate(180deg);}
.dropdown-body {
    display:flex;
    flex-direction:column;
    padding:0 6rem;
    gap:4rem;
}

.info-view {
    width:100%;
    border:.6rem solid #FFE7B3;
    padding:3rem 4rem;
    border-radius:4rem;
}
.info-view p{
    font-size:3rem;
    line-height:1.6;
    text-align:center;
    color:var(--text);
    margin:0;
    font-family: 'YeogiOttaeJalnan';
}
.info-view p + p {margin:2.4rem;}
.info-view p span.name {color:var(--pink);}
.info-view p span.ranking {
    display:inline-block; 
    vertical-align:middle;
    width:20rem;
    height:6rem;
    line-height:5.4rem;
    border-radius:4rem;
    border:.4rem solid var(--pink);
    font-family: 'YeogiOttaeJalnan';
    font-size:3rem;
    color:var(--pink);
    margin:0 .5rem;
}
.info-text {
    width:100%;
    font-size:2.4rem;
    line-height:3rem;
    color:var(--text);
    text-align:center;
    margin:0 0 6rem;
}
.info-text strong {display:block; font-weight:700;}
.info-text p span {position:relative;}
.info-text p span:after {content:''; position:absolute; left:0; display:block; width:100%; background:#ffe7b3; height:1.2rem; bottom:0; z-index:-1;}
.s5-list {
    width:100%;
    height:46.2rem;
    border:.6rem solid #FFE7B3;
    padding:3rem 1.5rem 3rem 3.5rem;
    border-radius:4rem;
}
.s5-list .list {
    height:100%;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    padding-right:3.5rem;
}

.s5-list .list p {
    width:100%; 
    height:4rem; 
    line-height:4rem; 
    background:#FFE7B3;
    font-family: 'YeogiOttaeJalnan';
    border-radius:4rem;
    text-align:center;
    letter-spacing:0;
    margin:0 0 2rem;
    font-size:2rem;
}
.s5-list .list p span {
    font-size:2rem;
    color:var(--pink);
}

.s5-list .list-item {
    display:flex;
    flex-direction:column;
    height:100%;
    gap:2rem;
}
.s5-list .list-item li {
    line-height:5rem;
    display:flex; 
    align-items: flex-start; 
    flex-wrap: wrap;
    gap:1.5rem;
}
.s5-list .list-item li span {
    font-size:3rem;
    font-family: 'YeogiOttaeJalnan';
}
.s5-list .list-item .num {
    width:5rem;
    height:5rem;
    line-height:5rem;
    text-align:center;
    border-radius:50%;
    color:#fff;
    font-size:3rem;
    background:var(--text);
    flex-shrink: 0;
}
.s5-list .list-item .school {
    font-size:3rem;
    width:calc(100% - 20rem);
    text-align:left;
}
/* 'N 명'을 칸 오른쪽에 붙인다. 폭(12rem)만 있고 정렬이 없어서 학교 이름 바로 뒤에
   붙어 있었다 — section2 목록(.s2-box .s2-list .list .cnt)과 같은 모양으로 맞춘다. */
.s5-list .list-item .cnt {
    width:12rem;
    text-align:right;
    flex-shrink: 0;
}
.s5-list .list-item .cnt b {
    font-size:3rem;
    display:inline-block;
    vertical-align:middle;
    margin:0 0 .2rem;
    color:var(--text);
}
/* section2와 같은 규칙 — 위치가 아니라 등수로 칠한다. 4등부터는 기본색(--text). */
.s5-list .list-item li.rank-1 .num {
    background:var(--pink);
}
.s5-list .list-item li.rank-1 .cnt b {
    color:var(--pink);
}
.s5-list .list-item li.rank-2 .num {
    background:var(--green);
}
.s5-list .list-item li.rank-2 .cnt b {
    color:var(--green);
}
.s5-list .list-item li.rank-3 .num {
    background:var(--purple);
}
.s5-list .list-item li.rank-3 .cnt b {
    color:var(--purple);
}

.s5-logo {
    width:64rem;
    margin:0 auto;
    text-align:center;
}
.s5-text {
    width:100%;
    margin:2rem 0 10rem;
    text-align:center;
}
.s5-text p {
    font-family: 'YeogiOttaeJalnan';
    font-size:4.5rem;
    color:#FFE7B3;
}
.cheer-wrap {
    position:relative;
}
.cheer-nav {
    position:absolute;
    left:3rem;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    color:#fff;
    flex-shrink:0;
    width:7.6rem; 
    text-align:center;
}
.cheer-nav a {
    width:3rem;
    height:3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    transition:background .15s;
}
.cheer-nav a:hover {}
.cheer-count {
    font-size:2rem;
    font-family: 'YeogiOttaeJalnan';
}
.cheer-viewport {
    width:70rem;
    margin:0 auto;
    height:39rem;
    overflow:hidden;
    position:relative;
}
.cheer-list {
    position:relative; 
    width:100%;
    transition:transform .5s ease;
}
.cheer-list li {
    width:100%;
    height:15rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 .2rem;
    opacity:.5;
    font-family: 'YeogiOttaeJalnan';
    color:#fff;
    font-size:3rem;
    line-height:1.3;
    word-break:keep-all;
    filter:blur(.15rem);
    transform:scale(.667); 
    transform-origin:center center;
    transition:opacity .4s ease, filter .4s ease, transform .4s ease;
}
.cheer-list li.active {
    opacity:1;
    filter:blur(0);
    transform:scale(1);
}
.cheer-list li span {
    display:block;
    font-size:.83em;
}

.share-row {
    position:relative;
    width:44rem;
    margin:0 auto;
    margin-top:7rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4rem;
}

.share-row a {transition: .2s;}
.share-row a:hover {animation:bounce4 .6s ease-in-out infinite;}
  
@keyframes bounce4 {
    0%,100% {transform:translateY(0);}
    50% {transform:translateY(-1rem);}
}

.share-btn {
    position:absolute;
    top:11rem;
    left:-3rem;
    width:32.2rem;
    height:8rem;
    border-radius:2rem;
    padding:1.3rem 2rem;
    background:var(--text);
    color:#fff;
    font-size:2rem;
    font-family: 'YeogiOttaeJalnan';
    line-height:1.3;
}
.share-btn::before {
    content: "";
    position: absolute;
    top:-1.2rem;
    left:1.7rem;
    width: 4.9rem;
    height: 3.5rem;
    background:url("/images/share-btn_tail-cad5eeebac977ccd5221f6a6d57ab1b8.webp") no-repeat center center/cover;
    z-index:0;
}

.share-btn span {
    font-size:2rem;
    color:#FFE7B3;
}
.share-btn .bubble-text {
    position:relative;
    z-index:1;
}

.test.result .share-btn .bubble-text {
    text-align:left;
}

@media all and (max-width:1280px) {
    .s5-bg-right.wide {display:none;}
    .s5-bg-right.mob {display:block !important;}
    .s5-bg-right {
        position:relative;
        right:auto;
        top:-9rem;
        margin:0 auto;
    }
    
    .s5-scroll {
        position:relative;
        top:-1.5rem; -webkit-transform:translateY(0%); -ms-transformY:translate(0%); transform:translateY(0%);
        right:auto;
        text-align:center;
        font-size:3rem;
        margin:0 0 1.5rem;
    }
    .s5-scroll span {
        font-size:3rem;
    }
    .s5-scroll img {
        display:none;
    }

    .cheer-nav {
        left:auto;
        top:auto;
        transform:translateY(0%);
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content: center;
        gap:2rem;
        flex-shrink:0;
        width:100%; 
        text-align:center;
        margin:6rem auto 0;
    }
    .cheer-nav a {
        margin:0 2rem;
    }
    .cheer-nav a svg {transform: scale(1.5);}
    .cheer-list li {
        font-size:3.5rem;
    }
    .cheer-list li span {
        font-size:.9em;
    }
    .cheer-count {
        font-size:3rem;
    }
   
    .share-row {
        margin-top:19rem;
    }

    .s5-bg-right {
        max-width:75%;
    }
}


/* ================= FLOATING ================= */
.btn_button {
    position:fixed;
    bottom:3rem;
    left:50%;
    margin-left:-35rem;
    width:70rem;
    z-index:11;
    display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
    opacity:0;
    visibility:hidden;
    transform:translateY(2rem);
    transition:opacity .3s ease, transform .3s ease, visibility .3s;
    pointer-events:none;
}
.btn_button.is-visible {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}
.btn_button a {
    display:block;
    width:34.5rem;
    height:10rem;
    line-height:10rem;
    text-align:center;
    font-size:3.5rem;
    color:#FFE7B3;
    border-radius:5rem;
    background:var(--text);
    font-family: 'YeogiOttaeJalnan';
    font-size:3.5rem;
    box-shadow: 0rem 1rem 2rem rgba(67,49,44,0.2);
}
.btn_button a.btn_share {}
.btn_button a.btn_test {
    color:var(--point);
    background:#fff;
}

.btn_support {
    position:fixed;
    text-decoration:none;
    top:14rem;
    right:2rem;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    z-index:101;
    transition:opacity .3s ease, visibility .3s;
}
.btn_support.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.btn_support .money {
    position:absolute;
    left:50%;
    margin-left:-43.5px;
    z-index:12;
    top:-18px;
}
.btn_support .money img {
    width:87px;
    filter: drop-shadow(0rem .5rem 1rem rgba(67, 49, 44, 0.5))
            drop-shadow(0rem 6rem 6rem rgba(67, 49, 44, 0.2));
}
.btn_support .send {
    position:relative;
    display:block;
    width:150px;
    height:150px;
    border-radius:50%;
    background:var(--point);
    color:#fff;
    font-size:20px;
    font-family: 'YeogiOttaeJalnan';
    line-height:125%;
    text-align:center;
    margin:0 0 10px;
    padding:5px;
    box-shadow: 0 1rem 2rem rgba(38,40,74,0.2);
    font-weight:normal;
}
.btn_support .send .send-text {
    display:block;
    font-size:20px;
    border:3px solid #fff;
    width:100%;
    height:100%;
    border-radius:50%;
    padding:40px 10px 10px;
}
.btn_support .send .send-text span {
    font-size:20px;
    color:#FFE7B3;
}
.btn_support .send img {
    position:absolute; 
    top:-34px;
    left:50%;
    width:167px;
    margin-left:-76px;
    transition: .2s;
}

.btn_top {
    position:fixed;
    bottom:4rem;
    right:6.2rem;
    display:flex; 
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    flex-direction:column;
    z-index:12;
    transition:opacity .3s ease, visibility .3s;
}
.btn_top a.top {
    display:flex; 
    justify-content: center; 
    align-items: center; 
    width:6rem;
    height:6rem;
    text-align:center;
    background:var(--text);
    color:#fff;
    border-radius:50%;
}
.btn_top a.top svg {
    transform:rotate(180deg);
}

@media (hover: hover) and (pointer: fine) and (max-width: 1200px) {
    .btn_support .money {
        margin-left:-37px;
    }
    .btn_support .money img {
        width:74px;
    }
    .btn_support .send {
        width:120px;
        height:120px;
        font-size:20px;
        margin:0 0 10px;
        padding:5px;
    }
    .btn_support .send .send-text {
        font-size:17px;
        line-height:1.3;
        border:.3rem solid #fff;
        padding:26px 1px 1px;
    }
    .btn_support .send .send-text span {
        font-size:17px;
    }
    .btn_support .send img {
        top:-34px;
        width:167px;
        margin-left:-76px;
    }
}

@media all and (max-width:780px) {
    .btn_support {
        top:4rem;
        right:2rem;
    }
    .btn_top {display:none;}
}



/* ================= FOOTER ================= */
.fwM {font-weight:500 !important;}
#footer {position:relative; padding:52px 40px 44px 40px; background-color:#fff; margin:0 0 120px;}
@supports (-webkit-touch-callout:none) {
 #footer.back {
  display:none;
 }
}
#footer.back {z-index:-1;}
#footer .footer_wrap {position:relative; max-width:1200px; margin:0 auto}

.footer_wrap .footer_link ul {font-size:0; line-height:0}
.footer_wrap .footer_link li {position:relative; display:inline-block; vertical-align:top; font-size:14px; line-height:20px; color:#555}
.footer_wrap .footer_link li:before {content:''; display:inline-block; width:1px; height:12px; margin:-3px 10px 0; background-color:#eee; vertical-align:middle}
.footer_wrap .footer_link li:first-child {margin-left:0}
.footer_wrap .footer_link li:first-child:before {display:none}

.footer_wrap .footer_customer {position:absolute; right:0; top:-2px; font-size:0; line-height:0}
.footer_wrap .footer_customer dl,
.footer_wrap .footer_customer dt,
.footer_wrap .footer_customer dd {display:inline-block; vertical-align:top}
.footer_wrap .footer_customer .phone {font-size:16px; line-height:24px; font-weight:500; margin-bottom:0;}
.footer_wrap .footer_customer .time {margin:2px 0 0 10px; font-size:12px; line-height:18px; color:#555}
.footer_wrap .footer_customer .link_family {margin-top:18px; text-align:right}
.footer_wrap .footer_customer .letter {display:inline-block; vertical-align:top; width:138px; margin-right:10px; text-align:center; font-size:14px; line-height:30px; font-weight:500; color:#555; border:1px solid #d9d9d9; border-radius:4px}
.footer_wrap .footer_customer .letter span {display:inline-block; padding-left:24px; line-height:20px; background:url('https://dreampost.worldvision.or.kr/images/common/ico-letter.svg') no-repeat left center}
.footer_wrap .footer_customer .family {position:relative; display:inline-block; vertical-align:top; width:180px}
.footer_wrap .footer_customer .family .js_select_btn {position:relative; display:block; text-align:left; width:100%; font-size:14px; line-height:30px; text-indent:10px; border:1px solid #555}
.footer_wrap .footer_customer .family .js_select_btn:after {content:''; position:absolute; right:8px; top:7px; width:16px; height:16px; background:url('https://dreampost.worldvision.or.kr/images/ico-footer-family.svg') no-repeat center top}
.footer_wrap .footer_customer .family.on .js_select_btn:after {transform:rotate(180deg)}
.footer_wrap .footer_customer .family ul {display:none; position:absolute; left:0; bottom:32px; width:180px; text-align:left; background-color:#fff; border:1px solid #555; border-bottom:0}
.footer_wrap .footer_customer .family.on ul {display:block}
.footer_wrap .footer_customer .family li {font-size:14px; line-height:32px; color:#888}
.footer_wrap .footer_customer .family a {display:block; padding:0 10px}
.footer_wrap .footer_customer .family a:hover {background-color:#eee}

.footer_wrap .footer_sns {display:flex; flex-wrap:wrap; justify-content:space-between; max-width:544px}
.footer_wrap .footer_sns dl {margin-top:20px}
.footer_wrap .footer_sns dt {display:inline-block; vertical-align:top; padding-right:2px; font-size:12px; line-height:32px}
.footer_wrap .footer_sns dd {display:inline-block; vertical-align:top}
.footer_wrap .footer_sns li {display:inline-block; margin-right:8px}
.footer_wrap .footer_sns a {display:block}
.footer_wrap .footer_sns a .hide {display:none;}
.footer_wrap .footer_sns .sns li a {width:32px; height:32px; background:url('https://dreampost.worldvision.or.kr/images/common/btn-sns.svg') no-repeat left top}
.footer_wrap .footer_sns .sns li:nth-child(2) a {background-position:-40px top}
.footer_wrap .footer_sns .sns li:nth-child(3) a {background-position:-80px top}
.footer_wrap .footer_sns .sns li:nth-child(4) a {background-position:-120px top}
.footer_wrap .footer_sns .sns li:nth-child(1) a:hover {background-position:left bottom}
.footer_wrap .footer_sns .sns li:nth-child(2) a:hover {background-position:-40px bottom}
.footer_wrap .footer_sns .sns li:nth-child(3) a:hover {background-position:-80px bottom}
.footer_wrap .footer_sns .sns li:nth-child(4) a:hover {background-position:-120px bottom}

.footer_wrap .footer_info {margin-top:20px}
.footer_wrap .footer_info p {font-size:12px; line-height:22px; color:#555}
.footer_wrap .footer_info br {display:none}

.footer_wrap .footer_customer .family.on {z-index:9999;}

@media screen and (max-width:1280px) {
     .footer_wrap .footer_customer dl {display:block; text-align:right;}
     .footer_wrap .footer_customer .letter {display:block; width:auto; margin:0 0 10px 0;}
}

@media screen and (max-width:1024px) {
     .footer_wrap .footer_link li:before {margin:-3px 6px 0;}
     .footer_wrap .footer_sns {flex-direction:column;}
     .footer_wrap .footer_sns .sns {margin:0;}
     .footer_wrap .footer_sns .sns {margin:20px 0 0;}
 }
 
 @media screen and (max-width:768px) {
      #footer {padding:20px 20px 40px 20px;}
     .footer_wrap .footer_link li {margin:10px 14px 0 0;}
     .footer_wrap .footer_link li:before {display:none;}
     .footer_wrap .footer_link li:first-child:before {display:none;}
     .footer_wrap .footer_customer {position:static; margin-top:20px;}
     .footer_wrap .footer_customer dl {display:inline-block; text-align:left;}
     .footer_wrap .footer_customer .phone {margin-right:4px; margin-bottom:0;}
     .footer_wrap .footer_customer .time {margin:4px 0 0 0;}
     .footer_wrap .footer_customer .link_family {margin:0;}
     .footer_wrap .footer_customer .letter {width:138px; margin:0;} /* 20231026 #9496 수정 */
     .footer_wrap .footer_customer .family {display:none;}
     .footer_wrap .footer_sns {flex-direction:inherit; max-width:566px; align-items:center;}
     .footer_wrap .footer_sns dt {overflow:hidden; position:absolute; width:0; height:0; font-size:0; line-height:0; text-indent:-50000px;}
     .footer_wrap .footer_sns dd {display:block;}
     .footer_wrap .footer_sns li {display:inline-block; margin-right:18px;}
     .footer_wrap .footer_sns a {display:block;}
     .footer_wrap .footer_sns .sns li:last-child {margin-right:0;}
     .footer_wrap .footer_sns .sns li a {width:48px; height:48px; background-size:auto 96px;}
     .footer_wrap .footer_sns .sns li:nth-child(2) a {background-position:-60px top;}
     .footer_wrap .footer_sns .sns li:nth-child(3) a {background-position:-120px top;}
     .footer_wrap .footer_sns .sns li:nth-child(4) a {background-position:-180px top;}
     .footer_wrap .footer_sns .sns li:nth-child(1) a:hover {background-position:left top;}
     .footer_wrap .footer_sns .sns li:nth-child(2) a:hover {background-position:-60px top;}
     .footer_wrap .footer_sns .sns li:nth-child(3) a:hover {background-position:-120px top;}
     .footer_wrap .footer_sns .sns li:nth-child(4) a:hover {background-position:-180px top;}
     .footer_wrap .footer_info {margin-top:20px;}
     .footer_wrap .footer_info br {display:inline;}
 }
 
/* =========================================================
   퍼블리싱 원본에 없는 규칙 — 서버 렌더링 때문에 우리가 추가한 것들.
   CSS를 새로 받을 때마다 사라지므로 파일 끝에 모아 둔다.
   ========================================================= */

/* 링크 복사 안내 토스트. 공유 버튼(share.js)과 하단 "공유하기"가 띄운다.
   style-test.css에도 같은 규칙이 있다 — 메인은 style.css만 읽어서 따로 필요하다.
   bottom은 하단 플로팅 버튼(.btn_button: bottom 3rem + 높이 10rem) 위로 올린 값이다. */
.share-toast{
    position:fixed;
    left:50%;
    bottom:16rem;
    transform:translateX(-50%);
    z-index:9999;
    padding:1.6rem 2.8rem;
    border-radius:3rem;
    background:rgba(0,0,0,.8);
    color:#fff;
    font-size:2.4rem;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease;
}
.share-toast.is-visible{
    opacity:1;
    visibility:visible;
}