@charset 'UTF-8';
@import url('var.css');
/* 1. mo ~767px까지 */
@media all and (max-width: 767px) {
    .sub-hd-bg {
        background-position: 50% 0;
    }
    .sub-hd-lnb h2, #hs-lnb, .sub-hd-bg:after {
        animation-duration: 0.5s;
    }
    #hs-lnb {
        margin-left: 1em;
        width: 200px;
        z-index: 3;
    }
    .hs-lnb-btn {
        display: block;
        width: 100%;
        margin: 0 15px;
        line-height: 48px;
        font-weight: 700;
        font-size: 1.1em;
        color: #fff;
        background: url('../images/svg/i_more_wh.svg') right center / auto 24px no-repeat;
    }
    .home, .lnb-depth1, .lnb-depth3, .hs-lnb-list li > span {
        display: none;
    }
    .hs-lnb-list {
        display: none;
        /* flex-direction: column; */
        position: absolute;
        left: 0;
        top: 48px;
        width: 100%;
        padding: 15px;
        background-color: var(--main-color);
        line-height: 36px;
        box-shadow: 0 5px 8px rgba(0,0,0,0.25);
    }
}

/* 2. tb 768px부터~ */
@media all and (min-width: 768px) {
    .sub-hd {
        padding-top: 100px;
    }
    .hs-lnb-btn {
        display: none;
    }
    .hs-lnb-list {
        display: flex;
        align-items: center;
        margin: 0.5em 1em;
        font-size: 1.2em;
        font-weight: 700;
    }
    .hs-lnb-list li {    }
    .hs-lnb-list li a {}
    .lnb-depth1 a {
        padding-top: 0.3em;
    }
    .hs-lnb-list a img {
        display: block;
        position: relative;
        top: 6px;
        width: 24px;
        margin-right: 0.8em;
    }
    #hs-lnb span {
        position: relative;
        top: 8px;
        color: #fff;
        font-size: 1.5em;
    }
    .hs-lnb-list li.active {}
    .hs-lnb-list li.active a {
        font-weight: 600;
    }
    /* 비주얼 이미지 */
    .sub-hd-bg {
        height: 210px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right 0;
    }
    .sub-hd-bg:before {
        padding-top: 56.25%; /* 16:9 Ratio */
    }

    /* 메인 영역 */
    #hs-main, #hs-main > * {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .sub-page-nav {
        font-size: 1.1em;
    }
    .sub-sec h2 {
        font-size: 2em;
        margin-bottom: 1em;
        line-height: 1.3;
    }
    .h2-desc {
        margin: auto;
        padding-bottom: 5em;
        font-size: 1.2em;
    }
}

/* 3. only tb 768px ~ 1279px */
@media all and (min-width: 768px) and (max-width: 1279px) {}

/* 4. pc 1280px부터~ */
@media all and (min-width: 1280px) {
    .sub-hd-bg {
        height: 320px;
    }
    .hs-lnb-list {
        margin: 0.8em 1.5em;
    }
    .sub-page-nav {
        font-size: 1.3em;
    }
    .brand-story-sec {
        font-size: 1.2em;
    }
    .sub-hd-bg:before {
        padding-top: 30%; /* 10:3 Ratio */
    }
    /* 메인 영역 */
    #hs-main, #hs-main > * {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .sub-sec h2 {
        font-size: 3em;
    }
    .h2-desc {
        font-size: 1.3em;
        padding: 0 8em 5em 8em;
    }
}

/* 4. pc 1600px부터~ */
@media screen and (min-width: 1600px) {
    .sub-hd .wrap, #hs-main .wrap {
        max-width: 1580px;
    } 
}