@charset "utf-8";
/* =========================================================
   공통 레이아웃 : 헤더 / 퀵메뉴 / TOP / 푸터 / 공통 버튼
   기준 시안 1920px, breakpoint 1280 / 1024 / 768 (+640, 480)
   ========================================================= */
:root{
    --ff-esa: 'Esamanru', 'Pretendard', sans-serif;
    --grad-main: linear-gradient(102.9deg, #002E6B 2.23%, #00B1D1 100%);
    --navy-deep: #001126;
    --navy-dk: #001C41;
    --navy-txt: #002E6B;
    --gray-txt: #8B8B8C;
    --line: #E3EBF6;
}

#Wrap{
    position: relative;
    overflow-x: clip;
}

/* 본문 바로가기 */
.skip_nav{
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1000;
    padding: 10px 20px;
    background: #000;
    color: #fff;
}
.skip_nav:focus{
    top: 0;
}

/* ---------- 헤더 ---------- */
#header{
    position: relative;
    z-index: 100;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
}
#header .hd_top{
    position: relative;
    z-index: 3; /* 언어 드롭다운이 GNB(선·그림자·메가메뉴) 위로 오도록 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 112px;
    padding: 0 22px;
    border-top: 1px solid #efefef;
}
#header .hd_logo a{
    display: block;
    font-family: var(--ff-esa);
    font-size: clamp(26px, 2.084vw, 40px);
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    letter-spacing: -.03em;
    white-space: nowrap;
}

/* 언어선택 */
#header .hd_lang{
    position: absolute;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
}
#header .hd_lang_btn{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    font-family: var(--ff-esa);
    font-size: clamp(22px, 1.823vw, 35px);
    font-weight: 500;
    line-height: 1;
    color: #000;
    letter-spacing: -.03em;
}
#header .hd_lang_btn::after{
    content: "";
    width: 1.03em;
    height: 1.03em;
    background: url(../images/common/ico_chevron.svg) center / contain no-repeat;
    transition: transform .2s;
}
#header .hd_lang.is-open .hd_lang_btn::after{
    transform: rotate(180deg);
}
#header .hd_lang_list{
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* 부모(.hd_lang)가 좁아 절대배치 목록이 그 폭에 갇혀 글자가 한 자씩 줄바꿈됨 → 내용 폭 기준 + 최소 폭 확보 */
    width: max-content;
    min-width: max(100%, 88px);
    padding: 6px 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 46, 107, .15);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
#header .hd_lang.is-open .hd_lang_list{
    visibility: visible;
    opacity: 1;
    transform: none;
}
#header .hd_lang_list a{
    display: block;
    padding: 8px 18px;
    font-family: var(--ff-esa);
    font-size: 18px;
    font-weight: 500;
    color: #333;
    text-align: center;
    white-space: nowrap;
}
#header .hd_lang_list .on a,
#header .hd_lang_list a:hover,
#header .hd_lang_list a:focus-visible{
    color: var(--navy-txt);
}

/* 포커스 아웃라인 제거 (reset.css의 button:focus 기본 아웃라인 덮어씀)
   키보드 이동 시에는 아웃라인 대신 색으로 표시 */
#Wrap button:focus{
    outline: none;
}
#header .hd_lang_btn:focus-visible{
    color: var(--navy-txt);
}
#header .hd_menu_btn:focus-visible > span{
    background: var(--navy-txt);
}

/* 모바일 메뉴 버튼 */
#header .hd_menu_btn{
    display: none;
}

/* GNB */
#header .gnb{
    position: relative;
    z-index: 2;
    border-top: 1px solid #efefef;
}
#header .gnb .depth1{
    display: flex;
    justify-content: center;
    gap: clamp(40px, 7.3vw, 140px);
}
#header .gnb .depth1 > li{
    position: relative;
}
#header .gnb .depth1 > li > a{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 97px;
    font-family: var(--ff-esa);
    font-size: clamp(19px, 1.3vw, 25px);
    font-weight: 300;
    color: #000;
    letter-spacing: -.03em;
    white-space: nowrap;
}

/* 드롭다운(메가메뉴): 메뉴에 올리면 전체 패널 + 전 메뉴의 하위 노출, 올린 메뉴 열만 강조 */
#header .gnb::after{
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 252px;
    background: #fff;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #ebebeb;
    box-shadow: 0 6px 10px rgba(0, 0, 0, .06);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s;
}
#header .gnb .depth2{
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    z-index: 1;
    width: 213px;
    height: 251px;
    padding: 32px 0;
    text-align: center;
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s, visibility .2s, background-color .2s;
}
#header .gnb .depth2 a{
    display: block;
    padding: 12px 10px;
    font-family: var(--ff-esa);
    font-size: 17px;
    font-weight: 300;
    line-height: 23px;
    color: #555;
    letter-spacing: -.03em;
    white-space: nowrap;
    transition: color .2s;
}
#header .gnb:hover::after,
#header .gnb:focus-within::after,
#header .gnb:hover .depth2,
#header .gnb:focus-within .depth2{
    visibility: visible;
    opacity: 1;
}
#header .gnb .depth1 > li:hover .depth2,
#header .gnb .depth1 > li:focus-within .depth2{
    background: #004ea2;
}
#header .gnb .depth1 > li:hover .depth2 a,
#header .gnb .depth1 > li:focus-within .depth2 a{
    color: #fff;
}
#header .gnb .depth2 a:hover,
#header .gnb .depth2 a:focus-visible{
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 모바일 전체메뉴 스크롤 영역 : PC에서는 레이아웃에 영향 없음 */
#header .gnb_body{
    display: contents;
}
/* 모바일 전체메뉴 전용 행사 정보 */
#header .gnb_info{
    display: none;
}
/* 전체메뉴 열림 시 본문 스크롤 잠금 */
html.is-menu-lock{
    overflow: hidden;
}

/* ---------- 인터랙션 공통 : 글자 마스크 등장 (메인·서브 타이틀) ---------- */
/* 글자 마스크 등장 : 단어 단위로 가리고(overflow) 글자가 아래에서 올라옴 — 위아래 여백으로 글자 끝 잘림 방지 */
.split_word{
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .1em 0 .14em;
    margin: -.1em 0 -.14em;
}
.split_char{
    display: inline-block;
}
/* 그라데이션 글자(background-clip:text)는 통째로 올라옴 */
.split_whole{
    display: inline-block;
}

/* ---------- 공통 버튼 (라운드) ---------- */
.btn_round{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 53px;
    padding: 0 8px 0 23px;
    font-family: var(--ff-esa);
    font-size: clamp(18px, 1.3vw, 25px);
    font-weight: 500;
    line-height: 1;
    color: #fff;
    letter-spacing: -.03em;
    white-space: nowrap;
    background: var(--grad-main);
    border-radius: 50px;
    transition: box-shadow .25s, transform .25s;
}
/* <button>에도 같은 모양 (기본 테두리 제거) */
button.btn_round{
    border: 0;
    cursor: pointer;
}
.btn_round .ico{
    display: flex;
    flex-shrink: 0;
    width: 37px;
    height: 37px;
    transition: transform .25s;
}
.btn_round .ico img{
    width: 100%;
    height: 100%;
}
.btn_round.ver_white{
    color: var(--navy-txt);
    background: #fff;
}
.btn_round:hover,
.btn_round:focus-visible{
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 46, 107, .3);
}
/* 라인형 : 흰 바탕 + 남색 테두리 */
.btn_round.ver_line{
    color: var(--navy-txt);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--navy-txt);
}
.btn_round.ver_line:hover,
.btn_round.ver_line:focus-visible{
    color: var(--navy-txt);
    box-shadow: inset 0 0 0 1px var(--navy-txt), 0 6px 18px rgba(0, 46, 107, .3);
}
.btn_round.ver_white:hover,
.btn_round.ver_white:focus-visible{
    color: var(--navy-txt);
}
.btn_round:hover .ico,
.btn_round:focus-visible .ico{
    transform: rotate(45deg);
}

/* ---------- 퀵메뉴 ---------- */
/* PC·태블릿: 시안처럼 비주얼 영역 우측 상단에 배치(스크롤 시 컨텐츠를 가리지 않음) / 768↓: 하단 고정 바 */
.quick{
    position: absolute;
    top: 279px;
    right: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}
.quick_dday{
    display: flex;
    align-items: center;
    gap: 18px;
    height: 104px;
    padding: 0 37px 0 34px;
    background: #f0f3f4;
    border-radius: 20px 0 0 20px;
    white-space: nowrap;
}
.quick_dday .txt{
    font-family: var(--ff-esa);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    color: #000;
    letter-spacing: -.03em;
}
.quick_dday .num{
    /* 카운팅 중 글자 폭이 흔들리지 않도록 고정폭 숫자 */
    font-variant-numeric: tabular-nums;
    font-family: var(--ff-esa);
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    letter-spacing: .1em;
}
.quick_btns{
    display: flex;
    gap: 11px;
    padding-right: 37px;
}
.quick_btn{
    display: flex;
    align-items: center;
    gap: 9px;
    height: 55px;
    padding: 0 16px 0 14px;
    font-family: var(--ff-esa);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    color: #000;
    letter-spacing: -.03em;
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 3px 7px rgba(0, 46, 107, .2);
    transition: transform .2s, box-shadow .2s;
}
.quick_btn .ico{
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 7px;
    background: var(--grad-main);
}
.quick_btn .ico img{
    width: 20px;
    height: 20px;
}
.quick_btn.ver_blue{
    color: #fff;
    background: var(--grad-main);
    /* 투명 테두리 아래로 그라데이션이 반복되어 끝에 남색 줄이 보이지 않도록 테두리 영역까지 채움 */
    background-origin: border-box;
    border-color: transparent;
}
.quick_btn.ver_blue .ico{
    background: #fff;
}
.quick_btn:hover,
.quick_btn:focus-visible{
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 46, 107, .28);
}

/* TOP */
.btn_top{
    position: fixed;
    right: 56px;
    bottom: 40px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 5px 13px rgba(0, 46, 107, .2);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s, visibility .25s;
}
.btn_top.is-show{
    visibility: visible;
    opacity: 1;
    transform: none;
}
.btn_top img{
    width: 48px;
    height: 48px;
}

/* ---------- 푸터 ---------- */
#footer{
    position: relative;
    z-index: 1;
    background: var(--navy-deep);
    border-radius: 30px 30px 0 0;
    color: #fff;
}
#footer .ft_inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 58px 20px 60px;
    text-align: center;
}
#footer .ft_tit{
    font-family: var(--ff-esa);
    font-size: clamp(26px, 2.35vw, 45px);
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
    letter-spacing: -.03em;
    opacity: .5;
}
#footer .ft_logos{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px 35px;
    margin-top: 33px;
}
#footer .ft_logos img{
    width: auto;
    height: 42px;
}
#footer .ft_info{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
    margin-top: 46px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
}
#footer .ft_info span + span::before{
    content: "|";
    display: inline-block;
    margin: 0 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    vertical-align: 2px;
}
#footer .ft_copy{
    margin-top: 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, .6);
}


/* =========================================================
   반응형
   ========================================================= */
@media screen and (max-width: 1280px) {

    #header .hd_top{
        height: 90px;
    }
    #header .gnb .depth1 > li > a{
        height: 76px;
    }

    .quick{
        top: 200px;
        gap: 10px;
    }
    .quick_dday{
        gap: 12px;
        height: 76px;
        padding: 0 24px;
        border-radius: 16px 0 0 16px;
    }
    .quick_dday .txt{
        font-size: 22px;
    }
    .quick_dday .num{
        font-size: 42px;
    }
    .quick_btns{
        gap: 8px;
        padding-right: 24px;
    }
    .quick_btn{
        gap: 7px;
        height: 46px;
        padding: 0 12px 0 10px;
        font-size: 17px;
        border-radius: 12px;
    }
    .quick_btn .ico{
        width: 25px;
        height: 25px;
    }
    .quick_btn .ico img{
        width: 17px;
        height: 17px;
    }

    .btn_top{
        right: 30px;
    }

}/*E:1280*/


@media screen and (max-width: 1024px) {

    /* 헤더: 로고 + 언어 + 햄버거, 메뉴는 펼침 */
    #header{
        position: sticky;
        top: 0;
    }
    #header .hd_top{
        justify-content: flex-start;
        height: 70px;
        padding: 0 24px;
    }
    #header .hd_logo a{
        font-size: 22px;
    }
    #header .hd_lang{
        right: 76px;
    }
    #header .hd_lang_btn{
        font-size: 20px;
    }
    #header .hd_lang_list a{
        font-size: 16px;
    }
    #header .hd_menu_btn{
        position: absolute;
        top: 50%;
        right: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        background: none;
        transform: translateY(-50%);
    }
    #header .hd_menu_btn > span{
        display: block;
        height: 2px;
        background: #000;
        border-radius: 2px;
        transition: transform .45s cubic-bezier(.4, 0, .3, 1), background-color .3s, width .3s;
    }
    /* 햄버거 → X : 위·아래 선이 가운데로 모이며 교차, 가운데 선은 가로로 접힘 */
    #header .hd_menu_btn > span:nth-child(2){
        width: 70%;
        margin-left: auto;
    }
    #header.is-menu-open .hd_menu_btn > span{
        background: #fff;
    }
    #header.is-menu-open .hd_menu_btn > span:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    #header.is-menu-open .hd_menu_btn > span:nth-child(2){
        transform: scaleX(0);
    }
    #header.is-menu-open .hd_menu_btn > span:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    #header.is-menu-open .hd_menu_btn:focus-visible > span{
        background: #7fe3f5;
    }

    /* 메뉴 열림 : 헤더(로고·언어·버튼)가 전체메뉴 배경 위로 흰색 전환 */
    #header .hd_top,
    #header .hd_logo a,
    #header .hd_lang_btn{
        transition: color .3s, border-color .3s;
    }
    #header .hd_lang_btn::after{
        transition: transform .2s, filter .3s;
    }
    #header.is-menu-open .hd_top{
        border-top-color: transparent;
    }
    #header.is-menu-open .hd_logo a,
    #header.is-menu-open .hd_lang_btn{
        color: #fff;
    }
    #header.is-menu-open .hd_lang_btn::after{
        filter: invert(1);
    }

    /* 전체메뉴 : 버튼 위치에서 원형으로 퍼지며 화면 전체를 덮음 (--menu-x/y : 버튼 중심, JS) */
    #header .gnb{
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        padding-top: 70px;
        background: radial-gradient(120% 60% at 100% 0%, rgba(0, 177, 209, .35) 0%, rgba(0, 177, 209, 0) 60%), linear-gradient(165deg, #002E6B 0%, #001C41 55%, #001126 100%);
        border-top: 0;
        overflow: hidden;
        clip-path: circle(0px at var(--menu-x, calc(100% - 40px)) var(--menu-y, 35px));
        visibility: hidden;
        transition: clip-path .8s cubic-bezier(.4, 0, .3, 1), visibility 0s linear .8s;
    }
    #header.is-menu-open .gnb{
        clip-path: circle(150% at var(--menu-x, calc(100% - 40px)) var(--menu-y, 35px));
        visibility: visible;
        transition: clip-path .8s cubic-bezier(.4, 0, .3, 1), visibility 0s;
    }
    /* 스크롤은 헤더 아래 영역에서만 → 메뉴가 로고·닫기 버튼 밑으로 겹쳐 지나가지 않음 (상단 경계는 부드럽게 흐려짐) */
    #header .gnb .gnb_body{
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-mask-image: linear-gradient(transparent, #000 20px);
        mask-image: linear-gradient(transparent, #000 20px);
    }
    /* 메뉴 열림 시 헤더 하단 구분선 */
    #header.is-menu-open .hd_top{
        box-shadow: inset 0 -1px rgba(255, 255, 255, .12);
    }
    #header .gnb .depth1{
        flex-direction: column;
        gap: 0;
        padding: 16px 24px 28px;
        counter-reset: gnb;
    }
    /* 메뉴 항목 : 열릴 때 아래에서 차례로 등장 (--i : 순서, JS) / 닫힐 때는 즉시 사라짐 */
    #header .gnb .depth1 > li,
    #header .gnb .gnb_info{
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .2s, transform .2s;
    }
    #header.is-menu-open .gnb .depth1 > li,
    #header.is-menu-open .gnb .gnb_info{
        opacity: 1;
        transform: none;
        transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
        transition-delay: calc(.3s + var(--i, 0) * .07s);
    }
    #header .gnb .depth1 > li + li{
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    #header .gnb .depth1 > li > a{
        display: flex;
        align-items: baseline;
        gap: 12px;
        height: auto;
        padding: 20px 0 14px;
        font-size: 28px;
        font-weight: 500;
        color: #fff;
        counter-increment: gnb;
    }
    #header .gnb .depth1 > li > a::before{
        content: counter(gnb, decimal-leading-zero);
        font-size: 13px;
        font-weight: 500;
        color: #00B1D1;
        letter-spacing: .05em;
    }
    /* 모바일: 메가메뉴 패널 대신 하위메뉴를 칩 목록으로 노출 */
    #header .gnb::after{
        display: none;
    }
    #header .gnb .depth2,
    #header .gnb:hover .depth2,
    #header .gnb:focus-within .depth2,
    #header .gnb .depth1 > li:hover .depth2,
    #header .gnb .depth1 > li:focus-within .depth2{
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 8px;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0 0 20px 31px;
        text-align: left;
        background: none;
        transform: none;
        visibility: visible;
        opacity: 1;
    }
    #header .gnb .depth2 a,
    #header .gnb .depth1 > li:hover .depth2 a,
    #header .gnb .depth1 > li:focus-within .depth2 a{
        padding: 7px 14px;
        font-size: 15px;
        line-height: 1.3;
        color: rgba(255, 255, 255, .8);
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 20px;
        transition: color .2s, background-color .2s, border-color .2s;
    }
    #header .gnb .depth2 a:hover,
    #header .gnb .depth2 a:focus-visible{
        color: #fff;
        background: #00B1D1;
        border-color: #00B1D1;
        text-decoration: none;
    }
    /* 하단 행사 정보 */
    #header .gnb .gnb_info{
        display: block;
        margin-top: auto;
        padding: 24px 24px calc(32px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    #header .gnb .gnb_info_list{
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
    }
    #header .gnb .gnb_info_list > div{
        display: flex;
        gap: 14px;
        font-size: 15px;
        line-height: 1.4;
        color: #fff;
    }
    #header .gnb .gnb_info_list dt{
        flex-shrink: 0;
        font-weight: 500;
        color: #00B1D1;
    }
    #header .gnb .gnb_info_list dd{
        margin: 0;
        color: rgba(255, 255, 255, .85);
    }

    .quick{
        top: 110px;
    }
    .quick_dday{
        height: 60px;
        padding: 0 18px;
    }
    .quick_dday .txt{
        font-size: 18px;
    }
    .quick_dday .num{
        font-size: 32px;
    }
    .quick_btns{
        padding-right: 18px;
    }
    .quick_btn{
        height: 40px;
        font-size: 16px;
    }

    #footer .ft_inner{
        padding: 48px 24px 50px;
    }
    #footer .ft_logos img{
        height: 34px;
    }
    #footer .ft_info{
        margin-top: 36px;
    }

}/*E:1024*/


@media screen and (max-width: 768px) {

    /* 퀵메뉴: 하단 고정 바 */
    .quick{
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 12px rgba(0, 46, 107, .12);
    }
    .quick_dday{
        gap: 8px;
        height: auto;
        padding: 0;
        background: none;
    }
    .quick_dday .txt{
        font-size: 16px;
    }
    .quick_dday .num{
        font-size: 26px;
        letter-spacing: .05em;
    }
    .quick_btns{
        gap: 6px;
        padding-right: 0;
    }
    .quick_btn{
        gap: 6px;
        height: 40px;
        padding: 0 10px 0 8px;
        font-size: 16px;
        border-radius: 10px;
    }
    .quick_btn .ico{
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }
    .quick_btn .ico img{
        width: 16px;
        height: 16px;
    }

    .btn_top{
        right: 16px;
        bottom: 80px;
        width: 50px;
        height: 50px;
        border-radius: 13px;
    }
    .btn_top img{
        width: 36px;
        height: 36px;
    }

    .btn_round{
        height: 46px;
        padding: 0 6px 0 18px;
        font-size: 17px;
    }
    .btn_round .ico{
        width: 32px;
        height: 32px;
    }

    #footer{
        border-radius: 20px 20px 0 0;
    }
    #footer .ft_inner{
        padding: 40px 20px 110px;
    }
    #footer .ft_tit{
        font-size: 22px;
        word-break: keep-all;
        text-wrap: balance;
    }
    #footer .ft_logos{
        gap: 16px 22px;
        margin-top: 24px;
    }
    #footer .ft_logos img{
        height: 28px;
    }
    #footer .ft_info{
        flex-direction: column;
        gap: 6px;
        margin-top: 28px;
    }
    #footer .ft_info span + span::before{
        display: none;
    }
    #footer .ft_copy{
        margin-top: 14px;
        font-size: 14px;
        word-break: keep-all;
    }

}/*E:768*/

@media screen and (max-width: 640px) {

    #header .hd_top{
        height: 60px;
        padding: 0 16px;
    }
    #header .hd_logo a{
        font-size: 17px;
    }
    #header .hd_lang{
        right: 62px;
    }
    #header .hd_lang_btn{
        font-size: 17px;
    }
    #header .hd_menu_btn{
        right: 8px;
    }
    #header .gnb{
        padding-top: 60px;
    }
    #header .gnb .depth1{
        padding: 12px 16px 24px;
    }
    #header .gnb .depth1 > li > a{
        font-size: 24px;
    }
    #header .gnb .gnb_info{
        padding-left: 16px;
        padding-right: 16px;
    }

}/*E:640*/

@media screen and (max-width: 480px) {

    /* 로고: 두 줄로 균형 있게 */
    #header .hd_logo{
        max-width: calc(100% - 120px);
    }
    #header .hd_logo a{
        font-size: 16px;
        line-height: 1.25;
        white-space: normal;
        word-break: keep-all;
        text-wrap: balance;
    }
    .quick_dday .txt{
        display: none;
    }
    .quick_btn{
        font-size: 15px;
    }

}/*E:480*/