@charset "UTF-8";
/*
 * By "REMOTE" Co. 2020
 * Website: http://www.remote.dog/
 * Contact: feed@remote.dog
 */
/* initialize */
body, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, table, th, td, form, fieldset, legend, input, textarea, select, button, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, audio, video {
    margin: 0;
    padding: 0;
}

body {
    font-style: normal;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, dt, strong {
    font-weight: normal;
}

img, fieldset, iframe, button {
    border: 0 none;
}

img {
    image-rendering: -webkit-optimize-contrast;
}

li {
    list-style: none;
}

button {
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th, td {
    border-collapse: collapse;
}

hr {
    display: none;
}

form {
    display: inline;
}

select, input, textarea {
    padding: 0;
    vertical-align: middle;
    resize: none;
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    outline: none;
    background-color: transparent;
}

input::-ms-clear,
select::-ms-expand {
    display: none;
}

i, em, u, cite, mark, address {
    font-style: normal;
}

a {
    text-decoration: none;
    cursor: pointer;
}

button {
    outline: none;
}

mark {
    background-color: transparent;
}

main {
    display: block;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

legend {
    position: absolute;
    left: -999em;
}

input[type="search"]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* font */
@font-face {
    font-family: "Noto Sans KR";
  src: url("../../../resource/fonts/NotoSansKR-Light.woff2") format("woff2"), url("../../../resource/fonts/NotoSansKR-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
    font-family: "Noto Sans KR";
  src: url("../../../resource/fonts/NotoSansKR-Regular.woff2") format("woff2"), url("../../../resource/fonts/NotoSansKR-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: "Noto Sans KR";
  src: url("../../../resource/fonts/NotoSansKR-Medium.woff2") format("woff2"), url("../../../resource/fonts/NotoSansKR-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
    font-family: "Noto Sans KR";
  src: url("../../../resource/fonts/NotoSansKR-Medium.woff2") format("woff2"), url("../../../resource/fonts/NotoSansKR-Medium.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
    font-family: "Noto Sans KR";
  src: url("../../../resource/fonts/NotoSansKR-Bold.woff2") format("woff2"), url("../../../resource/fonts/NotoSansKR-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
    font-family: "Noto Sans KR";
  src: url("../../../resource/fonts/NotoSansKR-Black.woff2") format("woff2"), url("../../../resource/fonts/NotoSansKR-Black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-UltraLight.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-UltraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-Light.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-Regular.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-Medium.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-Semibold.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-Bold.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
    font-family: "Gilroy";
  src: url("../../../resource/fonts/Gilroy-ExtraBold.woff2") format("woff2"), url("../../../resource/fonts/Gilroy-Extrabold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
    font-family: "GilroyItalic";
  src: url("../../../resource/fonts/GilroyItalic-Light.woff2") format("woff2"), url("../../../resource/fonts/GilroyItalic-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
    font-family: "GilroyItalic";
  src: url("../../../resource/fonts/GilroyItalic-Regular.woff2") format("woff2"), url("../../../resource/fonts/GilroyItalic-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

/* variables */
html, body {
    height: 100%;
}

body {
    font-size: 14px;
    line-height: 1.5;
    font-family: "Gilroy", "Noto Sans KR", "맑은고딕", Malgun Gothic, sans-serif;
    color: #000;
    background: #fff;
    overflow: scroll;
    overflow-x: auto;
  /*word-break: keep-all;*/
}

@media (max-width: 767px) {
    body {
        font-size: 13px;
        line-height: 1.5;
    }
}

select, input, textarea, button, mark {
    font-family: "Gilroy", "Noto Sans KR", "맑은고딕", Malgun Gothic, sans-serif;
    color: #000;
}

a {
    color: #000;
}

.hoverable a:hover {
    color: #000;
}

::placeholder {
    font-weight: normal;
    color: rgba(0, 0, 0, 0.4);
}

::-webkit-input-placeholder {
    font-weight: normal;
    color: rgba(0, 0, 0, 0.4);
}

:-moz-placeholder {
    font-weight: normal;
    color: rgba(0, 0, 0, 0.4);
}

::-moz-placeholder {
    font-weight: normal;
    color: rgba(0, 0, 0, 0.4);
}

:-ms-input-placeholder {
    font-weight: normal;
    color: rgba(0, 0, 0, 0.4);
}

:disabled, a[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

::selection {
    background: red;
    color: #fff;
}

body.block-scroll {
    height: 100%;
    overflow: hidden;
}

.no-transition,
.no-transition:before,
.no-transition:after,
.no-transition > * {
    transition: none !important;
}

.no-select {
    user-select: none;
    -webkit-user-selct: none;
    -moz-user-select: none;
    -ms-user-selct: none;
}

body.login-page {
    overflow: auto;
}

/* module */
br.pc {
    display: inline;
}

br.mobile {
    display: none;
}

@media (max-width: 767px) {
    br.pc {
        display: none;
    }

    br.mobile {
        display: inline;
    }
}

.loading {
    position: relative;
}

.loading:before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    content: '';
    margin: -25px 0 0 -25px;
    background: url("../../../resource/images/icon-loading2.gif") no-repeat 0 0/100%;
}

@media (max-width: 767px) {
    .loading:before {
        width: 30px;
        height: 30px;
        margin: -15px 0 0 -15px;
    }
}

/* module - text */
.text-invalid {
    color: #FA4431;
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
    text-align: left;
    padding: 4px 0 3px;
}

/* module - pg */
.pg-area {
    font-size: 0;
    text-align: center;
    margin-top: 40px;
}

.pg-area a {
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    font-size: 24px;
    font-weight: 300;
    color: #d4d4d4;
    cursor: pointer;
    transition: color 0.2s;
}

.pg-area a.selected {
    font-weight: 400;
    color: #000;
}

.pg-area [class^='arr-'] {
    position: relative;
    width: 24px;
    height: 38px;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    padding: 0;
}

.pg-area [class^='arr-']:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 14px;
    background-size: 7px 14px;
}

.pg-area [class^='arr-'][disabled] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.pg-area .arr-prev {
    margin-right: 5px;
}

.pg-area .arr-next {
    margin-left: 5px;
}

.pg-area .arr-first:before, .pg-area .arr-last:before {
    background-image: url("../../../resource/images/arr-first.png");
}

.pg-area .arr-prev:before, .pg-area .arr-next:before {
    background-image: url("../../../resource/images/arr-prev.png");
}

.pg-area .arr-last:before, .pg-area .arr-next:before {
    transform: translate(-50%, -50%) scaleX(-1);
}

@media (max-width: 767px) {
    .pg-area {
        margin-top: 29px;
    }
}

/* module - star */
[class*='star-rating'] {
    font-size: 0;
}

[class*='star-rating'][class*='-black'] .fraction mark,
  [class*='star-rating'][class*='-black'] .text {
    color: #000;
}

[class*='star-rating'][class*='-pink'] .fraction mark,
  [class*='star-rating'][class*='-pink'] .text {
    color: #FA4431;
}

[class*='star-rating'] .track {
    display: inline-block;
    height: 100%;
    margin-top: -3px;
    background-size: auto 100%;
    background-repeat: repeat-x;
    font-size: 0;
    text-align: left;
    line-height: 0;
    vertical-align: middle;
    transform-origin: 0 50%;
}

[class*='star-rating'] .track .bar {
    display: inline-block;
    height: 100%;
    background-color: #fff;
    background-repeat: repeat-x;
    background-size: auto 100%;
}

[class*='star-rating'] .fraction {
    margin-right: 8px;
    font-size: 14px;
    color: #A0A0A0;
    vertical-align: middle;
}

[class*='star-rating'] .fraction mark {
    color: #000;
    font-weight: 700;
}

[class*='star-rating'] .fraction b {
    font-weight: 500;
}

[class*='star-rating'] .text {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 700;
    vertical-align: middle;
    color: inherit;
}

[class*='star-rating'].h20 {
    height: 20px;
}

[class*='star-rating'].h20 .track {
    width: 116px;
    background-image: url("../../../resource/images/star-20-gray.png");
}

[class*='star-rating'].h20[class*='-pink'] .bar {
    background-image: url("../../../resource/images/star-20-pink.png");
}

[class*='star-rating'].h20[class*='-black'] .bar {
    background-image: url("../../../resource/images/star-20-black.png");
}

[class*='star-rating'].h20 .fraction {
    font-size: 24px;
}

[class*='star-rating'].h20 .text {
    font-size: 15px;
}

[class*='star-rating'].h18 {
    height: 18px;
}

[class*='star-rating'].h18 .track {
    width: 102px;
    background-image: url("../../../resource/images/star-18-gray.png");
}

[class*='star-rating'].h18[class*='-pink'] .bar {
    background-image: url("../../../resource/images/star-18-pink.png");
}

[class*='star-rating'].h18[class*='-black'] .bar {
    background-image: url("../../../resource/images/star-18-black.png");
}

[class*='star-rating'].h15 {
    height: 15px;
}

[class*='star-rating'].h15 .track {
    width: 87px;
    background-image: url("../../../resource/images/star-15-gray.png");
}

[class*='star-rating'].h15[class*='-pink'] .bar {
    background-image: url("../../../resource/images/star-15-pink.png");
}

[class*='star-rating'].h15[class*='-black'] .bar {
    background-image: url("../../../resource/images/star-15-black.png");
}

[class*='star-rating'].h13 {
    height: 13px;
}

[class*='star-rating'].h13 .track {
    width: 77px;
    background-image: url("../../../resource/images/star-13-gray.png");
}

[class*='star-rating'].h13[class*='-pink'] .bar {
    background-image: url("../../../resource/images/star-13-pink.png");
}

[class*='star-rating'].h13[class*='-black'] .bar {
    background-image: url("../../../resource/images/star-13-black.png");
}

[class*='star-rating'].h13 .fraction {
    font-size: 12px;
    margin-right: 6px;
}

[class*='star-rating'].h13 .text {
    margin-left: 7px;
    font-size: 12px;
}

@media (max-width: 767px) {
    [class*='star-rating'] {
        height: 13px !important;
    }

    [class*='star-rating'] .track {
        width: 77px !important;
        background-image: url("../../../resource/images/star-13-gray.png") !important;
    }

    [class*='star-rating'][class*='-pink'] .bar {
        background-image: url("../../../resource/images/star-13-pink.png") !important;
    }

    [class*='star-rating'][class*='-black'] .bar {
        background-image: url("../../../resource/images/star-13-black.png") !important;
    }

    [class*='star-rating'] .fraction {
        font-size: 12px !important;
        margin-right: 6px;
    }

    [class*='star-rating'] .text {
        margin-left: 7px;
        font-size: 12px !important;
    }
}

/* module - tab */
.tab-month {
    height: 44px;
    font-size: 0;
    padding-left: 1px;
    box-sizing: border-box;
}

.tab-month a {
    display: inline-block;
    width: 58px;
    height: 100%;
    box-shadow: inset 0 0 0 1px #000;
    margin-left: -1px;
    font-size: 14px;
    line-height: 44px;
    text-align: center;
    color: #000;
    font-weight: 500;
}

.tab-month a:hover, .tab-month a.current {
    background-color: #000;
    color: #fff;
}

@media (max-width: 767px) {
    .tab-month {
        display: flex;
        width: 100%;
    }

    .tab-month a {
        flex: 1;
    }
}

/* module - text */
.txt-required {
    font-size: inherit;
    line-height: 16px;
    color: #FA4431;
    font-style: normal;
    vertical-align: baseline;
    margin-left: 4px;
}

/* module - title */
.title-field {
    display: block;
    font-size: 14px;
    line-height: 16px;
    padding-bottom: 10px;
    font-weight: 400;
}

.title-field.pink {
    color: #FA4431;
}

.title-field.green {
    color: #00BA88;
}

.title-field.yellow {
    color: #FFB800;
}

.title-field.gray {
    color: #ccc;
}

.invalid .title-field {
    color: #FA4431;
}

.title-modal {
    font-size: 14px;
    line-height: 16px;
    padding-bottom: 10px;
}

.title-detail {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    padding-bottom: 20px;
}

.title-detail > span {
    font-weight: 400;
}

.title-detail mark {
    color: #571ee9;
}

@media (max-width: 767px) {
    .title-detail {
        font-size: 14px;
        padding-bottom: 16px;
    }
}

.title-page {
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
}

.title-article {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}

@media (max-width: 767px) {
    .title-article {
        font-size: 15px;
        font-weight: 600;
    }
}

.title-field-pop {
    font-size: 14px;
    font-weight: 700;
}

.title-my {
    position:relative;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    padding-bottom: 19px;
    margin-top: -2px;
}

.title-my .outpay {
    position:absolute;
    top:-8px;
    right:0;
}

.title-my.line {
    border-bottom: 3px solid #000;
}

@media (max-width: 767px) {
    .title-my {
        font-size: 14px;
        padding-bottom: 16px;
        margin-top: 0;
    }

    .title-my .outpay {
        top:-12px;
    }

}

.title-customer {
    display: block;
    font-size: 30px;
    font-weight: 400;
    line-height: 34px;
    padding-bottom: 27px;
}

.title-customer strong {
    font-weight: 700;
}

@media (max-width: 767px) {
    .title-customer {
        font-size: 18px;
        padding-bottom: 11px;
    }
}

/* regist */
.basic-regist input[type='text'], .basic-regist input[type='password'] {
    width: 100%;
}

.basic-regist li {
    position: relative;
}

.basic-regist li + li {
    padding-top: 20px;
}

/* paragragh */
.paragragh-null {
    width: 100%;
    text-align: center;
    padding: 135px 0;
    font-size: 24px;
    color: #898a8d;
    font-weight: 500;
}

@media (max-width: 767px) {
    .paragragh-null {
        padding: 77px 0;
        font-size: 14px;
    }
}

/* store icon */
.store-icon {
    position: relative;
    width: 50px;
    height: 50px;
    padding: 2px;
    box-sizing: border-box;
    display: block;
}

.store-icon:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: '';
    border-radius: 100%;
    background: #e4e4e4;
}

.store-icon.focus:before,
  .focus > .store-icon:before {
    background: linear-gradient(45deg, #ff007d 0%, #ff9900 100%);
}

.store-icon.uncheck:after,
  .uncheck > .store-icon:after {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 12px;
    height: 12px;
    content: '';
    border-radius: 100%;
    background: #FA4431;
}

.store-icon img {
    position: relative;
    width: 46px;
    border: 3px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
    display: block;
}

.store-icon em {
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    display: block;
}

.msg-star {
    position: relative;
    padding-left: 10px;
    display: block;
    font-size: 13px;
    line-height: 20px;
}

.msg-star:before {
    content: '*';
    position: absolute;
    left: 0;
}

@media (max-width: 767px) {
    .msg-star {
        padding-left: 7px;
        font-size: 11px;
        line-height: 15px;
    }
}

/* description */
.list-description > li {
    position: relative;
    font-size: 14px;
    line-height: 25px;
}

.list-description > li mark {
    color: #FA4431;
}

.list-description > li a {
    text-decoration: underline;
    margin-left: 15px;
    white-space: nowrap;
    color: #000;
}

.list-description.type-bar > li {
    padding-left: 9px;
}

.list-description.type-bar > li:before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
}

.list-description.type-dot > li {
    padding-left: 9px;
}

.list-description.type-dot > li:before {
    content: '∙';
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 767px) {
    .list-description > li {
        font-size: 13px;
        line-height: 20px;
        padding: 1px 0 3px;
    }

    .list-description > li a {
        margin-left: 0;
    }
}

.list-dot li {
    position: relative;
    font-size: 13px;
    line-height: 20px;
    color: #575757;
    padding-left: 8px;
}

.list-dot li mark {
    color: #FA4431;
}

.list-dot li strong {
    font-weight: 600;
}

.list-dot li:before {
    content: '∙';
    position: absolute;
    left: 0;
    top: 0;
}

@media (max-width: 767px) {
    .list-dot li {
        font-size: 12px;
    }
}

.list-step {
    display: flex;
    margin-top: 28px;
}

.list-step li {
    position: relative;
    flex: 1;
    word-break: keep-all;
    box-sizing: border-box;
    font-size: 15px;
    line-height: 24px;
}

.list-step li > div {
    width: 100%;
    height: 100%;
    background: #F5F5F5;
    padding: 20px 15px 18px;
    box-sizing: border-box;
}

.list-step li strong {
    display: block;
    margin-bottom: 17px;
    font-size: 14px;
    line-height: 26px;
    font-weight: 700;
    color: #000;
}

.list-step li + li {
    padding-left: 48px;
    background: url("../../../resource/images/arr-step.png") 21px 50%/8px 14px no-repeat;
}

@media (max-width: 767px) {
    .list-step {
        display: block;
        margin-top: 14px;
    }

    .list-step li {
        padding: 0;
        margin-top: 20px;
    }

    .list-step li > div {
        padding: 23px 22px;
        font-size: 13px;
        line-height: 18px;
    }

    .list-step li strong {
        margin-bottom: 2px;
        font-size: 13px;
        line-height: 26px;
        font-weight: 700;
    }

    .list-step li + li {
        padding-left: 0;
    }
}

.list-data {
    position: relative;
    font-size: 0;
}

.list-data li {
    position: relative;
    padding: 10px 0 10px 60px;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}

.list-data li > strong {
    position: absolute;
    left: 0;
    font-weight: 500;
    opacity: 0.6;
}

.list-data.type-half:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 10px;
    background: #fff;
    margin-left: -5px;
    z-index: 5;
}

.list-data.type-half li {
    display: inline-block;
    width: 50%;
}

.list-data.type-half li:nth-child(even) strong {
    padding-left: 5px;
}

/* auto loader */
.auto-loader {
    height: 50px;
    margin: 30px 0;
}

@media (max-width: 767px) {
    .auto-loader {
        height: 30px;
    }
}

/* layer popup */
.layer-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 508px;
    padding: 75px 45px 60px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -30%, 0);
    z-index: 999;
    box-sizing: border-box;
    border-radius: 24px;
    transition: opacity 0.15s, visibility 0.2s, transform 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.layer-popup[data-close-outside] .btn-close {
    display: none;
}

.layer-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.3s, visibility 0.01s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.layer-popup .title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.layer-popup .content {
    font-size: 18px;
    line-height: 35px;
    padding: 52px 0 0;
}

.layer-popup .content img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.layer-popup .btn-box {
    display: flex;
    margin: 60px -5px 0;
}

.layer-popup .btn-box a, .layer-popup .btn-box button {
    width: 100%;
    margin: 0 5px;
}

@media (min-width: 768px) {
    .layer-popup .scroll-box {
        height: auto !important;
        overflow: visible;
    }
}

@media (max-width: 767px) {
    .layer-popup {
        width: 100% !important;
        left: 0;
        top: auto;
        bottom: 0;
        max-height: calc(100% - 10px);
        padding: 40px 18px 40px;
        border-radius: 24px 24px 0 0;
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .layer-popup .title {
        font-size: 18px;
        line-height: 24px;
    }

    .layer-popup .content {
        padding: 30px 0 0;
        font-size: 14px;
        line-height: 24px;
    }

    .layer-popup .btn-box {
        margin: 30px -4px 0;
    }

    .layer-popup .btn-box a, .layer-popup .btn-box button {
        margin: 0 4px;
    }

    .layer-popup.full {
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }

    .layer-popup.full .btn-close {
        display: none;
    }

    .layer-popup .scroll-box {
        height: 100%;
        margin: 0 -20px;
        padding: 0 20px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .layer-popup .scroll-box:after {
        content: '';
        height: 20px;
        display: block;
    }
}

/* layer page */
.layer-page {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 800px;
    padding: 69px 55px 70px;
    background: #fff;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -30%, 0);
    z-index: 999;
    box-sizing: border-box;
    border-radius: 3px;
}

.layer-page .content {
    padding: 25px 0 0;
}

@media (min-width: 768px) {
    .layer-page .store-header {
        display: none;
    }
}

@media (max-width: 767px) {
    .layer-page {
        left: 0;
        top: 0 !important;
        height: 100%;
        max-height: 100%;
        padding: 0;
        margin-top: 0 !important;
        border-radius: 0;
    }

    .layer-page .title {
        margin-top: 30px;
        display: none;
    }

    .layer-page .content {
        padding: 36px 18px 38px;
    }

    .layer-page .btn-box {
        padding: 16px 14px 26px;
        border-top: 1px solid #F3F3F3;
        margin-top: 0;
        background-color: #fff;
    }
}

.full-scroll-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.full-scroll-wrap .layer-popup {
    position: absolute;
    top: auto;
    margin-top: 100px;
    transform: translate3d(-50%, 100px, 0);
}

.full-scroll-wrap .layer-popup:after {
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 1px;
    height: 100px;
    background: rgba(0, 0, 0, 0);
    content: '';
}

.full-scroll-wrap .layer-popup.open {
    transform: translate3d(-50%, 0, 0);
}

.full-scroll-wrap > .btn-close {
    position: fixed;
    right: 18px;
    top: 18px;
}

.full-scroll-wrap > .btn-close span {
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background-image: url("../../../resource/images/btn-layer-close-white.svg");
    background-size: 100%;
}

@media (max-width: 767px) {
    .full-scroll-wrap {
        overflow: visible;
    }

    .full-scroll-wrap .layer-popup {
        transform: translate3d(0, 100%, 0);
        opacity: 1;
    }

    .full-scroll-wrap .layer-popup:after {
        content: none;
    }

    .full-scroll-wrap .layer-popup.layer-page {
        transform: translate3d(100%, 0, 0);
    }

    .full-scroll-wrap .layer-popup.open {
        transform: translate3d(0, 0, 0);
    }
}

/* alert */
.alert-box {
    position: fixed;
    z-index: 9999;
    left: 50%;
    top: 50%;
    width: 400px;
    padding: 75px 45px 60px;
    border-radius: 24px;
    box-sizing: border-box;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform-origin: 0 0;
    transform: scale3d(1.1, 1.1, 1) translate(-50%, -50%);
    transition: opacity 0.1s, visibility 0.1s, transform 0.01s 0.1s;
}

.alert-box.open {
    opacity: 1;
    visibility: visible;
    transform: scale3d(1, 1, 1) translate(-50%, -50%);
    transition: opacity 0.2s, visibility 0.2s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.alert-box .title {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

.alert-box .message {
    -min-height: 48px;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    color: #000;
    line-height: 35px;
    padding: 52px 0 60px;
}

.alert-box .btn-box {
    margin: 0 -5px;
    display: flex;
}

.alert-box .btn-box button {
    margin: 0 5px;
    flex: 1;
}

.alert-box .btn-alone {
    width: 100%;
}

@media (max-width: 767px) {
    .alert-box {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: auto;
        padding: 40px 18px 40px;
        border-radius: 24px 24px 0 0;
        transform: translate3d(0, 100%, 0);
    }

    .alert-box.open {
        transform: translate3d(0, 0, 0);
    }

    .alert-box .title {
        font-size: 18px;
        line-height: 24px;
    }

    .alert-box .message {
        font-size: 14px;
        line-height: 24px;
        font-weight: 400;
        padding: 24px 0 55px;
    }

    .alert-box .btn-box {
        margin: 0 -4px;
    }

    .alert-box .btn-box button {
        margin: 0 4px;
    }
}

.toast-list {
    position: fixed;
    right: 30px;
    top: 100px;
    display: flex;
    flex-direction: column-reverse;
    z-index: 99999;
}

.toast-list li {
    position: relative;
    width: 380px;
    height: 0;
    transition: height 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    -outline: 1px solid red;
}

.toast-list .item {
    position: absolute;
    width: 100%;
    min-height: 72px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 24px;
    margin-bottom: 10px;
    padding: 15px 130px 15px 24px;
    border-radius: 3px;
    box-sizing: border-box;
    background: #00BA88;
    display: flex;
    align-items: center;
}

.toast-list .item button {
    position: absolute;
    right: 24px;
    top: 50%;
    width: 90px;
    height: 40px;
    font-size: 14px;
    font-weight: 700;
    color: #00BA88;
    line-height: 40px;
    margin-top: -20px;
    border-radius: 20px;
    background: #fff;
}

.toast-list .item.error {
    background: #F81542;
}

.toast-list .item.error button {
    color: #F81542;
}

.toast-list li.show .item {
    transform: translate3d(0, 0, 0);
}

.toast-list li.remove {
    height: 0 !important;
    pointer-events: none;
}

@media (min-width: 768px) {
    .toast-list .item {
        transform: translate3d(100%, 0, 0) translate3d(30px, 0, 0);
        transition: transform 0.65s 0.1s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .toast-list li.remove .item {
        opacity: 0;
        transform: translate3d(100%, 0, 0) translate3d(50px, 0, 0);
        transition: opacity 0.3s, transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
    }
}

@media (max-width: 767px) {
    .toast-list {
        left: 18px;
        right: 18px;
        top: auto;
        bottom: 8px;
        flex-direction: column;
    }

    .toast-list li {
        width: auto;
        transition-duration: 0.5s;
    }

    .toast-list .item {
        min-height: 47px;
        font-size: 13px;
        line-height: 18px;
        padding: 13px 50px 13px 24px;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.65s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .toast-list .item button {
        width: 56px;
        right: 0;
        top: 0;
        bottom: 0;
        height: auto;
        text-indent: -999em;
        margin: 0;
        border-radius: 0;
        box-sizing: border-box;
        background: url("../../../resource/images/icon-close-toast.svg") no-repeat 50% 50%;
        overflow: hidden;
        opacity: 0.5;
    }

    .toast-list li.remove {
        transition: height 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    }

    .toast-list li.remove .item {
        opacity: 0;
        transition: opacity 0.25s;
    }
}

/* dimmed */
.dimmed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.dimmed.show {
    opacity: 1;
    visibility: visible;
}

/* close button */
.btn-close {
    position: absolute;
    right: 16px;
    top: 16px;
    width: 42px;
    height: 42px;
    text-indent: -999em;
    -background: red;
    overflow: hidden;
}

.btn-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    background: url("../../../resource/images/btn-layer-close.svg") no-repeat 0 0/100%;
}

@media (max-width: 767px) {
    .btn-close {
        right: 8px;
        top: 8px;
        opacity: 0.4;
    }
}

.btn-close-fix {
    position: fixed;
    right: 15px;
    top: 15px;
    width: 60px;
    height: 60px;
    text-indent: -999em;
    -background: red;
    overflow: hidden;
}

.btn-close-fix span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    background: url("../../../resource/images/btn-layer-close-white.svg") no-repeat 0 0/100%;
}

@media (max-width: 767px) {
    .btn-close-fix {
        right: 0;
        top: 0;
    }
}

.detail-layer-dimmed {
    background: rgba(0, 0, 0, 0.7);
    z-index: 7000 !important;
}

@media (max-width: 767px) {
    .detail-layer-dimmed {
        display: none;
    }
}

.detail-layer-wrap {
    z-index: 7001 !important;
}

.detail-layer-wrap.body-view {
    background: rgba(0, 0, 0, 0);
}

.detail-layer-wrap:before {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border-radius: 10px;
    background-color: #fff;
    background-size: 50px;
    background-position: 50% 50%;
    opacity: 0;
    transition: opacity 0.25s;
}

.detail-layer-wrap .detail-layer {
    position: absolute;
    left: 50%;
    top: auto;
    width: 1200px;
    min-height: 100vh;
    margin-top: 31px;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 25vh, 0);
}

.detail-layer-wrap .detail-layer:after {
    position: absolute;
    left: 0;
    bottom: -31px;
    width: 1px;
    height: 31px;
    background: rgba(0, 0, 0, 0);
    content: '';
}

.detail-layer-wrap .detail-layer .store-contents {
    margin: 0;
}

.detail-layer-wrap .detail-layer .store-view {
    width: 100%;
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.detail-layer-wrap .detail-layer .store-view .store-detail {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
}

.detail-layer-wrap .btn-close {
    position: fixed;
    top: 20px;
    right: 20px;
}

.detail-layer-wrap.ready:before {
    opacity: 1;
}

.detail-layer-wrap.show .detail-layer {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    transition: opacity 0.25s, visibility 0.01s, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.detail-layer-wrap:not(.display) .store-detail .item-editor,
  .detail-layer-wrap:not(.display) .store-detail .detail-review,
  .detail-layer-wrap:not(.display) .store-detail .detail-related,
  .detail-layer-wrap:not(.display) .store-detail .detail-recommend,
  .detail-layer-wrap:not(.display) .store-detail .detail-guide,
  .detail-layer-wrap:not(.display) .store-detail .detail-popular {
    display: none;
}

@media (min-width: 768px) {
    .detail-layer-wrap .store-header {
        display: none;
    }

    .detail-layer-wrap.display .detail-layer {
        transform: translate3d(-50%, 0, 0);
    }

    .detail-layer-wrap.display.show .detail-layer {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.2s, visibility 0.01s;
    }

    .detail-layer-wrap.display.hide .detail-layer {
        opacity: 0;
        transition: opacity 0.15s, visibility 0.15s;
    }

    .detail-layer-wrap:not(.show) .detail-layer {
        min-height: 0;
    }

    .detail-layer-wrap .top-button-wrap {
        position: fixed;
        left: 50%;
        bottom: 0;
        width: 1200px;
        margin-left: -565px;
        background: red;
    }

    .detail-layer-wrap .top-button-wrap .top-button {
        position: absolute;
        margin-right: -63px;
    }
}

@media (max-width: 767px) {
    .detail-layer-wrap {
        position: static;
        -z-index: auto !important;
        transition: background-color 0.3s ease-out;
    }

    .detail-layer-wrap:before {
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        background-size: 30px;
    }

    .detail-layer-wrap .detail-layer {
        position: relative;
        left: 0;
        width: 100%;
        margin-top: 0;
        border-radius: 0;
        opacity: 1;
        transform: translate3d(100%, 0, 0);
        transition-duration: 0.5s;
    }

    .detail-layer-wrap .detail-layer .store-header.hold-expand .header-main {
        transform: none;
    }

    .detail-layer-wrap .detail-layer .store-view .store-detail {
        border-radius: 0;
    }

    body > .detail-layer-wrap {
        position: fixed;
        overflow: hidden;
    }

    body > .detail-layer-wrap .store-contents {
        overflow: visible;
    }

    body > .detail-layer-wrap .mobile-buy {
        position: sticky;
        margin: 0 -18px;
    }

    #wrap > .detail-layer-wrap .detail-layer {
        transform: none;
    }

    .detail-layer-wrap.ready {
        background: rgba(0, 0, 0, 0.7);
    }

    .detail-layer-wrap.show {
        background: rgba(0, 0, 0, 0.7);
    }

    .detail-layer-wrap.show .detail-layer {
        transform: translate3d(0, 0, 0);
        transition-duration: 0.6s;
    }

    .detail-layer-wrap.display.hide {
        background: rgba(0, 0, 0, 0);
        transition-duration: 0.45s;
    }

    .detail-layer-wrap.display.hide .detail-layer {
        transform: translate3d(100%, 0, 0);
        transition-duration: 0.35s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    .detail-layer-wrap > .btn-close,
      .detail-layer-wrap .top-button-wrap {
        display: none;
    }

    .detail-layer-wrap:not(.hide) ~ *:not(.store-footer) {
        display: none;
    }
}

.smooth-toggle-mask {
    position: relative;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.smooth-toggle-mask > .toggle-con {
    display: block !important;
}

.smooth-toggle-mask > * {
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.smooth-toggle-mask.ready > * {
    opacity: 1;
    transition: opacity 0.5s;
}

.smooth-toggle-mask:not(.open) > * {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.draggable {
    user-select: none;
    -ms-user-select: none;
}

.draggable.overflow {
    cursor: -webkit-grab;
    cursor: grab;
}

.draggable.dragging {
    pointer-events: none !important;
}

html.dragging {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

[data-lazy]:not([data-lazy*="grouped"]),
[data-lazy*="grouped"] > * {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.19, 0.92, 0.32, 1);
}

[data-lazy*="grouped"] *:nth-child(1) {
    transition-delay: 150ms;
}

[data-lazy*="grouped"] *:nth-child(2) {
    transition-delay: 300ms;
}

[data-lazy*="grouped"] *:nth-child(3) {
    transition-delay: 450ms;
}

[data-lazy*="grouped"] *:nth-child(4) {
    transition-delay: 600ms;
}

[data-lazy*="grouped"] *:nth-child(5) {
    transition-delay: 750ms;
}

[data-lazy*="grouped"] *:nth-child(6) {
    transition-delay: 900ms;
}

[data-lazy="left"],
[data-lazy*="grouped"][data-lazy*="left"] > *:not([data-lazy-self="opacity"]) {
    transform: translate3d(100px, 0, 0);
}

[data-lazy="top"],
[data-lazy*="grouped"][data-lazy*="top"] > *:not([data-lazy-self="opacity"]) {
    transform: translate3d(0, 150px, 0);
}

[data-lazy]:not([data-lazy*="grouped"]).show,
[data-lazy*="grouped"].show > * {
    opacity: 1 !important;
}

[data-lazy]:not([data-lazy*="grouped"])[data-lazy*="left"].show,
[data-lazy]:not([data-lazy*="grouped"])[data-lazy*="top"].show,
[data-lazy*="grouped"][data-lazy*="left"].show > *,
[data-lazy*="grouped"][data-lazy*="top"].show > * {
    transform: translate3d(0, 0, 0) !important;
}

@media (max-width: 767px) {
    [data-lazy="top"],
  [data-lazy*="grouped"][data-lazy*="top"] > *:not([data-lazy-self="opacity"]) {
        transform: translate3d(0, 100px, 0);
    }
}

/* fake scroll */
@media (min-width: 768px) {
    .hidden-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hidden-scroll::-webkit-scrollbar {
        width: 0;
    }
}

.hoverable .fake-scroller {
    overflow: -moz-scrollbars-none !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.hoverable .fake-scroller::-webkit-scrollbar {
    width: 0;
}

.fake-scroll-track {
    position: absolute;
    right: 12px;
    top: 20px;
    width: 6px;
    height: calc(100% - 40px);
    background: rgba(0, 0, 0, 0);
    z-index: 1;
}

.fake-scroll-track .fake-scroll-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background: #FFB800;
    cursor: pointer;
    border-radius: 4px;
}

@media (max-width: 767px) {
    .fake-scroll-track {
        right: 9px;
        top: 18px;
        height: calc(100% - 36px);
        width: 6px;
    }
}

.touchable .fake-scroll-track {
    display: none;
}

/* swiper */
.slide-pages {
    height: 22px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    line-height: 22px;
    margin-left: 2px;
    padding: 0 10px;
    border-radius: 11px;
    background: rgba(44, 42, 38, 0.8);
    display: inline-block;
}

.slide-pages em, .slide-pages span {
    font-weight: 700;
}

.swiper-wrapper {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.swiper-wrapper [data-swiper-parallax] {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.swiper-container {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
  /* Fix of Webkit flickering */
    z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
    flex-direction: column;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
    flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    margin: 0 auto;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

.swiper-slide-invisible-blank {
    visibility: hidden;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
    height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
}

/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
  /* For Firefox */
    -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
    scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
    scroll-snap-type: y mandatory;
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));
    text-indent: -999em;
    overflow: hidden;
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    left: 10px;
    right: auto;
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
    content: 'prev';
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    right: 10px;
    left: auto;
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
    content: 'next';
}

.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
    --swiper-navigation-color: #ffffff;
}

.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
    --swiper-navigation-color: #000000;
}

.swiper-button-lock {
    display: none;
}

/* Scrollbar */
.swiper-scrollbar {
    position: relative;
    -ms-touch-action: none;
    background: rgba(0, 0, 0, 0);
}

.swiper-container-horizontal > .swiper-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    z-index: 50;
    height: 6px;
    width: auto;
}

.swiper-container-vertical > .swiper-scrollbar {
    position: absolute;
    right: 3px;
    top: 1%;
    z-index: 50;
    width: 5px;
    height: 98%;
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    border-radius: 3px;
    background: #FFB800;
    left: 0;
    top: 0;
    cursor: pointer;
}

.swiper-scrollbar-drag:before {
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;
    content: '';
    background: rgba(0, 0, 0, 0);
}

.swiper-scrollbar-cursor-drag {
    cursor: move;
}

.swiper-scrollbar-lock {
    display: none;
}

.swiper-container-fade.swiper-container-free-mode .swiper-slide {
    transition-timing-function: ease-out;
}

.swiper-container-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}

.swiper-container-fade .swiper-slide .swiper-slide {
    pointer-events: none;
}

.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto;
}

.swiper-pagination {
    height: 10px;
    text-align: center;
}

.swiper-pagination-bullet {
    position: relative;
    width: 10px;
    height: 10px;
    vertical-align: top;
    padding: 2px;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
}

.swiper-pagination-bullet:before {
    width: 6px;
    height: 6px;
    content: '';
    -border: 1px solid #979797;
    background: #000;
    border-radius: 100%;
    box-sizing: border-box;
    display: block;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0.6;
}

.swiper-pagination-bullet-active:before {
    opacity: 1;
}

.body-view, .body-bag, .body-pay {
    background-color: #e0e0e0;
}

#wrap {
    max-width: 1200px;
    margin: 0 auto;
    /*min-width: 1360px;*/
}

@media (max-width: 767px) {
    #wrap {
        min-width: 0;
        padding-bottom: 60px;
    }

    .body-view #wrap {
        padding-bottom: 84px;
    }

    html.has-bottom-layer .body-bag #wrap,
      html.has-bottom-layer .body-pay #wrap {
        padding-bottom: 85px;
    }

    .body-policy #wrap {
        padding-bottom: 0;
    }
}

/* scroll enhancement */
#scroller {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    min-width: 1360px;
}

@media (max-width: 767px) {
    #scroller {
        min-width: 0;
    }
}

.hodor {
    min-width: 1360px;
}

@media (max-width: 767px) {
    .hodor {
        min-width: 0;
    }
}

/* icon badge */
.icon-badge {
    position: absolute;
    left: 25px;
    top: 7px;
    min-width: 15px;
    height: 15px;
    font-family: 'Gilroy';
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-indent: 0;
    text-align: center;
    line-height: 15px;
    padding: 0 4px;
    border-radius: 8px;
    box-sizing: border-box;
    background: #FA4431;
}

@media (max-width: 767px) {
    .icon-badge {
        left: 32px;
        transform: translateX(-50%);
    }
}

/* top banner */
.store-top-banner {
    position: relative;
    width: 100%;
    height: 90px;
    z-index: 90;
}

.store-top-banner a {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: block;
    overflow: hidden;
}

.store-top-banner img {
    position: relative;
    left: 50%;
    height: 100%;
    display: block;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .store-top-banner {
        height: 60px;
    }
}

/* header */
.header-notice {
    width: 100%;
    height: 30px;
    font-size: 12px;
    line-height: 29px;
    text-align: center;
    background: #A6A6A6;
    overflow: hidden;
    transition: background-color 0.25s, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: auto;
}

.header-notice li {
    height: 30px;
}

.header-notice a,
  .header-notice a:hover {
    color: #fff;
}

.header-notice em {
    font-weight: 700;
    text-decoration: underline;
    padding-left: 20px;
}

html.expand-ui .header-notice {
    transform: translate3d(0, -110px, 0);
}

.body-policy .store-header .category, .body-policy .store-header .gnb, .body-policy .store-header .sub-layer {
    display: none;
}

.body-policy .store-header h1 {
    width: 1220px;
    text-align: left;
}

.body-policy .store-header h1 a {
    width: 190px;
}

@media (max-width: 767px) {
    .body-policy .store-header h1 {
        width: auto;
    }
}

.body-policy .store-tab-nav .scrollable {
    width: 1220px;
    text-align: left;
    margin: 0 auto;
}

.body-policy .store-tab-nav .scrollable a:not(.selected) {
    font-weight: 700;
}

.body-policy .store-tab-nav .scrollable a.selected {
    color: #FA4431;
}

.body-policy .store-tab-nav .bar {
    background: #FA4431;
}

.body-policy .mobile-nav {
    display: none;
}

.body-notifications .store-header h1 {
    width: auto;
    height: 51px;
    text-align: left;
    padding-top: 0;
    pointer-events: none;
}

.body-notifications .store-header h1 a:before {
    font-size: 18px;
    font-weight: 700;
    content: '알림';
    line-height: 31px;
    padding-left: 35px;
}

.body-notifications .store-header h1 svg {
    display: none;
}

.body-notifications .store-header .gnb a.back {
    display: block;
}

.body-notifications .store-header .gnb a.bag, .body-notifications .store-header .gnb a.search, .body-notifications .store-header .gnb a.mypage {
    display: none;
}

.body-notifications .store-contents {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.common-slide-group {
    user-select: none;
    -ms-user-select: none;
}

.common-slide-group .list-slide-item {
    min-height: 100vh;
    box-sizing: border-box;
}

.store-header {
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 90;
    pointer-events: none;
}

.store-header .header-main {
    position: relative;
    height: 80px;
    color: #000;
    text-align: center;
    border-bottom: 1px solid #F0F1F4;
    box-sizing: border-box;
    background: #fff;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: auto;
}

html.expand-ui .store-header .header-main {
    transform: translate3d(0, -80px, 0);
}

html.expand-ui .store-header.notice .header-main {
    transform: translate3d(0, -110px, 0);
}

@media (min-width: 768px) {
    .store-header.overlay .header-notice {
        background: rgba(20, 21, 23, 0.8);
    }

    .store-header.overlay .header-main {
        background: rgba(255, 255, 255, 0.1);
        border-bottom-color: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        transition: color 0.25s, border-bottom-color 0.15s, background-color 0.25s, transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .sticky-header .store-header .header-notice, .store-header.sub-layer-open .header-notice,
    .hoverable .store-header:hover .header-notice {
        background: #A6A6A6;
    }

    .sticky-header .store-header .header-main, .store-header.sub-layer-open .header-main,
    .hoverable .store-header:hover .header-main {
        color: #000 !important;
        border-bottom-color: #F0F1F4;
        background: #fff;
    }
}

.store-header h1 {
    position: relative;
    width: 190px;
    margin: 0 auto;
    padding-top: 15px;
    mix-blend-mode: none;
}

.store-header h1 a {
    color: inherit;
    padding: 10px;
    box-sizing: border-box;
    display: block;
}

.store-header h1 img {
    display: block;
}

.store-header .category {
    position: absolute;
    left: 18px;
    top: 20px;
    font-size: 0;
    white-space: nowrap;
}

.store-header .category a {
    position: relative;
    font-family: 'Gilroy';
    font-size: 18px;
    font-weight: 600;
    color: inherit;
    line-height: 22px;
    padding: 10px 12px;
    display: inline-block;
}

.store-header .category a:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 30px;
    content: '';
}

.store-header .category a.current {
    font-weight: 700;
}

.store-header .category .bar {
    position: absolute;
    left: 0;
    bottom: -17px;
    width: 0;
    height: 4px;
    border-radius: 2px;
    background: #FFB800;
    transform-origin: 0 0;
    pointer-events: none;
}

.store-header .category.mobile {
    display: none;
}

.store-header .gnb {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 0;
    white-space: nowrap;
}

.store-header .gnb a {
    position: relative;
    width: 49px;
    height: 43px;
    line-height:43px;
    vertical-align: top;
    display: inline-block;
    overflow: hidden;
}
.store-header .gnb a i{
    font-weight:300;
    font-size:24px;
}
.store-header .gnb a em{
    left:30px;
    top:0;
}

.store-header .gnb a.back,
    .store-header .gnb a.add,
    .store-header .gnb a.ordering {
    display: none;
}

@media (min-width: 768px) {
    .store-header .gnb.mobile {
        display: none;
    }
}

@media (min-width: 768px) {
    .store-header h2,
    .store-header .listed-nav,
    .store-header .gnb a.search {
        display: none;
    }
}

@media (max-width: 767px) {
    .store-header {
        min-width: 0;
    }

    .store-header .header-notice {
        height: 25px;
        font-size: 11px;
        line-height: 25px;
    }

    .store-header .header-notice li {
        height: 25px;
    }

    .store-header .header-notice em {
        padding-left: 15px;
    }

    html.expand-ui .store-header .header-notice {
        transform: translate3d(0, -71px, 0);
    }

    .store-header .header-main {
        height: 46px;
        color: #000 !important;
        -box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    html.expand-ui .store-header .header-main {
        transform: translate3d(0, -46px, 0);
    }

    html.expand-ui .store-header.notice .header-main {
        transform: translate3d(0, -71px, 0);
    }

    .store-header h1 {
        position: absolute;
        left: 8px;
        top: 2px;
        width: auto;
        padding: 0;
    }

    .store-header h1 img {
        width: 118px;
        height: 22px;
    }

    .store-header h2 {
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        line-height: 46px;
        display: none;
    }

    .store-header h2 a {
        padding: 0 15px;
        display: inline-block;
        cursor: pointer;
    }

    .store-header .category {
        left: 12px;
        top: 3px;
        display: none;
    }

    .store-header .category a {
        position: relative;
        font-size: 14px;
        font-weight: 700;
        line-height: 20px;
        padding: 10px 6px;
    }

    .store-header .category a.current:after {
        left: 6px;
        right: 6px;
        top: auto;
        bottom: -3px;
        height: 4px;
        border-radius: 2px;
        background: #FFB800;
    }

    .store-header .category .bar {
        display: none;
    }

    .store-header .listed-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 60px;
        background: rgba(0, 0, 0, 0);
        visibility: hidden;
        transition-property: background-color, visibility;
        overflow: hidden;
    }

    .store-header .listed-nav,
        .store-header .listed-nav .scroll {
        transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .store-header .listed-nav .scroll {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translate3d(0, -101%, 0);
        transition-property: transform;
    }

    .store-header .listed-nav ul:last-of-type {
        padding-bottom: 100px;
    }

    .store-header .listed-nav h3,
        .store-header .listed-nav li {
        border-bottom: 1px solid #f3f3f3;
    }

    .store-header .listed-nav a {
        height: 50px;
        font-size: 15px;
        text-align: center;
        line-height: 50px;
    }

    .store-header .listed-nav h3 a {
        font-weight: 600;
    }

    .store-header .listed-nav a.current {
        color: #FFB800;
    }

    .store-header .listed-nav .close {
        position: sticky;
        bottom: 0;
        width: 100%;
        height: 60px;
        font-size: 15px;
        font-weight: 700;
        text-align: center;
        line-height: 60px;
        background: #f9f9f9;
    }

    .store-header .listed-nav.open {
        background: rgba(0, 0, 0, 0.5);
        visibility: visible;
    }

    .store-header .listed-nav.open .scroll {
        transform: translate3d(0, 0, 0);
    }

    .store-header .gnb {
        left: 0;
        right: 0;
        top: 3px;
    }

    .store-header .gnb a {
        position: absolute;
        top: 0;
        width: 40px;
        height: 40px;
    }

    .store-header .gnb a:before {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 20px;
        height: 20px;
        content: '';
        background: url("../../../resource/images/set-icon-header-m.png") no-repeat 0 0/auto 20px;
    }

    .store-header .gnb a.wish, .store-header .gnb a.mypage {
        display: none;
    }

    .store-header .gnb a.search {
        right: 45px;
    }

    .store-header .gnb a.search:before {
        background: none;
    }

    .store-header .gnb a.bag {
        right: 6px;
    }

    .store-header .gnb a.bag:before {
        background:none;
    }

    .store-header .gnb a.ordering {
        right: 85px;
    }

    .store-header .gnb a.ordering:before {
        background: none;
    }

    .store-header .gnb a.add {
        right: 125px;
    }

    .store-header .gnb a.add:before {
        background: none;
    }

    .store-header .gnb a.back {
        left: 6px;
    }

    body:not(.body-home):not(.body-cscenter):not(.body-policy) .store-header h1 {
        position: absolute;
        left: -999em;
    }

    .body-collection-landing .store-header .category.mobile,
      .body-store-landing .store-header .category.mobile {
        display: block;
    }

    .body-store .store-header h2,
      .body-store-index .store-header h2,
      .body-collection .store-header h2 {
        display: block;
    }

    .body-store .store-header h2 a,
        .body-store-index .store-header h2 a,
        .body-collection .store-header h2 a {
        position: relative;
        padding-right: 25px;
    }

    .body-store .store-header h2 a:after,
          .body-store-index .store-header h2 a:after,
          .body-collection .store-header h2 a:after {
        position: absolute;
        right: 10px;
        top: 38%;
        width: 11px;
        height: 11px;
        content: '';
        background: url("../../../resource/images/icon-arrow-down.png") no-repeat 0 0/11px;
    }

    .body-store .store-header h2 a.opened:after,
          .body-store-index .store-header h2 a.opened:after,
          .body-collection .store-header h2 a.opened:after {
        transform: scale(-1);
    }

    .body-store .store-header .gnb a.back,
      .body-store-index .store-header .gnb a.back,
      .body-collection .store-header .gnb a.back {
        display: block;
    }

    .body-wish .store-header h2,
      .body-mypage-landing .store-header h2 {
        text-align: left;
        padding-left: 20px;
        display: block;
    }

    .body-wish .store-header .gnb a.add,
      .body-wish .store-header .gnb a.ordering {
        display: block;
    }

    .body-view .store-header h2 {
        display: block;
    }

    .body-view .store-header h2 a {
        position: relative;
        max-width: calc(100vw - 120px);
        padding-right: 25px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .body-view .store-header h2 a:after {
        position: absolute;
        right: 10px;
        top: 38%;
        width: 11px;
        height: 11px;
        content: '';
        background: url("../../../resource/images/icon-arrow-down.png") no-repeat 0 0/11px;
        transform: rotate(-90deg);
    }

    .body-view .store-header .gnb a.back {
        display: block;
    }

    .body-view .store-header .gnb a.search {
        display: none;
    }

    .body-login .store-header h2,
      .body-bag .store-header h2,
      .body-pay .store-header h2,
      .body-mypage .store-header h2 {
        display: block;
    }

    .body-login .store-header .gnb a.back,
      .body-bag .store-header .gnb a.back,
      .body-pay .store-header .gnb a.back,
      .body-mypage .store-header .gnb a.back {
        display: block;
    }

    .body-login .store-header .gnb a.search,
      .body-login .store-header .gnb a.bag,
      .body-bag .store-header .gnb a.search,
      .body-bag .store-header .gnb a.bag,
      .body-pay .store-header .gnb a.search,
      .body-pay .store-header .gnb a.bag,
      .body-mypage .store-header .gnb a.search,
      .body-mypage .store-header .gnb a.bag {
        display: none;
    }

    .body-search .store-header h2 {
        text-align: left;
        padding-left: 47px;
        display: block;
    }

    .body-search .store-header .gnb a.back {
        display: block;
    }

    .body-cscenter .store-header h2 {
        font-size: 18px;
        font-weight: normal;
        text-align: left;
        padding-left: 144px;
        display: block;
    }

    .body-cscenter .store-header .gnb a.search,
      .body-cscenter .store-header .gnb a.bag {
        display: none;
    }

    html.expand-ui .store-header.store-header-light .header-main {
        transform: none;
    }

    .store-header.store-header-light .gnb a {
        display: block;
    }

    .store-header.store-header-light h2 {
        text-align: left;
        padding-left: 47px;
        display: block;
    }

    .store-header.store-header-light h2.center {
        text-align: center;
        padding-left: 0;
    }
}

@media (min-width: 768px) {
    .body-login {
        overflow: hidden;
    }

    .body-login #wrap {
        height: 100%;
    }

    .body-login .store-container {
        height: 100%;
        margin-top: -80px;
    }

    .body-login .main-member {
        padding: calc(80px + 40px) 0 80px;
        box-sizing: border-box;
        overflow: auto;
    }

    .body-login.block-scroll {
        padding-right: 0 !important;
    }
}

.store-header-sub-layer-dimmed {
    z-index: 89;
}

.sub-layer {
    position: absolute;
    left: 0;
    right: 0;
    top: 80px;
    height: 0;
    -height: 611px;
    text-align: left;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    z-index: 89;
}

.sub-layer.open:before {
    opacity: 1;
}

.sub-layer .sub-title {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 25px;
    padding-bottom: 5px;
}

.sub-layer .sub-title a {
    display: inline-block;
}

.sub-layer a {
    transition: color 0.25s;
}

.sub-layer a em {
    font-weight: 700;
    color: #FA4431;
}

.sub-layer .sub-box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    -height: 611px;
    padding: 36px 0 100px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    z-index: 0;
}

.sub-layer .sub-box > .swiper-wrapper > .swiper-slide {
    width: auto;
    box-sizing: border-box;
}

.sub-layer .sub-box > .swiper-wrapper > .swiper-slide:first-child {
    padding-left: 40px;
}

.sub-layer .sub-box > .swiper-wrapper > .swiper-slide:last-child {
    padding-right: 40px;
}

.sub-layer .sub-box > .swiper-wrapper > .swiper-slide:not(:first-child):before {
    position: absolute;
    left: 0;
    top: 45px;
    bottom: -10px;
    content: '';
    border-left: 1px solid #e4e4e4;
}

.sub-layer .sub-box .category-list {
    flex: 1;
    font-size: 0;
    white-space: nowrap;
}

.sub-layer .sub-box .category-list .item {
    position: relative;
    min-width: 160px;
    min-height: 90px;
    vertical-align: top;
    display: inline-block;
}

.sub-layer .sub-box .category-list .item h4 {
    display: none;
}

.sub-layer .sub-box .category-list .item ul {
    vertical-align: top;
    margin-top: 10px;
    padding-right: 60px;
    display: inline-block;
}

.sub-layer .sub-box .category-list .item ul li {
    font-size: 14px;
    line-height: 32px;
}

.sub-layer .sub-box .category-list .item ul li a {
    position: relative;
    display: inline-block;
}

.sub-layer .sub-box .category-list .item ul li a:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    content: '';
    border-bottom: 1px solid currentColor;
    opacity: 0;
    transition: opacity 0.1s;
}

.sub-layer .sub-box .category-list .item ul li a.current:before,
              .hoverable .sub-layer .sub-box .category-list .item ul li a:hover:before {
    opacity: 1;
    transition-duration: 0.2s;
}

.sub-layer .sub-box .store-list {
    padding: 0 15px 0 55px;
}

.sub-layer .sub-box .store-list .sub-title a {
    position: relative;
    color: #00BA88;
    padding-right: 16px;
}

.sub-layer .sub-box .store-list .sub-title a:after {
    position: absolute;
    right: 0;
    top: 7px;
    width: 10px;
    height: 10px;
    content: '';
    background: url("../../../resource/images/icon-arrow-right-green.svg") no-repeat;
}

.sub-layer .sub-box .store-list ul {
    height: 500px;
    margin-top: -8px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 73px);
    grid-template-columns: 1fr;
}

.sub-layer .sub-box .store-list ul li {
    margin-top: 23px;
    padding-right: 40px;
}

.sub-layer .sub-box .store-list ul a {
    display: flex;
}

.sub-layer .sub-box .store-list ul a .info {
    font-size: 12px;
    line-height: 18px;
    padding: 5px 15px 0;
}

.sub-layer .sub-box .store-list ul a .info em {
    font-size: 15px;
    font-weight: normal;
    color: #000;
    line-height: 22px;
    display: block;
}

.sub-layer .sub-box .store-list ul a .info em span {
    padding-left: 0.5em;
}

.sub-layer .sub-box .store-list ul a .info .items {
    color: #898a8d;
}

.sub-layer .sub-box .store-list ul a .info .sale {
    color: #571ee9;
}

.sub-layer .sub-box .extra {
    padding-left: 55px;
    padding-top: 45px;
}

.sub-layer .sub-box .extra .sub-title {
    padding-bottom: 27px;
}

.sub-layer .sub-box .extra ul {
    font-size: 0;
}

.sub-layer .sub-box .extra li {
    width: 400px;
    vertical-align: top;
    display: inline-block;
}

.sub-layer .sub-box .extra li:not(:last-child) {
    padding-right: 35px;
}

.sub-layer .sub-box .extra li a em {
    color: inherit;
}

.sub-layer .sub-box .extra li figure {
    margin-bottom: 22px;
}

.sub-layer .sub-box .extra li figure img {
    width: 100%;
    display: block;
    border-radius: 3px;
}

.sub-layer .sub-box .extra li .date {
    font-family: 'Gilroy';
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: #2C2926;
    line-height: 16px;
    display: block;
}

.sub-layer .sub-box .extra li .name {
    font-size: 24px;
    font-weight: 600;
    line-height: 30px;
    margin: 5px 0 6px;
    display: block;
}

.sub-layer .sub-box .extra li .desc {
    max-height: 48px;
    font-size: 15px;
    color: #2C2926;
    word-break: keep-all;
    line-height: 24px;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sub-layer .sub-box .extra .swiper-pagination {
    position: absolute;
    right: 0;
    top: 18px;
}

.sub-layer .sub-box .extra .swiper-pagination .swiper-pagination-bullet:before {
    background: #fff;
}

.sub-layer .sub-box .swiper-scrollbar {
    left: 40px;
    right: 40px;
}

.sub-layer .search {
    padding-top: 74px;
    display: block;
}

.sub-layer .search .search-wrap {
    width: 845px;
    margin: 0 auto;
}

.sub-layer .search .input-group {
    position: relative;
    height: 60px;
}

.sub-layer .search .input-group input[type="search"] {
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    padding: 0 20px 0 50px;
    border-radius: 3px;
    background: #f8f7f6 url("../../../resource/images/icon-search-input.svg") no-repeat 16px 50%;
}

.sub-layer .search .input-group input[type="search"]::placeholder {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2);
}

.sub-layer .search .input-group input[type="search"]::-webkit-input-placeholder {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2);
}

.sub-layer .search .input-group input[type="search"]:-moz-placeholder {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2);
}

.sub-layer .search .input-group input[type="search"]::-moz-placeholder {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2);
}

.sub-layer .search .input-group input[type="search"]:-ms-input-placeholder {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2);
}

.sub-layer .search .keyword-list {
    margin-top: 32px;
    display: flex;
}

.sub-layer .search .keyword-list .item {
    position: relative;
    width: 260px;
    margin-right: 20px;
    padding-left: 20px;
}

.sub-layer .search .keyword-list .item:first-child {
    padding-left: 0;
}

.sub-layer .search .keyword-list .item:last-child {
    margin-right: 0;
}

.sub-layer .search .keyword-list .item.popular li:first-child a span {
    font-weight: 600;
}

.sub-layer .search .keyword-list .item.popular a {
    position: relative;
    padding-left: 26px;
}

.sub-layer .search .keyword-list .item.popular a:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #5489F0;
    padding-right: 0.5em;
}

.sub-layer .search .keyword-list .item.popular li:nth-child(1) a:before {
    content: "01";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(2) a:before {
    content: "02";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(3) a:before {
    content: "03";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(4) a:before {
    content: "04";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(5) a:before {
    content: "05";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(6) a:before {
    content: "06";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(7) a:before {
    content: "07";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(8) a:before {
    content: "08";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(9) a:before {
    content: "09";
}

.sub-layer .search .keyword-list .item.popular li:nth-child(10) a:before {
    content: '10';
}

.sub-layer .search .keyword-list .item.recommend {
    width: 285px;
}

.sub-layer .search .keyword-list .item:not(:first-child):before {
    position: absolute;
    left: 0;
    top: 51px;
    bottom: 5px;
    content: '';
    border-left: 1px solid #f3f3f3;
}

.sub-layer .search .keyword-list .item h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    padding-bottom: 14px;
}

.sub-layer .search .keyword-list .item ul,
        .sub-layer .search .keyword-list .item ol {
    width: 100%;
}

.sub-layer .search .keyword-list .item li {
    position: relative;
    width: 100%;
}

.sub-layer .search .keyword-list .item a {
    font-size: 15px;
    line-height: 32px;
    box-sizing: border-box;
    display: block;
}

.sub-layer .search .keyword-list .item a span {
    position: relative;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    display: inline-block;
}

.sub-layer .search .keyword-list .item a span:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    content: '';
    border-top: 1px solid #000;
    opacity: 0;
    transition: opacity 0.1s;
}

.hoverable .sub-layer .search .keyword-list .item a:hover span:after {
    opacity: 1;
    transition-duration: 0.2s;
}

.sub-layer .search .keyword-list .item .delete {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    text-indent: -999em;
    overflow: hidden;
}

.sub-layer .search .keyword-list .item .delete:before {
    position: absolute;
    left: 6px;
    top: 6px;
    width: 20px;
    height: 20px;
    content: '';
    background: url("../../../resource/images/set-icon-delete.png") no-repeat 0 0/20px auto;
    overflow: hidden;
}

.sub-layer .search .keyword-list .item .hoverable .delete:hover:before {
    background-position: 0 -20px;
}

.sub-layer .search .keyword-list .item.recent a {
    padding-right: 40px;
}

.sub-layer .search .keyword-list .item.recommend h3 {
    padding-bottom: 24px;
}

.sub-layer .search .keyword-list .item.recommend ul {
    font-size: 0;
}

.sub-layer .search .keyword-list .item.recommend li {
    width: auto;
    max-width: calc(100% - 30px);
    margin-bottom: 18px;
    display: inline-block;
}

.sub-layer .search .keyword-list .item.recommend a {
    max-width: 100%;
    height: 28px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 28px;
    margin-right: 15px;
    padding: 0 17px;
    border-radius: 14px;
    background: #000;
    transition: background-color 0.15s ease-out;
}

.hoverable .sub-layer .search .keyword-list .item.recommend a:hover {
    background: #FFB800;
    transition-duration: 0.25s;
}

.sub-layer .search .keyword-list .item p.no-data {
    font-size: 15px;
    color: #CACDD2;
    line-height: 32px;
}

.sub-layer .search .keyword-list .item p.updated {
    font-size: 10px;
    line-height: 12px;
    margin-top: 8px;
}

.sub-layer .search .keyword-list .item p.delete-all {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 10px;
    font-weight: 700;
    text-decoration: underline;
    line-height: 26px;
    padding: 0 10px;
}

.search-layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
    transition: background-color 0.15s;
    pointer-events: none;
}

.search-layer .input-bar {
    position: relative;
    top: 200px;
    width: 845px;
    height: 60px;
    margin: 0 auto;
    pointer-events: auto;
}

.search-layer .input-bar input[type="search"] {
    width: 100%;
    height: 100%;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    padding: 0 20px 0 50px;
    border-radius: 3px;
    background: #f8f7f6 url("../../../resource/images/icon-search-input.svg") no-repeat 16px 50%;
}

.search-layer .input-bar .clear {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 60px;
    text-indent: -999em;
    background: url("../../../resource/images/icon-clear-2.svg") no-repeat 50% 50%/25px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.search-layer .input-bar input[type="search"].has-value {
    background-color: #fff;
}

.search-layer .input-bar input[type="search"].has-value ~ .clear {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s, visibility 0.15s;
}

.search-layer .suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: -3px;
    padding: 3px 0 17px;
    border-radius: 0 0 3px 3px;
    background: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.search-layer .suggestions a {
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    padding: 0 20px 0 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color 0.15s, background-color 0.15s;
}

.search-layer .suggestions a em {
    font-weight: 700;
    transition: color 0.15s;
}

.search-layer .suggestions a:active,
      .hoverable .search-layer .suggestions a:hover {
    background: rgba(0, 0, 0, 0.05);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.search-layer.show {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    transition-duration: 0.3s;
}

.search-layer.show .suggestions {
    opacity: 1;
    visibility: visible;
}

.search-layer.hide {
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
}

.search-layer.hide .input-bar {
    pointer-events: none;
}

.search-layer.hide .input-bar .clear {
    opacity: 0 !important;
}

.search-layer.hide .suggestions {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 767px) {
    .search-layer {
        top: 46px;
    }

    .search-layer .input-bar {
        width: auto;
        margin-top: -46px;
    }

    .search-layer .input-bar input[type="search"] {
        font-size: 15px;
        border-radius: 0;
        background-color: #fff;
    }

    .search-layer .input-bar .clear {
        width: 50px;
        background-position: 10px 50%;
        background-size: 23px;
    }

    .search-layer .suggestions {
        padding-bottom: 0;
        border-radius: 0;
    }

    .search-layer .suggestions li {
        border-top: 1px solid #f3f3f3;
    }

    .search-layer .suggestions a {
        height: 50px;
        font-size: 15px;
        line-height: 50px;
        padding: 0 20px 0 50px;
    }
}

.mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    -top: 0;
    bottom: 0;
    z-index: 98;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition-property: background-color;
}

.mobile-nav .bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    background: #efefef;
    display: flex;
    pointer-events: auto;
}

.mobile-nav .bar a {
    position: relative;
    font-size: 9px;
    text-align: center;
    text-transform: uppercase;
    line-height: 14px;
    padding-top: 12px;
    flex: 1;
}

.mobile-nav .bar a:before {
    width: 25px;
    height: 25px;
    content: '';
    margin: 0 auto;
    background: url("../../../resource/images/set-icon-mobile-bar.png") no-repeat 50% 50%/auto 50px;
    display: block;
}

.body-home .mobile-nav .bar a.home, .mobile-nav .bar a.home.current,
      body[class*="body-collection"] .mobile-nav .bar a.collection, .mobile-nav .bar a.collection.current,
      body[class*="body-store"] .mobile-nav .bar a.store, .mobile-nav .bar a.store.current,
      .body-wish .mobile-nav .bar a.wish, .mobile-nav .bar a.wish.current,
      body[class*="body-mypage"] .mobile-nav .bar a.mypage, .mobile-nav .bar a.mypage.current {
    font-weight: 700;
}

.mobile-nav .bar a.home:before {
    background-position: 0 0;
}

.body-home .mobile-nav .bar a.home:before, .mobile-nav .bar a.home.current:before {
    background-position: 0 -25px;
}

.mobile-nav .bar a.collection:before {
    background-position: -25px 0;
}

body[class*="body-collection"] .mobile-nav .bar a.collection:before, .mobile-nav .bar a.collection.current:before {
    background-position: -25px -25px;
}

.mobile-nav .bar a.store:before {
    background-position: -50px 0;
}

body[class*="body-store"] .mobile-nav .bar a.store:before, .mobile-nav .bar a.store.current:before {
    background-position: -50px -25px;
}

.mobile-nav .bar a.wish:before {
    background-position: -75px 0;
}

.body-wish .mobile-nav .bar a.wish:before, .mobile-nav .bar a.wish.current:before {
    background-position: -75px -25px;
}

.mobile-nav .bar a.mypage:before {
    background-position: -100px 0;
}

body[class*="body-mypage"] .mobile-nav .bar a.mypage:before, .mobile-nav .bar a.mypage.current:before {
    background-position: -100px -25px;
}

.mobile-nav .bar a .icon-badge {
    left: 50%;
    top: 15px;
    margin-left: 3px;
    transform: none;
}

.mobile-nav .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 15px;
    line-height: 40px;
    padding: 0 0 40px;
    background: #fff;
    pointer-events: auto;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translate3d(100%, 0, 0);
    z-index: 0;
    visibility: hidden;
    transition-property: transform, visibility;
}

.mobile-nav #mobile-search {
    display: block;
    /*
        .search-wrap {
            padding-top: 75px;
            .input-group {
                position: relative; margin: 0 20px; height: 50px; background: #ddd;
                input[type="search"] {width: 100%; height: 100%; font-size: 16px; font-weight: 700; line-height: 1; padding: 0 50px 0 18px; background: #fff;}
            }
            .item {
                position: relative;
                h3 {font-size: 20px; font-weight: 700; line-height: 24px; padding: 40px 20px 17px;}
                li {position: relative;}
                a {font-size: 18px; white-space: nowrap; text-overflow: ellipsis; line-height: 40px; padding: 0 60px 0 20px; display: block; overflow: hidden; transition: background-color 0.2s; -webkit-tab-highlight-color: rgba(0, 0, 0, 0);}
                a:active {background: $c-pink;}
                .delete {position: absolute; right: 16px; top: 0; bottom: 0; width: 40px; text-indent: -999em; background: url($path +'icon-clear.svg') no-repeat 50% 50%; overflow: hidden;}
                p {font-size: 18px; line-height: 40px; padding: 0 20px;}
            }
            .item + .item {
                h3 {padding-top: 35px;}
            }
            .item:not(:last-child) {
                padding-bottom: 24px;
                ul:after {position: absolute; left: 20px; right: 20px; bottom: 0; content: ''; border-bottom: 1px solid rgba(81, 88, 94, 0.15);}
            }
            .item.recommend {
                ul {font-size: 0; padding: 0 5px 5px 20px;}
                li {max-width: calc(100% - 15px); margin: 0 15px 18px 0; display: inline-block; -background: red;}
                li a {height: 28px; font-size: 15px; line-height: 28px; padding: 0 17px; border-radius: 14px; background: $c-base; display: block;}
                li a:active {background: $c-pink;}
            }
        }*/
}

.mobile-nav #mobile-search .input-group {
    position: sticky;
    top: 46px;
    height: 60px;
    border-bottom: 1px solid #f3f3f3;
    z-index: 1;
}

.mobile-nav #mobile-search .input-group input[type="search"] {
    width: 100%;
    height: 100%;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    padding: 0 20px 0 50px;
    border-radius: 3px;
    background: #fff url("../../../resource/images/icon-search-input.svg") no-repeat 16px 50%;
}

.mobile-nav #mobile-search .input-group input[type="search"]::placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.mobile-nav #mobile-search .input-group input[type="search"]::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.mobile-nav #mobile-search .input-group input[type="search"]:-moz-placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.mobile-nav #mobile-search .input-group input[type="search"]::-moz-placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.mobile-nav #mobile-search .input-group input[type="search"]:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.mobile-nav #mobile-search .keyword-list .item {
    position: relative;
    padding: 35px 18px 20px;
}

.mobile-nav #mobile-search .keyword-list .item:not(:first-child) {
    border-top: 1px solid #f3f3f3;
}

.mobile-nav #mobile-search .keyword-list .item.popular li:first-child a span {
    font-weight: 600;
}

.mobile-nav #mobile-search .keyword-list .item.popular a {
    position: relative;
    padding-left: 26px;
}

.mobile-nav #mobile-search .keyword-list .item.popular a:before {
    position: absolute;
    left: 0;
    top: 0;
    color: #5489F0;
    padding-right: 0.5em;
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(1) a:before {
    content: "01";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(2) a:before {
    content: "02";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(3) a:before {
    content: "03";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(4) a:before {
    content: "04";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(5) a:before {
    content: "05";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(6) a:before {
    content: "06";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(7) a:before {
    content: "07";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(8) a:before {
    content: "08";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(9) a:before {
    content: "09";
}

.mobile-nav #mobile-search .keyword-list .item.popular li:nth-child(10) a:before {
    content: '10';
}

.mobile-nav #mobile-search .keyword-list .item h3 {
    font-size: 13px;
    font-weight: 700;
    line-height: 16px;
    padding-bottom: 22px;
}

.mobile-nav #mobile-search .keyword-list .item ul,
      .mobile-nav #mobile-search .keyword-list .item ol {
    width: 100%;
}

.mobile-nav #mobile-search .keyword-list .item li {
    position: relative;
    width: 100%;
}

.mobile-nav #mobile-search .keyword-list .item a {
    font-size: 15px;
    line-height: 40px;
    box-sizing: border-box;
    display: block;
}

.mobile-nav #mobile-search .keyword-list .item a span {
    position: relative;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    display: inline-block;
}

.mobile-nav #mobile-search .keyword-list .item .delete {
    position: absolute;
    right: -8px;
    top: 2px;
    height: 32px;
    width: 32px;
    text-indent: -999em;
    overflow: hidden;
}

.mobile-nav #mobile-search .keyword-list .item .delete:before {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 18px;
    height: 18px;
    content: '';
    background: url("../../../resource/images/set-icon-delete.png") no-repeat 0 0/18px auto;
    overflow: hidden;
}

.mobile-nav #mobile-search .keyword-list .item.recent a {
    padding-right: 40px;
}

.mobile-nav #mobile-search .keyword-list .item.recommend h3 {
    padding-bottom: 24px;
}

.mobile-nav #mobile-search .keyword-list .item.recommend ul {
    font-size: 0;
}

.mobile-nav #mobile-search .keyword-list .item.recommend li {
    width: auto;
    max-width: calc(100% + 6px);
    vertical-align: top;
    margin-bottom: 12px;
    display: inline-block;
}

.mobile-nav #mobile-search .keyword-list .item.recommend a {
    max-width: 100%;
    height: 32px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 32px;
    margin-right: 6px;
    padding: 0 17px;
    border-radius: 16px;
    background: #000;
    transition: background-color 0.15s ease-out;
}

.mobile-nav #mobile-search .keyword-list .item p.no-data {
    font-size: 15px;
    color: #CACDD2;
    line-height: 32px;
}

.mobile-nav #mobile-search .keyword-list .item p.updated {
    position: absolute;
    right: 18px;
    top: 34px;
    font-size: 12px;
    line-height: 16px;
}

.mobile-nav #mobile-search .keyword-list .item p.delete-all {
    position: absolute;
    right: 8px;
    top: 28px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    line-height: 26px;
    padding: 0 10px;
}

.mobile-nav,
  .mobile-nav .content {
    transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-nav[class*="-open"] {
    background: rgba(0, 0, 0, 0.5);
}

.mobile-nav.menu-open #mobile-menu,
  .mobile-nav.search-open #mobile-search {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

@media (min-width: 768px) {
    .mobile-nav {
        display: none;
    }
}

html.app-mode #wrap {
    padding-bottom: 0;
}

html.app-mode .mobile-nav {
    display: none;
}

html.app-mode .top-button {
    bottom: 20px;
}

.store-visual {
    height: 640px;
    margin-top: -80px;
    z-index: 88;
}

.store-header.notice ~ .store-visual {
    margin-top: -110px;
}

.store-visual li {
    position: relative;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

.store-visual li a {
    height: 100%;
    text-indent: -999em;
    display: block;
    overflow: hidden;
}

.store-visual .slide-info {
    position: absolute;
    right: 60px;
    bottom: 40px;
    z-index: 1;
}

.store-visual .slide-info .slide-pagination {
    position: static;
}

.store-visual .slide-info .slide-pagination .swiper-pagination-bullet {
    width: 19px;
    height: 22px;
    padding: 6px 4px 5px;
}

.store-visual .slide-info .slide-pagination .swiper-pagination-bullet:before {
    width: 11px;
    height: 11px;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.6);
}

.store-visual .slide-info .slide-pagination .swiper-pagination-bullet-active:before {
    background: rgba(44, 42, 38, 0.8);
}

.store-visual .slide-button-prev,
  .store-visual .slide-button-next {
    position: absolute;
    top: 50%;
    width: 52px;
    height: 80px;
    color: inherit;
    margin-top: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    opacity: 0.6;
    transform: translateY(-50%);
    transition: opacity 0.2s;
    z-index: 1;
}

.store-visual .slide-button-prev:hover,
    .store-visual .slide-button-next:hover {
    opacity: 1;
}

.store-visual .slide-button-prev svg,
    .store-visual .slide-button-next svg {
    width: 32px;
    height: 60px;
    display: block;
}

.store-visual .slide-button-prev svg path,
      .store-visual .slide-button-next svg path {
    stroke-width: 1.5px;
    stroke: currentColor;
}

.store-visual .slide-button-prev {
    left: 50px;
}

.store-visual .slide-button-next {
    right: 50px;
}

@media (max-width: 767px) {
    .store-visual {
        height: 286px;
        margin-top: 0;
    }

    .store-header.notice ~ .store-visual {
        margin-top: 0;
    }

    .store-visual .slide-info {
        right: 18px;
        bottom: 17px;
    }

    .store-visual .slide-info .slide-pagination {
        display: none;
    }

    .store-visual .slide-buttons {
        display: none;
    }
}

.store-tab-nav {
    position: sticky;
    top: 80px;
    z-index: 88;
    pointer-events: none;
}

.store-tab-nav[disabled] .scrollable a {
    pointer-events: none;
}

.store-tab-nav[disabled] .bar {
    display: none;
}

.store-tab-nav .mask {
    position: relative;
    height: 66px;
    background: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: auto;
    z-index: 1;
}

html.expand-ui .store-tab-nav .mask {
    transform: translate3d(0, -80px, 0);
}

.store-header.notice ~ .store-tab-nav {
    top: 110px;
}

html.expand-ui .store-header.notice ~ .store-tab-nav .mask,
    html.expand-ui .store-header.notice ~ .store-tab-nav .wish-order-box {
    transform: translate3d(0, -110px, 0);
}

.store-tab-nav .scrollable {
    position: relative;
    height: calc(66px + 20px);
    font-size: 0;
    white-space: nowrap;
    text-align: center;
    padding: 0 20px;
    overflow: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.store-tab-nav .scrollable a {
    position: relative;
    height: 66px;
    font-size: 16px;
    text-align: center;
    line-height: 66px;
    padding: 0 10px;
    display: inline-block;
    transition: color 0.25s;
}

.store-tab-nav .scrollable a.selected {
    font-weight: 700;
}

.store-tab-nav .scrollable a:not(.selected) {
    color: rgba(0, 0, 0, 0.5);
}

.hoverable .store-tab-nav .scrollable a:hover {
    color: #000;
}

.store-tab-nav .scrollable a.uncheck:after {
    position: absolute;
    left: 50%;
    bottom: 9px;
    width: 8px;
    height: 8px;
    content: '';
    margin-left: -4px;
    border-radius: 100%;
    background: #FA4431;
}

.store-tab-nav .scrollable a em {
    font-weight: 700;
    color: #FA4431;
}

.store-tab-nav.with-store-icon .mask {
    height: 106px;
}

.store-tab-nav.with-store-icon .scrollable {
    height: calc(106px + 20px);
}

.store-tab-nav.with-store-icon .scrollable a {
    width: 80px;
    height: 106px;
    font-size: 14px;
    line-height: 28px;
    padding: 13px 5px 0;
    box-sizing: border-box;
}

.store-tab-nav.with-store-icon .scrollable a.uncheck:after {
    content: none;
}

.store-tab-nav.with-store-icon .scrollable a.uncheck .store-icon:after {
    right: 4px;
    top: 3px;
}

.store-tab-nav.with-store-icon .scrollable a span {
    max-width: 100%;
    height: 31px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-tab-nav.with-store-icon .bar {
    top: calc(106px - 4px);
    height: 4px;
    border-radius: 2px;
}

@media (min-width: 768px) {
    .store-tab-nav.with-store-icon .store-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 2px;
    }

    .store-tab-nav.with-store-icon .store-icon img {
        width: 56px;
        border-width: 4px;
    }
}

.store-tab-nav.with-store-icon.more .mask {
    background-image: repeating-linear-gradient(180deg, #fff, #fff 105px, #f3f3f3 106px);
}

.store-tab-nav.with-store-icon.more .scrollable a.selected:before {
    content: none;
}

.store-tab-nav.with-store-icon.more .scrollable a.selected span {
    position: relative;
}

.store-tab-nav.with-store-icon.more .scrollable a.selected span:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    content: '';
    border-radius: 2px;
    background: #FFB800;
}

.store-tab-nav:not(.no-more):not(.more) .scrollable {
    padding-right: 40px;
}

.store-tab-nav .more {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 100%;
    text-indent: -999em;
    background: linear-gradient(270deg, #FFFFFF 36.46%, rgba(255, 255, 255, 0) 83.33%);
    display: block;
    overflow: hidden;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.store-tab-nav .more:before {
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 100%;
    content: '';
    background: url("../../../resource/images/icon-more.png") no-repeat 50% 50%/5px auto;
    pointer-events: auto;
}

.store-tab-nav.more .more,
  .store-tab-nav.no-more .more,
  .store-tab-nav:not(.more) .close {
    display: none;
}

.store-tab-nav.more:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    content: '';
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.store-tab-nav.more .mask {
    height: auto;
    background-image: repeating-linear-gradient(180deg, #fff, #fff 65px, #f3f3f3 66px);
    background-position: 0 1px;
}

.store-tab-nav.more .scrollable {
    height: auto;
    white-space: normal;
    text-align: left;
    overflow: visible;
}

.store-tab-nav.more .scrollable a.selected:before {
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(66px - 6px);
    height: 6px;
    content: '';
    border-radius: 3px;
    background: #FFB800;
}

.store-tab-nav.more .bar,
  .store-tab-nav.more .more {
    display: none;
}

.store-tab-nav .bar {
    position: absolute;
    left: 0;
    top: calc(66px - 6px);
    width: 1px;
    height: 6px;
    border-radius: 3px;
    background: #FFB800;
    transform-origin: 0 0;
    pointer-events: none;
}

.store-tab-nav .close {
    width: 100%;
    height: 60px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 60px;
    background: #f9f9f9;
}

@media (min-width: 768px) {
    .store-tab-nav.with-aside .mask {
        display: flex;
    }

    .store-tab-nav.with-aside .scrollable {
        text-align: left;
        flex: 1;
    }

    .store-tab-nav.with-aside .aside {
        position: relative;
        width: 188px;
        border-left: 1px solid #ececec;
        box-sizing: border-box;
        display: flex;
    }

    .store-tab-nav.with-aside .aside button {
        height: 100%;
        font-size: 18px;
        text-align: center;
    }

    .store-tab-nav.with-aside .aside button em {
        font-weight: 600;
        color: #FA4431;
    }

    .store-tab-nav.with-aside .aside .btn-filter {
        flex: 1;
    }

    .store-tab-nav.with-aside .aside .select-title {
        position: absolute;
        left: 0;
        right: 0;
        top: 0px;
        width: auto !important;
        height: 100%;
        border: none;
        border-radius: 0;
        background: #fff;
    }

    .store-tab-nav.with-aside .aside .select-title:after {
        width: 60px;
    }

    .store-tab-nav.with-aside .aside .select-title strong {
        font-size: 18px;
        line-height: 67px;
        padding: 0 20px;
    }

    .select-option.sort-aside-store-tab {
        width: 159px !important;
        margin: -10px 0 0 -1px;
        border-color: #ececec;
    }

    .select-option.sort-aside-store-tab.upper {
        margin-top: 10px;
    }

    .store-tab-nav.with-aside .more {
        right: 188px;
    }

    .store-tab-nav.with-aside.more .mask {
        display: block;
    }

    .store-tab-nav.with-aside.more .aside {
        display: none;
    }

    .body-wish .store-tab-nav.with-aside .aside {
        width: 335px;
    }

    .body-wish .store-tab-nav.with-aside .aside .btn-square {
        position: relative;
        width: 70px;
        text-indent: -999em;
        border-right: 1px solid #ececec;
        overflow: hidden;
    }

    .body-wish .store-tab-nav.with-aside .aside .btn-square:before {
        position: absolute;
        left: 25px;
        top: 23px;
        width: 20px;
        height: 20px;
        content: '';
        background: url("../../../resource/images/set-icon-header-m.png") no-repeat 0 0/auto 20px;
    }

    .body-wish .store-tab-nav.with-aside .aside .btn-square.btn-add:before {
        background-position: -80px 0;
    }

    .body-wish .store-tab-nav.with-aside .aside .btn-square.btn-ordering:before {
        background-position: -60px 0;
    }

    .body-wish .store-tab-nav.with-aside .more {
        right: 335px;
    }

    .store-tab-nav.with-store-icon .scrollable {
        text-align: center;
        padding-left: 188px;
    }

    .store-tab-nav .wish-order-box {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 0;
    }

    .store-tab-nav .wish-order-box .inwrap {
        background: #fff;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
        transform: translate3d(0, -100%, 0) translate3d(0, -5px, 0);
        transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .store-tab-nav .wish-order-box.open .inwrap {
        transform: translate3d(0, 0, 0);
        transition-duration: 0.7s;
        pointer-events: auto;
    }

    html.expand-ui .store-tab-nav .wish-order-box {
        transform: translate3d(0, -80px, 0);
    }

    .store-tab-nav .wish-order-box .scroller {
        max-height: 70vh;
        overflow: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
}

@media (max-width: 767px) {
    .store-tab-nav {
        top: 46px;
    }

    .store-tab-nav .mask {
        height: 50px;
        background: #fff;
    }

    html.expand-ui .store-tab-nav .mask {
        transform: translate3d(0, -46px, 0);
    }

    .store-header.notice ~ .store-tab-nav {
        top: 71px;
    }

    html.expand-ui .store-header.notice ~ .store-tab-nav .mask {
        transform: translate3d(0, -71px, 0);
    }

    .store-tab-nav .scrollable {
        height: calc(50px + 20px);
        padding: 0 8px;
    }

    .body-search .store-tab-nav .scrollable {
        text-align: left;
    }

    .store-tab-nav .scrollable a {
        height: 50px;
        font-size: 14px;
        line-height: 50px;
    }

    .store-tab-nav .scrollable a.uncheck:after {
        bottom: 8px;
        width: 5px;
        height: 5px;
        margin-left: -3px;
    }

    .store-tab-nav.with-store-icon .mask {
        height: 96px;
    }

    .store-tab-nav.with-store-icon .scrollable {
        height: calc(96px + 20px);
    }

    .store-tab-nav.with-store-icon .scrollable a {
        width: 68px;
        height: 96px;
        font-size: 12px;
        line-height: 24px;
        padding: 13px 4px;
    }

    .store-tab-nav.with-store-icon .scrollable a.uncheck .store-icon:after {
        right: 1px;
        top: 1px;
    }

    .store-tab-nav.with-store-icon .scrollable a span {
        height: 30px;
    }

    .store-tab-nav.with-store-icon .bar {
        top: calc(96px - 4px);
    }

    .store-tab-nav.with-store-icon.more .mask {
        height: auto;
        background-image: repeating-linear-gradient(180deg, #fff, #fff 95px, #f3f3f3 96px);
    }

    .store-tab-nav.with-store-icon.more .scrollable {
        height: auto;
    }

    .store-tab-nav.with-store-icon .store-icon {
        margin: 0 auto 3px;
    }

    .store-tab-nav.more .mask {
        height: auto;
        background-image: repeating-linear-gradient(180deg, #fff, #fff 49px, #f3f3f3 50px);
    }

    .store-tab-nav.more .scrollable a.selected:before {
        top: calc(50px - 4px);
        height: 4px;
    }

    .store-tab-nav .bar {
        top: calc(50px - 4px);
        height: 4px;
        border-radius: 2px;
    }

    .store-tab-nav.with-aside .aside {
        display: none;
    }

    .store-tab-nav .wish-order-box {
        display: none;
    }
}

.store-depth1 {
    height: 95px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-size: 0;
    overflow: hidden;
}

.store-depth1 > section {
    height: calc(100% + 20px);
    padding: 22px 50px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .store-depth1 {
        height: 58px;
        text-align: left;
    }

    .store-depth1 > section {
        padding: 15px 20px 0;
    }
}

.store-depth2 {
    height: 95px;
    font-size: 0;
    text-align: center;
    overflow: hidden;
}

.store-depth2 > section {
    height: calc(100% + 20px);
    padding: 22px 50px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .store-depth2 {
        height: 47px;
        text-align: left;
    }

    .store-depth2 > section {
        padding: 10px 20px 0;
    }
}

.store-brand {
    position: relative;
    height: 459px;
    max-width: 1900px;
    padding: 0 20px 0;
    margin: 0 auto;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    color: #fff;
}

.store-brand:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.store-brand .text {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    padding-bottom: 15px;
}

.store-brand .text h2 {
    font-weight: 800;
    font-size: 90px;
    line-height: 1;
}

.store-brand .text h2 img {
    height: 66px;
}

.store-brand .text p {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.44;
}

.store-brand .btn-likeit {
    position: absolute;
    left: 50%;
    bottom: 47px;
    transform: translateX(-50%);
}

@media (max-width: 767px) {
    .store-brand {
        min-width: auto;
        max-width: 100%;
    }

    .store-brand .text {
        padding-bottom: 25px;
    }

    .store-brand .text h2 {
        font-size: 70px;
    }

    .store-brand .text h2 img {
        height: 48px;
    }

    .store-brand .text p {
        margin-top: 30px;
        font-size: 18px;
        padding: 0 20px;
    }
}

.store-container {
    position: relative;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
    align-items: stretch;
}

.store-container .store-container-inwrap {
    width: 100%;
}

.store-full {
    width: 100%;
    padding: 0 90px 35px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .store-full {
        padding: 0 20px;
        border-top: 8px solid rgba(196, 196, 196, 0.2);
    }
}

.store-side {
    position: relative;
    flex: none;
    width: 286px;
    padding: 0 28px 35px;
    box-sizing: border-box;
}

.store-side:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    width: 1px;
    background: #ebebeb;
    z-index: -1;
}

@media (max-width: 767px) {
    .store-side {
        display: none;
    }
}

.store-subnavi {
    margin: 0 -28px;
    border-top: 1px solid #EBEBEB;
}

.store-subnavi dt {
    padding-bottom: 20px;
    font-size: 17px;
    font-weight: 800;
    color: #000;
    line-height: 1;
}

.store-subnavi dl {
    padding: 35px 28px 18px;
    border-bottom: 1px solid #EBEBEB;
}

.store-subnavi dd a {
    display: block;
    font-size: 15px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.7);
}

.store-subnavi dd a.current {
    font-weight: 700;
}

.store-subnavi dd .icon-badge {
    position: static;
    display: inline-block;
    vertical-align: 2px;
    margin-left: 6px;
    transform: none;
}

@media (max-width: 767px) {
    .store-subnavi {
        margin: 0 -18px;
        padding: 0;
    }

    .store-subnavi dl {
        padding: 30px 20px 15px;
    }

    .store-subnavi a {
        position: relative;
        font-size: 18px;
        line-height: 50px;
    }

    .store-subnavi a:after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 6px;
        height: 11px;
        background: url("../../../resource/images/icon-mobile-subnavi.png") no-repeat;
        background-size: contain;
        transform: translateY(-50%);
    }
}

.store-contents {
    width: 1200px;
    margin: 63px auto 32px;
    padding: 0 65px 80px;
    background-color: #fff;
    box-sizing: border-box;
}

.store-side ~ .store-contents {
    width: 100%;
    padding: 0 60px 80px;
    margin-top: 45px;
}

.store-contents.type-right {
    padding-bottom: 0;
}

@media (max-width: 767px) {
    .store-contents {
        width: 100%;
        padding: 0 18px 50px;
        margin: 0 auto;
    }

    .store-side ~ .store-contents {
        width: 100%;
        padding: 0 18px 50px;
        margin-top: 0;
    }
}

.store-footer-fix {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    background-color: #000;
    color: #c4c4c4;
    font-size: 10px;
    font-weight: 500;
    z-index: 999;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

html.expand-ui .store-footer-fix {
    transform: translate3d(0, 100%, 0);
}

.store-footer-fix a, .store-footer-fix a:hover {
    color: #c4c4c4;
}

.store-footer-fix .links {
    position: absolute;
    left: 42px;
    top: 0;
    bottom: 0;
    width: 140px;
}

.store-footer-fix .links > a {
    display: block;
    height: 100%;
    background: url("../../../resource/images/logo-gray.svg") 20px 50%/auto 17px no-repeat;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.store-footer-fix .links > a:after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -3px;
    width: 9px;
    height: 6px;
    background: url("../../../resource/images/arr-toggle-foot.png") 0 0/9px 6px no-repeat;
}

.store-footer-fix .links .more {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    padding: 10px 0 14px;
    display: none;
}

.store-footer-fix .links .more:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 4px;
    background-color: #000;
}

.store-footer-fix .links .more a {
    position: relative;
    display: block;
    padding: 0 14px;
    font-size: 12px;
    line-height: 26px;
    font-weight: 400;
}

.store-footer-fix .links .more a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    bottom: 2px;
    background-color: #FA4431;
    display: none;
    z-index: 0;
}

.store-footer-fix .links .more a:hover {
    color: #fff;
}

.store-footer-fix .links .more a:hover:before {
    display: block;
}

.store-footer-fix .links .more a span {
    position: relative;
}

.store-footer-fix .links .more a + a {
    margin-top: 3px;
}

.store-footer-fix .links:hover .more {
    display: block;
}

.store-footer-fix .links:hover > a:after {
    transform: scaleY(-1);
    margin-top: -4px;
}

.store-footer-fix .in {
    position: absolute;
    left: 193px;
    top: 0;
    bottom: 0;
    overflow: hidden;
}

.store-footer-fix .in strong, .store-footer-fix .in mark {
    font-weight: 700;
}

.store-footer-fix .in mark {
    color: #FA4431;
}

.store-footer-fix .in li {
    position: relative;
    float: left;
    height: 100%;
    padding: 0 25px 0 24px;
    line-height: 35px;
}

.store-footer-fix .in li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background-color: #c4c4c4;
    opacity: 0.5;
}

.store-footer-fix .in li a {
    position: relative;
    display: inline-block;
    line-height: 35px;
}

.store-footer-fix .in li a + a {
    margin-left: 7px;
}

.store-footer-fix .in .btn-license {
    margin-left: 10px;
}

.store-footer-fix .in .btn-license:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 11px;
    display: block;
    height: 1px;
    background-color: #c4c4c4;
}

.store-footer-fix .out {
    position: absolute;
    top: 0;
    right: 42px;
}

.store-footer-fix .out a {
    font-size: 12px;
    line-height: 35px;
    font-weight: 700;
}

.store-footer {
    background-color: #282828;
    overflow: hidden;
    color: #E4E4E4;
}

.store-footer .depth-0 {
    padding: 40px 0;
    text-align: center;
    line-height: 35px;
}

.store-footer .depth-0 ul {
    font-size: 0;
}

.store-footer .depth-0 li {
    display: inline-block;
    font-size: 15px;
    vertical-align: middle;
}

.store-footer .depth-0 li + li {
    margin-left: 18px;
}

.store-footer .depth-0 .copyright {
    display: block;
    font-size: 15px;
    font-weight: 500;
}

.store-footer .depth-1 {
    width: 1280px;
    margin: 0 auto;
    padding: 46px 40px 36px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.store-footer .depth-1 h5 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}

.store-footer .depth-1 .direct {
    font-size: 0;
    padding-right: 33px;
    padding-top: 50px;
}

.store-footer .depth-1 .direct li {
    display: inline-block;
    width: 200px;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
}

.store-footer .depth-1 .direct li a {
    color: #E4E4E4;
}

.store-footer .depth-1 .direct li > a {
    position: relative;
    display: block;
    padding-top: 53px;
    font-size: 14px;
    line-height: 26px;
    font-weight: 500;
}

.store-footer .depth-1 .direct li > a:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    background-position: 50% 50%;
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

.store-footer .depth-1 .direct li > p {
    font-size: 12px;
    line-height: 20px;
    margin-top: 7px;
    font-weight: 400;
}

.store-footer .depth-1 .direct li > p a {
    text-decoration: underline;
}

.store-footer .depth-1 .direct li:nth-child(1) > a:before {
    background-image: url("../../../resource/images/icon-foot-safe.png");
}

.store-footer .depth-1 .direct li:nth-child(2) > a:before {
    background-image: url("../../../resource/images/icon-foot-free.png");
}

.store-footer .depth-1 .direct li:nth-child(3) > a:before {
    background-image: url("../../../resource/images/icon-foot-realtime.png");
}

.store-footer .depth-1 .customer {
    padding: 8px 0 7px 50px;
    width: 187px;
    border-left: 1px solid #333;
}

.store-footer .depth-1 .customer p {
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    margin-top: 18px;
}

.store-footer .depth-1 .customer p + p {
    margin-top: 11px;
}

.store-footer .depth-1 .customer ul {
    padding-top: 6px;
}

.store-footer .depth-1 .customer li {
    margin-top: 16px;
}

.store-footer .depth-1 .customer li a {
    position: relative;
    padding-left: 31px;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    line-height: 26px;
    text-decoration: underline;
    color: #E4E4E4;
}

.store-footer .depth-1 .customer li a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 21px;
    height: 21px;
    margin-top: -10px;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.store-footer .depth-1 .customer li:nth-child(1) > a:before {
    background-image: url("../../../resource/images/icon-foot-faq.png");
}

.store-footer .depth-1 .customer li:nth-child(2) > a:before {
    background-image: url("../../../resource/images/icon-foot-customer.png");
}

.store-footer .depth-1 .customer li:nth-child(3) > a:before {
    background-image: url("../../../resource/images/icon-foot-chat.png");
}

.store-footer .depth-1 .notice {
    padding: 8px 0 0 66px;
    width: 310px;
}

.store-footer .depth-1 .notice .list {
    margin-top: 15px;
    font-size: 0;
}

.store-footer .depth-1 .notice .list a {
    display: block;
    font-size: 12px;
    line-height: 25px;
    color: #E4E4E4;
}

.store-footer .depth-1 .notice .list a > span {
    display: inline-block;
    max-width: calc(100% - 22px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.store-footer .depth-1 .notice .list .ic-new {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    background: url("../../../resource/images/icon-new.png") 50% 50%/contain no-repeat;
    vertical-align: -3px;
}

.store-footer .depth-2 {
    position: relative;
    height: 199px;
    margin: 0 auto;
}

.store-footer .depth-2:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 100vw;
    min-width: 1360px;
    height: 1px;
    background-color: #333;
    transform: translateX(-50%);
}

.store-footer .depth-2:after {
    content: '© 2020 Shoplex, Inc.';
    position: absolute;
    right: 30px;
    top: 66px;
    width: 170px;
    padding-top: 39px;
    font-size: 14px;
    font-weight: 500;
    background: url("../../../resource/images/logo-gray-footer.svg") 100% 0/100% auto no-repeat;
    text-align: right;
}

.store-footer .depth-2 .etc {
    position: absolute;
    top: 55px;
    left: 30px;
    font-size: 0;
    line-height: 26px;
    font-weight: 500;
}

.store-footer .depth-2 .etc a {
    display: inline-block;
    margin-right: 13px;
    font-size: 14px;
    color: #E4E4E4;
}

.store-footer .depth-2 .etc strong {
    font-weight: 700;
}

.store-footer .depth-2 .company {
    position: absolute;
    top: 100px;
    left: 30px;
    width: 490px;
    font-size: 0;
    line-height: 26px;
    box-sizing: border-box;
}

.store-footer .depth-2 .company dd {
    display: inline-block;
    padding-right: 10px;
    font-size: 13px;
    font-weight: 500;
}

.store-footer .depth-2 .company dd a {
    margin-left: 10px;
    text-decoration: underline;
    color: #E4E4E4;
}

.store-footer .depth-2 .share {
    position: absolute;
    right: 240px;
    top: 66px;
    font-size: 0;
    text-align: right;
}

.store-footer .depth-2 .share a {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-left: 15px;
    font-size: 0;
    line-height: 300px;
    overflow: hidden;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.store-footer .depth-2 .share a.facebook {
    background-image: url("../../../resource/images/icon-foot-facebook.png");
}

.store-footer .depth-2 .share a.instagram {
    background-image: url("../../../resource/images/icon-foot-instagram.png");
}

.store-footer .depth-2 .share a.youtube {
    background-image: url("../../../resource/images/icon-foot-youtube.png");
}

.store-footer .depth-ask {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    text-align: center;
    padding: 80px 0;
}

.store-footer .depth-ask:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    min-width: 1360px;
    background-color: #fff;
    transform: translateX(-50%);
    border-top: 1px solid #E5E5E5;
}

.store-footer .depth-ask h4 {
    position: relative;
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 30px;
    z-index: 1;
    color: #000;
}

.store-footer .depth-ask strong a {
    font-size: 30px;
    line-height: 34px;
    font-weight: 700;
    color: #5D5D5D;
}

.store-footer .depth-ask .noti {
    margin-top: 18px;
    font-size: 18px;
    line-height: 26px;
    color: #303033;
}

.store-footer .depth-ask .btn-mailto {
    display: inline-block;
    margin-top: 13px;
    font-size: 18px;
    line-height: 26px;
    color: #0087D2;
}

.store-footer .depth-ask .use-pc {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-top: 50px;
    z-index: 1;
}

.store-footer .depth-ask .use-pc li {
    flex: 1;
}

.store-footer .depth-ask .use-pc li .in {
    display: inline-block;
    text-align: left;
}

.store-footer .depth-ask .use-pc li:nth-child(1) {
    text-align: left;
}

.store-footer .depth-ask .use-pc li:nth-child(1) .in {
    padding-left: 75px;
}

.store-footer .depth-ask .use-pc li:nth-child(2) {
    text-align: center;
}

.store-footer .depth-ask .use-pc li:nth-child(3) {
    text-align: right;
}

.store-footer .depth-ask .use-pc li:nth-child(3) .in {
    padding-right: 75px;
}

.store-footer .depth-ask .use-pc li:nth-child(3) strong a {
    cursor: default;
    text-decoration: none;
}

.store-footer .depth-ask .use-mobile {
    display: none;
}

.store-footer .depth-ask .use-mobile a, .store-footer .depth-ask .use-mobile button {
    display: flex;
    margin-top: 14px;
    font-weight: 700;
}

.store-footer .depth-ask .use-mobile a mark, .store-footer .depth-ask .use-mobile button mark {
    margin-left: 6px;
    color: #0087D2;
}

@media (max-width: 767px) {
    .store-footer .depth-0 {
        padding: 30px 0;
        line-height: 25px;
    }

    .store-footer .depth-0 ul {
        display: block;
    }

    .store-footer .depth-0 li {
        font-size: 12px;
        margin: 0 6px !important;
    }

    .store-footer .depth-0 li:first-child {
        display: block;
    }

    .store-footer .depth-0 li + li {
        margin-left: 0;
    }

    .store-footer .depth-0 .copyright {
        display: block;
        font-size: 12px;
    }

    .store-footer .depth-1 {
        width: auto;
        padding: 0 18px;
        display: block;
    }

    .store-footer .depth-1 h5 {
        font-size: 16px;
        font-weight: 600;
    }

    .store-footer .depth-1 .direct {
        padding: 38px 0;
        margin: 0 auto;
        width: 208px;
    }

    .store-footer .depth-1 .direct li {
        display: block;
    }

    .store-footer .depth-1 .direct li > a {
        font-weight: 700;
    }

    .store-footer .depth-1 .direct li > p {
        font-size: 14px;
        line-height: 20px;
    }

    .store-footer .depth-1 .direct li + li {
        margin-top: 36px;
    }

    .store-footer .depth-1 .customer {
        width: auto;
        margin: 0 -18px;
        padding: 30px 18px 0;
        border-left: none;
        border-top: 1px solid #333;
    }

    .store-footer .depth-1 .customer p {
        font-size: 14px;
        margin-top: 8px;
    }

    .store-footer .depth-1 .customer p + p {
        margin-top: 15px;
    }

    .store-footer .depth-1 .customer ul {
        padding-top: 6px;
    }

    .store-footer .depth-1 .customer li {
        margin-top: 14px;
    }

    .store-footer .depth-1 .customer li a {
        font-size: 13px;
    }

    .store-footer .depth-1 .notice {
        width: auto;
        padding: 40px 0 20px;
    }

    .store-footer .depth-1 .notice .list {
        margin-top: 6px;
    }

    .store-footer .depth-1 .notice .list a {
        font-size: 14px;
        line-height: 34px;
    }

    .store-footer .depth-2 {
        width: auto;
        height: auto;
        padding: 26px 18px 81px;
    }

    .store-footer .depth-2:before {
        min-width: auto;
    }

    .store-footer .depth-2:after {
        right: 18px;
        top: auto;
        bottom: 20px;
        width: 118px;
        padding-top: 26px;
        font-size: 10px;
    }

    .store-footer .depth-2 .etc {
        position: relative;
        left: 0;
        top: 0;
    }

    .store-footer .depth-2 .etc a {
        margin-right: 10px;
    }

    .store-footer .depth-2 .company {
        position: relative;
        left: 0;
        top: 0;
        margin: 6px -18px 0;
        padding: 0 50px 21px 18px;
        width: auto;
        border-bottom: 1px solid #333;
    }

    .store-footer .depth-2 .company dt {
        position: static;
        display: block;
        padding: 0;
    }

    .store-footer .depth-2 .company dd {
        font-size: 11px;
        font-weight: 400;
        line-height: 25px;
    }

    .store-footer .depth-2 .company dd span {
        margin-right: 6px;
    }

    .store-footer .depth-2 .company dd span + span {
        margin-left: 0;
        white-space: nowrap;
    }

    .store-footer .depth-2 .company dd:last-child {
        padding: 0;
    }

    .store-footer .depth-2 .share {
        right: auto;
        left: 18px;
        top: auto;
        bottom: 32px;
    }

    .store-footer .depth-2 .share a {
        width: 24px;
        height: 24px;
        margin-left: 0;
        margin-right: 12px;
    }

    .store-footer .depth-ask {
        width: auto;
        height: auto;
        padding: 59px 18px 60px;
    }

    .store-footer .depth-ask h4 {
        font-size: 18px;
        padding-bottom: 7px;
    }

    .store-footer .depth-ask:before {
        min-width: auto;
        border-top: 8px solid rgba(196, 196, 196, 0.2);
    }

    .store-footer .depth-ask .use-pc {
        display: none;
    }

    .store-footer .depth-ask .use-mobile {
        display: block;
    }
}

.mobile-buy {
    position: fixed;
    left: 0;
    right: 0;
    -top: 0;
    bottom: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition-property: background-color;
}

.mobile-buy .bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 84px;
    padding: 20px 18px;
    box-sizing: border-box;
    background: #efefef;
    display: flex;
    pointer-events: auto;
}

.mobile-buy .bar .util {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    display: block;
}

.mobile-buy .bar .util button {
    min-width: 0;
    width: 44px;
    height: 44px;
    margin-right: 10px;
    border: 0;
    border-radius: 100%;
    box-sizing: border-box;
    background: #fff;
    box-shadow: none;
}

.mobile-buy .bar .util button.btn-likeit:before, .mobile-buy .bar .util button.btn-likeit:after {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    background-position: -80px 0;
}

.mobile-buy .bar .util button.btn-likeit:after {
    background-position: -40px 0;
}

.mobile-buy .bar .util button.btnd-share {
    overflow: visible;
}

.mobile-buy .bar .util button.btnd-share:before {
    background-position: 45% 50%;
}

.mobile-buy .bar button.buy {
    position: relative;
    flex: 1;
    height: 44px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 42px;
    border-radius: 22px;
    background: #000;
}

.mobile-buy .options {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: calc(100% - 10px);
    border-radius: 24px 24px 0 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transform: translate3d(0, calc(100% + 62px), 0);
    z-index: 0;
    visibility: hidden;
    transition-property: transform, visibility;
}

.mobile-buy .options .options-scroll {
    flex: 1;
    padding: 35px 18px 20px;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-buy .options .delivery-info {
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    padding-bottom: 12px;
}

.mobile-buy .options .delivery-info span {
    font-weight: 400;
}

.mobile-buy .options .delivery-info mark {
    color: #571ee9;
}

.mobile-buy .options .summary-options,
    .mobile-buy .options .summary-function {
    display: block;
}

.mobile-buy .options .summary-options .opt-box {
    padding-right: 0;
}

.mobile-buy .options .summary-idx {
    margin-top: 15px;
    padding: 0;
    border: 0;
}

.mobile-buy .options .summary-idx .idx {
    left: 0;
}

.mobile-buy .options .summary-function {
    position: relative;
    margin-top: 20px;
    display: flex;
    opacity: 0.6;
    pointer-events: none;
}

.mobile-buy .options .summary-function > [class*="btnd-"] + [class*="btnd-"] {
    margin-left: 8px;
}

.mobile-buy .options .summary-function [class*="btnd-"] {
    height: 44px;
    font-size: 14px;
    line-height: 40px;
    border-radius: 22px;
}

.mobile-buy .options .summary-options.option-selected ~ .summary-function {
    opacity: 1;
    pointer-events: auto;
}

.mobile-buy,
  .mobile-buy .options {
    transition: 0.45s cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-buy.open {
    background: rgba(0, 0, 0, 0.5);
}

.mobile-buy.open .options {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

.mobile-buy.open button.buy {
    text-indent: -999em;
}

.mobile-buy.open button.buy:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    content: '닫기';
    text-indent: 0;
}

.mobile-buy.sold-out button.buy {
    text-indent: -999em;
    background: #ccc;
    pointer-events: none;
}

.mobile-buy.sold-out button.buy:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    content: '품절 상품 입니다';
    text-indent: 0;
}

@media (min-width: 768px) {
    .mobile-buy {
        display: none;
    }
}

.top-button {
    position: fixed;
    right: 0;
    bottom: 15px;
    width: 40px;
    height: 40px;
    margin-right: 53px;
    background-color: rgba(228, 228, 228, 0.8);
    color: #fff;
    font-size: 0;
    line-height: 0;
    letter-spacing: -5000px;
    overflow: hidden;
    border-radius: 100%;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 97;
}

.top-button:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: url("../../../resource/images/ic-top.png") 50% 50%/contain no-repeat;
}

.top-button:not(.show) {
    transform: translate3d(0, 90px, 0);
}

@media (max-width: 767px) {
    .top-button {
        bottom: 78px;
        margin-right: 18px;
    }

    .top-button:not(.show) {
        transform: translate3d(0, 60px, 0);
    }

    .body-policy .top-button,
    .body-notifications .top-button {
        bottom: 18px;
    }
}

/* form */
select, input, textarea {
    box-sizing: border-box;
    font-size: 14px;
}

textarea {
    border: 1px solid #d3d8e0;
    padding: 13px 17px;
    resize: none;
    background-color: #fff;
    border-radius: 3px;
    transition: all 0.1s;
}

textarea:focus, textarea.has-value:not([readonly]):not([disabled]) {
    border-color: #000;
}

textarea[readonly] {
    pointer-events: none;
    background-color: #EFF0F6;
    color: #b8b8b8;
}

input[type='text'], input[type='number'], input[type='password'] {
    height: 43px;
    border: 1px solid #d3d8e0;
    text-indent: 17px;
    line-height: 41px;
    transition: all 0.1s;
    border-radius: 3px;
}

input[type='text']:focus, input[type='text'].has-value, input[type='number']:focus, input[type='number'].has-value, input[type='password']:focus, input[type='password'].has-value {
    border-color: #000;
}

input[type='text'][readonly], input[type='number'][readonly], input[type='password'][readonly] {
    background-color: #EFF0F6;
    color: #b8b8b8;
}

input[type='text'][readonly]:focus, input[type='text'][readonly].has-value, input[type='number'][readonly]:focus, input[type='number'][readonly].has-value, input[type='password'][readonly]:focus, input[type='password'][readonly].has-value {
    border-color: #d3d8e0;
}

input[type='text'].center, input[type='number'].center, input[type='password'].center {
    text-align: center;
    text-indent: 0;
}

input[type='text'].invalid, .invalid input[type='text'], input[type='number'].invalid, .invalid input[type='number'], input[type='password'].invalid, .invalid input[type='password'] {
    border-color: #FA4431;
}

input[type='checkbox'] {
    position: absolute;
    opacity: 0;
}

input[type='checkbox'] + label {
    position: relative;
    padding-left: 30px;
    padding-top: 1px;
    transition: color 0.3s;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

input[type='checkbox'] + label:before, input[type='checkbox'] + label:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    box-sizing: border-box;
    transition: opacity 0.1s, width 0.01s 0.1s;
    background-color: #fff;
    border-radius: 12px;
}

input[type='checkbox'] + label:before {
    background-color: #d3d8e0;
}

input[type='checkbox'] + label:after {
    background: #FFB800 url("../../../resource/images/check-icon.svg") 50% 50%/12px auto no-repeat;
    opacity: 0;
}

input[type='checkbox']:checked + label:before {
    opacity: 0;
}

input[type='checkbox']:checked + label:after {
    opacity: 1;
}

input[type='checkbox'][disabled] + label {
    opacity: 0.4;
}

input[type='checkbox'] + label.nolabel {
    padding-left: 24px;
}

input[type='checkbox'].size15 + label {
    padding-left: 21px;
}

input[type='checkbox'].size15 + label:before, input[type='checkbox'].size15 + label:after {
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

input[type='checkbox'].size15 + label:after {
    background-size: 9px auto;
}

input[type='checkbox'].pink + label:after {
    background-color: #FA4431;
}

input[type='checkbox'].pink + label.nolabel {
    padding-left: 16px;
}

input[type='radio'] {
    position: absolute;
    opacity: 0;
}

input[type='radio'] + label {
    position: relative;
    padding-left: 30px;
    padding-top: 1px;
    transition: color 0.3s;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

input[type='radio'] + label:before, input[type='radio'] + label:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    box-sizing: border-box;
    border-radius: 12px;
    transition: opacity 0.1s, width 0.01s 0.1s;
}

input[type='radio'] + label:before {
    background-color: #d3d8e0;
}

input[type='radio'] + label:after {
    border: 6px solid #FFB800;
    opacity: 0;
}

input[type='radio']:checked + label:before {
    opacity: 0;
}

input[type='radio']:checked + label:after {
    opacity: 1;
}

input[type='radio'][disabled] + label {
    opacity: 0.4;
}

input[type='radio'] + label.nolabel {
    padding-left: 24px;
}

input[type='radio'].pink + label:after {
    border-color: #FA4431;
}

input[type='radio'].size15 + label {
    padding-left: 21px;
}

input[type='radio'].size15 + label:before, input[type='radio'].size15 + label:after {
    width: 16px;
    height: 16px;
    margin-top: -8px;
}

input[type='radio'].size15 + label:after {
    border-width: 5px;
}

input[type='radio'].size15 + label.nolabel {
    padding-left: 16px;
}

.f-file {
    position: relative;
    display: block;
    width: 120px;
    height: 44px;
    border-radius: 3px;
    background-color: #000;
    box-sizing: border-box;
    vertical-align: middle;
    line-height: 1;
    cursor: pointer;
}

.f-file label {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 44px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    color: #fff;
}

.f-file input[type='file'] {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0.0001;
    z-index: 3;
    cursor: pointer;
}

@media (max-width: 767px) {
    .f-file {
        width: 100%;
    }
}

.f-spin {
    position: relative;
    display: inline-block;
    width: 100px;
    padding: 0 30px;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px #d3d8e0;
    border-radius: 3px;
}

.f-spin input {
    width: 100%;
    height: 30px;
    font-weight: 500;
    line-height: 30px;
    border: none;
}

.f-spin button {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 30px;
    border: 1px solid #d3d8e0;
    box-sizing: border-box;
    border-radius: 3px;
}

.f-spin button:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: 10px 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.f-spin button.down {
    left: 0;
}

.f-spin button.down:after {
    background-image: url("../../../resource/images/icon-spin-minus.svg");
}

.f-spin button.up {
    right: 0;
}

.f-spin button.up:after {
    background-image: url("../../../resource/images/icon-spin-plus.svg");
}

.f-hp {
    display: flex;
    width: calc(100% + 12px);
    margin-left: -12px;
}

.f-hp input, .f-hp select, .f-hp .select-title {
    width: 100% !important;
    min-width: auto;
}

.f-hp > span {
    position: relative;
    width: 33.333%;
    padding-left: 12px;
    box-sizing: border-box;
}

.f-hp .hp:before {
    content: '-';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 12px;
    text-align: center;
    font-size: 16px;
}

.f-separation {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.f-separation input, .f-separation select, .f-separation .select-title {
    width: 100% !important;
    min-width: auto;
}

.f-separation > a, .f-separation > button {
    margin-left: 8px;
    min-width: 115px;
}

.f-separation .certification {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -24px;
    color: #425996;
    font-size: 13px;
    font-weight: 400;
    opacity: 0;
    line-height: 1;
}

.f-separation .certification mark {
    font-weight: 600;
    color: #425996;
}

.f-separation .certification.on {
    opacity: 1;
}

@media (max-width: 767px) {
    .f-separation {
        max-width: 100%;
        padding-right: 0;
    }

    .f-separation > a, .f-separation > button {
        margin-left: 6px;
    }
}

.f-address input {
    margin-top: 9px;
}

.f-memo textarea {
    height: 115px;
    margin-top: 8px;
}

.f-sex {
    display: flex;
    width: 100%;
}

.f-sex input[type='radio'] + label {
    display: block;
    flex: 1;
    height: 43px;
    box-shadow: inset 0 0 0 1px #000;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 43px;
    text-align: center;
    padding: 0;
}

.f-sex input[type='radio'] + label:before,
  .f-sex input[type='radio'] + label:after {
    display: none;
}

.f-sex input[type='radio']:checked + label {
    background-color: #000;
    color: #fff;
}

/* fake select */
.select-title {
    position: relative;
    min-width: 100px;
    max-width: 100%;
    height: 43px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #d3d8e0;
    box-sizing: border-box;
    background: #fff;
    display: inline-block;
    border-radius: 3px;
    cursor: pointer;
}

.select-title:after {
    position: absolute;
    right: 0;
    top: 50%;
    width: 23px;
    height: 6px;
    content: '';
    margin-top: -3px;
    background: url("../../../resource/images/icon-selectbox.png") 0 50%/11px 6px no-repeat;
}

.select-title.active {
    border-color: #000;
}

.select-title.active:after {
    transform: scaleY(-1);
}

.select-title strong {
    width: 100%;
    height: 100%;
    font-weight: normal;
    word-break: break-all;
    padding: 0 42px 0 17px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    font-size: 14px;
    line-height: 41px;
}

.select-title.has-value:not(.readonly):not(.disabled) {
    border-color: #000;
}

.select-title.has-value:not(.readonly):not(.disabled) strong {
    color: #000;
}

.select-title.disabled {
    text-shadow: 1px 1px 0 #fff;
    opacity: 0.6;
}

.select-title.readonly {
    pointer-events: none;
    background-color: #EFF0F6;
    color: #b8b8b8;
}

.select-title.gray {
    border-color: #DDD;
}

@media (max-width: 767px) {
    .select-title strong {
        padding-right: 35px;
    }
}

.select-option {
    background-color: #fcfcfd;
    overflow: auto;
    box-sizing: border-box;
    letter-spacing: 0;
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    margin-top: -1px;
}

.select-option ul {
    padding: 10px 0;
}

.select-option li {
    list-style: none;
}

.select-option span, .select-option strong {
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-decoration: none;
    padding: 0 17px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hoverable .select-option span:hover, .hoverable .select-option strong:hover {
    background-color: #000;
    color: #FFB800;
}

.select-option span.selected {
    background-color: #000;
    color: #FFB800;
}

.select-option li li span {
    padding-left: 0;
}

.select-option .disabled span, .select-option .disabled strong {
    text-decoration: line-through;
    background: none;
}

.select-option[class*="buy-option-"] span, .select-option[class*="buy-option-"] strong {
    height: 42px;
    font-size: 14px;
    font-weight: bold;
    color: #FFB800;
    line-height: 41px;
}

.select-option.gray {
    border-color: #DDD;
}

.select-option .hoverable span:hover, .select-option span.selected {
    font-weight: 600;
}

@media (max-width: 767px) {
    .select-option {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        height: auto !important;
        border: 0;
        background: rgba(0, 0, 0, 0);
        opacity: 1 !important;
        transform: translate3d(0, 0, 0);
        transition: background-color 0.15s;
        overflow: hidden;
    }

    .select-option ul {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 20px 30px;
        border-radius: 10px 10px 0 0;
        background: #fff;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .select-option span, .select-option strong {
        height: 43px;
        font-size: 14px;
        text-align: center;
        line-height: 15px;
        padding: 14px 10px;
        border-radius: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .select-option.show {
        background: rgba(0, 0, 0, 0.5);
        transition-duration: 0.5s;
    }

    .select-option.show ul {
        transform: translate3d(0, 0, 0);
        transition-duration: 0.5s;
    }
}

.btn-area {
    font-size: 0;
    margin-top: 60px;
}

.btn-area button, .btn-area a {
    margin-right: 10px;
}

.btn-area.type-center {
    text-align: center;
}

.btn-area.type-center button, .btn-area.type-center a {
    margin: 0 5px;
}

.btn-area.type-right {
    text-align: right;
}

.btn-area.type-right button, .btn-area.type-right a {
    margin: 0 0 0 10px;
}

.btn-area.type-flex {
    display: flex;
    margin-left: -5px;
    margin-right: -5px;
}

.btn-area.type-flex button, .btn-area.type-flex a {
    flex: 1;
    margin: 0 5px;
}

.btn-area.type-justify {
    display: flex;
}

.btn-area.type-justify > .left {
    flex: 1;
}

.btn-area.type-justify > .right {
    flex: 1;
    text-align: right;
}

.btn-area.type-justify > .right button, .btn-area.type-justify > .right a {
    margin: 0 0 0 10px;
}

@media (max-width: 767px) {
    .btn-area {
        display: flex;
        margin-left: -4px;
        margin-right: -4px;
        margin-top: 30px;
    }

    .btn-area button, .btn-area a {
        flex: 1;
        margin: 0 4px;
    }

    .btn-area.type-right button, .btn-area.type-right a {
        flex: 1;
        margin: 0 4px;
    }

    .btn-area.type-center button, .btn-area.type-center a {
        flex: 1;
        margin: 0 4px;
    }

    .btn-area.type-justify button, .btn-area.type-justify a {
        flex: 1;
        margin: 0 4px;
    }

    .btn-area.type-justify > .left {
        position: static;
        flex: 1;
        display: flex;
    }

    .btn-area.type-justify > .right {
        flex: 1;
        display: flex;
    }

    .btn-area.type-justify > .right button, .btn-area.type-justify > .right a {
        flex: 1;
        margin: 0 4px;
    }
}

[class*='btnset-'] {
    position: relative;
    display: inline-flex;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
    vertical-align: middle;
    font-weight: 700;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

[class*='btnset-'][class*='-circle'] {
    border-radius: 60px;
}

[class*='btnset-'][class*='-rect'] {
    border-radius: 3px;
}

[class*='btnset-'][class*='-line'] {
    border: 1px solid;
    background-color: #fff;
}

[class*='btnset-'][class*='-line'][class*='-pink'] {
    border-color: #FA4431;
    color: #FA4431;
}

[class*='btnset-'][class*='-line'][class*='-green'] {
    border-color: #00BA88;
    color: #00BA88;
}

[class*='btnset-'][class*='-line'][class*='-yellow'] {
    border-color: #FFB800;
    color: #FFB800;
}

[class*='btnset-'][class*='-line'][class*='-gray'] {
    border-color: #ccc;
    color: #000;
}

[class*='btnset-'][class*='-line'][class*='-black'] {
    border-color: #000;
    color: #000;
}

[class*='btnset-'][class*='-line2'] {
    border: 2px solid;
    background-color: #fff;
}

[class*='btnset-'][class*='-line2'][class*='-pink'] {
    border-color: #FA4431;
    color: #FA4431;
}

[class*='btnset-'][class*='-line2'][class*='-green'] {
    border-color: #00BA88;
    color: #00BA88;
}

[class*='btnset-'][class*='-line2'][class*='-yellow'] {
    border-color: #FFB800;
    color: #FFB800;
}

[class*='btnset-'][class*='-line2'][class*='-gray'] {
    border-color: #ccc;
    color: #000;
}

[class*='btnset-'][class*='-line2'][class*='-black'] {
    border-color: #000;
    color: #000;
}

[class*='btnset-'][class*='-fill'] {
    color: #fff;
}

.hoverable [class*='btnset-'][class*='-fill']:hover {
    color: #fff;
}

[class*='btnset-'][class*='-fill'][class*='-pink'] {
    background-color: #FA4431;
}

[class*='btnset-'][class*='-fill'][class*='-green'] {
    background-color: #00BA88;
}

[class*='btnset-'][class*='-fill'][class*='-yellow'] {
    background-color: #FFB800;
}

[class*='btnset-'][class*='-fill'][class*='-gray'] {
    background-color: #ccc;
}

[class*='btnset-'][class*='-fill'][class*='-black'] {
    background-color: #000;
}

[class*='btnset-'].h60 {
    height: 60px;
    font-size: 20px;
}

[class*='btnset-'].h56 {
    height: 56px;
    font-size: 18px;
}

[class*='btnset-'].h50 {
    height: 50px;
    font-size: 18px;
}

[class*='btnset-'].h48 {
    height: 48px;
    font-size: 18px;
}

[class*='btnset-'].h46 {
    height: 46px;
    font-size: 14px;
}

[class*='btnset-'].h45 {
    height: 45px;
    font-size: 18px;
}

[class*='btnset-'].h43 {
    height: 43px;
    font-size: 14px;
}

[class*='btnset-'].h40 {
    height: 40px;
    font-size: 14px;
}

[class*='btnset-'].h30 {
    height: 30px;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 767px) {
    [class*='btnset-'] {
        font-weight: 500;
    }

    [class*='btnset-'].h56 {
        height: 44px;
        font-size: 14px;
    }

    [class*='btnset-'].h50 {
        height: 40px;
        font-size: 14px;
    }

    [class*='btnset-'].h45 {
        height: 35px;
        font-size: 14px;
    }
}

.btn-guide {
    position: relative;
    display: inline-block;
    padding-left: 24px;
    font-size: 14px;
    line-height: 15px;
    color: #979797;
    text-decoration: underline;
}

.btn-guide:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: url("../../../resource/images/icon-guide.png") 50% 50%/18px 18px no-repeat;
}

.btn-likeit {
    position: relative;
    width: 36px;
    height: 36px;
    text-indent: -999em;
    overflow: hidden;
    background-color: #fff;
    border-radius: 100%;
    box-sizing: border-box;
}

.btn-likeit:before, .btn-likeit:after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    content: '';
    margin: -18px 0 0 -18px;
    background: url("../../../resource/images/set-icon-wish.png") no-repeat 0 0/auto 100%;
}

.btn-likeit:after {
    background-position: -36px 0;
    opacity: 0;
}

.btn-likeit.on:before {
    opacity: 0;
}

.btn-likeit.on:after {
    opacity: 1;
    animation: wish-on 0s forwards;
}

.btn-likeit.on:hover:after {
    animation-duration: 0.35s;
}

@media (max-width: 767px) {
    .btn-likeit {
        width: 26px;
        height: 26px;
    }

    .btn-likeit:before, .btn-likeit:after {
        width: 26px;
        height: 26px;
        margin: -13px 0 0 -13px;
    }

    .btn-likeit:after {
        background-position: -26px 0;
    }
}

.btn-text-likeit {
    display: inline-flex;
    height: 40px;
    padding: 0 10px;
    text-align: center;
    box-sizing: border-box;
    vertical-align: middle;
    font-weight: 700;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 14px;
    border: 2px solid #FA4431;
    color: #FA4431;
    border-radius: 60px;
}

.hoverable .btn-text-likeit:hover {
    color: #FA4431;
}

.btn-text-likeit.on {
    background-color: #FA4431;
    color: #fff;
}

.hoverable .btn-text-likeit.on:hover {
    color: #fff;
}

.btn-trash {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 38px;
    position: relative;
    text-indent: -9999px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    vertical-align: middle;
}

.btn-trash:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 1px solid #767C85;
    border-radius: 3px;
    margin-top: -10px;
    margin-left: -10px;
    background: url("../../../resource/images/icon-trash.png") 50% 50%/8px 8px no-repeat;
}

[class*='btnd-'] {
    position: relative;
    display: inline-block;
    min-width: 48px;
    height: 48px;
    line-height: 44px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
    border: 2px solid #D4D4D4;
    border-radius: 3px;
    box-sizing: border-box;
}

.btnd-wish, .btnd-share, .btnd-chatting {
    font-size: 0;
    line-height: 3000px;
}

.btnd-wish:before, .btnd-share:before, .btnd-chatting:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 36px;
}

.btnd-share:before {
    background-image: url("../../../resource/images/icon-share.png");
    background-size: auto 20px;
}

.btnd-chatting:before {
    background-image: url("../../../resource/images/icon-chatting.png");
    background-size: auto 24px;
}

.btnd-pay {
    border-color: #000;
}

.btnd-bag {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.hoverable .btnd-bag:hover {
    color: #fff;
}

.btnd-likeit:before, .btnd-likeit:after {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
}

.btnd-likeit:before {
    background-position: -72px 0;
}

.btnd-likeit:after {
    background-position: -36px 0;
}

.btn-infomation {
    color: #5489F0;
}

.btn-logout {
    display: block;
    width: 100%;
    margin-top: 27px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background-color: #000;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 3px;
}

.btn-logout:hover {
    color: #fff;
    background-color: #000;
}

@media (max-width: 767px) {
    .btn-logout {
        font-size: 14px;
    }
}

@keyframes wish-on {
    25% {
        transform: scale3d(1.2, 1.2, 1);
        opacity: 1;
    }

    100% {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .body-home .list-top-header {
        display: none;
    }
}

.main-story [class^='cell-'] {
    position: relative;
    height: 696px;
    padding-right: 50%;
}

.main-story [class^='cell-']:nth-child(odd) {
    background-color: #F3F3F3;
}

.main-story [class^='cell-'] .text {
    position: absolute;
    right: 50%;
    top: 50%;
    width: calc(565px + 130px * 2);
    max-width: 50%;
    padding: 0 130px;
    box-sizing: border-box;
    text-align: left;
    transform: translateY(-50%);
}

.main-story [class^='cell-'] .text h3 {
    font-size: 36px;
    line-height: 45px;
    font-weight: 700;
}

.main-story [class^='cell-'] .text p {
    font-size: 20px;
    line-height: 28px;
    margin-top: 27px;
}

.main-story [class^='cell-'] .text .btns {
    margin: 30px 0 0 -8px;
    font-size: 0;
}

.main-story [class^='cell-'] .text .btns a, .main-story [class^='cell-'] .text .btns button {
    margin: 0 8px;
    padding: 0 40px;
}

.main-story [class^='cell-'] .gallery {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
}

.main-story [class^='cell-'] .gallery ul {
    width: 100%;
    height: 100%;
}

.main-story [class^='cell-'] .gallery li {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.main-story [class^='cell-'] .gallery .swiper-button-prev, .main-story [class^='cell-'] .gallery .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 21px;
    height: 402px;
    transform: translateY(-50%);
    background: url("../../../resource/images/ic_next_arrow_white.png") 50% 50%/contain no-repeat;
}

.main-story [class^='cell-'] .gallery .swiper-button-prev {
    left: 45px;
}

.main-story [class^='cell-'] .gallery .swiper-button-next {
    right: 45px;
    transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 767px) {
    .main-story [class^='cell-'] {
        height: auto;
        padding-right: 0;
    }

    .main-story [class^='cell-'] .text {
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 0;
        transform: none;
        padding: 33px 18px;
    }

    .main-story [class^='cell-'] .text h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .main-story [class^='cell-'] .text p {
        font-size: 14px;
        line-height: 20px;
        margin-top: 11px;
    }

    .main-story [class^='cell-'] .text .btns {
        margin: 40px 0 0 0;
        text-align: center;
    }

    .main-story [class^='cell-'] .text .btns a, .main-story [class^='cell-'] .text .btns button {
        margin: 0 5px;
        padding: 0 20px;
    }

    .main-story [class^='cell-'] .gallery {
        position: relative;
        width: 100%;
        height: 270px;
    }

    .main-story [class^='cell-'] .gallery .swiper-button-prev, .main-story [class^='cell-'] .gallery .swiper-button-next {
        width: 10px;
        height: 102px;
    }

    .main-story [class^='cell-'] .gallery .swiper-button-prev {
        left: 20px;
    }

    .main-story [class^='cell-'] .gallery .swiper-button-next {
        right: 20px;
    }
}

.main-local-shop {
    position: relative;
    padding-bottom: 533px;
}

.main-local-shop .text {
    max-width: 1650px;
    padding: 145px 130px;
    text-align: left;
    margin: 0 auto;
    box-sizing: border-box;
}

.main-local-shop .text h3 {
    font-size: 36px;
    line-height: 45px;
    font-weight: 700;
}

.main-local-shop .text p {
    font-size: 20px;
    line-height: 28px;
    margin-top: 27px;
}

.main-local-shop .text .btns {
    margin: 30px 0 0 -8px;
    font-size: 0;
}

.main-local-shop .text .btns a, .main-local-shop .text .btns button {
    margin: 0 8px;
    padding: 0 40px;
}

.main-local-shop .gallery {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 533px !important;
}

.main-local-shop .gallery ul {
    width: 100%;
    height: 100%;
}

.main-local-shop .gallery li {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.main-local-shop .gallery .swiper-button-prev, .main-local-shop .gallery .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 21px;
    height: 402px;
    transform: translateY(-50%);
    background: url("../../../resource/images/ic_next_arrow_white.png") 50% 50%/contain no-repeat;
}

.main-local-shop .gallery .swiper-button-prev {
    left: 45px;
}

.main-local-shop .gallery .swiper-button-next {
    right: 45px;
    transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 767px) {
    .main-local-shop {
        padding-bottom: 0;
    }

    .main-local-shop .text {
        position: static;
        width: 100%;
        max-width: 100%;
        padding: 0;
        transform: none;
        padding: 33px 18px;
        box-sizing: border-box;
    }

    .main-local-shop .text h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .main-local-shop .text p {
        font-size: 14px;
        line-height: 20px;
        margin-top: 11px;
    }

    .main-local-shop .text .btns {
        margin: 40px 0 0 0;
        text-align: center;
    }

    .main-local-shop .text .btns a, .main-local-shop .text .btns button {
        margin: 0 5px;
        padding: 0 20px;
    }

    .main-local-shop .gallery {
        position: relative;
        width: 100%;
    }

    .main-local-shop .gallery .swiper-button-prev, .main-local-shop .gallery .swiper-button-next {
        width: 10px;
        height: 102px;
    }

    .main-local-shop .gallery .swiper-button-prev {
        left: 20px;
    }

    .main-local-shop .gallery .swiper-button-next {
        right: 20px;
    }
}

.main-hot-deal {
    text-align: left;
    padding-bottom: 150px;
}

.main-hot-deal h3 {
    max-width: 1650px;
    padding: 90px 130px 70px;
    margin: 0 auto;
    font-size: 36px;
    line-height: 45px;
    font-weight: 700;
    box-sizing: border-box;
}

.main-hot-deal .items-deal {
    width: calc(100% + 16px);
    height: 350px;
    overflow: hidden;
}

.main-hot-deal .items-deal ul {
    height: 370px;
    margin: 0 -8px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
}

.main-hot-deal .items-deal li {
    width: 405px;
    padding: 0 8px;
    vertical-align: top;
    display: inline-block;
    white-space: normal;
}

.main-hot-deal .items-deal li a em {
    color: inherit;
}

.main-hot-deal .items-deal li figure {
    margin-bottom: 17px;
}

.main-hot-deal .items-deal li figure img {
    width: 100%;
    display: block;
    border-radius: 3px;
}

.main-hot-deal .items-deal li .date {
    font-family: 'Gilroy';
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: #2C2926;
    line-height: 16px;
    display: block;
}

.main-hot-deal .items-deal li .name {
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    margin: 5px 0 3px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-hot-deal .items-deal li .desc {
    max-height: 46px;
    font-size: 15px;
    color: #2C2926;
    word-break: keep-all;
    line-height: 23px;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (max-width: 767px) {
    .main-hot-deal {
        padding-bottom: 50px;
    }

    .main-hot-deal h3 {
        font-size: 18px;
        line-height: 24px;
        width: 100%;
        padding: 20px 18px 16px;
    }

    .main-hot-deal .items-deal {
        width: 100%;
        height: 270px;
    }

    .main-hot-deal .items-deal ul {
        height: 290px;
        margin: 0 -10px;
        padding-left: 18px;
    }

    .main-hot-deal .items-deal li {
        width: 274px;
        padding: 0 10px;
    }

    .main-hot-deal .items-deal li .name {
        font-size: 20px;
    }

    .main-hot-deal .items-deal li .desc {
        font-size: 13px;
    }

    .main-hot-deal .items-deal li:last-child {
        margin-right: 18px;
    }
}

.store-filter {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 360px;
    padding: 0 0 90px;
    background-color: #fff;
    overflow: hidden;
    overflow-y: scroll;
    box-sizing: border-box;
    z-index: 99;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transition: visibility 0.5s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -opacity: 0.75;
}

.store-filter:not(.open) {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
}

.store-filter .filter-header {
    position: sticky;
    top: 0;
    height: 46px;
    font-size: 15px;
    font-weight: 700;
    line-height: 46px;
    padding-left: 47px;
    border-bottom: 1px solid #F0F1F4;
    background: #fff;
    z-index: 1;
}

.store-filter .filter-header em {
    color: #FA4431;
}

.store-filter .filter-header .close {
    position: absolute;
    left: 6px;
    top: 3px;
    width: 40px;
    height: 40px;
    text-indent: -999em;
    overflow: hidden;
}

.store-filter .filter-header .close:before {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    content: '';
    background: url("../../../resource/images/set-icon-header-m.png") no-repeat 0 0/auto 20px;
}

.store-filter .filter-search {
    background: #fff;
}

.store-filter .filter-search .input-group {
    position: relative;
    height: 60px;
}

.store-filter .filter-search .input-group input[type="search"] {
    width: 100%;
    height: 100%;
    font-size: 15px;
    line-height: 1;
    padding: 0 20px 0 50px;
    background: #fff url("../../../resource/images/icon-search-input.svg") no-repeat 16px 50%;
}

.store-filter .filter-search .input-group .clear {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    text-indent: -999em;
    background: url("../../../resource/images/icon-clear-2.svg") no-repeat 11px 50%/23px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.store-filter .filter-search .input-group input[type="search"].has-value ~ .clear {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s, visibility 0.15s;
}

.store-filter .filter-group {
    position: relative;
    border-top: 1px solid #F6F3F3;
}

.store-filter .filter-group:after {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -1px;
    content: '';
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.store-filter .filter-group .toggle-tit {
    position: relative;
    height: 50px;
    padding: 0 18px;
    cursor: pointer;
}

.store-filter .filter-group .toggle-tit:after {
    content: '';
    position: absolute;
    right: 21px;
    top: 50%;
    width: 12px;
    height: 8px;
    margin-top: -4px;
    background: url("../../../resource/images/icon-toggle.png") 100% 50%/contain no-repeat;
}

.store-filter .filter-group .toggle-tit > h6 {
    font-size: 14px;
    line-height: 50px;
}

.store-filter .filter-group .toggle-tit .num-selected {
    position: absolute;
    right: 39px;
    top: 50%;
    font-size: 15px;
    font-weight: 700;
    color: #FA4431;
    transform: translateY(-47%);
}

.store-filter .filter-group .toggle-tit.open:after {
    transform: scaleY(-1);
    margin-top: -3px;
}

.store-filter .filter-group.filter-price .toggle-con {
    padding-bottom: 30px;
}

.store-filter .opt-list {
    padding-left: 18px;
}

.store-filter .opt-list li {
    border-top: 1px solid #F6F3F3;
    display: block;
    font-size: 0;
}

.store-filter .opt-list input + label {
    height: 47px;
    font-size: 14px;
    font-weight: 400;
    line-height: 47px;
    padding-left: 27px;
    display: block;
    user-select: none;
}

.store-filter .opt-list input + label:before, .store-filter .opt-list input + label:after {
    left: 0;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 1px solid transparent;
}

.store-filter .opt-list input + label:before {
    border-color: #fff;
    background-color: #D9DBE9;
}

.store-filter .opt-list input + label:after {
    background: #FFB800 url("../../../resource/images/icon-check-filter-layer.png") no-repeat 3px 4px/9px auto;
}

.store-filter .opt-list input[type="radio"] + label:after {
    border: 5px solid #FFB800;
    background: #fff;
}

.store-filter .opt-list input:checked + label {
    color: #FFB800;
}

.store-filter .opt-list.color input + label:before, .store-filter .opt-list.color input + label:after {
    border-radius: 9px;
}

.store-filter .opt-list.color input + label:before {
    background-color: #fff;
}

.store-filter .opt-list.color input + label.black:before {
    background: #000;
}

.store-filter .opt-list.color input + label.red:before {
    background: #ff0000;
}

.store-filter .opt-list.color input + label.brown:before {
    background: #cc8744;
}

.store-filter .opt-list.color input + label.gold:before {
    background-image: linear-gradient(to bottom, #fdc400, #fbd600);
}

.store-filter .opt-list.color input + label.green:before {
    background: #00ba00;
}

.store-filter .opt-list.color input + label.grey:before {
    background: #c6c6c6;
}

.store-filter .opt-list.color input + label.metallic:before {
    background-image: linear-gradient(to bottom, #e5e5e5 11%, #ffffff 45%, #c6c6c6 81%);
}

.store-filter .opt-list.color input + label.multicolor:before {
    background-image: linear-gradient(to bottom, #ff0000, #ffd700 29%, #00ff92 54%, #2900ff 73%, #ff0089);
}

.store-filter .opt-list.color input + label.white:before {
    border-color: #e5e5e5;
    background: #fff;
}

.store-filter .opt-list.color input + label:after {
    background: none;
    border: 1px solid #FA4431;
}

.store-filter .opt-list.color input:checked + label:before {
    opacity: 1;
}

.store-filter .opt-period {
    padding: 25px 18px 0;
    border-top: 1px solid #F6F3F3;
    display: flex;
}

.store-filter .opt-period input[type="text"] {
    flex: 1;
    width: 100%;
    height: 32px;
    border-color: #FFB800;
    background-color: #fff;
    line-height: 30px;
}

.store-filter .opt-period .separator {
    flex: none;
    width: 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}

.store-filter .opt-range {
    position: relative;
    height: 18px;
    margin: 20px 34px 4px;
}

.store-filter .opt-range:before {
    content: '';
    position: absolute;
    left: -16px;
    right: -16px;
    top: 10px;
    height: 12px;
    border-radius: 6px;
    background-color: #d6d6d6;
}

.store-filter .opt-range button {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    border: 2px solid #FFB800;
    background-color: #fff;
    border-radius: 16px;
    box-sizing: border-box;
    text-indent: -5000px;
    overflow: hidden;
    font-size: 0;
}

.store-filter .opt-range button:before {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 10px;
    content: '';
    margin: -5px 0 0 -1px;
    border-radius: 2px;
    background: #FFB800;
}

.store-filter .opt-range button + button {
    left: 100%;
}

.store-filter .opt-range .active-range {
    position: absolute;
    left: 0;
    right: 0;
    top: 10px;
    height: 12px;
    border-radius: 6px;
    background-color: #FFB800;
}

.store-filter .btn-wrap {
    position: relative;
    margin-top: -1px;
    padding: 15px 14px 25px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    background: inherit;
    display: flex;
}

html:not(.ie) .store-filter .btn-wrap {
    position: fixed;
    width: 360px;
    right: 0;
    bottom: 0;
    margin-top: 0;
}

.store-filter .btn-wrap button {
    margin: 0 4px 0 5px;
}

.store-filter .btn-wrap .btn-reset {
    width: 100px;
    background: #828282;
}

.store-filter .btn-wrap .btn-final {
    background: #272727;
    flex: 1;
}

.store-filter .btn-wrap .btn-final.none {
    pointer-events: none;
}

.store-filter .btn-wrap .btn-final.none:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    line-height: 43px;
    content: '검색된 상품이 없습니다';
    background: #ccc;
}

@media (max-width: 767px) {
    .store-filter {
        width: 100% !important;
        padding-bottom: 84px;
    }

    html:not(.ie) .store-filter .btn-wrap {
        width: 100%;
    }
}

.list-top-banner img {
    width: 100%;
    display: block;
}

@media (min-width: 768px) {
    .list-top-banner {
        display: none;
    }
}

.list-slide-group {
    width: 100%;
    text-align: center;
    user-select: none;
    -ms-user-select: none;
}

.list-slide-group .list-slide-item {
    box-sizing: border-box;
}

.list-slide-group .list-slide-item:not(:first-child) {
    display: none;
}

.num-total-items {
    transition: opacity 0.2s;
}

.num-total-items.ready {
    opacity: 0;
}

.num-total-items strong {
    font-weight: 700;
}

.list-top-header {
    position: sticky;
    top: 146px;
    height: 82px;
    padding: 0 30px;
    background: #fff;
    box-sizing: border-box;
    display: flex;
    transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s, visibility 0.2s;
    z-index: 87;
}

html.expand-ui .list-top-header {
    transform: translate3d(0, -80px, 0);
}

html.is-content-slide .list-top-header {
    opacity: 0;
    visibility: hidden;
}

.store-header.notice ~ .list-top-header {
    top: 176px;
}

html.expand-ui .store-header.notice ~ .list-top-header {
    transform: translate3d(0, -110px, 0);
}

.store-tab-nav.with-store-icon ~ .list-top-header {
    top: 186px;
}

.store-header.notice ~ .store-tab-nav.with-store-icon ~ .list-top-header {
    top: 216px;
}

.list-top-header .num-total-items {
    font-size: 18px;
    -color: #5d5d5d;
    line-height: 35px;
    -margin-right: 12px;
    padding-top: 24px;
}

.list-top-header .star-rating-black {
    margin: 22px 0 0 17px;
    transition: opacity 0.2s;
}

.list-top-header .star-rating-black.ready {
    opacity: 0;
}

.list-top-header .filter-info {
    display: none;
}

.list-top-header .filtered-list {
    position: relative;
    height: 83px;
    flex: 1;
    overflow: hidden;
}

.list-top-header .filtered-list:before, .list-top-header .filtered-list:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 1px;
    width: 25px;
    content: '';
    background-image: linear-gradient(to right, #fff 70%, rgba(255, 255, 255, 0));
    z-index: 1;
}

.list-top-header .filtered-list:after {
    left: auto;
    right: 0;
    background-image: linear-gradient(to left, #fff 50%, rgba(255, 255, 255, 0));
}

.list-top-header .filtered-list .scrollable {
    width: 100%;
    height: calc(83px + 20px);
    font-size: 0;
    white-space: nowrap;
    padding: 24px 25px;
    box-sizing: border-box;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.list-top-header .filtered-list .scrollable > span,
      .list-top-header .filtered-list .scrollable > button {
    position: relative;
    min-width: 35px;
    height: 35px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    line-height: 34px;
    vertical-align: top;
    padding: 0 35px 0 15px;
    border-radius: 18px;
    box-sizing: border-box;
    background: #41434D;
    display: inline-block;
    cursor: pointer;
    transition: 0.1s;
    transition-property: color, border-color, background-color;
}

.list-top-header .filtered-list .scrollable > span button,
        .list-top-header .filtered-list .scrollable > button button {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 35px;
    text-indent: -999em;
    background: url("../../../resource/images/icon-delete-filtered.png") no-repeat 6px 8px/18px;
    overflow: hidden;
    transition: inherit;
}

.list-top-header .filtered-list .scrollable > span:not(:last-child) {
    margin-right: 10px;
}

.list-top-header .filtered-list .scrollable > button {
    padding: 0 20px;
}

.list-top-header .filtered-list .scrollable button.sorted {
    color: #41434D;
    margin-right: 10px;
    border: 1px solid #d8d8d8;
    background: #f3f3f3;
}

.list-top-header .filtered-list .scrollable button.reset {
    background: #FA4431;
    display: none;
}

.list-top-header .filtered-list .scrollable > span + button.reset {
    display: inline-block;
}

.list-top-header .cols-selector {
    margin: 0 -9px 0 auto;
    padding-top: 26px;
}

.list-top-header .cols-selector button {
    width: 32px;
    height: 32px;
    font-size: 24px;
    text-align: center;
    line-height: 31px;
}

.list-top-header .cols-selector button.current {
    font-weight: 700;
}

.list-top-header .filtered-list ~ .cols-selector {
    margin-left: 10px;
}

@media (min-width: 768px) {
    .list-top-header.review-list-header select,
    .list-top-header.review-list-header .select-title {
        display: none;
    }

    .list-top-header.has-no-result {
        border-bottom: 1px solid #F0F1F4;
    }
}

@media (max-width: 767px) {
    .list-top-header {
        top: 96px;
        height: 52px;
        padding: 0;
        border-bottom: 1px solid #F0F1F4;
    }

    html.expand-ui .list-top-header {
        transform: translate3d(0, -46px, 0);
    }

    .store-tab-nav.with-store-icon ~ .list-top-header {
        top: 142px;
    }

    .store-header.notice ~ .list-top-header {
        top: 121px;
    }

    html.expand-ui .store-header.notice ~ .list-top-header {
        transform: translate3d(0, -71px, 0);
    }

    .store-header.notice ~ .store-tab-nav.with-store-icon ~ .list-top-header {
        top: 167px;
    }

    .list-top-header .num-total-items,
      .list-top-header .cols-selector {
        display: none;
    }

    .list-top-header .filter-info {
        width: 95px;
        height: 52px;
        font-size: 12px;
        color: #333;
        line-height: 49px;
        padding-left: 18px;
        border-right: 1px solid #F0F1F3;
        box-sizing: border-box;
        display: block;
    }

    .list-top-header .filter-info em {
        font-weight: 700;
        color: #FA4431;
    }

    .list-top-header .filtered-list {
        height: 52px;
    }

    .list-top-header .filtered-list:before, .list-top-header .filtered-list:after {
        content: none;
    }

    .list-top-header .filtered-list .scrollable {
        height: calc(52px + 20px);
        padding: 11px 18px 10px 10px;
    }

    .list-top-header .filtered-list .scrollable > span,
          .list-top-header .filtered-list .scrollable > button {
        min-width: 30px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        padding: 0 9px;
        border-radius: 15px;
    }

    .list-top-header .filtered-list .scrollable > span button,
            .list-top-header .filtered-list .scrollable > button button {
        display: none;
    }

    .list-top-header .filtered-list .scrollable > span:not(:last-child) {
        margin-right: 5px;
    }

    .list-top-header .filtered-list .scrollable > button {
        padding: 0 15px;
    }

    .list-top-header .filtered-list .scrollable button.sorted {
        margin-right: 5px;
    }

    .list-top-header.review-list-header .num-total-items {
        font-size: 13px;
        line-height: 55px;
        margin-right: 3px;
        padding: 0 0 0 18px;
        display: block;
    }

    .list-top-header.review-list-header .star-rating-black {
        margin-top: 18px;
        margin-left: 5px;
    }

    .list-top-header.review-list-header .select-title {
        position: absolute;
        right: 18px;
        top: 12px;
        min-width: 80px;
        width: auto !important;
        height: 30px;
        border-color: #D8D8D8 !important;
        border-radius: 15px;
        background: #f3f3f3;
    }

    .list-top-header.review-list-header .select-title:after {
        content: none;
    }

    .list-top-header.review-list-header .select-title strong {
        text-align: center;
        line-height: 28px;
        padding: 0 15px;
    }

    .list-top-header.has-no-result {
        display: none;
    }
}

.mobile-num-items {
    transition: opacity 0.2s, visibility 0.2s;
}

html.is-content-slide .mobile-num-items {
    opacity: 0;
    visibility: hidden;
}

.mobile-num-items .num-total-items {
    font-size: 13px;
    line-height: 34px;
    padding-top: 2px;
    padding-left: 18px;
}

.list-top-header.has-no-result ~ .mobile-num-items {
    border-bottom: 1px solid #F0F1F4;
}

@media (min-width: 768px) {
    .mobile-num-items {
        display: none;
    }
}

.list-box-wrap {
    padding: 0 30px 50px;
}

.list-box-wrap .no-result ~ .list-box {
    display: none;
}

.list-box-wrap .photo-slider {
    transition: opacity 0.5s;
}

.list-box-wrap .photo-slider.hide {
    opacity: 0;
}

@media (min-width: 768px) {
    .list-box-wrap .photo-slider {
        display: none;
    }
}

@media (max-width: 767px) {
    .list-box-wrap {
        padding: 0 0 30px;
        overflow: hidden;
    }
}

.list-top-info {
    padding: 65px 0 75px;
}

.list-top-info h3 {
    font-size: 45px;
    font-weight: 500;
    line-height: 1;
}

.list-top-info p {
    font-size: 24px;
    color: #51585E;
    word-break: keep-all;
    line-height: 1;
    margin-top: 35px;
    padding: 0 40px;
}

@media (max-width: 767px) {
    .list-top-info {
        padding: 36px 0 38px;
    }

    .list-top-info h3 {
        font-size: 24px;
        line-height: 34px;
    }

    .list-top-info p {
        font-size: 14px;
        line-height: 17px;
        margin-top: 4px;
        padding: 0 20px;
    }
}

.list-box {
    text-align: center;
    margin: 0 -13px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
}

.list-box.blank:after {
    height: 100vh;
    content: '';
    display: block;
}

.list-box.loading:before {
    top: 200px;
}

.list-box > li {
    position: relative;
    width: 25%;
    padding: 0 13px 30px;
    box-sizing: border-box;
}

.swiper-container .list-box {
    margin: 0;
    flex-wrap: nowrap;
    overflow: visible;
}

@media (min-width: 768px) {
    .list-cols-5 .list-box:not(.product-review) > li {
        width: calc(100% / 5);
    }

    .list-cols-6 .list-box:not(.product-review) > li {
        width: calc(100% / 6);
    }

    .list-cols-7 .list-box:not(.product-review) > li {
        width: calc(100% / 7);
    }

    .list-cols-8 .list-box:not(.product-review) > li {
        width: calc(100% / 8);
    }

    .list-cols-9 .list-box:not(.product-review) > li {
        width: calc(100% / 9);
    }

    .list-cols-10 .list-box:not(.product-review) > li {
        width: calc(100% / 10);
    }
}

.list-box > li .util {
    position: absolute;
    left: 13px;
    right: 13px;
    top: 0;
    -background: rgba(255, 0, 0, 0.1);
    pointer-events: none;
}

.list-box > li .util > span {
    width: 100%;
    padding-top: 150%;
    display: block;
}

.list-box > li .util .btn-likeit {
    position: absolute;
    right: 26px;
    bottom: 26px;
    pointer-events: auto;
}

.list-box > li:not(.display) {
    opacity: 0;
}

@media (max-width: 767px) {
    .list-box {
        margin: 0 -5px;
    }

    .list-box.loading {
        border-top: 0;
    }

    .list-box.loading:before {
        top: 115px;
    }

    .list-box:not(.product-review) > li {
        width: 50% !important;
        padding: 0 5px 30px;
    }

    .list-box > li .util {
        left: 5px;
        right: 5px;
    }

    .list-box > li .util .btn-likeit {
        right: 13px;
        bottom: 15px;
    }
}

.no-result + .list-box {
    border: 0;
}

.product-tags {
    position: absolute;
    left: 0;
    top: calc(21px - 9px);
}

.product-tags em {
    width: 62px;
    height: 25px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    margin-top: 9px;
    border-radius: 0 3px 3px 0;
    box-sizing: border-box;
    background: #FFB800;
    display: block;
}

.product-tags em.sale {
    background: #FA4431;
}

@media (max-width: 767px) {
    .product-tags {
        position: absolute;
        left: 0;
        top: calc(13px - 8px);
    }

    .product-tags em {
        width: 40px;
        height: 17px;
        font-size: 10px;
        line-height: 17px;
        margin-top: 8px;
    }
}

a.product {
    position: relative;
    text-align: center;
    display: block;
}

a.product figure {
    position: relative;
    width: 100%;
    display: block;
}

a.product figure:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: '';
    box-shadow: inset 0 0 0 1px #f3f3f3;
    z-index: 1;
    pointer-events: none;
}

a.product figure img {
    width: 100%;
    height: auto;
    display: block;
}

a.product figure[style*="padding"] {
    overflow: hidden;
}

a.product figure[style*="padding"] img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

a.product .brand {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    line-height: 20px;
    margin-top: 10px;
    display: block;
}

a.product .name {
    max-height: calc(18px * 2);
    font-size: 14px;
    line-height: 18px;
    margin: 2px 10px 0;
    display: block;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

a.product .price {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    line-height: 17px;
    margin-top: 6px;
    display: block;
}

a.product .price:after {
    content: '원';
}

a.product .price.sale {
    font-weight: 600;
    color: #FA4431;
}

a.product .original-price {
    font-size: 14px;
    font-weight: 600;
    color: #a5a5a5;
    line-height: 17px;
    margin-top: 1px;
    display: block;
}

a.product .original-price:after {
    content: '원';
}

@media (max-width: 767px) {
    a.product .brand {
        font-size: 12px;
        line-height: 15px;
        margin-top: 12px;
    }

    a.product .name {
        font-size: 12px;
        line-height: 18px;
        margin-top: 2px;
    }

    a.product .price {
        font-size: 14px;
        line-height: 18px;
        margin-top: 8px;
    }

    a.product .price:after {
        font-size: 12px;
        line-height: 18px;
    }

    a.product .original-price {
        font-size: 12px;
        line-height: 15px;
    }
}

.no-result {
    position: relative;
    display: flex;
    font-size: 24px;
    text-align: center;
    line-height: 34px;
    height: 484px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0.5;
}

.no-result.base {
    display: none;
}

.no-result:before {
    width: 60px;
    height: 60px;
    content: '';
    background: url("../../../resource/images/icon-circle-excla.svg") no-repeat 0 0/auto 100%;
    margin-bottom: 35px;
}

.list-box-wrap .no-result {
    border-top: 1px solid #E0E0E0;
}

@media (max-width: 767px) {
    .no-result {
        font-size: 18px;
        height: 234px;
    }

    .no-result:before {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }
}

.no-result.bag:before {
    background-image: url("../../../resource/images/icon-null-bag.svg");
}

.no-result.notifications:before {
    background-image: url("../../../resource/images/icon-null-notifications.svg");
}

.instead-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .instead-title {
        font-size: 15px;
        margin-bottom: 0;
        padding-left: 18px;
    }
}

.store-intro {
    position: relative;
    height: 154px;
    padding: 24px 30px 23px;
    background-color: #F7F8FA;
    box-sizing: border-box;
}

.store-intro h3 {
    font-size: 24px;
    font-weight: 600;
}

.store-intro .info {
    font-size: 0;
}

.store-intro .info > span {
    color: #4D4D4D;
    font-size: 14px;
}

.store-intro .info > span:first-child {
    color: #000;
}

.store-intro .info > span + span:before {
    content: '∙';
    vertical-align: middle;
}

.store-intro .additional {
    position: absolute;
    left: 30px;
    bottom: 23px;
    font-size: 0;
}

.store-intro .additional a {
    position: relative;
    display: inline-block;
    min-width: 80px;
    height: 28px;
    padding: 0 22px;
    border-radius: 2px;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 28px;
    color: #000;
    text-align: center;
    box-sizing: border-box;
    vertical-align: middle;
    transition: color 0.15s, background-color 0.15s;
}

.hoverable .store-intro .additional a:hover, .store-intro .additional a.current {
    background-color: #000;
    color: #fff;
}

.store-intro .additional a.share {
    width: 28px;
    min-width: auto;
    padding: 0;
    text-indent: -5000px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

.store-intro .additional a.share:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    background: url("../../../resource/images/icon-store-share.png") 50% 50%/contain no-repeat;
}

.store-intro .additional a.share:hover:after {
    background: url("../../../resource/images/icon-store-share-over.png") 50% 50%/contain no-repeat;
}

.store-intro .additional a + a {
    margin-left: 7px;
}

.store-intro .subscribe {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0;
}

.store-intro .subscribe button {
    position: relative;
    height: 44px;
    margin-left: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 43px;
    color: #fff;
    padding: 0 24px;
    border-radius: 22px;
    box-sizing: border-box;
}

.store-intro .subscribe .btn-subscribe {
    width: 138px;
    text-indent: -999em;
    background-color: #FFB800;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.35s;
}

.store-intro .subscribe .btn-subscribe:before, .store-intro .subscribe .btn-subscribe:after {
    position: absolute;
    left: 50%;
    content: '세일∙신상 구독';
    text-indent: 0;
    white-space: nowrap;
    transform: translate3d(-50%, 0, 0);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.store-intro .subscribe .btn-subscribe:after {
    content: '구독중';
    transform: translate3d(-50%, 44px, 0);
    pointer-events: none;
}

.store-intro .subscribe .btn-notify {
    position: absolute;
    right: 96px;
    width: 44px;
    padding: 0;
    background-color: #fff;
    text-indent: -5000px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
}

.store-intro .subscribe .btn-notify:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    background: url("../../../resource/images/icon-bell.png") 50% 50%/contain no-repeat;
}

.store-intro .subscribe.on .btn-subscribe {
    width: 88px;
    background-color: #ccc;
}

.store-intro .subscribe.on .btn-subscribe:before {
    transform: translate3d(-50%, -44px, 0);
}

.store-intro .subscribe.on .btn-subscribe:after {
    transform: translate3d(-50%, 0, 0);
}

.store-intro .subscribe.on .btn-notify {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s 0.2s, visibility 0.4s;
}

.store-intro .subscribe.on .btn-notify:after {
    background-image: url("../../../resource/images/icon-bell-off.png");
}

.store-intro .subscribe.on .btn-notify.on:after {
    background-image: url("../../../resource/images/icon-bell.png");
}

@media (max-width: 767px) {
    .store-intro {
        height: auto;
        padding: 18px 18px 64px;
    }

    .store-intro h3 {
        padding-right: 110px;
        font-size: 14px;
        line-height: 1.3;
    }

    .store-intro .info {
        margin-top: 4px;
    }

    .store-intro .info > span {
        font-size: 12px;
    }

    .store-intro .additional {
        left: 18px;
        bottom: 18px;
    }

    .store-intro .additional a {
        min-width: 60px;
        padding: 0 10px;
        font-weight: 400;
        font-size: 13px;
    }

    .store-intro .subscribe {
        right: 18px;
        top: 24px;
        transform: none;
    }

    .store-intro .subscribe button {
        height: 25px;
        padding: 0 10px;
        margin-left: 6px;
        font-size: 12px;
        font-weight: 400;
        line-height: 24px;
    }

    .store-intro .subscribe .btn-subscribe {
        width: 94px;
    }

    .store-intro .subscribe .btn-subscribe:after {
        transform: translate3d(-50%, 25px, 0);
    }

    .store-intro .subscribe .btn-notify {
        right: 62px;
        width: 25px;
    }

    .store-intro .subscribe .btn-notify:after {
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
    }

    .store-intro .subscribe.on .btn-subscribe {
        width: 56px;
    }

    .store-intro .subscribe.on .btn-subscribe:before {
        transform: translate3d(-50%, -25px, 0);
    }
}

.sec-search {
    padding: 54px 0 72px;
    text-align: center;
    color: #000;
}

.sec-search .result {
    font-size: 24px;
    line-height: 34px;
}

.sec-search .result mark {
    display: inline-block;
    font-weight: 700;
}

.sec-search .result .keyword {
    padding-right: 0.7em;
}

.sec-search .result .keyword:before {
    content: '‘';
}

.sec-search .result .keyword:after {
    content: '’';
}

.sec-search .msg {
    margin-top: 26px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 22px;
}

.sec-search .msg > span {
    display: block;
}

.sec-search .reset {
    margin: 55px 0 0;
    width: 185px;
}

.sec-search .instead {
    margin-top: 200px;
    font-size: 36px;
    font-weight: 600;
    text-align: left;
    line-height: 1;
    margin-bottom: -39px;
}

@media (max-width: 767px) {
    .sec-search {
        padding: 28px 0 36px;
    }

    .sec-search .result {
        font-size: 18px;
    }

    .sec-search .result .keyword {
        font-size: 24px;
        margin-bottom: 1px;
        display: block;
    }

    .sec-search .msg {
        margin-top: 24px;
    }

    .sec-search .msg > span {
        font-size: 14px;
        line-height: 20px;
    }

    .sec-search .reset {
        width: calc(100% - 60px);
        margin: 30px 0 0;
    }

    .sec-search .instead {
        margin: 100px 20px -25px;
        font-size: 18px;
        line-height: 34px;
    }
}

.header-filter {
    position: relative;
    height: 45px;
    margin: 40px 0 25px;
    text-align: right;
}

.header-filter .title {
    position: absolute;
    left: 0;
    top: 0;
}

.header-filter .title .breadcrumbs {
    vertical-align: middle;
    margin-right: 20px;
}

.header-filter .title .breadcrumbs a {
    font-size: 30px;
    font-weight: 800;
    color: #000;
}

.header-filter .title .breadcrumbs a + a:before {
    content: '>';
}

@media (max-width: 767px) {
    .header-filter .title .breadcrumbs a {
        font-size: 18px;
    }
}

.header-filter .title .title-page {
    display: inline-block;
    vertical-align: middle;
}

.header-filter .title .title-page:not(.show) {
    visibility: hidden;
}

.header-filter .function {
    font-size: 0;
}

.header-filter .function .sort {
    width: 134px;
    margin-left: 10px;
}

.header-filter .function .btn-filter {
    margin-left: 10px;
}

@media (max-width: 767px) {
    .header-filter {
        height: auto;
        margin: 19px 0;
        text-align: left;
    }

    .header-filter .title {
        position: static;
        padding: 5px 0 25px;
    }

    .header-filter .title .breadcrumbs {
        display: none;
    }

    .header-filter .title .title-page:before {
        display: none;
    }

    .header-filter .title .title-page:after {
        content: ' 상품';
    }

    .header-filter .function {
        display: flex;
    }

    .header-filter .function .btn-subscribe {
        position: absolute;
        right: 0;
        top: 5px;
        height: 25px;
        font-size: 10px;
        line-height: 25px;
    }

    .header-filter .function .sort {
        width: auto;
        margin-left: 0;
        flex: 1;
        text-align: center;
    }

    .header-filter .function .btn-filter {
        width: auto;
        height: 44px;
        margin-left: 0;
        flex: 1;
        text-indent: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 38px;
        background-color: #FFF;
        color: #000;
        font-weight: 400;
        border: 1px solid #000;
        border-left: none;
    }

    .header-filter .function .btn-filter:before {
        display: none;
    }
}

.sec-subscribe-group {
    padding: 78px 0 80px;
    overflow: hidden;
}

.sec-subscribe-group h3 {
    padding-bottom: 16px;
}

.sec-subscribe-group .btn-more {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .sec-subscribe-group {
        padding: 69px 0 50px;
    }

    .sec-subscribe-group h3 {
        padding-left: 20px;
    }

    .sec-subscribe-group .btn-more {
        margin-top: -11px;
    }
}

.store-list-tab {
    position: relative;
    margin: 30px 0 -55px;
    overflow: hidden;
    z-index: 1;
}

.store-list-tab:before, .store-list-tab:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    content: '';
    width: 40px;
    background: linear-gradient(to right, #fff 36.46%, rgba(255, 255, 255, 0) 83.33%);
    pointer-events: none;
    z-index: 1;
}

.store-list-tab:after {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

.store-list-tab .scrollable {
    font-size: 0;
    text-align: center;
    white-space: nowrap;
    padding: 20px 33px 20px 32px;
    margin-bottom: -20px;
    overflow: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.store-list-tab .scrollable li {
    display: inline-block;
}

.store-list-tab .scrollable a {
    width: 105px;
    padding: 10px 17px 10px 18px;
    box-sizing: border-box;
    display: block;
}

.store-list-tab .scrollable a figure {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    border: 3px solid #000;
    border-radius: 100%;
    box-sizing: border-box;
    background: #fff no-repeat 50% 50% / auto 100%;
    display: block;
}

.store-list-tab .scrollable a figure.all {
    background: #000 url("../../../resource/images/icon-subscribe-list.svg") no-repeat 50% 50%/auto;
}

.store-list-tab .scrollable a span {
    width: calc(100% + 10px);
    font-size: 12px;
    white-space: nowrap;
    line-height: 34px;
    text-overflow: ellipsis;
    margin: 5px -5px 0;
    display: block;
    overflow: hidden;
}

.store-list-tab .scrollable a.selected span {
    font-weight: 700;
}

.store-list-tab .scrollable a:not(.selected) figure {
    opacity: 0.3;
}

@media (max-width: 767px) {
    .store-list-tab {
        position: relative;
        margin: 0 0 -50px;
        border-bottom: 1px solid #E5E5E5;
    }

    .store-list-tab:before, .store-list-tab:after {
        width: 26px;
    }

    .store-list-tab .scrollable {
        padding: 14px 7px 20px 8px;
    }

    .store-list-tab .scrollable a {
        width: 75px;
        padding: 10px 13px 9px 12px;
        box-sizing: border-box;
        display: block;
    }

    .store-list-tab .scrollable a figure {
        width: 50px;
        height: 50px;
    }

    .store-list-tab .scrollable a figure.all {
        background-image: url("../../../resource/images/icon-subscribe-white-big.svg");
    }

    .store-list-tab .scrollable a span {
        width: calc(100% + 6px);
        margin: 5px -3px 0;
    }
}

.header-wishlist {
    position: relative;
    height: 77px;
    margin-top: 31px;
    color: #000;
}

.header-wishlist h3 {
    line-height: 77px;
}

.header-wishlist .function {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.header-wishlist .function .total {
    font-size: 24px;
    font-weight: 800;
}

.header-wishlist .function .btn-edit {
    display: inline-block;
    font-size: 24px;
    font-weight: 800;
    color: #000;
    text-decoration: underline;
    margin-left: 30px;
}

@media (max-width: 767px) {
    .header-wishlist {
        height: 60px;
        margin-top: 8px;
    }

    .header-wishlist h3 {
        line-height: 60px;
    }

    .header-wishlist .function .total {
        display: none;
    }

    .header-wishlist .function .btn-edit {
        font-size: 18px;
        margin-left: 0;
    }
}

.tabs-collection {
    position: relative;
    margin: 0 -18px;
    padding: 15px;
    background-color: #F3F3F3;
    font-size: 0;
}

.tabs-collection ul {
    max-height: 132px;
    overflow: hidden;
}

.tabs-collection li {
    display: inline-block;
    width: 33.333%;
    padding: 3px;
    box-sizing: border-box;
}

.tabs-collection a {
    display: block;
    height: 38px;
    padding: 0 12px;
    background-color: #fff;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    line-height: 38px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabs-collection a strong {
    font-weight: 700;
    color: #FA4431;
}

.tabs-collection a.more {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: calc((100% - 48px) / 3);
    background-color: #000;
    color: #fff;
    display: none;
}

.tabs-collection.has-more:not(.open) a.more {
    display: block;
}

.tabs-collection.open ul {
    max-height: 100%;
}

.collection-category > li {
    border-bottom: 1px solid #F3F3F3;
}

.collection-category .toggle-tit {
    position: relative;
    display: block;
    height: 48px;
    padding-right: 10px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
    line-height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.collection-category .toggle-tit:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 11px;
    height: 6px;
    margin-top: -3px;
    background: url("../../../resource/images/icon-title-toggle.png") 0 0/contain no-repeat;
}

.collection-category .toggle-tit.open:after {
    transform: scaleY(-1);
}

.collection-category .toggle-con {
    padding: 0 12px 7px;
    display: none;
}

.collection-category .toggle-con a {
    display: block;
    height: 39px;
    font-size: 14px;
    line-height: 39px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collection-category .toggle-con a.uncheck:after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background-color: #FA4431;
    margin-left: 8px;
    vertical-align: 3px;
}

.collection-category .toggle-tit.open ~ .toggle-con {
    display: block;
}

.store-landing .btn-collect {
    position: relative;
    display: block;
    height: 80px;
    padding: 0 30px;
    margin: 0 -18px;
    background-color: #F3F3F3;
    color: #00BA88;
    font-size: 18px;
    font-weight: 700;
    line-height: 80px;
}

.store-landing .btn-collect:hover {
    color: #00BA88;
}

.store-landing .btn-collect:after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 15px;
    background: url("../../../resource/images/icon-collect.png") 0 0/contain no-repeat;
    transform: translateY(-50%);
}

.store-landing li {
    position: relative;
    border-bottom: 1px solid #F3F3F3;
}

.store-landing li a {
    display: flex;
    padding: 12px 0;
}

.store-landing li a .info {
    font-size: 12px;
    line-height: 18px;
    padding: 5px 15px 0;
}

.store-landing li a .info em {
    font-size: 15px;
    font-weight: normal;
    color: #000;
    line-height: 22px;
    display: block;
}

.store-landing li a .info em span {
    padding-left: 0.5em;
}

.store-landing li a .info .items {
    color: #898a8d;
}

.store-landing li a .info .sale {
    color: #571ee9;
}

.items-event {
    width: calc(100% + 36px);
    height: 300px;
    margin: 29px -18px 0;
    overflow: hidden;
}

.items-event ul {
    height: 320px;
    white-space: nowrap;
    padding: 0 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    font-size: 0;
}

.items-event li {
    width: 274px;
    padding: 0 10px;
    vertical-align: top;
    display: inline-block;
    white-space: normal;
}

.items-event li a em {
    color: inherit;
}

.items-event li figure {
    margin-bottom: 17px;
}

.items-event li figure img {
    width: 100%;
    display: block;
    border-radius: 3px;
}

.items-event li .date {
    font-family: 'Gilroy';
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: #2C2926;
    line-height: 16px;
    display: block;
}

.items-event li .name {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin: 5px 0 3px;
    display: block;
}

.items-event li .desc {
    max-height: 46px;
    font-size: 13px;
    color: #2C2926;
    word-break: keep-all;
    line-height: 23px;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-review {
    position: relative;
    padding-right: 280px;
    -cursor: pointer;
}

.item-review .additional {
    margin-top: 19px;
    font-size: 0;
}

.item-review .additional > li {
    display: inline-block;
    padding-right: 16px;
    font-weight: 500;
    font-size: 12px;
    box-sizing: border-box;
    vertical-align: top;
}

.item-review .additional .oneline {
    color: #0087D2;
}

.item-review .additional .basic > span + span {
    margin-left: 10px;
}

.item-review .additional .body > span + span {
    margin-left: 5px;
}

.item-review .con {
    margin-top: 15px;
    font-size: 14px;
    line-height: 22px;
    word-break: break-all;
    font-weight: 400;
}

.item-review .con .btn-more {
    color: #898a8d;
    white-space: nowrap;
}

.item-review .con .btn-more:before {
    content: '... ';
    color: #000;
    padding-right: 5px;
}

.item-review .con.cropped ~ .con {
    display: none;
}

.item-review .thumbnails {
    position: absolute;
    right: 0;
    top: 57px;
    width: 264px;
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
}

.item-review .thumbnails li {
    display: inline-block;
    width: 80px;
    height: 80px;
    vertical-align: top;
    margin-left: 8px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    background-color: #F3F3F3;
    border: 1px solid #F3F3F3;
    border-radius: 3px;
    box-sizing: border-box;
}

.item-review .images {
    display: none;
    width: calc(100% + 280px);
    height: 400px;
    margin-top: 30px;
    font-size: 0;
    white-space: nowrap;
    overflow: hidden;
}

.item-review .images ul {
    height: 430px;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.item-review .images li {
    display: inline-block;
}

.item-review .images li + li {
    margin-left: 28px;
}

.item-review .images img {
    display: block;
    height: 400px;
    border-radius: 3px;
}

.item-review.open {
    background-color: #F5F5F5;
}

.item-review.open .con.cropped {
    display: none;
}

.item-review.open .con.cropped ~ .con {
    display: block;
}

.item-review.open .thumbnails {
    display: none;
}

.item-review.open .images {
    display: block;
}

.item-review.open [class*='star-rating'] .track .bar {
    background-color: #F5F5F5;
}

@media (max-width: 767px) {
    .item-review {
        padding-right: 0;
    }

    .item-review .additional {
        margin-top: 10px;
    }

    .item-review .additional > li {
        width: 50%;
        font-size: 13px;
        margin-top: 10px;
        padding-right: 11px;
    }

    .item-review .additional .basic > span {
        margin-right: 5px;
    }

    .item-review .additional .basic > span + span {
        margin-left: 0;
    }

    .item-review .additional .body > span {
        margin-right: 5px;
    }

    .item-review .additional .body > span + span {
        margin-left: 0;
    }

    .item-review .con {
        margin-top: 11px;
        font-size: 13px;
        line-height: 22px;
    }

    .item-review .thumbnails {
        position: static;
        margin-top: 13px;
        width: 203px;
    }

    .item-review .thumbnails li {
        width: 60px;
        height: 60px;
        margin-left: 0;
    }

    .item-review .thumbnails li + li {
        margin-left: 11px;
    }

    .item-review .images {
        margin: 10px -18px 0;
        width: calc(100% + 36px);
        height: 300px;
    }

    .item-review .images ul {
        padding: 0 18px;
        height: 330px;
    }

    .item-review .images li + li {
        margin-left: 11px;
    }

    .item-review .images img {
        height: 300px;
    }
}

.item-product {
    position: relative;
    text-align: center;
    display: block;
}

.item-product figure {
    padding-top: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border: 1px solid #F3F3F3;
    box-sizing: border-box;
}

.item-product .brand {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    line-height: 20px;
    margin-top: 14px;
    display: block;
}

.item-product .name {
    max-height: calc(18px * 2);
    font-size: 14px;
    line-height: 18px;
    margin: 2px 10px 0;
    display: block;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-product .price {
    font-size: 14px;
    color: #000;
    line-height: 17px;
    margin-top: 6px;
    display: block;
}

.item-product .price:after {
    content: '원';
}

.item-product .original-price {
    font-size: 14px;
    font-weight: 600;
    color: #a5a5a5;
    line-height: 17px;
    margin-top: 1px;
    display: block;
}

.item-product .original-price:after {
    content: '원';
}

@media (max-width: 767px) {
    .item-product {
        min-height: 100px;
        padding-left: 113px;
        text-align: left;
    }

    .item-product figure {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        padding: 0;
    }

    .item-product .brand {
        font-size: 14px;
        line-height: 15px;
        margin: 0;
    }

    .item-product .name {
        font-size: 13px;
        line-height: 18px;
        margin: 2px 0 0;
    }

    .item-product .price {
        font-size: 13px;
        line-height: 18px;
        margin: 6px 0 0;
    }

    .item-product .price:after {
        font-size: 12px;
        line-height: 18px;
    }

    .item-product .original-price {
        font-size: 12px;
        line-height: 15px;
    }
}

.product-review {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin: 0 -12px 0;
    text-align: left;
    padding-bottom: 2px;
}

.product-review > li {
    width: 33.333%;
    padding: 0 12px;
    box-sizing: border-box;
}

.product-review > li .cell {
    position: relative;
    display: block;
    height: 100%;
    border: 1px solid #F0F1F3;
}

.product-review > li:nth-child(n+4) {
    margin-top: 48px;
}

@media (min-width: 1645px) {
    .product-review > li {
        width: 25%;
    }

    .product-review > li:nth-child(n+4) {
        margin-top: 0;
    }

    .product-review > li:nth-child(n+5) {
        margin-top: 48px;
    }
}

.product-review .item-product {
    padding-bottom: 40px;
}

.product-review .item-review {
    position: static;
    border-top: 1px solid #F0F1F3;
    padding: 22px 15px 27px;
}

.product-review .item-review .additional {
    margin-top: 8px;
}

.product-review .item-review .additional > li {
    width: 50%;
    font-size: 13px;
    margin-top: 10px;
}

.product-review .item-review .con {
    margin-top: 11px;
    font-size: 13px;
    line-height: 22px;
}

.product-review .item-review .thumbnails {
    left: 15px;
    right: 15px;
    top: auto;
    bottom: 27px;
    height: 60px;
    margin-top: 13px;
    width: auto;
    overflow: hidden;
}

.product-review .item-review .thumbnails ul {
    height: 90px;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.product-review .item-review .thumbnails li {
    width: 60px;
    height: 60px;
    margin-left: 0;
}

.product-review .item-review .thumbnails li + li {
    margin-left: 11px;
}

.product-review .item-review .images {
    margin-top: 10px;
}

.product-review .item-review .images li + li {
    margin-left: 11px;
}

.product-review .item-review .images img {
    max-height: 300px;
}

.product-review .has-photo .item-review {
    padding-bottom: 100px;
}

@media (max-width: 767px) {
    .product-review {
        display: block;
        margin: 0;
    }

    .product-review > li {
        width: 100%;
        padding: 23px 18px;
        border-bottom: 1px solid #E3E3E3;
    }

    .product-review > li .cell {
        border: none;
    }

    .product-review > li:nth-child(n+4) {
        margin-top: 0;
    }

    .product-review .item-product {
        padding-bottom: 0;
    }

    .product-review .item-review {
        border: none;
        padding: 22px 0 0;
    }

    .product-review .has-photo .item-review {
        padding-bottom: 0;
    }

    .product-review li.open {
        background-color: #F5F5F5;
    }

    .product-review li.open .con.cropped {
        display: none;
    }

    .product-review li.open .con.cropped ~ .con {
        display: block;
    }

    .product-review li.open .thumbnails {
        display: none;
    }

    .product-review li.open .images {
        display: block;
    }

    .product-review li.open [class*='star-rating'] .track .bar {
        background-color: #F5F5F5;
    }
}

.photo-slider {
    position: relative;
    height: 180px;
    padding: 0 27px;
    text-align: left;
    overflow: hidden;
}

.photo-slider .slide {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    padding: 30px 0 50px;
    margin-bottom: -50px;
    overflow: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    -background: #eee;
}

.photo-slider .slide a {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 3px;
    background-color: #F5F5F5;
    background-size: cover;
    margin: 0 6px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    vertical-align: top;
}

.photo-slider .slide a.more:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 120px;
    content: '더보기';
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.3);
}

.photo-slider .slide a.current {
    box-shadow: inset 0 0 0 5px #000;
}

.photo-slider .btns a, .photo-slider .btns button {
    position: absolute;
    top: 30px;
    bottom: 30px;
    width: 22px;
    border: 1px solid #e4e4e4;
    box-sizing: border-box;
    text-indent: -5000px;
    overflow: hidden;
    font-size: 0;
}

.photo-slider .btns a:after, .photo-slider .btns button:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 12px;
    background: url("../../../resource/images/arr-photoslider.png") 50% 50%/contain no-repeat;
}

.photo-slider .btns .btn-prev {
    left: 0;
}

.photo-slider .btns .btn-next {
    right: 0;
}

.photo-slider .btns .btn-next:after {
    transform: translate(-50%, -50%) scaleX(-1);
}

@media (max-width: 767px) {
    .photo-slider {
        height: 100px;
        padding: 0;
        border-bottom: 1px solid #e3e3e3;
    }

    .photo-slider .slide {
        padding: 20px 12px 50px;
    }

    .photo-slider .slide a {
        width: 60px;
        height: 60px;
    }

    .photo-slider .slide a.more:before {
        font-size: 13px;
        line-height: 61px;
    }

    .photo-slider .btns {
        display: none;
    }
}

.list-wish {
    position: relative;
    -overflow: hidden;
}

.list-wish li {
    position: relative;
    border-bottom: 1px solid #f3f3f3;
    background: #fff;
    box-shadow: 0 -1px 0 #f3f3f3;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.list-wish li:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: '';
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 1;
}

.list-wish li.floating {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    transition: none;
}

.list-wish li.floating:before {
    opacity: 1;
    transition: opacity 0.2s;
}

.list-wish .group {
    position: relative;
    max-width: 360px;
    height: 52px;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    z-index: 1;
}

.list-wish .item {
    display: block;
    padding: 0 0 0 47px;
    font-size: 15px;
    line-height: 54px;
}

.list-wish .function {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    width: 56px;
    cursor: move;
}

.list-wish .function:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: url("../../../resource/images/icon-function.png") 50% 50%/24px 24px no-repeat;
}

.list-wish .btn-del {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 47px;
    text-indent: -999em;
    background: url("../../../resource/images/icon-wish-del.png") 17px 50%/20px 20px no-repeat;
    display: block;
    overflow: hidden;
}

@media (max-width: 767px) {
    .list-wish .group {
        max-width: 100%;
    }
}

/* view */
.body-view .store-contents {
    overflow: hidden;
}

@media (max-width: 767px) {
    .body-view .top-button {
        bottom: 102px;
    }
}

.store-detail {
    position: relative;
    margin: 0 -18px;
}

.store-detail > section[class^='detail-'] {
    padding-top: 60px;
}

.store-detail > section[class^='detail-'] .btn-detail-more {
    width: 324px;
    line-height: 40px;
    margin: 34px auto 0;
    display: block;
}

@media (max-width: 767px) {
    .store-detail > section[class^='detail-'] {
        padding-top: 20px;
        padding-left: 18px;
        padding-right: 18px;
        border-top: 8px solid rgba(224, 224, 224, 0.2);
    }

    .store-detail > section[class^='detail-'] .btn-detail-more {
        width: 100%;
        margin-top: 26px;
    }
}

.detail-head {
    display: flex;
    padding-top: 0 !important;
}

@media (max-width: 767px) {
    .detail-head {
        display: block;
        padding: 0 18px 19px !important;
        margin-bottom: 0;
        border-top: none !important;
    }
}

.detail-gallery {
    flex: none;
    width: 567px;
    margin-left: -47px;
}

.detail-gallery .product-tags {
    left: -47px;
    top: calc(26px - 9px);
    z-index: 2;
}

.detail-gallery .gallery-wrap {
    position: relative;
    height: auto;
}

.detail-gallery .gallery-wrap .swiper-slide img {
    width: 100%;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.detail-gallery .gallery-wrap .swiper-button-prev, .detail-gallery .gallery-wrap .swiper-button-next {
    position: absolute;
    top: 50%;
    width: 32px;
    height: 32px;
    background-color: rgba(212, 212, 212, 0.2);
    border-radius: 16px;
    transform: translateY(-50%);
    transition: background-color 0.15s;
}

.detail-gallery .gallery-wrap .swiper-button-prev:after, .detail-gallery .gallery-wrap .swiper-button-next:after {
    width: 6px;
    height: 10px;
    background: url("../../../resource/images/arr-gallery.png") 60% 50%/6px 10px no-repeat;
}

.detail-gallery .gallery-wrap .swiper-button-prev:hover, .detail-gallery .gallery-wrap .swiper-button-next:hover {
    background-color: #d4d4d4;
}

.detail-gallery .gallery-wrap .swiper-button-prev {
    left: 32px;
}

.detail-gallery .gallery-wrap .swiper-button-prev:after {
    margin-left: -2px;
}

.detail-gallery .gallery-wrap .swiper-button-next {
    right: 32px;
}

.detail-gallery .gallery-wrap .swiper-button-next:after {
    margin-left: 2px;
    transform: scaleX(-1);
}

.detail-gallery .gallery-wrap .slide-pages {
    position: absolute;
    right: 29px;
    bottom: 22px;
    z-index: 1;
}

.detail-gallery .thumbnail-list {
    font-size: 0;
    margin: 16px 0 0 16px;
}

.detail-gallery .thumbnail-list li {
    width: 43px;
    height: 43px;
    margin-right: 7px;
    background: no-repeat 50% 50% / cover;
    display: inline-block;
    transition: box-shadow 0.2s;
}

.detail-gallery .thumbnail-list li.current {
    box-shadow: inset 0 0 0 2px #000;
}

@media (min-width: 768px) {
    .detail-gallery .swiper-pagination {
        display: none;
    }
}

@media (max-width: 767px) {
    .detail-gallery {
        width: 100%;
        margin-left: 0;
    }

    .detail-gallery .product-tags {
        left: 0;
        top: calc(25px - 6px);
    }

    .detail-gallery .gallery-wrap {
        margin: 0 -18px;
    }

    .detail-gallery .gallery-wrap .swiper-button-prev, .detail-gallery .gallery-wrap .swiper-button-next {
        display: none;
    }

    .detail-gallery .gallery-wrap .slide-pages {
        right: 18px;
        bottom: 13px;
    }

    .detail-gallery .swiper-pagination {
        position: absolute;
        left: 0;
        right: 0;
        height: 16px;
        bottom: 29px;
        z-index: 30;
    }

    .detail-gallery .swiper-pagination .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
        padding: 3px;
    }

    .detail-gallery .swiper-pagination .swiper-pagination-bullet:before {
        width: 10px;
        height: 10px;
        background-color: rgba(196, 196, 196, 0.6);
    }

    .detail-gallery .swiper-pagination .swiper-pagination-bullet-active:before {
        background-color: #fff;
    }

    .detail-gallery .thumbnail-list {
        display: none;
    }
}

.detail-summary {
    padding-left: 24px;
    box-sizing: border-box;
    flex: 1;
}

.detail-summary .summary-origin {
    position: relative;
    display: block;
    padding: 20px 21px 16px;
    margin-top: 26px;
    font-size: 13px;
    line-height: 23px;
    font-weight: 500;
    color: #5D5D5D;
    background-color: #F7F8FA;
    border-radius: 3px;
}

.detail-summary .summary-origin > em {
    display: block;
    font-weight: 500;
    font-size: 14px;
}

.detail-summary .summary-origin > strong {
    display: block;
}

.detail-summary .summary-origin > span {
    display: block;
}

.detail-summary .summary-origin .price {
    font-weight: 600;
}

.detail-summary .summary-origin .price.sale {
    color: #FA4431;
}

.detail-summary .summary-origin .price del {
    padding-left: 0.5em;
    color: #5d5d5d;
}

.detail-summary .summary-origin:hover {
    color: #5D5D5D;
}

.detail-summary .summary-origin:after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 10px;
    height: 17px;
    margin-top: -8px;
    background: url("../../../resource/images/icon-local.png") 50% 50%/contain no-repeat;
}

.detail-summary .summary-item {
    padding: 0 0 23px;
    margin-top: 22px;
}

.detail-summary .summary-item .brand {
    display: inline;
    margin-right: 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: #000;
    word-break: break-all;
    vertical-align: middle;
}

.detail-summary .summary-item .btn-store {
    display: inline-block;
    color: #979797;
    font-size: 12px;
    text-decoration: underline;
    vertical-align: middle;
}

.detail-summary .summary-item .name {
    margin-top: 4px;
    font-size: 18px;
    line-height: 26px;
    word-break: break-all;
}

.detail-summary .summary-item .price {
    margin-top: 17px;
}

.detail-summary .summary-item .price strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 27px;
    color: #000;
}

.detail-summary .summary-item .price strong:after {
    content: '원';
    margin-left: 4px;
    font-size: 16px;
    font-weight: 700;
    vertical-align: 2px;
}

.detail-summary .summary-item .price del {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    font-weight: 600;
    color: #A5A5A5;
    text-decoration: line-through;
    line-height: 19px;
    font-weight: 500;
}

.detail-summary .summary-item .price.sale strong {
    color: #FA4431;
}

.detail-summary .summary-item .benefit {
    margin-top: 22px;
}

.detail-summary .summary-item .benefit li {
    position: relative;
    padding-left: 77px;
    font-size: 14px;
    line-height: 20px;
    margin-top: 10px;
}

.detail-summary .summary-item .benefit li strong {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    font-weight: 500;
    color: #000;
}

.detail-summary .summary-item .benefit li a {
    display: inline-block;
    text-decoration: underline;
}

.detail-summary .summary-item .benefit li .btn-delivery {
    margin-left: 2px;
}

.detail-summary .summary-item .benefit li + li {
    margin-top: 8px;
}

.detail-summary .summary-item .sold-out {
    margin-top: 17px;
    color: #A5A5A5;
    font-size: 22px;
}

.detail-summary .summary-options {
    position: relative;
    border: 1px solid #d4d4d4;
    height: 229px;
    padding: 0 0 54px;
    box-sizing: border-box;
    border-radius: 3px;
}

.detail-summary .summary-options .btn-guide {
    position: absolute;
    left: 19px;
    bottom: 18px;
}

.detail-summary .summary-options .opt-box-wrap {
    position: relative;
    height: 100%;
}

.detail-summary .summary-options .opt-box-wrap .fake-scroll-track {
    right: 14px;
    top: 13px;
    height: calc(100% - 13px);
    transition: opacity 0.2s;
}

.detail-summary .summary-options .opt-box {
    position: relative;
    height: 100%;
    padding: 13px 36px 0 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.detail-summary .summary-options .opt-box a {
    display: block;
    min-height: 40px;
    padding: 13px 20px 12px;
    font-size: 14px;
    line-height: 15px;
    font-weight: 500;
    color: #000;
    box-sizing: border-box;
    transition: color 0.2s, background-color 0.2s;
}

.detail-summary .summary-options .opt-box a.sold-out {
    opacity: 0.5;
    text-decoration: line-through;
    pointer-events: none;
}

.detail-summary .summary-options .opt-box a.sold-out:after {
    content: 'ㅤ품절';
}

.hoverable .detail-summary .summary-options .opt-box a:not(.selected):hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.detail-summary .summary-options .opt-box a.selected {
    background-color: #000;
    color: #FFB800;
}

.detail-summary .summary-options.sold-out {
    pointer-events: none;
}

.detail-summary .summary-options.sold-out .opt-box a {
    text-decoration: line-through;
    opacity: 0.5;
    pointer-events: none;
}

.detail-summary .summary-options.sold-out .opt-box a:after {
    content: 'ㅤ품절';
}

.detail-summary .summary-idx {
    position: relative;
    margin-top: 10px;
    padding: 15px 20px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    box-sizing: border-box;
    text-align: right;
    display: none;
}

.detail-summary .summary-idx .idx {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.detail-summary .summary-idx .price {
    font-size: 12px;
    color: #a5a5a5;
    line-height: 18px;
}

.detail-summary .summary-idx .price .total-price {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    line-height: 22px;
    display: block;
}

.detail-summary .summary-idx .price del {
    font-weight: 700;
}

.detail-summary .summary-idx .price .total-price:after,
      .detail-summary .summary-idx .price del:after {
    content: '원';
}

.detail-summary .summary-idx .price .delivery-price {
    display: block;
}

.detail-summary .summary-idx .price .delivery-price em {
    color: #000;
}

.detail-summary .summary-idx.discount .price .total-price,
    .detail-summary .summary-idx.discount .price .total-price mark {
    color: #FA4431;
}

.detail-summary .summary-options.option-selected ~ .summary-idx {
    display: block;
}

.detail-summary .summary-function {
    display: flex;
    vertical-align: top;
    margin-top: 24px;
}

.detail-summary .summary-function > a {
    flex: 1;
}

.detail-summary .summary-function > a + a,
    .detail-summary .summary-function > a + button,
    .detail-summary .summary-function > button + button,
    .detail-summary .summary-function > button + a {
    margin-left: 9px;
}

.detail-summary .summary-function .btnd-pay, .detail-summary .summary-function .btnd-bag {
    opacity: 0.6;
    pointer-events: none;
}

.detail-summary .summary-function .btnd-likeit, .detail-summary .summary-function .btnd-share {
    flex: none;
}

.detail-summary .summary-function .share {
    position: relative;
    margin-left: 6px;
}

.detail-summary .summary-function .share .pop-share {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 0 1px #D4D4D4;
    border-radius: 5px;
    padding-bottom: 49px;
    z-index: 10;
    text-align: center;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transform-origin: 0 0;
    transform: translate3d(0, -10px, 0) scaleY(0);
    transition: opacity 0.25s, visibility 0.25s, transform 0.25s cubic-bezier(0.19, 1, 0.22, 1);
}

.detail-summary .summary-function .share .pop-share .list-share {
    padding: 20px 0 8px;
}

.detail-summary .summary-function .share .pop-share .list-share a {
    display: block;
    width: 27px;
    height: 27px;
    background: no-repeat 50% 50% / 27px auto;
    font-size: 0;
    line-height: 300px;
    overflow: hidden;
    margin: 0 auto;
}

.detail-summary .summary-function .share .pop-share .list-share a + a {
    margin-top: 18px;
}

.detail-summary .summary-function .share .pop-share .list-share a.facebook {
    background-image: url("../../../resource/images/icon-foot-facebook.png");
}

.detail-summary .summary-function .share .pop-share .list-share a.instagram {
    background-image: url("../../../resource/images/icon-foot-instagram.png");
}

.detail-summary .summary-function .share .pop-share .list-share a.youtube {
    background-image: url("../../../resource/images/icon-foot-youtube.png");
}

.detail-summary .summary-function .share .pop-share .list-share a.notion {
    background-image: url("../../../resource/images/icon-foot-notion.png");
}

.detail-summary .summary-function .share .pop-share .btn-close-tooltip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 49px;
    font-size: 0;
    line-height: 300px;
    overflow: hidden;
}

.detail-summary .summary-function .share .pop-share .btn-close-tooltip:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: url("../../../resource/images/icon-tooltip-close.png") 50% 50%/14px 14px no-repeat;
}

.detail-summary .summary-function .share .btnd-share.open + .pop-share {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scaleY(1);
    transition-duration: 0.35s;
}

.detail-summary .summary-function.sold-out .btnd-bag {
    background-color: #CCC;
    border-color: #CCC;
}

.detail-summary .summary-function.sold-out > a:not(.btnd-wish):not(.btnd-share) {
    pointer-events: none;
}

.detail-summary .summary-options.option-selected ~ .summary-function .btnd-pay, .detail-summary .summary-options.option-selected ~ .summary-function .btnd-bag {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 767px) {
    .detail-summary {
        width: auto;
        padding: 0;
    }

    .detail-summary .summary-origin {
        margin: 0 -18px;
        padding: 16px 18px 14px;
    }

    .detail-summary .summary-item {
        margin-top: 17px;
        padding: 0;
    }

    .detail-summary .summary-options {
        display: none;
    }

    .detail-summary .summary-function {
        display: none;
    }

    .detail-summary .summary-idx {
        display: none;
    }
}

.detail-delivery {
    position: relative;
}

.detail-delivery .title-detail {
    border-bottom: 1px solid #E0E0E0;
}

.detail-delivery .list-description {
    margin-top: 23px;
}

.detail-delivery .list-step {
    margin-top: 28px;
}

@media (max-width: 767px) {
    .detail-delivery .title-detail {
        border-bottom: none;
    }

    .detail-delivery .receipt-day {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 25px;
        padding: 20px 21px;
        margin: 0;
        background-color: #000;
        border-radius: 5px;
        box-sizing: border-box;
        color: #fff;
        font-size: 15px;
        line-height: 26px;
        font-weight: 600;
    }

    .detail-delivery .receipt-day mark {
        display: block;
        height: auto;
        padding: 0;
        background-color: transparent;
        font-size: 13px;
        line-height: 20px;
        font-weight: 300;
    }

    .detail-delivery .toggle-tit {
        position: relative;
    }

    .detail-delivery .toggle-tit:after {
        content: '';
        position: absolute;
        right: 2px;
        top: 12px;
        width: 11px;
        height: 6px;
        margin-top: -3px;
        background: url("../../../resource/images/icon-title-toggle.png") right 50%/11px 6px no-repeat;
    }

    .detail-delivery .toggle-tit.open:after {
        transform: scaleY(-1);
    }

    .detail-delivery .toggle-con {
        display: none;
        padding-bottom: 33px;
        margin-top: -9px;
    }

    .detail-delivery .toggle-tit.open + .toggle-con {
        display: block;
    }

    .detail-delivery .list-description {
        margin-top: 15px;
    }

    .detail-delivery .list-step {
        margin-top: 23px;
    }
}

.detail-item .title-detail {
    border-bottom: 1px solid #E0E0E0;
}

.detail-item .item-info {
    width: 100%;
    font-size: 14px;
    line-height: 1.2;
    border-top: 1px solid #F3F3F3;
    border-right: 1px solid #F3F3F3;
    table-layout: fixed;
}

.detail-item .item-info th, .detail-item .item-info td {
    padding: 15px 12px 13px 33px;
    border-bottom: 1px solid #F3F3F3;
    text-align: left;
    word-break: break-all;
}

.detail-item .item-info th {
    width: 16%;
    border-left: 1px solid #F3F3F3;
    border-right: 1px solid #F3F3F3;
    background-color: #F7F8FA;
    font-weight: 400;
}

.detail-item .item-info td {
    width: 34%;
}

.detail-item .item-editor {
    position: relative;
    margin-top: 32px;
    text-align: center;
}

.detail-item .item-editor:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 43px;
    height: 97px;
    background-image: linear-gradient(rgba(255, 255, 255, 0) 5%, white 84%);
}

.detail-item .item-editor .editor {
    height: 814px;
    overflow: hidden;
    text-align: left;
}

.detail-item .item-editor .editor img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.detail-item .item-editor .btn-detail-more {
    z-index: 1;
}

.detail-item .item-editor .btn-detail-more:after {
    content: '펼쳐보기';
    margin-left: 4px;
}

.detail-item .item-editor.open:after {
    display: none;
}

.detail-item .item-editor.open .editor {
    height: auto;
}

.detail-item .item-editor.open .btn-detail-more:after {
    content: '접기';
}

.detail-item .item-editor:not(.open) .btn-detail-more {
    margin-top: 0;
}

@media (max-width: 767px) {
    .detail-item {
        padding-bottom: 34px;
    }

    .detail-item .item-info {
        font-style: 12px;
    }

    .detail-item .item-info th, .detail-item .item-info td {
        padding: 9px 4px 8px 8px;
    }

    .detail-item .item-info th {
        width: 23%;
    }

    .detail-item .item-info td {
        width: 27%;
    }

    .detail-item .item-editor {
        margin-top: 18px;
    }

    .detail-item .item-editor:after {
        height: 72px;
    }

    .detail-item .item-editor .editor {
        height: 437px;
    }
}

.detail-review .review-header {
    position: relative;
}

.detail-review .review-header .title-detail {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin-right: 9px;
}

.detail-review .review-header .title-detail span {
    font-weight: inherit;
}

.detail-review .review-header .star-rating-black {
    display: inline-block;
    vertical-align: middle;
    margin-top: -10px;
}

.detail-review .review-header .star-rating-black .fraction {
    font-size: 18px;
}

.detail-review .review-header .write {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #4D4D4D;
}

.detail-review .review-header .write strong {
    font-weight: 700;
}

.detail-review .review-header .write .btn-review-write {
    display: inline-block;
    width: 68px;
    height: 26px;
    margin-left: 13px;
    background-color: #000;
    color: #fff;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
}

.detail-review .photo-slider {
    margin-top: 4px;
}

.detail-review .review-list {
    text-align: center;
    margin-top: 34px;
}

.detail-review .review-list > ul {
    border-top: 1px solid #E0E0E0;
    text-align: left;
}

.detail-review .review-list > ul > li {
    border-bottom: 1px solid #E0E0E0;
}

.detail-review .review-list > ul .item-review {
    min-height: 160px;
    padding-top: 23px;
    padding-bottom: 22px;
    box-sizing: border-box;
}

.detail-review .review-list .no-result {
    height: 250px;
}

.detail-review .photo-slider ~ .review-list {
    margin-top: 0;
}

@media (max-width: 767px) {
    .detail-review {
        padding-bottom: 34px;
    }

    .detail-review .review-header {
        margin: 0 -18px;
        padding: 0 98px 14px 18px;
        border-bottom: 1px solid #E0E0E0;
    }

    .detail-review .review-header .title-detail {
        margin-right: 12px;
    }

    .detail-review .review-header .star-rating-black {
        margin-top: -7px;
    }

    .detail-review .review-header .star-rating-black .fraction {
        font-size: 14px !important;
    }

    .detail-review .review-header .write {
        position: static;
        transform: none;
        font-size: 11px;
        margin-top: 4px;
        color: #000;
    }

    .detail-review .review-header .write .btn-review-write {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 61px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
    }

    .detail-review .photo-slider {
        margin: 0 -18px;
        border-bottom: none;
    }

    .detail-review .review-list {
        margin-top: -1px;
    }

    .detail-review .review-list > ul {
        margin: 0 -18px;
        border-top: none;
    }

    .detail-review .review-list > ul > li {
        border-top: 1px solid #E0E0E0;
        border-bottom: none;
    }

    .detail-review .review-list > ul .item-review {
        min-height: auto;
        padding: 24px 18px 23px;
    }

    .detail-review .no-result {
        height: 144px;
    }
}

.detail-slider-content {
    padding-bottom: 40px;
    overflow: hidden;
}

.detail-slider-content .detail-slider-gallery {
    margin-left: -13px;
    margin-right: -13px;
    overflow: visible;
}

.detail-slider-content .detail-slider-gallery .swiper-button-prev, .detail-slider-content .detail-slider-gallery .swiper-button-next {
    position: absolute;
    right: 13px;
    top: -50px;
    bottom: auto;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
}

.detail-slider-content .detail-slider-gallery .swiper-button-prev:before, .detail-slider-content .detail-slider-gallery .swiper-button-next:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 8px;
    height: 12px;
    background: url("../../../resource/images/btn-page-prev.png") no-repeat;
    background-size: 100%;
    opacity: 0.4;
}

.detail-slider-content .detail-slider-gallery .swiper-button-prev[class*='-next']:before, .detail-slider-content .detail-slider-gallery .swiper-button-next[class*='-next']:before {
    transform: translate(-50%, -50%) scaleX(-1);
}

.hoverable .detail-slider-content .detail-slider-gallery .swiper-button-prev:hover:before, .hoverable .detail-slider-content .detail-slider-gallery .swiper-button-next:hover:before {
    opacity: 1;
}

.detail-slider-content .detail-slider-gallery .swiper-button-prev {
    left: auto;
    right: 42px;
}

.detail-slider-content .detail-slider-gallery .swiper-button-next {
    left: auto;
    right: 13px;
}

.detail-slider-content .detail-slider-gallery .swiper-button-next:before {
    transform: scaleX(-1);
}

.detail-slider-content .detail-slider-gallery .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    z-index: 30;
    height: 14px;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet:before {
    width: 10px;
    height: 10px;
    background-color: #C4C4C4;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet-active:before {
    background-color: #000;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    z-index: 30;
    height: 14px;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet:before {
    width: 10px;
    height: 10px;
    background-color: #C4C4C4;
}

.detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet-active:before {
    background-color: #000;
}

@media (max-width: 767px) {
    .detail-slider-content {
        padding-bottom: 50px;
    }

    .detail-slider-content .detail-slider-gallery {
        margin-left: -5px;
        margin-right: -5px;
    }

    .detail-slider-content .detail-slider-gallery .swiper-button-prev, .detail-slider-content .detail-slider-gallery .swiper-button-next {
        top: -45px;
    }

    .detail-slider-content .detail-slider-gallery .swiper-button-prev {
        right: 34px;
    }

    .detail-slider-content .detail-slider-gallery .swiper-button-next {
        right: 5px;
    }

    .detail-slider-content .detail-slider-gallery .swiper-pagination {
        bottom: 0;
    }

    .detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet {
        width: 14px;
        height: 14px;
        padding: 3px;
    }

    .detail-slider-content .detail-slider-gallery .swiper-pagination .swiper-pagination-bullet:before {
        width: 8px;
        height: 8px;
    }
}

.detail-recommend .list-box li {
    width: 25% !important;
}

@media (max-width: 767px) {
    .detail-recommend {
        padding-bottom: 34px;
    }

    .detail-recommend .list-box {
        margin: 0 -24px;
    }

    .detail-recommend .list-box li {
        width: 50% !important;
    }
}

.detail-guide .guide-toggle .toggle-tit {
    position: relative;
    padding: 23px 7px 21px;
    border-top: 1px solid #E4E4E4;
}

.detail-guide .guide-toggle .toggle-tit:before {
    content: '';
    position: absolute;
    right: 14px;
    top: 0;
    bottom: 0;
    width: 13px;
    background: url("../../../resource/images/icon-toggle-black.png") 50% 50%/13px 8px no-repeat;
}

.detail-guide .guide-toggle .toggle-tit .title-detail {
    padding: 0;
    border: none;
}

.detail-guide .guide-toggle .toggle-tit.open:before {
    transform: scaleY(-1);
}

.detail-guide .guide-toggle .toggle-con {
    padding: 0 7px 25px;
    display: none;
}

.detail-guide .guide-toggle .toggle-con h4 {
    font-size: 14px;
    line-height: 26px;
    font-weight: 700;
    color: #000;
}

.detail-guide .guide-toggle .toggle-con ul + h4 {
    margin-top: 26px;
}

.detail-guide .guide-toggle .toggle-tit.open + .toggle-con {
    display: block;
}

@media (max-width: 767px) {
    .detail-guide {
        padding-top: 0 !important;
        padding-bottom: 0;
    }

    .detail-guide .guide-toggle {
        border-bottom: none;
        margin: 0 -18px;
    }

    .detail-guide .guide-toggle .toggle-tit {
        padding: 18px 18px 16px;
        border-top: none;
    }

    .detail-guide .guide-toggle .toggle-tit .title-detail {
        font-size: 14px;
        font-weight: 700;
    }

    .detail-guide .guide-toggle .toggle-tit:before {
        content: '';
        position: absolute;
        right: 18px;
        top: 50%;
        width: 11px;
        height: 6px;
        margin-top: -3px;
        background: url("../../../resource/images/icon-title-toggle.png") right 50%/11px 6px no-repeat;
    }

    .detail-guide .guide-toggle .toggle-con {
        padding: 0 18px 20px;
    }

    .detail-guide .guide-toggle .toggle-tit ~ .toggle-tit {
        border-top: 1px solid #E4E4E4;
    }
}

@media (max-width: 767px) {
    html.has-bottom-layer .body-bag .top-button,
  html.has-bottom-layer .body-pay .top-button {
        bottom: 104px;
    }
}

.header-order {
    position: relative;
    margin-top: 67px;
    padding-bottom: 20px;
    border-bottom: 3px solid #000;
}

.header-order .step {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 0;
}

.header-order .step li {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    color: #898A8D;
}

.header-order .step li:after {
    content: '>';
    margin: 0 13px;
}

.header-order .step li.current {
    color: #000;
    font-weight: 600;
}

.header-order .step li:last-child:after {
    display: none;
}

@media (max-width: 767px) {
    .header-order {
        display: none;
    }
}

.item-goods {
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
}

.item-goods figure {
    width: 90px;
    padding-right: 15px;
}

.item-goods figure img {
    display: block;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    border: 1px solid #F3F3F3;
    box-sizing: border-box;
}

.item-goods .text {
    flex: 1;
}

.item-goods .text .brand {
    max-height: calc(19px * 2);
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    color: #000;
    display: block;
    word-break: break-all;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-goods .text .name {
    max-height: calc(14px * 2);
    font-size: 12px;
    line-height: 14px;
    margin-top: 6px;
    display: block;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #000;
}

.item-goods .text .price {
    font-size: 16px;
    color: #000;
    line-height: 19px;
    margin-top: 4px;
    display: block;
}

.item-goods .text .price:after {
    font-size: 14px;
    content: '원';
    line-height: 18px;
    vertical-align: top;
    margin-left: 2px;
    display: inline-block;
}

.item-goods .text .price.sale {
    color: #FA4431;
}

.item-goods .text .original-price {
    font-size: 14px;
    color: #A5A5A5;
    line-height: 17px;
    margin-top: 1px;
    display: block;
}

.item-goods .text .original-price:after {
    font-size: 13px;
    content: '원';
    line-height: 17px;
}

.item-goods .text .options {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: #000;
    margin-top: 8px;
}

.item-goods .text .idx, .item-goods .text .total {
    display: none;
}

@media (max-width: 767px) {
    .item-goods figure {
        width: 76px;
    }

    .item-goods .text .brand {
        max-height: calc(18px * 2);
        font-size: 13px;
        line-height: 18px;
    }

    .item-goods .text .name {
        margin-top: 5px;
        font-size: 13px;
    }

    .item-goods .text .price {
        font-size: 13px;
        font-weight: 500;
        display: inline-block;
        line-height: 18px;
        margin-top: 3px;
        margin-right: 6px;
    }

    .item-goods .text .price:after {
        font-size: 13px;
        line-height: 18px;
    }

    .item-goods .text .price.sale {
        font-weight: 400;
    }

    .item-goods .text .original-price {
        font-weight: 500;
        font-size: 13px;
        display: inline-block;
        margin-top: 0;
    }

    .item-goods .text .options {
        color: #767C85;
        margin-top: 5px;
        font-size: 12px;
    }

    .item-goods .text .options > strong {
        margin-right: 9px;
    }

    .item-goods .text .options .idx {
        display: inline-block;
        white-space: nowrap;
    }

    .item-goods .text .total {
        display: block;
        font-size: 12px;
        line-height: 15px;
        margin-top: 4px;
    }

    .item-goods .text .total strong {
        font-weight: 700;
        margin-right: 9px;
        white-space: nowrap;
    }

    .item-goods .text .total em {
        font-weight: 500;
        white-space: nowrap;
    }
}

.sec-bag-item {
    position: relative;
}

.sec-bag-item .cell-check {
    width: 58px;
}

.sec-bag-item .cell-item {
    flex: 1;
}

.sec-bag-item .cell-idx {
    width: 154px;
}

.sec-bag-item .cell-price {
    width: 178px;
}

.sec-bag-item .cell-delivery {
    width: 150px;
}

.sec-bag-item .cell-tax {
    width: 128px;
}

.sec-bag-item hgroup {
    position: relative;
    display: flex;
    height: 59px;
    background-color: #F3F3F3;
    border-bottom: 1px solid #DDD;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    text-align: center;
}

.sec-bag-item hgroup h4 {
    font-weight: 700;
}

.sec-bag-item hgroup .cell-check {
    position: absolute;
    left: 17px;
    width: auto;
}

.sec-bag-item hgroup .cell-check label {
    font-weight: 500;
    font-size: 14px;
}

.sec-bag-item hgroup .cell-check .use-mobile {
    display: none;
}

.sec-bag-item .btn-check-del {
    width: 150px;
    height: 35px;
    margin-top: 18px;
    border: 1px solid #E4E4E4;
    border-radius: 3px;
    text-align: center;
    line-height: 33px;
}

.sec-bag-item .btn-check-del:before {
    content: '선택';
}

.sec-bag-item .table-bag {
    display: flex;
    text-align: center;
    justify-content: stretch;
    min-height: 165px;
    border-bottom: 1px solid #DDD;
}

.sec-bag-item .table-bag > div {
    position: relative;
    border-left: 1px solid #DDD;
}

.sec-bag-item .table-bag .list-items {
    flex: 1;
    border-left: none;
}

.sec-bag-item .table-bag .list-items dl dt {
    height: 39px;
    background-color: #F9F9F9;
    padding: 0 0 0 15px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 39px;
}

.sec-bag-item .table-bag .list-items dl dt .logo {
    display: inline-block;
    width: 27px;
    height: 27px;
    margin-right: 6px;
    border: 1px solid #D4D4D4;
    border-radius: 14px;
    box-sizing: border-box;
    vertical-align: middle;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sec-bag-item .table-bag .list-items dl dd {
    position: relative;
    display: flex;
    justify-content: stretch;
}

.sec-bag-item .table-bag .list-items dl dd > div {
    position: relative;
    border-left: 1px solid #DDD;
}

.sec-bag-item .table-bag .list-items dl dd > div:first-child {
    border-left: none;
}

.sec-bag-item .table-bag .list-items dl dd + dd {
    border-top: 1px solid #DDD;
}

.sec-bag-item .table-bag .list-items dl + dl {
    border-top: 1px solid #DDD;
}

.sec-bag-item .table-bag .list-items .cell-check {
    padding: 32px 0;
}

.sec-bag-item .table-bag .list-items .cell-item {
    padding: 30px 45px 30px 0;
    text-align: left;
    border-left: none;
}

.sec-bag-item .table-bag .list-items .cell-item .btn-likeit {
    position: absolute;
    right: 10px;
    bottom: 13px;
}

.sec-bag-item .table-bag .list-items .cell-item .btn-likeit:before, .sec-bag-item .table-bag .list-items .cell-item .btn-likeit:after {
    background: url("../../../resource/images/set-icon-wish-light.png") no-repeat 0 0/auto 100%;
}

.sec-bag-item .table-bag .list-items .cell-item .btn-trash {
    position: absolute;
    right: 10px;
    top: 17px;
}

.sec-bag-item .table-bag .list-items .cell-price a, .sec-bag-item .table-bag .list-items .cell-price button {
    width: 97px;
    margin-top: 12px;
}

.sec-bag-item .table-bag .list-items .cell-price .btn-text-likeit {
    display: none;
    margin-left: 4px;
}

.sec-bag-item .table-bag .list-items .cell-price .txt-free {
    display: none;
    font-size: 11px;
    color: #A5A5A5;
    text-align: right;
    margin-top: 2px;
}

.sec-bag-item .table-bag .list-items .cell-price .txt-free strong {
    color: #000;
}

.sec-bag-item .table-bag .cell-tax .in-box .txt-price {
    color: #571ee9;
}

.sec-bag-item .table-bag .in-box {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
}

.sec-bag-item .table-bag .in-box .txt-price {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
}

.sec-bag-item .table-bag .in-box .txt-price:after {
    content: '원';
    display: inline-block;
    font-size: 18px;
    vertical-align: top;
}

.sec-bag-item .table-bag .in-box .btn-link {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    text-decoration: underline;
}

.sec-bag-item .table-bag .in-box .txt-delivery {
    display: block;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    margin-bottom: 5px;
}

.sec-bag-item .table-bag .in-box .f-spin {
    width: 101px;
}

.sec-bag-item .list-box-wrap {
    padding-left: 0;
    padding-right: 0;
}

.sec-bag-item .list-box-wrap .list-box li {
    width: 25%;
}

@media (max-width: 767px) {
    .sec-bag-item {
        margin: 0 -18px;
    }

    .sec-bag-item .cell-check,
      .sec-bag-item .cell-idx,
      .sec-bag-item .cell-price {
        width: auto;
    }

    .sec-bag-item .cell-delivery, .sec-bag-item .cell-tax {
        display: none;
    }

    .sec-bag-item hgroup {
        border-top: none;
        height: 52px;
        background-color: #fff;
        border-color: #F3F3F3;
    }

    .sec-bag-item hgroup .cell-check {
        left: 18px;
    }

    .sec-bag-item hgroup .cell-check .use-mobile {
        display: inline-block;
    }

    .sec-bag-item hgroup .cell-item, .sec-bag-item hgroup .cell-idx, .sec-bag-item hgroup .cell-price {
        display: none;
    }

    .sec-bag-item .btn-check-del {
        position: absolute;
        right: 18px;
        top: 0;
        width: auto;
        height: 52px;
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: #979797;
        border: none;
    }

    .sec-bag-item .btn-check-del:before {
        content: '';
    }

    .sec-bag-item .table-bag {
        display: block;
        min-height: auto;
        text-align: left;
        border-bottom: none;
    }

    .sec-bag-item .table-bag > div {
        border: none;
    }

    .sec-bag-item .table-bag .list-items {
        position: relative;
    }

    .sec-bag-item .table-bag .list-items dl dd {
        display: block;
    }

    .sec-bag-item .table-bag .list-items dl dd > div {
        border-left: none;
    }

    .sec-bag-item .table-bag .list-items dl dd + dd {
        border-color: #F3F3F3;
    }

    .sec-bag-item .table-bag .list-items dl + dl {
        border-color: #F3F3F3;
    }

    .sec-bag-item .table-bag .list-items .cell-check {
        position: absolute;
        left: 18px;
        top: 33px;
        padding: 0;
        z-index: 1;
    }

    .sec-bag-item .table-bag .list-items .cell-item {
        padding: 30px 45px 141px 52px;
    }

    .sec-bag-item .table-bag .list-items .cell-item .btn-likeit {
        display: none;
    }

    .sec-bag-item .table-bag .list-items .cell-price {
        position: absolute;
        right: 18px;
        bottom: 24px;
        left: 52px;
        height: 94px;
    }

    .sec-bag-item .table-bag .list-items .cell-price .txt-price {
        display: block;
        text-align: right;
    }

    .sec-bag-item .table-bag .list-items .cell-price .txt-free {
        display: block;
    }

    .sec-bag-item .table-bag .list-items .cell-price .btn-text-likeit {
        display: inline-flex;
    }

    .sec-bag-item .table-bag .list-items .cell-idx {
        position: absolute;
        left: 52px;
        bottom: 85px;
        z-index: 5;
    }

    .sec-bag-item .table-bag .in-box {
        position: static;
        transform: none;
    }

    .sec-bag-item .list-box-wrap .list-box li {
        width: 50%;
    }
}

.sec-bag-price {
    margin-top: 33px;
    border-bottom: 1px solid #000;
}

.sec-bag-price hgroup {
    display: flex;
    height: 62px;
    background-color: #F3F3F3;
    border-top: 3px solid #000;
    border-bottom: 1px solid #DDD;
    box-sizing: border-box;
    align-items: center;
}

.sec-bag-price hgroup h4 {
    width: 25%;
    font-size: 16px;
    font-weight: 700;
    box-sizing: border-box;
    text-align: center;
}

.sec-bag-price hgroup h4:first-child {
    width: 21%;
}

.sec-bag-price hgroup h4.total {
    width: 29%;
}

.sec-bag-price ul {
    display: flex;
    height: 111px;
    box-sizing: border-box;
    align-items: center;
}

.sec-bag-price ul li {
    position: relative;
    width: 25%;
    padding: 0 25px;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    box-sizing: border-box;
    text-align: center;
}

.sec-bag-price ul li:first-child {
    width: 21%;
}

.sec-bag-price ul li.total {
    width: 29%;
}

.sec-bag-price ul li + li:before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 24px;
    height: 24px;
    background-color: #000;
    border-radius: 12px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 24px;
    overflow: hidden;
    box-sizing: border-box;
}

.sec-bag-price ul li.delivery:before {
    content: '+';
}

.sec-bag-price ul li.sale:before {
    content: '-';
}

.sec-bag-price ul li.total:before {
    content: '=';
}

@media (max-width: 767px) {
    .sec-bag-price {
        margin: 0 -18px 0;
        padding: 0 18px;
        border-top: 8px solid rgba(196, 196, 196, 0.2);
        border-bottom: none;
    }

    .sec-bag-price hgroup {
        display: none;
    }

    .sec-bag-price ul {
        display: block;
        height: auto;
        padding: 14px 0 0;
    }

    .sec-bag-price ul li {
        width: 100%;
        padding: 0;
        margin-top: 14px;
        font-size: 16px;
        text-align: right;
    }

    .sec-bag-price ul li:first-child {
        width: 100%;
    }

    .sec-bag-price ul li + li:before {
        display: none;
    }

    .sec-bag-price ul li:after {
        content: attr(data-title);
        position: absolute;
        left: 0;
        top: 50%;
        font-size: 14px;
        color: #979797;
        transform: translateY(-50%);
        font-weight: 400;
    }

    .sec-bag-price ul li.total {
        width: 100%;
        border-top: 1px solid #E5E5E5;
        font-size: 20px;
        padding: 9px 0;
    }

    .sec-bag-price ul li.sale:before {
        content: '(-)';
        display: inline-block;
        position: static;
        margin-right: 2px;
        vertical-align: top;
        transform: none;
        background: transparent;
        color: #000;
        font-size: 16px;
        font-weight: 700;
    }
}

.sec-bag-price ~ .btn-area a, .sec-bag-price ~ .btn-area button {
    width: 248px;
}

@media (max-width: 767px) {
    .sec-bag-price ~ .btn-area .btn-order {
        display: none;
    }
}

.sec-bag-tax {
    display: none;
}

@media (max-width: 767px) {
    .sec-bag-tax {
        display: block;
        margin: 0 -18px 0;
        padding: 0 18px;
        border-top: 8px solid rgba(196, 196, 196, 0.2);
    }

    .sec-bag-tax .toggle-tit {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        padding: 27px 0 25px;
    }

    .sec-bag-tax .toggle-tit:after {
        content: '';
        position: absolute;
        right: 2px;
        top: 40px;
        width: 11px;
        height: 6px;
        margin-top: -3px;
        background: url("../../../resource/images/icon-title-toggle.png") right 50%/11px 6px no-repeat;
    }

    .sec-bag-tax .toggle-tit.open:after {
        transform: scaleY(-1);
    }

    .sec-bag-tax .toggle-tit mark {
        margin-left: 14px;
        font-weight: 700;
        color: #571ee9;
    }

    .sec-bag-tax .toggle-con {
        display: none;
        padding-bottom: 25px;
        margin-top: -8px;
    }

    .sec-bag-tax .toggle-tit.open + .toggle-con {
        display: block;
    }
}

.sec-order .order-wrap {
    position: relative;
    display: flex;
    border-top: 1px solid #ddd;
    align-items: stretch;
}

.sec-order .order-wrap .order-contents {
    flex: 1;
    padding: 0 39px 80px 0;
    box-sizing: border-box;
}

.sec-order .order-wrap .order-aside {
    width: 363px;
    padding: 0 0 80px 39px;
    box-sizing: border-box;
    border-left: 1px solid #DDD;
}

.sec-order .order-wrap .pay-items {
    flex: 1;
    margin: 0 -39px 0 0;
    border-bottom: 1px solid #ddd;
}

.sec-order .order-wrap .pay-items .cell-item {
    flex: 1;
}

.sec-order .order-wrap .pay-items .cell-idx {
    width: 106px;
}

.sec-order .order-wrap .pay-items .cell-point {
    width: 102px;
}

.sec-order .order-wrap .pay-items .cell-total {
    width: 140px;
}

.sec-order .order-wrap .pay-items hgroup {
    display: flex;
    height: 41px;
    background-color: #F3F3F3;
    border-bottom: 1px solid #DDD;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    text-align: center;
}

.sec-order .order-wrap .pay-items dl dt {
    height: 39px;
    background-color: #F9F9F9;
    padding: 0 0 0 15px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 39px;
}

.sec-order .order-wrap .pay-items dl dt .logo {
    display: inline-block;
    width: 27px;
    height: 27px;
    margin-right: 6px;
    border: 1px solid #D4D4D4;
    border-radius: 14px;
    box-sizing: border-box;
    vertical-align: middle;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sec-order .order-wrap .pay-items dl dd {
    position: relative;
    display: flex;
    align-items: center;
}

.sec-order .order-wrap .pay-items dl dd > div {
    position: relative;
    text-align: center;
    padding: 20px 6px;
    box-sizing: border-box;
    font-size: 15px;
}

.sec-order .order-wrap .pay-items dl dd > div:first-child {
    border-left: none;
}

.sec-order .order-wrap .pay-items dl dd + dd {
    border-top: 1px solid #DDD;
}

.sec-order .order-wrap .pay-items dl .cell-item {
    text-align: left;
    padding-left: 12px;
}

.sec-order .order-wrap .pay-items dl .cell-idx {
    font-weight: 500;
}

.sec-order .order-wrap .pay-items dl .cell-point {
    font-weight: 500;
}

.sec-order .order-wrap .pay-items dl .cell-total {
    font-weight: 700;
}

.sec-order .order-wrap .pay-items dl + dl {
    border-top: 1px solid #DDD;
}

.sec-order .order-wrap .pay-coupon {
    margin-top: 46px;
}

.sec-order .order-wrap .pay-coupon .list-coupon {
    margin-top: 7px;
    width: 477px;
}

.sec-order .order-wrap .pay-coupon .list-coupon dt {
    padding: 20px 0 5px;
    font-size: 14px;
    line-height: 15px;
    color: #000;
}

.sec-order .order-wrap .pay-coupon .list-coupon dt mark {
    color: #FA4431;
}

.sec-order .order-wrap .pay-coupon .list-coupon dt .btn-all-use {
    color: #767C85;
    font-weight: 700;
    margin-left: 12px;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .sec-order .order-wrap .pay-coupon .list-coupon dt {
        font-size: 12px;
        font-weight: 700;
    }
}

.sec-order .order-wrap .pay-coupon .list-coupon dd {
    display: flex;
}

.sec-order .order-wrap .pay-coupon .list-coupon dd input[type='text'], .sec-order .order-wrap .pay-coupon .list-coupon dd > select {
    width: 100%;
}

.sec-order .order-wrap .pay-coupon .list-coupon dd .btnf-fill {
    width: 115px;
    margin-left: 5px;
    border-radius: 0;
}

.sec-order .order-wrap .pay-coupon .list-dot {
    margin-top: 25px;
}

.sec-order .order-wrap .pay-delivery {
    margin-top: 50px;
}

.sec-order .order-wrap .pay-delivery .regist {
    font-size: 0;
    margin-top: 25px;
}

.sec-order .order-wrap .pay-delivery .regist > li {
    position: relative;
}

.sec-order .order-wrap .pay-delivery .regist > li input[type='text'], .sec-order .order-wrap .pay-delivery .regist > li select, .sec-order .order-wrap .pay-delivery .regist > li textarea {
    width: 100%;
}

.sec-order .order-wrap .pay-delivery .regist > li > input[type='text'], .sec-order .order-wrap .pay-delivery .regist > li > select {
    width: 354px;
}

.sec-order .order-wrap .pay-delivery .regist > li .f-hp {
    width: 366px;
}

.sec-order .order-wrap .pay-delivery .regist > li .f-zipcode {
    width: 354px;
}

.sec-order .order-wrap .pay-delivery .regist > li .f-zipcode [class^='btnf-'] {
    border-radius: 0;
}

.sec-order .order-wrap .pay-delivery .regist > li .msg-code {
    padding: 8px 0;
    color: #5489F0;
    font-size: 12px;
    line-height: 20px;
}

.sec-order .order-wrap .pay-delivery .regist > li + li {
    padding-top: 20px;
}

@media (min-width: 768px) {
    .sec-order .order-wrap .pay-delivery .regist > li .title-field {
        font-size: 12px;
        line-height: 14px;
        padding-bottom: 7px;
    }

    .sec-order .order-wrap .pay-delivery .regist > li .msg-code {
        font-size: 13px;
    }
}

.sec-order .order-wrap .pay-how {
    margin-top: 50px;
}

.sec-order .order-wrap .pay-how .title-article a {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    vertical-align: 4px;
    color: #000;
}

.sec-order .order-wrap .pay-how .list-how {
    display: flex;
    margin: 24px 0 0;
    flex-wrap: wrap;
    align-items: flex-start;
}

.sec-order .order-wrap .pay-how .list-how li {
    width: 50%;
    padding: 0 3px;
    box-sizing: border-box;
}

.sec-order .order-wrap .pay-how .list-how li:nth-child(n+3) {
    margin-top: 10px;
}

.sec-order .order-wrap .pay-how .list-how li input[type='radio'] + label {
    display: block;
    height: 43px;
    box-shadow: inset 0 0 0 1px #000;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 43px;
    text-align: center;
    padding: 0;
}

.sec-order .order-wrap .pay-how .list-how li input[type='radio'] + label:before,
        .sec-order .order-wrap .pay-how .list-how li input[type='radio'] + label:after {
    display: none;
}

.sec-order .order-wrap .pay-how .list-how li input[type='radio']:checked + label {
    background-color: #000;
    color: #fff;
}

.sec-order .order-wrap .pay-how .list-dot {
    margin-top: 20px;
}

.sec-order .order-wrap .pay-total {
    margin-top: 46px;
}

.sec-order .order-wrap .pay-total ul {
    padding: 24px 0 0;
    border-bottom: 1px solid #ddd;
}

.sec-order .order-wrap .pay-total li {
    position: relative;
    text-align: right;
    line-height: 22px;
}

.sec-order .order-wrap .pay-total li h5 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 500;
    color: #000;
    opacity: 0.7;
}

.sec-order .order-wrap .pay-total li strong {
    font-size: 18px;
}

.sec-order .order-wrap .pay-total li + li {
    margin-top: 7px;
}

.sec-order .order-wrap .pay-total li.total {
    margin-top: 20px;
    border-top: 1px solid #ddd;
    padding: 22px 0 18px;
    line-height: 35px;
}

.sec-order .order-wrap .pay-total li.total h5 {
    font-weight: 600;
}

.sec-order .order-wrap .pay-total li.total strong {
    font-size: 28px;
    color: #FA4431;
    line-height: 35px;
    font-weight: 700;
}

.sec-order .order-wrap .pay-total li.total strong:after {
    content: '원';
    font-size: 18px;
    margin-left: 6px;
}

.sec-order .order-wrap .pay-total .f-check {
    padding-top: 50px;
}

.sec-order .order-wrap .pay-total .f-check input[type='checkbox'] + label {
    font-size: 14px;
    line-height: 13px;
}

.sec-order .order-wrap .pay-total .btn-area {
    margin-top: 24px;
}

.sec-order .order-wrap .pay-point {
    margin-top: 30px;
}

.sec-order .order-wrap .pay-point ul {
    margin-top: 24px;
}

.sec-order .order-wrap .pay-point li {
    position: relative;
    text-align: right;
    line-height: 22px;
}

.sec-order .order-wrap .pay-point li h5 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 500;
    color: #000;
    opacity: 0.7;
}

.sec-order .order-wrap .pay-point li strong {
    font-size: 18px;
}

.sec-order .order-wrap .pay-point li + li {
    margin-top: 7px;
}

.sec-order .order-wrap .pay-point .max {
    position: relative;
}

.sec-order .order-wrap .pay-point .max strong {
    position: absolute;
    right: 0;
    top: 0;
    color: #FA4431;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
}

@media (max-width: 767px) {
    .sec-order .order-wrap {
        display: block;
        border: none;
    }

    .sec-order .order-wrap:before {
        display: none;
    }

    .sec-order .order-wrap .order-contents {
        padding: 0;
        margin: 0 -18px;
    }

    .sec-order .order-wrap .order-aside {
        padding: 0;
        width: auto;
        border: none;
    }

    .sec-order .order-wrap .pay-items {
        margin: 0;
        border-bottom: none;
    }

    .sec-order .order-wrap .pay-items hgroup {
        display: none;
    }

    .sec-order .order-wrap .pay-items dl dt {
        padding-left: 18px;
    }

    .sec-order .order-wrap .pay-items dl dd + dd {
        border-color: #F3F3F3;
    }

    .sec-order .order-wrap .pay-items dl .cell-item {
        padding-left: 18px;
        padding-right: 18px;
    }

    .sec-order .order-wrap .pay-items dl .cell-idx,
      .sec-order .order-wrap .pay-items dl .cell-point,
      .sec-order .order-wrap .pay-items dl .cell-total {
        display: none;
    }

    .sec-order .order-wrap .pay-coupon {
        padding: 20px 18px 0;
        margin-top: 20px;
        border-top: 8px solid rgba(196, 196, 196, 0.2);
    }

    .sec-order .order-wrap .pay-coupon .list-coupon {
        width: auto;
        margin-top: -8px;
    }

    .sec-order .order-wrap .pay-coupon .list-coupon dt {
        padding-top: 28px;
    }

    .sec-order .order-wrap .pay-delivery {
        padding: 20px 18px 0;
        margin-top: 0;
        border-top: 8px solid rgba(196, 196, 196, 0.2);
    }

    .sec-order .order-wrap .pay-delivery .regist {
        margin-top: 12px;
    }

    .sec-order .order-wrap .pay-delivery .regist > li > input[type='text'], .sec-order .order-wrap .pay-delivery .regist > li > select {
        width: 100%;
    }

    .sec-order .order-wrap .pay-delivery .regist > li .f-hp {
        width: calc(100% + 12px);
    }

    .sec-order .order-wrap .pay-delivery .regist > li .f-zipcode {
        width: 100%;
    }

    .sec-order .order-wrap .pay-delivery .regist > li + li {
        padding-top: 28px;
    }

    .sec-order .order-wrap .pay-delivery .regist > li .msg-code {
        padding: 16px 0 0;
        margin-bottom: -8px;
        font-size: 12px;
    }

    .sec-order .order-wrap .pay-how {
        border-top: 8px solid rgba(196, 196, 196, 0.2);
        margin: 20px -18px 0;
        padding: 20px 18px 0;
    }

    .sec-order .order-wrap .pay-how .title-article {
        position: relative;
    }

    .sec-order .order-wrap .pay-how .title-article a {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 1px;
    }

    .sec-order .order-wrap .pay-how .list-how {
        background-color: #EBEBEB;
        box-shadow: inset 0 0 0 1px #000;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        margin-top: 12px;
    }

    .sec-order .order-wrap .pay-how .list-how li {
        padding: 0;
    }

    .sec-order .order-wrap .pay-how .list-how li:nth-child(n+3) {
        margin-top: 0;
    }

    .sec-order .order-wrap .pay-how .list-how li input[type='radio'] + label {
        background-color: #fff;
        line-height: 42px;
        border-radius: 0;
        box-shadow: none;
        border-right: 1px solid #000;
        border-bottom: 1px solid #000;
    }

    .sec-order .order-wrap .pay-total {
        border-top: 8px solid rgba(196, 196, 196, 0.2);
        margin: 20px -18px 0;
        padding: 20px 18px 0;
    }

    .sec-order .order-wrap .pay-total .f-check {
        padding: 15px 0 16px;
    }

    .sec-order .order-wrap .pay-total ul {
        padding-top: 26px;
        border-bottom: none;
    }

    .sec-order .order-wrap .pay-total li h5 {
        font-size: 14px;
    }

    .sec-order .order-wrap .pay-total li strong {
        font-weight: 700;
    }

    .sec-order .order-wrap .pay-total li.total {
        line-height: 25px;
        padding: 22px 0;
        margin-top: 28px;
    }

    .sec-order .order-wrap .pay-total li.total h5 {
        font-size: 15px;
        font-weight: 600;
    }

    .sec-order .order-wrap .pay-total li.total strong {
        font-size: 20px;
        line-height: 25px;
    }

    .sec-order .order-wrap .pay-total .btn-area {
        display: none;
    }

    .sec-order .order-wrap .pay-point {
        border-top: 8px solid rgba(196, 196, 196, 0.2);
        margin: 20px -18px 0;
        padding: 20px 18px 0;
    }

    .sec-order .order-wrap .pay-point ul {
        margin-top: 14px;
    }

    .sec-order .order-wrap .pay-point li h5 {
        color: #767C85;
        font-size: 14px;
        opacity: 1;
        font-weight: 400;
    }

    .sec-order .order-wrap .pay-point li strong {
        font-size: 14px;
        font-weight: 400;
    }

    .sec-order .order-wrap .pay-point li + li {
        margin-top: 4px;
    }

    .sec-order .order-wrap .pay-point .max {
        border-bottom: 1px solid #DDD;
        padding-bottom: 8px;
    }

    .sec-order .order-wrap .pay-point .max strong {
        font-size: 14px;
    }
}

.sec-complete {
    padding: 110px 0;
    text-align: center;
    color: #000;
}

.sec-complete .result {
    font-size: 36px;
    font-weight: 700;
    color: #00BA88;
}

.sec-complete .result mark {
    display: inline-block;
    font-weight: 700;
}

.sec-complete .msg {
    margin-top: 17px;
    padding: 0 10px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
}

.sec-complete .msg > span {
    display: block;
}

.sec-complete .btn-area {
    margin-top: 40px;
}

.sec-complete .btn-area a, .sec-complete .btn-area button {
    width: 248px;
}

@media (max-width: 767px) {
    .sec-complete {
        padding: 35px 0;
    }

    .sec-complete .result {
        font-size: 18px;
    }

    .sec-complete .result mark {
        color: #FA4431;
    }

    .sec-complete .msg {
        margin-top: 24px;
    }

    .sec-complete .msg > span {
        font-size: 13px;
        line-height: 20px;
    }
}

.sec-guide .title-article {
    padding-bottom: 19px;
}

.sec-guide .guide-toggle .toggle-tit {
    position: relative;
    padding: 23px 7px 21px;
    border-top: 1px solid #E4E4E4;
}

.sec-guide .guide-toggle .toggle-tit:before {
    content: '';
    position: absolute;
    right: 14px;
    top: 0;
    bottom: 0;
    width: 13px;
    background: url("../../../resource/images/icon-toggle-black.png") 50% 50%/13px 8px no-repeat;
}

.sec-guide .guide-toggle .toggle-tit .title-detail {
    padding: 0;
    border: none;
}

.sec-guide .guide-toggle .toggle-tit.open:before {
    transform: scaleY(-1);
}

.sec-guide .guide-toggle .toggle-con {
    padding: 0 7px 25px;
    display: none;
}

.sec-guide .guide-toggle .toggle-con h4 {
    font-size: 14px;
    line-height: 26px;
    font-weight: 700;
    color: #000;
}

.sec-guide .guide-toggle .toggle-con ul + h4 {
    margin-top: 26px;
}

.sec-guide .guide-toggle .toggle-tit.open + .toggle-con {
    display: block;
}

@media (max-width: 767px) {
    .sec-guide {
        border-top: 8px solid rgba(196, 196, 196, 0.2);
        margin: 20px -18px 0;
        padding: 0 18px;
    }

    .sec-guide .title-article {
        display: none;
    }

    .sec-guide .guide-toggle {
        border-bottom: none;
    }

    .sec-guide .guide-toggle .toggle-tit {
        padding: 18px 0 16px;
        border-top: none;
    }

    .sec-guide .guide-toggle .toggle-tit .title-detail {
        font-size: 14px;
        font-weight: 700;
    }

    .sec-guide .guide-toggle .toggle-tit:before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 11px;
        height: 6px;
        margin-top: -3px;
        background: url("../../../resource/images/icon-title-toggle.png") right 50%/11px 6px no-repeat;
    }

    .sec-guide .guide-toggle .toggle-con {
        padding: 0 0 20px;
    }

    .sec-guide .guide-toggle .toggle-tit ~ .toggle-tit {
        border-top: 1px solid #E4E4E4;
    }
}

.mobile-order {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 85px;
    padding: 15px 18px 0;
    border-top: 1px solid #f3f3f3;
    box-sizing: border-box;
    z-index: 99;
    background: #fff;
    display: flex;
    pointer-events: auto;
}

.mobile-order .total-price {
    min-width: 100px;
    padding: 3px 20px 0 0;
    box-sizing: border-box;
}

.mobile-order .total-price span {
    font-size: 11px;
    color: #a5a5a5;
    line-height: 18px;
    display: block;
}

.mobile-order .total-price strong {
    font-size: 15px;
    font-weight: 700;
    line-height: 19px;
    display: block;
}

.mobile-order .total-price strong:after {
    content: '원';
}

.mobile-order button.buy {
    position: relative;
    flex: 1;
}

.mobile-order button.buy[disabled] {
    opacity: 0.6;
}

.mobile-order button.buy[disabled][class*="-yellow"] {
    background: #FFB800;
}

.mobile-order button.buy[disabled][class*="-pink"] {
    background: #FA4431;
}

@media (min-width: 768px) {
    .mobile-order {
        display: none;
    }
}

/* member */
.main-member {
    position: relative;
    min-width: 1360px;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background: 50% 50% / cover no-repeat;
}

.main-member .sec-member {
    width: 394px;
    margin: 0 200px 0 auto;
    padding: 36px 35px;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .main-member {
        position: static;
        min-width: 100%;
        height: auto;
        background: #fff !important;
    }

    .main-member .sec-member {
        width: 100%;
        margin: 22px 0 0;
        padding: 0 18px 40px;
        transform: none;
    }
}

.login-tabs {
    height: 28px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 23px;
    box-sizing: border-box;
}

.login-tabs a {
    position: relative;
    display: inline-block;
    height: 100%;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: #898a8d;
}

.login-tabs a:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #000;
    border-radius: 2px;
    display: none;
}

.login-tabs a.selected {
    color: #000;
}

.login-tabs a.selected::before {
    display: block;
}

.login-tabs a + a {
    margin-left: 15px;
}

@media (max-width: 767px) {
    .login-tabs {
        display: none;
    }
}

.login-register .btn-login {
    width: 100%;
    margin-top: 21px;
}

.login-etc {
    margin-top: 25px;
    text-align: center;
}

.login-etc a {
    position: relative;
    display: inline-block;
    font-size: 12px;
}

.login-etc a strong {
    color: #FFB800;
    font-weight: 600;
}

.login-etc a + a {
    margin-left: 23px;
}

.login-etc a + a:before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    width: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: #000;
    margin-top: -1px;
}

.login-btnset {
    margin-top: 20px;
}

.login-btnset a {
    display: block;
    width: 100%;
    font-weight: 400;
    line-height: 44px;
}

.login-btnset a:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: -4px 7px 0 0;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    vertical-align: middle;
}

.login-btnset a.naver:before {
    background-image: url("../../../resource/images/icon-naver.png");
    background-size: 12px 11px;
}

.login-btnset a.facebook:before {
    background-image: url("../../../resource/images/icon-facebook.png");
    background-size: 6px 13px;
}

.login-btnset a.kakao:before {
    background-image: url("../../../resource/images/icon-kakao.png");
    background-size: 14px 13px;
}

.login-btnset a + a {
    margin-top: 9px;
}

.login-btnset .or {
    position: relative;
    display: block;
    height: 42px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: #C4C4C4;
    text-align: center;
}

.login-btnset .or:before, .login-btnset .or:after {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    width: calc(50% - 34px);
    height: 1px;
    background-color: #C4C4C4;
}

.login-btnset .or:before {
    right: auto;
}

.login-btnset .or:after {
    left: auto;
}

@media (max-width: 767px) {
    .login-btnset a {
        background-color: #F2F2F2;
        border-color: #F2F2F2 !important;
    }
}

.join-register .btn-join {
    width: 100%;
    margin-top: 26px;
}

.join-terms {
    margin-top: 20px;
}

.join-terms > input[type='checkbox'] + label strong {
    font-size: 14px;
}

.join-terms ul {
    border: 1px solid #d3d8e0;
    border-radius: 3px;
    padding: 15px 15px;
    margin-top: 11px;
}

.join-terms li {
    position: relative;
}

.join-terms li + li {
    margin-top: 11px;
}

.join-terms .btn-view {
    position: absolute;
    right: 0;
    top: 50%;
    font-size: 11px;
    text-decoration: underline;
    color: #898a8d;
    transform: translateY(-50%);
}

.body-landing {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0;
}

.body-landing .store-container {
    height: 100vh;
}

.body-landing .store-container:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.body-landing .store-contents {
    background: transparent;
}

.body-landing .sec-landing {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 50px;
    z-index: 1;
}

.body-landing .sec-landing h1 {
    position: fixed;
    left: 18px;
    top: 12px;
}

.body-landing .sec-landing h1 a {
    display: block;
    width: 118px;
    height: 22px;
    background: url("../../../resource/images/logo-black.svg") 0 0/contain no-repeat;
    text-indent: -5000px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.body-landing .sec-landing .already {
    margin-top: 46px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.body-landing .sec-landing .already a {
    font-weight: 700;
    text-decoration: underline;
}

.body-landing .sec-landing .btn-join-email {
    width: 100%;
}

.body-landing .sec-landing .btn-join-email:after {
    content: '';
    position: absolute;
    right: 25px;
    top: 50%;
    width: 19px !important;
    height: 16px;
    width: 100%;
    background: url("../../../resource/images/icon-join-email.png") 50% 50%/contain no-repeat;
    transform: translateY(-50%);
}

.body-landing .sec-landing .login-btnset {
    margin-top: 28px;
}

.body-landing .sec-landing .login-btnset .or {
    margin: 0 20px;
}

.body-landing.type-dark {
    background-color: #272727;
}

.body-landing.type-dark .store-container:after {
    background-image: linear-gradient(rgba(39, 39, 39, 0) 30%, #272727 55%);
}

.body-landing.type-dark .sec-landing .already {
    color: #fff;
}

.body-landing.type-dark .sec-landing .already a {
    color: #fff;
}

.body-landing.type-light .store-container:after {
    background-image: linear-gradient(rgba(255, 255, 255, 0) 30%, white 55%);
}

.body-landing.type-light .sec-landing h1 a {
    background-image: url("../../../resource/images/logo.svg");
}

/* my */
.sec-myinfo {
    padding: 45px 0 34px;
}

.sec-myinfo h2 {
    padding-bottom: 7px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
    color: #000;
    word-break: break-all;
}

.sec-myinfo nav a {
    display: flex;
    align-items: center;
    color: #000;
    margin-top: 12px;
}

.sec-myinfo nav a strong {
    font-size: 15px;
    line-height: 30px;
}

.sec-myinfo nav a em {
    flex: 1;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    white-space: nowrap;
    text-align: right;
}

.sec-myinfo .btn-member {
    position: relative;
    display: block;
    font-size: 12px;
    color: #2C2926;
}

.sec-myinfo .btn-member strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #000;
    padding-bottom: 3px;
}

.sec-myinfo .btn-member:after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 11px;
    background: url("../../../resource/images/icon-mobile-subnavi.png") no-repeat;
    background-size: contain;
    transform: translateY(-50%);
}

.sec-myinfo .btn-benefit {
    position: relative;
    display: block;
    height: 47px;
    padding: 0 54px;
    margin-top: 18px;
    font-size: 14px;
    line-height: 47px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(91.86deg, #F81542 31.83%, #FFB800 100%);
}

.sec-myinfo .btn-benefit:after {
    content: '';
    position: absolute;
    right: 11px;
    top: 50%;
    width: 8px;
    height: 14px;
    background: url("../../../resource/images/arr-benefit.png") no-repeat;
    background-size: contain;
    transform: translateY(-50%);
}

.sec-myinfo .btn-benefit:before {
    content: '';
    position: absolute;
    left: 22px;
    top: 50%;
    width: 24px;
    height: 24px;
    background: url("../../../resource/images/icon-benefit.png") no-repeat;
    background-size: contain;
    transform: translateY(-50%);
}

.hoverable .sec-myinfo .btn-benefit:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .sec-myinfo {
        padding: 30px 0 29px;
    }

    .sec-myinfo h2 {
        font-size: 24px;
    }
}

.sec-push .title-my {
    display: none;
}

.sec-push a {
    position: relative;
    display: block;
    padding: 20px 16px 13px 58px;
    color: #000;
    font-size: 14px;
    line-height: 20px;
}

.sec-push a em {
    display: block;
    position: absolute;
    left: 14px;
    width: 30px;
    height: 30px;
    background: #fff no-repeat 50% 50% / cover;
}

.sec-push a em.type-icon {
    border-radius: 25px;
    top: 21px;
    background-color: #0AE784;
}

.sec-push a em.type-thumb {
    top: 25px;
    background-color: #c4c4c4;
}

.sec-push a strong {
    display: block;
    font-weight: 700;
}

.sec-push a p {
    display: block;
    color: #666;
    margin-top: 3px;
}

.sec-push a i {
    display: block;
    font-size: 11px;
    color: #666;
    margin-top: 3px;
}

.sec-push a figure {
    margin-top: 12px;
}

.sec-push a figure img {
    display: block;
    max-width: 100%;
    margin-bottom: 9px;
}

.sec-push a.done {
    background-color: #F8F8FA;
}

.sec-push a.done strong, .sec-push a.done p, .sec-push a.done i, .sec-push a.done figure {
    opacity: 0.5;
}

.sec-push .list-slide-item a + a {
    border-top: 1px solid #EBEBEB;
}

@media (min-width: 768px) {
    .sec-push {
        overflow: hidden;
    }

    .sec-push .store-tab-nav {
        position: relative;
        top: 0 !important;
    }

    .expand-ui .sec-push .store-tab-nav .mask {
        transform: none !important;
    }

    .sec-push .list-box-wrap {
        min-height: calc(100vh - 237px);
        padding: 0;
    }

    .sec-push .title-my {
        display: block;
    }

    .sec-push a {
        padding: 50px 170px 50px 349px;
        font-size: 15px;
        border-bottom: 1px solid #EBEBEB;
    }

    .sec-push a em {
        left: 40px;
        top: 37px !important;
        width: 50px;
        height: 50px;
    }

    .sec-push a strong {
        position: absolute;
        left: 129px;
        top: 52px;
    }

    .sec-push a p {
        max-width: 520px;
    }

    .sec-push a i {
        position: absolute;
        right: 35px;
        top: 52px;
        font-size: 15px;
        margin-top: 0;
    }

    .sec-push a figure {
        margin-top: 27px;
    }

    .sec-push a figure img {
        margin-bottom: 0;
    }

    .sec-push a.done strong, .sec-push a.done p, .sec-push a.done i, .sec-push a.done figure {
        opacity: 1;
    }

    .sec-push a + a {
        border-top: none;
    }
}

@media (max-width: 767px) {
    .sec-push {
        margin: 0 -18px;
    }
}

.map-product-thumbnail-marker {
    position: absolute;
    width: 55px;
    height: 55px;
    border: 3px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
    background: #fff no-repeat 50% 50% / cover;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transform: translate(-50%, -100%);
}

@media (max-width: 767px) {
    .map-product-thumbnail-marker {
        width: 38px;
        height: 38px;
    }
}

.sec-info-basic .card {
    padding: 30px 0;
}

.sec-info-basic .card h4 {
    font-weight: 700;
}

.sec-info-basic .card h4 strong {
    margin-right: 10px;
    font-weight: 700;
}

.sec-info-basic .card > p {
    margin-top: 4px;
}

.sec-info-basic .card .type {
    color: #00BA88;
}

.sec-info-basic .card .date {
    color: #7f7f7f;
}

.sec-info-basic .regist {
    max-width: 324px;
}

.sec-info-basic .regist > li + li {
    margin-top: 28px;
}

.sec-info-basic .regist > li [class*='btnset-'] {
    min-width: auto;
    width: 74px;
}

.sec-info-address {
    margin-top: 68px;
}

.sec-info-address li {
    position: relative;
    padding: 70px 0 40px;
}

.sec-info-address li > p {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
    line-height: 26px;
}

.sec-info-address li > p span + span {
    margin-left: 8px;
}

.sec-info-address li input[type='radio'] + label {
    position: absolute;
    left: 0;
    top: 39px;
    font-size: 14px;
}

.sec-info-address li .btn-del {
    position: absolute;
    left: 136px;
    top: 34px;
    font-size: 14px;
    color: #979797;
    line-height: 26px;
}

.sec-info-address li + li {
    border-top: 1px solid #ddd;
}

.sec-info-address .no-result {
    height: auto;
}

.sec-info-address .no-result:before {
    display: none;
}

.sec-info-password,
.sec-info-out {
    margin-top: 68px;
}

.sec-info-password [class*='btnset-'],
  .sec-info-out [class*='btnset-'] {
    width: 155px;
    margin-top: 20px;
}

.sec-info-password .list-dot,
  .sec-info-out .list-dot {
    margin-top: 20px;
}

.sec-info-password {
    margin-top: 28px;
}

@media (max-width: 767px) {
    .sec-info-basic .title-my {
        display: none;
    }

    .sec-info-basic .card {
        padding: 25px 0 30px;
    }

    .sec-info-basic .regist {
        max-width: 100%;
    }

    .sec-info-address {
        margin-top: 38px;
    }

    .sec-info-address li {
        padding: 56px 0 13px;
    }

    .sec-info-address li > p span {
        display: block;
    }

    .sec-info-address li > p span + span {
        margin-left: 0;
    }

    .sec-info-address li input[type='radio'] + label {
        top: 23px;
    }

    .sec-info-address li .btn-del {
        left: auto;
        right: 0;
        top: 18px;
    }

    .sec-info-address .no-result {
        padding: 50px 0 23px;
        text-align: center;
        font-size: 14px;
    }

    .sec-info-password {
        margin-top: 25px;
    }

    .sec-info-out {
        margin-top: 38px;
    }
}

@media (min-width: 768px) {
    .sec-info-address .no-result {
        padding: 28px 0 40px;
        font-size: 14px;
        align-items: flex-start;
    }
}

.sec-my-etc > article + article {
    margin-top: 75px;
}

@media (max-width: 767px) {
    .sec-my-etc {
        padding-top: 25px;
    }

    .sec-my-etc > article + article {
        margin-top: 55px;
    }
}

.sec-my-etc .etc-description {
    margin-top: 40px;
    font-size: 14px;
    line-height: 20px;
    color: rgba(10, 10, 10, 0.6);
}

.sec-my-etc .etc-description dt {
    display: block;
    padding-bottom: 6px;
    color: #000;
    font-weight: 700;
}

.sec-my-etc .etc-description dd + dt {
    margin-top: 25px;
}

@media (max-width: 767px) {
    .sec-my-etc .etc-description {
        margin-top: 25px;
        font-size: 12px;
    }

    .sec-my-etc .etc-description dt {
        padding-bottom: 7px;
        font-size: 13px;
    }

    .sec-my-etc .etc-description dd + dt {
        margin-top: 17px;
    }
}

.sec-my-etc .etc-regist {
    font-size: 0;
}

.sec-my-etc .etc-regist input[type="text"] {
    width: 326px;
    height: 50px;
    border: 3px solid #000;
    box-sizing: border-box;
}

.sec-my-etc .etc-regist a, .sec-my-etc .etc-regist button {
    display: inline-block;
    width: 158px;
    height: 50px;
    margin-left: 5px;
    font-size: 16px;
    font-weight: 700;
    background-color: #000;
    line-height: 50px;
    text-align: center;
    color: #fff;
}

.sec-my-etc .etc-regist a:hover, .sec-my-etc .etc-regist button:hover {
    background-color: #000;
}

@media (max-width: 767px) {
    .sec-my-etc .etc-regist {
        display: flex;
    }

    .sec-my-etc .etc-regist input[type="text"] {
        flex: 1;
    }

    .sec-my-etc .etc-regist a, .sec-my-etc .etc-regist button {
        width: 96px;
        margin-left: 5px;
        font-size: 14px;
    }
}

.sec-my-etc .table-grade hgroup h4:nth-child(1) {
    width: 18%;
}

.sec-my-etc .table-grade hgroup h4:nth-child(2) {
    width: 21%;
}

.sec-my-etc .table-grade hgroup h4:nth-child(3) {
    width: 13%;
}

.sec-my-etc .table-grade hgroup h4:nth-child(4) {
    width: 21%;
}

.sec-my-etc .table-grade hgroup h4:nth-child(5) {
    width: 27%;
}

.sec-my-etc .table-grade ul li:nth-child(1) {
    width: 18%;
}

.sec-my-etc .table-grade ul li:nth-child(2) {
    width: 21%;
}

.sec-my-etc .table-grade ul li:nth-child(3) {
    width: 13%;
}

.sec-my-etc .table-grade ul li:nth-child(4) {
    width: 21%;
}

.sec-my-etc .table-grade ul li:nth-child(5) {
    width: 27%;
}

.sec-my-etc .table-benefit hgroup h4:nth-child(1) {
    width: 15%;
}

.sec-my-etc .table-benefit hgroup h4:nth-child(2) {
    width: 21%;
}

.sec-my-etc .table-benefit hgroup h4:nth-child(3) {
    width: 18%;
}

.sec-my-etc .table-benefit hgroup h4:nth-child(4) {
    width: 46%;
}

.sec-my-etc .table-benefit ul li:nth-child(1) {
    width: 15%;
}

.sec-my-etc .table-benefit ul li:nth-child(2) {
    width: 21%;
}

.sec-my-etc .table-benefit ul li:nth-child(3) {
    width: 18%;
}

.sec-my-etc .table-benefit ul li:nth-child(4) {
    width: 46%;
}

@media (max-width: 767px) {
    .sec-my-etc .table-benefit ul {
        position: relative;
        padding-left: 101px;
    }

    .sec-my-etc .table-benefit ul li:nth-child(1) {
        position: absolute;
        left: 1px;
        top: 2px;
        font-size: 24px;
        font-weight: 700;
        margin-top: 0;
    }

    .sec-my-etc .table-benefit ul li:nth-child(1):before {
        display: none;
    }
}

.sec-my-etc .table-point hgroup h4, .sec-my-etc .table-point ul li {
    width: 25%;
}

.sec-my-etc .table-history hgroup h4:nth-child(1) {
    width: 15%;
}

.sec-my-etc .table-history hgroup h4:nth-child(2) {
    flex: 1;
}

.sec-my-etc .table-history hgroup h4:nth-child(3) {
    width: 15%;
}

.sec-my-etc .table-history hgroup h4:nth-child(4) {
    width: 22%;
}

.sec-my-etc .table-history ul li:nth-child(1) {
    width: 15%;
}

.sec-my-etc .table-history ul li:nth-child(2) {
    flex: 1;
    text-align: left;
    padding-left: 33px;
    padding-right: 33px;
}

.sec-my-etc .table-history ul li:nth-child(3) {
    width: 15%;
}

.sec-my-etc .table-history ul li:nth-child(4) {
    width: 22%;
}

.sec-my-etc .table-mycoupon hgroup h4:nth-child(1) {
    width: 15%;
}

.sec-my-etc .table-mycoupon hgroup h4:nth-child(2) {
    flex: 1;
}

.sec-my-etc .table-mycoupon hgroup h4:nth-child(3) {
    width: 16%;
}

.sec-my-etc .table-mycoupon hgroup h4:nth-child(4) {
    width: 24%;
}

.sec-my-etc .table-mycoupon ul li:nth-child(1) {
    width: 15%;
}

.sec-my-etc .table-mycoupon ul li:nth-child(2) {
    flex: 1;
    text-align: left;
    padding-left: 33px;
    padding-right: 33px;
}

.sec-my-etc .table-mycoupon ul li:nth-child(3) {
    width: 16%;
}

.sec-my-etc .table-mycoupon ul li:nth-child(4) {
    width: 24%;
}

.table-single {
    border-top: 3px solid #000;
    text-align: center;
}

.table-single hgroup {
    display: flex;
    height: 54px;
    background-color: #F2F2F2;
    color: #303033;
}

.table-single hgroup h4 {
    font-size: 15px;
    font-weight: 700;
    line-height: 54px;
}

.table-single ul {
    display: flex;
    height: 65px;
    border-bottom: 1px solid #A5A5A5;
    font-size: 18px;
    font-weight: 500;
    line-height: 64px;
    box-sizing: border-box;
}

.table-single ul .faint {
    color: #00BA88;
}
.table-single ul li.table-input {
 width:50%; text-align:right;
}
@media (max-width: 767px) {
    .table-single {
        text-align: left;
    }

    .table-single hgroup {
        display: none;
    }

    .table-single ul {
        display: block;
        height: auto;
        border-bottom: none;
        font-size: 13px;
        line-height: 45px;
    }

    .table-single ul li {
        position: relative;
        width: 100% !important;
        height: 46px;
        padding-left: 166px;
        border-bottom: 1px solid #A5A5A5;
        box-sizing: border-box;
    }
.table-single ul li.table-input {
    text-align:left;
    margin-top:25px;
    border:none;
    padding-left:0;
}
    .table-single ul li:before {
        content: attr(data-title);
        position: absolute;
        left: 8px;
    }
}

.no-border{
    border:none;
}

.no-margin{
    margin:0 !important;
}

.table-multi {
    border-top: 3px solid #000;
    text-align: center;
}

.table-multi hgroup {
    display: flex;
    height: 54px;
    background-color: #F2F2F2;
    color: #303033;
}

.table-multi hgroup h4 {
    font-size: 15px;
    font-weight: 700;
    line-height: 54px;
}

.table-multi ul {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #A5A5A5;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    box-sizing: border-box;
}

.table-multi ul li {
    padding-top: 25px;
    padding-bottom: 23px;
}

.table-multi .no-result {
    border-bottom: 1px solid #A5A5A5;
}

@media (max-width: 767px) {
    .table-multi {
        text-align: left;
    }

    .table-multi hgroup {
        display: none;
    }

    .table-multi ul {
        display: block;
        font-size: 13px;
        line-height: 19px;
        padding-bottom: 19px;
    }

    .table-multi ul li {
        width: 100% !important;
        margin-top: 15px;
        padding: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-multi ul li:before {
        content: attr(data-title);
        display: block;
        padding-bottom: 5px;
        color: #A0A0A0;
    }

    .table-multi .no-result {
        height: 270px;
    }
}

@media (min-width: 768px) {
    .table-multi .no-result {
        height: 68px;
        font-size: 18px;
    }

    .table-multi .no-result:before {
        display: none;
    }
}

.sec-my-delivery {
    position: relative;
    width: calc(100% + 120px);
    height: calc(100% + 157px);
    margin: -45px -60px -112px;
}

.sec-my-delivery .item-map {
    width: 100%;
    height: 100%;
    background: pink;
}

.sec-my-delivery .delivery-list-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.sec-my-delivery .delivery-list {
    position: sticky;
    top: 100vh;
    width: 390px;
    margin: 0 30px 30px auto;
    background-color: #fff;
    border-radius: 24px;
    overflow: hidden;
    pointer-events: auto;
}

.sec-my-delivery .delivery-list h3 {
    display: block;
    height: 63px;
    padding-left: 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 66px;
}

.sec-my-delivery .delivery-list .icon-badge {
    position: static;
    display: inline-block;
    vertical-align: 2px;
}

.sec-my-delivery .delivery-list .function {
    position: relative;
    display: block;
    height: 39px;
    display: none;
}

.sec-my-delivery .delivery-list .function:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background-color: #D4D4D4;
}

.sec-my-delivery .delivery-list .items-delivery {
    position: relative;
    border-top: 1px solid #F3F3F3;
}

.sec-my-delivery .delivery-list .items-delivery ul {
    max-height: 386px;
    overflow-x: hidden;
    overflow-y: auto;
}

.sec-my-delivery .delivery-list .items-delivery li {
    position: relative;
    padding: 14px 20px 12px 100px;
    border-bottom: 1px solid #F3F3F3;
    line-height: 16px;
    cursor: pointer;
}

.sec-my-delivery .delivery-list .items-delivery li figure {
    position: absolute;
    left: 30px;
    top: 16px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sec-my-delivery .delivery-list .items-delivery li figure:after {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    border: 3px solid #F3F3F3;
    border-radius: 30px;
}

.sec-my-delivery .delivery-list .items-delivery li .brand {
    display: inline-block;
    max-width: 100%;
    font-size: 13px;
    font-weight: 700;
    margin-right: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sec-my-delivery .delivery-list .items-delivery li .name {
    display: inline-block;
    max-width: 100%;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sec-my-delivery .delivery-list .items-delivery li .options {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #767C85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sec-my-delivery .delivery-list .items-delivery li .options .idx {
    margin-left: 0.6em;
    display: inline-block;
    white-space: nowrap;
}

.sec-my-delivery .delivery-list .items-delivery li .state {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    color: #5D5D5D;
}

.sec-my-delivery .delivery-list .items-delivery li .state strong {
    font-weight: 700;
    color: #00BA88;
    margin-right: 0.3em;
}

.sec-my-delivery .delivery-list .items-delivery li .state a {
    text-decoration: underline;
    color: #000;
    font-weight: 700;
    white-space: nowrap;
    margin-right: 0.3em;
}

.sec-my-delivery .delivery-list .items-delivery li .state .estimated {
    white-space: nowrap;
}

.sec-my-delivery .delivery-list .items-delivery li.current {
    background-color: rgba(255, 184, 0, 0.2);
}

.sec-my-delivery .delivery-list .items-delivery li.current figure:after {
    border-color: #FFB800;
}

.sec-my-delivery .delivery-list .items-delivery .fake-scroll-track {
    top: 12px;
    height: calc(100% - 24px);
}

.sec-my-delivery .delivery-list .no-result {
    height: auto;
    padding: 10px 0 25px 30px;
    font-size: 13px;
    align-items: flex-start;
}

.sec-my-delivery .delivery-list .no-result:before {
    display: none;
}

@media (max-width: 767px) {
    .sec-my-delivery {
        width: calc(100% + 36px);
        height: calc(100vh - 106px);
        margin: 0 -18px -50px;
    }

    .sec-my-delivery .delivery-list-wrap {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 999;
        transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .sec-my-delivery .delivery-list-wrap:not(.open) {
        transform: translate3d(0, calc(100% - 100px), 0);
    }

    .sec-my-delivery .delivery-list {
        position: relative;
        top: 0 !important;
        width: auto;
        margin: 0;
        border-radius: 24px 24px 0 0;
        z-index: 100;
    }

    .sec-my-delivery .delivery-list h3 {
        display: none;
    }

    .sec-my-delivery .delivery-list .function {
        display: block;
    }

    .sec-my-delivery .delivery-list .items-delivery ul {
        max-height: 282px;
        min-height: 102px;
    }

    .sec-my-delivery .delivery-list .items-delivery li {
        padding-left: 87px;
    }

    .sec-my-delivery .delivery-list .items-delivery li figure {
        left: 18px;
    }

    .sec-my-delivery .delivery-list .no-result {
        align-items: center;
        padding: 0;
        height: 62px;
    }
}

.header-sort {
    position: relative;
    padding-bottom: 28px;
    min-height: 44px;
    box-shadow: 0 3px 0 0 #000;
}

.header-sort select {
    width: 190px;
}

.header-sort .tab-month {
    position: absolute;
    right: 0;
    top: 0;
}

@media (max-width: 767px) {
    .header-sort {
        margin: 0 -18px;
        padding: 35px 18px 27px;
        box-shadow: 0 8px 0 0 #F3F3F3;
    }

    .header-sort select {
        width: 100%;
    }

    .header-sort .select-title {
        width: 100% !important;
    }

    .header-sort .tab-month {
        position: static;
        margin-top: 27px;
    }
}

.item-my {
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
}

.item-my figure {
    width: 76px;
    padding-right: 15px;
}

.item-my figure img {
    display: block;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    border: 1px solid #F3F3F3;
    box-sizing: border-box;
}

.item-my .text {
    flex: 1;
}

.item-my .text .brand {
    max-height: calc(19px * 2);
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    color: #000;
    display: block;
    word-break: break-all;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.item-my .text .name {
    max-height: calc(14px * 2);
    font-size: 12px;
    line-height: 14px;
    margin-top: 6px;
    display: block;
    display: block;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #000;
}

.item-my .text .price {
    font-size: 16px;
    color: #000;
    line-height: 19px;
    margin-top: 4px;
    display: block;
}

.item-my .text .price:after {
    font-size: 14px;
    content: '원';
    line-height: 18px;
    vertical-align: top;
    margin-left: 2px;
    display: inline-block;
}

.item-my .text .options {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: #000;
    margin-top: 8px;
}

.item-my .text .state {
    font-size: 14px;
    line-height: 18px;
    margin-top: 13px;
}

.item-my .text .state > strong {
    font-weight: 700;
}

.item-my .text .state > strong.pink {
    color: #FA4431;
}

.item-my .text .state > strong.green {
    color: #00BA88;
}

.item-my .text .state > strong.blue {
    color: #0087D2;
}

.item-my .text .state .date {
    display: block;
    color: #7f7f7f;
}

@media (max-width: 767px) {
    .item-my {
        margin-top: 35px;
    }

    .item-my .text .brand {
        max-height: calc(18px * 2);
        font-size: 13px;
        line-height: 18px;
    }

    .item-my .text .name {
        margin-top: 6px;
        font-size: 13px;
    }

    .item-my .text .price {
        font-size: 13px;
        font-weight: 500;
        display: inline-block;
        line-height: 18px;
        margin-top: 1px;
        margin-right: 6px;
    }

    .item-my .text .price:after {
        font-size: 13px;
        line-height: 18px;
    }

    .item-my .text .options {
        margin-top: 6px;
        font-size: 12px;
    }

    .item-my .text .options > strong {
        margin-right: 9px;
    }

    .item-my .text .options .idx {
        display: inline-block;
        white-space: nowrap;
    }

    .item-my .text .state {
        position: absolute;
        left: 0;
        top: -35px;
        margin-top: 0;
    }

    .item-my .text .state > strong {
        margin-right: 4px;
    }

    .item-my .text .state .date {
        display: inline-block;
    }
}

.item-sheet {
    box-shadow: inset 0 0 0 1px #DDD;
    padding: 3px 1px 0;
}

.item-sheet + .item-sheet {
    margin-top: 43px;
}

@media (max-width: 767px) {
    .item-sheet {
        margin: 0 -18px;
        padding: 0 18px;
        box-shadow: none;
    }

    .item-sheet + .item-sheet {
        margin-top: 13px;
    }
}

.item-sheet .sheet-head {
    position: relative;
    height: 48px;
    padding: 0 35px;
    font-size: 15px;
    box-sizing: border-box;
    background-color: #F3F3F3;
    line-height: 48px;
}

.item-sheet .sheet-head:before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    height: 3px;
    background-color: #000;
}

.item-sheet .sheet-head .date {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
}

.item-sheet .sheet-head .btn-all-cancle {
    width: 104px;
    height: 27px;
    margin-left: 28px;
    line-height: 27px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border-radius: 3px;
    background-color: #000;
    color: #fff;
    vertical-align: 2px;
}

@media (max-width: 767px) {
    .item-sheet .sheet-head {
        margin: 0 -18px;
        height: 84px;
        padding: 20px 18px 0;
        font-size: 13px;
        border-top: none;
        line-height: 22px;
    }

    .item-sheet .sheet-head:before {
        display: none;
    }

    .item-sheet .sheet-head .onumber {
        display: block;
    }

    .item-sheet .sheet-head .date {
        display: block;
        position: static;
        transform: none;
    }

    .item-sheet .sheet-head .btn-all-cancle {
        position: absolute;
        right: 18px;
        top: 50%;
        height: 30px;
        margin: 0;
        line-height: 30px;
        transform: translateY(-50%);
        font-weight: 700;
    }
}

.item-sheet .sheet-summary, .item-sheet .sheet-address {
    padding: 37px 35px;
}

.item-sheet .sheet-summary [class*='btnset-'], .item-sheet .sheet-address [class*='btnset-'] {
    padding: 0 22px;
}

@media (max-width: 767px) {
    .item-sheet .sheet-summary, .item-sheet .sheet-address {
        padding: 28px 0 31px;
    }
}

.item-sheet .sheet-wrapping {
    position: relative;
    border-top: 1px solid #DDD;
    min-height: 235px;
}

.item-sheet .sheet-wrapping:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 30px);
    width: 1px;
    background-color: #EBEBEB;
}

@media (max-width: 767px) {
    .item-sheet .sheet-wrapping {
        border-top: none;
        min-height: auto;
    }

    .item-sheet .sheet-wrapping:before {
        display: none;
    }
}

.item-sheet .sheet-address {
    border-top: 1px solid #DDD;
}

.item-sheet .sheet-address > p {
    margin-top: 13px;
    padding-bottom: 25px;
    font-size: 15px;
    font-weight: 500;
    line-height: 26px;
    color: #303033;
}

.item-sheet .sheet-address .title-sheet {
    font-size: 20px;
    font-weight: 700;
    color: #303033;
}

@media (max-width: 767px) {
    .item-sheet .sheet-address > p {
        font-size: 14px;
        padding-bottom: 17px;
    }

    .item-sheet .sheet-address .title-sheet {
        font-size: 16px;
    }
}

.item-sheet .sheet-summary {
    width: calc(50% - 30px);
    font-size: 13px;
    line-height: 20px;
    box-sizing: border-box;
}

.item-sheet .sheet-summary .msg {
    color: #575757;
}

.item-sheet .sheet-summary .payed {
    margin-top: 18px;
    padding-bottom: 22px;
}

.item-sheet .sheet-summary .payed > span {
    white-space: nowrap;
}

.item-sheet .sheet-summary .how {
    margin-right: 30px;
}

.item-sheet .sheet-summary .point {
    color: #000;
}

.item-sheet .sheet-summary .point mark {
    color: #FA4431;
}

@media (max-width: 767px) {
    .item-sheet .sheet-summary {
        width: auto;
        padding-top: 4px;
    }

    .item-sheet .sheet-summary .msg {
        font-size: 12px;
        line-height: 18px;
    }

    .item-sheet .sheet-summary .payed {
        margin-top: 12px;
        padding-bottom: 17px;
    }

    .item-sheet .sheet-summary .payed > span {
        display: block;
    }
}

.item-sheet .sheet-price {
    position: absolute;
    right: 35px;
    top: 50%;
    width: 420px;
    transform: translateY(-50%);
}

.item-sheet .sheet-price ul {
    padding-top: 26px;
}

.item-sheet .sheet-price li {
    position: relative;
    text-align: right;
    line-height: 22px;
}

.item-sheet .sheet-price li h5 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 500;
    color: #000;
    opacity: 0.7;
}

.item-sheet .sheet-price li strong {
    font-size: 18px;
    font-weight: 700;
}

.item-sheet .sheet-price li + li {
    margin-top: 7px;
}

.item-sheet .sheet-price li.total {
    margin-top: 22px;
    border-top: 1px solid #ddd;
    padding: 25px 0 22px;
    line-height: 35px;
}

.item-sheet .sheet-price li.total strong {
    font-size: 28px;
    color: #FA4431;
    line-height: 35px;
}

.item-sheet .sheet-price li.total strong:after {
    content: '원';
    font-size: 18px;
    margin-left: 6px;
}

@media (max-width: 767px) {
    .item-sheet .sheet-price {
        position: static;
        transform: none;
        width: auto;
    }

    .item-sheet .sheet-price li h5 {
        font-size: 14px;
    }

    .item-sheet .sheet-price li + li {
        margin-top: 3px;
    }

    .item-sheet .sheet-price li.total {
        line-height: 25px;
        padding: 16px 0 22px;
    }

    .item-sheet .sheet-price li.total h5 {
        font-size: 14px;
    }

    .item-sheet .sheet-price li.total strong {
        font-size: 20px;
        line-height: 25px;
    }
}

.item-sheet .sheet-goods .cell-item {
    width: 34%;
}

.item-sheet .sheet-goods .cell-options {
    width: 19%;
}

.item-sheet .sheet-goods .cell-price {
    width: 16%;
}

.item-sheet .sheet-goods .cell-btns {
    width: 31%;
}

.item-sheet .sheet-goods dl dt {
    height: 39px;
    background-color: #F9F9F9;
    padding: 0 0 0 35px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 39px;
}

.item-sheet .sheet-goods dl dt .logo {
    display: inline-block;
    width: 27px;
    height: 27px;
    margin-right: 6px;
    border: 1px solid #D4D4D4;
    border-radius: 14px;
    box-sizing: border-box;
    vertical-align: middle;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.item-sheet .sheet-goods dl dd {
    position: relative;
    display: flex;
    align-items: center;
}

.item-sheet .sheet-goods dl dd > div {
    position: relative;
    text-align: center;
    padding: 25px 6px;
    box-sizing: border-box;
    font-size: 15px;
}

.item-sheet .sheet-goods dl dd > div:first-child {
    border-left: none;
}

.item-sheet .sheet-goods dl dd + dd {
    border-top: 1px solid #DDD;
}

.item-sheet .sheet-goods dl .cell-item {
    text-align: left;
    padding-left: 35px;
}

.item-sheet .sheet-goods dl .cell-item .options, .item-sheet .sheet-goods dl .cell-item .price {
    display: none;
}

.item-sheet .sheet-goods dl .cell-btns {
    font-size: 0;
    text-align: right;
    padding-right: 35px;
}

.item-sheet .sheet-goods dl .cell-btns [class*='btnset-'] {
    width: 104px;
    padding: 0;
    margin: 5px 0 5px 10px;
}

.item-sheet .sheet-goods dl + dl {
    border-top: 1px solid #DDD;
}

@media (max-width: 767px) {
    .item-sheet .sheet-goods {
        margin: 0 -18px;
        border-bottom: 1px solid #ddd;
    }

    .item-sheet .sheet-goods .cell-item,
      .item-sheet .sheet-goods .cell-options,
      .item-sheet .sheet-goods .cell-price,
      .item-sheet .sheet-goods .cell-btns {
        width: auto;
    }

    .item-sheet .sheet-goods dl dt {
        padding-left: 18px;
    }

    .item-sheet .sheet-goods dl dd {
        display: block;
        padding: 25px 18px 17px;
    }

    .item-sheet .sheet-goods dl dd > div {
        border-left: none;
        padding: 0;
    }

    .item-sheet .sheet-goods dl .cell-item {
        padding: 0;
    }

    .item-sheet .sheet-goods dl .cell-item .options, .item-sheet .sheet-goods dl .cell-item .price {
        display: block;
    }

    .item-sheet .sheet-goods dl .cell-btns {
        padding-right: 0;
        text-align: left;
        margin-top: 18px;
    }

    .item-sheet .sheet-goods dl .cell-btns [class*='btnset-'] {
        width: 112px;
        margin: 0 8px 8px 0;
    }

    .item-sheet .sheet-goods dl + dl {
        border-color: #F3F3F3;
    }

    .item-sheet .sheet-goods .cell-options, .item-sheet .sheet-goods .cell-price {
        display: none;
    }
}

.sec-my-review .cell-item {
    width: 34%;
}

.sec-my-review .cell-options {
    width: 19%;
}

.sec-my-review .cell-price {
    width: 16%;
}

.sec-my-review .cell-btns {
    width: 31%;
}

.sec-my-review dl dd {
    position: relative;
    display: flex;
    align-items: center;
}

.sec-my-review dl dd > div {
    position: relative;
    text-align: center;
    padding: 25px 6px;
    box-sizing: border-box;
    font-size: 15px;
}

.sec-my-review dl dd > div:first-child {
    border-left: none;
}

.sec-my-review dl dd + dd {
    border-top: 1px solid #DDD;
}

.sec-my-review dl .cell-item {
    text-align: left;
    padding-left: 35px;
}

.sec-my-review dl .cell-item .options, .sec-my-review dl .cell-item .price {
    display: none;
}

.sec-my-review dl .cell-btns {
    font-size: 0;
    text-align: right;
    padding-right: 35px;
}

.sec-my-review dl .cell-btns [class*='btnset-'] {
    width: 104px;
    padding: 0;
    margin: 5px 0 5px 10px;
}

.sec-my-review dl + dl {
    border-top: 1px solid #DDD;
}

.sec-my-review .list-dot {
    border-top: 1px solid #DDD;
    padding-top: 25px;
}

@media (max-width: 767px) {
    .sec-my-review .title-my {
        display: none;
    }

    .sec-my-review .list-dot {
        margin: 0 -18px;
        padding: 20px 18px 0;
    }

    .sec-my-review .cell-item,
  .sec-my-review .cell-options,
  .sec-my-review .cell-price,
  .sec-my-review .cell-btns {
        width: auto;
    }

    .sec-my-review dl {
        margin: 0 -18px;
    }

    .sec-my-review dl dd {
        display: block;
        padding: 22px 18px 17px;
    }

    .sec-my-review dl dd > div {
        border-left: none;
        padding: 0;
    }

    .sec-my-review dl .cell-item {
        padding: 0;
    }

    .sec-my-review dl .cell-item .options, .sec-my-review dl .cell-item .price {
        display: block;
    }

    .sec-my-review dl .cell-btns {
        padding-right: 0;
        padding-left: 91px;
        text-align: left;
        margin-top: 11px;
    }

    .sec-my-review dl .cell-btns [class*='btnset-'] {
        width: 112px;
        margin: 0 8px 8px 0;
    }

    .sec-my-review dl + dl {
        border-color: #F3F3F3;
    }

    .sec-my-review .cell-options, .sec-my-review .cell-price {
        display: none;
    }
}

.sec-my-refund .cell-item {
    width: 34%;
}

.sec-my-refund .cell-options {
    width: 19%;
}

.sec-my-refund .cell-price {
    width: 16%;
}

.sec-my-refund .cell-btns {
    width: 31%;
}

.sec-my-refund dl dd {
    position: relative;
    display: flex;
    align-items: center;
}

.sec-my-refund dl dd > div {
    position: relative;
    text-align: center;
    padding: 25px 6px;
    box-sizing: border-box;
    font-size: 15px;
}

.sec-my-refund dl dd > div:first-child {
    border-left: none;
}

.sec-my-refund dl dd + dd {
    border-top: 1px solid #DDD;
}

.sec-my-refund dl .cell-item {
    text-align: left;
    padding-left: 35px;
}

.sec-my-refund dl .cell-item .options, .sec-my-refund dl .cell-item .price {
    display: none;
}

.sec-my-refund dl .cell-item .msg {
    font-size: 12px;
    line-height: 19px;
    color: #7f7f7f;
    margin-top: 15px;
}

.sec-my-refund dl .cell-btns {
    font-size: 0;
    text-align: right;
    padding-right: 35px;
}

.sec-my-refund dl .cell-btns [class*='btnset-'] {
    width: 104px;
    padding: 0;
    margin: 5px 0 5px 10px;
}

.sec-my-refund dl + dl {
    border-top: 1px solid #DDD;
}

@media (max-width: 767px) {
    .sec-my-refund {
        margin: 0 -18px;
    }

    .sec-my-refund .cell-item,
    .sec-my-refund .cell-options,
    .sec-my-refund .cell-price,
    .sec-my-refund .cell-btns {
        width: auto;
    }

    .sec-my-refund dl dd {
        display: block;
        padding: 25px 18px 17px;
    }

    .sec-my-refund dl dd > div {
        border-left: none;
        padding: 0;
    }

    .sec-my-refund dl .cell-item {
        padding: 0;
    }

    .sec-my-refund dl .cell-item .options, .sec-my-refund dl .cell-item .price {
        display: block;
    }

    .sec-my-refund dl .cell-btns {
        padding-right: 0;
        text-align: left;
        margin-top: 18px;
    }

    .sec-my-refund dl .cell-btns [class*='btnset-'] {
        width: 112px;
        margin: 0 8px 8px 0;
    }

    .sec-my-refund dl + dl {
        border-color: #F3F3F3;
    }

    .sec-my-refund .cell-options, .sec-my-refund .cell-price {
        display: none;
    }
}

.sec-my-refund ~ .sec-guide {
    margin-top: 0;
}

.customer-wrap {
    margin: 0 -65px;
}

.customer-wrap section[class^='sec-'] + section[class^='sec-'] {
    padding-top: 83px;
}

@media (max-width: 767px) {
    .customer-wrap {
        margin: 0 -18px;
        padding-top: 20px;
    }

    .customer-wrap section[class^='sec-'] {
        padding-left: 18px;
        padding-right: 18px;
    }

    .customer-wrap section[class^='sec-'] + section[class^='sec-'] {
        padding-top: 20px;
    }

    .customer-wrap section[class^='sec-']:not(:first-child) {
        border-top: 8px solid rgba(224, 224, 224, 0.2);
    }

    .customer-wrap .sec-notice {
        padding-bottom: 37px;
    }
}

.customer-header {
    background-color: #F9F9F9;
    padding: 41px 0 65px;
}

@media (max-width: 767px) {
    .customer-header {
        background-color: #F3F3F3;
        padding: 0 18px 15px;
    }
}

.customer-header .customer-titles {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.customer-header .customer-titles h1 {
    font-size: 0;
}

.customer-header .customer-titles h1 a {
    display: inline-block;
    width: 175px;
    height: 35px;
    background: url("../../../resource/images/logo-black.svg") 0 0/contain no-repeat;
    line-height: 300px;
    font-size: 0;
    overflow: hidden;
    vertical-align: top;
}

.customer-header .customer-titles h1 strong {
    display: inline-block;
    font-size: 24px;
    line-height: 33px;
    vertical-align: top;
    margin-left: 13px;
}

@media (max-width: 767px) {
    .customer-header .customer-titles {
        margin: 0 -18px;
        padding: 0 18px;
        height: 46px;
        background-color: #fff;
    }

    .customer-header .customer-titles h1 {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .customer-header .customer-titles h1 a {
        width: 129px;
        height: 25px;
    }

    .customer-header .customer-titles h1 strong {
        font-size: 18px;
        line-height: 23px;
        margin-left: 10px;
    }
}

.customer-header .customer-search {
    max-width: 1200px;
    margin: 59px auto 0;
}

.customer-header .customer-search h2 {
    padding-bottom: 6px;
    font-size: 40px;
    line-height: 52px;
    font-weight: 300;
}

.customer-header .customer-search .input-group {
    position: relative;
    height: 73px;
    margin-top: 28px;
}

.customer-header .customer-search .input-group input[type="search"] {
    width: 100%;
    height: 100%;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    padding: 0 28px 0 70px;
    background: #fff;
    border: 1px solid #D6D6D6;
    box-sizing: border-box;
    border-radius: 3px;
}

.customer-header .customer-search .input-group button[type="submit"] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 70px;
    background: url("../../../resource/images/icon-search-input.svg") no-repeat 50% 50%/34px;
}

.customer-header .customer-search .keyword-list {
    position: relative;
    margin-top: 26px;
    padding-left: 155px;
}

.customer-header .customer-search .keyword-list dt {
    position: absolute;
    left: 8px;
    top: 0;
    color: #000;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
}

.customer-header .customer-search .keyword-list dd {
    font-size: 0;
}

.customer-header .customer-search .keyword-list dd a {
    display: inline-block;
    height: 32px;
    padding: 0 8px;
    margin: 0 7px 7px 0;
    background-color: #4D4D4D;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
}

.hoverable .customer-header .customer-search .keyword-list dd a:hover {
    background-color: #FFB800;
}

@media (max-width: 767px) {
    .customer-header .customer-search {
        margin-top: 19px;
    }

    .customer-header .customer-search h2 {
        display: none;
    }

    .customer-header .customer-search .input-group {
        height: 50px;
    }

    .customer-header .customer-search .input-group input[type="search"] {
        font-size: 14px;
        padding: 0 17px 0 44px;
    }

    .customer-header .customer-search .input-group button[type="submit"] {
        width: 44px;
        background-size: 24px;
    }

    .customer-header .customer-search .keyword-list {
        margin-top: 16px;
        padding-left: 0;
    }

    .customer-header .customer-search .keyword-list dt {
        display: none;
    }

    .customer-header .customer-search .keyword-list dd a {
        height: 25px;
        font-size: 13px;
        margin: 0 8px 10px 0;
        line-height: 25px;
        background-color: #fff !important;
        color: #000 !important;
    }
}

.sec-faq p.result {
    padding: 0 30px 43px;
    font-size: 30px;
    line-height: 34px;
    color: #000;
}

.sec-faq p.result strong {
    font-weight: 700;
}

.sec-faq .list-faq {
    color: #303033;
    border-bottom: 1px solid #DDD;
}

.sec-faq .list-faq > li {
    border-top: 1px solid #DDD;
}

.sec-faq .list-faq .toggle-tit {
    position: relative;
    padding: 20px 86px 18px 30px;
    font-size: 18px;
    line-height: 26px;
    cursor: pointer;
}

.sec-faq .list-faq .toggle-tit:after {
    content: '';
    position: absolute;
    right: 40px;
    top: 50%;
    width: 11px;
    height: 6px;
    margin-top: -3px;
    background: url("../../../resource/images/icon-title-toggle.png") 50% 50%/11px 6px no-repeat;
}

.sec-faq .list-faq .toggle-con {
    display: none;
    padding: 45px 40px 62px;
    background-color: #F9F9F9;
    font-size: 18px;
    line-height: 28px;
    border-top: 1px solid #DDD;
    color: rgba(48, 48, 51, 0.8);
}

.sec-faq .list-faq .toggle-con .btns {
    margin-top: 28px;
    font-size: 0;
    line-height: 0;
}

.sec-faq .list-faq .toggle-con .btns a {
    display: inline-block;
    height: 34px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 500;
    line-height: 34px;
    margin-right: 6px;
    box-sizing: border-box;
    border-radius: 17px;
}

.sec-faq .list-faq .toggle-con .btns .btn-detail {
    background-color: #3D3D3D;
    color: #fff;
}

.sec-faq .list-faq .toggle-con .btns .btn-chat {
    background-color: #FFB800;
    color: #000;
}

.sec-faq .list-faq .toggle-tit.open:after {
    transform: scaleY(-1);
}

.sec-faq .list-faq .toggle-tit.open + .toggle-con {
    display: block;
}

@media (max-width: 767px) {
    .sec-faq p.result {
        padding: 0 0 21px;
        font-size: 14px;
        line-height: 19px;
    }

    .sec-faq .list-faq {
        color: #5d5d5d;
        margin: 0 -18px;
        border-bottom: none;
    }

    .sec-faq .list-faq .toggle-tit {
        font-size: 14px;
        line-height: 24px;
        padding: 14px 51px 12px 18px;
    }

    .sec-faq .list-faq .toggle-tit:after {
        right: 18px;
    }

    .sec-faq .list-faq .toggle-con {
        padding: 20px 20px 35px;
        font-size: 14px;
        line-height: 28px;
        color: #7d7d7d;
    }
}

.sec-how .tab-how {
    display: flex;
    align-items: flex-start;
    justify-content: stretch;
    margin: 0 -8px;
}

.sec-how .tab-how li {
    width: 16.666%;
    height: 160px;
    padding: 0 8px;
    box-sizing: border-box;
}

.sec-how .tab-how li a {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
}

.sec-how .tab-how li a:before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    margin: 39px auto 10px;
    background-position: 50% 0;
    background-size: 50px auto;
    background-repeat: no-repeat;
}

.hoverable .sec-how .tab-how li a:hover, .sec-how .tab-how li a.current {
    background-color: #FFB800;
    border-color: #FFB800;
    color: #fff;
}

.hoverable .sec-how .tab-how li a:hover:before, .sec-how .tab-how li a.current:before {
    background-position: 50% -50px;
}

.sec-how .tab-how li:nth-child(1) a:before {
    background-image: url("../../../resource/images/icon-how-01.png");
}

.sec-how .tab-how li:nth-child(2) a:before {
    background-image: url("../../../resource/images/icon-how-02.png");
}

.sec-how .tab-how li:nth-child(3) a:before {
    background-image: url("../../../resource/images/icon-how-03.png");
}

.sec-how .tab-how li:nth-child(4) a:before {
    background-image: url("../../../resource/images/icon-how-04.png");
}

.sec-how .tab-how li:nth-child(5) a:before {
    background-image: url("../../../resource/images/icon-how-05.png");
}

.sec-how .tab-how li:nth-child(6) a:before {
    background-image: url("../../../resource/images/icon-how-06.png");
}

.sec-how .terms-con {
    padding: 40px 0 0;
}

@media (max-width: 767px) {
    .sec-how {
        padding-bottom: 37px;
    }

    .sec-how .tab-how {
        flex-wrap: wrap;
        margin: 0 -6px;
    }

    .sec-how .tab-how li {
        width: 33.333%;
        height: 72px;
        padding: 0 6px;
    }

    .sec-how .tab-how li a {
        font-size: 12px;
        line-height: 20px;
    }

    .sec-how .tab-how li a:before {
        width: 30px;
        height: 30px;
        margin: 11px auto 4px;
        background-size: 30px auto;
    }

    .hoverable .sec-how .tab-how li a:hover, .sec-how .tab-how li a.current {
        background-color: #F3F3F3;
        border-color: #ddd;
        color: #000;
    }

    .hoverable .sec-how .tab-how li a:hover:before, .sec-how .tab-how li a.current:before {
        background-position: 50% 0;
    }

    .sec-how .tab-how li:nth-child(n+4) {
        margin-top: 11px;
    }

    .sec-how .terms-con {
        padding: 20px 0 0;
    }
}

.sec-noti {
    position: relative;
}

.sec-noti .btn-more {
    position: absolute;
    right: 18px;
    top: 85px;
    font-size: 14px;
    line-height: 34px;
    opacity: 0.7;
    color: #000;
}

.sec-noti .list a {
    position: relative;
    display: block;
    padding: 0 93px 0 30px;
    height: 66px;
    border-top: 1px solid #DDD;
    color: #303033;
    box-sizing: border-box;
}

.sec-noti .list a > strong {
    display: block;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 65px;
}

.sec-noti .list a > em {
    position: absolute;
    right: 15px;
    top: 50%;
    opacity: 0.8;
    transform: translateY(-50%);
}

@media (max-width: 767px) {
    .sec-noti .btn-more {
        right: 18px;
        top: 20px;
    }

    .sec-noti .list {
        margin: 0 -18px;
    }

    .sec-noti .list a {
        height: auto;
        padding: 9px 18px;
        color: #7d7d7d;
    }

    .sec-noti .list a > strong {
        display: block;
        font-size: 14px;
        line-height: 28px;
    }

    .sec-noti .list a > em {
        position: static;
        display: block;
        font-size: 14px;
        line-height: 28px;
        transform: none;
    }
}

/* layer each */
.layer-popup-pwd .pwd-result {
    text-align: center;
}

.layer-popup-pwd .pwd-result strong {
    display: block;
    font-weight: 600;
    font-size: 24px;
    word-break: break-all;
}

@media (max-width: 767px) {
    .layer-popup-pwd .pwd-result strong {
        padding-bottom: 13px;
    }
}

.layer-popup-id .id-result {
    text-align: center;
}

.layer-popup-id .id-result strong {
    display: block;
    font-weight: 600;
    font-size: 24px;
    word-break: break-all;
}

@media (max-width: 767px) {
    .layer-popup-id .id-result strong {
        padding-bottom: 13px;
    }
}

.layer-popup-folder .basic-regist {
    margin-top: 10px;
}

.layer-popup-wish .wish-wrap .opt-box-wrap {
    position: relative;
    height: 212px;
    border: 1px solid #D4D4D4;
    box-sizing: border-box;
    border-radius: 3px;
}

.layer-popup-wish .wish-wrap .opt-box-wrap .fake-scroll-track {
    transition: opacity 0.2s;
}

.layer-popup-wish .wish-wrap .opt-box {
    position: relative;
    height: 100%;
    padding: 19px 32px 19px 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

.layer-popup-wish .wish-wrap .opt-box.no-scroll-bar {
    padding-right: 0;
}

.layer-popup-wish .wish-wrap .opt-box a {
    display: block;
    min-height: 40px;
    padding: 13px 26px 12px;
    font-size: 14px;
    line-height: 15px;
    font-weight: 500;
    color: #000;
    box-sizing: border-box;
    transition: color 0.2s, background-color 0.2s;
}

.hoverable .layer-popup-wish .wish-wrap .opt-box a:not(.selected):hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.layer-popup-wish .wish-wrap .opt-box a.selected {
    background-color: #000;
    color: #FFB800;
}

.layer-popup-wish .wish-wrap .basic-regist {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .layer-popup-wish .wish-wrap .opt-box-wrap {
        height: 170px;
    }

    .layer-popup-wish .wish-wrap .opt-box {
        padding: 17px 0 17px 0;
    }
}

.layer-page-photoreview > .title {
    display: none;
}

.layer-page-photoreview .content {
    height: calc(100% - 46px);
    padding: 0;
}

.layer-page-photoreview .photoreview-slider {
    height: 100%;
    overflow: visible !important;
}

.layer-page-photoreview .photoreview-slider .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 1;
}

.layer-page-photoreview .photoreview-wrapper {
    min-height: 100%;
}

.layer-page-photoreview .photoreview-slide {
    padding: 18px 18px 20px;
    box-sizing: border-box;
}

.layer-page-photoreview .photoreview-slide .item-photo {
    position: relative;
    padding-top: 100%;
    border-radius: 3px;
    overflow: hidden;
}

.layer-page-photoreview .photoreview-slide .item-photo .swiper-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.layer-page-photoreview .photoreview-slide .item-photo .swiper-container .swiper-slide {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    background-color: #F3F3F3;
}

.layer-page-photoreview .photoreview-slide .item-product {
    min-height: 108px;
    padding: 11px 9px 9px 108px;
    margin-top: 25px;
    border-radius: 3px;
    background-color: #F5F5F5;
    box-sizing: border-box;
}

.layer-page-photoreview .photoreview-slide .item-product figure {
    top: 9px;
    left: 9px;
    width: 90px;
    height: 90px;
}

.layer-page-photoreview .photoreview-slide .item-review {
    margin-top: 20px;
}

.layer-popup-photoreview {
    width: 940px;
    padding-top: 33px;
}

.layer-popup-photoreview .title {
    font-size: 24px;
    text-align: left;
    line-height: 24px;
}

.layer-popup-photoreview .content {
    padding-top: 5px;
}

.layer-popup-photoreview .photoreview-wrap {
    position: relative;
    padding-left: 505px;
    margin-top: 5px;
    min-height: 480px;
}

.layer-popup-photoreview .photoreview-wrap .photo-detail-slider {
    position: absolute;
    left: 0;
    top: 8px;
    width: 480px;
}

.layer-popup-photoreview .photoreview-wrap .photo-detail-slider .slide figure {
    display: inline-block;
    width: 480px;
    height: 480px;
    border-radius: 3px;
    background-color: #F5F5F5;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.layer-popup-photoreview .photoreview-wrap .photo-detail-slider [class*="swiper-button-"] {
    position: absolute;
    left: 22px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 16px;
    text-indent: -5000px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    background-color: rgba(212, 212, 212, 0.2);
}

.layer-popup-photoreview .photoreview-wrap .photo-detail-slider [class*="swiper-button-"]:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 9px;
    background: url("../../../resource/images/arr-photodetail.png") 50% 50%/contain no-repeat;
}

.layer-popup-photoreview .photoreview-wrap .photo-detail-slider [class*="swiper-button-"].swiper-button-next {
    left: auto;
    right: 22px;
}

.layer-popup-photoreview .photoreview-wrap .photo-detail-slider [class*="swiper-button-"].swiper-button-next:after {
    transform: translate(-50%, -50%) scaleX(-1);
}

.layer-popup-photoreview .photoreview-wrap .item-review {
    padding: 0;
    margin-top: -8px;
}

.layer-popup-photoreview .photoreview-wrap .item-review .scroll-wrap {
    position: relative;
    height: 243px;
}

.layer-popup-photoreview .photoreview-wrap .item-review .scroll-wrap .con {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}

.layer-popup-photoreview .photoreview-wrap .item-review .scroll-wrap .fake-scroll-track {
    right: -15px;
    top: 3px;
    height: calc(100% - 6px);
}

.layer-popup-photoreview .photoreview-wrap .item-review.no-product-info .scroll-wrap {
    height: 370px;
}

.layer-popup-photoreview .photoreview-wrap .item-product {
    min-height: 108px;
    text-align: left;
    padding: 11px 9px 9px 108px;
    margin-top: 20px;
    border-radius: 3px;
    background-color: #F5F5F5;
    box-sizing: border-box;
}

.layer-popup-photoreview .photoreview-wrap .item-product figure {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 90px;
    height: 90px;
    padding: 0;
}

.layer-popup-photoreview .photoreview-wrap .item-product .brand {
    margin-top: 0;
}

.layer-popup-photoreview .photoreview-wrap .item-product .name {
    margin-left: 0;
    margin-right: 0;
}

.layer-popup-photoreview .photoreview-wrap.loading:before,
    .layer-popup-photoreview .photoreview-wrap.loading .photo-detail-slider,
    .layer-popup-photoreview .photoreview-wrap.loading .item-review {
    visibility: hidden;
}

.item-goods-mini {
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
}

.item-goods-mini figure {
    width: 70px;
    padding-right: 12px;
}

.item-goods-mini figure img {
    display: block;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
    border: 1px solid #F3F3F3;
}

.item-goods-mini .text {
    flex: 1;
}

.item-goods-mini .text .brand {
    max-height: 36px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    line-height: 18px;
    display: block;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-goods-mini .text .name {
    max-height: 36px;
    font-size: 14px;
    line-height: 18px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.item-goods-mini .text .price {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    line-height: 18px;
    display: inline-block;
    margin: 6px 4px 0 0;
}

.item-goods-mini .text .price:after {
    font-size: 14px;
    font-weight: 700;
    content: '원';
    line-height: 18px;
    vertical-align: top;
    margin-left: 2px;
    display: inline-block;
}

.item-goods-mini .text .price.sale {
    color: #FA4431;
}

.item-goods-mini .text .original-price {
    font-size: 14px;
    color: #A5A5A5;
    line-height: 18px;
    font-weight: 700;
    display: inline-block;
}

.item-goods-mini .text .original-price:after {
    font-size: 13px;
    font-weight: 700;
    content: '원';
}

.item-goods-mini .text .msg {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #00BA88;
    margin-bottom: -8px;
}

.item-goods-mini .btn-bag {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    font-weight: 700;
    color: #FFB800;
}

.item-goods-mini.done .text .price, .item-goods-mini.done .text .original-price {
    display: block;
}

@media (max-width: 767px) {
    .item-goods-mini figure {
        width: 60px;
    }

    .item-goods-mini .text .msg {
        margin-bottom: -6px;
    }

    .item-goods-mini.done .btn-bag {
        top: 50%;
        transform: translateY(-50%);
    }
}

.layer-popup-share .item-goods-mini {
    margin-bottom: 14px;
}

.layer-popup-share .item-goods-mini .brand, .layer-popup-share .item-goods-mini .name {
    white-space: normal;
}

.layer-popup-share .share-list a {
    position: relative;
    display: block;
    height: 47px;
    padding-left: 33px;
    border-bottom: 1px solid #F3F3F3;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 400;
    line-height: 46px;
}

.layer-popup-share .share-list a:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.layer-popup-share .share-list a.copy:after {
    background-image: url("../../../resource/images/icon-share-copy.png");
}

.layer-popup-share .share-list a.kakao:after {
    background-image: url("../../../resource/images/icon-share-kakao.png");
}

.layer-popup-share .share-list a.facebook:after {
    background-image: url("../../../resource/images/icon-share-facebook.png");
}

.layer-popup-shopping-bag {
    width: 550px;
}

.layer-popup-shopping-bag .content {
    padding-top: 15px;
}

.layer-popup-shopping-bag .recommend-goods {
    position: relative;
    margin: 11px -45px 0;
    padding: 0 45px 40px;
    overflow: hidden;
}

.layer-popup-shopping-bag .recommend-goods h6 {
    font-size: 15px;
    font-weight: 700;
    line-height: 26px;
    padding: 21px 0 18px;
    border-top: 1px solid #f3f3f3;
}

.layer-popup-shopping-bag .recommend-goods ul {
    white-space: nowrap;
    font-size: 0;
}

.layer-popup-shopping-bag .recommend-goods li {
    display: inline-block;
    width: 150px;
    white-space: normal;
    vertical-align: top;
}

.layer-popup-shopping-bag .recommend-goods .swiper-button-prev, .layer-popup-shopping-bag .recommend-goods .swiper-button-next {
    position: absolute;
    top: 16px;
    bottom: auto;
    display: block;
    width: 30px;
    height: 30px;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
}

.layer-popup-shopping-bag .recommend-goods .swiper-button-prev:before, .layer-popup-shopping-bag .recommend-goods .swiper-button-next:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 8px;
    height: 12px;
    background: url("../../../resource/images/btn-page-prev.png") no-repeat;
    background-size: 100%;
    opacity: 0.4;
}

.layer-popup-shopping-bag .recommend-goods .swiper-button-prev[class*='-next']:before, .layer-popup-shopping-bag .recommend-goods .swiper-button-next[class*='-next']:before {
    transform: translate(-50%, -50%) scaleX(-1);
}

.hoverable .layer-popup-shopping-bag .recommend-goods .swiper-button-prev:hover:before, .hoverable .layer-popup-shopping-bag .recommend-goods .swiper-button-next:hover:before {
    opacity: 1;
}

.layer-popup-shopping-bag .recommend-goods .swiper-button-prev {
    left: auto;
    right: calc(45px + 29px);
}

.layer-popup-shopping-bag .recommend-goods .swiper-button-next {
    left: auto;
    right: 45px;
}

.layer-popup-shopping-bag .recommend-goods .swiper-button-next:before {
    transform: scaleX(-1);
}

.layer-popup-shopping-bag .recommend-goods .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: 14px;
}

.layer-popup-shopping-bag .recommend-goods .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
}

.layer-popup-shopping-bag .recommend-goods .swiper-pagination .swiper-pagination-bullet:before {
    width: 10px;
    height: 10px;
    background-color: #C4C4C4;
}

.layer-popup-shopping-bag .recommend-goods .swiper-pagination .swiper-pagination-bullet-active:before {
    background-color: #000;
}

@media (max-width: 767px) {
    .layer-popup-shopping-bag .recommend-goods {
        padding-bottom: 0;
    }

    .layer-popup-shopping-bag .recommend-goods h6 {
        font-size: 14px;
        padding: 17px 0 15px;
    }

    .layer-popup-shopping-bag .recommend-goods .swiper-button-prev, .layer-popup-shopping-bag .recommend-goods .swiper-button-next, .layer-popup-shopping-bag .recommend-goods .swiper-pagination {
        display: none;
    }
}

.layer-popup-review-end mark {
    color: #00BA88;
    font-weight: 700;
}

.layer-popup-review-end p + p {
    margin-top: 25px;
}

.set-attach {
    font-weight: 400;
}

.set-attach .desc {
    margin-top: 10px;
}

.set-attach .desc li {
    position: relative;
    font-size: 12px;
    line-height: 18px;
    padding-left: 7px;
    color: #898a8d;
}

.set-attach .desc li:before {
    content: '-';
    position: absolute;
    left: 0;
    top: 0;
}

.set-attach .files {
    margin-top: 20px;
}

.set-attach .files .list {
    margin-top: 28px;
    font-size: 0;
}

.set-attach .files .list li {
    position: relative;
    display: inline-block;
    margin-right: 8px;
}

.set-attach .files .list li figure {
    width: 62px;
    height: 62px;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #D8D8D8;
    background-image: url("../../../resource/images/default-null.png");
    border-radius: 3px;
}

.set-attach .files .list li .btn-attach-del {
    position: relative;
    display: block;
    width: 100%;
    height: 24px;
    font-size: 0;
    line-height: 0;
    text-indent: -5000px;
    overflow: hidden;
    margin-top: 8px;
}

.set-attach .files .list li .btn-attach-del:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    background: url("../../../resource/images/icon-attach-del.png") 50% 50%/contain no-repeat;
}

.layer-page-review .item {
    margin: 0 -18px;
    padding: 18px;
    border-bottom: 1px solid #DDD;
}

.layer-page-review .point {
    height: 100px;
    margin-top: 39px;
}

.layer-page-review .point h6 {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.layer-page-review .point .starpoint {
    position: relative;
    margin-top: 8px;
}

.layer-page-review .point .starpoint .star {
    position: absolute;
    left: 50%;
    top: 0;
    width: 235px;
    height: 35px;
    margin-left: 6px;
    font-size: 0;
    transform: translateX(-50%);
}

.layer-page-review .point .starpoint .star input {
    position: static;
    width: 47px;
    height: 35px;
    opacity: 0.5;
    cursor: pointer;
}

.layer-page-review .point .starpoint .star .stars {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 35px;
    background: url("../../../resource/images/star-35-gray.png") repeat-x 0 0/auto 35px;
    pointer-events: none;
}

.layer-page-review .point .starpoint .star .stars .on {
    width: 0;
    background-image: url("../../../resource/images/star-35-pink.png");
}

.layer-page-review .point .starpoint .star input[value="1"]:checked ~ .stars .on {
    width: calc(47px * 1);
}

.layer-page-review .point .starpoint .star input[value="2"]:checked ~ .stars .on {
    width: calc(47px * 2);
}

.layer-page-review .point .starpoint .star input[value="3"]:checked ~ .stars .on {
    width: calc(47px * 3);
}

.layer-page-review .point .starpoint .star input[value="4"]:checked ~ .stars .on {
    width: calc(47px * 4);
}

.layer-page-review .point .starpoint .star input[value="5"]:checked ~ .stars .on {
    width: calc(47px * 5);
}

.layer-page-review .point .starpoint .star .text {
    display: block;
    width: 100%;
    margin-top: 13px;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    line-height: 23px;
    color: #FA4431;
    text-align: center;
}

.layer-page-review .point .starpoint .star input:checked ~ .text:before {
    display: inline-block;
    font-weight: 700;
    margin-right: 6px;
}

.layer-page-review .point .starpoint .star input:checked ~ .text:after {
    display: inline-block;
}

.layer-page-review .point .starpoint .star input[value="1"]:checked ~ .text:before {
    content: '1점';
}

.layer-page-review .point .starpoint .star input[value="2"]:checked ~ .text:before {
    content: '2점';
}

.layer-page-review .point .starpoint .star input[value="3"]:checked ~ .text:before {
    content: '3점';
}

.layer-page-review .point .starpoint .star input[value="4"]:checked ~ .text:before {
    content: '4점';
}

.layer-page-review .point .starpoint .star input[value="5"]:checked ~ .text:before {
    content: '5점';
}

.layer-page-review .point .starpoint .star input[value="1"]:checked ~ .text:after {
    content: '(별로예요)';
}

.layer-page-review .point .starpoint .star input[value="2"]:checked ~ .text:after {
    content: '(그저 그래요)';
}

.layer-page-review .point .starpoint .star input[value="3"]:checked ~ .text:after {
    content: '(괜찮아요)';
}

.layer-page-review .point .starpoint .star input[value="4"]:checked ~ .text:after {
    content: '(좋아요)';
}

.layer-page-review .point .starpoint .star input[value="5"]:checked ~ .text:after {
    content: '(최고예요)';
}

.layer-page-review .review {
    margin-top: 30px;
}

.layer-page-review .review textarea {
    width: 100%;
    height: 192px;
}

.layer-page-review .review .limit {
    font-size: 10px;
    font-weight: 500;
    color: #A5A5A5;
    text-align: right;
}

.layer-page-review .review .limit mark {
    color: #000;
}

.layer-page-review .single {
    margin-top: 6px;
}

.layer-page-review .single select {
    width: 100%;
}

.layer-page-review .weight {
    position: relative;
    margin-top: 26px;
}

.layer-page-review .weight h6 {
    position: absolute;
    left: 0;
    line-height: 44px;
}

.layer-page-review .weight ul {
    font-size: 0;
    margin: 0 -3px;
}

.layer-page-review .weight ul li {
    position: relative;
    display: inline-block;
    width: 50%;
    padding: 0 3px;
    box-sizing: border-box;
}

.layer-page-review .weight ul li input[type='text'] {
    width: 100%;
}

.layer-page-review .weight ul li .unit {
    position: absolute;
    right: 0;
    width: 33px;
    font-size: 14px;
    font-weight: 500;
    line-height: 44px;
    color: #e4e4e4;
}

.layer-page-review .set-attach {
    margin-top: 42px;
}

@media (max-width: 767px) {
    .layer-page-review .review-wrap {
        margin-top: -35px;
    }
}

.layer-page-address .regist {
    font-size: 0;
    margin-top: -15px;
}

.layer-page-address .regist > li {
    position: relative;
}

.layer-page-address .regist > li input[type='text'], .layer-page-address .regist > li select, .layer-page-address .regist > li textarea {
    width: 100%;
}

.layer-page-address .regist > li .f-zipcode [class^='btnf-'] {
    border-radius: 0;
}

.layer-page-address .regist > li .msg-code {
    padding: 8px 0;
    color: #5489F0;
    font-size: 12px;
    line-height: 20px;
}

.layer-page-address .regist > li + li {
    padding-top: 20px;
}

@media (min-width: 768px) {
    .layer-page-address .regist {
        margin-top: 25px;
    }

    .layer-page-address .regist .title-field {
        font-size: 12px;
        line-height: 14px;
        padding-bottom: 7px;
    }

    .layer-page-address .regist > li > input[type='text'], .layer-page-address .regist > li > select {
        width: 354px;
    }

    .layer-page-address .regist > li .f-hp {
        width: 366px;
    }

    .layer-page-address .regist > li .f-zipcode {
        width: 354px;
    }

    .layer-page-address .regist > li .msg-code {
        font-size: 13px;
    }
}

.layer-popup-cancel {
    text-align: center;
}

.layer-popup-cancel p {
    line-height: 30px;
}

.layer-popup-cancel p mark {
    color: #FA4431;
}

.layer-popup-cancel p + p {
    margin-top: 15px;
}

@media (max-width: 767px) {
    .layer-popup-cancel p {
        line-height: 23px;
    }
}

.layer-popup-refund p {
    line-height: 30px;
}

.layer-popup-refund p mark {
    color: #FA4431;
}

.layer-popup-refund p + p {
    margin-top: 15px;
}

@media (max-width: 767px) {
    .layer-popup-refund p {
        line-height: 23px;
    }
}

.layer-popup-edit-pwd .pwd-result {
    text-align: center;
}

.layer-popup-edit-pwd .pwd-result strong {
    display: block;
    font-weight: 600;
    font-size: 24px;
    word-break: break-all;
}

@media (max-width: 767px) {
    .layer-popup-edit-pwd .pwd-result strong {
        padding-bottom: 13px;
    }
}

.layer-popup-card {
    width: 430px;
}

.layer-popup-card .card-install {
    margin-top: 10px;
}

.layer-popup-card .card-install .title {
    border: none;
}

.layer-popup-card .card-install .content {
    padding: 0;
}

.layer-popup-card .card-install .list-data {
    margin-top: 12px;
}

.layer-popup-card .card-install .list-dot {
    margin-top: 22px;
}

.layer-popup-airfare {
    width: 430px;
}

.layer-popup-airfare .airfare-info {
    margin-top: 10px;
}

.layer-popup-airfare .airfare-info .list-data {
    margin-top: 12px;
}

.layer-popup-airfare .msg {
    padding: 20px 0 0;
    font-size: 13px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.7);
}

.layer-popup-folderselect {
    width: 414px;
}

.layer-popup-folderselect .content {
    padding: 30px 0;
}

.layer-popup-folderselect .folder-select a {
    position: relative;
    display: block;
    padding-left: 61px;
    font-size: 18px;
    color: #000;
    font-weight: 400;
    line-height: 45px;
}

.layer-popup-folderselect .folder-select a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 45px;
    height: 45px;
    background-color: #c4c4c4;
    transform: translateY(-50%);
}

.layer-popup-folderselect .folder-select .list a + a, .layer-popup-folderselect .folder-select .btn-add {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .layer-popup-folderselect .content {
        padding: 27px 0;
    }

    .layer-popup-folderselect .folder-select a {
        padding-left: 57px;
        line-height: 36px;
        font-size: 15px;
    }

    .layer-popup-folderselect .folder-select a:before {
        width: 36px;
        height: 36px;
    }

    .layer-popup-folderselect .folder-select .list a + a, .layer-popup-folderselect .folder-select .btn-add {
        margin-top: 34px;
    }
}

.layer-popup-wish-ordering .store-header.store-header-light .gnb a.add {
    right: 6px;
}

.layer-popup-wish-ordering .title {
    display: none;
}

@media (min-width: 768px) {
    .body-policy .store-contents {
        padding-left: 0;
        padding-right: 0;
    }
}

.terms-head {
    text-align: center;
    padding: 10px 0 30px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.57;
}

.terms-head h3 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 4px;
}

@media (max-width: 767px) {
    .terms-head {
        padding: 50px 0 35px;
        font-size: 12px;
        line-height: 18px;
    }

    .terms-head h3 {
        font-size: 24px;
        line-height: 29px;
        margin-bottom: 8px;
    }
}

.terms-con {
    font-size: 14px;
    font-weight: 300;
    line-height: 18px;
}

.terms-con .caption {
    display: block;
    padding-bottom: 34px;
    text-align: center;
}

.terms-con .title-b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    margin: 42px 0 14px;
}

.terms-con .title-m {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 26px;
    margin: 16px 0 8px;
}

.terms-con table {
    width: 100%;
    margin-top: 24px;
}

.terms-con thead th {
    font-size: 12px;
    font-weight: 700;
    background-color: #f9f9f9;
    border: 1px solid #dddddd;
    line-height: 16px;
    padding: 13px 0 11px;
    box-sizing: border-box;
}

.terms-con tbody td {
    font-size: 12px;
    padding: 10px 15px;
    line-height: 14px;
    border: 1px solid #dddddd;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .terms-con {
        font-size: 12px;
        line-height: 18px;
    }

    .terms-con .title-b {
        font-size: 18px;
        line-height: 26px;
        margin: 38px 0 8px;
    }

    .terms-con .title-m {
        font-size: 14px;
        line-height: 26px;
        margin: 16px 0 4px;
    }

    .terms-con table {
        margin-top: 17px;
    }

    .terms-con thead th,
      .terms-con tbody td {
        font-size: 10px;
        line-height: 14px;
    }
}

.board-hgroup {
    display: flex;
    height: 42px;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    box-sizing: border-box;
    background-color: #f9f9f9;
    align-items: center;
}

.board-hgroup [class^='cell-'] {
    font-size: 14px;
    font-weight: 300;
    color: #303033;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .board-hgroup {
        display: none;
    }
}

.board-list .cell-idx {
    width: 180px;
}

.board-list .cell-tit {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-list .cell-date {
    width: 213px;
}

.board-list .list a {
    display: flex;
    padding: 15px 0 13px;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #E5E5E5;
    font-size: 18px;
    color: #7d7d7d;
}

@media (max-width: 767px) {
    .board-list .cell-idx {
        display: none;
    }

    .board-list .cell-tit {
        display: block;
        line-height: 1.86;
        font-weight: 700;
    }

    .board-list .cell-date {
        display: block;
        font-size: 14px;
        margin-top: 4px;
    }

    .board-list .list {
        margin: 0 -18px;
        border-top: 1px solid #E5E5E5;
    }

    .board-list .list a {
        display: block;
        padding: 19px 18px;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        line-height: 28px;
    }
}

.board-detail {
    border-bottom: 1px solid #E5E5E5;
}

.board-detail header {
    position: relative;
    padding: 40px 217px 35px 35px;
    font-size: 24px;
    line-height: 32px;
    color: #000;
    background-color: #F9F9F9;
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

.board-detail header em {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 57px;
    color: rgba(0, 0, 0, 0.8);
}

.board-detail .content {
    padding: 35px 35px 40px 35px;
    font-size: 16px;
    line-height: 32px;
    color: #7d7d7d;
}

@media (max-width: 767px) {
    .board-detail header {
        font-size: 14px;
        padding: 19px 12px;
        line-height: 28px;
        color: rgba(0, 0, 0, 0.8);
    }

    .board-detail header h4 {
        font-weight: 700;
    }

    .board-detail header em {
        position: static;
        display: block;
        font-size: 14px;
        margin-top: 4px;
        transform: none;
    }

    .board-detail .content {
        padding: 30px 12px 33px;
        font-size: 14px;
        line-height: 28px;
    }
}

.board-btns {
    margin-top: 20px;
}

.board-btns .btn-list {
    width: 160px;
}

@media (max-width: 767px) {
    .board-btns {
        margin-top: 30px;
    }

    .board-btns .btn-list {
        width: 100%;
    }
}

.wap-qr{float:right;}
.wap-qr img{max-width:72px;}

@media (max-width: 767px) {
    .wap-qr {
        display:none;
    }
}
.layadmin-takerates{padding-top: 0;}
.layadmin-takerates .layui-progress{margin: 50px 0 60px;}
.layadmin-takerates .layui-progress:last-child{margin-bottom: 10px;}
.layadmin-takerates .layui-progress h3{position: absolute; right: 0; top: -35px; color: #999; font-size: 14px;}
.layadmin-takerates .layui-progress-bar{text-align: left;}
.layadmin-takerates .layui-progress-text{top: -35px; line-height: 26px; font-size: 26px;}

/*优惠套餐销售*/
.od-bundling-container { background: #FFF; height: 194px; position: relative; z-index: 1; overflow: hidden;}
.od-bundling-container .F-center { height: 194px; position:relative;}
.od-bundling-container .F-prev { background: #FFF url(../images/shop/bundling.gif) no-repeat scroll 0px -460px ; display: block; width: 156px; height: 20px; position: absolute; z-index: auto; top: 0; right: 0; cursor: pointer;}
.od-bundling-container .F-prev:hover { background-position: 0 -410px;}
.od-bundling-container .F-next:hover { background-position: 0 -430px;}
.od-bundling-container .F-next { background: #FFF url(../images/shop/bundling.gif) no-repeat scroll 0px -480px; width: 160px; height: 20px;position: absolute; z-index: auto; right: 0; bottom: 0; cursor: pointer;}
.od-bundling-list { display: block; width: 740px; height: 194px; float: left; overflow: hidden;}
.od-bundling-container ul { background: url(../images/shop/bundling.gif) repeat-x -60px 0; font-size: 0; *word-spacing:-1px/*IE6、7*/; display: block; width: 800px; margin: 15px 0 0 0;}
.od-bundling-container ul li { font-size: 12px; vertical-align: top; letter-spacing: normal; word-spacing: normal; display: inline-block; *display: inline/*IE7*/; width:100px; padding:0; margin: 0 60px 0 0; *zoom: 1; }
.od-bundling-container .items-thumb,
.od-combo-container. items-thumb { background-color: #FFF; width:100px; height: 100px;}
.od-bundling-container .items-thumb a,
.od-combo-container .items-thumb a { line-height: 0; background-color: #FFF; text-align: center; vertical-align: middle; display: table-cell; *display: block; width: 100px; height: 100px; overflow: hidden;}
.od-bundling-container .items-thumb img,
.od-combo-container .items-thumb img { max-width: 100px; max-height: 100px; margin-top:expression(100-this.height/2); *margin-top:expression(50-this.height/2);}
.od-bundling-container dl { display:block; padding: 0; margin: 4px 0 0 0;}
.od-bundling-container dl dt { line-height: 24px; text-overflow: ellipsis; white-space: nowrap; width: 100px; height: 24px; overflow:hidden;}
.od-bundling-container dl dt a { color: #555;}
.od-bundling-container dl dd { line-height: 16px; color: #999; white-space: nowrap; text-overflow: ellipsis; width: 155px; overflow: hidden;}
.od-bundling-container dl dd .o-price { text-decoration: line-through;}
.od-bundling-container dl dd .b-price { font-weight: 600; color: #d4000a;}
.od-bundling-price { color: #777; background: url(../images/shop/bundling.gif) no-repeat 0 -220px; display: block; width: 130px; float: left; padding: 0 0 0 70px; margin: 15px 0 0 0;}
.od-bundling-price dl { color: #999; }
.od-bundling-price dt { font-weight: 600;}
.od-bundling-price dd { }
.od-combo-container,
.combo-items-list ul { font-size: 0; *word-spacing:-1px/*IE6、7*/;}
.od-combo-container { height: 194px;}
.od-combo-container .default-items,
.od-combo-container .combo-items-list,
.od-combo-container .combo-price,
.combo-items-list li { font-size: 12px; vertical-align: top; letter-spacing: normal; word-spacing: normal; display: inline-block; *display: inline/*IE7*/; width: 100px; *zoom: 1; }
.od-combo-container .default-items { background: url(../images/shop/bundling.gif) no-repeat 100px 0 ; padding: 0 60px 0 0; margin-top: 15px;}
.combo-items-list li { background: url(../images/shop/bundling.gif) no-repeat 0 0 ; padding: 0 0 0 60px;}
.combo-items-list .combo-items-first { position: -60px 0; padding: 0;}
.od-combo-container .combo-items-list { width: 580px; margin-top: 15px; overflow-x: scroll;}
.combo-items-list ul { white-space: nowrap;}
.od-combo-container dl { display: block; width: 100px; margin-top: 8px;}
.od-combo-container dl dt { line-height: 16px; white-space: normal; display: block; height: 32px; margin-bottom: 2px; overflow: hidden;}
.od-combo-container dl dd { line-height: 20px; font-weight: 600; color: #00a1e8;}
.od-combo-container dl dd .checkbox { vertical-align: middle; margin-right: 4px;}
.od-combo-container .combo-price { color: #777; background: url(../images/shop/bundling.gif) no-repeat 0 -220px; width: 150px; padding: 0 0 0 70px; margin: 15px 0 0 0;}
.od-combo-container .combo-price dl { width: 150px;}
.od-combo-container .combo-price dd { font-weight: normal; color: #999; }

.product-tags em{width:auto !important; display:table; padding:3px 12px;}
/* 弹出面板 */
.layui-layer-admin .layui-layer-title{height: 50px; line-height: 50px; border: none 0; background-color: #20222A; color: #fff;}
.layui-layer-admin i[close]{position: absolute; padding: 5px; right: 10px; top: 12px; color: #fff; cursor: pointer;}
.layui-layer-admin .layui-layer-content{padding: 20px; line-height: 22px;}
.layui-layer-admin .layui-layer-content cite{font-style: normal; color: #FF5722;}

/* 右侧面板 */
.layui-layer-adminRight{top: 50px !important; bottom: 0; box-shadow: 1px 1px 10px rgba(0,0,0,.1); border-radius: 0; overflow: auto;}

/* 弹出便签 */
.layadmin-note .layui-layer-content{padding: 0;}
.layadmin-note textarea{display: block; width: 300px; height: 132px; min-width: 300px; min-height: 132px; line-height: 20px; padding: 10px 20px; border: none; box-sizing: border-box; color: #666; word-wrap: break-word;}
.layui-layer-setwin .layui-layer-close1{color:#FFF !important;}

/* page */
.pagination{margin:0 auto; text-align:center;}
/*
.layui-form input[type='text']{
    height:38px;
    border:1px solid #e6e6e6;
}
*/
.layui-form input[type="text"][readonly]{
    border:1px solid #000;

}

/* onedepth tab */
.layui-tab-brief .layui-tab-title{
  border:none;
}
.layui-tab-brief > .layui-tab-title .layui-this::after, .layui-tab-brief > .layui-tab-more li.layui-this::after{
  border-color:#000;
}
.layui-tab-brief > .layui-tab-title .layui-this{
  color:#000;
}
.layui-tab-brief .layui-tab-title li{
  display: inline-block;
  margin-right: 26px;
  font-size: 20px;
  line-height: 52px;
  text-align:left;
  padding:0;
  font-weight: 700;
  color: rgba(137, 138, 141, 0.4);
}
.layui-tab-brief .layui-tab-content{
  padding:25px 0;
}

.layui-tab .scrollable li {
  margin:0;
  display: inline-block;
  width: auto;
  padding: 0 10px;
  height: 100%;
  box-shadow: inset 0 0 0 1px #000;
  margin-left: -1px;
  font-size: 14px;
  line-height: 44px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}
.layui-tab .scrollable li.layui-this {
  background-color: #000;
  color: #fff;
}

/* pagenation */
.layui-laypage .layui-laypage-curr .layui-laypage-em{background: #333;}

/* front table */
.layui-table-header,.layui-table-view{border-bottom-width:0; border:none;}
.layui-table{color:#000;}
.layui-table-header{border-top:3px solid #000;}

.layui-table-view .layui-table-body .layui-table[lay-size="lg"] .layui-table-cell{
  font-size: 18px;
  font-weight: 500;
}
.layui-table-header .layui-table th{
  font-size: 15px;
  font-weight: 700;
  line-height: 54px;
}
.layui-table-view .layui-table td{padding:15px 0;}
legend{position:relative; left:0;}
.layui-table-cell{height:auto !important;}

.layui-form-checked, .layui-form-checked:hover{border-color: #FA4431;}
.layui-form-checked span, .layui-form-checked:hover span{background:#FA4431;}
.layui-form-checked i, .layui-form-checked:hover i{color: #FA4431;}
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #FA4431; color: #fff;}
.layui-form-checked[lay-skin="primary"] i{border-color: #FA4431 !important; background-color: #FA4431; color: #fff;}
.select-title{border-color:#000;}
input[type="text"], input[type="number"], input[type="password"]{border-color: #000;text-indent: 7px;}


/* popup */
.pop-header{margin:0 auto; max-height:calc(100% - 10px);padding:0 32px 32px; text-align:center;}
.pop-header h5{font-size: 30px; font-weight: 700; line-height: 1; text-align: center;}
.pop-header .content{font-size: 18px; line-height: 35px; padding: 22px 0 0;}
.pop-header .btn-box{display:flex; margin:60px -5px 0;}
.pop-header .btn-box button{width:100%; margin:0 5px;}
.pop-header #oreason{margin-top:5px;}
.pop-header li{margin-bottom:12px;}
.pop-header .title-field{font-size: 12px;
line-height: 14px;
padding-bottom: 7px; text-align:left; font-weight:400;}

.padding-btn-box button, .padding-btn-box a{padding:0 60px;}

.layui-card-header{font-weight: 700; font-size:16px;}
.layui-form-label{
    width: 100%;
    text-align: left;
    padding: 5px 0;
    font-size: .8em;
}
.layui-form-select{text-align:left;}
.layui-input.layui-unselect{background:#FFF !important;}

.layui-layer-title{font-size: 30px !important; font-weight: 700 !important; line-height: 50px !important; text-align: center; background:transparent !important; color:#000 !important; padding:0 !important;}