@charset "UTF-8";
/**
 * Critical CSS - FCP 최적화용
 * 초기 렌더링에 필수적인 스타일만 포함
 * 이 파일은 동기 로드, common.css는 preload로 비동기 로드
 */

/* Base Styles */
html { font-size: 10px; background-color: #f9f9f9; width: 100%; overflow-anchor: none; }
html.scroll_none { overflow: hidden; }
body { position: relative; overflow-anchor: none; }

/* Preloader - 페이지 로드 중 표시 */
.ms_preloader {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    background-color: #fff;
    z-index: 9999999;
    transition: 0.5s ease-in-out;
}
.ms_preloader.off { opacity: 0; pointer-events: none; }

/* Container */
.container_wrap { background-color: #fff; margin: 0 auto; position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; }

/* CSS Variables - 모든 스타일에서 사용 */
:root {
    --vh: 100%;
    --hdH: 65px;
    --mainHdH: 120px;
    --inPd: 15px;
    --subTopMg: 23px;
    --subPd: 90px;
    --subContPd: 100px;

    /* Typography */
    --tit1: 3.4rem;
    --tit2: 3rem;
    --tit3: 2.6rem;
    --tit4: 2.1rem;
    --tit5: 1.9rem;
    --txt1: 1.7rem;
    --txt2: 1.6rem;
    --txt3: 1.4rem;
    --smTxt: 1.3rem;
    --smTxt1: 1.2rem;
    --smTxt2: 1rem;

    /* Layout */
    --mainContPd: 120px;
    --mainContM: 15px;
    --discContPd: 15px;
    --mainInW: 164rem;
    --subInW: 124rem;

    /* Colors */
    --lightTxt: #3C3C3C;
    --exTxt: #6B7B92;
    --titCol: #1664FA;
    --annTxt: #1970C6;
    --offTxt: #32353D;
    --typeTxt1: #A8ABB2;
    --typeTxt2: #4269C5;
    --grayTxt: #BDC2CD;
    --colorBlue1: #1C369A;
    --colorBlue2: #2F6BF0;
    --colorMint: #00C9CA;

    /* Tags */
    --tagBg1: #E9F5FF;
    --tagCol1: #2F6BF0;
    --tagBg2: #DCF4E4;
    --tagCol2: #15AE41;
    --tagBg3: #F3F5F7;
    --tagCol3: #00C9CA;
    --tagBg4: #002575;
    --tagCol4: #FFFFFF;

    /* Spacing */
    --titContM0: 35px;
    --titContM1: 25px;
    --titContM2: 15px;
    --contMt: 25px;
    --grayLine: #ddd;

    /* Backgrounds */
    --grayBg1: #F3F4F8;
    --grayBg2: #F8F8FB;
    --blueBg: #EBF5FF;

    --contImgTitM: 15px;
    --contImgTxtM: 5px;
    --sectMt: 70px;
    --sectPd: 70px;
    --contRowM: 15px;
    --subContPd: 50px;

    /* Graph */
    --gLegend: 15px;
    --gLabel: 15px;
    --gLabel2: 15px;
    --Ytick: 10px;
    --Xtick: 13px;

    --alertcolor: #485ece;
    --cancelcolor: #363940;
}

/* Responsive Utility Classes */
.mini_over { display: none !important; }
.fold_only { display: none !important; }
.pc_only { display: none !important; }
.phone_only { display: block !important; }
.phone_only.inline { display: inline !important; }
.phone_only.flex { display: flex !important; }
.phone_over { display: none !important; }
.mo_only { display: block !important; }
.mo_only.flex { display: flex !important; }

/* Header - Critical Layout */
#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--hdH);
    background-color: #fff;
    border-bottom-color: transparent;
    z-index: 9998;
    transition: transform 0.3s, background-color 0.3s, height 0.3s ease-in-out;
}
.main #header { height: var(--mainHdH); }
.main #header.band_banner_none { height: var(--hdH); }
#header.scroll_down { transform: translate(0%, -100%); }
#header.scroll { border-bottom: 1px solid rgba(0,0,0,0.1); }
#header.scroll_top { border-bottom-color: transparent; transform: translate(0%, 0%); }

#header > .cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--hdH);
    padding: 0 var(--inPd);
    position: relative;
    transition: 0.3s ease-in-out;
}
#header > .cont .logo { display: flex; align-items: center; height: 2.2rem; }
#header > .cont .logo img,
#header > .cont .logo svg { height: 100%; }
#header > .cont .util_wrap { display: flex; align-items: center; }
#header > .cont .ham_btn { margin-left: 2.2rem; font-size: calc(var(--txt3) * 1.8); cursor: pointer; }
#header > .cont .ham_btn .ico { display: flex; align-items: center; justify-content: center; }

#header .band_banner { display: flex; justify-content: space-between; height: 55px; position: relative; transition: 0.3s ease-in-out; overflow: hidden; }
.main #header.band_banner_none .band_banner { height: 0; }

#header .pc_nav { display: none; }
#header .network_select { display: none; }

/* Footer - Basic Layout */
#footer { margin: auto auto 0; max-width: 100%; width: 100%; }
#footer .ft_cont { padding: 20px 0 90px; background-color: #f8f8f8; }
#footer.none .ft_cont { display: none; }

/* Media Queries - PC */
@media screen and (min-width: 1240px) {
    :root {
        --hdH: 80px;
        --mainHdH: 135px;
        --inPd: 40px;
        --tit1: 4.8rem;
        --tit2: 4rem;
        --tit3: 3.2rem;
        --tit4: 2.6rem;
        --tit5: 2.2rem;
        --txt1: 1.8rem;
        --txt2: 1.6rem;
        --txt3: 1.4rem;
        --smTxt: 1.3rem;
        --smTxt1: 1.2rem;
        --sectMt: 120px;
        --sectPd: 120px;
    }

    .phone_only { display: none !important; }
    .phone_over { display: block !important; }
    .phone_over.flex { display: flex !important; }
    .mini_over { display: block !important; }
    .mini_over.flex { display: flex !important; }
    .mo_only { display: none !important; }

    #header .pc_nav { height: 100%; display: block; overflow-x: auto; max-width: 62%; padding-bottom: 1px; }
    #header .pc_nav .nav_list { display: flex; align-items: center; height: 100%; }
    #header .pc_nav .nav_list > li { height: 100%; flex-shrink: 0; }
    #header .pc_nav .nav_list > li > a {
        position: relative;
        padding: 0 1em;
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: var(--txt3);
        transition: color 0.3s ease-in-out;
    }

    #header .network_select { margin-left: 2rem; position: relative; display: block; }
    #header > .cont > .logo_box .logo { height: 2.5rem; }
    #header > .cont { width: 100%; height: var(--hdH); margin: 0 auto; }
    #header .logo_box { display: flex; align-items: center; }
}

@media screen and (min-width: 1640px) {
    #header .pc_nav .nav_list > li > a { padding: 0 1.5em; font-size: var(--txt3); }
    #header > .cont > .logo_box .logo { height: 2.8rem; }
}

@media screen and (min-width: 1840px) {
    #header .pc_nav .nav_list > li > a { font-size: var(--txt2); }
}