*, *::before, *::after { box-sizing: border-box; }
html { text-size-adjust: 100%; font-size: 16px; font-weight: 400; }

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, time, mark, audio, video { margin: 0; padding: 0; }

body { color: #333; background-color: #fff; }
img { border: 0; border-style: none; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
button, input, select, optgroup, textarea { margin: 0; font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { border: 0; }
legend { color: #000000; }
address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; line-height: 1; }
a { color: inherit; text-decoration: none; background-color: transparent; }

main { display: block; }
abbr[title] { border-bottom: none; text-decoration: underline; }
@supports (text-decoration-style: dotted) { abbr[title] { text-decoration: underline dotted; } }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, [type="button"], [type="reset"], [type="submit"] { appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
progress { vertical-align: baseline; }
textarea { overflow: auto; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { appearance: none; }
::-webkit-file-upload-button { appearance: button; font: inherit; }
details { display: block; }
template { display: none; }
[hidden] { display: none; }

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

.annual_warp {position: relative;}
.annual_warp > .inner {max-width: 720px;    margin: 0 auto;   position: relative;}

.section-title {text-align: center;height: 100vh;display: flex;align-items: center;justify-content: center;}
.section-title .text {font-family: 'GmarketSansMedium';font-size:45px;font-weight: 700;text-align: center;}
.section-title .word {opacity: 1;}

.section-scroll {display: flex;justify-content: center;max-width:720px;margin: 0 auto;overflow-y: hidden;position: relative;}
.section-scroll .column {display: flex;flex-direction: column;}
.section-scroll .image-box {width: 100%;background: #ccc;display: flex;align-items: center;justify-content: center;font-size: 24px;font-weight: bold;}
.section-scroll img {width: 100%;}
.section-scroll .absolute-box {position: absolute;top:10px;left:20px;color:#fff;z-index: 10;font-family: 'GmarketSansMedium'}
.section-scroll .absolute-box .txt1 {font-size: 28px;font-weight: 600;}
.section-scroll .absolute-box .txt2 {font-size: 22px;font-family: 'Pretendard-Regular'}

.green {color:#94aa0d;}


.swiper-button-next, .swiper-button-prev {color:#000}
h2.ss {margin:40px 0 40px}

.section-compare { max-width: 720px; margin: 0 auto; padding: 50px 0px 20px; }
.annual_warp h2 { font-family: 'GmarketSansMedium'; font-size: 38px; font-weight: 700; text-align: left; line-height: 1.3em; padding-left:20px;}
.section-compare .txt-box { font-family: 'Pretendard-Regular'; font-size: 25px; text-align: left; margin: 30px 0; position: relative;height: 170px;font-family: 'Pretendard-Regular';}
.section-compare .txt-box .step1, .section-compare .txt-box .step2 {position: absolute;left:20px;top:0;line-height: 1.5em;}
.txt-box .step2 {color:#94aa0d}

.comparison-slider.bg-ab::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3) url('/assets/images/annual_report/2025/comparison_guide.png') no-repeat center center;
    z-index: 10;
    opacity: 1;
    transition: opacity 2s ease;
}

.comparison-slider.bg-ab.fade-out::after {
    opacity: 0;
}

.section-compare .slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:50px; height:50px; background:#fff url('/assets/images/annual_report/2025/arrow.png') no-repeat center center; border-radius: 50%; background-size: 30px auto;box-shadow: 0 0 10px rgba(148, 170, 13, 0.6);animation: pulse-glow 0.8s infinite ease-in-out;}
.comparison-slider {position: relative;     width: 100%;     max-width: 720px;  height: 500px;   overflow: hidden;     user-select: none; }
.comparison-slider img {   object-fit: cover;     display: block;}
.before-image {position: absolute;    top: 0;    left: 0;    height: 100%;    width: 100%;}
.after-image  {position: absolute;    top: 0;    right: 0;    height: 100%;    width: 100%;}
.before-image {overflow: hidden;    z-index: 2;    width:75%;}
.after-image {z-index: 1;}
.after-image img {position: absolute;right:0;}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(148, 170, 13, 0.4),
        0 0 10px rgba(148, 170, 13, 0.6),
        0 0 15px rgba(148, 170, 13, 0.8);
    }
    50% {
        box-shadow: 0 0 10px rgba(148, 170, 13, 0.6),
        0 0 20px rgba(148, 170, 13, 0.8),
        0 0 30px rgba(148, 170, 13, 1);
    }
}

@media (min-width: 768px) {
    .comparison-slider {height: 700px;}
    .comparison-slider img {width: 620px;height: 700px;}
}

@media (min-width: 580px) and (max-width: 767px) {
    .comparison-slider {height: 690px;}
    .comparison-slider img {width: 612px;height: 100%;}
}

@media (min-width: 460px) and (max-width: 579px) {
    .comparison-slider {height: 560px;}
    .comparison-slider img {width: 500px;height: 100%;}
}

@media (max-width: 459px) {
    .comparison-slider {height: 470px;}
    .comparison-slider img {width: 420px;height: 100%;}
}

/*.section-compare .slider-handle {width: 7px;height: 100%; position: absolute;  top: 50%; left:75%; transform: translate(-50%, -50%); background: white; border: 3px solid #fff; cursor: ew-resize; box-shadow: 0 0 20px rgba(0,0,0,0.3); }*/
.section-compare .slider-handle {position: absolute;    top: 0;    left: 75%;    width: 7px;    height: 100%;    background-color: #fff;    z-index: 3;    cursor: ew-resize;}
.handle-cursor {    position: absolute;    top: 50%;    left: -10px;    width: 20px;    height: 20px;    background-color: #fff;    border: 2px solid #000;    border-radius: 50%;    transform: translateY(-50%);}
html, body {
    scroll-behavior: auto; /* 기본값으로 설정 */
    overflow-x: hidden;
}

.txt-arrow {color: #515050;font-family: 'Pretendard-Regular';font-size: 17px;text-align: center;margin: 100px 0 10px;}

.section-swiper { max-width: 720px; margin: 0 auto; padding:40px 20px 20px; }
.section-swiper .swiper-container {position: relative;max-width: 720px;overflow: hidden;margin: 0 auto;margin-top: 20px;}
.section-swiper .swiper-slide {width: 100%;max-width: 720px;}
.section-swiper .swiper-slide img {width: 100%;}

.swiper-slide .txt-box {height:150px;box-sizing: border-box;padding:20px;display: flex;flex-direction: column;justify-content: space-between;}
.swiper-slide .txt-box > p {font-family: 'Pretendard-Regular';color: #fff;}



.swiper-slide .txt-box.bg1 {background: #ac3ec7}
.swiper-slide .txt-box.bg2 {background: #3ea946}
.swiper-slide .txt-box.bg3 {background: #66312a}
.swiper-slide .txt-box.bg4 {background: #2b5aa6}
.swiper-slide .txt-box.bg5 {background: #f78123}
.swiper-slide .txt-box.bg6 {background: #7a9026}
.swiper-slide .txt-box.bg7 {background: #ec7ba5 }
.swiper-slide .txt-box .txt01 {font-size: 15px;font-weight: 400;}
.swiper-slide .txt-box .txt02 {font-size: 18px;line-height: 1.5em;}
.swiper-slide .txt-box .txt03 {font-size: 22px;font-weight: 700;}

.swiper-slide .txt-box .btn-more {position: absolute;bottom: 20px;right: 20px;width: 30px;height: 30px;background: url('/assets/images/annual_report/2025/more.png') no-repeat center center;background-size:30px 30px;}

.swiper-pagination {position: relative;margin-top: 20px;}
.swiper-pagination-bullet {width: 8px;height: 8px;margin: 0 4px;}
.swiper-pagination-bullet-active {background: #6c5f58;}
.swiper-slide .img {line-height: 0;width: 100%;}

.section-bottom { max-width: 720px; margin: 0 auto; padding:40px 0px 0px; text-align: center;position: relative;}
.section-bottom .txt-box {margin:40px 0;}
.section-bottom .txt-box > p {font-size:25px;line-height: 1.5em;font-family: 'Pretendard-Regular';}
.section-bottom .txt1 {color:#101010;}
.section-bottom .txt2 {margin-top:30px;color:#94aa0d;}
.section-bottom .btns img {width: 100%;}

.fixed-btns .fixed1{position: fixed;left: calc(50% + 360px + -90px);z-index: 1000;}
.fixed-btns .fixed2 {position: fixed;left: calc(50% + 360px + -110px);z-index: 1000;}

.fixed-btns .fixed1 {top: 2%;}
.fixed-btns .fixed2 {top: 70%;}

.fixed-btns .fixed1 img {width:70px;cursor: pointer;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 50%;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);cursor: pointer;transition: all 0.2s ease-in-out;    border-radius: 50%;    box-shadow: 0 0 10px rgba(148, 170, 13, 0.6);}
.fixed-btns .fixed2 img {width:80px;cursor: pointer;aspect-ratio: 1 / 1;object-fit: cover;border-radius: 50%;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);cursor: pointer;transition: all 0.2s ease-in-out;    border-radius: 50%;    box-shadow: 0 0 10px rgba(148, 170, 13, 0.6);}

.fixed-btns .fixed1 img:hover, .fixed-btns .fixed2 img:hover {box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);transform: scale(1.05);}
.section-compare {pointer-events: auto;}

@media (max-width: 767px) {
    :root {
        --swiper-navigation-size: 24px
    }
    .section-title .text {font-size:24px;}
    .annual_warp h2 {font-size: 27px; }
    .section-compare .txt-box {font-size:15px;}
    .txt-arrow {margin: 30px 0 10px;font-size:15px}
    .fixed-btns .fixed1 img, .fixed-btns .fixed2 img {width:55px;}
    .section-bottom .txt-box > p {font-size:20px;}

    .section-scroll .absolute-box .txt1 {font-size: 17px;font-weight: 600;}
    .section-scroll .absolute-box .txt2 {font-size: 15px;font-family: 'Pretendard-Regular'}

    .fixed-btns .fixed1, .fixed-btns .fixed2 {
        left: auto;
        right: 16px;
    }
    .fixed-btns .fixed1 {
        top: 2%;
        bottom: 120px;
        height: 60px;
    }
    .fixed-btns .fixed2 {
        top: auto;
        bottom: 19%;
    }

    .section-compare .txt-box {height: 100px}


    .comparison-slider.bg-ab::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3) url('/assets/images/annual_report/2025/comparison_guide.png') no-repeat center center;
        background-size:100% auto;
        z-index: 10;
        opacity: 1;
        transition: opacity 2s ease; /* ← 스르륵 효과 */
    }


}

.popup {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 1000;overflow: auto;}
.popup.active {display: flex;justify-content: center;align-items: center;}
.popup-content {background: #fff;padding:60px 25px 20px;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);transform: scale(0.8);opacity: 0;transition: transform 0.3s ease, opacity 0.3s ease;max-width: 90%;position: relative;        }
.popup.active .popup-content {transform: scale(1);  opacity: 1;}
.popup-content img {width: 100%;max-width:400px;}

.close-btn {font-size:28px;position: absolute;right:20px;top:10px;}
.wrap-audio {height: 100vh;background: rgba(0, 0, 0, 0.5) url('/assets/images/annual_report/2025/wrap-audio.png') no-repeat;width: 100%;position: absolute;left:0;height: 100%;;z-index: 99; opacity: 1; transition: opacity 1s ease;background-size:100% auto;}

.Scroll {position: fixed; bottom: 10px; left:50%; transform: translate(-50%,0%) scale(1); z-index: 100;}
.Scroll p {font-family: 'Pretendard-Regular';font-size: 14px; margin-top: 20px;}
.mouse {
    background: #ffffff linear-gradient(transparent 0%, transparent 50%, #000000 50%, #000000 100%);
    position: relative;
    width: 52px;
    height: 88px;
    border-radius: 100px;
    background-size: 100% 200%;
    -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}
.mouse:before, .mouse:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.mouse:before {
    width: 46px;
    height: 82px;
    background-color: #ffffff;
    border-radius: 100px;
}
.mouse:after {
    background-color: #000000;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    -webkit-animation: trackBallSlide 5s linear infinite;
    animation: trackBallSlide 5s linear infinite;
}

@-webkit-keyframes colorSlide {
    0% {
        background-position: 0% 100%;
    }
    20% {
        background-position: 0% 0%;
    }
    21% {
        background-color: #ffffff;
    }
    29.99% {
        background-color: #000000;
        background-position: 0% 0%;
    }
    30% {
        background-color: #ffffff;
        background-position: 0% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    51% {
        background-color: #ffffff;
    }
    59% {
        background-color: #000000;
        background-position: 0% 0%;
    }
    60% {
        background-color: #ffffff;
        background-position: 0% 100%;
    }
    80% {
        background-position: 0% 0%;
    }
    81% {
        background-color: #ffffff;
    }
    90%, 100% {
        background-color: #000000;
    }
}

@keyframes colorSlide {
    0% {
        background-position: 0% 100%;
    }
    20% {
        background-position: 0% 0%;
    }
    21% {
        background-color: #ffffff;
    }
    29.99% {
        background-color: #000000;
        background-position: 0% 0%;
    }
    30% {
        background-color: #ffffff;
        background-position: 0% 100%;
    }
    50% {
        background-position: 0% 0%;
    }
    51% {
        background-color: #ffffff;
    }
    59% {
        background-color: #000000;
        background-position: 0% 0%;
    }
    60% {
        background-color: #ffffff;
        background-position: 0% 100%;
    }
    80% {
        background-position: 0% 0%;
    }
    81% {
        background-color: #ffffff;
    }
    90%, 100% {
        background-color: #000000;
    }
}
@-webkit-keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    6% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    14% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    15%, 19% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    30% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    36% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    44% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    45%, 49% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    60% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    66% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    74% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    75%, 79% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    88%, 100% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
}
@keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    6% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    14% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    15%, 19% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    30% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    36% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    44% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    45%, 49% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    60% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    66% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    74% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    75%, 79% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    88%, 100% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
}
@-webkit-keyframes nudgeMouse {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(8px);
    }
    30% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(8px);
    }
    90% {
        transform: translateY(0);
    }
}
@keyframes nudgeMouse {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(8px);
    }
    30% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(8px);
    }
    90% {
        transform: translateY(0);
    }
}
@-webkit-keyframes nudgeText {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(2px);
    }
    30% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(2px);
    }
    90% {
        transform: translateY(0);
    }
}
@keyframes nudgeText {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(2px);
    }
    30% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(2px);
    }
    60% {
        transform: translateY(0);
    }
    80% {
        transform: translateY(2px);
    }
    90% {
        transform: translateY(0);
    }
}
@-webkit-keyframes colorText {
    21% {
        color: #4e5559;
    }
    30% {
        color: #ffffff;
    }
    51% {
        color: #4e5559;
    }
    60% {
        color: #ffffff;
    }
    81% {
        color: #4e5559;
    }
    90% {
        color: #ffffff;
    }
}
@keyframes colorText {
    21% {
        color: #4e5559;
    }
    30% {
        color: #ffffff;
    }
    51% {
        color: #4e5559;
    }
    60% {
        color: #ffffff;
    }
    81% {
        color: #4e5559;
    }
    90% {
        color: #ffffff;
    }
}

.play-btn {cursor: pointer;z-index: 101;}
.play-btn img {width: 100%;}
.audio-player {display: none;}