@charset "utf-8";

/* ════════════════════════════
   1280px
════════════════════════════ */
@media screen and (max-width: 1280px) {

    /* 퀵메뉴 */
    #quick { right: 12px; }
    .quick-item { width: 64px; height: 64px; border-radius: 12px; }
    .quick-item .q-icon img { width: 28px; }
    .quick-item .q-label { font-size: 10px; }

}

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

    /* 퀵메뉴 */
    #quick { right: 8px; gap: 6px; }
    .quick-item { width: 58px; height: 58px; border-radius: 10px; gap: 4px; }

}

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

/* 헤더 */
.hd-top { height: 70px; padding: 0 4%; }

/* 모바일에서도 전화번호 표시 */
.hd-contact { display: flex; align-items: center; gap: 6px; }
.hd-contact .icon img { width: 32px; }
.hd-contact .txt .label { display: none; }  /* 라벨은 공간 절약 위해 숨김 */
.hd-contact .txt .tel { font-size: 17px; font-weight: 700; }
.hd-contact .txt .tel a {
    color: #02213d;
    text-decoration: none;
}

    /* GNB - 햄버거 버튼 */
    .gnb-hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 1100;
        background: none;
        border: none;
        padding: 4px;
    }
    .gnb-hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #02213d;
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
    }
    .gnb-hamburger.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .gnb-hamburger.on span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .gnb-hamburger.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* GNB - 모바일 드로어 */
    .gnb-wrap { position: relative !important; box-shadow: none !important; }
    .gnb { display: none; }



    .gnb-mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1000;
    }
    .gnb-mobile-overlay.on { display: block; }

    .gnb-drawer {
        display: block;
        position: fixed;
        top: 0; right: -280px;
        width: 280px;
        height: 100%;
        background: #02213d;
        z-index: 1050;
        overflow-y: auto;
        transition: right 0.35s cubic-bezier(0.22,1,0.36,1);
        padding-top: 60px;
    }
    .gnb-drawer.on { right: 0; }

    .gnb-drawer .gnb {
        display: block;
        width: 100%;
        margin: 0;
    }
    .gnb-drawer .gnb > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 52px;
        padding: 0 24px;
        font-size: 1em;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .gnb-drawer .gnb > li > a::after { display: none; }
    .gnb-drawer .gnb > li > a .arr {
        font-size: 0.8em;
        opacity: 0.5;
        transition: transform 0.3s;
    }
    .gnb-drawer .gnb > li.open > a .arr { transform: rotate(90deg); }

    /* 서브메뉴 아코디언 */
    .gnb-sub-col {
        flex: none;
        width: 100%;
        padding: 0;
        border-right: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.22,1,0.36,1);
        background: rgba(0,0,0,0.2);
    }
    .gnb-drawer .gnb > li.open .gnb-sub-col { max-height: 400px; }
    .gnb-sub-col a {
        justify-content: flex-start;
        padding: 0 36px;
        height: 44px;
        font-size: 0.88em;
        border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    /* 기존 데스크탑 풀다운 숨김 */
    .gnb-fulldown { display: none !important; }

    /* 드로어 닫기 버튼 */
    .gnb-drawer-close {
        position: absolute;
        top: 16px; right: 16px;
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        color: rgba(255,255,255,0.7);
        font-size: 22px;
        cursor: pointer;
        background: none;
        border: none;
    }
    .gnb-drawer-close:hover { color: #fff; }

    /* 히어로 */
    .main-vis { height: 380px; }

    /* 섹션 */
    .main-sec { padding: 60px 0; }
    .sec-head h2 { font-size: 28px; }
    .sec-head .en { font-size: 0.95em; }

    /* 푸터 */
    #footer { padding: 40px 0; }
    .ft-inner { gap: 24px; }
    .ft-info span { padding: 0 10px; }

    /* 서브 */
    .sub_contents { margin: 50px 0; }
    .sub_title { margin-bottom: 50px; }
    .sub_title h2 { font-size: 28px; }

}

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

    /* 헤더 */
    .hd-top { height: 60px; }
    .hd-contact .txt .tel { font-size: 17px; }
    .hd-contact .txt .label { font-size: 12px; }
    .hd-contact .icon img { width: 40px; }
    .hd-logo img { width: 130px; }

    /* 히어로 */
    .main-vis { height: 280px; }
    .main-vis-inner h2 { margin-bottom: 20px; }

    /* 섹션 */
    .main-sec { padding: 46px 0; }
    .sec-head { margin-bottom: 28px; }
    .sec-head h2 { font-size: 22px; }
    .sec-head .en { font-size: 0.85em; margin-bottom: 18px; }

    /* 푸터 */
    .ft-info { line-height: 1.8; font-size: 0.82em; }
    .ft-info span { display: block; padding: 0; }
    .ft-info span::after { display: none; }
    .ft-copy { font-size: 0.8em; }

    /* 서브 */
    .sub_contents { margin: 36px 0; }
    .sub_title { margin-bottom: 36px; }
    .sub_title h2 { font-size: 22px; }

/*
    .hd-contact .txt { display: none; }
    .hd-contact .icon { 
        background: #02213d; 
        border-radius: 50%; 
        padding: 8px;
    }
    .hd-contact .icon img { width: 20px; }
*/

}

/* ════════════════════════════
   375px
════════════════════════════ */
@media screen and (max-width: 375px) {

    /* 공통 wrap */
    .wrap { width: 94%; }

    /* 헤더 */
    .hd-contact { gap: 5px; }
    .hd-contact .icon img { width: 35px; }
    .hd-contact .txt .tel { font-size: 15px; }
    .hd-contact .txt .label { font-size: 11px; letter-spacing: -0.035em; }
    .gnb > li > a { text-align: center; font-size: 0.8em; word-break: keep-all; }

    /* 히어로 */
    .main-vis { height: 240px; }

    /* 섹션 */
    .sec-head h2 { font-size: 20px; }

}