/* BASIC css start */
/* ========================================
   FALLING LAND SIDEBAR
======================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    padding-left: 250px;
    color: #171717;
}


/* 기본 */

button {
    margin: 0;
    padding: 0;

    border: 0;

    color: inherit;
    font: inherit;

    background: none;

    cursor: pointer;
}

#header ul,
#header li {
    margin: 0;
    padding: 0;

    list-style: none;
}

#header a,
.fl-utility a {
    color: inherit;
    text-decoration: none;
}


/* ========================================
   LEFT SIDEBAR
======================================== */

#header {
    position: fixed;

    top: 0;
    bottom: 0;
    left: 0;

    z-index: 1200;

    width: 250px;
    height: 100vh;

    background: #fff;

    border-right: 1px solid #eeeeee;
}


.fl-sidebar {
    width: 100%;
    height: 100%;

    padding: 42px 34px 38px;

    overflow-y: auto;
}


/* ========================================
   LOGO
======================================== */

.fl-logo {
    margin: 0 0 48px;
    padding: 0;

    line-height: 1;
}

.fl-logo a {
    display: inline-block;

    font-size: 25px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.8px;

    white-space: nowrap;
}


/* ========================================
   LOGIN / JOIN
======================================== */

.fl-member {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 31px;
}

.fl-member a {
    position: relative;

    font-size: 12px;
    line-height: 1;

    font-weight: 600;
}


/* ========================================
   MENU
======================================== */

.fl-menu-section {
    margin-bottom: 31px;
}

.fl-menu-section h2 {
    margin: 0 0 13px;
    padding: 0;

    font-size: 16px;
    line-height: 1;

    font-weight: 800;
}

.fl-menu-section li {
    margin-bottom: 5px;
}

.fl-menu-section li:last-child {
    margin-bottom: 0;
}

.fl-menu-section li a {
    position: relative;

    display: inline-block;

    font-size: 13px;
    line-height: 1.15;

    font-weight: 500;

    letter-spacing: -0.1px;
}


/* ========================================
   HOVER UNDERLINE
======================================== */

.fl-member a::after,
.fl-menu-section li a::after,
.fl-about a::after {

    content: "";

    position: absolute;

    right: 0;
    bottom: -3px;
    left: 0;

    height: 1px;

    background: #171717;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform 0.2s ease;
}


.fl-member a:hover::after,
.fl-menu-section li a:hover::after,
.fl-about a:hover::after {

    transform: scaleX(1);
}


/* ========================================
   ABOUT
======================================== */

.fl-about {
    margin-top: 38px;
    padding-bottom: 15px;
}

.fl-about a {
    position: relative;

    display: inline-block;

    font-size: 15px;
    line-height: 1;

    font-weight: 800;
}


/* ========================================
   RIGHT UTILITY
======================================== */

.fl-utility {
    position: fixed;

    top: 27px;
    right: 35px;

    z-index: 1300;

    display: flex;

    align-items: center;

    gap: 19px;
}

.fl-utility button,
.fl-utility a {

    position: relative;

    display: flex;

    width: 29px;
    height: 29px;

    align-items: center;
    justify-content: center;

    color: #000;
}

.fl-utility i {

    color: #000 !important;

    font-size: 29px;

    font-weight: 400;
}


/* CART COUNT */

.fl-cart-count {

    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 17px;
    height: 17px;

    padding: 0 4px;

    color: #fff !important;

    font-size: 10px;
    line-height: 17px;

    text-align: center;

    background: #000 !important;

    border-radius: 20px;
}


/* ========================================
   SEARCH
======================================== */

.fl-search-layer {

    visibility: hidden;

    position: fixed;

    top: 0;
    right: 0;
    left: 250px;

    z-index: 1400;

    height: 150px;

    padding: 48px 90px;

    opacity: 0;

    background: rgba(255,255,255,0.97);

    border-bottom: 1px solid #e5e5e5;

    transform: translateY(-100%);

    transition:
        visibility 0.3s,
        opacity 0.3s ease,
        transform 0.3s ease;
}


.fl-search-layer.is-open {

    visibility: visible;

    opacity: 1;

    transform: translateY(0);
}


.fl-search-close {

    position: absolute;

    top: 24px;
    right: 35px;
}

.fl-search-close i {
    font-size: 27px;
}


.fl-search-area {

    max-width: 720px;

    margin: 0 auto;
}


.fl-search-area fieldset {

    position: relative;

    margin: 0;
    padding: 0;

    border: 0;
}


.fl-search-area legend {

    overflow: hidden;

    position: absolute;

    width: 1px;
    height: 1px;

    clip: rect(0,0,0,0);
}


.fl-search-area .MS_search_word {

    width: 100%;
    height: 48px;

    padding: 0 50px 0 4px;

    color: #171717;

    font-size: 18px;

    background: transparent;

    border: 0;
    border-bottom: 1px solid #171717;

    outline: none;
}


.fl-search-submit {

    position: absolute;

    top: 8px;
    right: 4px;
}

.fl-search-submit i {
    font-size: 27px;
}


/* ========================================
   PC에서는 모바일 메뉴 숨김
======================================== */

.fl-mobile-menu,
.fl-menu-dim {
    display: none;
}


/* ========================================
   MOBILE
======================================== */

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

    body {

        padding-left: 0;
        padding-top: 65px;

    }


    #header {

        visibility: hidden;

        width: 280px;

        opacity: 0;

        border-right: 0;

        box-shadow:
            8px 0 30px rgba(0,0,0,0.08);

        transform: translateX(-100%);

        transition:
            visibility 0.3s,
            opacity 0.3s ease,
            transform 0.3s ease;

    }


    #header.is-open {

        visibility: visible;

        opacity: 1;

        transform: translateX(0);

    }


    .fl-sidebar {

        padding: 35px 31px;

    }


    .fl-mobile-menu {

        display: flex;

        position: fixed;

        top: 18px;
        left: 18px;

        z-index: 1500;

        width: 30px;
        height: 30px;

        align-items: center;
        justify-content: center;

    }


    .fl-mobile-menu i {

        font-size: 26px;

    }


    .fl-utility {

        top: 18px;
        right: 17px;

        gap: 12px;

    }


    .fl-utility button,
    .fl-utility a {

        width: 27px;
        height: 27px;

    }


    .fl-utility i {

        font-size: 25px;

    }


    .fl-menu-dim {

        visibility: hidden;

        display: block;

        position: fixed;

        inset: 0;

        z-index: 1190;

        opacity: 0;

        background:
            rgba(0,0,0,0.28);

        transition:
            visibility 0.3s,
            opacity 0.3s ease;

    }


    .fl-menu-dim.is-open {

        visibility: visible;

        opacity: 1;

    }


    .fl-search-layer {

        left: 0;

        height: 125px;

        padding:
            42px 55px 25px;

    }


    .fl-search-close {

        top: 17px;
        right: 18px;

    }

}


/* BASIC css end */