@charset "utf-8";
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/*
@import url('https://fonts.googleapis.com/css?family=Arimo|Noto+Sans+KR&display=swap');
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(font/NotoSansKR-Bold.woff2) format('woff2'),
        url(font/NotoSansKR-Bold.woff) format('woff'),
        url(font/NotoSansKR-Bold.otf) format('opentype');
}
*/
@font-face { font-family: 'Noto Sans KR'; font-weight: 200; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Thin.woff"); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 300; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Light.woff"); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 400; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Regular.woff"); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 500; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Medium.woff"); }
@font-face { font-family: 'Noto Sans KR'; font-weight: 700; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Bold.woff"); }

html,
button,
input,
select,
textarea {
    color: #000;
    font-family: 'Noto Sans KR', 'HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif';
    -webkit-border-radius: 0;
}
html, body { height:100%; background: #fff; -webkit-overflow-scrolling: touch;}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

::-webkit-input-placeholder {
    font-size: .875em;
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-writing-mode: horizontal-tb;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner { border:0; }
a { text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; }
a:active,
a:hover { outline-width: 0; }
input:focus, input.input-focus,
textarea:focus,
textarea.input-focus,
select:focus,
select.input-focus {
  /*box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;*/
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* who307 new */
@font-face { font-family: "Noto Sans KR"; font-weight: 200; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Thin.woff"); } 
@font-face { font-family: "Noto Sans KR"; font-weight: 300; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Light.woff"); } 
@font-face { font-family: "Noto Sans KR"; font-weight: 400; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Regular.woff"); } 
@font-face { font-family: "Noto Sans KR"; font-weight: 500; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Medium.woff"); } 
@font-face { font-family: "Noto Sans KR"; font-weight: 700; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-Bold.woff"); } 
@font-face { font-family: "Noto Sans KR"; font-weight: 900; font-style: normal; src: url("https://img.malltail.com/goods_img/font/NotoSansKR-ExtraBold.woff"); } 
@font-face { font-family: Pretendard; font-weight: 900; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-Black.woff"); } 
@font-face { font-family: Pretendard; font-weight: 800; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-ExtraBold.woff"); } 
@font-face { font-family: Pretendard; font-weight: 700; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-Bold.woff"); } 
@font-face { font-family: Pretendard; font-weight: 600; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-SemiBold.woff"); } 
@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-Medium.woff"); } 
@font-face { font-family: Pretendard; font-weight: 400; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-Regular.woff"); } 
@font-face { font-family: Pretendard; font-weight: 300; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-Light.woff"); } 
@font-face { font-family: Pretendard; font-weight: 200; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-ExtraLight.woff"); } 
@font-face { font-family: Pretendard; font-weight: 100; font-display: swap; src: url("https://img.malltail.com/goods_img/font/Pretendard-Thin.woff"); } 

.blind { position: absolute; overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; visibility: hidden; color: transparent; }
#malltail-header button, #malltail-header input, #malltail-header select, #malltail-header textarea, #malltail-header a {vertical-align: middle;}
#mytail-detail a{color:#000;}
#malltail-header{font-size:14px; line-height:1.25;}
#malltail-header * { font-family: Pretendard, "Noto Sans KR"; box-sizing: border-box; } 
#malltail-header img {max-width:100%;vertical-align: top;}
.hamburger-btn { width: 23px; height: 23px; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; margin-top: 2px; } 
.hamburger-btn > span { width: 23px; height: 2px; background-color: rgb(0, 0, 0); display: block; margin-bottom: 7px; border-radius: 24px; transition: all 0.3s ease 0s; } 
.hamburger-btn > span:nth-of-type(3) { margin-bottom: 0px; } 
.hamburger-btn.is-active > span:nth-of-type(2) { opacity: 0; } 
.hamburger-btn.is-active > span:nth-of-type(3) { transform: rotate(-43deg); position: absolute; top: 10px; } 
.hamburger-btn.is-active > span:nth-of-type(1) { transform: rotate(43deg); position: absolute; top: 10px; } 

.header__hamburger-btn { width: 23px; height: 23px; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; position: relative; margin-top: 2px; } 
.header__hamburger-btn > span { width: 23px; height: 2px; background-color: rgb(0, 0, 0); display: block; margin-bottom: 7px; border-radius: 24px; transition: all 0.3s ease 0s; } 
.header__hamburger-btn > span:nth-of-type(3) { margin-bottom: 0px; } 
.header__hamburger-btn.is-active > span:nth-of-type(2) { opacity: 0; } 
.header__hamburger-btn.is-active > span:nth-of-type(3) { transform: rotate(-43deg); position: absolute; top: 10px; } 
.header__hamburger-btn.is-active > span:nth-of-type(1) { transform: rotate(43deg); position: absolute; top: 10px; } 

.header__user-menu-list { display: flex; align-items: center; } 
.header__user-menu-item { margin-right: 18px; position: relative; } 
.header__user-menu-item .alarm-icon { min-width: 6px; min-height: 6px; border-radius: 20px; color: rgb(255, 255, 255); font-size: 10px; display: inline-block; background-color: rgb(34, 118, 252); text-align: center; line-height: 17px; position: absolute; top: -4px; right: -2px; font-weight: 700; } 
.header__user-menu-item .basket-cnt { min-width: 18px; min-height: 18px; border-radius: 20px; color: rgb(255, 255, 255); font-size: 10px; display: inline-block; background-color: rgb(34, 118, 252); text-align: center; line-height: 17px; position: absolute; top: -8.5px; right: -8px; font-weight: 700; } 
.header__user-menu-item:last-of-type { margin-right: 0px; } 
.header__user-menu-sub { display: none; position: absolute; padding-top: 8px; z-index: 999; width: max-content; left: 50%; transform: translateX(-50%); } 
.header__user-menu-sub--my { left: auto; transform: initial; } 
.header__user-menu-sub > ul { padding: 4px 8px; border-radius: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(224, 224, 224); position: relative; } 
.header__user-menu-sub > ul::before { content: ""; width: 11px; height: 5px; background-image: url("//img.malltail.com/goods_img/single_malltail/header_user_menu_sub_arr_icon.png"); position: absolute; top: -5px; left: 50%; transform: translateX(-50%); } 
.header__user-menu-sub > ul > li { display: flex; align-items: center; border-radius: 0px; font-size: 12px; } 
.header__user-menu-sub--my > ul { box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 16px 0px; padding: 6px; } 
.header__user-menu-sub--my > ul::before { display: none; } 
.header__user-menu-sub--my > ul > li:hover { background-color: rgb(247, 247, 249); } 
.header__user-menu-sub--my > ul > li > a { font-size: 14px; color: rgb(51, 51, 51); font-weight: 500; padding: 6px 10px; display: block; width: 100%; line-height: 140%; } 
.header__user-menu-sub--my > ul > li { height: 30px; font-size: 14px; } 
.header__user-menu-sub--my > ul > li > a > img { margin-right: 6px; } 
.header__user-menu-sub--my .line { width: 100%; height: 1px; background-color: rgb(238, 238, 238); display: block; margin: 6px 0px; } 
.header__bottom-gnb-inner { display: flex; justify-content: space-between; align-items: center; } 
.header__category { width: 100%; position: relative; } 
.header__category-list { width: 100%; font-size: 0px; white-space: nowrap; overflow-x: scroll; padding-left:18px; line-height: 49px; border-bottom: 1px solid rgb(224, 224, 224); -ms-overflow-style: none; scrollbar-width: none; } 
.header__category-list::-webkit-scrollbar { display: none; } 
.header__category-item { margin-right: 10px; display: inline-block; } 
.header__category-item:last-of-type { margin-right: 0px; } 
.header__category-item > a { color: rgb(0, 0, 0); font-size: 16px; font-weight: 700; padding: 0px 6px 12px; line-height: 150%; } 
.header__category-item.is-active > a { color: rgb(34, 118, 252); border-bottom: 3px solid rgb(34, 118, 252); } 
.header__category-item.is-active .header__category-item-sub { display: block; } 
.header__category-item-sub { display: none; position: absolute; top: 50px; left: 0px; z-index: 2; width: 100%; } 
.header__category-item-sub > ul { padding: 0px 18px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 8px 0px; font-size: 0px; white-space: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; line-height: initial; } 
.header__category-item-sub > ul::-webkit-scrollbar { display: none; } 
.header__category-item-sub > ul > li { display: inline-block; height: 50px; border-radius: 0px; margin-right: 21px; position: relative; line-height: 50px; } 
.header__category-item-sub > ul > li::after { content: ""; width: 1px; height: 16px; background-color: rgb(224, 224, 224); position: absolute; top: 50%; right: -11px; transform: translate(0px, -50%); } 
.header__category-item-sub > ul > li:last-of-type::after { display: none; } 
.header__category-item-sub > ul > li:last-of-type { margin-right:0; } 
.header__category-item-sub > ul > li > a { font-size: 16px; color: rgb(51, 51, 51); font-weight: 500; padding: 0px; display: block; width: 100%; } 

.hamburger-menu { position: fixed; top: 0px; background-color: rgb(255, 255, 255); z-index: 9999; width: 100%; right: -100%; box-shadow: rgba(0, 0, 0, 0.1) 10px 0px 20px 0px; height: 100%; min-height: 100%; transition: all 0.5s ease 0s; visibility: hidden; overflow-y: auto; } 
.hamburger-menu::-webkit-scrollbar { display: none; } 
.hamburger-menu.is-opened { right: 0px; visibility: visible; } 
.hamburger-menu__wrapper { position: relative; } 
.hamburger-menu__header { border-bottom: 1px solid rgb(224, 224, 224); background: rgb(255, 255, 255); display: flex; justify-content: space-between; padding: 9px 18px; } 
.hamburger-menu__header > span { color: rgb(0, 0, 0); font-size: 18px; font-style: normal; font-weight: 700; line-height: 150%; display: flex; align-items: center; } 
.hamburger-menu__header > span > img { margin-right: 11px; } 
.hamburger-menu__user { padding: 24px 0px 12px 0px; margin: 0px 18px; } 
.hamburger-menu__user h2 { color: rgb(0, 0, 0); font-size: 16px; font-weight: 500; line-height: 27px; display: flex; align-items: center; position: relative; } 
.hamburger-menu__user h2 .user-icon { width: 56px; height: 56px; padding: 10px; border-radius: 16px; border: 1px solid rgb(224, 224, 224); background: rgb(247, 247, 249); display: inline-block; margin-right: 14px; position: relative; } 
.hamburger-menu__user h2 .user-icon > a { display: block; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } 
.hamburger-menu__user h2 .user-icon.normal { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_normal_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.bronze { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_bronze_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.steel { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_steel_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.silver { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_silver_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.coral { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_coral_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.whitegold { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_whitegold_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.gold { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_gold_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.sapphire { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_sapphire_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.ruby { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_ruby_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.diamond { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_diamond_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.platinum { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_platinum_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.vip { background: url("//img.malltail.com/goods_img/contents/main/icon_grade_vip_D.svg") 50% 50%/calc(100% - 20px) no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-icon.fc { background: url("/img/new/common/ico_grade_fc.gif") 50% 50% no-repeat rgb(247, 247, 249); } 
.hamburger-menu__user h2 .user-level { display: inline-flex; display:none; align-items: center; height: 20px; paddihttp://img.malltail.com/goods_img/contents/main/hamburger_menu_shopping: 0px 10px; border-radius: 99px; background: rgb(34, 118, 252); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; position: absolute; right: 0px; } 
.hamburger-menu__user h2 .user-info a { vertical-align: bottom!important; color: rgb(0, 0, 0); } 
.hamburger-menu__user > h2.log-off > a { border-bottom: 1px solid rgb(0, 0, 0); display: inline-block; } 
.hamburger-menu__user h2 > strong { padding: 0px 5px; } 
.hamburger-menu__user h2 .user-info>p { font-size: 14px; color: #666; line-height: 150%; font-weight:400; } 
.hamburger-menu__user h2 .user-info>p>span { color: #2276FC; } 
.hamburger-menu__user .mypage-link { border-radius: 5px; border: 1px solid #ccc; background-color: #fff; display: flex; align-items: center; justify-content: center; height: 50px; color: #000; font-weight: 500; font-size: 16px; margin-top: 12px; } 
.hamburger-menu__user .mypage-link>img { margin-left:4px; } 

.hamburger-menu__banner { text-align: center; margin-bottom: 24px; padding:0 18px; } 
.hamburger-menu__banner > a > img { border-radius : 10px; } 
.hamburger-menu__top-list { display: flex; margin-bottom: 24px; } 
.hamburger-menu__top-list > li { width: calc(25%); text-align: center; } 
.hamburger-menu__top-list > li > a > p { color: rgb(51, 51, 51); text-align: center; font-size: 14px; font-weight: 600; margin-top: 9px; line-height: 150%; } 
.hamburger-menu__store { border-radius: 10px; border: 1px solid rgb(204, 204, 204); background: rgb(255, 255, 255); width: calc(100% - 36px); margin: 0px auto 24px; padding: 16px; box-sizing: border-box; } 
.hamburger-menu__store > h2 { font-size: 18px; font-weight: 700; line-height: 150%; display: flex; align-items: center; margin-bottom: 12px; } 
.hamburger-menu__store > h2 > img { margin-left: 4px; margin-top: 1px; } 
.hamburger-menu__store-list { display: flex; margin-bottom: 12px; height: 44px; } 
.hamburger-menu__store-list > li { width: calc(33.3333%); text-align: center; position: relative; border-right: 1px solid rgb(238, 238, 238); } 
.hamburger-menu__store-list > li img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
.hamburger-menu__store-list > li:last-of-type { border-right: 0px; } 
.hamburger-menu__store-list > li > a { display: block; width: 100%; height: 100%; } 
.hamburger-menu__store-btn { border-radius: 5px; background: rgb(242, 243, 245); font-size: 14px; } 
.hamburger-menu__store-btn a { font-size: 14px; color: rgb(0, 0, 0); line-height: 150%; padding: 10px 14px; display: block; position: relative; } 
.hamburger-menu__store-btn a img { position: absolute; top: 50%; transform: translate(0px, -50%); right: 14px; } 
.hamburger-menu__shopping { width: calc(100% - 36px); margin: 0px auto 24px; padding-bottom: 24px; border-bottom: 1px solid rgb(224, 224, 224); } 
.hamburger-menu__shopping > h2 { color: rgb(102, 102, 102); font-size: 18px; font-weight: 600; margin-bottom: 18px; } 
.hamburger-menu__category-item { position: relative; padding: 5px 0px; } 
.hamburger-menu__category-item .arrow { content: ""; background-image: url("//img.malltail.com/goods_img/contents/main/select_arrow_D.svg"); background-size: 22px 22px; width: 22px; height: 22px; position: absolute; right: 0px; top: 14px; cursor: pointer; filter:invert(43%) sepia(0%) saturate(0%) hue-rotate(210deg) brightness(92%) contrast(95%); } 
.hamburger-menu__category-item .arrow.is-active { transform: scale(-1); filter:initial; } 
.hamburger-menu__category-item > a { display: inline-block; line-height: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 72px); font-size: 16px; font-weight: 500; } 
.hamburger-menu__category-item > .icon { line-height: 40px; margin-right: 10px; } 
.hamburger-menu__category-sub { padding: 11px 20px 7px 64px; display: none; } 
.hamburger-menu__category-sub.is-opened { display: block; } 
.hamburger-menu__category-sub > li { margin-bottom: 16px; } 
.hamburger-menu__category-sub > li:last-of-type { margin-bottom: 0px; } 
.hamburger-menu__category-sub > li > a { color: rgb(51, 51, 51); font-size: 16px; line-height: 24px; position: relative; } 
.hamburger-menu__category-sub > li > a::before { content: ""; width: 4px; height: 4px; border-radius: 4px; position: absolute; left: -13px; top: 50%; transform: translate(0px, -50%); background-color: rgb(204, 204, 204); } 
.hamburger-menu__service { padding: 0px 18px 24px; margin-bottom: 24px; border-bottom: 1px solid rgb(238, 238, 238); } 
.hamburger-menu__service > h2 { color: rgb(102, 102, 102); font-size: 18px; font-weight: 600; line-height: 150%; margin-bottom: 16px; } 
.hamburger-menu__service-list { display: flex; justify-content: space-between; } 
.hamburger-menu__service-item { width: calc((100% - 24px) / 3); border-radius: 10px; } 
.hamburger-menu__service-item .name-eng > img:first-of-type { width: 14px; margin-right: 4px; } 
.hamburger-menu__service-item .name-eng { margin-bottom: 10px; display: block; } 
.hamburger-menu__service-item .name-kr { color: rgb(102, 102, 102); font-size: 14px; font-weight: 500; line-height: 150%; } 
.hamburger-menu__service-item .nation { color: rgb(0, 0, 0); font-size: 16px; font-weight: 600; line-height: 150%; } 
.hamburger-menu__service-item > a { padding: 16px 14px 12px; display: block; } 
.hamburger-menu__service-item:nth-of-type(1) { background-color: rgb(231, 248, 255); } 
.hamburger-menu__service-item:nth-of-type(2) { background-color: rgb(255, 247, 191); } 
.hamburger-menu__service-item:nth-of-type(3) { background-color: rgb(255, 233, 231); } 
.hamburger-menu__family-site { padding: 0px 18px 30px; } 
.hamburger-menu__family-site > h2 { color: rgb(102, 102, 102); font-size: 18px; font-weight: 600; line-height: 150%; margin-bottom: 16px; } 
.hamburger-menu__family-site-list { display: flex; flex-wrap: wrap; } 
.hamburger-menu__family-site-item { width: calc((100% - 10px) / 2); border-radius: 5px; border: 1px solid rgb(224, 224, 224); background: rgb(255, 255, 255); margin-right: 10px; margin-bottom: 10px; } 
.hamburger-menu__family-site-item:nth-of-type(2n) { margin-right: 0px; } 
.hamburger-menu__family-site-item:nth-last-of-type(-n+2) { margin-bottom: 0px; } 
.hamburger-menu__family-site-item > a { padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; line-height: 1; font-size: 14px; font-weight: 500; }