/* BASIC css start */
/***************/
/**** Font. ****/
/***************/
@font-face {
    font-family: 'Nanum Barun Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothic.eot);
    src: local('Nanum Barun Gothic'), local('NanumBarunGothic'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothic.eot?#iefix) format('embedded-opentype'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothic.woff2) format('woff2'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothic.woff) format('woff'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothic.ttf) format('truetype');
}

@font-face {
    font-family: 'Nanum Barun Gothic';
    font-style: normal;
    font-weight: 600;
    src: url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothicBold.eot);
    src: local('Nanum Barun Gothic Bold'), local('NanumBarunGothicBold'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothicBold.woff2) format('woff2'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothicBold.woff) format('woff'), url(http://www.sonatural.co.kr/design/sona6769/fonts/NanumBarunGothicBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

/****************/
/**** Reset. ****/
/****************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

audio, canvas, progress, video {
    display: inline-block
}

fieldset,img {
    border: 0 none
}

dl,ul,ol,menu,li {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:before, blockquote:after,q:before, q:after {
    content: '';
    content: none
}

input,select,textarea,button {
    font-size: 100%;
    vertical-align: middle;
    /*-webkit-appearance:none*/
}

select {
    background-color: #fff
}

textarea {
    -webkit-appearance: none;
    border-radius: 0
}

button {
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
    overflow: hidden
}

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

body {
    -webkit-text-size-adjust: none
}

input[type='text'],input[type='password'],input[type='submit'],input[type='search'],input[type='number'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border-radius: 0;
    box-shadow: 0 0 0 0 transparent inset;
    transition: color .1s ease, border-color .1s ease
}

input[type='checkbox'] {
    background-color: #fff;
}

/* input:checked[type='checkbox']{background-color:#666;-webkit-appearance:none} */
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {
    -webkit-appearance: none;
    border-radius: 0
}

input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none
}

input[type="date"] {
    text-align: center;
    appearance: none;
    -webkit-appearance: none
}

input[type="date"]:invalid::-webkit-datetime-edit {
    color: #bbb
}

input[type="date"]::-webkit-clear-button {
    display: none
}

input[type="date"]::-webkit-inner-spin-button {
    display: none
}

input[type="date"]::-webkit-calendar-picker-indicator {
    color: #2c3e50
}

input[type='date']::-webkit-search-cancel-button {
    -webkit-appearance: none
}

/* html{-ms-content-zooming:none;-ms-touch-action:pan-x pan-y} */
body,th,td,input,select,textarea,button {
    font-size: 12px;
    line-height: 14px;
    font-family: 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif;
    color: #000
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    color: #000;
    text-decoration: none
}

a:active, a:hover {
    text-decoration: none
}

address,caption,cite,code,dfn,em,var {
    font-style: normal;
    font-weight: normal
}

a, abbr, address, article, aside, audio, b, blockquote, body, br, button, canvas, caption, cite, code, col, data, datalist, dd, del, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, main, mark, meter, nav, object, ol, output, p, pre, progress, q, s, samp, section, select, small, span, strong, sub, sup, table, td, textarea, th, time, u, ul, var, video {
    box-sizing: border-box
}

i {
    font-style: normal
}

a, button {
    /*-webkit-tap-highlight-color:transparent;*/
    position: relative
}

iframe {
    width: 100%;
    overflow-x: hidden
}

strong, b {
    font-weight: 500;
}

*::-webkit-input-placeholder {
    color: #999 !important
}

*:-moz-placeholder {
    color: #999 !important
}

*::-moz-placeholder {
    color: #999 !important
}

*:-ms-input-placeholder {
    color: #999 !important
}

/***************/
/**** Base. ****/
/***************/
/* --- Dom --- */
html {
    overflow-y: scroll
}

body {
    overflow-y: hidden;
    background-color: transparent;
    font: 12px/18px 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif;
    word-spacing: -1px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none
}

html.is-popup {
    overflow-y: hidden;
    height: 100vh
}

body.inactive {
    visibility: hidden;
    overflow: hidden
}

html, body {
    overflow-x: hidden;
    position: relative;
    min-width: 320px;
    /*max-width:1024px;*/
    min-height: 100vh;
    margin-right: auto;
    margin-left: auto
}

/* html{-ms-touch-action:none} */
html.mode-locked {
    overflow: hidden !important;
    height: 100% !important;
    min-width: inherit;
    min-height: inherit;
    max-width: inherit
}

html.mode-locked body {
    overflow: hidden !important;
    height: 100% !important;
    min-width: inherit;
    min-height: inherit;
    max-width: inherit
}

html.mode-locked2 {
    overflow: hidden !important;
    height: 100% !important;
    min-width: inherit;
    min-height: inherit;
    max-width: inherit
}

html.mode-locked2 body {
    overflow: hidden !important;
    min-width: inherit;
    min-height: inherit;
    max-width: inherit
}

#sn-wrap {
    width: 100%;
    min-width: 320px
}

.component {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
    min-width: 320px;
    font-weight: 300;
}

.component::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.component .area-table {
    display: table;
    width: 100%;
    height: 100%
}

.component .area-table .area-cell {
    display: table-cell;
    vertical-align: middle
}

#dim {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    z-index: 1600;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background-color: rgba(0,0,0,.75);
    transition: all .5s ease-in-out
}

#dim.is-visible {
    visibility: visible;
    opacity: 1
}

body.mode-locked #bobaeWrap {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

/* --- Container --- */
.section {
    position: relative;
    padding: 0 25px 40px
}

.section + .section, form + .section {
    border-top: 1px solid rgba(48,48,48,0.3)
}

.section.fitted {
    padding: 0 25px
}

.section::after {
    content: '';
    display: block;
    clear: both
}

.section-header {
    padding: 30px 0
}

.section-header .title {
    font-weight: 600;
    font-size: 16px
}

.vertical-segment {
    position: relative;
    padding-top: 30px;
    border-top: 1px solid rgba(48,48,48,0.3)
}

/*****************/
/**** Global. ****/
/*****************/
/* --- Layout ::Box --- */
.clearfix {
    display: block
}

.clearfix:after {
    content: '';
    display: block;
    clear: both
}

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

.ellipsis {
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    word-break: break-all
}

.mode-table {
    position: relative;
    display: table;
    width: 100%;
    table-layout: fixed
}

.mode-cell {
    position: relative;
    display: table-cell
}

.area-table {
    display: table;
    width: 100%;
    height: 100%
}

.area-table .area-cell {
    display: table-cell;
    vertical-align: middle
}

/* --- Text ::color --- */
.pink {
    color: #f00
}

.black {
    color: #303030
}

.gray {
    color: #757575
}

.light-gray {
    color: #999
}

.white {
    color: #757575
}

/* --- Text ::size --- */
.text-body {
    font-size: 12px
}

.text-title {
    font-size: 14px
}

.text-sub-title {
    font-size: 16px
}

/* --- Text ::style --- */
.text-underline {
    text-decoration: underline
}

.text-underline:hover {
    text-decoration: underline
}

.guide-text {
    color: rgba(136,136,136,1)
}

.text-notice {
    position: relative;
    padding-left: 15px
}

.text-notice::before {
    content: '¡Ø';
    position: absolute;
    left: 0
}

.sn-myeongjo {
    font-family: 'Nanum Myeongjo'
}

/* --- Text ::align --- */
.align-center {
    text-align: center
}

.align-left {
    text-align: left
}

.align-right {
    text-align: right
}

.vertical-top {
    vertical-align: top
}

.vertical-middle {
    vertical-align: middle
}

.vertical-bottom {
    vertical-align: bottom
}

/* --- Image --- */
.img-box {
    position: relative;
    display: inline-block
}

.img-box img {
    width: 100%;
    height: auto
}

/* --- Link --- */
.nav-link {
    position: relative;
    display: inline-block;
    font-size: 13px;
    font-weight: 300;
}

.nav-link.underline {
}

.nav-link.underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background-color: rgba(48,48,48,1)
}

.nav-link.icon {
    padding-right: 34px;
    line-height: 24px
}

.nav-link.icon::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/arrow_g.svg);
    background-size: 24px
}

.nav-link.icon.w::after {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/arrow_w.svg);
    background-color: transparent !important
}

/* --- UI --- */
.ui-section {
    position: relative;
    padding: 5% 5%
}

.ui-header {
    position: relative;
    padding-left: 25px;
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 16px
}

.ui-header::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    height: 2px;
    width: 15px;
    background-color: #303030
}

.ui-header span {
    font-weight: normal;
    font-size: 12px
}

.ui-segment + .ui-segment {
    padding-top: 30px
}

/* --- Tab Menu --- */
.page-navigation {
    position: relative;
    height: 60px
}

.page-navigation::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    border-top: 1px solid rgba(48,48,48,0.3)
}

.page-navigation .navi-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
}

.page-navigation .navi-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page-navigation .navi-wrapper::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.page-navigation .navi-item {
    display: block;
    position: relative;
    float: left;
    padding-right: 20px;
    padding-left: 20px
}

.page-navigation .navi-item a {
    display: block;
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 13px;
    line-height: 20px;
    color: #757575;
    font-weight: 300;
    text-transform: uppercase;
}

.page-navigation .navi-item.is-selected a {
    color: #303030
}

.page-navigation .navi-item.is-selected a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    border-top: 2px solid #303030
}

.page-navigation + .component {
    margin-top: 40px
}

/* .secondary-menu{position:relative;margin-bottom:40px} */
.secondary-menu {
    position: relative
}

.secondary-menu .menu-wrapper {
    display: flex;
    position: relative
}

.secondary-menu .menu-item .menu-link {
    display: block;
    color: #303030;
    font-size: 13px
}

.secondary-menu .menu-item .menu-link::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 2px solid transparent
}

.secondary-menu .menu-item.is-selected .menu-link {
    color: #303030
}

.secondary-menu .menu-item.is-selected .menu-link::after {
    border-bottom-color: #303030
}

.secondary-menu.divided .menu-wrapper {
    display: flex;
    height: 36px;
    justify-content: space-around
}

.secondary-menu.divided .menu-wrapper::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 0;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.secondary-menu.divided .menu-item .menu-link::after {
    border-bottom-width: 3px
}

/* .secondary-menu.divided .menu-item{flex-shrink:1;flex-grow:1;text-align:center} */
.secondary-menu.divided .menu-item {
    flex: 1;
    text-align: center
}

.secondary-menu.divided .menu-item .menu-link {
    padding-top: 7px;
    padding-bottom: 9px;
    font-weight: 300;
    line-height: 20px;
}

.secondary-menu.divided + .sub-menu {
    padding-top: 35px
}

.sub-menu .secondary-menu.fitted {
    display: none
}

.sub-menu .secondary-menu.fitted.is-selected {
    display: block
}

.secondary-menu.fitted {
    padding-bottom: 30px
}

.secondary-menu.fitted .menu-wrapper {
    justify-content: space-around
}

.secondary-menu.fitted .menu-link {
    display: inline-block;
    padding: 0 4px 5px;
    border-bottom: 2px solid transparent;
    font-weight: 600;
    line-height: 18px
}

.secondary-menu.divided #guest-menu.menu-wrapper {
    height: auto
}

.secondary-menu.divided #guest-menu .menu-item .menu-link {
    display: flex;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center
}

/* --- Buttons --- */
.sn-button {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #303030;
    padding: 0 1em;
    color: #303030;
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 16px
}

.sn-button.mini {
    height: 20px;
    line-height: 20px;
    font-size: 12px
}

.sn-button.tiny {
    height: 30px;
    line-height: 30px;
    font-size: 11px;
    font-weight: bold
}

.sn-button.small {
    height: 40px;
    line-height: 40px;
    font-size: 12px
}

.sn-button.medium {
    height: 50px;
    line-height: 50px;
    font-size: 16px
}

.sn-button.primary {
    background-color: #303030;
    color: #fff
}

.sn-button.direct {
    background-color: #dd426f;
    color: #fff;
    border-color: #dd426f
}

.sn-button.disabled {
    opacity: 0.2
}

.sn-button.is-selected {
    opacity: 0.4
}

.sn-option {
    padding-bottom: 20px
}

.option-list {
    display: flex;
    flex-wrap: wrap;
    margin-right: -1px;
    margin-left: -1px;
    padding-top: 25px;
    flex-wrap: wrap
}

.option-list .option-item {
    width: 33.3%;
    padding: 1px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 40px
}

.option-list .option-item a {
    display: block;
    border: 1px solid #303030
}

.option-list .option-item.is-selected a {
    background-color: #303030;
    color: #fff
}

.button-wrapper {
    position: relative
}

.button-wrapper + .button-wrapper {
    margin-top: 5px
}

.button-wrapper .sn-button {
    width: 100%;
    font-weight: 600
}

.button-wrapper .sn-button.kp {
    background-color: #fbe300;
    border-color: #fbe300;
    color: #303030
}

.button-wrapper .sn-button + .sn-button {
    margin-top: 5px
}

.button-wrapper.divided {
    display: flex;
    flex-grow: row wrap;
    justify-content: space-between
}

.button-wrapper.divided .sn-button {
    flex-grow: 1;
    margin-left: 5px
}

.button-wrapper.divided .sn-button:first-child:is(:hidden) + .sn-button {
    margin-left: 0
}

.button-wrapper.divided .sn-button + .sn-button {
    margin-top: 0
}

.button-wrapper.divided .sn-button:first-child {
    margin-left: 0
}

.button-wrapper.fitted {
    justify-content: flex-end
}

.button-wrapper.divided.fitted {
    margin-left: 2.5px;
    padding-left: 50%
}

#page-address-manage .button-wrapper.divided.fitted {
    margin-left: 0;
    padding-left: 0
}

.button-wrapper.fitted .sn-button {
    flex-basis: 0
}

/* .button-wrapper.fitted .sn-button:first-child{margin-right:auto;flex-grow:3;margin-right:3%} */
.sn-button[data-wide="3"] {
}

/* --- List --- */
.list-bulleted {
    position: relative
}

.list-bulleted .item {
    position: relative;
    padding-left: 12px;
    font-size: 12px
}

.list-bulleted .item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 4px;
    height: 4px;
    border: 1px solid #757576;
    border-radius: 50%
}

.list-bulleted .item + .item {
    margin-top: 4px
}

.sn-list-summary {
    position: relative;
    padding-bottom: 40px;
    text-align: center
}

.sn-list-content {
    position: relative
}

.sn-list-content .list-item {
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.sn-list-content .list-item {
}

.sn-pagination {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 40px 0;
    text-align: center
}

.sn-pagination .item {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    height: 30px;
    font-weight: 400
}

.sn-pagination .item span {
    position: relative;
    display: inline-block;
    line-height: 30px;
    font-size: 22px
}

.sn-pagination .item.icon {
    width: 30px;
    margin: 0 15px;
    padding: 0;
    border: 1px solid #303030
}

.sn-pagination .item.is-current span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #303030
}

.sn-pagination .chevron {
    position: absolute;
    top: 50%;
    margin-top: -4px;
    display: block;
    width: 9px;
    height: 9px;
    text-indent: -9999em;
    border: solid #303030
}

.sn-pagination .chevron.left {
    left: 50%;
    margin-left: -2px;
    border-width: 1px 0 0 1px;
    transform: rotate(-45deg)
}

.sn-pagination .chevron.right {
    right: 50%;
    margin-right: -2px;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg)
}

.sn-swiper-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%
}

.sn-swiper-wrapper {
    position: absolute;
    width: 100%;
    height: 100%
}

.sn-swiper-item {
    overflow: hidden;
    position: relative;
    float: left;
    width: 100%;
    height: 100%
}

.sn-swiper-item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}

.sn-swiper-pagination {
    display: block;
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 6px;
    padding-right: 20px;
    padding-left: 20px;
    justify-content: center;
    box-sizing: border-box
}

.sn-swiper-pagination li {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: #303030;
    -webkit-transition: all 180ms ease-in-out;
    opacity: 0.5;
    float: left;
}

.sn-swiper-pagination li + li {
    margin-left: 4px
}

.sn-swiper-pagination li.is-selected {
    width: 18px;
    opacity: 1
}

.sn-swiper-pagination.w li {
    background-color: #fff
}

/* --- Section --- */
.section {
    position: relative;
    padding: 0 25px 40px
}

.section + .section {
    border-top: 1px solid rgba(48,48,48,.2)
}

.section.fitted {
    padding: 0 25px
}

.section::after {
    content: '';
    display: block;
    clear: both
}

.section-header {
    padding: 30px 0
}

.section-header .title {
    font-weight: 600;
    font-size: 16px
}

.vertical-segment {
    position: relative;
    padding-top: 30px;
    border-top: 1px solid rgba(48,48,48,.2)
}

/****************/
/**** Forms. ****/
/****************/
/* --- Form layout ::option --- */
.form-fields {
    position: relative
}

.form-fields + .form-fields {
    padding-top: 50px
}

.form-fields.divider {
    padding-top: 40px;
    border-top: 1px solid rgba(48,48,48,.2);
    margin-top: 40px
}

.form-fields.view-mode .form-field {
    padding-top: 0
}

.form-field {
    position: relative
}

.form-field::after {
    content: '';
    clear: both;
    display: block
}

.form-field .form-label {
    float: left;
    width: 100px
}

.form-field .form-label.whole {
    width: 100%
}

.form-field .form-content {
    float: left;
    width: calc(100% - 100px)
}

.page-order .form-field .form-content:first-child {
    padding-left: 100px
}

.form-field .form-content.whole {
    width: 100%;
    padding-top: 10px
}

.form-field + .form-field {
    padding-top: 20px
}

.form-field .form-notice {
    padding-top: 10px
}

.form-field.email {
}

.form-field.email .form-row .form-input {
    width: 70%
}

.form-field.email .form-row .form-input:first-child::after {
    content: '@';
    position: absolute;
    top: 9px;
    right: -20px;
    margin-left: 0;
    width: 20px;
    text-align: center
}

.form-field.email .form-row .form-input + .form-input,.form-field.email .form-row .form-select {
    padding-left: 20px
}

.form-field.phone .form-select select, .form-field.phone .form-input input {
    text-align: center
}

.form-field .form-input.zipcode {
    background-color: #f7f7f7;
    display: flex
}

.form-field.buttons {
    padding-top: 30px !important
}

.form-field.shipping-list .form-row + .form-row {
    margin-top: 5px
}

.form-field.shipping-list .form-row .form-check.radio {
    flex: 1
}

.form-field.shipping-list .form-row .form-button {
    flex: 0;
    flex-basis: 110px
}

.find-id .notice, .find-pw .notice {
    padding-top: 20px
}

.id_confirm {
    line-height: 20px;
    padding-bottom: 20px
}

.find-pw .form-field .form-content {
    display: flex
}

.find-pw .form-field .form-content .form-button {
    padding-left: 14px
}

.form-field .form-add {
    clear: both;
    padding-top: 10px
}

.form-field .form-button {
    width: 120px
}

/* --- Form layout ::between --- */
.form-field.between {
    position: relative;
    margin-left: -20px
}

.form-field.between .form-input, .form-field.between .form-select {
    flex: 0 1 50%
}

.form-field.between .form-input, .form-field.between .form-select {
    padding-left: 20px
}

.form-field.between::after {
    position: absolute;
    top: 9px;
    left: 50%;
    margin-left: 0;
    width: 20px;
    text-align: center;
    content: counters(between, ".") " ";
    counter-increment: between;
    pointer-events: none;
    user-select: none
}

.form-field.between::after {
    content: attr(value)
}

.form-field.type-high .form-option label {
    height: 46px;
    padding-top: 14px
}

/* --- Form layout ::between --- */
.form-row.type-horizontality {
    position: relative
}

.form-row.type-horizontality .form-title {
    float: left;
    width: 20%;
    letter-spacing: -0.05em
}

.form-row.type-horizontality .form-field {
    float: left;
    width: 80%
}

.form-row::after {
    content: '';
    clear: both;
    display: block
}

.form-row + .form-row {
    margin-top: 10px
}

.form-row div[class^="form-"] + div[class^="form-"] {
    padding-left: 14px
}

.form-range {
    width: 100%;
    padding: 0 20px
}

.form-container {
    position: relative
}

.form-fields {
}

.form-field {
    position: relative
}

.form-label {
}

.form-label label {
    height: 30px;
    line-height: 30px;
    font-size: 13px
}

.form-content {
    width: 100%
}

.form-row {
    display: flex
}

.form-etc {
    clear: both;
    padding-top: 10px
}

/* --- input :text --- */
.form-input {
    position: relative;
    display: inline-block;
    width: 100%
}

/* .form-input input{position:relative;display:inline-block;width:100%;height:30px;line-height:30px;padding:0 0 0 2px;border:none;border-bottom:1px solid rgba(40,40,40,.2);border-radius:0;letter-spacing:-0.04em} */
.form-input input {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
    border: none;
    border-bottom: 1px solid rgba(40,40,40,.2);
    border-radius: 0;
    letter-spacing: -0.04em
}

.form-input input::-webkit-input-placeholder {
    color: rgba(153,153,153,1)
}

/* --- input :labeled --- */
.form-input.labeled {
}

.form-input.labeled input {
    text-align: left
}

.form-input.labeled::after {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 42px;
    text-align: right;
    line-height: 30px;
    color: rgba(117,117,117,1);
    content: counters(labeled, ".") " ";
    counter-increment: labeled;
    pointer-events: none;
    user-select: none
}

.form-input.labeled::after {
    content: attr(value)
}

/* --- input :textarea --- */
.form-textarea {
    position: relative;
    display: inline-block;
    width: 100%
}

.form-textarea textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    line-height: 1.4;
    padding: 7px;
    border: 1px solid #ccc;
    font-size: 12px;
    resize: none
}

.form-textarea textarea::-webkit-input-placeholder {
    color: rgba(48,48,48,.8)
}

/* --- input :file --- */
.form-file {
    position: relative;
    display: flex;
    width: 100%
}

/* .form-file label{position:relative;display:inline-block;width:100%;height:30px} */
.form-file input[type=file] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.form-file input[type=text] {
    position: relative;
    display: inline-block;
    width: calc(100% - 90px);
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 7px;
    border: none;
    border-bottom: 1px solid rgba(40,40,40,.2);
    border-radius: 0
}

.form-file input::-webkit-input-placeholder {
    color: rgba(153,153,153,1)
}

.form-file label {
    position: relative;
    width: 90px;
    height: 30px;
    background-color: #303030;
    color: #fff;
    line-height: 30px;
    text-align: center
}

.form-file a {
    position: absolute;
    display: none;
    overflow: hidden;
    right: 90px;
    top: 0;
    width: 30px;
    height: 30px;
    text-indent: -9999px
}

.form-file a span {
    overflow: hidden;
    display: block;
    width: 10px;
    height: 10px;
    margin: 10px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close.svg);
    background-size: 10px 10px;
    opacity: 0.5
}

.form-file.active a {
    display: block
}

/* --- input :value --- */
.form-value {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 7px;
    min-height: 30px;
    font-size: 13px
}

/* --- input :select --- */
.form-select {
    position: relative;
    display: inline-block;
    width: 100%
}

.form-select select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 7px;
    border: none;
    border-bottom: 1px solid rgba(40,40,40,.2);
    background: #fff;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-select::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    margin-top: -6px;
    width: 5px;
    height: 5px;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.form-select select:required:invalid {
    color: #bbb
}

.form-select option {
    color: #333
}

/* --- input :checkbox --- */
.form-check {
    position: relative;
    display: inline-block;
    margin-right: 30px;
    padding-left: 25px;
    padding-top: 6px;
    padding-bottom: 6px
}

.form-check:last-child {
    margin-right: 0
}

.form-check input {
    position: absolute;
    left: 0;
    top: 6px;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border: 1px solid rgba(48,48,48,.2);
    border-radius: 2px;
    background-color: #fff;
    -webkit-appearance: none;
    vertical-align: top
}

#page-wish-list .product-name br {
    display: none
}

.form-check input::after {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -1px;
    width: 18px;
    height: 18px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_check.svg);
    background-size: 18px 18px;
    opacity: 0
}

.form-check input:checked {
}

.form-check input:checked::after {
    opacity: 1
}

.form-check input:checked::before {
    z-index: 5;
    content: ''
}

.form-check input + label {
    position: relative;
    display: block
}

.form-check input:disabled + label {
    color: #bbb
}

.form-check + .form-check {
    padding-left: 25px !important
}

.form-check.radio input {
    border-radius: 50%
}

.form-check.radio input::after {
    background-image: none;
    background-color: #303030
}

.form-check.radio input:checked::after {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%
}

.form-check .guide-text {
    padding-top: 8px;
    color: rgba(117,117,117,1);
    line-height: 1.4
}

/* --- input :button --- */
.form-button {
    position: relative;
    display: inline-block;
    width: 100%
}

.form-button button {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 38px;
    border: 1px solid #ccc;
    padding-left: 7px;
    background-color: #fff;
    text-align: left;
    font-size: 14px;
    color: #333
}

.form-button.is-disabled button {
    color: #bbb
}

.form-button .sn-button {
    width: 100%
}

/* --- input state :disable --- */
.form-select select:disabled {
    border-color: #f7f7f7;
    background-color: #f7f7f7;
    color: #777
}

.form-input input:disabled {
    border-color: #f7f7f7;
    background-color: #f7f7f7;
    color: #bbb
}

.form-input input:read-only {
    border-color: #f7f7f7;
    background-color: #f7f7f7;
    color: #757575
}

.form-field.shipping-list .form-check.radio {
    white-space: nowrap
}

.form-field.shipping-list .form-button {
    width: 100%
}

#page-checkout form {
    border-top: 1px solid rgba(48, 48, 48, .2)
}

.section.disabled {
    display: none
}

/* --- button type --- */
.section.is-fold {
    padding-bottom: 0 !important
}

.section.is-fold > * {
    display: none
}

.section.is-fold > .section-header,.section.is-fold > .btn-fold {
    display: block !important
}

.btn-fold {
    position: absolute;
    top: 20px;
    right: 15px;
    display: inline-block;
    padding: 10px;
    line-height: 0
}

.btn-fold span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 1px solid #303030;
    border-right: 1px solid #303030;
    transform: rotate(-45deg);
    -webkit-transition: all 200ms ease-in-out
}

.section.is-fold .btn-fold span {
    transform: rotate(135deg)
}

.page-container {
    position: relative;
    padding-bottom: 30px
}

#page-private-write.page-container {
    padding-bottom: 0
}

#page-private-write .sn-board-write {
    padding-bottom: 60px
}

/* [class^='icon-']{background-color:#f1f1f1;display:inline-block} */
[class^='icon-'] {
    display: inline-block
}

.sn-quantity {
}

.sn-quantity input {
    text-align: center
}

.divided-top {
    position: relative;
    padding: 40px 25px 0;
    border-top: 1px solid rgba(48,48,48,0.3)
}

.divided-bottom {
    position: relative;
    padding: 0 25px 40px;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.accordion-content {
    display: none
}

/****************/
/**** Board. ****/
/****************/
/* --- Board :common --- */
.board-none {
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center
}

.none-desc {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px
}

.sn-board-list .title, .sn-board-view .title {
    flex: 1;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    word-break: break-all
}

.sn-board-list .writer, .sn-board-view .writer {
    width: 20%;
    text-align: center
}

.sn-board-list .status, .sn-board-view .status {
    width: 20%
}

.sn-board-list .date, .sn-board-view .date {
    width: 80px;
    text-align: right
}

.sn-board-list .admin, .sn-board-view .admin, .sn-board-list .write {
    display: inline-block;
    width: 38px;
    height: 16px;
    text-indent: -9999em;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/logo-admin.svg);
    background-size: 38px 16px
}

.sn-board-list .item-inner .reply {
    width: 35px
}

.board-head, .board-summary, .board-list .item-inner {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center
}

/* --- Board :list --- */
.sn-board-list {
}

.sn-board-list .board-list {
}

.sn-board-list .board-list .list-item {
    border-bottom: 1px solid rgba(48,48,48,.2)
}

.sn-board-list .board-list .list-item.pin * {
    color: #dd426f
}

.sn-board-list .list-item.private .title .ellipsis {
    position: relative;
    padding-right: 15px;
    vertical-align: top
}

.sn-board-list .list-item.private .title .ellipsis::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    width: 8px;
    height: 12px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/lock_g.png);
    background-size: 8px 12px
}

.sn-board-list .list-item.private.reply .title .ellipsis::after {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/lock_b.png)
}

.sn-board-list .list-item.reply .reply, .sn-board-list .list-item.reply .title {
    font-weight: bold
}

.sn-board-list .board-list .icon.private {
    display: inline-block;
    background-color: #f1f1f1
}

.sn-board-list .board-list.accordion {
}

.sn-board-list .board-list.accordion .list-item {
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.sn-board-list .board-list.accordion .accordion-summary {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #757575;
    font-size: 12px;
    letter-spacing: -0.5px;
    line-height: 20px
}

/* .sn-board-list .board-head, .board-summary,.sn-board-list .board-list .item-inner{height:inherit} */
.sn-board-list .board-list.accordion.arrow .accordion-summary {
    padding-right: 24px
}

.sn-board-list .board-list.accordion.arrow .accordion-summary::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -4px;
    width: 5px;
    height: 5px;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.sn-board-list .board-list.accordion.arrow .list-item.is-selected .accordion-summary::after {
    transform: rotate(135deg);
    -webkit-transform: rotate(315deg)
}

.sn-board-list .board-list.accordion .accordion-content {
    border-bottom: 1px solid #303030;
    margin-bottom: -1px
}

.sn-board-list .board-list.accordion .accordion-content {
    padding-left: 20%
}

.sn-board-list .board-list.accordion.faq .accordion-content {
    padding-left: 0
}

.sn-board-list .board-list.accordion .accordion-content .quest {
    padding-bottom: 30px
}

.sn-board-list .board-list.accordion .accordion-content .answer {
    padding-bottom: 30px
}

.sn-board-list .board-list.accordion .accordion-content .answer a {
    word-break: break-word
}

.sn-board-list .board-list.accordion .accordion-content .accordion-button {
    padding-bottom: 30px
}

.sn-board-list .board-list.accordion.faq .accordion-content .answer {
    padding-top: 30px
}

.sn-board-list .board-list.accordion .accordion-content .answer .header {
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: bold
}

.sn-board-list .board-list.accordion .list-item.is-selected .accordion-summary {
    border-top: 1px solid #303030;
    margin-top: -1px;
    color: #303030
}

.sn-board-list .board-list.accordion.faq .list-item.is-selected .accordion-summary {
    border-top: none;
    margin-top: 0
}

.sn-board-list .board-list.accordion.faq .list-item.is-selected .accordion-content {
    border-top: 1px solid #303030;
    margin-top: -1px
}

.sn-board-list .board-list.accordion .list-item.is-selected .accordion-content {
    display: block
}

.board-under {
    padding-top: 30px
}

.consult-wanna {
    padding-top: 20px;
    padding-bottom: 20px;
    color: #303030;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px
}

.sn-board-list .sn-board-search {
    position: relative
}

.sn-board-list .sn-board-search .form-select {
    width: 80px
}

.sn-board-list .sn-board-search .form-input {
    flex: 1
}

.sn-board-list .sn-board-search .form-button {
    width: 22%;
    max-width: 86px;
    padding-left: 0 !important
}

.sn-board-list .board-button {
    margin-top: 40px
}

.so-ad-container .sn-board-search {
    position: relative
}

.so-ad-container .sn-board-search .form-select {
    width: 80px
}

.so-ad-container .sn-board-search .form-input {
    flex: 1
}

.so-ad-container .sn-board-search .form-button {
    width: 22%;
    max-width: 86px;
    padding-left: 0 !important
}

.so-ad-container .board-button {
    margin-top: 40px
}

/* --- Board :view --- */
.sn-board-view {
}

.sn-board-view .board-head {
}

.sn-board-view .board-summary {
    border-bottom: 1px solid rgba(48,48,48,.2)
}

.sn-board-view .board-content {
    position: relative;
    padding: 20px 0 40px
}

.board-button + .board-paddle-post {
    margin-top: 40px
}

.board-util + .board-paddle-post {
    margin-top: 40px
}

.board-paddle-post {
    position: relative
}

.board-paddle-post .nav-post {
    display: flex
}

.board-paddle-post .nav-post span {
    display: inline-block
}

.board-paddle-post .nav-post .name {
    width: 55px;
    font-weight: 600
}

.board-paddle-post .nav-post .published + span {
    padding-left: 6px
}

.board-paddle-post .next-post {
    padding-bottom: 20px
}

.board-paddle-post .prev-post {
    padding-top: 20px;
    border-top: 1px solid rgba(48,48,48,.2)
}

.sn-board-view .board-button .button-wrapper + .button-wrapper {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid rgba(48,48,48,0.3)
}

.id_udf_popresult {
    border-top: 1px solid rgba(48,48,48,0.3)
}

.id_udf_popresult .vertical-segment {
    padding-bottom: 30px
}

/* --- Board :write --- */
.sn-board-write {
    padding-top: 40px
}

.sn-board-write .form-fields {
    padding-bottom: 30px
}

/* --- Button Type --- */
.btn-fold {
    position: absolute;
    top: 27px;
    right: 15px;
    width: 27px;
    height: 25px;
    display: inline-block;
    padding: 10px;
    line-height: 0
}

.btn-fold span {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-top: 1px solid #303030;
    border-right: 1px solid #303030;
    transform: rotate(-45deg)
}

/*****************/
/**** Layout. ****/
/*****************/
.sn-body {
    position: relative; 
}

/* --- Header --- */
.sn-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 90px
}

.sn-header .sn-logo {
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -40px;
    text-align: center
}

.sn-header .sn-logo a {
    position: relative;
    display: inline-block;
    z-index: 1000
}

.sn-header .sn-logo span {
    overflow: hidden;
    display: inline-block;
    width: 80px;
    height: 60px;
    line-height: 60px;
    text-indent: -9999px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_logo.svg);
    background-repeat: no-repeat
}

/* .sn-header .sn-sercive{position:absolute;top:15px;right:10px;width:92px;height:60px} */
/* .sn-header .sn-sercive::after{content:'';display:block;position:relative;clear:both} */
.sn-header .sn-service {
    position: absolute;
    display: flex;
    z-index: 1000;
    top: 15px;
    right: 10px;
    height: 60px;
    align-items: center
}

.sn-header .sn-service a {
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 1000;
    width: 46px;
    height: 100%;
    margin-right: -4px;
    align-items: center;
    justify-content: center
}

.sn-header .sn-service a span {
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat
}

.sn-header .sn-service .btn-shopping .icon {
    width: 22px;
    height: 12px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_shopping.svg);
    background-size: 22px 12px
}

.sn-header .sn-service .btn-menu .icon {
    width: 18px;
    height: 17px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/main/menu.png);
    /*background-image:url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_menu.svg)*/
}

.page-link-hot-deal {
    position: absolute;
    top: 15px;
    left: 14px;
    width: 46px;
    height: 60px
}

.page-link-hot-deal a {
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 1000;
    width: 46px;
    height: 100%;
    align-items: center;
    justify-content: center
}

.page-link-hot-deal a .icon {
    width: 24px;
    height: 13px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_hot_deal.svg);
    background-size: 24px 13px;
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat
}

.page-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0
}

.page-title {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 90px;
    letter-spacing: -0.02em;
}

.page-title.en {
    font-family: 'Noto Sans KR';
    font-weight: 700
}

/* .page-title.sub::after{content:'';position:absolute;bottom:32px;left:50%;margin-left:-5px;width:6px;height:6px;border:solid #303030;border-width:0 1px 1px 0;transform:rotate(45deg);-webtkit-transition:all 200ms ease-in-out} */
/* .page-title.sub.is-active::after{bottom:28px;transform:rotate(225deg)} */
.page-title.shop .title {
    position: relative
}

.page-title.shop .title::after {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border: solid #303030;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
    -webkit-transition: all 280ms ease-in-out
}

.page-title.shop.is-selected .title::after {
    bottom: 12px;
    transform: rotate(225deg)
}

/*
.sn-header.sub .sn-logo{left:24px;margin-left:0}
*/
.sn-header.p a.btn-x {
    display: flex
}

.sn-header a.btn-x {
    overflow: hidden;
    display: none;
    position: relative;
    z-index: 1000;
    width: 46px;
    height: 60px;
    margin-top: 15px;
    margin-left: -14px;
    align-items: center;
    justify-content: center
}

.sn-header .btn-x .icon {
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    width: 14px;
    height: 15px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close.svg)
}

.sn-header.p .sn-logo {
    display: none !important
}

.sn-header.p .sn-service {
    display: none !important
}

/* .sn-header.sub .page-select{position:relative;padding-bottom:10px}
.sn-header.sub .page-select select{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:
  border-box;box-sizing:border-box;display:inline-block;height:50px;line-height:50px;padding-left:15px;-webkit-appearance:listbox;background:url(/mobile/img/common/ui/arr_location.png) no-repeat 100% 20px;-moz-appearance:none;font-size:15px;font-weight:bold}
.sn-header.sub .page-select::after{content:'';position:absolute;bottom:32px;left:50%;margin-left:-5px;width:6px;height:6px;border:solid #303030;border-width:0 1px 1px 0;transform:rotate(45deg)}
.sn-header.sub .page-select.is-active::after{bottom:28px;transform:rotate(225deg)} */
/* --- Side --- */
/* .sn-sidebar{position:fixed;z-index:2000;overflow-y:auto;display:none;background-color:#303030;-webkit-overflow-scrolling:touch} */
.sn-sidebar {
    display: none;
    overflow: hidden;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    left: 0;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #fff
}

#sn-side-menu {
    background-color: #303030
}

.sn-sidebar .sidebar-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0
}

.sn-sidebar * {
    color: #303030
}

#sn-side-menu * {
    color: #fff
}

#sn-side-menu .sn-button {
    background-color: #fff;
    color: #303030;
    font-weight: 400;
}

#sn-side-menu .sn-button span {
    color: #303030
}

.sn-sidebar.is-visible {
    display: block
}

.sn-sidebar .form-field .form-content {
    width: 100%
}

.sn-sidebar .form-field .form-input input {
    border-color: #303030;
    border-bottom-color: #fff;
    background-color: #303030;
    font-weight: 300;
}

.sn-sidebar .sidebar-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 90px;
    background-color: #fff
}

#sn-side-menu .sidebar-header {
    background-color: #303030
}

.sn-sidebar .sidebar-header .sidebar-header-contaienr {
    position: relative;
    display: flex;
    height: 90px;
    margin-right: -14px;
    margin-left: -14px;
    justify-content: space-between;
    align-items: center
}

.sn-sidebar .sidebar-header .sn-side-logo {
    width: 70px;
    height: 53px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_logo_w.svg);
    background-repeat: no-repeat
}

.sn-sidebar .sidebar-header .sn-side-logo a {
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px
}

.sn-sidebar .sidebar-header a.btn-blank, .sn-sidebar .sidebar-header a.btn-x, .sn-sidebar .sidebar-header a.btn-search {
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 1000;
    width: 46px;
    height: 60px;
    align-items: center;
    justify-content: center
}

.sn-sidebar .sidebar-header a span {
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat
}

.sn-sidebar .sidebar-header .btn-x .icon {
    width: 14px;
    height: 15px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close.svg)
}

#sn-side-menu .sidebar-header .btn-x .icon {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close_w.svg)
}

.sn-sidebar .sidebar-header .btn-search {
    -webkit-transition: opacity 180ms ease-in-out
}

.sn-sidebar .sidebar-header .btn-search.is-selected {
    opacity: 0.3
}

.sn-sidebar .sidebar-header .btn-search .icon {
    width: 17px;
    height: 15px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_search_w.svg)
}

.sn-sidebar .sidebar-tab {
    position: absolute;
    top: 90px;
    right: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 36px;
    background-color: #fff
}

.sn-sidebar .sidebar-content {
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    top: 90px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    -webkit-overflow-scrolling: touch
}

#sn-side-shopping .sidebar-content {
    top: 126px
}

.sn-sidebar .sidebar-user {
}

.sn-sidebar .user-login {
}

.sn-sidebar .user-login .login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.sn-sidebar .user-login .login-header .title {
    font-size: 14px;
    font-weight: 300;
}

.sn-sidebar .user-login .login-header .sn-button {
    background-color: #303030;
    color: #fff;
    border-color: #fff
}

.sn-sidebar .user-login .form-fields {
}

.sn-sidebar .user-login .form-field {
}

.sn-sidebar .user-login .form-content {
}

.sn-sidebar .user-login .form-row {
}

.sn-sidebar .user-login .form-input {
}

.sn-sidebar .user-login .button-wrapper {
    margin-top: 20px
}

.sn-sidebar .user-info {
}

.sn-sidebar .user-info .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.sn-sidebar .user-info .info-header .title {
    font-size: 14px;
    white-space: nowrap
}

.sn-sidebar .user-info .info-header .name {
    position: relative;
    display: inline-block
}

.sn-sidebar .user-info .info-header .name::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background-color: #fff
}

.sn-sidebar .user-info .info-header .sn-button {
}

.sn-sidebar .user-info .info-content {
}

.sn-sidebar .user-info .info-content .info-list {
}

.sn-sidebar .user-info .info-content .info-item {
    display: flex;
    box-sizing: border-box;
    height: 30px;
    padding-top: 10px;
    font-size: 14px
}

.sn-sidebar .user-info .info-content .info-item + .info-item {
    margin-top: 10px
}

.sn-sidebar .user-info .info-content .info-item a {
    display: inline-block
}

.sn-sidebar .user-info .info-content .info-item .title {
    display: inline-block;
    min-width: 60px
}

.sn-sidebar .user-info .info-content .info-item .text {
}

.sn-sidebar .user-info .info-content .info-item .text i {
    display: inline-block;
    margin-right: 4px
}

.sn-sidebar .user-info .button-wrapper {
    margin-top: 20px
}

.sn-sidebar .sidebar-menus {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px
}

.sn-sidebar .site-nav {
}

.sn-sidebar .site-nav .nav-list {
}

.sn-sidebar .site-nav .nav-item {
    padding: 10px 0;
    max-height: 48px
}

.sn-sidebar .site-nav .nav-item a {
    display: inline-block;
    font-size: 20px;
    padding: 5px 0;
    text-transform: uppercase;
    font-weight: 500;
}

.sn-sidebar .site-service {
    position: relative
}

.sn-sidebar .site-service .my-service {
    position: relative;
    text-align: right
}

.sn-sidebar .site-service .my-service .list-item {
    padding: 6px 0
}

.sn-sidebar .site-service .my-service .list-item a {
    display: inline-block;
    padding: 6px 0;
    font-size: 16px;
    font-weight: 500;
}

.sn-sidebar .site-service .util-service {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-block;
    text-align: center
}

.sn-sidebar .site-service.sl .util-service {
    bottom: inherit;
    /*padding-top:40px*/
}

.sn-sidebar .site-service .util-service .util-item {
    position: relative;
    display: block
}

.sn-sidebar .site-service .util-service .util-item + .util-item {
    margin-top: 35px
}

.sn-sidebar .site-service .util-service .util-item .icon {
    display: block;
    margin: 0 auto 4px
}

.sn-sidebar .site-service .util-service .util-item .text {
    font-size: 13px;
    white-space: nowrap;
    font-weight: 300;
}

.sn-sidebar .site-service .util-service .util-item .number {
    position: absolute;
    right: 0;
    top: -6px;
    display: inline-block;
    box-sizing: border-box;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 19px;
    background-color: #fff;
    text-align: center;
    line-height: 19px;
    color: #303030 !important
}

.sn-sidebar .site-service .util-service .util-item span.icon {
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat
}

.sn-sidebar .site-service .util-service .util-item.view .icon {
    width: 26px;
    height: 25px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/main_icon_so_check2_w.svg)
}

.sn-sidebar .site-service .util-service .util-item.cart .icon {
    width: 26px;
    height: 34px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_cart_w.svg)
}

.sn-sidebar .site-service .lang {
    height: 30px;
    margin-top: 5px;
    /*margin-top:25px;*/
}

.sn-sidebar .site-service .lang span, .sn-sidebar .site-service .lang a {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding-right: 20px;
    font-size: 16px;
    font-weight: 500;
}

.sn-sidebar .site-service .lang span {
    display: block;
    position: relative;
}

.sn-sidebar .site-service .lang span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    margin-top: -7px;
    width: 9px;
    height: 9px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.sn-sidebar .site-service .lang a {
    display: none;
}

.sideber-section {
    display: none
}

.sideber-section.is-selected {
    display: block
}

.brand-list {
    position: relative
}

.brand-list ul {
    position: relative;
    display: block;
    padding-bottom: 30px
}

.brand-list li {
    display: block;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.brand-list li:last-child {
    border-bottom: none
}

.brand-list a {
    display: flex;
    flex-wrap: wrap
}

/* .brand-list .brand-link .logo{display:flex;flex-basis:90px;flex-grow:0;flex-shrink:1;align-items:center;justify-content:center} */
.brand-list .brand-link .logo {
    display: flex;
    width: 90px;
    align-items: center;
    justify-content: center
}

.brand-list .brand-link .logo span {
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat
}

.brand-list .brand-link .logo span.logo-sonatural_app {
    width: 65px;
    height: 49px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/logo-sonatural_app.svg)
}

.brand-list .brand-link .logo span.logo-sonatural {
    width: 65px;
    height: 49px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/logo-sonatural_m.svg)
}

.brand-list .brand-link .logo span.logo-sovegan {
    width: 70px;
    height: 17px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/logo-sovegan_m.png);
    background-size: 70px 17px
}

.brand-list .brand-link .logo span.logo-powder4room {
    width: 70px;
    height: 12px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/logo-powder4room_m.png);
    background-size: 70px 12px
}

/* .brand-list .brand-link .info{flex-grow:1;flex-shrink:1;padding:22px 20px 18px} */
.brand-list .brand-link .info {
    flex: 1;
    padding: 22px 20px 18px
}

.brand-list .brand-link .info .desc {
    padding-bottom: 16px;
    font-size: 12px;
    line-height: 20px
}

.brand-list .brand-link-all {
    display: block;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px
}

.brand-list .brand-link-all span {
    display: block;
    font-size: 13px;
    line-height: 20px
}

.brand-list .brand-link-all .logo {
    overflow: hidden;
    display: inline-block;
    width: 26px;
    height: 25px;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_all.svg)
}

.brand-list .brand-link-all .title {
    padding-top: 4px
}

.functional-list {
    position: relative
}

.functional-list ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px
}

.functional-list li {
    width: 33.3%;
    padding-bottom: 25px
}

.functional-list li:nth-child(3n+1):nth-last-child(-n+3),.functional-list li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
    padding-bottom: 0
}

.functional-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.functional-list .functional-link span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px
}

.functional-list .functional-link span.icon {
    width: 60px;
    height: 60px;
    background-repeat: no-repeat
}

.functional-link span.icon-1 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_1.svg)
}

.functional-link span.icon-2 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_2.svg)
}

.functional-link span.icon-3 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_3.svg)
}

.functional-link span.icon-4 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_4.svg)
}

.functional-link span.icon-5 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_5.svg)
}

.functional-link span.icon-6 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_6.svg)
}

.functional-link span.icon-7 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_7.svg)
}

.functional-link span.icon-8 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_8.svg)
}

.functional-link span.icon-9 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_9.svg)
}

.functional-link span.icon-10 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_10.svg)
}

.functional-link span.icon-11 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_11.svg)
}

.functional-link span.icon-12 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_12.svg)
}

.functional-link span.icon-13 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_13.svg)
}

.functional-link span.icon-14 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-functional_14.svg)
}

.functional-list .functional-link span.title {
    padding-top: 6px
}

.line-list {
    position: relative
}

.line-list ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px
}

.line-list li {
    width: 50%;
    padding-bottom: 40px
}

.line-list li:nth-child(2n+1):nth-last-child(-n+2),.line-list li:nth-child(2n+1):nth-last-child(-n+2) ~ li {
    padding-bottom: 0
}

.line-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.line-list .line-link span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px
}

.line-list .line-link span.icon {
    width: 60px;
    height: 60px;
    background-repeat: no-repeat
}

.line-link span.icon-1 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_1.svg)
}

.line-link span.icon-2 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_2.svg)
}

.line-link span.icon-3 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_3.svg)
}

.line-link span.icon-4 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_4.svg)
}

.line-link span.icon-5 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_5.svg)
}

.line-link span.icon-6 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_6.svg)
}

.line-link span.icon-7 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_7.svg)
}

.line-link span.icon-8 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_8.svg)
}

.line-link span.icon-9 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_9.svg)
}

.line-link span.icon-10 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-line_10.svg)
}

.line-list .line-link span.title {
    padding-top: 6px
}

.shop-cate-menu {
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 1800;
    top: 160px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    text-align: center
}

.shop-cate-menu .shop-cate-menu-wrap {
    position: relative;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    background-color: #fff
}

.shop-cate-menu ul {
    padding-top: 30px;
    padding-bottom: 30px
}

.shop-cate-menu li {
    display: block;
    padding-top: 20px;
    padding-bottom: 20px
}

.shop-cate-menu li a {
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
}

/* --- Search --- */
/* .gnb-search{display:none;z-index:1000;position:fixed;left:0;right:0;top:0;bottom:0;background-color:#fff;padding-top:130px} */
/* .gnb-search.is-visible{display:block}
.gnb-search .search-header{position:fixed;top:0;left:25px;right:25px;display:flex;height:90px;justify-content:space-between;align-items:center}
.gnb-search .search-header .btn-x{display:flex;width:30px;height:30px;align-items:center;justify-content:center;background-color:rgba(255,0,0,.25)}
.gnb-search .search-header .btn-x .icon{width:14px;height:15px} */
/* .page-search-result .search-form{z-index:1000;position:fixed;top:90px;left:25px;right:25px;background-color:#fff} */
.page-search-result .search-form {
    position: relative
}

/* #sn-side-menu .section-search{padding-bottom:25px} */
#sn-side-menu .section-user {
    padding-top: 20px;
    padding-bottom: 60px
}

#sn-side-menu .section-search {
    display: none
}

.search-form .form-search {
    position: relative;
    display: inline-block;
    width: 100%
}

#sn-side-menu .search-form .form-search {
    border-bottom: 1px solid #fff
}

.search-form .form-search input {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding-right: 30px;
    height: 50px;
    line-height: 50px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(40,40,40,1);
    border-radius: 0;
    font-size: 20px;
    font-weight: 300
}

#sn-side-menu .search-form .form-search input {
    height: 30px;
    font-size: 12px;
    line-height: 30px
}

.search-form .form-search input::-webkit-input-placeholder {
    color: rgba(153,153,153,1)
}

.search-form .btn-search {
    position: absolute;
    right: 0;
    top: 10px;
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center
}

#sn-side-menu .search-form .btn-search {
    top: 0
}

.search-form .btn-search .icon {
    overflow: hidden;
    display: block;
    width: 17px;
    height: 15px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-search_m.svg);
    background-size: 17px 15px;
    text-indent: -9999px
}

#sn-side-menu .search-form .btn-search .icon {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-search-w_m.svg);
    background-size: 17px 15px
}

/* .page-search-result .search-content{overflow-y:auto;overflow-x:hidden;position:absolute;top:130px;bottom:10px;left:0;width:100%;-webkit-overflow-scrolling:touch;background-color:#fff} */
/* .page-search-result .search-content{padding-top:40px} */
/* .page-search-result .search-content{padding-bottom:60px} */
.page-search-result .search-content .none-content {
    position: relative;
    padding-top: 80px;
    padding-bottom: 20px;
    text-align: center
}

.page-search-result .search-content .none-content .text {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #303030
}

.page-search-result .search-content .result {
    position: relative;
    padding-top: 25px;
    padding-bottom: 35px;
    text-align: center
}

/* --- Bramd Story Banner --- */
.brand-story-banner {
    position: relative;
    width: 100%;
    height: 224px;
    color: #fff;
    text-align: center;
    background-color: #303030
}

.brand-story-banner .brand-story-banner-item {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%
}

.brand-story-banner .brand-story-banner-item.is-selected {
    display: block
}

.brand-story-banner .image-area {
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%
}

.brand-story-banner .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.brand-story-banner .text-area {
    position: relative;
    height: 100%
}

.brand-story-banner .text-area .component {
    height: 100%
}

.brand-story-banner .slogan {
    font-family: 'Nanum Myeongjo';
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: -0.3px
}

.brand-story-banner .copy {
    padding-top: 3px;
    padding-bottom: 25px;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 11px;
    font-weight: 300;
    line-height: 17px;
    letter-spacing: 0.5px
}

.brand-story-banner .btn-brand-story {
    display: inline-block;
    width: 200px;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 6px;
    background-color: #fff
}

.brand-story-banner .btn-brand-story .title {
    display: inline-block;
    padding-right: 25px;
    vertical-align: top;
    text-align: left;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 12px;
    font-weight: 600;
    line-height: 20px
}

.brand-story-banner .btn-brand-story .arrow {
    display: inline-block;
    width: 30px;
    height: 14px;
    margin-top: 3px;
    margin-bottom: 3px;
    vertical-align: top;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/arrow_long_m.svg);
    background-size: 30px 14px
}

/* --- Quick Menu --- */
html.mode-locked .quick-menu {
    display: none
}

.quick-menu {
    position: relative;
    z-index: 1500
}

.quick-menu .quick-menu-container {
    display: flex;
    position: fixed;
    z-index: 1500;
    bottom: 20px;
    right: 20px;
    width: 50px;
    flex-direction: column;
    flex-wrap: wrap
}

.quick-menu .menu-list {
    display: none;
    position: absolute;
    bottom: 60px;
    font-weight: 300;
}

.btn-quick-menu {
    overflow: hidden;
    display: flex;
    width: 50px;
    height: 50px;
    background-color: rgba(48,48,48,0.8);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(48,48,48,0.3);
    color: #fff
}

.btn-quick-menu span {
    display: block;
    position: relative;
    width: 26px;
    height: 26px;
    margin: 12px;
    -webkit-transition: transform 250ms ease-in-out;
    transition: transform 250ms ease-in-out;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
}

.quick-menu.open .btn-quick-menu span {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
}

/* .quick-menu.open .menu-list{display:block} */
.btn-quick-menu span::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    border-left: 1px solid #fff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.btn-quick-menu span::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.quick-menu.product .quick-menu-container {
    bottom: 87px !important
}

.quick-menu.stick .quick-menu-container {
    position: absolute;
    bottom: 20px !important
}

.quick-menu a {
    overflow: hidden;
    display: flex;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(48,48,48,0.3);
    color: #fff
}

.quick-menu a.disabled {
    display: none
}

.quick-menu a.btn-today img {
    display: block;
    width: 36px;
    height: 36px;
    margin: 7px
}

.quick-menu a.btn-cart {
    background-color: rgba(221, 66, 111, 0.6)
}

.quick-menu a.btn-cart .icon {
    top: 6px;
    left: 12px;
    width: 26px;
    height: 32px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-cart_m.svg);
    background-size: 26px 32px
}

.quick-menu a.btn-cart .number {
    width: 100%;
    height: 25px;
    margin-top: 14px;
    text-align: center;
    font-family: 'Noto Sans KR';
    font-size: 12px;
    font-weight: 600;
    line-height: 25px
}

.quick-menu a.btn-top {
    background-color: rgba(48,48,48,0.8)
}

.quick-menu a.btn-top .icon {
    top: 12px;
    left: 16px;
    width: 18px;
    height: 26px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/icon-top_m.svg);
    background-size: 18px 26px
}

.quick-menu a span {
    position: absolute;
    display: block
}

.quick-menu a.btn-hot-deal {
    background-color: #eb155a;
    display: block
}

.quick-menu a.btn-hot-deal span {
    display: block;
    position: relative;
    width: 100%;
    text-align: center
}

.quick-menu a.btn-hot-deal span.name {
    padding-top: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.quick-menu a.btn-hot-deal span.name-en {
    padding-top: 2px;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 7px;
    line-height: 10px
}

.quick-menu a + a {
    margin-top: 10px
}

/* --- Footer --- */
.sn-footer {
    position: relative
}

.sn-footer.p {
    display: none !important
}

.sn-footer .community {
    background-color: #fff;
    border-top: 1px solid rgba(48,48,48,0.3)
}

.brand-story-banner + .sn-footer .community {
    border-top: none
}

.sn-footer .benefit {
    padding-top: 30px;
    padding-bottom: 30px
}

.sn-footer .benefit .benefit-row {
    display: flex;
    justify-content: space-between
}

.sn-footer .benefit .benefit-row + .benefit-row {
    padding-top: 20px
}

.sn-footer .benefit .benefit-row .benefit-item {
    width: 50px
}

.sn-footer .benefit .benefit-item a {
    display: block
}

.sn-footer .benefit .benefit-item span {
    display: block
}

.sn-footer .benefit .benefit-item span.title {
    width: 70px;
    padding-top: 2px;
    margin-left: -10px;
    white-space: nowrap;
    text-align: center;
    font-size: 11px;
    line-height: 14px
}

.sn-footer .benefit .benefit-item .icon img {
    width: 100%
}

.sn-footer .notice {
    overflow: hidden;
    width: 100%;
    height: 50px;
    padding-top: 15px;
    padding-bottom: 14px;
    border-top: 1px solid rgba(48,48,48,0.3);
    background-color: #fff
}

.sn-footer .notice::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.sn-footer .notice .notice-title {
    float: left;
    color: #303030;
    font-family: 'Noto Sans KR';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.sn-footer .notice .notice-list {
    overflow: hidden;
    position: relative;
    float: right;
    width: calc(100% - 60px);
    height: 20px;
    color: #757575;
    font-size: 12px;
    line-height: 20px
}

.sn-footer .notice .notice-list ul {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.sn-footer .notice .notice-list li {
    text-align: right
}

.sn-footer .notice .notice-list a {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    text-overflow: ellipsis
}

.sn-footer .notice .notice-list a span {
    display: inline-block;
    vertical-align: top
}

.sn-footer #footer {
    background-color: #303030;
    font-weight: 300;
}

.sn-footer iframe {
    height: 230px
}

.sn-footer .footer-support {
    position: relative;
    padding-top: 20px;
    margin-bottom: 10px;
    color: #fff
}

.sn-footer .footer-support li {
    display: inline-block;
    position: relative;
    padding-right: 11px;
    padding-left: 10px
}

.sn-footer .footer-support li:first-child {
    padding-left: 0
}

.sn-footer .footer-support li:last-child {
    padding-right: 0
}

.sn-footer .footer-support li::after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 0;
    width: 0;
    height: 10px;
    border-right: 1px solid rgba(255,255,255,0.6)
}

.sn-footer .footer-support li:last-child::after {
    display: none;
    border: none
}

.sn-footer .footer-support li a {
    display: block;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 12px;
    line-height: 20px
}

.sn-footer .footer-intro {
    position: relative;
    padding-top: 20px;
    margin-bottom: 20px
}

.sn-footer .footer-intro .title {
    text-align: center;
    font-size: 12px;
    color: #fff
}

.sn-footer .footer-info {
    position: relative;
    margin-bottom: 20px
}

.sn-footer .footer-info .info {
    position: relative;
    text-align: left
}

.sn-footer .footer-info .info::after {
    clear: both;
    display: block;
    content: ''
}

.sn-footer .footer-info .info + .info {
    padding-top: 10px
}

.sn-footer .footer-info .info * {
    display: inline-block;
    font-size: 10px;
    color: rgba(255,255,255,.6)
}

.sn-footer .footer-info .info dd {
    float: left;
    line-height: 1;
    margin-top: 6px
}

.sn-footer .footer-info .info dd:nth-child(odd) {
    clear: left;
    padding-right: 15px
}

.sn-footer .footer-info .info dd.copyright {
    text-transform: uppercase;
    width: 100%;
    padding-right: 0
}

.sn-footer .footer-info .info .mail:nth-child(2) {
    position: relative;
    clear: both
}

.sn-footer .btn-top {
    display: flex;
    position: absolute;
    /*top:16px;*/
    bottom: 61px;
    right: 24px;
    width: 44px;
    height: 24px;
    border-radius: 6px;
    background-color: #fff;
    text-align: center;
    justify-content: center;
    align-items: center
}

.sn-footer .btn-top span {
    color: #303030;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.5px;
}

/* .sn-footer .footer-info .info .mail:nth-child(2)::after{content:'';position:absolute;left:-8px;top:2px;height:8px;width:1px;background-color:rgba(255,255,255,.6)} */
.sn-footer .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px
}

.sn-footer .footer-bottom .sns-list {
}

.sn-footer .footer-bottom .sns-list a {
    display: inline-block;
    height: 25px;
    vertical-align: top
}

.sn-footer .footer-bottom .sns-list a + a {
    margin-left: 10px
}

.sn-footer .footer-bottom .sns-list a span {
    display: flex;
    height: 25px;
    justify-content: center;
    align-items: center
}

.sn-footer .footer-bottom .sns-list a span img {
    display: block;
    width: auto;
    height: 100%
}

.sn-footer .footer-bottom .sns-list a.fb span img {
    height: 21px
}

.sn-footer .footer-bottom .sns-list a.in span img {
    height: 25px
}

.sn-footer .footer-bottom .sns-list a.fb span img {
    height: 20px
}

.sn-footer .footer-bottom .sns-list a.fb span img {
    height: 20px
}

.sn-footer .footer-bottom .link-list {
}

.sn-footer .footer-bottom .link-list .link {
    position: relative;
    display: inline-block;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}

.sn-footer .footer-bottom .link-list .link + .link {
    margin-left: 20px
}

.sn-footer .footer-bottom .link-list .link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background-color: #fff
}

/***************/
/**** Shop. ****/
/***************/
.product-list-wrapper {
    position: relative
}

.product-list-item {
}

.product-list-item .product-list-item-container {
    overflow: hidden;
    display: block;
    position: relative;
    width: 100%
}

.product-item {
    position: relative
}

.product-item .product-price .reserve {
    display: inline-block;
    font-size: 12px;
    color: #757575
}

.product-item .product-price .reserve .title {
    padding-right: 4px
}

.product-item .product-price .reserve .price {
    font-size: 14px
}

.product-item .product-flag {
    position: absolute;
    top: 0;
    z-index: 10
}

.product-item .product-flag .flag {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    border: 1px solid #303030;
    background-color: #fff;
    text-align: center
}

.product-item .product-flag .flag.black {
    background-color: #303030;
    color: #fff
}

.product-item .product-thumbnail {
}

.product-item .product-thumbnail .thumbnail {
    display: block;
    line-height: 0;
    width: 100%
}

.product-item .product-thumbnail .thumbnail img {
    width: 100%;
}

.best-product .product-item .product-thumbnail {
    position: relative;
    width: 100%
}

.best-product .product-item .product-thumbnail .thumbnail {
    overflow: hidden;
    display: block;
    line-height: 0;
    width: 100%;
    height: 0;
    padding-bottom: 100%
}

.best-product .product-item .product-thumbnail .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.product-item .product-details {
    position: relative;
    padding-top: 10px
}

.product-item .product-sort {
    color: #000;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
}

.product-item .product-sort.event {
    color: #dd426f
}

.product-item .product-name {
    color: #000;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 20px;
}

.product-item small {
    display: block;
    color: #757575;
    font-size: 12px;
    line-height: 18px
}

.product-item .product-price .price {
    font-size: 20px
}

.product-item .product-price .unit {
    padding-left: 4px;
    text-transform: uppercase;
    font-size: 11px;
    padding-left: 1px;
    text-transform: uppercase;
    font-size: 13px;
}

.product-item .product-price .amount {
    display: inline-block;
    padding-right: 15px
}

/* .product-item .product-price .reserve{display:inline-block;font-size:12px;color:#757575}
.product-item .product-price .reserve .title{padding-right:4px}
.product-item .product-price .reserve .price{font-size:14px}
.product-item .product-price .discount{display:inline-block;font-size:12px;color:#dd426f}
.product-item .product-price .discount .price{font-size:14px} */
#product-gallery {
    width: 100vw;
    height: 100vw
}

#product-gallery .sn-swiper-item {
    position: relative;
    padding-right: 24px;
    padding-left: 24px;
    box-sizing: border-box
}

#product-gallery .sn-swiper-item img {
    width: 100%
}

#product-gallery .sn-swiper-pagination {
    bottom: 15px;
    justify-content: center
}

.product-summary .product-info .product-info-container {
    padding: 10px 24px
}

.product-summary .product-info .product-info-item {
    padding-bottom: 5px
}

.product-summary .product-info .product-info-item:first-child {
    padding-top: 0 !important
}

.product-summary .product-info .product-info-item:last-child {
    padding-bottom: 0 !important
}

.product-summary .product-info .product-info-item::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.product-summary .product-info .product-info-item .title {
    float: left;
    color: #303030;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.product-summary .product-info .product-info-item .option {
    float: right;
    color: #303030;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400
}

.product-summary .product-info .product-info-item .price,.product-summary .product-info .product-info-item .free,.product-summary .product-info .product-info-item .weight {
    float: right
}

.product-summary .product-info .product-info-item.product-price {
    padding-bottom: 0
}

.product-summary .product-info .product-info-item.product-price + .product-info-item.product-price {
    padding-top: 0px
}

.product-summary .product-info .product-info-item.product-price.member .grade {
    float: right;
    padding: 10px 0 0;
    padding-right: 8px;
    color: #303030;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    background-color: transparent;
    border-radius: inherit
}

/* .product-summary .product-info .product-info-item.product-price.member .price{clear:both} */
.product-summary .product-info .product-info-item.product-price .title {
    padding-top: 10px
}

.product-summary .product-info .product-info-item.product-price .price .amount {
    font-family: 'Noto Sans KR';
    font-size: 24px;
    font-weight: 300;
    line-height: 38px;
}

.product-summary .product-info .product-info-item.product-price .price .unit {
    padding-top: 10px;
    padding-left: 3px;
    font-size: 14px;
    line-height: 20px
}

.product-summary .product-info .product-info-item.product-shipping {
    padding-top: 5px;
    padding-bottom: 7px
}

.product-summary .product-info .product-info-item .free {
    width: auto;
    height: 24px;
    padding: 0 10px;
    background-color: #303030;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    line-height: 24px;
    font-weight: 300;
}

.product-summary .product-info .product-info-item.product-point .title {
    padding-top: 4px
}

.product-summary .product-info .product-info-item.product-point .price .amount {
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
}

.product-summary .product-info .product-info-item.product-point .price .unit {
    padding-top: 6px;
    padding-left: 3px;
    color: #111111;
    font-weight: 400;
    letter-spacing: 0
}

.product-summary .product-info .product-info-item.product-weight .title {
    padding-top: 4px
}

.product-summary .product-info .product-info-item.product-weight .weight {
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
}

.product-summary .product-info .product-info-item.special .title,.product-summary .product-info .product-info-item.special .price {
    color: #dd426f !important
}

.product-summary .product-info .product-info-item.discount .title,.product-summary .product-info .product-info-item.discount .price {
    color: #dd426f !important
}

/* .product-summary .product-info-container + .product-n-pay{padding-top:20px} */
.product-item .product-button .sn-button {
    width: 100%;
    font-weight: 400;
}

.product-item .product-thumbnail img {
    width: 100%
}

.product-list-wrapper.order-check {
    border-top: none
}

.product-list-wrapper.order-check .section-header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.product-list-wrapper .product-flag .flag {
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-weight: 500;
}

.product-list-wrapper.type-list {
    padding-right: 24px;
    padding-left: 24px
}

.product-list-wrapper.type-list .product-list-item {
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.product-list-wrapper.type-list .product-list-item:last-child {
    border-bottom: none
}

.product-list-wrapper.type-list .product-item {
    /* display:flex; */
}

.product-list-wrapper.type-list .product-details {
    box-sizing: border-box;
    width: calc(100% - 115px);
    padding-top: 0;
    padding-bottom: 5px;
    padding-left: 10px;
    word-break: keep-all;
    vertical-align: middle;
    display: inline-block;
}

.product-list-wrapper.type-list .product-flag {
    right: 0;
    top: 8px
}

.product-list-wrapper.type-list .product-flag .flag {
    float: right;
    height: 20px;
    line-height: 20px;
    border-radius: 20px;
    font-family: 'Noto Sans KR';
    font-weight: 400;
}

.product-list-wrapper.type-list .product-flag .flag + .flag {
    margin-right: 10px;
    margin-top: 0;
}

/* .product-list-wrapper.type-list .product-thumbnail{width:100px;height:100px} */
.product-list-wrapper.type-list .product-thumbnail {
    width: 100px;
    min-height: 100px;
    height: auto;
    vertical-align: middle;
    display: inline-block;
}

.product-list-wrapper.type-list .product-details .product-name {
    padding-top: 2px
}

.page-review .review-notice {
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    color: #303030;
    padding-bottom: 30px
}

.product-list-wrapper.type-list.review-product-list .product-list-item {
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.product-list-wrapper.type-list.review-product-list .product-details .product-price {
    padding-top: 6px;
    bottom: inherit
}

.product-list-wrapper.type-list.review-product-list .product-details .product-price.small .price {
    font-size: 17px
}

.product-list-wrapper.type-list.review-product-list .product-details .product-price.small .unit {
    font-size: 10px
}

.product-list-wrapper.type-list.review-product-list .product-button {
    display: flex;
    width: 100%;
    right: inherit
}

.product-list-wrapper.type-list.review-product-list .product-item .product-button .sn-button {
    width: 90px;
    height: 30px;
    line-height: 30px;
    -webkit-transition: all 180ms ease-in-out
}

.product-list-wrapper.type-list.review-product-list .product-item .product-button .sn-button:first-child {
    margin-right: 10px
}

.product-list-wrapper.type-list.review-product-list .product-item .product-button .sn-button.active {
    color: #fff;
    background-color: #303030;
    cursor: default
}

.product-reivew-write.sn-board-write {
    margin-top: 15px;
    padding-top: 20px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(48, 48, 48, 0.3)
}

.product-list-wrapper.type-list .product-details .product-price {
    padding-top: 10px
}

.product-list-wrapper.type-list .product-details .product-price {
    /* position: absolute; */
    /* bottom: 5px; */
    padding-top: 1px;
    font-weight: 300;
}

.product-list-wrapper.type-list .product-details .product-util .option-item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #757575;
    line-height: 20px
}

.product-list-wrapper.type-list .product-details .product-util .option-item + .option-item {
    margin-top: 10px
}

.product-list-wrapper.type-list .product-details .product-util .option-item .name {
    display: inline-block;
    padding-right: 8px;
    white-space: nowrap
}

.product-list-wrapper.type-list .product-details .product-util .option-item .sn-quantity {
    margin-left: 8px;
    width: 120px
}

/* .product-list-wrapper.type-list .product-details .product-util .option-item .sn-quantity .btn-control span{width:10px;height:10px} */
.product-list-wrapper.type-list .product-details .product-util .option-item .sn-quantity .quantity {
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    vertical-align: top
}

.product-list-wrapper.type-list .product-details .product-util .option-item .sn-quantity .btn-control {
    width: 20p;
    height: 20px
}

.product-list-wrapper.type-list .product-details .product-util .option-item .select {
    display: inline-block;
    position: relative;
    width: 100%
}

.product-list-wrapper.type-list .product-details .product-util .option-item select {
    margin-left: 8px;
    width: calc(100% - 8px);
    border-bottom: 1px solid rgba(48, 48, 48, 0.3);
    line-height: 20px;
    border-radius: 0;
    padding-right: 16px
}

.product-list-wrapper.type-list .product-details .product-util .option-item .select::after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    right: 4px;
    margin-top: -6px;
    width: 5px;
    height: 5px;
    border-right: 1px solid #757575;
    border-top: 1px solid #757575;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.product-list-wrapper.type-list .product-details .product-util .option-item .sn-button {
    margin-left: 10px;
    flex: 0 0 50px
}

.product-list-wrapper.type-list .product-button {
    width: 90px;
    position: absolute;
    right: 0;
    bottom: 5px
}

.product-list-wrapper.type-list .product-delete {
    position: absolute;
    right: 0;
    top: 4px
}

.product-list-wrapper.type-list .product-delete .btn-delete {
    display: inline-block;
    text-align: center
}

.product-list-wrapper.type-list .product-delete .btn-delete .icon-x {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close.svg);
    background-size: 14px 14px;
    opacity: 0.5
}

.product-list-wrapper.type-list .product-delete .btn-delete .text {
    display: block;
    color: #999
}

.product-list-wrapper.type-list .product-button {
    width: 90px;
    position: absolute;
    right: 0;
    bottom: 5px
}

.product-list-wrapper.type-thumbnail {
    /* display:flex; */
    /* flex-wrap:wrap; */
    /* justify-content:space-between; */
    text-align: left;
    font-size: 0;
}

.product-list-wrapper.type-thumbnail .product-list-item {
    position: relative;
    /* flex:1 1 50%; */
    width: 50%;
    padding-bottom: 30px;
    font-size: 12px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.product-list-wrapper.type-thumbnail .product-list-item:nth-child(2n+1):nth-last-child(-n+2),.product-list-wrapper.type-thumbnail .product-list-item:nth-child(2n+1):nth-last-child(-n+2) ~ .product-list-item {
    padding-bottom: 0
}

.product-list-wrapper.type-thumbnail .product-list-item:nth-child(odd) {
    padding-right: 12px;
    padding-left: 24px
}

.product-list-wrapper.type-thumbnail .product-list-item:nth-child(even) {
    padding-right: 24px;
    padding-left: 12px
}

.product-list-wrapper.type-thumbnail .product-flag {
    left: 0
}

.product-flag .flag + .flag {
    margin-top: 5px
}

.product-list-wrapper.type-thumbnail .product-details .product-name {
    padding-top: 2px;
}

.product-list-wrapper.type-thumbnail .product-details .product-util {
    padding-top: 2px
}

.product-list-wrapper.type-thumbnail .product-details .product-price {
    padding-top: 8px;
    font-weight: 300;
}

.product-list-wrapper.type-thumbnail .product-button {
    padding-top: 14px
}

.product-load-more {
    padding-top: 30px;
    padding-right: 24px;
    padding-left: 24px
}

.product-load-more .btn-load-more {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 1em;
    background-color: #303030;
    border: 1px solid #303030;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 50px
}

.product-list-top {
    padding-top: 35px;
    padding-bottom: 45px;
    line-height: 20px
}

.product-list-top::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.product-list-top .title {
    float: left
}

.product-list-top .top-util {
    float: right
}

.product-list-top .top-util .list-sort {
    display: inline-block;
    position: relative;
    width: 84px;
    height: 20px;
    vertical-align: top
}

.product-list-top .top-util .list-sort::after {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: 6px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 3.5px 0 3.5px;
    border-color: #ffffff transparent transparent transparent;
    outline: none
}

.product-list-top .top-util .list-sort select {
    display: block;
    border: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 6px;
    background-color: #303030;
    border: 1px solid #303030;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    -webkit-appearance: none
}

.section.product-thankyou {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center
}

.product-thankyou .message {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px
}

.product-thankyou .order-number {
    padding-top: 35px
}

.product-thankyou .order-number .title {
    color: #757575;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px
}

.product-thankyou .order-number .number {
    display: inline-block;
    position: relative;
    padding-top: 4px;
    text-transform: uppercase;
    color: #303030;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 1px
}

.product-thankyou .order-number .number::after {
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    width: 100%;
    height: 0;
    border-bottom: 1px solid #303030
}

.view-type {
    overflow: hidden;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    vertical-align: top
}

.view-type a {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 100%;
    border: 1px solid #303030;
    border-radius: 2px;
    justify-content: center;
    align-items: center
}

.view-type a.is-selected {
    display: none
}

.view-type a span.icon {
    overflow: hidden;
    display: block;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    text-indent: -9999px
}

.view-type a.type-thumbnail span.icon {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/type-list.svg)
}

.view-type a.type-list span.icon {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/type-thumbnail.svg)
}

/***************/
/**** Main. ****/
/***************/
#main-issue {
    height: 500px
}

.best-product {
    height: 660px
}

.best-banner {
    height: 265px
}

.fix-banner {
    height: 265px
}

.new-banner {
    height: 270px
}

.main-section-title {
    padding-top: 40px;
    padding-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 20px;
}

.sn-swiper-item .banner-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-right: 24px;
    padding-left: 24px;
    box-sizing: border-box
}

.sn-swiper-item.w .banner-inner * {
    color: #fff
}

.sn-swiper-item .banner-image {
    position: relative;
    width: 100%;
    height: 100%
}

.sn-swiper-item .banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.banner-inner .banner-subtitle {
    font-size: 14px;
    letter-spacing: -0.2px;
    line-height: 10px;
}

.banner-inner .banner-subtitle-bold {
    font-size: 14px;
    letter-spacing: -0.8px;
    line-height: 20px
}

.banner-inner .banner-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.7px;
    line-height: 32px
}

.banner-inner .banner-description {
    font-size: 14px;
    line-height: 22px;
    opacity: 0.8
}

.banner-inner .banner-new {
    width: 34px;
    height: 18px;
    border-radius: 4px
}

.banner-inner .banner-new span {
    display: block;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Noto Sans KR';
    font-size: 11px;
    font-weight: 300;
    line-height: 18px;
}

.main-issue .banner-inner .banner-title {
    padding-top: 110px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.main-issue .banner-inner .banner-subtitle {
    padding-top: 8px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    letter-spacing: -0.25px;
    color: #000;
    line-height: 1.2;
}

.main-issue .banner-inner .banner-description {
    padding-top: 24px
}

.best-product {
    border-top: 1px solid rgba(48,48,48,0.3)
}

.best-product .product-list-wrapper.type-thumbnail {
    padding-top: 40px;
    padding-bottom: 70px;
    text-align: left
}

.best-product .product-sort {
}

.best-product .product-name {
    padding-top: 4px
}

.best-product .product-price {
    padding-top: 6px
}

.best-banner .banner-inner .banner-subtitle {
    font-weight: 300;
    padding-top: 20px;
    opacity: 0.7;
}

.best-banner .banner-inner .banner-title {
    padding-top: 3px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.best-banner .banner-inner .banner-title.en {
    font-family: 'Noto Sans KR';
    font-weight: 600;
}

.best-banner .banner-inner .banner-title-en {
    padding-top: 8px;
    ;font-size: 14px;
    font-weight: 600;
    line-height: 20px
}

.best-banner .banner-inner .limit {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    background-color: #f1f1f1
}

.best-banner .banner-inner .limit * {
    color: #fff !important;
    font-weight: 600
}

.best-banner .banner-inner .limit .title {
    font-size: 12px;
    margin-top: 4px
}

.best-banner .banner-inner .limit .person {
    margin-top: 2px
}

.best-banner .banner-inner .limit .number {
    font-size: 20px
}

.best-banner .banner-inner .limit .unit {
    position: relative;
    top: -3px;
    padding-left: 2px
}

.category-best .product-list-wrapper.type-thumbnail {
    padding-top: 40px;
    padding-bottom: 40px
}

.category-best .product-list-wrapper.type-thumbnail .product-item {
    background-color: #fff
}

.category-best .navi-wrapper {
    width: 494px
}

.category-best .product-item .product-details .product-price {
    padding-top: 8px
}

.new-banner .sn-swiper-item.b * {
    color: #303030
}

.new-banner .sn-swiper-item.w * {
    color: #fff
}

.new-banner .sn-swiper-item.b .banner-new {
    mix-blend-mode: normal;
    background-color: #303030
}

.new-banner .sn-swiper-item.b .banner-new span {
    color: #fff
}

.new-banner .sn-swiper-item.w .banner-new {
    mix-blend-mode: screen;
    background-color: #fff
}

.new-banner .sn-swiper-item.w .banner-new span {
    color: #000
}

.new-banner .banner-inner .banner-new {
    margin-top: 30px
}

.new-banner .banner-inner .banner-subtitle {
    padding-top: 16px;
    font-weight: 300;
    color: #000;
}

.new-banner .banner-inner .banner-title {
    padding-top: 2px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.new-banner .banner-inner .banner-description {
    padding-top: 12px;
    font-size: 12px;
    line-height: 16px
}

.new-banner .banner-inner .banner-feature {
    padding-top: 10px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.best-review {
    padding-top: 10px
}

.best-review .best-review-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 45px
}

.best-review .review-item {
    position: relative;
    flex: 1 1 50%;
    box-sizing: border-box;
    width: 50%;
    padding-right: 24px;
    padding-left: 24px
}

.best-review .product-thumbnail {
    overflow: hidden;
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%
}

.best-review .product-thumbnail a {
    overflow: hidden;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.best-review .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.best-review .product-info {
    padding-top: 8px;
    padding-left: 10px
}

.best-review .product-name {
    white-space: nowrap
}

.best-review .product-name a {
    display: inline-block;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.best-review .product-total-review {
    position: relative;
    padding-top: 2px
}

.best-review .product-total-review .total {
    display: inline-block;
    vertical-align: top;
    color: #303030;
    font-family: 'Noto Sans KR';
    font-size: 30px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -2px;
}

.best-review .product-total-review .unit {
    display: inline-block;
    padding-top: 5px;
    padding-left: 6px;
    vertical-align: top;
    color: #757575;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 12px;
    font-weight: 300;
    line-height: 12px;
}

.live-content-wrapper iframe {
    vertical-align: top
}

.live-content-wrapper .info-area {
    position: relative;
    width: 100%;
    padding: 8px 24px 10px;
    background-color: #faa7c0;
    box-sizing: border-box;
    color: #fff
}

.live-content-wrapper .lave-content-title {
    color: #fff;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 22px;
}

.live-content-wrapper .lave-content-name {
    padding-top: 2px;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
}

.live-content-wrapper .info-area .nav-link {
    position: absolute;
    right: 24px;
    bottom: 18px;
    color: #fff
}

/* .live-content-wrapper .info-area .nav-link.icon::after{background-color:#fff} */
.instagram-feed {
    padding-top: 10px;
    padding-bottom: 60px
}

.instagram-feed .feed-header a {
    display: block;
    width: 100%;
    height: 40px;
    background-color: #c1c1c1;
    border-radius: 2px;
    font-weight: 300;
}

.instagram-feed .feed-header a span {
    display: block;
    width: 100%;
    height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.instagram-feed .feed-list {
    margin-top: 9px;
    margin-right: -1px;
    margin-left: -1px
}

.instagram-feed .feed-list::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.instagram-feed .feed-list .feed-item {
    overflow: hidden;
    float: left;
    position: relative;
    width: 25%;
    height: 0;
    padding-bottom: 25%
}

.instagram-feed .feed-list .feed-item a {
    overflow: hidden;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1px;
    box-sizing: border-box
}

.instagram-feed .feed-list .feed-item a img {
    display: block;
    width: 100%;
    vertical-align: top
}

.instagram-feed .feed-footer {
    position: relative;
    padding-top: 20px
}

.instagram-feed .feed-footer .text {
    color: #757575;
    font-size: 12px;
    line-height: 24px
}

.instagram-feed .feed-footer .nav-link {
    position: absolute;
    right: 0
}

/******************/
/**** Product. ****/
/******************/
.page-detail .button-wrapper .sn-button span {
    font-weight: 600
}

.product-view {
    position: relative;
    padding-right: 24px;
    padding-left: 24px;
    text-align: center
}

.product-view .product-view-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%
}

.product-view .product-view-container img {
    width: 100%
}

.product-detail-banner a {
    display: block
}

.product-detail-banner a img {
    display: inline-block;
    width: 100%;
    vertical-align: top
}

/* .product-summary{padding-right:24px;padding-left:24px;text-align:center} */
.product-summary {
    text-align: center
}

.product-summary .product-info {
    padding-top: 30px
}

.product-summary .product-sort {
    color: #000;
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
}

.product-summary .product-name {
    padding-top: 4px;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.5px;
    line-height: 28px;
}

.product-summary .product-price {
    position: relative;
    padding-top: 8px;
    font-weight: 400;
}

.product-summary .product-price span {
    display: inline-block;
    vertical-align: top
}

/* .product-summary .product-price .title{width:60px;padding-top:6px;text-align:right;font-size:12px;line-height:18px} */
/* .product-summary .product-price .price{padding-left:12px;font-size:20px;line-height:26px} */
/* .product-summary .product-price .unit{padding-top:6px;padding-left:2px;padding-right:20px;font-size:12px;line-height:18px} */
.product-summary .product-price + .product-price {
    padding-top: 4px
}

.product-order-wrap {
    position: relative
}

.product-order-util {
    position: relative
}

.product-order-util-block {
    position: relative;
    display: none
}

.product-order-util {
    padding-bottom: 20px
}

.product-order-util.fix {
    position: fixed;
    z-index: 1501;
    bottom: 0;
    right: 0;
    left: 0;
    padding-bottom: 0;
    border-top: 1px solid rgba(48,48,48,0.3);
    background-color: #fff
}

.product-order-util.fix.none {
    display: none
}

.product-order-util.fix + .product-order-util-block {
    display: block
}

.product-order-util.fix.is-selected {
    border-top: 1px solid rgba(48,48,48,0.3)
}

.product-order-util .order-summary-close {
    display: none
}

/* .product-order-util .order-summary{display:none} */
.product-order-util.fix .order-summary {
    display: none
}

.product-order-util.fix.is-selected .order-summary {
    display: block
}

.product-order-util.fix.is-selected {
    padding-top: 0
}

.product-order-util.fix.is-selected .order-summary-close {
    display: flex;
    width: 50px;
    height: 20px;
    top: -20px;
    left: 50%;
    border-top: 1px solid rgba(48,48,48,0.3);
    border-right: 1px solid rgba(48,48,48,0.3);
    background-color: #fff;
    border-left: 1px solid rgba(48,48,48,0.3);
    transform: translateX(-50%);
    justify-content: center;
    align-items: center
}

.product-order-util.fix.is-selected .order-summary-close span {
    position: absolute;
    display: block;
    top: 50%;
    margin-top: -3px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.product-order-util .order-summary-close {
    position: absolute
}

.product-order-util .order-summary-wrap {
    padding: 8px 24px 2px
}

/* .product-order-util.fix .order-summary-wrap{overflow:hidden;overflow-y:auto;max-height:140px} */
.product-order-util .order-summary-wrap {
    overflow: hidden;
    overflow-y: auto;
    max-height: 200px;
    -webkit-overflow-scrolling: touch
}

.product-order-util .product-order-title {
    position: relative;
    padding-bottom: 5px;
    text-align: left
}

.product-order-util .order-summary-wrap .ps_cl_oai_main:first-child .product-order-title {
    display: none
}

.product-order-util .form-select select {
    height: 40px;
    font-size: 16px;
    line-height: 40px
}

.product-order-util .option-area {
    padding-top: 10px;
    padding-bottom: 10px
}

.product-order-util .option-area + .option-area {
    border-top: 1px solid rgba(48,48,48,0.3)
}

.product-order-util .option-area:last-child {
    padding-bottom: 2px
}

.product-order-util .order-summary-wrap .ps_cl_oai_main:first-child .option-area {
    padding-top: 5px
}

.product-order-util .option-title {
    color: #303030;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 10px;
    margin-top: 5px;
    padding-left: 10px
}

.product-order-util .btn-control.delete {
    position: absolute;
    display: flex;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    justify-content: center;
    align-items: center
}

.product-order-util .btn-control.delete span {
    overflow: hidden;
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    text-indent: -9999px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close.svg);
    background-size: 14px 14px
}

.product-order-util .product-order-item {
    display: flex;
    position: relative
}

.product-order-util .product-order-item .product-quantity {
    width: 100px
}

.product-order-util .product-order-item .product-subtotal {
    width: calc(100% - 100px);
    text-align: right
}

.product-order-util .product-order-item .product-subtotal .amount {
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    vertical-align: top
}

.product-order-util .product-order-item .product-subtotal .unit {
    display: inline-block;
    padding-left: 5px;
    vertical-align: top;
    font-size: 12px;
    line-height: 30px
}

.product-order-util .button-wrapper {
    padding: 8px 24px 10px;
    flex-wrap: wrap
}

.product-order-util.fix .button-wrapper {
    padding: 8px 24px;
    flex-wrap: nowrap
}

.product-order-util #btn-cart,.product-order-util #btn-wish {
    flex: 1;
    order: 2
}

.product-order-util #btn-buy {
    width: 100%;
    margin-bottom: 5px;
    margin-left: 0
}

.product-order-util .button-wrapper.sold-out-button,.product-order-util .button-wrapper2.sold-out-button {
    flex-wrap: nowrap
}

.product-order-util .button-wrapper.sold-out-button #btn-wish,.product-order-util .button-wrapper2.sold-out-button #btn-wish {
    margin-left: 10px
}

.product-order-util .button-wrapper.sold-out-button .sold-out,.product-order-util .button-wrapper2.sold-out-button .sold-out {
    margin-left: 0;
    flex: 1
}

.product-order-util.fix #btn-buy {
    width: auto;
    order: 2;
    margin-left: 5px;
    margin-bottom: 0;
    flex: 1
}

/* .product-order-util.fix .product-n-pay{display:none} */
/* .product-order-util.fix #btn-buy{width:auto;order:2;margin-left:5px;margin-bottom:0;flex:1} */
/* .product-order-util .product-n-pay{display:none} */
.product-summary .product-n-pay.nt {
    padding-top: 20px;
    display: none
}

.product-summary .product-order-util.fix .product-n-pay.nt {
    display: block
}

.product-summary .product-n-pay.nb {
    padding-top: 12px;
    padding-bottom: 10px
}

.product-summary .product-n-pay.nb {
    display: block
}

.product-summary .product-order-util.fix .product-n-pay.nb {
    display: none
}

.product-summary .product-n-pay {
    width: 100% !important;
    padding-right: 24px;
    padding-left: 24px;
    font-weight: 100;
}

.product-summary .product-n-pay .npay_storebtn_bx {
    width: 100% !important
}

.order-content .cart-n-pay {
    padding-top: 20px
}

.order-content .cart-n-pay .npay_storebtn_bx {
    width: 100% !important
}

.product-order-util .sn-button {
    font-weight: 400;
}

.product-detail-related {
    position: relative;
    padding-top: 35px;
    padding-bottom: 55px
}

.product-detail-related .related-header {
    padding-bottom: 35px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.product-detail-related .related-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    /*height:220px*/
    height: 100%;
}

.product-detail-related .related-container::-webkit-scrollbar {
    display: none;
    background-color: transparent;
    -webkit-appearance: none
}

.product-detail-related .related-container::-webkit-scrollbar-track {
    display: none;
    background-color: transparent;
    -webkit-appearance: none
}

.product-detail-related .related-container::-webkit-scrollbar-thumb {
    display: none;
    background-color: transparent;
    -webkit-appearance: none
}

.product-detail-related .related-list-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: content-box
}

.product-detail-related .related-list-wrapper .product-list-item {
    display: inline-block;
    width: 150px;
    padding-right: 5px;
    padding-left: 5px
}

.product-detail-related .product-item .product-details {
    text-align: center
}

.product-detail-related .product-name {
    display: block;
    padding-top: 10px
}

.product-detail-related .product-price {
    padding-top: 12px;
    font-weight: 300;
}

/* --- Detail Section --- */
.detail-section {
    display: none;
    padding-top: 40px
}

.detail-section.is-selected {
    display: block
}

.detail-section.product-explain img {
    display: block;
    vertical-align: top
}

.detail-section.product-explain > div {
    position: relative
}

.detail-section.product-explain iframe {
    width: 100%;
    height: auto
}

.detail-section.product-explain .product-video {
    margin: 0 -25px
}

.detail-section.product-explain .product-video .video-area {
    height: 230px;
    background-color: #f1f1f1
}

.detail-section.product-explain .product-video .video-header {
    height: 35px;
    line-height: 35px;
    text-align: center
}

/* .detail-section.product-explain .component{padding-right:0;padding-left:0;min-width:auto} */
.detail-section.product-explain .component .explain.old img {
    display: block;
    margin-right: auto;
    margin-left: auto
}

.detail-section.product-explain .Nanum a {
    font-family: 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif;
    letter-spacing: 0.02em
}

.detail-section.product-explain .Nanum a:hover,.Nanum a:active,.Nanum a:link {
    font-family: 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif;
    letter-spacing: 0.02em
}

.detail-section.product-explain .rel {
    position: relative !important
}

.detail-section.product-explain .abs {
    position: absolute !important
}

.detail-section.product-explain .l {
    text-align: left !important
}

.detail-section.product-explain .c {
    text-align: center !important
}

.detail-section.product-explain .r {
    text-align: right !important
}

.detail-section.product-explain .t {
    vertical-align: top !important
}

.detail-section.product-explain .m {
    vertical-align: middle !important
}

.detail-section.product-explain .b {
    vertical-align: bottom !important
}

.detail-section.product-explain .mb0 {
    margin-bottom: 0 !important
}

.detail-section.product-explain .mb5 {
    margin-bottom: 5px !important
}

.detail-section.product-explain .mb10 {
    margin-bottom: 10px !important
}

.detail-section.product-explain .mb15 {
    margin-bottom: 15px !important
}

.detail-section.product-explain .mb20 {
    margin-bottom: 20px !important
}

.detail-section.product-explain .mb25 {
    margin-bottom: 25px !important
}

.detail-section.product-explain .mb30 {
    margin-bottom: 30px !important
}

.detail-section.product-explain .mb40 {
    margin-bottom: 40px !important
}

.detail-section.product-explain .mr0 {
    margin-right: 0 !important
}

.detail-section.product-explain .mr5 {
    margin-right: 5px !important
}

.detail-section.product-explain .mr10 {
    margin-right: 10px !important
}

.detail-section.product-explain .mr15 {
    margin-right: 15px !important
}

.detail-section.product-explain .mr20 {
    margin-right: 20px !important
}

.detail-section.product-explain .mr25 {
    margin-right: 25px !important
}

.detail-section.product-explain .mr30 {
    margin-right: 30px !important
}

.detail-section.product-explain .mr100 {
    margin-right: 100px !important
}

.detail-section.product-explain .pt5 {
    padding-top: 5px !important
}

.detail-section.product-explain .floatL {
    float: left !important
}

.detail-section.product-explain .floatR {
    float: right !important
}

.detail-section.product-explain .clear {
    clear: both !important
}

.detail-section.product-explain .clearfix:after {
    content: "";
    display: block;
    clear: both
}

.detail-section.product-explain .of {
    overflow: hidden
}

.detail-section.product-explain .fn11 {
    font-size: 11px
}

.detail-section.product-explain .fn12 {
    font-size: 12px
}

.detail-section.product-explain .fn12 {
    font-size: 12px;
    line-height: 18px
}

.detail-section.product-explain .col1 {
    color: #e68a91
}

.detail-section.product-explain .col2 {
    color: #d2a579
}

.detail-section.product-explain .col3 {
    color: #ff0000
}

.detail-section.product-explain .col4 {
    color: #4a3f73
}

.detail-section.product-explain .movie {
    position: absolute;
    top: 15px;
    left: 15px
}

.detail-section.product-explain .ul1 {
    padding: 0 15px ;
    margin-top: 8px;
    font-size: 12px;
    font-family: Nanum Gothic,'³ª´®°íµñ',Dotum,helvetica,sans-serif
}

.detail-section.product-explain .ul1 li {
    padding-bottom: 5px;
    list-style: outside url('http://www.sonatural.co.kr/design/sona6769/images/pro_one.png')
}

.detail-section.product-explain .ul2 {
    padding-left: 20px;
    line-height: 1.5em;
    margin-top: 8px;
    font-size: 12px;
    font-family: Nanum Gothic,'³ª´®°íµñ',Dotum,helvetica,sans-serif
}

.detail-section.product-explain .ul2 li {
    list-style-type: decimal
}

.detail-section.product-explain .tit_detail365 {
    border-bottom: 1px solid #b8b8b8
}

.detail-section.product-explain .tit_detail365 .txt {
    padding: 3px 10px;
    background-color: #b8b8b8;
    color: #fff;
    font-size: 11px
}

.detail-section.product-explain .head_t {
    padding-top: 5px;
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    display: block;
    color: #303030;
    font-family: 'Noto Sans KR'
}

.detail-section.product-explain .head_s {
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    display: block
}

.detail-section.product-explain .ban {
    position: absolute;
    top: 0;
    right: 0
}

.detail-section.product-explain .sel {
    background-color: #d2a579;
    color: #fff
}

.detail-section.product-explain .sel2 {
    background-color: #4a3f73;
    color: #fff
}

/* .detail-section.product-explain .explain img{width:100% !important} */
.detail-section.product-explain .explain:not(.old) img {
    width: 100% !important
}

.detail-section.product-explain .explain + .video {
    margin-top: 150px
}

.detail-section.product-explain .explain .explain-head {
    text-align: center
}

.detail-section.product-explain .explain .explain-head + .explain-figure,.detail-section.product-explain .explain .explain-head + #so_idGoodsDescription {
    padding-top: 70px
}

.detail-section.product-explain .explain-head .title-en {
    padding-bottom: 20px;
    text-transform: uppercase;
    color: #303030;
    font-family: 'Noto Sans KR';
    font-size: 14px;
    font-weight: 800;
    line-height: 20px
}

.detail-section.product-explain .explain-head .title {
    padding-bottom: 45px;
    color: #303030;
    font-family: 'Noto Sans KR';
    font-size: 46px;
    font-weight: 600;
    line-height: 52px
}

.detail-section.product-explain .explain-head .desc {
    color: #757575;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    line-height: 28px
}

.detail-section.product-explain .video {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background-color: #303030;
    text-align: center
}

.detail-section.product-explain .explain .video {
    margin-top: 15px;
    margin-bottom: 15px
}

.detail-section.product-explain .video.load .video-cover {
    display: none
}

.detail-section.product-explain .video.load .video-util {
    display: none
}

.detail-section.product-explain .video.load .video-title {
    display: none
}

.detail-section.product-explain .video .video-frame,.detail-section.product-explain .video .video-cover {
    position: absolute;
    width: 100%;
    height: 100%
}

.detail-section.product-explain .video .video-frame iframe {
    width: 100%;
    height: 100%
}

.detail-section.product-explain .video .video-cover img {
    width: 100%
}

.detail-section.product-explain .video .video-util,.detail-section.product-explain .video .video-title {
    position: absolute
}

.detail-section.product-explain .video .video-util {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -35px;
    margin-left: -25px;
    border: 4px solid #fff;
    border-radius: 50%
}

.detail-section.product-explain .video .video-util button {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 20px;
    margin-left: -5px;
    margin-top: -10px;
    padding: 0
}

.detail-section.product-explain .video .video-util button span {
    overflow: hidden;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #fff;
    text-indent: -9999px
}

.detail-section.product-explain .video .video-title {
    bottom: 15px;
    width: 100%;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 16px;
    font-weight: 600;
    line-height: 22px
}

.detail-section.product-explain .col1 {
    color: #e68a91 !important
}

.detail-section.product-explain .col2 {
    color: #d2a579 !important
}

.detail-section.product-explain .col3 {
    color: #ff0000 !important
}

.detail-section.product-explain .col4 {
    color: #4a3f73 !important
}

.detail-section.product-explain .cos1 {
    color: #1c1c1c !important
}

.detail-section.product-explain .cos2 {
    color: #515151 !important
}

.detail-section.product-explain .cos3 {
    color: #ff0000 !important
}

.detail-section.product-explain .cos4 {
    color: #ff3399 !important
}

.detail-section.product-explain .cos5 {
    color: #ff9600 !important
}

.detail-section.product-explain .cos6 {
    color: #a13d00 !important
}

.detail-section.product-explain .cos7 {
    color: #53aea8 !important
}

.detail-section.product-explain .cos8 {
    color: #e57981 !important
}

.detail-section.product-explain .cos9 {
    color: #e5af0c !important
}

.detail-section.product-explain .cos10 {
    color: #f36ea5 !important
}

.detail-section.product-explain .cos11 {
    color: #2e8dbb !important
}

.detail-section.product-explain .cos12 {
    color: #f4545a !important
}

.detail-section.product-explain .cos13 {
    color: #6a4b1a !important
}

.detail-section.product-explain .cos14 {
    color: #76A021 !important
}

.detail-section.product-explain .cos15 {
    color: #f35905 !important
}

.detail-section.product-explain .cos16 {
    color: #d29c67 !important
}

.detail-section.product-explain .cos17 {
    color: #4a3f73 !important
}

.detail-section.product-explain .cos18 {
    color: #39521d !important
}

.detail-section.product-explain .cos19 {
    color: #662d91 !important
}

.detail-section.product-explain .cos20 {
    color: #46C3D2 !important
}

.detail-section.product-explain .cos21 {
    color: #16b1b5 !important
}

.detail-section.product-explain .cos1_b {
    background-color: #1c1c1c;
    color: #fff !important
}

.detail-section.product-explain .cos2_b {
    background-color: #515151;
    color: #fff !important
}

.detail-section.product-explain .cos3_b {
    background-color: #ff0000;
    color: #fff !important
}

.detail-section.product-explain .cos4_b {
    background-color: #ff3399;
    color: #fff !important
}

.detail-section.product-explain .cos5_b {
    background-color: #ff9600;
    color: #fff !important
}

.detail-section.product-explain .cos6_b {
    background-color: #a13d00;
    color: #fff !important
}

.detail-section.product-explain .cos7_b {
    background-color: #53aea8;
    color: #fff !important
}

.detail-section.product-explain .cos8_b {
    background-color: #e57981;
    color: #fff !important
}

.detail-section.product-explain .cos9_b {
    background-color: #e5af0c;
    color: #fff !important
}

.detail-section.product-explain .cos10_b {
    background-color: #f36ea5;
    color: #fff !important
}

.detail-section.product-explain .cos11_b {
    background-color: #2e8dbb;
    color: #fff !important
}

.detail-section.product-explain .cos12_b {
    background-color: #f4545a;
    color: #fff !important
}

.detail-section.product-explain .cos13_b {
    background-color: #6a4b1a;
    color: #fff !important
}

.detail-section.product-explain .cos14_b {
    background-color: #76A021;
    color: #fff !important
}

.detail-section.product-explain .cos15_b {
    background-color: #f35905;
    color: #fff !important
}

.detail-section.product-explain .cos16_b {
    background-color: #d29c67;
    color: #fff !important
}

.detail-section.product-explain .cos17_b {
    background-color: #4a3f73;
    color: #fff !important
}

.detail-section.product-explain .cos18_b {
    background-color: #39521d;
    color: #fff !important
}

.detail-section.product-explain .cos19_b {
    background-color: #662d91;
    color: #fff !important
}

.detail-section.product-explain .cos20_b {
    background-color: #46C3D2;
    color: #fff !important
}

.detail-section.product-explain .cos21_b {
    background-color: #16b1b5;
    color: #fff !important
}

/* .detail-section.product-explain .ingredient{display:none} */
/* .detail-section.product-explain .set-product-step{display:none} */
/* .detail-section.product-explain .guides{display:none}  */
.product-details .ingredient .major-title {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Noto Sans KR';
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 18px;
}

.product-details .ingredient-list {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 20px
}

.product-details .ingredient-list::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.product-details .ingredient-list .ingredient-item {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 48px;
    padding: 16px 0;
    margin-right: 7px;
    margin-left: 7px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/hex.png);
    background-size: 70px 80px;
    box-sizing: content-box
}

.product-details .ingredient-list .ingredient-item .title {
    display: table;
    width: 70px;
    height: 100%;
    text-align: center;
    color: #303030;
    font-family: 'Noto Sans KR';
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    white-space: nowrap;
}

.product-details .ingredient-list .ingredient-item .title span {
    display: table-cell;
    width: 100%;
    vertical-align: middle
}

.product-details .set-product-step .component {
    padding-left: 0;
    padding-right: 0
}

.product-details .set-product-step .major-title {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.product-details .set-product-step .step-list-container {
    overflow: hidden;
    padding-top: 20px;
    text-align: center
}

.product-details .set-product-step .step-list {
    position: relative;
    margin-right: auto;
    margin-left: auto
}

.product-details .set-product-step .step-list::after {
    content: '';
    position: relative;
    display: block;
    clear: both
}

.product-details .set-product-step .step-list .step-item {
    float: left;
    width: 150px;
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: top;
    box-sizing: content-box;
    text-align: center
}

.product-details .set-product-step .step-list .step-item:first-child {
    padding-left: 24px
}

.product-details .set-product-step .step-list .step-item:last-child {
    padding-right: 24px
}

.product-details .set-product-step .step-list .step-title {
    display: inline-block;
    position: relative;
    width: 100%;
    color: #303030;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
}

.product-details .set-product-step .step-list .step-title span {
    display: inline-block
}

.product-details .set-product-step .step-list .step-title span.title {
    padding-right: 4px
}

.product-details .set-product-step .step-item .figure {
    display: block;
    width: 150px;
    height: 150px;
    margin-right: auto;
    margin-left: auto
}

.product-details .set-product-step .step-item .step-product {
    padding-top: 10px
}

.product-details .set-product-step .step-item .figure img {
    width: 100%
}

.product-details .set-product-step .step-item .step-product .title {
    display: inline-block;
    padding-top: 5px;
    vertical-align: top;
    color: #303030;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 20px
}

.product-details .set-product-step .step-item .desc {
    padding-top: 8px;
    color: #757575;
    font-size: 12px;
    line-height: 16px
}

.product-details .guides {
    padding-top: 30px
}

.product-details .guides .guide-table {
    position: relative
}

.product-details .guides .guide-table .guide-row {
    padding-top: 20px;
    padding-bottom: 25px;
    color: #303030;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.product-details .guides .guide-table .guide-row::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

.product-details .guides .guide-table .guide-row:last-child {
    border-bottom: none
}

.product-details .guides .guide-table .guide-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.product-details .guides .guide-content {
    padding-top: 15px;
    font-weight: 100;
}

.product-details .guides .guide-content .use-list li {
    display: block;
    position: relative;
    padding-left: 20px;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 16px
}

.product-details .guides .guide-content .use-list li b {
    position: relative;
    display: inline-block;
    padding-right: 21px
}

.product-details .guides .guide-content .use-list li b::after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    width: 0;
    height: 10px;
    border-right: 1px solid rgba(48,48,48,0.3)
}

.product-details .guides .guide-content .use-list li span {
    position: relative;
    display: inline-block;
    color: #000;
}

.product-details .guides .guide-content .use-list li::before {
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 0;
    width: 4px;
    height: 4px;
    border: 1px solid rgba(48,48,48,0.3);
    border-radius: 50%
}

.product-details .guides .guide-content .use-list.step li span {
    display: inline-block;
    padding-right: 20px;
    font-weight: 600
}

.product-details .guides .guide-content .use-list.step li span::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 6px;
    width: 8px;
    height: 0;
    margin-top: -1px;
    border-top: 1px solid
}

.product-details .guides .guide-content .use-list.step li span:last-child::after {
    display: none;
    border: none
}

.product-details .guides .guide-content .use-notice {
    position: relative;
    padding-bottom: 4px;
    padding-left: 12px;
    color: #303030;
    font-size: 12px;
    line-height: 18px
}

.product-details .guides .guide-content .use-notice:last-child {
    padding-bottom: 0
}

.product-details .guides .guide-content .use-notice::before {
    content: '¡Ø';
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.product-details .guides .guide-content p {
    margin-top: -2px;
    color: #000;
    font-size: 12px;
    line-height: 16px;
}

.product-details .guides .guide-content .use-order {
    counter-reset: use-order-counter
}

.product-details .guides .guide-content .use-order li {
    display: block;
    position: relative;
    padding-left: 18px;
    padding-bottom: 10px;
    color: #000;
    font-size: 12px;
    line-height: 16px;
}

.product-details .guides .guide-content .use-order li:nth-child(n+10) {
    padding-left: 22px
}

.product-details .guides .guide-content .use-order li:before {
    content: counter(use-order-counter)'.';
    counter-increment: use-order-counter;
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.product-details .guides .guide-content .use-notice-list {
    color: #757575;
    font-size: 12px;
    line-height: 16px
}

.product-details .guides .guide-content .use-notice-list em {
    font-weight: 600;
    font-style: normal
}

.product-details .guides .guide-content .use-notice-list ol {
    padding-top: 2px;
    counter-reset: use-notice-order-counter
}

.product-details .guides .guide-content .use-notice-list li {
    position: relative;
    display: block;
    padding-left: 18px
}

.product-details .guides .guide-content .use-notice-list li::before {
    content: counter(use-notice-order-counter)')';
    counter-increment: use-notice-order-counter;
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.product-details .guides .guide-content p a {
    color: #757575
}

.detail-section .board-notice {
    padding-top: 14px
}

.detail-section .review-section + .review-section {
    margin-top: 50px;
    padding-top: 45px;
    border-top: 1px solid rgba(48, 48, 48, 0.3)
}

/* --- Review --- */
.review-header {
    text-align: center
}

.review-header .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px
}

.review-header .total {
    display: block;
    padding-top: 4px;
    color: #757575;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px
}

.review-header .total span {
    padding-right: 3px;
    font-family: 'Noto Sans KR'
}

.review-list-content {
}

.review-list-content .list-item {
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.review-list-content .list-item .review-detail {
    display: none
}

.review-list-content .list-item.is-selected {
    border-bottom-color: #757575
}

.review-list-content .list-item.is-selected .review-detail {
    display: block
}

.review-info {
    position: relative;
    padding-top: 15px;
    padding-bottom: 15px
}

.review-content.photo-review .review-info {
    padding-left: 100px
}

.review-info .thumbnail {
    overflow: hidden;
    position: absolute;
    left: 0;
    width: 74px;
    height: 74px
}

.review-info .thumbnail img {
    width: 100%
}

.review-info .title {
    margin-top: -2px;
    padding-bottom: 5px;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px
}

.review-info .title .sort {
    border-radius: 2px;
    border: 1px solid #303030;
    padding: 2px 6px;
    font-size: 12px;
    line-height: 18px;
    margin-right: 8px
}

.review-info .description {
    overflow: hidden;
    height: 18px;
    color: #757575;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    text-overflow: ellipsis
}

.review-info .author {
    padding-top: 8px
}

.review-info .author .by {
    color: #757575;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px
}

.review-info .author .grade {
    display: inline-block;
    width: 70px;
    height: 16px;
    margin: 2px 0 2px 14px;
    background-color: #303030;
    border-radius: 2px;
    vertical-align: top;
    text-align: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px
}

.review-info .date {
    position: absolute;
    right: 0;
    bottom: 15px;
    font-family: 'Noto Sans KR';
    font-size: 14px;
    font-weight: 300;
    line-height: 20px
}

.review-detail {
    border-top: 1px solid #757575;
    padding-top: 20px;
    padding-bottom: 30px;
    padding-left: 30px
}

.review-detail .figure-content {
    width: 100%;
    padding-top: 20px
}

.review-detail .figure-content img {
    width: 100%
}

.review-detail .figure-content img + img {
    padding-top: 15px
}

.review-detail .reply-area {
    padding-top: 25px
}

.review-detail .reply-area .reply-header {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px
}

.review-detail .reply-area .reply-content {
    padding-top: 10px
}

.detail-section .sn-board-write {
    display: none
}

.detail-section .sn-board-write.active {
    display: block
}

.detail-section .sn-board-write .button-wrapper .btn-modify {
    display: none
}

.detail-section .sn-board-write.modify .button-wrapper .btn-apply {
    display: none
}

.detail-section .sn-board-write.modify .button-wrapper .btn-modify {
    display: inline-block
}

/* --- Request --- */
.inquiry-header {
    color: #757575;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px
}

.inquiry-header .text em {
    color: #303030;
    font-style: normal;
    text-decoration: underline
}

.inquiry-content .sn-list-header {
}

.inquiry-content .sn-list-content {
}

.inquiry-content .sn-list-content .accordion-summary {
    display: inline-block
}

.inquiry-content .sn-list-content .accordion-summary p {
    display: inline-block
}

/****************/
/**** Order. ****/
/****************/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.sn-quantity {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 28px
}

.sn-quantity .quantity {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px
}

.sn-quantity .btn-control {
    position: absolute;
    top: 0;
    display: flex;
    width: 25px;
    height: 30px;
    align-items: center;
    justify-content: center
}

.sn-quantity .btn-control span {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    text-indent: -9999em
}

.sn-quantity .btn-control span::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 100%;
    height: 1px;
    background-color: #303030
}

.sn-quantity .btn-control.minus {
    left: 0
}

.sn-quantity .btn-control.plus {
    right: 0
}

.sn-quantity .btn-control.plus span::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #303030
}

/* --- common list --- */
.page-container.page-order {
    padding-bottom: 0
}

#page-wish-list.page-container,#page-membership-withdrawal.page-container {
    padding-bottom: 0
}

.page-container.page-brand,.page-container.page-service {
    padding-bottom: 0
}

.order-content .product-list-header {
    position: relative;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

.order-content .product-list-header .form-check {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0
}

.order-content .product-list-header .form-check input {
    position: relative;
    top: 0;
    margin: 0
}

.order-content .product-list-header .title {
    text-align: center
}

.order-content .product-list-wrapper.type-list {
    padding-right: 0;
    padding-left: 0
}

.order-content .product-list-wrapper.type-list .product-list-item {
    padding: 15px 0 10px
}

.order-content .product-list-wrapper.type-list .product-thumbnail {
    position: relative
}

.order-content .product-list-wrapper.type-list .product-thumbnail .form-check {
    z-index: 10;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    width: 18px;
    height: 18px
}

.order-content .product-list-wrapper.type-list .product-thumbnail .form-check input {
    position: relative;
    top: 0;
    margin: 0;
    background-color: rgba(255,255,255,0.6)
}

.order-content .product-list-wrapper.type-list .product-thumbnail .sn-quantity {
    margin-top: 10px
}

.order-content .product-list-wrapper.type-list .product-thumbnail .sn-quantity + .btn_modify {
    position: absolute;
    display: block;
    width: 50px;
    right: -60px;
    bottom: 6px
}

.order-content .product-list-wrapper.type-list .product-details {
    padding-top: 0;
    padding-bottom: 0
}

.order-content .product-list-wrapper.type-list .product-details .product-price {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 4px
}

.order-content .product-list-wrapper.type-list .product-details .product-util {
    margin-top: 12px
}

.order-content .product-list-wrapper.type-list .product-details .product-util .line {
    display: block;
    width: 20px;
    height: 1px;
    background-color: rgba(48,48,48,.2);
    margin-top: 40px
}

.order-content .product-list-wrapper.type-list .product-details .product-quantity {
    position: absolute;
    right: 0;
    top: 0;
    color: #757575
}

.order-content .product-list-wrapper.type-list .product-details .product-quantity .quantity {
    display: inline-block;
    width: 18px;
    text-align: right;
    font-size: 14px
}

.page-order .product-list-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px
}

.page-order .product-list-bottom .total-payment {
    flex: 1;
    padding-left: 10%
}

.page-order .product-list-bottom .total-payment .title {
    display: inline-bloc;
    margin-right: 20px;
    font-size: 13px
}

.page-order .product-list-bottom .total-payment .price {
    font-size: 20px
}

.page-order .product-list-bottom .total-payment .unit {
    font-size: 12px
}

.page-order .product-list-bottom .reserve {
    font-size: 12px;
    color: #757575
}

.page-order .product-list-bottom .reserve .price {
    font-size: 14px
}

.page-order .gift-box {
    position: relative;
    padding: 30px 0;
    text-align: center
}

.page-order .gift-box .gift-subtitle {
    font-size: 14px;
    color: #757575
}

.page-order .gift-box .gift-title {
    padding: 10px 0 12px;
    font-size: 20px;
    font-weight: 600
}

.page-order .gift-box .gift-note {
    color: #00c73c;
    font-weight: 600
}

#page-cart .section {
    padding-top: 30px;
    padding-bottom: 60px
}

.page-order .section.coupon .form-field.coupon div[class^="form-"] + div[class^="form-"] {
    padding-left: 5px
}

.page-order .section.coupon .form-field.coupon .sn-button {
    width: 70px
}

.page-order .section.coupon .form-field.coupon {
}

.page-order .section.coupon .form-field.coupon .form-content {
    padding-left: 0 !important
}

.page-order .section.coupon .form-field.coupon .form-value {
    display: inline-block;
    width: 100%;
    height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(48,48,48,.2);
    font-size: 12px;
    line-height: 30px
}

.form-button a {
    white-space: nowrap
}

#__idPaymentBank, #ps_id_receipt_cash, #ps_id_receipt_cash_person, #ps_id_receipt_cash_corp {
    padding-top: 20px
}

.payment-form input[type="date"] {
    text-align: left
}

.page-order .section.coupon .form-field.coupon .clsCouponReg {
    width: 90px
}

.page-order .section.freebie .freebie-intro {
    position: relative;
    margin-bottom: 20px
}

.page-order .section.freebie .freebie-intro .intro-text {
}

.page-order .section.freebie .freebie-info {
    position: relative;
    margin-bottom: 20px
}

.page-order .section.freebie .freebie-info .info-text {
    margin-bottom: 12px;
    font-size: 14px;
    color: #757575
}

.page-order .section.freebie .freebie-info .info-text {
    display: none
}

.page-order .section.freebie .freebie-info .info-text .name {
    color: #303030
}

.page-order .section.freebie .freebie-info .info-text .price {
    color: #dd426f
}

.page-order .section.freebie .freebie-nearly {
    display: block;
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 400
}

.page-order .section.freebie .freebie-nearly {
    display: none
}

.page-order .section.freebie .freebie-list-wrap {
    padding: 20px 0;
    border: solid rgba(48,48,48,.2);
    border-width: 1px 0
}

.page-order .section.freebie .freebie-list-wrap + .freebie-list-wrap {
    border-top: none
}

.page-order .section.freebie .freebie-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.page-order .section.freebie .freebie-item {
    display: inline-block;
    /*width:100px*/
}

.page-order .section.freebie .freebie-item .product-item {
    display: flex;
    flex-flow: column;
    text-align: center
}

.page-order .section.freebie .freebie-item .thumbnail {
    float: left;
    display: inline-block
}

.page-order .section.freebie .freebie-item .thumbnail img {
    width: 50%
}

.page-order .section.freebie .freebie-item .name {
    padding-top: 4px;
    clear: left;
    display: inline-block;
    font-weight: 600
}

.page-order .section.freebie .freebie-item .sn-quantity {
    width: 50px;
    display: block;
    margin: 0 auto;
    padding: 0;
    padding-top: 10px
}

.page-order .section.freebie .freebie-item .sn-quantity select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    padding: 0 0 0 7px;
    border: none;
    border-bottom: 1px solid rgba(40, 40, 40, .2);
    background: #fff;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.page-order .section.freebie .remain-amount {
    position: relative;
    padding-top: 30px;
    text-align: center
}

.page-order .section.freebie .remain-amount {
    display: none
}

.page-order .section.freebie .remain-amount .title {
    margin-bottom: 5px;
    font-size: 14px;
    color: #dd426f
}

.page-order .section.freebie .remain-amount .amount {
    font-size: 20px;
    color: #dd426f
}

/* .page-order .section.payment .form-select{width:180px} */
.page-order .section.total-amount {
    position: relative
}

#frmPG {
    border-top: none !important
}

.page-order .section.total-amount .form-value {
    text-align: right
}

.page-order .section.total-amount .form-field.total .price {
    font-size: 16px
}

.page-order .section.total-amount .price i {
    display: inline-block;
    margin-right: 2px
}

.page-order .section.buttons {
    padding-top: 40px
}

.page-order .popup-coupon .product-list-container {
    position: relative;
    border-bottom: 1px solid rgba(48,48,48,.2);
    margin-bottom: 30px
}

.page-order .popup-coupon .product-quantity {
    bottom: auto;
    top: 0
}

.page-order .popup-coupon .product-coupon {
    position: absolute;
    bottom: 5px;
    left: 4%;
    right: 0;
    margin-left: -3px
}

.page-order .popup-coupon .product-coupon .no-coupon {
    padding-left: 6px
}

.page-order .popup-coupon .total-amount {
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 0 10%;
    font-size: 16px
}

.page-order .popup-coupon .total-amount::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(48,48,48,.2)
}

.page-order .popup-coupon .total-amount .total-discount {
    color: #dd426f
}

.page-order .popup-coupon .coupon-list {
}

.page-order .popup-coupon .sn-list-content .list-item {
    opacity: .5
}

.page-order .popup-coupon .sn-list-content .list-item.is-valid {
    opacity: 1
}

.page-order .popup-coupon .item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 75px
}

.page-order .popup-coupon .item-inner .details {
    flex: 2;
    font-size: 14px
}

.page-order .popup-coupon .item-inner .details .name {
    display: block
}

.page-order .popup-coupon .item-inner .details .condition {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: #999
}

.page-order .popup-coupon .item-inner .period {
    flex: 1;
    text-align: right
}

.page-order .popup-coupon .item-inner .period .line {
    display: block;
    text-align: right
}

.page-order .popup-coupon .item-inner .status {
    flex: 1;
    text-align: right
}

.page-order .popup-coupon .no-details {
    padding-top: 12%;
    text-align: center;
    font-size: 14px
}

.page-order .popup-coupon .coupon-registration {
}

.page-order .popup-coupon .coupon-registration .form-row {
    justify-content: space-between
}

.page-order .popup-coupon .coupon-registration .form-input::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 15px;
    width: 7px;
    height: 1px;
    background-color: #303030
}

.page-order .popup-coupon .coupon-registration .form-input input {
    padding-left: 0;
    text-align: center
}

.page-order .popup-coupon .registration-header {
    position: relative;
    padding-bottom: 50px;
    text-align: center
}

.page-order .popup-coupon .registration-header .title {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600
}

.page-order .popup-coupon .registration-header .description {
    line-height: 1.8
}

.page-coupon .popup-coupon .registration-header {
    text-align: center
}

.page-coupon .popup-coupon .registration-header .title {
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px
}

.page-coupon .popup-coupon .registration-header .description {
    padding-bottom: 50px;
    font-size: 12px;
    line-height: 20px
}

.coupon-form.digits-8 .description.type-16 {
    display: none
}

.coupon-form.digits-16 .description.type-8 {
    display: none
}

.coupon-form.digits-8 .form-field.coupon .form-input:nth-of-type(3),.coupon-form.digits-8 .form-field.coupon .form-input:nth-of-type(4) {
    display: none
}

.form-field.coupon .form-input + .form-input::before {
    content: '';
    position: absolute;
    display: block;
    bottom: 15px;
    left: 5px;
    width: 4px;
    height: 0;
    border-top: 1px solid #757575
}

/****************/
/**** Login. ****/
/****************/
.page-container.page-login,.page-container#page-join-completed {
    padding-bottom: 0
}

.page-login .member-login .form-button, .page-login .nonmember-login .form-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px
}

.page-login .member-login .form-button .sn-button {
    height: 70px;
    line-height: 70px;
    font-weight: 600
}

#page-login.page-login .nonmember-login .form-button .sn-button {
    height: 110px;
    line-height: 110px;
    font-weight: 600
}

#page-login.page-login .order-member .nonmember-login .form-button .sn-button {
    height: 70px;
    line-height: 70px;
    font-weight: 600
}

.page-login .member-login .form-row.check, .page-login .nonmember-login .form-row.check {
    margin-right: -100px;
    width: calc(100% + 100px)
}

.page-login .member-login {
}

.page-login .login-help {
    display: flex;
    margin-top: 40px
}

.page-login .login-help .forgot-item.id {
    width: 46%;
    margin-right: 6%;
    border-right: 1px solid rgba(48,48,48,0.3)
}

.page-login .login-help .forgot-item .title {
    margin-bottom: 6px
}

.sidebar-content .login-help .forgot-item {
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    font-weight: 300;
}

.sidebar-content .login-help .forgot-item .nav-link.underline::after {
    background-color: #fff
}

.page-login .nonmember-login {
}

.page-login .nonmember-login .secondary-menu {
    padding-bottom: 40px
}

/* #guest-phone{margin-top:0} */
.page-login .nonmember-login .form-row.check label {
    margin-bottom: 4px
}

.section.member-only {
}

.section.member-only .section-header {
    padding-top: 20px
}

.section.member-only .btn-fold + .member-avail {
    margin-top: 0
}

.section.member-only .member-avail {
    width: 80%;
    margin: 40px auto 50px;
    text-align: center
}

.section.member-only .member-avail .nav-link {
    margin-top: 30px
}

.section.member-only .member-avail .avail-list {
    position: relative
}

.section.member-only .member-avail .avail-list::after {
    content: '';
    clear: both;
    display: block
}

.section.member-only .member-avail .avail-item {
    float: left;
    width: 33.3%
}

.section.member-only .member-avail .avail-item:nth-child(n+4) {
    margin-top: 30px
}

.section.member-only .member-avail .avail-icon {
    display: flex;
    width: 50px;
    height: 50px;
    margin: 0 auto 6px;
    align-items: center;
    justify-content: center
}

.section.member-only .member-avail .avail-icon img {
    width: 50px;
    height: 50px
}

.section.member-only .member-avail .avail-item .title {
    display: block;
    color: #757575
}

.section.member-only .member-benefit {
}

.section.member-only .member-benefit .benefit-list {
}

.section.member-only .member-benefit .benefit-item {
    display: flex
}

.section.member-only .member-benefit .benefit-item + .benefit-item {
    margin-top: 25px
}

.section.member-only .member-benefit .benefit-icon {
    display: flex;
    flex: 0 0 35%;
    align-items: center;
    justify-content: center;
    width: 100px
}

.section.member-only .member-benefit .benefit-icon img {
    width: 70px;
    height: 70px
}

.section.member-only .member-benefit .benefit-content {
}

.section.member-only .member-benefit .benefit-content .subtitle {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold
}

.section.member-only .member-benefit .benefit-content .title {
    display: block;
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold
}

.section.member-only .member-benefit .benefit-content .description {
    color: #757575
}

.section.member-event {
    position: relative;
    text-align: center;
    height: 250px;
    padding: 0;
    border-top: 1px solid rgba(48,48,48,0.3)
}

.section.member-event .member-event-banner .title {
    padding-top: 35px;
    padding-bottom: 6px;
    font-size: 20px;
    line-height: 26px;
    font-weight: bold
}

.section.member-event .member-event-banner .description {
    font-size: 12px;
    line-height: 18px
}

.section.member-event .member-event-banner .icon {
    padding-top: 25px;
    text-align: center
}

.section.member-event .member-event-banner .icon img {
    width: 50px;
    height: 50px
}

.section.member-event .sn-swiper-pagination {
    justify-content: center
}

/* wonder-login 20181114 */
.wonder {
    margin-top: 30px;
}

.wonder .won-bt {
    background-color: #1a1a1c;
    color: white;
    padding: 4px 30%;
    text-align: center;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 36px;
    display: inline-block;
    width=44px;}

.wonder .won-img {
    width: 44px;
    height: 44px;
    float: left;
}

/*******************/
/**** Register. ****/
/*******************/
.page-join {
}

.page-join .step-guide {
    display: block;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 55px
}

.page-join .step-list {
    display: flex;
    justify-content: space-around
}

.page-join .step-guide ol {
    display: flex;
    justify-content: space-around
}

.page-join .step-guide li {
    display: inline-block
}

.page-join .step-guide li b {
    display: block;
    height: 20px
}

.page-join .step-guide li .number {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-color: #fff;
    border: 1px solid #757575;
    border-radius: 50%;
    vertical-align: top;
    text-align: center;
    color: #757575;
    font-family: 'Noto Sans KR';
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    vertical-align: top
}

.page-join .step-guide li.is-current .number {
    background-color: #303030;
    border-color: #303030;
    color: #fff
}

.page-join .step-guide li .title {
    display: inline-block;
    padding-left: 6px;
    color: #999;
    font-size: 13px;
    line-height: 20px;
    vertical-align: top
}

.page-join .step-guide li.is-current .title {
    color: #303030
}

.page-join .join-terms-intro {
    padding-bottom: 30px;
    text-align: center;
    color: #303030;
    font-size: 13px;
    line-height: 20px;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.page-join .join-terms .form-container {
    padding-top: 25px;
    padding-bottom: 35px
}

.page-join .join-terms .form-container .divided-box:first-child {
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.page-join .join-terms .form-container .divided-box + .divided-box {
    padding-top: 15px
}

.page-join .join-terms .form-container .divided-box:first-child .form-row {
    justify-content: space-between
}

.page-join .join-terms .form-container .divided-box:first-child .form-check {
    flex: 1
}

.page-join .join-terms .form-container .divided-box:first-child .nav-link {
    height: 20px;
    margin-top: 5px;
    line-height: 20px
}

.page-join .create-form .form-fields + .form-fields {
    padding-top: 55px
}

.page-join .create-form .form-field.address {
    padding-bottom: 10px
}

.page-join .create-form .form-etc {
    padding-top: 5px
}

.page-join .create-form #forever-notice .guide-text:nth-of-type(2),.page-join .create-form #forever-notice .guide-text:nth-of-type(2) * {
    color: #303030
}

.page-join .create-form #non-forever-notice * {
    color: #dd426f
}

.page-join .create-form .form-fields + .button-wrapper {
    padding-top: 55px
}

.page-join .join-completed {
}

.page-join .join-completed .completed-area {
    text-align: center
}

.page-join .join-completed .completed-area .logo {
    margin-bottom: 30px
}

.page-join .join-completed .completed-area .sn-logo {
    display: inline-block;
    width: 130px;
    height: 98px;
    margin-left: 8px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/logo-sonatural_m.svg);
    background-size: 130px 98px
}

.page-join .join-completed .completed-area .title {
    margin-bottom: 30px;
    font-size: 20px;
    font-weight: bold
}

.page-join .join-completed .completed-area .decription {
    margin-bottom: 15px;
    color: #757575;
    font-weight: bold
}

.page-join .join-completed + .join-completed {
    padding-top: 20px
}

/******************/
/**** My Page. ****/
/******************/
/* --- Member --- */
.grade {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    background-color: #ccc;
    color: #fff;
    font-size: 12px
}

.page-mypage {
}

.page-mypage .my-membership-grade {
    position: relative;
    padding: 30px 0 15px;
    text-align: center
}

.page-mypage .my-membership-grade .greeting {
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
}

.page-mypage .my-membership-grade .grade {
    margin-top: 10px;
    font-weight: 300;
}

.page-mypage .my-membership-grade .grade-benefit {
    margin-top: 10px
}

.page-mypage .my-membership-grade .grade-benefit .link-arrow {
    display: inline-block
}

.cou-align {
    padding-bottom: 30px;
    text-align: center
}

.cou-num {
    font-family: 'Noto Sans KR';
    font-size: 16px;
    font-weight: 300;
}

.cou-box {
    display: inline-block;
    background-color: #ff6a90;
    color: #fff;
    border: 1px solid #ff6a90;
    padding: 8px 15px;
    border-radius: 2px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    vertical-align: top;
    -webkit-transition: background-color 180ms ease-in-out, border-color 180ms ease-in-out, color 180ms ease-in-out;
    font-weight: 300;
}

.cou-box:hover {
    background-color: #fff;
    color: #ff6a90;
    border-color: #ff6a90
}

.page-mypage .my-shopping-information {
    position: relative;
    padding: 25px 0;
    border: solid rgba(48,48,48,.2);
    border-width: 1px 0;
    background-color: rgba(48,48,48,.03);
    text-align: center
}

.page-mypage .my-shopping-information .retention-list {
    position: relative;
    width: 80%;
    display: inline-block
}

.page-mypage .my-shopping-information .retention-list::after {
    content: '';
    clear: both;
    display: block
}

.page-mypage .my-shopping-information .retention-list .item {
    float: left;
    width: 50%
}

.page-mypage .my-shopping-information .retention-list .coupone, .page-mypage .my-shopping-information .retention-list .message {
    position: relative
}

.page-mypage .my-shopping-information .retention-list .coupone::after, .page-mypage .my-shopping-information .retention-list .message::after {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 1px;
    background-color: rgba(48,48,48,.2)
}

.page-mypage .my-shopping-information .retention-list .item:nth-child(n+3) {
    margin-top: 20px
}

.page-mypage .my-shopping-information .retention-list .title {
    display: block;
    font-size: 13px;
    font-weight: 300;
}

.page-mypage .my-shopping-information .retention-list .content {
    font-size: 15px;
    font-weight: 300;
    line-height: 30px;
}

.page-mypage .mypage-menu {
    position: relative;
    padding-top: 30px
}

.sn-list-header {
    display: flex;
    justify-content: space-between;
    padding: 15px 0
}

.page-mypage .order-history-wrapper {
}

.page-mypage .order-history-item {
    position: relative;
    padding: 15px 0
}

.page-mypage .order-history-item .item-inner {
    position: relative
}

.page-mypage .order-history-item .number {
    margin-bottom: 2px;
    font-size: 12px
}

.page-mypage .order-history-item .number a {
    color: #757575
}

.page-mypage .order-history-item .title {
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600
}

.page-mypage .order-history-item .price {
}

.page-mypage .order-history-item .price .amount {
    display: inline-block;
    margin-right: 2px;
    font-weight: 600
}

.page-mypage .order-history-item .date {
    position: absolute;
    right: 0;
    top: 0
}

.page-mypage .order-history-item .status {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #999
}

.page-mypage .order-history-item.is-valid .status {
    color: #d64747;
    font-weight: 600
}

.page-mypage .order-history-notice {
    padding-top: 30px
}

.page-mypage .coupon-history-wrapper {
}

.page-mypage .coupon-history-header {
}

.page-mypage .coupon-history-header .details {
    flex: 1
}

.page-mypage .coupon-history-header .period {
    width: 20%;
    text-align: right
}

.page-mypage .coupon-history-header .period span {
    display: inline-block;
    width: 63px;
    text-align: center
}

.page-mypage .coupon-history-header .discount {
    width: 20%;
    text-align: right
}

.page-mypage .coupon-history-header .status {
    width: 20%;
    text-align: right
}

.page-mypage .coupon-history-item {
    position: relative
}

.page-mypage .coupon-history-item * {
    opacity: .8
}

.page-mypage .coupon-history-item .item-inner {
    display: flex;
    height: 75px;
    padding-top: 20px;
    justify-content: space-between;
    align-items: flex-start
}

.page-mypage .coupon-history-item .details {
    flex: 1
}

.page-mypage .coupon-history-item .period {
    width: 20%;
    text-align: right
}

.page-mypage .coupon-history-item .period .line {
    display: none
}

.page-mypage .coupon-history-item .period .end {
    position: relative;
    display: inline-block;
    padding-left: 12px
}

.page-mypage .coupon-history-item .period .end::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 6px;
    height: 1px;
    background-color: #303030
}

.page-mypage .coupon-history-item .discount {
    width: 20%;
    text-align: right
}

.page-mypage .coupon-history-item .status {
    width: 20%;
    text-align: right
}

.page-mypage .coupon-history-item.is-valid * {
    opacity: 1
}

.page-mypage .coupon-history-method {
    position: relative;
    padding-top: 40px
}

.page-mypage .coupon-history-method .method-item + .method-item {
    margin-top: 30px
}

.page-mypage .coupon-history-method .header {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: bold
}

.page-mypage .coupon-history-method small {
    display: inline-block;
    margin-top: 4px;
    color: #757575
}

#page-inquiry-board {
}

#page-inquiry-board .inquire-notice .nav-link {
    margin-top: 15px
}

#page-reserve-history .reserve-history-wrapper {
}

#page-reserve-history .reserve-history-header {
}

#page-reserve-history .reserve-history-header .date {
    width: 25%
}

#page-reserve-history .reserve-history-header .details {
    flex: 1;
    text-align: left
}

#page-reserve-history .reserve-history-header .price {
    width: 18%;
    text-align: right
}

#page-reserve-history .reserve-history-header .status {
    width: 18%;
    text-align: right
}

#page-reserve-history .reserve-history-item .item-inner {
    display: flex;
    height: 60px;
    justify-content: space-between;
    align-items: center
}

#page-reserve-history .reserve-history-item .date {
    width: 25%
}

#page-reserve-history .reserve-history-item .details {
    flex: 1;
    text-align: left
}

#page-reserve-history .reserve-history-item .price {
    width: 18%;
    text-align: right
}

#page-reserve-history .reserve-history-item .status {
    width: 18%;
    text-align: right
}

#page-reserve-history .reserve-history-notice {
    padding-top: 40px
}

#page-reserve-history .sn-pagination + .reserve-history-notice {
    padding-top: 0
}

#page-wish-list .wish-list-wrapper {
}

#page-wish-list .wish-list-wrapper .product-list-wrapper.type-list .product-button {
    right: auto;
    left: 10px
}

#page-wish-list .vertical-segment {
    padding-top: 0
}

#page-wish-list .product-list-wrapper + .button-wrapper {
    padding-top: 30px
}

#page-account-change {
}

#page-account-change .form-field.name .sn-button {
    width: 90px
}

#page-account-change .form-field.phone .sn-button {
    margin-top: 6px;
    height: 50px;
    line-height: 50px
}

#page-address-manage .section.delivery-list-wrap {
    padding-bottom: 10px
}

#page-address-manage .sn-list-content .list-item {
}

#page-address-manage .sn-list-content .list-item:last-child {
    border-bottom: none
}

#page-address-manage .sn-list-content .form-check {
    padding-left: 35px
}

#page-address-manage .delivery-list-item {
    position: relative;
    padding: 10px 0
}

#page-address-manage .delivery-list-item .name {
    display: block
}

#page-address-manage .delivery-list-item .phone {
    display: block;
    padding-top: 4px;
    color: #757575
}

#page-address-manage .delivery-list-item .address {
    display: block;
    padding-top: 4px
}

#page-address-manage .delivery-list-item .zipcode {
    display: inline-block;
    margin-right: 4px
}

#page-membership-withdrawal {
}

#page-membership-withdrawal .withdrawal-copntent {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    padding-top: 20px
}

#page-membership-withdrawal .withdrawal-copntent .header {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px
}

#page-membership-withdrawal .withdrawal-copntent .description {
    line-height: 1.8;
    letter-spacing: -0.5px
}

#page-membership-withdrawal .withdrawal-copntent .description + p {
    font-size: 13px;
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.6
}

#page-membership-withdrawal .section-header .title {
    padding-top: 4px;
    font-size: 14px;
    font-weight: 600
}

#page-membership-withdrawal .section.member-only .member-avail {
    margin-bottom: 40px
}

#page-membership-withdrawal .section.member-only .member-benefit {
    padding-top: 40px;
    margin-top: 0;
    border-top: 1px solid rgba(48,48,48,.2)
}

/********************/
/**** CS Center. ****/
/********************/
.term-item {
}

.term-item + .term-item {
    padding-top: 30px
}

.term-title {
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600
}

.term-content * {
    color: #757575
}

.term-content .info .title {
    margin-bottom: 8px;
    color: #303030
}

.term-content .info .desc {
    padding-bottom: 18px
}

.term-content .info:last-child .desc {
    padding-bottom: 0
}

.term-content .info .desc:first-child {
    font-size: 12px;
    line-height: 2;
    color: #303030
}

.term-content .info-list {
}

.term-content .info-list li {
}

.term-content .info-list li + li {
    margin-top: 12px
}

.term-content .info-list .name {
    display: block;
    margin-bottom: 4px;
    color: #303030
}

.term-content .info-list .explain {
}

.term-content .case {
    display: block;
    margin-bottom: 4px;
    color: #303030
}

.term-content .notice {
    padding-bottom: 18px;
    font-size: 12px;
    line-height: 2
}

.term-content .ftc {
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center
}

.term-content .ftc .logo {
    width: 90px;
    height: 67px;
    margin: 0 auto
}

.term-content .ftc .logo img {
    width: 100%
}

.term-content .ftc .title {
    padding-top: 15px;
    font-weight: 600
}

.term-content .emphasis {
    padding-bottom: 25px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px
}

.term-content .article {
    line-height: 18px
}

.term-content .article .clause {
    padding-bottom: 18px
}

.term-content .article .clause:last-child {
    padding-bottom: 0
}

.term-content .article .c-title {
    padding-bottom: 4px
}

.term-content .article .gather {
    padding-bottom: 18px
}

.term-content .article .gather-table {
    margin-top: 18px;
    margin-bottom: 18px
}

.term-content .article .gather-table th,.term-content .article .gather-table td {
    height: 18px;
    padding-left: 8px;
    border-right: 1px solid rgba(48, 48, 48, 0.3);
    border-bottom: 1px solid rgba(48, 48, 48, 0.3);
    text-align: left;
    color: #303030;
    font-size: 12px;
    line-height: 18px
}

.term-content .article .gather-table th:last-child,.term-content .article .gather-table td:last-child {
    border-right: none
}

.term-content .article .gather:last-child {
    padding-bottom: 0
}

.term-content .article p,.term-content .article li {
    position: relative;
    padding-left: 4px;
    font-size: 12px;
    line-height: 20px
}

.term-content .article .gather > ul,.term-content .article .gather > ol {
    padding-bottom: 4px
}

.term-content .article .gather > ul:last-child,.term-content .article .gather > ol:last-child {
    padding-bottom: 0
}

.term-content .article .gather p.sl {
    padding-left: 8px
}

.term-content .article .gather > ol {
    margin-left: 6px
}

.term-content .article .gather > ol ol {
    padding-bottom: 2px
}

.term-content .article .gather > ol li:last-child ol {
    padding-bottom: 0
}

.term-content .article .gather > ol > li span {
    display: block
}

.term-content .article .gather > ol > li p {
    padding-top: 2px;
    padding-left: 0
}

.term-content .article .gather > ol > li {
    padding-left: 8px
}

.term-content .article .gather > ol > li {
    counter-increment: list-counter
}

.term-content .article .gather > ol > li::before {
    content: counter(list-counter)'.';
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.term-content .article .gather > ol > li p {
    padding-left: 4px
}

.term-content .article .gather > ol > li li {
    padding-left: 12px;
    counter-increment: sub-list-counter
}

.term-content .article .gather > ol > li li::before {
    content: counter(sub-list-counter);
    display: block;
    position: absolute;
    top: 7px;
    left: 0;
    width: 8px;
    height: 8px;
    border: 1px solid #757575;
    border-radius: 50%;
    text-align: center;
    font-size: 8px;
    line-height: 9px
}

.term-content .article .g-title {
    padding-bottom: 8px;
    padding-left: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px
}

.term-content .article .g-title:last-child {
    padding-bottom: 0
}

.term-content .article .g-info {
    padding-top: 8px
}

#cs-menu {
    padding-top: 40px
}

.cs-contact {
    border-top: 1px solid rgba(48, 48, 48, 0.3);
    padding-top: 30px;
    padding-bottom: 50px
}

.cs-contact .section-title {
    text-transform: uppercase;
    text-align: center;
    font-family: 'Noto Sans KR', Apple SD Gothic Neo, Malgun Gothic, Dotum, Helvetica, Helvetica Neue, Arial, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 30px
}

.cs-contact .contact-container {
    display: flex;
    position: relative;
    margin-top: 35px;
    justify-content: space-between
}

.cs-contact .contact-container::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 45%;
    width: 0;
    height: 100%;
    border-right: 1px solid rgba(48,48,48,0.3)
}

.cs-contact .contact a {
    display: inline-block;
    position: relative;
    color: #303030;
    text-align: center;
    font-family: 'Noto Sans KR', Apple SD Gothic Neo, Malgun Gothic, Dotum, Helvetica, Helvetica Neue, Arial, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px
}

.cs-contact .contact a:last-child {
    margin-top: 8px
}

.cs-contact .contact a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-bottom: 2px solid #303030
}

.cs-contact .open .time {
    display: flex;
    font-weight: 600;
    line-height: 26px
}

.cs-contact .open .time + .time {
    padding-top: 8px
}

.cs-contact .open .time .moment {
    width: 55px;
    color: #757575;
    font-size: 12px
}

.cs-contact .open .time .hour {
    font-family: 'Noto Sans KR', Apple SD Gothic Neo, Malgun Gothic, Dotum, Helvetica, Helvetica Neue, Arial, Verdana, sans-serif;
    color: #303030;
    font-size: 20px
}

.cs-contact .open .time .hour .start {
    position: relative;
    padding-right: 16px
}

.cs-contact .open .time .hour .start:after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    right: 5px;
    width: 6px;
    height: 0;
    margin-top: -1px;
    border-top: 2px solid #303030
}

#page-notice-list .board-head {
    height: inherit;
    margin-bottom: 17px
}

#page-notice-view .board-head {
    height: inherit;
    margin-bottom: 17px
}

/**********************/
/**** Beauty Zone. ****/
/**********************/
.page-beauty-zone .beauty-tester-intro {
    position: relative;
    padding: 30px 0;
    text-align: center;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

.page-beauty-zone .beauty-tester-intro .title {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-intro .description {
    color: #757575
}

.page-beauty-zone .beauty-tester-recruit {
    position: relative;
    padding: 20px 0
}

.page-beauty-zone .beauty-tester-recruit .recruit-title {
    margin-bottom: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-recruit .recruit-list {
}

.page-beauty-zone .beauty-tester-recruit .recruit-item {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

.page-beauty-zone .beauty-tester-recruit .product-area {
    position: relative;
    height: 200px;
    text-align: right
}

.page-beauty-zone .beauty-tester-recruit .product-area img {
    width: 200px;
    height: 200px
}

.page-beauty-zone .beauty-tester-recruit .content-area {
    position: absolute;
    top: 50px;
    bottom: 20px;
    left: 0;
    right: 0
}

.page-beauty-zone .beauty-tester-recruit .content-area .subtitle {
    font-size: 13px;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-recruit .content-area .title {
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-recruit .content-area .description {
    margin-top: 30px;
    color: #757575
}

.page-beauty-zone .beauty-tester-recruit .content-area .limit {
    position: absolute;
    right: 0;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    text-align: center;
    justify-content: center;
    background-color: #f1f1f1
}

.page-beauty-zone .beauty-tester-recruit .content-area .limit * {
    color: #fff !important;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-recruit .content-area .limit .title {
    font-size: 12px;
    margin-top: 4px
}

.page-beauty-zone .beauty-tester-recruit .content-area .limit .person {
    margin-top: 2px
}

.page-beauty-zone .beauty-tester-recruit .content-area .limit .number {
    font-size: 20px
}

.page-beauty-zone .beauty-tester-recruit .content-area .limit .unit {
    position: relative;
    top: -3px;
    padding-left: 2px
}

.page-beauty-zone .beauty-tester-recruit .recruit-item[data-color='#646566'] .title {
    color: #646566
}

.page-beauty-zone .beauty-tester-recruit .recruit-item[data-color='#646566'] .limit {
    background-color: #646566
}

.page-beauty-zone .beauty-tester-recruit .recruit-item[data-color='#575e2b'] .title {
    color: #575e2b
}

.page-beauty-zone .beauty-tester-recruit .recruit-item[data-color='#575e2b'] .limit {
    background-color: #575e2b
}

.page-beauty-zone .beauty-tester-notice {
    position: relative;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

.page-beauty-zone .beauty-tester-notice .info-list {
}

.page-beauty-zone .beauty-tester-notice .info-item {
    position: relative;
    padding-left: 100px
}

.page-beauty-zone .beauty-tester-notice .info-item + .info-item {
    margin-top: 18px
}

.page-beauty-zone .beauty-tester-notice .title {
    position: absolute;
    left: 0;
    font-size: 13px;
    font-weight: 400
}

.page-beauty-zone .beauty-tester-notice .title strong {
    font-weight: 400
}

.page-beauty-zone .beauty-tester-notice .description {
    font-size: 13px;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-notice .description + .description {
    margin-top: 6px
}

.page-beauty-zone .beauty-tester-notice .text-notice {
    display: block;
    margin-top: 6px
}

.page-beauty-zone .beauty-tester-notice > .text-notice {
    margin-top: 25px;
    font-size: 13px;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-entry {
    position: relative;
    padding: 30px 0;
    text-align: center
}

.page-beauty-zone .beauty-tester-entry .slogan {
    font-size: 13px;
    font-family: 'Nanum Myeongjo'
}

.page-beauty-zone .beauty-tester-entry .copy {
    margin-top: 15px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600
}

.page-beauty-zone .beauty-tester-entry .button-wrapper {
    margin-top: 30px
}

#page-beauty-counselor {
}

#page-beauty-counselor .board-content {
    text-align: center
}

#page-beauty-counselor .board-content strong {
    display: block;
    margin-bottom: 20px;
    font-size: 14px
}

#page-beauty-counselor .board-content p {
    line-height: 2
}

.board-content * {
    font-family: 'Noto Sans KR', Apple SD Gothic Neo, Malgun Gothic, Dotum, Helvetica, Helvetica Neue, Arial, Verdana, sans-serif !important
}

.board-content table {
    max-width: 100% !important
}

.board-content table td {
    border-width: 1px !important
}

.board-content img {
    max-width: 100% !important
}

#page-beauty-counselor .board-content .product {
    position: relative
}

#page-beauty-counselor .board-content .product .item {
    position: relative;
    margin-top: 25px;
    margin-bottom: 30px;
    background-color: #f1f1f1
}

#page-beauty-counselor .board-content .product .figure {
    height: 339px
}

#page-beauty-counselor .board-content .product .certificate {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 113px;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #d62223
}

#page-beauty-counselor .board-content .product .certificate .desc {
    display: flex;
    height: 55px;
    background-color: #d62223;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    color: #fff
}

#page-beauty-counselor .board-content .product .certificate .type {
    display: block;
    line-height: 23px;
    text-align: center
}

#page-beauty-counselor .board-content .product .info {
}

#page-beauty-counselor .board-content .product .subtitle {
    font-size: 16px
}

#page-beauty-counselor .board-content .product .name {
    font-size: 30px
}

#page-so-ad .so-ad-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 40px
}

#page-so-ad .so-ad-item {
    width: 50%;
    text-align: center
}

#page-so-ad .so-ad-item:nth-child(odd) {
    padding-right: 3%
}

#page-so-ad .so-ad-item:nth-child(even) {
    padding-left: 3%
}

#page-so-ad .so-ad-item:nth-child(n+3) {
    margin-top: 20px
}

#page-so-ad .so-ad-item .thumbnail {
    position: relative;
    display: block;
    padding: 10px;
    border: 1px solid rgba(48,48,48,.2)
}

#page-so-ad .so-ad-item .thumbnail a {
    display: block;
    line-height: 0
}

#page-so-ad .so-ad-item .thumbnail img {
    width: 100%;
    height: 100%
}

#page-so-ad .so-ad-item .published {
    margin-top: 6px;
    font-weight: 600
}

#page-so-ad .so-ad-item .title {
    font-weight: 600
}

#page-so-ad .so-ad-view {
    position: relative;
    padding-top: 40px
}

#page-so-ad .so-ad-view .border-util {
    margin-bottom: 40px
}

#page-so-ad .so-ad-view .view-head {
    position: relative;
    padding-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: 600
}

#page-so-ad .so-ad-view .content-magazine {
    margin-bottom: 40px;
    margin-right: -24px;
    margin-left: -24px
}

#page-so-ad .so-ad-view .magazine-container {
    overflow: hidden;
    position: relative;
    margin-bottom: 30px
}

#page-so-ad .so-ad-view .magazine-wrapper {
}

#page-so-ad .so-ad-view .magazine-wrapper .magazine-item {
    float: left;
    padding-top: 1px;
    padding-right: 24px;
    padding-left: 24px
}

#page-so-ad .so-ad-view .magazine-wrapper .magazine-item + .magazine-item {
    padding-top: 25px
}

#page-so-ad .so-ad-view .magazine-wrapper .magazine-item img {
    width: 100%;
    height: auto;
    box-shadow: 0 1px 3px rgba(0,0,0,.5)
}

#page-so-ad .so-ad-view .magazine-wrapper::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

#page-so-ad .so-ad-view .magazine-pagination {
    z-index: 1;
    display: flex;
    padding-right: 24px;
    padding-left: 24px;
    justify-content: space-between
}

#page-so-ad .so-ad-view .magazine-pagination li {
    flex: 1;
    height: 1px;
    background-color: rgba(48,48,48,.2)
}

#page-so-ad .so-ad-view .magazine-pagination li.is-selected {
    background-color: rgba(48,48,48,1)
}

#page-cf-stories {
}

#page-cf-stories .cf-stroies-container {
    position: relative;
    padding-top: 40px
}

#page-cf-stories .cf-story-item {
    position: relative
}

#page-cf-stories .cf-story-item .figure {
}

#page-cf-stories .cf-story-item .figure a {
    display: block;
    line-height: 0
}

#page-cf-stories .cf-story-item .figure img {
    width: 100%;
    height: auto
}

#page-cf-stories .cf-story-item .info {
    position: relative;
    font-size: 16px;
    font-weight: 600
}

#page-cf-stories .cf-story-item .info .release {
    margin-top: 14px
}

#page-cf-stories .cf-story-item .info .title {
    margin-top: 6px
}

#page-cf-stories .cf-story-item .info .episode {
    position: absolute;
    right: 0;
    bottom: 0
}

#page-cf-stories .cf-story-item .info .episode .unit {
    display: inline-block;
    margin-left: 2px;
    font-size: 12px
}

#page-cf-stories .cf-story-item + .cf-story-item {
    margin-top: 40px
}

#page-showroom {
}

#page-showroom .showroom-intro {
    position: relative;
    padding: 40px 0 30px;
    text-align: center
}

#page-showroom .showroom-intro .title-ko {
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600
}

#page-showroom .showroom-intro .title-en {
    margin-bottom: 20px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em
}

#page-showroom .showroom-intro .description {
    line-height: 1.8;
    color: #757575
}

#page-showroom .showroom-banner {
    height: 233px
}

/* #page-showroom .showroom-banner{position:relative;width:100%;padding-bottom:56%;height:0} */
#page-showroom .showroom-banner .image-area {
    position: relative;
    width: 100%;
    height: 100%
}

#page-showroom .showroom-banner .image-area img {
    display: inline-block;
    width: 100%;
    vertical-align: text-top
}

#page-showroom .showroom-banner .sn-swiper-pagination {
    justify-content: center;
    bottom: 10px
}

#page-showroom .showroom-feature {
    position: relative;
    padding: 40px 0
}

#page-showroom .showroom-feature .feature-list {
}

#page-showroom .showroom-feature .feature-item {
    position: relative
}

#page-showroom .showroom-feature .feature-item + .feature-item {
    margin-top: 30px
}

#page-showroom .showroom-feature .feature-item:nth-child(odd) {
    padding-left: 110px;
    text-align: left
}

#page-showroom .showroom-feature .feature-item:nth-child(odd) .icon {
    left: 0
}

#page-showroom .showroom-feature .feature-item:nth-child(even) {
    padding-right: 110px;
    text-align: right
}

#page-showroom .showroom-feature .feature-item:nth-child(even) .icon {
    right: 0
}

#page-showroom .showroom-feature .feature-item .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center
}

#page-showroom .showroom-feature .feature-item .title {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600
}

#page-showroom .showroom-feature .feature-item .description {
    color: #757575;
    line-height: 1.6;
    letter-spacing: -0.1em
}

#page-showroom .showroom-location {
    position: relative;
    padding-bottom: 35px;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

#page-showroom .showroom-location .map-area {
    height: 266px;
    background-color: #f1f1f1
}

#page-showroom .showroom-location .info-area {
    padding-top: 20px
}

#page-showroom .showroom-location .info-item {
}

#page-showroom .showroom-location .info-item + .info-item {
    margin-top: 25px
}

#page-showroom .showroom-location .info-item .title {
    display: block;
    margin-bottom: 15px
}

#page-showroom .showroom-location .info-item .emphasis {
    display: block;
    margin-bottom: 10px;
    font-size: 16px
}

#page-showroom .showroom-location .info-item .text {
    color: #757575
}

#page-showroom .showroom-location .info-item.directions {
}

#page-showroom .showroom-location .info-item.hour .emphasis {
    line-height: 22px
}

#page-showroom .showroom-location .info-item.contact {
}

#page-showroom .showroom-event {
}

#page-showroom .showroom-event .event {
    position: relative;
    margin-top: 40px
}

#page-showroom .showroom-event .event * {
    position: relative;
    z-index: 5;
    text-shadow: 0 0 8px rgba(255,255,255,1)
}

#page-showroom .showroom-event .event .type {
    display: block;
    margin-bottom: 30px;
    font-size: 24px;
    color: #dd426f;
    font-weight: 700;
    letter-spacing: 0.01em
}

/* #page-showroom .showroom-event .event .image{position:absolute;right:0;top:0;width:198px;z-index:1} */
#page-showroom .showroom-event .event .image {
    position: absolute;
    right: 0;
    top: 0;
    width: 135px;
    margin-top: 60px;
    z-index: 1
}

#page-showroom .showroom-event .event .image img {
    width: 100%
}

#page-showroom .showroom-event .event .title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600
}

#page-showroom .showroom-event .event .description {
    margin-top: 30px;
    line-height: 1.8
}

#page-showroom .showroom-event .event .description + .description {
    margin-top: 10px
}

#page-showroom .showroom-event .event .stext {
    display: block;
    margin-top: 20px;
    color: #757575
}

/* #page-showroom .showroom-event .event-1 .image{top:25px}
#page-showroom .showroom-event .event-2 .image{} */
#page-showroom .showroom-event .event-2 .nav-link {
    margin-top: 25px
}

/**********************/
/**** Brand Story. ****/
/**********************/
.page-brand {
}

.page-brand .navi-wrapper {
    justify-content: space-between;
    padding: 0
}

.page-brand .page-navigation .navi-item + .navi-item {
    margin-left: 0
}

.page-brand .en {
    text-transform: uppercase
}

.page-brand .brand-intro {
    position: relative;
    display: flex;
    height: 180px;
    background-color: #303030;
    align-items: center
}

.page-brand .brand-intro .content-area {
    position: relative;
    padding: 0 25px
}

.page-brand .brand-intro .content-area .title {
    color: #fff
}

.page-brand .brand-intro .content-area .title.ko {
    font-size: 14px;
    line-height: 24px;
    font-weight: bold
}

.page-brand .brand-intro .content-area .title.en {
    margin-top: 10px;
    font-size: 11px;
    text-transform: uppercase;
    opacity: .8
}

.page-brand .brand-intro .content-area .line {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 3px;
    padding-top: 12px;
    padding-left: 4px;
    vertical-align: top
}

.page-brand .brand-intro .content-area .line::after {
    content: '';
    display: block;
    height: 2px;
    width: 16px;
    background-color: #fff
}

.page-brand .brand-intro .background-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.page-brand .brand-intro .background-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.page-brand .brand-section {
    position: relative;
    padding: 40px 0
}

.page-brand .section-title {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 800
}

.page-brand .section-subtitle.large {
    font-size: 20px
}

.page-brand .section-subtitle {
    font-size: 14.5px;
    line-height: 24px;
    font-weight: 600
}

.page-brand .section-text {
    font-size: 12px;
    line-height: 20px;
    color: #757575
}

.page-brand .section-text.large {
    font-size: 18px;
    line-height: 26px;
    color: #303030;
    font-weight: 600;
}

.page-brand .section-text.black {
    color: #303030
}

.page-brand .section-text em {
    color: #303030
}

.page-brand .vertical-line {
    position: relative;
    padding-top: 60px !important
}

.page-brand .vertical-line::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 1px;
    height: 30px;
    background-color: rgba(48,48,48,.2)
}

#page-brand-story .brand-section.zero-margin {
}

#page-brand-story .brand-section.zero-margin .zero-area {
    position: relative;
    text-align: center
}

#page-brand-story .brand-section.zero-margin .zero-area .zero {
    position: relative;
    margin-bottom: 30px
}

#page-brand-story .brand-section.zero-margin .zero-area .zero .zero-number {
    display: inline-block;
    width: 141px;
    height: 181px
}

#page-brand-story .brand-section.zero-margin .zero-area .zero .zero-number img {
    width: 100%
}

#page-brand-story .brand-section.zero-margin .zero-area .zero .zero-unit {
    vertical-align: bottom;
    font-size: 18px;
    font-weight: bold
}

#page-brand-story .brand-section.zero-margin .zero-area .zero .zero-text {
    display: block;
    padding-top: 10px;
    font-weight: bold
}

#page-brand-story .brand-section.zero-margin .zero-margin-description {
}

#page-brand-story .brand-section.zero-margin .one-stop-area {
    position: relative;
    text-align: center
}

#page-brand-story .brand-section.zero-margin .one-stop-area .section-title {
    margin-bottom: 40px;
    font-weight: 400
}

#page-brand-story .brand-section.zero-margin .one-stop-area .one-stop {
    position: relative;
    width: 191px;
    height: 209px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    text-align: center
}

#page-brand-story .brand-section.zero-margin .one-stop-area .one-stop img {
    width: 100%
}

#page-brand-story .brand-section.zero-margin .one-stop-list {
    display: inline-block
}

#page-brand-story .brand-section.zero-margin .one-stop-item {
    position: relative;
    text-align: left
}

#page-brand-story .brand-section.zero-margin .one-stop-item + .one-stop-item {
    margin-top: 12px
}

#page-brand-story .brand-section.zero-margin .one-stop-item .number {
    letter-spacing: .05em;
    position: relative;
    top: -3px
}

#page-brand-story .brand-section.zero-margin .one-stop-item .title {
    display: inline-block;
    padding-left: 6px;
    font-size: 16px;
    font-weight: 600
}

#page-brand-story .brand-section.zero-margin .one-stop-description .section-text {
}

#page-brand-story .brand-section.best-present {
    position: relative;
    padding: 50px 0;
    text-align: center;
    background-color: #303030
}

#page-brand-story .brand-section.best-present::before, #page-brand-story .brand-section.best-present::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    width: 1px;
    height: 30px;
    background-color: rgba(255,255,255,.8)
}

#page-brand-story .brand-section.best-present::before {
    top: 0
}

#page-brand-story .brand-section.best-present::after {
    bottom: 0
}

#page-brand-story .brand-section.best-present .background-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#page-brand-story .brand-section.best-present .background-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#page-brand-story .brand-section.best-present .content-area {
    position: relative
}

#page-brand-story .brand-section.best-present .section-subtitle {
    margin-bottom: 30px;
    color: #fff
}

#page-brand-story .brand-section.best-present .section-text {
    color: rgba(255,255,255,.8)
}

#page-brand-story .brand-section.feature {
}

#page-brand-story .brand-section.feature .feature-list {
}

#page-brand-story .brand-section.feature .feature-item {
}

#page-brand-story .brand-section.feature .feature-item + .feature-item {
    margin-top: 40px
}

#page-brand-story .brand-section.feature .feature-title {
    display: flex;
    height: 50px;
    align-items: center
}

#page-brand-story .brand-section.feature .feature-title .number {
    display: block;
    font-size: 60px;
    line-height: 1;
    font-weight: bold
}

#page-brand-story .brand-section.feature .feature-title .title {
    margin-left: 15px;
    font-size: 24px;
    line-height: 1;
    font-weight: 600
}

#page-brand-story .brand-section.feature .feature-description {
}

#page-brand-story .brand-section.feature .section-subtitle {
    padding: 20px 0 10px
}

#page-brand-story .brand-section.feature .feature-item:nth-child(even) {
    text-align: right
}

#page-brand-story .brand-section.feature .feature-item:nth-child(even) .feature-title {
    flex-direction: row-reverse
}

#page-brand-story .brand-section.feature .feature-item:nth-child(even) .feature-title .title {
    margin-right: 15px
}

#page-brand-story .brand-section.natural-brand {
    position: relative;
    background-color: #303030
}

#page-brand-story .brand-section.natural-brand .background-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#page-brand-story .brand-section.natural-brand .background-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#page-brand-story .brand-section.natural-brand .content-area {
    position: relative;
    text-align: center;
    color: #fff
}

#page-brand-story .brand-section.stories {
}

#page-brand-story .brand-section.stories .stories-item {
    position: relative;
    text-align: center
}

#page-brand-story .brand-section.stories .stories-item + .stories-item {
    margin-top: 50px
}

#page-brand-story .brand-section.stories .stories-brand {
    position: relative;
    margin-bottom: 15px
}

#page-brand-story .brand-section.stories .stories-brand .logo {
    display: inline-block;
    margin-bottom: 10px
}

#page-brand-story .brand-section.stories .stories-brand .logo img {
    width: 100%
}

#page-brand-story .brand-section.stories .stories-brand .logo.so-natural {
    width: 151px;
    height: 72px
}

#page-brand-story .brand-section.stories .stories-brand .logo.the-pure {
    width: 201px;
    height: 50px
}

#page-brand-story .brand-section.stories .stories-brand .logo.powder-4-room {
    width: 205px;
    height: 34px
}

#page-brand-story .brand-section.stories .stories-brand .subtitle {
    display: block;
    letter-spacing: 0.1em;
    word-spacing: 1px;
    color: #757575
}

#page-brand-story .brand-section.stories .stories-product .figure {
    height: 272px;
    margin-top: -20px;
    margin-bottom: 10px
}

#page-brand-story .brand-section.stories .stories-product .figure img {
    height: 100%
}

#page-brand-story .brand-section.stories .stories-product .section-text {
    margin-bottom: 10px
}

#page-brand-story .brand-section.history {
    position: relative;
    background-color: #303030
}

#page-brand-story .brand-section.history .background-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#page-brand-story .brand-section.history .background-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#page-brand-story .brand-section.history .content-area {
    position: relative
}

#page-brand-story .brand-section.history .history-header {
    margin-bottom: 40px;
    text-align: center;
    color: #fff
}

#page-brand-story .brand-section.history .history-list {
    color: #fff
}

#page-brand-story .brand-section.history .history-detail-wrapper {
    display: flex
}

#page-brand-story .brand-section.history .history-detail-wrapper .scene {
    width: 60px;
    padding-top: 2px;
    font-size: 14px
}

#page-brand-story .brand-section.history .history-detail-wrapper .detailed-list {
    flex: 1;
    text-transform: uppercase
}

#page-brand-story .brand-section.history .detailed-list .history-title {
    font-size: 13px;
    line-height: 20px;
    font-weight: bold
}

#page-brand-story .brand-section.history .detailed-list .history-title b {
    text-transform: none;
    font-weight: bold
}

#page-brand-story .brand-section.history .detailed-list .history-title + .history-title {
    margin-top: 6px
}

#page-brand-story .brand-section.history .detailed-list .history-description {
    font-size: 12px;
    line-height: 20px
}

#page-brand-story .brand-section.history .detailed-list .history-title + .history-description {
    padding-top: 6px
}

#page-brand-story .brand-section.history .history-detail-wrapper + .history-detail-wrapper {
    padding-top: 20px
}

.page-brand .brand-define {
    position: relative;
    padding-top: 30px
}

.page-brand .brand-define .brand-logo {
    position: relative;
    text-align: center
}

.page-brand .brand-define .logo {
    display: inline-block
}

.page-brand .brand-define .logo img {
    width: 100%
}

.page-brand .brand-section + .brand-section.vertical-line {
    margin-top: -40px
}

#page-so-natural {
}

#page-so-natural .section-title {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase
}

#page-so-natural .section-subtitle {
    font-size: 20px
}

#page-so-natural .brand-define.so-natural {
    position: relative;
    text-align: center
}

#page-so-natural .brand-define.so-natural .brand-logo {
    margin-bottom: 40px
}

#page-so-natural .brand-define.so-natural .brand-logo .logo {
    width: 239px;
    height: 180px
}

#page-so-natural .brand-define.so-natural .brand-description {
}

#page-so-natural .brand-define.so-natural .section-text {
}

#page-so-natural .brand-section.natural-force {
}

#page-so-natural .brand-section.natural-force .force-header {
    margin-bottom: 30px
}

#page-so-natural .brand-section.natural-force .force-list {
}

#page-so-natural .brand-section.natural-force .force-item {
}

#page-so-natural .brand-section.natural-force .force-item + .force-item {
    margin-top: 30px
}

#page-so-natural .brand-section.natural-force .force-item .section-subtitle {
    position: relative;
    display: block;
    margin-bottom: 10px;
    font-weight: bold
}

#page-so-natural .brand-section.natural-force .force-item .section-subtitle::after {
    content: '';
    z-index: 5;
    position: absolute;
    left: 0;
    right: 0%;
    top: 12px;
    height: 1px;
    background-color: #303030
}

#page-so-natural .brand-section.natural-force .force-item .section-subtitle span {
    position: relative;
    z-index: 10;
    display: inline-block;
    width: 50%;
    background-color: #fff
}

#page-so-natural .brand-section.natural-force .force-item .section-title {
    display: block;
    margin-bottom: 18px;
    font-weight: bold
}

#page-so-natural .brand-section.natural-force .force-item .section-text {
}

#page-so-natural .brand-section.philosophy {
}

#page-so-natural .brand-section.philosophy .philosophy-header {
    position: relative;
    margin-bottom: 50px;
    text-align: center
}

#page-so-natural .brand-section.philosophy .philosophy-header .title {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 800
}

#page-so-natural .brand-section.philosophy .philosophy-header .subtitle {
    font-size: 13px;
    line-height: 22px
}

#page-so-natural .brand-section.philosophy .philosophy-header .subtitle.en {
    margin-bottom: 20px
}

#page-so-natural .brand-section.philosophy .philosophy-header .subtitle.ko {
}

#page-so-natural .brand-section.philosophy .philosophy-list {
}

#page-so-natural .brand-section.philosophy .philosophy-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center
}

#page-so-natural .brand-section.philosophy .philosophy-item + .philosophy-item {
    margin-top: 30px
}

#page-so-natural .brand-section.philosophy .philosophy-item .figure {
    width: 100px;
    margin-left: 20px
}

#page-so-natural .brand-section.philosophy .philosophy-item .figure img {
    display: block;
    width: 100px;
    height: 100px
}

#page-so-natural .brand-section.philosophy .philosophy-item .content {
    flex: 1
}

#page-so-natural .brand-section.philosophy .philosophy-item .title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 800
}

#page-so-natural .brand-section.philosophy .philosophy-item .description {
    font-size: 13px;
    line-height: 22px;
    color: #757575
}

#page-so-natural .brand-section.for-skin {
    position: relative;
    background-color: #303030
}

#page-so-natural .brand-section.for-skin .background-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#page-so-natural .brand-section.for-skin .background-area img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

#page-so-natural .brand-section.for-skin .content-area {
    position: relative;
    text-align: center;
    color: #fff
}

#page-so-natural .brand-section.for-skin .content-area .section-subtitle {
    font-size: 16px
}

#page-so-natural .brand-section.natural-keyword {
    position: relative;
    padding-bottom: 40px;
    text-align: center
}

#page-so-natural .brand-section.natural-keyword .natural-keyword-header {
    margin-bottom: 20px
}

#page-so-natural .brand-section.natural-keyword .natural-keyword-wrapper {
    position: relative;
    display: inline-block
}

#page-so-natural .brand-section.natural-keyword .natural-keyword-wrapper::after {
    content: '';
    display: block;
    clear: both
}

#page-so-natural .brand-section.natural-keyword .keyword {
    float: left;
    width: 60px;
    height: 60px;
    margin-top: 10px
}

#page-so-natural .brand-section.natural-keyword .keyword .word {
    vertical-align: top;
    line-height: 1;
    font-size: 54px;
    font-weight: 800;
    align-self: center
}

#page-so-natural .brand-section.natural-keyword .keyword-description {
    float: left;
    margin-top: 10px;
    padding-top: 7px;
    height: 60px;
    width: calc(100% - 60px);
    text-align: left
}

#page-so-natural .brand-section.natural-keyword .keyword-description .section-subtitle {
    font-weight: 800;
    text-transform: uppercase
}

#page-so-natural .brand-section.natural-keyword .keyword-description .section-text {
    font-size: 13px
}

#page-the-pure {
}

#page-the-pure .brand-define.the-pure {
}

#page-the-pure .brand-define.the-pure .brand-logo {
    margin-bottom: 30px
}

#page-the-pure .brand-define.the-pure .brand-logo .logo {
    width: 240px;
    height: 58px
}

#page-the-pure .brand-define.the-pure .brand-logo .section-subtitle {
    display: block;
    color: #347d58
}

#page-the-pure .brand-define.the-pure .brand-description {
    text-align: center
}

#page-the-pure .brand-define.the-pure .brand-description .section-text {
}

#page-the-pure .brand-define.the-pure .brand-description .section-text.en {
    color: #303030
}

#page-the-pure .brand-section.naturalism {
}

#page-the-pure .brand-section.naturalism .naturalism-figure {
    width: 241px;
    height: 168px;
    margin: 0 auto
}

#page-the-pure .brand-section.naturalism .naturalism-figure img {
    width: 100%
}

#page-the-pure .brand-section.naturalism .naturalism-header {
    padding: 10px 0 25px;
    text-align: center
}

#page-the-pure .brand-section.naturalism .naturalism-header .section-title {
    font-weight: bold
}

#page-the-pure .brand-section.naturalism .naturalism-content {
    text-align: center
}

#page-the-pure .brand-section.naturalism .naturalism-content .section-text {
}

#page-the-pure .brand-section.naturalism .naturalism-content .section-text.en {
    margin-top: 15px;
    color: #303030
}

#page-the-pure .brand-section.philosophy {
}

#page-the-pure .brand-section.philosophy .philosophy-header {
    text-align: center;
    margin-bottom: 30px
}

#page-the-pure .brand-section.philosophy .philosophy-header .section-subtitle {
    font-size: 24px;
    font-weight: 800
}

#page-the-pure .brand-section.philosophy .philosophy-keywords {
    text-align: center
}

#page-the-pure .brand-section.philosophy .philosophy-keywords .img-box {
    display: inline-block;
    width: 100%;
    height: auto;
    margin: 0 auto
}

#page-the-pure .brand-section.perfume {
    padding-top: 20px
}

#page-the-pure .brand-section.perfume .perfume-header {
    margin-bottom: 30px
}

#page-the-pure .brand-section.perfume .perfume-header .section-title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 800
}

#page-the-pure .brand-section.perfume .perfume-header .section-text {
}

#page-the-pure .brand-section.perfume .perfume-list {
}

#page-the-pure .brand-section.perfume .perfume-item {
}

#page-the-pure .brand-section.perfume .perfume-item + .perfume-item {
    margin-top: 30px
}

#page-the-pure .brand-section.perfume .perfume-title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 4px solid #303030;
    align-items: flex-end;
    margin-bottom: 10px
}

#page-the-pure .brand-section.perfume .perfume-title .title {
    font-size: 30px;
    line-height: 1;
    font-weight: bold
}

#page-the-pure .brand-section.perfume .perfume-title .en {
    font-size: 16px
}

#page-the-pure .brand-section.perfume .perfume-description {
}

#page-the-pure .brand-section.perfume .perfume-description .section-text {
}

#page-the-pure .brand-section.perfume .perfume-description .section-text.en {
    margin-bottom: 10px;
    color: #303030;
    font-weight: 600
}

#page-the-pure .brand-section.essential {
}

#page-the-pure .brand-section.essential .essential-header {
    position: relative;
    padding-left: 60px;
    text-align: right
}

#page-the-pure .brand-section.essential .essential-header .word {
    position: absolute;
    left: -10px;
    top: -30px;
    line-height: 1;
    font-size: 110px;
    font-weight: 800
}

#page-the-pure .brand-section.essential .essential-header .section-title {
    display: block;
    margin-bottom: 30px
}

#page-the-pure .brand-section.essential .essential-header .section-title.en {
    position: relative;
    display: inline-block;
    margin-bottom: 26px;
    font-weight: 800
}

#page-the-pure .brand-section.essential .essential-header .section-title.en::after {
    content: '';
    position: absolute;
    right: 100%;
    margin-right: 60px;
    top: 8px;
    width: 66px;
    height: 4px;
    background-color: #303030
}

#page-the-pure .brand-section.essential .essential-header .section-text {
}

#page-the-pure .brand-section.essential .essential-content {
    text-align: right
}

#page-the-pure .brand-section.essential .essential-content .section-text {
}

#page-powder-4-room {
}

#page-powder-4-room .brand-define.powder-4-room {
}

#page-powder-4-room .brand-define.powder-4-room .brand-logo {
}

#page-powder-4-room .brand-define.powder-4-room .brand-logo .logo {
    width: 306px;
    height: 50px;
    margin-bottom: 15px
}

#page-powder-4-room .brand-define.powder-4-room .brand-logo .section-subtitle {
    display: block;
    color: #303030
}

#page-powder-4-room .brand-define.powder-4-room .brand-logo .section-subtitle.en {
    color: #7bc142
}

#page-powder-4-room .brand-section.rooms {
}

#page-powder-4-room .brand-section.rooms .rooms-header {
    text-align: center
}

#page-powder-4-room .brand-section.rooms .rooms-header .section-title {
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: bold
}

#page-powder-4-room .brand-section.rooms .rooms-header .section-text {
}

#page-powder-4-room .brand-section.rooms .room-style {
    padding-top: 40px;
    text-align: center
}

#page-powder-4-room .brand-section.rooms .style-item {
}

#page-powder-4-room .brand-section.rooms .style-item + .style-item {
    margin-top: 40px
}

#page-powder-4-room .brand-section.rooms .style-title {
    position: relative;
    width: 206px;
    margin: 0 auto 15px;
    padding-bottom: 15px;
    border-bottom: 4px solid #303030;
    text-transform: uppercase
}

#page-powder-4-room .brand-section.rooms .style-title .sort {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 800
}

#page-powder-4-room .brand-section.rooms .style-title .word {
    font-size: 16px;
    font-weight: 600
}

#page-powder-4-room .brand-section.rooms .style-description {
}

#page-powder-4-room .brand-section.rooms .style-description .title {
    display: block;
    margin-bottom: 20px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: bold
}

#page-powder-4-room .brand-section.rooms .style-description .section-text {
}

/* --- Icon --- */
.discount-icon, .coupon-icon, .reserve-icon {
    position: relative;
    display: inline-block;
    text-align: center
}

.discount-icon .type, .coupon-icon .type, .reserve-icon .type {
    display: block;
    padding-top: 4px
}

.discount-icon .icon, .coupon-icon .icon, .reserve-icon .icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.discount-icon {
}

.discount-icon .icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    background-color: #dd426f
}

.discount-icon .rate {
    font-size: 28px
}

.discount-icon .percent {
    position: relative;
    top: 4px;
    padding-left: 2px;
    font-size: 14px;
    vertical-align: bottom
}

.coupon-icon {
}

.coupon-icon .icon {
    overflow: hidden;
    width: 65px;
    height: 38px;
    justify-content: flex-start;
    text-indent: 10px;
    background-size: 65px 38px;
    text-indent: -9999px
}

.coupon-icon.large .icon {
    width: 103px;
    height: 60px;
    justify-content: flex-start;
    font-size: 18px;
    background-size: 103px 60px
}

.coupon-icon .icon.point-3000 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_point_3000.png)
}

.coupon-icon .icon.point-5000 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_point_5000.png)
}

.coupon-icon.large .icon.pay-5000 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_pay_5000.png)
}

.coupon-icon.large .icon.pay-3000 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_pay_3000.png)
}

.reserve-icon {
}

.reserve-icon .icon {
    overflow: hidden;
    width: 56px;
    height: 56px;
    background-size: 56px 56px;
    text-indent: -9999px
}

.reserve-icon .icon.icon-500 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_coin_500.png)
}

.reserve-icon .icon.icon-200 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_coin_200.png)
}

.reserve-icon .icon.icon-100 {
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_coin_100.png)
}

.and-icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px
}

.and-icon::after, .and-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    bottom: 0;
    margin-top: -1px;
    width: 100%;
    height: 1px;
    background-color: #303030
}

.and-icon::before {
    transform: rotate(45deg)
}

.and-icon::after {
    transform: rotate(-45deg)
}

.and-icon.large {
    width: 25px;
    height: 25px
}

.and-icon.white::before, .and-icon.white::after {
    background-color: #fff
}

.link-arrow {
    display: inline-block
}

.link-arrow span {
    position: relative;
    display: block;
    padding-right: 12px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: #303030;
}

.link-arrow span::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    border: solid #303030;
    border-width: 1px 1px 0 0;
    transform: rotate(45deg)
}

/* --- Grade --- */
.grade-type {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.grade-type .grade {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-weight: bold
}

.grade-type .grade .type, .grade-type .grade .member {
    line-height: 1.3;
    text-transform: uppercase
}

.grade-type .grade.is-selected {
}

.grade-type .grade.is-selected::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc
}

.grade.g_1000 {
    background-color: #95c954 !important
}

.grade.g_1140 {
    background-color: #d64747 !important
}

.grade.g_1130 {
    background-color: #303030 !important
}

.grade.g_1120 {
    background-color: #6c0b9d !important
}

.grade-type .grade.grade.g_1000.is-selected::after {
    background-color: #95c954 !important
}

.grade-type .grade.grade.g_1140.is-selected::after {
    background-color: #d64747 !important
}

.grade-type .grade.grade.g_1130.is-selected::after {
    background-color: #303030 !important
}

.grade-type .grade.grade.g_1120.is-selected::after {
    background-color: #6c0b9d !important
}

/* --- Service --- */
.page-service {
}

.page-service .content-section {
    position: relative;
    padding: 30px 0;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

#page-recall.page-service .content-section:last-child {
    border-bottom: none
}

.page-service .content-section.coupons-check {
    padding-bottom: 60px
}

.page-service .section-title {
    font-size: 20px;
    font-weight: 600
}

.page-service .section-subtitle {
    font-size: 14px
}

.page-service .section-text {
    line-height: 1.4;
    color: #757575
}

.page-service .section-text + .section-text {
    padding-top: 8px
}

.page-service .basic-benefits {
    position: relative;
    text-align: center
}

.page-service .basic-benefits .benefit-item {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600
}

.page-service .basic-benefits .benefit-content {
    font-size: 20px;
    white-space: nowrap
}

.page-service .basic-benefits .benefit-content small {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    text-align: left;
    font-weight: 400
}

.page-service .basic-benefits .benefit-content em {
    color: #dd426f;
    font-weight: 600
}

.page-service .basic-benefits .coupon-icon {
    margin-right: 20px
}

.page-service .basic-benefits .discount-icon {
    margin-left: 20px
}

.page-service .basic-benefits .and {
    display: block;
    margin: 10px 0 -11px
}

/* --- Membership --- */
#page-membership {
}

#page-membership .content-section.benefit {
    position: relative;
    text-align: center
}

#page-membership .content-section.benefit .section-title {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 600
}

#page-membership .content-section.benefit .section-text {
    margin-bottom: 40px
}

#page-membership .content-section.graded {
    padding-bottom: 0;
    border-bottom: 0
}

#page-membership .content-section.graded .grade-type {
    margin-bottom: 30px
}

#page-membership .content-section.graded .grade-content {
    display: none
}

#page-membership .content-section.graded .grade-content.is-visible {
    display: block
}

#page-membership .content-section.graded .grade-content .grade-header {
    position: relative;
    text-align: center;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase
}

#page-membership .content-section.graded .grade-content .grade-header span {
    position: relative;
    font-size: 16px
}

#page-membership .content-section.graded .grade-content .grade-header span::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #303030
}

#page-membership .content-section.graded .benefit-type {
    padding: 15px 0;
    border-bottom: 1px solid rgba(48,48,48,.2)
}

#page-membership .content-section.graded .benefit-content {
    display: flex;
    align-items: center;
    font-weight: 600
}

#page-membership .content-section.graded .benefit-content .title {
    width: 30%;
    color: #757575
}

#page-membership .content-section.graded .benefit-content .item {
    min-width: 65px;
    text-align: center
}

#page-membership .content-section.graded .benefit-content .item.wide {
    display: flex;
    justify-content: center;
    align-items: center
}

#page-membership .content-section.graded .benefit-content .item.wide .free-info {
    width: 100%;
    padding-left: 10px;
    text-align: center;
    white-space: nowrap
}

#page-membership .content-section.graded .benefit-content .item.wide .free-info span {
    display: block;
    width: 100%
}

#page-membership .content-section.graded .benefit-content .item + .item {
    padding-left: 5%
}

#page-membership .content-section.graded #g_1120 .benefit-content .item + .item {
    padding-left: 3%
}

#page-membership .content-section.graded #g_1120 .benefit-content .item .text {
    white-space: nowrap
}

#page-membership .content-section.graded .benefit-notice {
    padding-top: 20px
}

#page-membership .content-section.criteria {
}

#page-membership .content-section.criteria .section-subtitle {
    margin-bottom: 15px;
    font-weight: 600
}

#page-membership .content-section.condition {
}

#page-membership .content-section.condition .section-subtitle {
    margin-bottom: 15px;
    font-weight: 600
}

#page-membership .content-section.coupons-check {
}

#page-membership .content-section.coupons3 .check-header {
    margin-bottom: 20px;
    text-align: center
}

#page-membership .content-section.coupons-check .check-content {
    text-align: center
}

#page-membership .content-section.coupons-check .check-content .icon {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-top: 25px;
    margin-bottom: 10px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_my.png);
    background-size: 48px 48px
}

#page-membership .content-section.coupons-check .check-content small {
    display: block;
    padding-top: 8px;
    font-size: 12px;
    color: #757575
}

#page-membership .content-section.coupons-check .coupons-container {
    position: relative;
    padding-top: 25px;
    margin-top: 30px;
    border-top: 2px dashed #303030
}

#page-membership .content-section.coupons-check .coupons-container::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 8px;
    width: 18px;
    height: 14px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_cutter.png);
    background-size: 18px 14px
}

#page-membership .content-section.coupons-check .coupons-header {
    margin-bottom: 25px;
    text-align: center;
    font-size: 20px;
    color: #757575;
    font-weight: 600
}

#page-membership .content-section.coupons-check .coupon-list {
}

#page-membership .content-section.coupons-check .coupon-item {
    display: flex
}

#page-membership .content-section.coupons-check .coupon-item + .coupon-item {
    margin-top: 20px
}

#page-membership .content-section.coupons-check .coupon-item .type {
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 600
}

#page-membership .content-section.coupons-check .coupon-icon {
    box-sizing: content-box;
    width: 40%;
    padding-right: 10px
}

#page-membership .content-section.coupons-check .coupon-icon .icon {
    margin: 0 auto
}

/* --- Recall --- */
#page-recall .content-section.intro {
    text-align: center
}

#page-recall .content-section.intro .section-subtitle {
    margin-bottom: 15px;
    font-weight: 600
}

#page-recall .content-section.intro .section-text {
}

#page-recall .content-section.notice {
}

#page-recall .content-section.notice .list-bulleted .item {
    color: #757575
}

#page-recall .content-section.notice .section-title {
    margin-bottom: 15px;
    text-indent: 12px
}

#page-recall .content-section.notice .notice-list {
}

#page-recall .content-section.product {
}

#page-recall .content-section.product .recall-product-list {
}

#page-recall .content-section.product .product-item {
}

#page-recall .content-section.product .product-item + .product-item {
    margin-top: 40px
}

#page-recall .content-section.product .product-item:last-child {
    padding-bottom: 30px
}

#page-recall .content-section.product .product-inner {
}

#page-recall .content-section.product .product-top {
    position: relative;
    display: block;
    margin-bottom: 15px
}

#page-recall .content-section.product .product-top .thumbnail {
    display: inline-block;
    width: 60%;
    height: auto;
    background-color: #f1f1f1;
    line-height: 0
}

#page-recall .content-section.product .product-top .thumbnail img {
    width: 100%;
    height: auto
}

#page-recall .content-section.product .product-top .recall {
    position: absolute;
    right: 0;
    top: 0;
    width: 140px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center
}

#page-recall .content-section.product .product-top .recall .period {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #f1f1f1;
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 600
}

#page-recall .content-section.product .product-top .recall .period em {
    font-weight: 600
}

#page-recall .content-section.product .product-top .recall .sample {
}

#page-recall .content-section.product .product-top .recall .figure {
    display: inline-block;
    width: 80px;
    background-color: #f1f1f1;
    border-bottom: 1px solid rgba(48,48,48,.2);
    line-height: 0
}

#page-recall .content-section.product .product-top .recall .figure img {
    width: 100%;
    height: auto
}

#page-recall .content-section.product .product-top .recall .title {
    font-size: 14px;
    font-weight: 600
}

#page-recall .content-section.product .product-top .recall .title em {
    font-weight: 600
}

#page-recall .content-section.product .product-top .recall .text {
    color: #757575;
    white-space: nowrap
}

#page-recall .content-section.product .product-content {
    position: relative
}

#page-recall .content-section.product .product-content .subtitle {
    font-size: 14px
}

#page-recall .content-section.product .product-content .features {
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    padding-right: 10px;
    padding-left: 10px;
    background-color: #303030;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px
}

#page-recall .content-section.product .product-content .title {
    font-size: 16px;
    font-weight: 600
}

#page-recall .content-section.product .product-content .description {
    margin-top: 8px;
    color: #757575
}

#page-recall .content-section.product .product-content .price {
    margin-top: 10px;
    position: relative
}

#page-recall .content-section.product .product-content .amount {
    font-size: 20px
}

#page-recall .content-section.product .product-content .unit {
    font-size: 12px
}

#page-recall .content-section.product .product-content .ml {
    position: absolute;
    bottom: 0;
    right: 0
}

#page-recall .content-section.product .product-item[data-color="e79546"] .recall .period {
    background-color: #e79546
}

#page-recall .content-section.product .product-item[data-color="0066a9"] .recall .period {
    background-color: #0066a9
}

#page-recall .content-section.product .product-item[data-color="6f433c"] .recall .period {
    background-color: #6f433c
}

/* --- freebie --- */
#page-freebie {
}

/* #page-freebie .content-section.intro{display:flex;align-items:center} */
#page-freebie .content-section.intro > a {
    display: flex;
    width: 100%;
    align-items: center
}

#page-freebie .content-section.intro .figure {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid rgba(48,48,48,.2);
    margin-right: 5%
}

#page-freebie .content-section.intro .figure img {
    width: 68px;
    height: 68px
}

#page-freebie .content-section.intro .content {
    flex: 1
}

#page-freebie .content-section.intro .content .title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold
}

#page-freebie .content-section.intro .content .product {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: bold
}

#page-freebie .content-section.promotion {
    padding: 0;
    border: 0;
    margin: 0 -25px;
    /*background-color:#fa2828;height:150px;color:#fff;*/
    text-align: center
}

#page-freebie .content-section.promotion img {
    vertical-align: top;
    width: 100%;
    max-width: 600px;
    margin: 0 auto
}

#page-freebie .content-section.promotion .promotion {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 15px
}

#page-freebie .content-section.promotion .so-natural {
    width: 76px;
    height: 57px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_logo_s_w.png);
    background-size: 76px 57px
}

#page-freebie .content-section.promotion .payco {
    width: 121px;
    height: 27px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_payco.png);
    background-size: 121px 27px
}

#page-freebie .content-section.promotion .and-icon {
    margin: 0 20px
}

#page-freebie .content-section.promotion .subtitle {
    font-size: 16px;
    margin-bottom: 10px
}

#page-freebie .content-section.promotion .title {
    display: inline-flex;
    align-items: center;
    font-size: 20px
}

#page-freebie .content-section.promotion .title .payco {
    width: 72px;
    height: 16px;
    margin-right: 6px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_payco.png);
    background-size: 72px 16px
}

#page-freebie .content-section.criterion {
}

#page-freebie .content-section.criterion .criterion-header {
    position: relative;
    margin-bottom: 15px;
    text-align: center
}

#page-freebie .content-section.criterion .criterion-header .section-title {
    margin-bottom: 10px
}

#page-freebie .content-section.criterion .criterion-header .section-text {
}

#page-freebie .content-section.criterion .freebie-item {
}

#page-freebie .content-section.criterion .product-thumbnail {
    width: 270px;
    height: 270px;
    background-color: #f1f1f1;
    margin: 0 auto 20px
}

#page-freebie .content-section.criterion .product-thumbnail img {
    width: 100%;
    height: auto
}

#page-freebie .content-section.criterion .product-content {
    margin-bottom: 30px;
    text-align: center
}

#page-freebie .content-section.criterion .product-content .name {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold
}

#page-freebie .content-section.criterion .product-content .name small {
    font-size: 13px
}

#page-freebie .content-section.criterion .product-content .summary {
    margin-bottom: 10px
}

#page-freebie .content-section.criterion .product-content .price {
    font-size: 24px;
    font-weight: bold
}

#page-freebie .content-section.criterion .product-content .type {
}

#page-freebie .content-section.criterion .product-content .amount {
}

#page-freebie .content-section.criterion .product-content .currency {
}

#page-freebie .content-section.criterion .product-content .price small {
    display: block;
    margin-top: 6px;
    font-size: 16px
}

#page-freebie .content-section.criterion .criterion-notice {
    margin: 0 -25px;
    padding: 30px 25px
}

#page-freebie .content-section.criterion .criterion-notice .section-subtitle {
    margin-bottom: 15px;
    font-weight: bold
}

#page-freebie .content-section.criterion .criterion-notice span {
    display: block;
    color: #757575
}

#page-freebie .content-section.special {
}

#page-freebie .content-section.special .special-header {
    text-align: center
}

#page-freebie .content-section.special .special-header .section-title {
    margin-bottom: 20px
}

#page-freebie .content-section.special .special-header .section-text {
    display: inline-block;
    text-align: left
}

#page-freebie .content-section.special .special-list-container {
}

#page-freebie .content-section.special .special-list {
    display: flex;
    flex-wrap: wrap;
    padding-top: 25px
}

#page-freebie .content-section.special .special-item {
    width: 50%;
    text-align: center
}

#page-freebie .content-section.special .special-item:nth-of-type(n+3) {
    padding-top: 20px
}

#page-freebie .content-section.special .product-area {
    position: relative
}

#page-freebie .content-section.special .product-area .product {
    max-width: 170px;
    margin: 0 auto;
    margin-bottom: 10px
}

#page-freebie .content-section.special .product-area .product img {
    width: 100%;
    height: auto;
    max-width: 170px
}

#page-freebie .content-section.special .product-area .discount {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

#page-freebie .content-section.special .product-area .discount .title {
    display: inline-block;
    font-size: 12px
}

#page-freebie .content-section.special .product-area .discount .rate {
    font-size: 18px
}

#page-freebie .content-section.special .content-area {
}

#page-freebie .content-section.special .content-area .title {
    font-size: 14px;
    font-weight: bold
}

#page-freebie .content-section.special .content-area .price {
    color: #757575;
    font-weight: bold
}

#page-freebie .content-section.special .content-area .content {
    color: #dd426f;
    font-weight: bold
}

#page-freebie .content-section.service {
    position: relative;
    text-align: center
}

#page-freebie .content-section.service .service-header {
    margin-bottom: 25px
}

#page-freebie .content-section.service .service-header .section-title {
}

#page-freebie .content-section.service .service-content {
}

#page-freebie .content-section.service .service-content .image {
    width: 143px;
    height: 140px;
    margin: 0 auto;
    margin-bottom: 25px
}

#page-freebie .content-section.service .service-content .image img {
    width: 100%;
    height: auto
}

#page-freebie .content-section.service .service-content .text {
    margin-bottom: 10px;
    line-height: 1.8;
    font-size: 13px
}

#page-freebie .content-section.service .service-content .sub-text {
    color: #757575
}

#page-freebie .content-section.service .service-content .sub-text + .sub-text {
    margin-top: 8px
}

#page-freebie .content-section.membership {
}

#page-freebie .content-section.membership .membership-header {
    margin-bottom: 15px;
    text-align: center
}

#page-freebie .content-section.membership .membership-header .section-title {
    margin-bottom: 15px;
    line-height: 1.4
}

#page-freebie .content-section.membership .membership-header .link-arrow {
    color: #757575
}

#page-freebie .content-section.membership .membership-content .grade-type {
    margin-bottom: 30px
}

#page-freebie .section.member-only {
}

#page-freebie .section.member-only .member-avail {
    margin-bottom: 0
}

/* --- Monthly --- */
#page-monthly-issue {
}

#page-monthly-issue .monthly-issue-container {
    padding-top: 30px
}

#page-monthly-issue .monthly-issue-header {
    position: relative;
    text-align: center
}

#page-monthly-issue .monthly-issue-header .title {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 600
}

#page-monthly-issue .monthly-issue-header .subtitle {
    margin-bottom: 50px;
    font-size: 13px;
    color: #757575
}

#page-monthly-issue .issue-list {
}

#page-monthly-issue .issue-item {
    position: relative
}

#page-monthly-issue .issue-item + .issue-item {
    padding-top: 40px
}

#page-monthly-issue .issue-image {
    position: relative;
    display: block;
    margin: 0 -25px
}

#page-monthly-issue .issue-image a {
    display: block;
    line-height: 0
}

#page-monthly-issue .issue-image img {
    width: 100%;
    height: auto
}

#page-monthly-issue .issue-content {
    position: relative;
    padding-top: 20px;
    text-align: center
}

#page-monthly-issue .issue-content .issue-badge {
    display: inline-flex;
    height: 20px;
    padding: 10px;
    font-size: 11px;
    text-transform: uppercase;
    align-items: center;
    border: 1px solid #303030;
    border-radius: 3px;
    font-weight: bold
}

#page-monthly-issue .issue-content .issue-name {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600
}

#page-monthly-issue .issue-content .issue-sub-name {
    margin-top: 10px;
    font-size: 13px
}

#page-monthly-issue .issue-item.is-closed .issue-image {
}

#page-monthly-issue .issue-item.is-closed, #page-monthly-issue .issue-item.is-closed .issue-name, #page-monthly-issue .issue-item.is-closed .issue-name a {
    color: #999
}

#page-monthly-issue .issue-item.is-closed .issue-badge {
    border-color: #999
}

/****************/
/**** Popup. ****/
/****************/
.dim {
    display: none;
    position: fixed;
    z-index: 1501;
    top: 0;
    right: 0;
    left: 0;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: rgba(48,48,48,0.6)
}

.dim.is-visible {
    display: block
}

.popup {
    display: none;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    left: 0;
    max-height: none;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #fff
}

.popup.is-visible {
    display: block
}

.today-popup {
    display: none;
    position: fixed;
    z-index: 3000;
    top: 0;
    right: 0;
    max-height: none;
    width: 270px;
    height: 100%;
    margin: 0;
    background-color: #fff;
}

.today-popup.is-visible {
    display: block
}

.today-popup .component {
    min-width: auto;
    padding-right: 40px;
    padding-left: 60px
}

.popup-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 90px;
    background-color: #fff
}

.popup-header .popup-title {
    position: absolute;
    width: 80px;
    top: 0;
    left: 38%;
    text-transform: uppercase;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 90px
}

.popup-header .btn-x {
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 1000;
    width: 46px;
    height: 60px;
    top: 15px;
    margin-left: -14px;
    align-items: center;
    justify-content: center
}

.today-popup .popup-header {
    height: 60px
}

.today-popup .popup-header .popup-title {
    line-height: 60px
}

.today-popup .popup-header .btn-x {
    margin-top: 0;
    margin-left: -49px;
    top: 0
}

.popup-header .btn-x span.icon {
    overflow: hidden;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    width: 14px;
    height: 15px;
    background-image: url(http://www.sonatural.co.kr/design/sona6769/images/m_icon_close.svg)
}

.popup-body {
    overflow: hidden;
    overflow-y: auto;
    position: absolute;
    top: 90px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    -webkit-overflow-scrolling: touch
}

.popup-body.stick {
    overflow: auto;
    position: relative;
    top: inherit;
    right: inherit;
    bottom: inherit;
    left: inherit;
    height: inherit;
    -webkit-overflow-scrolling: touch
}

.popup .popup-body .popup-address-content {
    position: relative;
    width: 100%;
    height: 100%
}

.today-popup .popup-body {
    top: 60px
}

.today-popup .product-item {
    padding-bottom: 20px
}

.today-popup .product-item:last-child {
    padding-bottom: 0
}

.today-popup .product-list-wrapper {
    padding-bottom: 60px
}

.popup-footer {
}

.popup-order-details {
}

.popup-order-details .form-field.buttons .text-notice {
    margin: 0 0 10px
}

.popup-order-details .section.order-confirm, .popup-order-cancel .section.order-confirm {
    padding-bottom: 10px
}

.popup-order-details .section.order-confirm .section-header, .popup-order-cancel .section.order-confirm .section-header {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(48,48,48,0.3)
}

.popup-body.page-address#page-address-manage .sn-list-content .form-check {
    display: block
}

.popup-body.page-address#page-address-manage .form-check.radio input {
    top: 10px
}

.popup-body.page-address#page-address-manage .delivery-list-item .phone {
    padding-left: 10px
}

.popup-body.page-address#page-address-manage .delivery-list-item .name, .popup-body.page-address#page-address-manage .delivery-list-item .phone {
    display: inline-block
}

#page-location .location {
    padding-top: 30px
}

#page-location .location {
    position: relative
}

#page-location .location .map {
    padding-bottom: 65px
}

#page-location .location .map:last-child {
    padding-bottom: 0
}

#page-location .location .map h5 {
    font-size: 16px;
    line-height: 20px
}

#page-location .location .map-image {
    margin-top: 20px;
    margin-bottom: 25px;
    margin-left: -24px;
    margin-right: -24px;
    width: 100vw;
    height: 266px
}

#page-location .location .map .address {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px
}

#page-location .location .map .second-address {
    color: #999;
    font-size: 12px
}

@media only screen and (max-width: 360px) {
    .product-list-wrapper.type-list .product-button {
        width:65px;
        padding: 0
    }

    .sn-footer .footer-info .info .mail:nth-child(2)::after {
        display: none
    }

    .grade-type {
        margin: 0 -10px
    }

    .page-service .basic-benefits .benefit-content {
        font-size: 18px
    }

    .page-service .basic-benefits .coupon-icon {
        margin-right: 12px
    }

    .page-service .basic-benefits .discount-icon {
        margin-left: 12px
    }

    #page-recall .content-section.notice .item br {
        display: none
    }

    #page-recall .content-section.product .product-top .recall .period {
        width: 80px;
        height: 80px;
        margin-top: -10px
    }

    #page-recall .content-section.product .product-content .description br {
        display: none
    }

    #page-showroom .showroom-feature .feature-item .icon {
        width: 80px
    }

    #page-showroom .showroom-feature .feature-item:nth-child(odd) {
        padding-left: 95px
    }

    #page-showroom .showroom-feature .feature-item:nth-child(even) {
        padding-right: 95px
    }

    #page-showroom .showroom-feature .feature-item .description br {
        content: '';
        display: inline-block !important;
        width: 4px
    }

    /* #page-showroom .showroom-event .event-1 .image{top:48px;right:-15px;width:178px} */
    /* #page-showroom .showroom-event .event-2 .image{width:134px;top:30px} */
    #page-the-pure .brand-section.essential .essential-header .section-title.en::after {
        right: auto;
        margin-right: 0;
        left: 0;
        margin-left: -74px
    }
}

/*@media only screen and (max-width:413px){*/
.cs-contact .contact {
    width: 100%
}

.cs-contact .open {
    width: 100%
}

.cs-contact .contact-container {
    flex-wrap: wrap;
    text-align: center
}

.cs-contact .contact-container::after {
    display: none
}

.cs-contact .open {
    padding-top: 30px
}

.cs-contact .open .time {
    justify-content: center
}

.cs-contact .open .time + .time {
    padding-top: 4px
}

.cs-contact .open .time .moment {
    text-align: left
}

/*}*/
@media only screen and (max-width: 360px) {
    .sn-footer .footer-info .info .mail:nth-child(2)::after {
        display:none
    }

    .grade-type {
        margin: 0 -10px
    }

    .page-service .basic-benefits .benefit-content {
        font-size: 18px
    }

    .page-service .basic-benefits .coupon-icon {
        margin-right: 12px
    }

    .page-service .basic-benefits .discount-icon {
        margin-left: 12px
    }

    #page-recall .content-section.notice .item br {
        display: none
    }

    #page-recall .content-section.product .product-top .recall .period {
        width: 80px;
        height: 80px;
        margin-top: -10px
    }

    #page-recall .content-section.product .product-content .description br {
        display: none
    }

    #page-showroom .showroom-feature .feature-item .icon {
        width: 80px
    }

    #page-showroom .showroom-feature .feature-item:nth-child(odd) {
        padding-left: 95px
    }

    #page-showroom .showroom-feature .feature-item:nth-child(even) {
        padding-right: 95px
    }

    #page-showroom .showroom-feature .feature-item .description br {
        content: '';
        display: inline-block !important;
        width: 4px
    }

    /* #page-showroom .showroom-event .event-1 .image{top:48px;right:-15px;width:178px} */
    /* #page-showroom .showroom-event .event-2 .image{width:134px;top:30px} */
    #page-the-pure .brand-section.essential .essential-header .section-title.en::after {
        right: auto;
        margin-right: 0;
        left: 0;
        margin-left: -74px
    }

    .brand-list .brand-link .info {
        letter-spacing: -0.1em;
        padding: 22px 7px 18px
    }

    .sn-button {
        font-size: 13px
    }

    .order-content .product-list-wrapper.type-list .product-details {
        width: calc(100% - 50px)
    }

    .product-detail-related .product-price {
        padding-top: 0
    }
}

@media only screen and (max-width: 321px) {
    .sn-header .sn-logo {
        margin-left:-30px;
        top: 20px
    }

    .sn-header .sn-logo span {
        width: 60px;
        height: auto
    }

    .product-item .product-name {
        font-size: 12px;
        letter-spacing: -1px
    }

    .sn-footer .footer-intro .title {
        letter-spacing: -0.08em
    }

    .brand-list .brand-link .logo {
        display: none
    }

    .brand-list .brand-link .logo span.logo-sonatural {
        width: 60px;
        height: auto;
        background-size: 60px 30px
    }

    .brand-list .brand-link .logo span.logo-powder4room {
        width: 50px;
        height: auto;
        background-size: 50px auto
    }

    .brand-list .brand-link .logo span.logo-thepure {
        width: 50px;
        height: auto;
        background-size: 50px auto
    }

    .brand-story-banner .slogan {
        font-size: 12px;
        letter-spacing: -0.7px
    }

    .live-content-wrapper .info-area .nav-link {
        bottom: 38px
    }

    .live-content-wrapper .lave-content-name {
        padding-top: 12px
    }

    .sn-footer .footer-intro .title {
        letter-spacing: -0.08em
    }

    .product-list-wrapper.type-list .product-thumbnail {
        width: 60px
    }

    .product-item .product-thumbnail .thumbnail {
        margin-top: 20px
    }

    .product-list-wrapper.type-list .product-button {
        width: 90px
    }

    .page-beauty-zone .beauty-tester-intro .title {
        font-size: 16px
    }

    .page-beauty-zone .beauty-tester-intro .description {
        letter-spacing: -0.1em
    }

    .page-beauty-zone .beauty-tester-recruit .content-area .subtitle {
        font-size: 12px
    }

    .page-beauty-zone .beauty-tester-recruit .product-area img {
        width: 160px;
        height: 160px;
        margin-top: 20px
    }

    .page-beauty-zone .beauty-tester-notice .title {
        font-size: 12px
    }

    .page-beauty-zone .beauty-tester-notice .description {
        font-size: 12px
    }

    #page-showroom .showroom-location .info-item .emphasis {
        font-size: 13px
    }

    #page-showroom .showroom-event .event .stext {
        letter-spacing: -0.1em
    }

    #page-showroom .showroom-event .event-1 .image {
        width: 128px
    }

    #page-showroom .showroom-event .event-2 .image {
        width: 96px;
        top: 66px
    }

    #page-brand-story .brand-section.zero-margin .one-stop-item .title {
        font-size: 14.5px
    }

    .page-brand .section-text.large {
        font-size: 12px
    }

    .page-brand .section-subtitle {
        font-size: 13px;
        line-height: 20px
    }

    #page-brand-story .brand-section.feature .feature-title .title {
        font-size: 21px
    }

    #page-brand-story .brand-section.history .detailed-list .history-title {
        font-size: 12px
    }

    #page-brand-story .brand-section.zero-margin .one-stop-description .section-text {
        font-size: 10px;
        letter-spacing: -0.1em
    }

    #page-so-natural .brand-section.for-skin .content-area .section-subtitle {
        font-size: 13px
    }

    #page-so-natural .brand-section.natural-keyword .keyword-description .section-text {
        font-size: 12px;
        letter-spacing: -0.1em
    }

    .page-brand .section-title {
        font-size: 20px
    }

    #page-the-pure .brand-section.perfume .perfume-header .section-title {
        font-size: 18px
    }

    .page-brand .brand-intro .content-area .title.ko {
        font-size: 12px
    }

    #page-powder-4-room .brand-define.powder-4-room .brand-logo .logo {
        width: 100%
    }

    .page-service .section-title {
        font-size: 18px
    }

    #page-freebie .content-section.special .content-area .title {
        font-size: 12px
    }

    #page-freebie .content-section.service .service-content .text {
        font-size: 12px;
        letter-spacing: -0.03em
    }

    #page-recall .content-section.product .product-content .subtitle {
        font-size: 12px
    }

    #page-recall .content-section.product .product-content .title {
        font-size: 14px
    }

    #page-membership .content-section.benefit .section-text {
        letter-spacing: -0.06em
    }

    #page-membership .content-section.coupons-check .coupon-icon {
        width: 38%
    }

    #page-membership .content-section.coupons-check .coupon-item .text {
        letter-spacing: -0.03em
    }

    #page-membership .content-section.graded .benefit-content .item .text {
        width: 75px
    }

    .page-service .section-subtitle {
        font-size: 12px
    }

    .form-field .form-label {
        float: none
    }

    .form-field .form-content {
        float: none;
        width: 100%
    }

    /* .page-login .nonmember-login .form-row.check{margin-right:0;width:100%} */
    .section.member .form-field .form-content,.section.nonmember .form-field .form-content {
        float: left;
        width: calc(100% - 100px)
    }

    .section.member .form-row.check {
        margin-right: -100px;
        width: calc(100% + 100px)
    }

    .product-list-wrapper.type-list .product-details .product-util .option-item .name {
        width: 40px
    }

    .product-list-wrapper.type-list .product-details .product-util .option-item select {
        margin-left: 0;
        width: 110px
    }

    .product-list-wrapper.type-list .product-details .product-util .option-item .sn-quantity {
        margin-left: 0;
        width: 110px
    }
}

#tplCheckCoupon {
    z-index: 10000
}

#page-coupon-a form {
    padding-top: 20px
}

#available-coupon .product-list-wrapper.type-list {
    padding-right: 0;
    padding-left: 0
}

#available-coupon .product-list-wrapper.type-list .product-details .product-price {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 4px
}

#available-coupon .product-list-wrapper.type-list .product-details .product-quantity {
    position: absolute;
    right: 0;
    top: 5px;
    color: #757575
}

#available-coupon .product-list-wrapper.type-list .product-details .product-select {
    margin-top: 10px
}

#available-coupon .product-list-wrapper.type-list .product-list-item {
    padding-top: 20px;
    padding-bottom: 20px
}

#available-coupon .total-amount {
    position: relative;
    padding-top: 20px;
    display: flex;
    width: 100%;
    font-size: 16px;
    line-height: 20px;
    border-top: 1px solid rgba(48, 48, 48, 0.3);
    text-align: center
}

#available-coupon .total-amount::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 20px;
    left: 50%;
    top: 20px;
    border-right: 1px solid rgba(48,48,48,0.3)
}

#available-coupon .total-amount>div {
    flex: 1
}

#available-coupon .total-amount .price i {
    font-family: 'Noto Sans KR'
}

#available-coupon .total-amount .total-discount {
    color: #dd426f
}

#coupon-list .sn-list-content .list-item {
    padding-top: 15px;
    padding-bottom: 15px
}

#coupon-list .sn-list-content .list-item .item-inner {
    display: flex
}

#coupon-list .sn-list-content .list-item .item-inner .details {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px
}

#coupon-list .sn-list-content .list-item .item-inner .period {
    font-family: 'Noto Sans KR';
    font-size: 13px;
    line-height: 20px;
    text-align: right;
    color: #757575
}

#coupon-list .sn-list-content .list-item .item-inner .period .end {
    position: relative
}

#coupon-list .sn-list-content .list-item .item-inner .period .end::before {
    content: '-';
    padding-right: 4px;
    position: relative;
    display: inline-block;
    vertical-align: middle
}

#subcontents {
    position: relative;
    padding-top: 5px
}

#subcontents .video-frame {
    position: relative;
    width: 100%;
    height: 0
}

#subcontents iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top
}

#subcontents .of::after {
    content: '';
    display: block;
    position: relative;
    clear: both
}

#subcontents .of a {
    float: left
}

#subcontents a {
    display: block
}

#subcontents img {
    vertical-align: top;
    width: 100%
}

a.ps_cls_btn_editCmd.btn-add.sn-button {
    white-space: nowrap
}

.hold-desc {
    margin-top: 30px;
    padding-top: 25px;
    padding-bottom: 25px;
    border-top: 1px solid rgba(48, 48, 48, 0.3);
    border-bottom: 1px solid rgba(48, 48, 48, 0.3);
    font-size: 13px;
    line-height: 20px
}

.hold-desc p {
    padding-bottom: 20px
}

.hold-desc p:last-child {
    padding-bottom: 0
}

.btn-check-trans {
    display: inline-block;
    margin-left: 15px;
    width: 80px;
    height: 30px;
    margin-top: -5px;
    margin-bottom: -5px;
    border: 1px solid #303030;
    background-color: #303030;
    text-align: center;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 13px;
    line-height: 30px;
    font-weight: 600;
    -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out
}

.skin-type {
    display: none;
    position: relative
}

.skin-type.is-selected {
    display: block
}

.skin-type-intro {
    position: relative;
    margin-bottom: 30px;
    text-align: center
}

.skin-type-intro .title {
    margin-bottom: 18px;
    line-height: 1.4;
    font-size: 20px;
    font-weight: 700
}

.intro-content {
    position: relative;
    padding-top: 35px;
    padding-bottom: 50px;
    text-align: center
}

.intro-content .title {
    margin-bottom: 18px;
    line-height: 1.40;
    font-size: 16px;
    font-weight: 700
}

.intro-content .note {
    position: absolute;
    text-align: center;
    width: 100%;
    color: #dd426f
}

.skin-type-tabs {
    position: relative
}

.skin-type-tabs::after {
    content: '';
    display: block;
    clear: both
}

.skin-type-tabs .type-item {
    float: left;
    width: 33.3%
}

.skin-type-tabs .type-tab {
    display: block;
    border: 1px solid #303030;
    margin: 1%;
    padding: 7% 0;
    text-align: center;
    color: #303030
}

.skin-type-tabs .text {
    display: block;
    margin-bottom: 2px;
    letter-spacing: -0.5px
}

.skin-type-tabs .title {
    font-size: 14px
}

.skin-type-tabs .type-item.is-selected {
}

.skin-type-tabs .type-item.is-selected .type-tab {
    background-color: #303030;
    color: #fff
}

.skin-type .type-header {
    margin-left: 24px;
    margin-right: 24px;
    padding-bottom: 35px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px
}

.skin-type .type-header:last-child {
    padding-bottom: 0
}

.skin-type .type-header .step {
    display: block;
    border-radius: 3px;
    height: 26px;
    line-height: 24px;
    margin-bottom: 3px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff
}

.skin-type .type-header span {
    display: block
}

.skin-type .type-list-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 200px
}

.skin-type .type-list-container::-webkit-scrollbar {
    display: none;
    background-color: transparent;
    -webkit-appearance: none
}

.skin-type .type-list-container::-webkit-scrollbar-track {
    display: none;
    background-color: transparent;
    -webkit-appearance: none
}

.skin-type .type-list-container::-webkit-scrollbar-thumb {
    display: none;
    background-color: transparent;
    -webkit-appearance: none
}

.skin-type .type-list-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 24px;
    padding-left: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: content-box
}

.skin-type .type-list-wrapper .product-item {
    display: inline-block;
    width: 150px;
    padding-right: 5px;
    padding-left: 5px
}

.skin-type .type-list-wrapper .product-item a {
    display: block;
    text-align: center
}

.skin-type .type-list-wrapper .product-item a span {
    display: block
}

.skin-type .type-list-wrapper .product-item a img {
    width: 100%
}

.skin-type .type-list-wrapper .product-item a .title {
    padding-top: 10px;
    line-height: 18px;
    font-size: 12px
}

.skin-type .type-container {
    margin-bottom: 50px
}

.skin-type .type-container:nth-of-type(1) .type-header .step {
    background-color: #c0c0c0
}

.skin-type .type-container:nth-of-type(2) .type-header .step {
    background-color: #ababab
}

.skin-type .type-container:nth-of-type(3) .type-header .step {
    background-color: #979797
}

.skin-type .type-container:nth-of-type(4) .type-header .step {
    background-color: #848484
}

.skin-type .type-container:nth-of-type(5) .type-header .step {
    background-color: #6e6e6e
}

.skin-type .type-container:nth-of-type(6) .type-header .step {
    background-color: #5c5c5c
}

.skin-type .type-container:nth-of-type(7) .type-header .step {
    background-color: #444444
}

.skin-type .type-container:nth-of-type(8) .type-header .step {
    background-color: #353535
}

.page-brand .brand-section.natural-lab {
    padding-top: 0
}

.natural-lab .lab-header {
    position: relative;
    padding-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    border-top: 1px solid #484848
}

.natural-lab .lab-header .subtitle:first-child {
    margin-bottom: 16px;
    font-size: 24px
}

.natural-lab .lab-header .section-title {
    margin-bottom: 16px;
    text-transform: uppercase
}

.natural-lab .lab-header .subtitle.en {
    margin-bottom: 25px;
    font-size: 14px;
    letter-spacing: 0.025em
}

.natural-lab .lab-header .text {
    display: inline-block;
    padding: 4px 10px;
    background-color: #303030;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    color: #fff
}

.natural-lab .lab-info {
    position: relative;
    margin-bottom: 55px
}

.natural-lab .lab-info .title {
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase
}

.natural-lab .lab-info .subtitle {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600
}

.natural-lab .lab-info .section-text {
}

.natural-lab .lab-info .section-text strong {
    display: block
}

.natural-lab .lab-info .figure {
    margin-bottom: 12px
}

.natural-lab .lab-info .figure img {
    width: 100%
}

.natural-lab .lab-team {
    position: relative;
    margin-bottom: 40px;
    text-align: center
}

.natural-lab .lab-team .header {
    width: 241px;
    margin: 0 auto 14px;
    padding-bottom: 20px;
    border-bottom: 2px solid #797979
}

.natural-lab .lab-team .header .section-title {
    margin-bottom: 12px
}

.natural-lab .lab-team .header .subtitle {
    font-size: 14px;
    font-weight: 600
}

.natural-lab .lab-team .feature {
}

.natural-lab .lab-team .item {
}

.natural-lab .lab-team .between {
    padding: 45px 0
}

.natural-lab .lab-team .between img {
    width: 45px;
    height: auto
}

.natural-lab .lab-team .sn .header img {
    width: 90px;
    height: auto
}

.natural-lab .lab-member {
    overflow: hidden;
    line-height: 0;
    position: relative;
    margin-bottom: 15px
}

.natural-lab .lab-member .content-area {
    position: relative;
    width: 100%
}

.natural-lab .lab-member .content-area .quote {
    padding: 13% 0 0 10%;
    margin-bottom: 20px
}

.natural-lab .lab-member .content-area .section-text {
    color: #fff
}

.natural-lab .lab-member .content-area .signature {
    padding-left: 12%;
    padding-bottom: 6%
}

.natural-lab .lab-member .content-area .signature .name {
    position: relative;
    display: inline-block;
    height: 43px;
    line-height: 41px;
    color: #fff
}

.natural-lab .lab-member .content-area .signature .name::after {
    content: '';
    position: absolute;
    left: 120%;
    width: 92px;
    height: 43px;
    background: url(http://www.sonatural.co.kr/design/sona6769/images/lab-member-signature@3x.png) no-repeat 0 0;
    background-size: 92px auto
}

.natural-lab .lab-member .background-area {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.natural-lab .lab-member .background-area img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.natural-lab .lab-history {
    position: relative;
    margin-bottom: 45px;
    padding-left: 10%
}

.natural-lab .lab-history .name {
    margin-bottom: 45px;
    font-size: 26px;
    font-weight: 700;
    color: #797979
}

.natural-lab .lab-history .career .summary {
    line-height: 1.5;
    font-size: 14px;
    font-weight: 600;
    color: #757575
}

.natural-lab .lab-history .career li {
    line-height: 1.45;
    font-size: 14px;
    font-weight: 600;
    color: #757575
}

.natural-lab .lab-history .career li.break {
    margin-bottom: 33px
}

.natural-lab .lab-feature {
    position: relative;
    padding: 0 10%
}

.natural-lab .lab-feature .feature-list {
}

.natural-lab .lab-feature .item {
}

.natural-lab .lab-feature .header {
    position: relative;
    border-bottom: 4px solid #303030;
    margin-bottom: 30px
}

.natural-lab .lab-feature .number {
    position: relative;
    top: 10px;
    display: inline-block;
    background-color: #fff;
    line-height: 1;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.025em
}

.natural-lab .lab-feature .text {
    line-height: 1.2;
    font-size: 23px;
    font-weight: 800
}

.natural-lab .lab-feature .item + .item {
    margin-top: 30px
}

.natural-lab .lab-feature .item:nth-child(even) {
    text-align: right
}

.natural-lab .lab-feature .item:nth-child(even) .number {
    padding-left: 20px
}

.natural-lab .lab-feature .item:nth-child(odd) .number {
    padding-right: 20px
}

.sn-sidebar .site-service .util-service .util-item .number span {
    color: #303030 !important;
    font-weight: 300;
}

.snslogin {
    padding: 40px 0;
    text-align: center;
}

.snslogintitle {
    font-size: 14px;
    display: inline-block;
    letter-spacing: 0.5px;
    font-weight: 300;
}

.snslogin a img {
    width: 30px;
    vertical-align: middle;
    margin-left: 8px;
    border-radius: 3px;
}

/* top banner */
/* top banner */
/* top banner */
.topbanner {
    position: relative;
    min-width: 100%;
    display: none;
    height: 0;
    overflow: hidden;
}

.topbanner .inner {
    text-align: center;
}

.topbanner .inner2 {
    position: relative;
    text-align: center;
    display: block;
}

.topbanner .inner img {
    width: 100%;
    height: 100%;
    display: block;
}

.topbanner .inner form {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    outline: 0;
    right: 10px;
    z-index: 99;
}

.topbanner .inner form img {
    width: 15px;
}

.positionfixed {
    /* position: fixed;
    top: 0;
    z-index: 2222;*/
    width: 100%;
}

#sn-body .page-header {
    top: 0 !important;
}

.product-details .guides .guide-table .guide-title b {
    font-weight: 400;
}

.product-details .guides .guide-content b {
    font-weight: 100;
}

.product-list-wrapper.type-list .product-flag .flag + .flag {
    margin-right: 0;
    margin-top: 5px;
}

.product-list-wrapper.type-list .product-flag {
    width: 50px;
}

.product-list-wrapper.type-list .product-details p.product-sort {
    font-size: 13px;
}

.product-list-wrapper.type-list .product-details a.product-name {
    font-size: 16px;
    width: 80%;
    display: block;
    padding-top: 2px;
    padding-bottom: 7px;
}

/* 2024 07 02 new header */
.page-header { display: none !important; }

.slidemenu_open { overflow-y: hidden; }

#black_dummy, #search_black_dummy { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: -1; opacity: 1; z-index: 200; }
#search_black_dummy {z-index:85;}
#aside {width: 94%;background: #fff;z-index: 200;position: fixed;height: 100%;top: 0px;left: -100%;overflow-y: scroll;-webkit-box-sizing: border-box;-khtml-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;padding: 18px 24px;letter-spacing: -0.25px;}

.btnClose {position: absolute;top: 18px;right: 16px;}

.btnClose img {width: 11px;}

.loginBtn { display: flex; align-items: center; gap: 5px; }

.loginBtn a {border: 1px solid #c6c6c6;border-radius: 3px;height: 38px;line-height: 38px;box-sizing: border-box;padding: 0 20px;color: #000000;font-size: 13px;font-weight: 500;}

.loginBtn a:first-child { background: #2d5727; color: #fff; border: 1px solid #2d5727; }
.loginBtn.stateLogin {}

.loginBtn.stateLogin a:first-child {color: #dd426f;background: #fff;border: 1px solid #dd426f;}
.loginText {color: #666666;font-size: 12px;margin-top: 13px;}

._searchForm {margin-top: 18px;border: 1px solid #c6c6c6;border-radius: 3px;position: relative;}

.searchBox { position: relative; }

.btn_search {background: url(/design/sona6769/ic_search.png) no-repeat;width: 13px;height: 14px;display: inline-block;background-size: cover;position: absolute;right: 12px;top: 12px;}

.btn_search span { display: none; }

._searchForm input#keyword {height: 39px;line-height: 39px;border: 0;background: transparent;width: 90%;padding: 0 12px;color: #000;font-size: 13px;outline: 0;}

._searchForm input#keyword::placeholder { color: #666; }

#aside nav {margin-top: 18px;}

#aside nav > ul > li {margin-top: 19px;}

#aside nav > ul > li > a {color: #000000;font-size: 17px;font-weight: 500;display: block;position: relative;}

#aside nav > ul > li.li_shop > .shop > span {position: absolute;top: 7px;right: 0;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;background: #252525;width: 9px;height: 1px;}

#aside nav > ul > li.li_shop > .shop > span:nth-child(1) { transform: rotate(-180deg); }

#aside nav > ul > li.li_shop > .shop > span:nth-child(2) { transform: rotate(-90deg); }

#aside nav > ul > li.li_shop.on > .shop > span:nth-child(1) { transform: rotate(180deg); }

#aside nav > ul > li.li_shop.on > .shop > span:nth-child(2) { transform: rotate(-180deg); }

#aside nav > ul > li.li_shop > ul {margin-top: 15px;display: none;padding-left: 12px;}

#aside nav > ul > li.li_shop > ul > li + li { margin-top: 20px; }

#aside nav > ul > li.li_shop > ul > li > a {color: #303030;font-size: 14px;font-weight: 500;display: block;position: relative;}

#aside nav > ul > li.li_shop > ul > li > a > span {position: absolute;top: 7px;right: 0;-webkit-transition: all 300ms ease;-moz-transition: all 300ms ease;-ms-transition: all 300ms ease;-o-transition: all 300ms ease;transition: all 300ms ease;background: #252525;width: 9px;height: 1px;}

#aside nav > ul > li.li_shop > ul > li > a > span:nth-child(1) { transform: rotate(-180deg); }

#aside nav > ul > li.li_shop > ul > li > a > span:nth-child(2) { transform: rotate(-90deg); }

#aside nav > ul > li.li_shop > ul > li.on > a > span:nth-child(1) { transform: rotate(180deg); }

#aside nav > ul > li.li_shop > ul > li.on > a > span:nth-child(2) { transform: rotate(-180deg); }

#aside nav > ul > li.li_shop > ul > li > ul {padding-left: 15px;padding-top: 5px;padding-bottom: 5px;display: none;}

#aside nav > ul > li.li_shop > ul > li > ul > li {margin-top: 10px;}

#aside nav > ul > li.li_shop > ul > li > ul > li > a {color: #666666;font-size: 13px;letter-spacing: -0.35px;}

.etcAside {margin-top: 20px;padding-top: 20px;border-top: 1px solid #aaaaaa;}

.etcAside ul li a, .etcAside ul li span { color: #303030; font-size: 16px; font-weight: 500; }

.etcAside ul li + li {margin-top: 11px;}

.lang span { position: relative; }

.lang span:after { content: ""; position: absolute; top: 50%; right: -18px; margin-top: -7px; width: 7px; height: 7px; border-left: 2px solid #a3a3a3; border-bottom: 2px solid #a3a3a3; -ms-transform: rotate(-45deg); transform: rotate(-45deg); }

.lang a { display: none;     margin-top: 5px;}

.lang.on span:after{margin-top: -2px; -ms-transform: rotate(135deg);transform: rotate(135deg);}

.lang.on a {display: block;}

.bannerAside { margin-top: 40px; padding-bottom: 40px; }

.bannerAside img { width: 100%; }

#header {padding: 28px 24px;position: relative;text-align: center;z-index:99;}

#header img {width: 16px;}

#header .menuBtn img {width: 20px;}

#header .rightBtn { position: absolute; top: 50%; transform: translateY(-50%); right: 15px; }

#header .rightBtn a {position: relative;display: inline-block;margin-left: 12px;}

#header .rightBtn a span { background: #000; width: 12px; height: 12px; position: absolute; top: 1px; right: -3px; color: #fff; border-radius: 100%; text-align: center; line-height: 12px; font-size: 10px; }

#header .logo img {width: 130px;}

.menuBtn { position: absolute; top: 50%; transform: translateY(-50%); left: 24px; }

#header .rightBtn a:last-child { margin-right: 3px; }

.searchFormHeader{z-index:99;position:absolute;top:74px;right:0;left:0;width:100%;display:none;}
.searchFormHeader .sch{padding:16px;}
.searchFormHeader .sch div{position:relative;}
.searchFormHeader .sch div p{width:100%;}
.searchFormHeader .sch div p input[type="text"]{width:100%;background:transparent;border:0;border-bottom:1px solid #efefef;padding:0;outline:0;}
.searchFormHeader .sch div .btn-detail-sch{position:absolute;top:10px;right:0;}
#header.sch-box-open, #header.sch-box-open .searchFormHeader {background:#fff;} 
#aside .logo {
    margin-bottom: 40px;
    margin-top: 1px;
    display: none;
}

#aside .logo img {
    width: 130px;
}
 
/* BASIC css end */