/* BASIC css start */
.group_img { display: inline-block; margin-right: 8px; position: absolute; right: 50px; top: 1px; } 

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

@font-face { font-family: 'Nanum Barun Gothic'; font-style: normal; font-weight: 600; src: url(/design/sona6769/fonts/NanumBarunGothicBold.eot); src: local('Nanum Barun Gothic Bold'), local('NanumBarunGothicBold'), url(/design/sona6769/fonts/NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'), url(/design/sona6769/fonts/NanumBarunGothicBold.woff2) format('woff2'), url(/design/sona6769/fonts/NanumBarunGothicBold.woff) format('woff'), url(/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 ---- */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block}

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,button,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time,menu,select,legend { margin: 0; padding: 0}

h1,h2,h3,h4,h5,h6 { font-size: 1em; font-weight: 400}

audio,canvas,video { display: inline-block; *display: inline; *zoom:1 } 

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

[hidden] { display: none}

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%}

html,button,input,select,textarea { font-family: 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; word-spacing: -1px; -webkit-text-size-adjust: none}

body { margin: 0}

html,body { height: auto !important}

a:active,a:hover,a:focus { outline: 0}

b,strong { font-weight: 500; } 

ul,ol { list-style: none}

img { border: 0; -ms-interpolation-mode: bicubic}

svg:not(:root) { overflow: hidden}

figure { margin: 0}

form { margin: 0}

legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px}

button { outline: none; border-radius: 0}

select { background-color: transparent}

button,input,select,textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle}

button,input { line-height: normal}

button,html input[type=button],input[type=reset],input[type=submit] { -webkit-appearance: button; cursor: pointer; *overflow: visible}

button[disabled],input[disabled] { cursor: default}

input[type=checkbox],input[type=radio] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; outline: none}

input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box}

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

button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0}

a,button { -webkit-tap-highlight-color: transparent}

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

textarea { overflow: auto; vertical-align: top; resize: none; font-family: 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif}

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

html,button,input,select,textarea,a { color: #212121}

* { -webkit-tap-highlight-color: rgba(0,0,0,0)}

img { vertical-align: middle}

a { cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none}

a:hover { color: #212121}

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

a.select { cursor: default !important; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important}

select::-ms-expand { display: none}

input { /*-webkit-appearance:none; */
 border-radius: 0; font-family: 'Noto Sans KR',Apple SD Gothic Neo,Malgun Gothic,Dotum,Helvetica,Helvetica Neue,Arial,Verdana,sans-serif}

input[type=number] { -moz-appearance: textfield}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0}

fieldset { border: none}

/* --- Default --- */
.blind { display: none !important; visibility: hidden}

.hide { display: none}

html { overflow-y: scroll}

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

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

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}

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

.sn-container { position: relative; width: 100%}

.sn-container .component { position: relative; width: 1100px; margin: 0 auto}

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

.content { padding-top: 122px}

/* --- Footer --- */
#sn-footer .community { border-top: 1px solid rgba(48,48,48,0.3)}

#sn-footer .community .component { padding-top: 55px; padding-bottom: 55px}

#sn-footer .community .cs-center { float: left; width: 350px; font-weight: 300; } 

#sn-footer .community h3 { text-transform: uppercase; color: #303030; font-size: 24px; font-weight: 300; line-height: 30px; letter-spacing: 2px; } 

#sn-footer .community .cs-center .contact { padding-top: 25px}

#sn-footer .community .contact a { display: inline-block; margin-bottom: 2px; color: #303030; font-family: 'Noto Sans KR'; font-size: 42px; line-height: 50px; font-weight: 300; } 

#sn-footer .community .contact a:last-child { margin-bottom: 0}

#sn-footer .community .open { padding-top: 8px}

#sn-footer .community .open .time { padding-bottom: 4px}

#sn-footer .community .open .time:last-child { padding-bottom: 0}

#sn-footer .community .open p { display: inline-block; vertical-align: top}

#sn-footer .community .open p.moment { width: 70px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 300; line-height: 20px; } 

#sn-footer .community .open p.hour { color: #000; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 20px; } 

#sn-footer .community .open p.hour span { display: inline-block; position: relative; width: 50px; white-space: nowrap}

#sn-footer .community .open p.hour span.start { padding-right: 30px}

#sn-footer .community .open p.hour span.start::after { content: ''; display: block; position: absolute; top: 50%; right: 12px; width: 6px; height: 0; border-bottom: 1px solid #999; line-height: 0}

#sn-footer .community .notice { float: left; width: 270px}

#sn-footer .community .notice-list { padding-top: 30px}

#sn-footer .community .notice-list li { display: block; padding-bottom: 10px}

#sn-footer .community .notice-list li:last-child { padding-bottom: 0}

#sn-footer .community .notice-list a { display: inline-block; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

#sn-footer .community .benefit { float: right; width: 260px; padding-top: 10px}

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

#sn-footer .community .benefit-item { float: left; text-align: center}

#sn-footer .community .benefit-item:nth-child(1),#sn-footer .community .benefit-item:nth-child(2) { padding-bottom: 20px}

#sn-footer .community .benefit-item:nth-child(1),#sn-footer .community .benefit-item:nth-child(3) { width: 120px; margin-right: 40px}

#sn-footer .community .benefit-item:nth-child(2),#sn-footer .community .benefit-item:nth-child(4) { width: 100px}

#sn-footer .community .benefit-item:nth-child(3) { clear: both}

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

#sn-footer .community .benefit-item a span { display: inline-block; vertical-align: top}

#sn-footer .community .benefit-item span.icon { width: 65px; height: 60px}

#sn-footer .community .benefit-item span.title { padding-top: 6px; color: #303030; font-family: 'Noto Sans KR'; /*font-size:14px; */
 font-size: 13px; line-height: 20px}

#sn-footer .community .benefit-item span img { display: block; width: 100%}

#sn-footer .sitemap { border-top: 1px solid rgba(48,48,48,0.3)}

#sn-footer .sitemap .component { padding-top: 30px; padding-bottom: 45px}

#sn-footer .footer { position: relative; background-color: #303030}

#sn-footer .footer .component { padding-top: 57px; padding-bottom: 57px}

#sn-footer .footer .support { position: relative; width: 660px; color: #fff}

#sn-footer .footer .support li { display: inline-block; position: relative; padding-right: 17px; padding-left: 16px}

#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: 14px; line-height: 20px; font-weight: 300; } 

#sn-footer .footer .so-natural-info { position: relative; width: 660px; padding-top: 30px; color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 300; } 

#sn-footer .footer .so-natural-info a { color: rgba(255,255,255,0.6)}

#sn-footer .footer .so-natural-info p span { padding-right: 15px}

#sn-footer .footer .so-natural-info p span:last-child { padding-right: 0}

#sn-footer .footer .news-letter { position: absolute; top: 126px; right: 0}

#sn-footer .footer .news-letter h3 { color: #fff; text-align: right; text-transform: uppercase; font-size: 14px; line-height: 20px; letter-spacing: 2px}

#sn-footer .footer .news-letter form { height: 40px; padding-top: 15px}

#sn-footer .footer .news-letter form input { display: inline-block; width: 180px; height: 40px; padding: 9px 15px; background-color: transparent; border: 1px solid #fff; outline: none; vertical-align: top; color: #fff; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px; box-sizing: border-box}

#sn-footer .footer .news-letter form button { display: inline-block; width: 60px; height: 40px; margin-left: -1px; background-color: #fff; border: 1px solid #fff; color: #111; text-align: center; font-size: 12px; font-weight: 600; line-height: 38px}

#sn-footer .footer .copyrights { padding-top: 40px}

#sn-footer .footer .copyrights, #sn-footer .footer .copyright a { color: rgba(255,255,255,0.6)}

#sn-footer .footer .copyrights .site-lang { display: inline-block}

#sn-footer .footer .copyrights .site-lang li { display: inline-block; position: relative; padding-right: 15px; padding-left: 14px}

#sn-footer .footer .copyrights .site-lang li:first-child { padding-left: 0}

#sn-footer .footer .copyrights .site-lang li:last-child { padding-right: 0}

#sn-footer .footer .copyrights .site-lang 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 .copyrights .site-lang li:last-child::after { display: none; border: none}

#sn-footer .footer .copyrights .site-lang a { display: inline-block; text-transform: uppercase; color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.8px; } 

#sn-footer .footer .copyright { padding-left: 30px; white-space: nowrap; text-transform: uppercase; color: #fff; font-size: 12px; line-height: 20px; letter-spacing: 2px; font-weight: 300; } 

#sn-footer .footer .copyright,#sn-footer .footer .copyright h3 { display: inline-block}

#sn-footer .footer .sns-list { position: absolute; right: 0; bottom: 57px; } 

#sn-footer .footer .sns-list li { display: inline-block; padding-right: 10px; vertical-align: top}

#sn-footer .footer .sns-list li:last-child { padding-right: 0}

#sn-footer .footer .sns-list li a { overflow: hidden; display: block; width: 20px; height: 20px; border-radius: 2px; text-indent: -9999px; background-image: url(/design/sona6769/images/share@2x.png); background-size: 96px 24px}

#sn-footer .footer .sns-list li a.fb { width: 10px; background-position: -2px -2px}

#sn-footer .footer .sns-list li a.in { background-position: -26px -2px}

#sn-footer .footer .sns-list li a.nb { background-position: -50px -2px}

#sn-footer .footer .sns-list li a.pf { background-position: -74px -2px}

#sn-footer .footer .partnership { padding-top: 40px}

#sn-footer .footer .partnership li { display: inline-block; padding-right: 35px; vertical-align: top}

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

#sn-footer .footer .partnership li a { display: block}

#sn-footer .footer .partnership li a span { overflow: hidden; display: block; height: 36px; text-indent: -9999px; } 

#sn-footer .footer .partnership li a.ps-seoul1 span { width: 210px; height: 33px; background-image: url(/design/sona6769/images/partnership_1.jpg)}

#sn-footer .footer .partnership li a.ps-rankey1 span { width: 170px; height: 33px; background-image: url(/design/sona6769/images/partnership_2.jpg)}

#sn-footer .footer .partnership li a.ps-inipay span { width: 34px; height: 33px; background-image: url(/design/sona6769/images/partnership_3.jpg)}

#sn-footer .footer .partnership li a.ps-pointshop span { width: 98px; height: 33px; background-image: url(/design/sona6769/images/new/bi_logo_new.png); background-size: 98px; background-repeat: no-repeat; background-position-y: center; } 

#sn-footer .footer .only-shop { position: absolute; right: 0; margin-top: -20px; color: #fff; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

#sn-footer .footer .globar { position: absolute; top: 57px; right: 0; font-weight: 300; } 

#sn-footer .footer .globar h3 { color: #fff; text-align: right; text-transform: uppercase; font-size: 14px; line-height: 20px; letter-spacing: -1; font-weight: 300; } 

#sn-footer .footer .globar span { text-align: right; color: rgba(255,255,255,0.6); font-size: 12px; } 

#sn-footer .footer .globar a { text-align: right; color: rgba(255,255,255,0.6)}

#sn-wrap>.btn-top { display: none; position: absolute; right: 0; width: 48px; height: 38px; margin-bottom: 15px; margin-right: 30px; background-color: #fff; border: 1px solid #303030; text-transform: uppercase; text-align: center; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 400; letter-spacing: 0.5px; line-height: 18px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out; } 

#sn-wrap>.btn-top.fixB { bottom: -100px}

#sn-wrap>.btn-top.fixT { bottom: 0}

#sn-wrap>.btn-top.fix { display: block; position: fixed; z-index: 2001; right: 0}

#sn-wrap>.btn-top.anim { -webkit-transition: bottom 200ms ease-in-out,background-color 180ms ease-in-out,color 180ms ease-in-out}

#sn-wrap>.btn-top:hover { background-color: #303030; color: #fff}

#sn-wrap>.btn-top span.icon { display: block; width: 0; height: 0; border-style: solid; border-width: 0 4px 7px 4px; border-color: transparent transparent #303030 transparent; margin: 8px auto 3px; -webkit-transition: border-color 180ms ease-in-out}

#sn-wrap>.btn-top:hover span.icon { border-color: transparent transparent #fff transparent}

#sn-wrap>.btn-top span.title { display: block}

/* --- Component --- */
#subcontents { margin: 0 auto !important; float: none !important; padding-top: 260px !important; padding-bottom: 120px}

.sn-container .component.p { padding-top: 60px; padding-bottom: 120px}

.sn-container .component.p #subcontents { padding-top: 0 !important; padding-bottom: 0}

#subcontents .of::after { content: ''; position: relative; clear: both; display: block}

#subcontents .of a { float: left}

/* --- *title --- */
.major-title { color: #303030; text-align: center; text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 30px; line-height: 36px; letter-spacing: 2px}

.major-title,.major-title h2,.major-title h3 { font-weight: 500; } 

.major-title.emphasis { font-size: 46px; line-height: 50px; letter-spacing: 2px}

.major-title.emphasis,.major-title.emphasis h2,.major-title.emphasis h3 { font-weight: 500; } 

/* --- *breadcrumb --- */
.breadcrumb { display: none !important}

.major-title + .breadcrumb { padding-top: 5px}

#terms .breadcrumb { padding-top: 50px}

.breadcrumb li { display: inline-block; position: relative; padding-right: 42px; font-size: 14px; line-height: 20px; text-transform: uppercase}

.breadcrumb li::after { content: ''; position: absolute; top: 5px; right: 18px; width: 6px; height: 10px; background-image: url(/design/sona6769/images/breadcrumb.svg); background-size: 6px 10px; text-align: center; color: #757575}

.breadcrumb li:last-child::after { content: ''; display: none}

.breadcrumb li a { color: #757575; letter-spacing: 1px}

.breadcrumb li b { color: #303030; font-weight: 400; letter-spacing: 1px}

/* --- *tab --- */
.tab-list::after { content: ''; display: block; position: relative; clear: both}

.tab-list .tab-item { position: relative; float: left; width: 33.3%; background-color: #fff}

.tab-list.tab-3 .tab-item { float: left; width: 33.3%}

.tab-list .tab-item a { display: block; position: relative; width: 100%; padding-top: 30px; padding-bottom: 30px; color: #757575; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 20px; font-weight: 300; } 

.detail-tab { position: absolute; top: 0; right: 0; left: 0; background-color: #fff}

.detail-tab .tab-list { position: relative; z-index: 999; background-color: #fff}

.detail-tab .tab-list .tab-item a { font-size: 16px}

.tab-list .tab-item a em { font-style: normal}

.tab-list .tab-item a::before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; border-bottom: 1px solid rgba(48,48,48,0.3); -webkit-transition: border-width 180ms ease-in-out,border-color 180ms ease-in-out}

.tab-list .tab-item a.is-selected { color: #303030}

.tab-list .tab-item a.is-selected::before { border-color: #303030; border-bottom-width: 2px}

.detail-tab.fix { position: fixed; z-index: 9000; top: 0; right: 0; left: 0}

.detail-tab.fix .tab-list { position: relative; background-color: #fff}

.detail-tab.fix .tab-list::after { content: ''; display: block; position: relative; clear: both}

.detail-tab.fix .tab-list::before { content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 1px; box-shadow: 0 0 2px rgba(48,48,48,0.3)}

/* --- *default banner --- */
.banner { overflow: hidden; position: relative; width: 100%; user-select: none; -webkit-user-select: none}

.banner.l:hover { cursor: url(/design/sona6769/images/cursor-prev.png), url(/design/sona6769/images/cursor-prev.cur), w-resize}

.banner.r:hover { cursor: url(/design/sona6769/images/cursor-next.png), url(/design/sona6769/images/cursor-next.cur), w-resize}

body:not(.ie) .banner.l:hover { cursor: url(/design/sona6769/images/cursor-prev.png) 0 32, url(/design/sona6769/images/cursor-prev.cur) 0 32, w-resize}

body:not(.ie) .banner.r:hover { cursor: url(/design/sona6769/images/cursor-next.png) 64 32, url(/design/sona6769/images/cursor-next.cur) 64 32, w-resize}

.banner .paddle-nav { display: none}

.banner .paddle-nav { position: absolute; z-index: 100; top: 0; width: 100%}

.banner .paddle-nav .component { position: relative}

.banner .paddle-nav li a { overflow: hidden; position: absolute; display: block; top: 160px; width: 50px; height: 100px; text-indent: -9999px}

.banner .paddle-nav li a.prev { left: -100px; background-image: url(/design/sona6769/images/paddle-prev.png); background-size: 50px 100px}

.banner .paddle-nav li a.next { right: -100px; background-image: url(/design/sona6769/images/paddle-next.png); background-size: 50px 100px}

.banner .dot-nav { position: absolute; z-index: 100; bottom: 25px; width: 100%; height: 8px; text-align: center}

.banner .dot-nav ul { display: block; line-height: 8px}

.banner .dot-nav li { display: inline-block; padding-right: 5px}

.banner .dot-nav li:last-child { padding-right: 0 !important}

.banner .dot-nav li b { display: block; width: 8px; height: 8px; background-color: #fff; border-radius: 4px; opacity: 0.5; line-height: 8px; cursor: pointer; -webkit-transition: width 280ms ease-in-out; cursor: pointer !important}

.banner .dot-nav li b.is-selected { width: 24px; opacity: 1.0; cursor: default !important}

.banner .banner-wrap { overflow: hidden; position: relative; width: 100%; height: 100%}

.banner .banner-container { position: absolute; width: 100%; height: 100%}

.banner .banner-container::after { content: ''; display: block; position: relative; clear: both}

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

.banner .banner-item .image-area { position: relative; height: 100%; text-align: center}

.banner .banner-item .text-area { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; color: #fff}

.banner .banner-item .dim { position: absolute; top: 0; right: 0; left: 0; width: 100%; height: 100%; opacity: 0}

.banner .banner-item.b .text-area { color: #303030}

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

.banner .banner-item .sub-title { font-family: 'Noto Sans KR'; font-size: 20px; letter-spacing: -0.8px; line-height: 40px; font-weight: 300; } 

.banner .banner-item .sub-title-bold { font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; line-height: 30px}

.banner .banner-item .title { padding-top: 5px; font-family: 'Noto Sans KR'; font-size: 46px; font-weight: 400; letter-spacing: -2px; line-height: 54px; } 

.banner .banner-item .title a { cursor: pointer !important}

.banner .banner-item .desc { padding-top: 30px; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 400; line-height: 24px; opacity: 0.8}

.banner .banner-item .link { padding-top: 75px}

.banner .banner-item .link a.btn-more,.banner .banner-item .link b.btn-more { cursor: pointer !important; color: #fff}

.banner .banner-item .link a.btn-more span.arrow:after,.banner .banner-item .link b.btn-more span.arrow:after { background-image: url(/design/sona6769/images/arrow_w.svg); background-size: 24px}

.banner .banner-item .link a.btn-more span.arrow.svg:after,.banner .banner-item .link b.btn-more span.arrow.svg:after { display: none}

.banner .banner-item .link a.btn-more span.arrow.svg,.banner .banner-item .link b.btn-more span.arrow.svg { display: block; fill: #fff}

/* --- *half banner --- */
.half-banner { overflow: hidden}

.half-banner::after { content: ''; display: block; position: relative; clear: both}

.half-banner .column { float: left; width: 50%; height: 100%}

.half-banner .column .component { width: 550px}

.half-banner .column img { width: 800px; margin-left: -60px}

.half-banner .column::after { content: ''; display: block; position: relative; clear: both}

.half-banner .column:first-child .component { float: right}

.half-banner .column:last-child .component { float: left}

.half-banner .column:last-child .component { width: 490px; padding-left: 60px}

.half-banner .column:first-child img { margin-left: -250px}

.half-banner .column .image-area { position: absolute; top: 0}

.half-banner .column .text-area { position: relative}

/* --- *button --- */
a.btn-more,b.btn-more { display: inline-block; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 300; line-height: 24px; color: #000; } 

a.btn-more span,b.btn-more span { display: inline-block; vertical-align: top}

a.btn-more span.arrow,b.btn-more span.arrow { display: inline-block !important; position: relative; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%}

a.btn-more span.arrow:after,b.btn-more span.arrow:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/design/sona6769/images/arrow_g.svg); background-size: 24px}

/* --- *badges --- */
.badges { position: absolute}

.badges .badge { width: 50px; height: 50px; margin-top: 10px; border-radius: 50%; background-color: #303030}

.badges .badge:first-child { margin-top: 0}

.badges .badge span { display: inline-block; width: 100%; color: #fff; text-transform: uppercase; text-align: center; font-size: 14px; font-weight: 300; line-height: 50px; } 

.badges .badge:nth-child(even) { width: 48px; height: 48px; background-color: rgba(255,255,255,0.3); border: 1px solid #303030}

.badges .badge:nth-child(even) span { color: #303030}

/* --- *writer --- */
.writer span.by { display: inline-block; vertical-align: top; color: rgba(17,17,17,0.6); font-size: 14px; font-weight: 600; line-height: 20px}

/* .writer span.by::before { content:'by'; display:inline-block; position:relative; padding-right:4px } */
span.grade { background-color: #303030}

.grade a { color: #fff !important}

.writer span.grade { display: inline-block; width: 70px; height: 16px; margin: 2px 0 2px 20px; border-radius: 2px; vertical-align: top; text-align: center; color: #fff; font-size: 12px; line-height: 16px}

/* .writer span.grade.vip { background-color:#583bde } */
/* .writer span.grade.super { background-color:#ff7272 } */
/* --- *price --- */
.price { color: #303030}

.price .amount { display: inline-block; vertical-align: top; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 400; line-height: 36px; } 

.price .amount del { display: inline-block; position: relative; vertical-align: top; color: #000; text-decoration: none; font-weight: 300; } 

.price .amount del::after { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 100%; height: 0; border-top: 1px solid #000; } 

.price .amount ins { display: inline-block; position: relative; padding-left: 6px; vertical-align: top; text-decoration: none}

.price .unit { display: inline-block; padding-top: 12px; padding-left: 10px; vertical-align: top; text-transform: uppercase; font-size: 12px; font-weight: 300; line-height: 20px; letter-spacing: 1px; } 

/* --- *form --- */
.form-field-item .field-title h2 { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.form-field-item .form-field-item-row { padding-top: 40px; padding-right: 140px; padding-left: 140px}

.form-row { width: 100%; padding-bottom: 20px; vertical-align: top}

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

.form-row .form-content,.form-row .form-title,.form-row .form-value,.form-row .form-input,.form-row .form-select,.form-row .form-textarea,.form-row .form-radio,.form-row .form-button { position: relative; float: left}

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

.form-row .form-title { width: 140px}

.form-row .form-title label { display: inline-block; margin-top: 15px; margin-bottom: 15px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; line-height: 20px; } 

.form-row .form-content,.form-row .form-input { width: 680px}

.form-row .form-content.l { width: 960px}

.form-row .form-input input { display: inline-block; position: relative; width: 640px; height: 20px; margin: 0; padding: 15px 20px 14px; border: none; border-bottom: 1px solid rgba(48,48,48,0.3); outline: none; vertical-align: top; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; -webkit-transition: border-color 120ms ease-in-out}

.form-row .form-input input:not(:read-only):focus { border-color: #303030}

.form-content.s .form-input { width: 466px}

.form-content.s .form-value { width: 210px; padding-right: 24px}

.form-content.s .form-input input { width: 426px}

.form-row .form-select select { position: relative; z-index: 100; width: 210px; height: 50px; padding: 12px 60px 12px 20px; background-color: transparent; border: none; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; letter-spacing: -0.5px; border-bottom: 1px solid rgba(48,48,48,0.3); border-radius: 0; outline: none; box-shadow: none; border-image: none; appearance: none; -webkit-appearance: none; -moz-appearance: none}

.form-row .form-select::after { content: ''; display: block; position: absolute; top: 50%; right: 15px; width: 20px; height: 20px; margin-top: -10px; background-image: url(/design/sona6769/images/select-arrow.svg); background-size: 20px}

.form-row .form-select.form-input.email input { position: relative; background-color: #fff; z-index: 10}

.form-row .form-textarea textarea { display: inline-block; position: relative; width: 638px; height: 270px; margin: 0; padding: 14px 20px; border: 1px solid rgba(48,48,48,0.3); outline: none; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; -webkit-transition: border-color 120ms ease-in-out}

.form-row .form-textarea textarea:focus { border-color: #303030}

.form-row .form-radio .radio-item { display: inline-block; padding-top: 15px; padding-bottom: 15px}

.form-row .form-radio .radio-item input { display: inline-block; position: relative; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #757575; border-radius: 50%; vertical-align: top}

.form-row .form-radio .radio-item input::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: #303030; border-radius: 50%; opacity: 0; -webkit-transition: opacity 120ms ease-in-out}

.form-row .form-radio .radio-item input:checked { border-color: #303030}

.form-row .form-radio .radio-item input:checked::before { opacity: 1.0}

.form-row .form-radio .radio-item label { display: inline-block; padding-left: 20px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; -webkit-transition: color 120ms ease-in-out}

.form-row .form-radio .radio-item input:checked + label { color: #303030}

.form-row .form-button { width: 190px; height: 50px}

.form-row .form-button a { display: block; width: 188px; height: 48px; background-color: #303030; border: 1px solid #303030; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 48px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.form-row .form-button a:hover { background-color: #fff; color: #303030}

.form-row .form-button button { display: block; width: 190px; height: 50px; background-color: #303030; border: 1px solid #303030; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 50px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.form-row .form-button button:hover { background-color: #fff; color: #303030}

.form-check { display: inline-block; user-select: none; -webkit-user-select: none}

.form-row .form-check { padding-top: 15px; padding-bottom: 15px; vertical-align: top}

.form-row .form-notice-check { padding-top: 15px; padding-bottom: 15px}

.form-row .form-notice-check .form-check { padding-top: 0; padding-bottom: 0}

.form-check input { display: inline-block; position: relative; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #757575; vertical-align: top}

.form-check.b input { border-color: #303030}

.form-check.b label { color: #303030}

.form-check input::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/design/sona6769/images/checkbox.svg); background-size: 14px; opacity: 0; -webkit-transition: opacity 120ms ease-in-out}

.form-check input:checked { border-color: #303030}

.form-check input:checked::before { opacity: 1.0}

.form-check label { display: inline-block; padding-left: 10px; vertical-align: top; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; -webkit-transition: color 120ms ease-in-out}

.form-check label span { display: inline-block; vertical-align: top}

.form-check input:checked + label { color: #303030}

.form-row .form-value { padding-top: 15px; padding-bottom: 15px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

.login-util .desc { margin-bottom: 10px; /*padding-top:40px*/
 padding-top: 25px}

.login-util + .board-write { padding-top: 40px}

.form-row.no-bottom { padding-bottom: 0}

.form-content.email .form-input { width: 210px}

.form-content.email span.at { float: left; width: 24px; padding-top: 15px; padding-bottom: 15px; text-align: center; font-size: 14px; line-height: 20px}

.form-content.email .form-input input { width: 170px}

.form-content.email .form-input.domain-direct { display: none}

.form-content.email.direct .form-select { display: none}

.form-content.email.direct .form-input.domain-direct { display: block}

.form-content.phone .form-input { width: 210px; padding-left: 24px}

.form-content.phone .form-input::before { content: ''; display: block; position: absolute; z-index: 1; top: 50%; left: 9px; width: 6px; height: 0; border-top: 1px solid #757575}

.form-content.phone .form-input input { width: 170px}

.form-content.phone.l .form-button { width: 190px; padding-left: 24px}

.form-content.phone.auth .form-select select { width: 140px}

.form-content.phone.auth .form-input { width: 119px; padding-left: 55px}

.form-content.phone.auth .form-input::before { left: 21px; width: 14px; color: rgba(48,48,48,0.3)}

.form-content.phone.auth .form-input input { width: 80px}

.form-content.phone.auth .form-button { width: 140px; padding-left: 24px}

.form-content.phone.auth .form-button button { width: 140px}

.form-content.address .form-input.zipcode { width: 466px; margin-right: 24px; border-bottom: 1px solid rgba(48,48,48,0.3)}

.form-content.address .form-input.zipcode input { width: 181px !important; border-bottom: none}

.form-content.address .form-input.zipcode input:last-child { margin-left: 24px}

.form-content.address .form-input.zipcode::before { content: ''; display: block; position: absolute; z-index: 1; top: 50%; left: 230px; width: 6px; height: 0; border-top: 1px solid #757575}

.form-content.address .form-input.zipcode.road::before { display: none}

/* .form-content.address .form-input.zipcode.road input { width:426px !important } */
.form-content.email.long .form-input input { width: 426px}

.form-content.address .form-input.zipcode.road input:last-child { display: none}

/* --- *board --- */
.board-paddle-nav { position: relative; text-align: center}

.board-paddle-nav .nav-util { padding: 0 10px; display: inline-block; vertical-align: top}

.board-paddle-nav .nav-util.first-nav,.board-paddle-nav .nav-util.last-nav { padding: 0 !important}

/* .board-paddle-nav .nav-util.prev-nav a,.board-paddle-nav .nav-util.next-nav a { display:block; text-transform:uppercase; color:#303030; font-size:18px; line-height:30px; letter-spacing:2px } */
.board-paddle-nav .nav-util.first-nav a,.board-paddle-nav .nav-util.prev-nav a,.board-paddle-nav .nav-util.next-nav a,.board-paddle-nav .nav-util.last-nav a { overflow: hidden; display: block; width: 28px; height: 28px; border: 1px solid #303030; cursor: pointer; text-indent: -9999px; -webkit-transition: background-color 180ms ease-in-out}

/* .board-paddle-nav .nav-util.prev-nav a:hover,.board-paddle-nav .nav-util.next-nav a:hover { background-color:rgba(48,48,48,0.05) } */
.board-paddle-nav .nav-util.first-nav a span,.board-paddle-nav .nav-util.prev-nav a span,.board-paddle-nav .nav-util.next-nav a span,.board-paddle-nav .nav-util.last-nav a span { display: block; width: 100%; height: 100%; background-size: 28px 28px}

.board-paddle-nav .nav-util.first-nav a span { background-image: url(/design/sona6769/images/first.png); background-size: 13px 14px; background-repeat: no-repeat; background-position: 9px center; } 

.board-paddle-nav .nav-util.prev-nav a span { background-image: url(/design/sona6769/images/prev.svg)}

.board-paddle-nav .nav-util.next-nav a span { background-image: url(/design/sona6769/images/next.svg)}

.board-paddle-nav .nav-util.last-nav a span { background-image: url(/design/sona6769/images/last.png); background-size: 13px 14px; background-repeat: no-repeat; background-position: 9px center; } 

.board-paddle-nav .nav-util.prev-nav { _padding-right: 20px}

.board-paddle-nav .nav-util.next-nav { _padding-left: 20px}

.board-paddle-nav .nav-util.list-nav li { display: inline-block; padding-right: 5px; padding-left: 5px}

.board-paddle-nav .nav-util.list-nav li:first-child { padding-left: 0}

.board-paddle-nav .nav-util.list-nav li:last-child { padding-right: 0}

.board-paddle-nav .nav-util.list-nav li a,.board-paddle-nav .nav-util.list-nav li b { display: block; position: relative; min-width: 16px; height: 30px; color: #303030; text-align: center; font-family: 'Noto Sans KR'; font-size: 22px; line-height: 30px; cursor: pointer; font-weight: 300; } 

.board-paddle-nav .nav-util.list-nav li a.is-selected,.board-paddle-nav .nav-util.list-nav li b.is-selected { cursor: default}

.board-paddle-nav .nav-util.list-nav li a.is-selected::after,.board-paddle-nav .nav-util.list-nav li b.is-selected::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; border-bottom: 1px solid #303030}

.board-util { position: relative; padding-top: 60px; text-align: center}

.board-util.none { padding-top: 0}

.board-util a.btn-continue { display: inline-block; width: 258px; height: 58px; background-color: #303030; border: 1px solid #303030; color: #fff; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.board-util a.btn-continue:hover { background-color: #fff; color: #303030}

.board-util a.btn-write { display: inline-block; width: 198px; height: 28px; padding: 15px 30px; border: 1px solid #111; vertical-align: top; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 28px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.board-util a.btn-write:hover { background-color: #303030; color: #fff}

.board-util a.btn-write.is-selected { opacity: 0.4; background-color: #fff; color: #303030; cursor: default}

.board-util a.btn-write.disabled { opacity: 0.2 !important; background-color: #fff !important; color: #303030 !important; cursor: default}

.board-util a.btn-entire { display: inline-block; position: absolute; right: 0; margin-top: 18px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 24px}

.board-util a.btn-entire span { display: inline-block; vertical-align: top}

.board-util a.btn-entire span.arrow { display: inline-block; position: relative; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%}

.board-util a.btn-entire span.arrow:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/design/sona6769/images/arrow_g.svg); background-size: 24px}

.login-util .link { position: relative}

.login-util .desc.loc { margin-left: 420px}

.login-util a.loc { margin-left: 420px}

.login-util a.btn-entire { display: inline-block; position: absolute; right: 0}

.login-util a.btn-entire { display: inline-block; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 24px}

.login-util a.btn-entire span { display: inline-block; vertical-align: top}

.login-util a.btn-entire span.arrow { display: inline-block; position: relative; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%}

.login-util a.btn-entire span.arrow:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/design/sona6769/images/arrow_g.svg); background-size: 24px}

.board-write { display: none; position: relative; padding-top: 60px}

.board-write.active { display: block}

.board-write .form-row .form-title { width: 140px}

.board-write .form-row .form-input { width: 960px}

.board-write .form-row .form-input input { width: 920px}

.board-write .form-row .form-textarea textarea { width: 918px; height: 170px}

.board-write .form-util { position: relative; width: 960px; padding-top: 18px; padding-left: 140px}

.board-write .form-util::after { content: ''; display: block; position: relative; clear: both}

.board-write .form-row .form-input .upload-item-field input[type="file"] { display: none}

.board-write .form-row .form-input .upload-item-field .upload-item { position: relative; padding-bottom: 20px}

.board-write .form-row .form-input .upload-item-field .upload-item:last-child { padding-bottom: 0}

.board-write .form-row .form-input .upload-item-field .btn-upload { display: inline-block; width: 120px; height: 50px; background-color: #303030; border: 1px solid #303030; color: #fff; text-align: center; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 50px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.board-write .form-row .form-input .upload-item-field .btn-upload:hover { background-color: #fff; color: #303030}

.board-write .form-row .form-input .upload-item-field .upload-item input { width: 769px; padding-right: 50px; border-left: none}

.board-write .form-row .form-input .upload-item-field .btn-remove { position: absolute; top: 0; right: 0; width: 50px; height: 50px}

.board-write .form-row .form-input .upload-item-field .btn-remove span { overflow: hidden; display: block; margin: 17px; width: 16px; height: 16px; background-image: url(/design/sona6769/images/remove.svg); background-size: 16px; text-indent: -9999px; text-align: left}

.board-write .form-row .form-input .upload-notice { position: relative; margin-top: 20px; padding-left: 12px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.board-write .form-row .form-input .upload-notice::before { content: '*'; display: block; position: absolute; left: 0}

.board-write .form-util .write-area { float: right}

.board-write .form-util .write-area button { display: inline-block; width: 120px; height: 60px; border: 1px solid #303030; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 60px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.board-write .form-util .write-area button.btn-cancel { margin-right: 20px; color: #303030}

.board-write .form-util .write-area button.btn-cancel:hover { background-color: #303030; color: #fff}

.board-write .form-util .write-area button.btn-apply { background-color: #303030; color: #fff}

.board-write .form-util .write-area button.btn-apply:hover { background-color: #fff; color: #303030}

.board-write .form-util .write-area button.btn-modify { display: none; background-color: #303030; color: #fff}

.board-write .form-util .write-area button.btn-modify:hover { background-color: #fff; color: #303030}

.board-write.modify .form-util .write-area button.btn-apply { display: none}

.board-write.modify .form-util .write-area button.btn-modify { display: inline-block}

.board-write .form-util .write-area a { display: inline-block; width: 118px; height: 58px; border: 1px solid #303030; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 58px; font-weight: 500; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out; } 

.board-write .form-util .write-area a.btn-cancel { margin-right: 20px; color: #303030}

.board-write .form-util .write-area a.btn-cancel:hover { background-color: #303030; color: #fff}

.board-write .form-util .write-area a.btn-apply { background-color: #303030; color: #fff}

.board-write .form-util .write-area a.btn-apply:hover { background-color: #fff; color: #303030}

.board-write .form-util .login-area { float: right; text-align: right}

.board-write .form-util .login-area button { display: inline-block; width: 140px; height: 60px; background-color: #303030; border: 1px solid #303030; color: #fff; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 60px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.board-write .form-util .login-area button:hover { background-color: #fff; color: #303030}

.board-write .form-util .login-area a { display: inline-block; width: 138px; height: 58px; background-color: #303030; border: 1px solid #303030; color: #fff; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 58px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.board-write .form-util .login-area a:hover { background-color: #fff; color: #303030}

.board-write .form-util .login-area .login-notice { position: relative; margin-top: 18px; padding-left: 12px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.board-write .form-util .login-area .login-notice::before { content: '*'; display: block; position: absolute; left: 0}

/* --- *order --- */
.order-table caption { padding-bottom: 50px; text-align: left}

.order-table caption h2 { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.order-table thead th { padding: 0; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid rgba(48,48,48,0.3); color: #303030; font-size: 14px; font-weight: 400; line-height: 20px}

.order-table thead th:first-child { text-align: left}

.order-table thead th:last-child { text-align: right}

.order-table thead .info { display: inline-block; width: 120px; text-align: center}

.order-table thead .price { padding-right: 22px}

.order-table tbody td { padding: 0; padding-top: 25px; padding-bottom: 25px; border-top: 1px solid rgba(48,48,48,0.3); vertical-align: middle; color: #303030; text-align: center}

.order-table tbody td:first-child { text-align: left}

.order-table tbody td:last-child { text-align: right}

.order-table tbody tr:last-child td { padding-bottom: 50px}

.order-table tbody .thumbnail { display: inline-block; width: 120px; vertical-align: top}

.order-table tbody .thumbnail img { width: 120px; height: 120px; vertical-align: top}

.order-table tbody .info { display: inline-block; position: relative; height: 115px; padding-top: 5px; padding-left: 20px}

.order-table tbody .info p.title { font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.order-table tbody .info .option { family: 'Noto Sans KR'; color: rgba(48,48,48,0.6); font-size: 14px; line-height: 20px}

.order-table tbody .info .option span { display: inline-block}

.order-table tbody .info .option span.title { position: relative; padding-right: 15px}

.order-table tbody .info .option span.title::after { content: ''; display: block; position: absolute; top: 4px; right: 7px; width: 0; height: 12px; border-right: 1px solid rgba(48,48,48,0.6)}

.order-table tbody .info .product-price { position: absolute; bottom: 10px}

.order-table tbody .info .product-price .amount { display: inline-block; vertical-align: top; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px}

.order-table tbody .info .product-price .unit { display: inline-block; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; vertical-align: top; font-size: 12px; line-height: 20px; letter-spacing: 1px}

.order-table tbody .quantity { font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px}

.order-table tbody .reserve-price { font-size: 14px; line-height: 20px}

.order-table tbody .reserve-price .amount { display: inline-block; font-family: 'Noto Sans KR'}

.order-table tbody .reserve-price .unit { display: inline-block; padding-left: 2px; font-family: 'Noto Sans KR'}

.order-result .result-title { padding-bottom: 20px; padding-left: 40px; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px}

.order-result .result-row { padding-bottom: 12px; padding-left: 40px}

.order-result .result-row.last { padding-bottom: 30px}

.order-result .result-row .title,.order-result .result-row .price { display: inline-block; width: 50%; vertical-align: top}

.order-result .result-row .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.order-result .result-row .price { white-space: nowrap}

.order-result .result-row .price .amount { font-size: 14px; font-weight: 400; line-height: 20px}

.order-result .result-row .price .unit { padding-top: 0; padding-left: 2px; font-size: 14px; font-weight: 400; line-height: 20px}

.order-result .result-total { padding-top: 30px; padding-left: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.order-result .result-total .title,.order-result .result-total .price { display: inline-block; width: 50%; vertical-align: bottom}

.order-result .result-total .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; line-height: 22px}

.order-result .result-total .price { white-space: nowrap; text-align: right}

.order-result .result-total .price .amount { font-size: 36px; line-height: 42px}

.order-result .result-total .price .unit { padding-top: 14px; font-size: 14px; font-weight: 600; line-height: 20px}

/* --- *gift --- */
.gift { float: left; padding: 30px 45px; border: 1px solid rgba(48,48,48,0.3)}

.gift .icon { display: inline-block; width: 95px; vertical-align: top}

.gift .icon img { width: 100%}

.gift .info { display: inline-block; position: relative; width: 443px; height: 100%; padding-left: 50px; vertical-align: top}

.gift .info .sub-title { color: #000; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; line-height: 20px; } 

.gift .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.gift .info .link { position: absolute; bottom: 0}

.gift .info .note { position: absolute; right: 0; bottom: 0; color: #00c73c; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

/* --- Main --- */
#main .major-title { font-family: 'Noto Sans KR'}

#main-issue.banner { height: 420px}

#main-issue.banner .banner-item .image-area img { position: relative; width: 1600px; margin-left: -250px}

#main-issue.banner::after { content: ''; position: absolute; bottom: 0; width: 100%; height: 1px; box-shadow: 0 0 2px rgba(48,48,48,0.3)}

.hot-rank { overflow: hidden; position: absolute; width: 100%; height: 20px; right: 0; left: 0; padding-top: 15px; padding-bottom: 14px; border-bottom: 1px solid rgba(48,48,48,0.3); -webkit-transition: height 250ms ease-in-out; background-color: #fff}

.hot-rank.extend { z-index: 100; height: 60px}

.hot-rank::after { content: ''; display: block; position: relative; clear: both}

.hot-rank .rank-title { float: left; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.hot-rank .rank-list { overflow: hidden; position: absolute; top: 0; left: 120px; width: 200px; height: 20px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.hot-rank .rank-extend-list { overflow: hidden; display: none; position: absolute; top: 0; left: 120px; width: 980px; height: 60px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.hot-rank .rank-extend-list::after { content: ''; display: block; position: relative; clear: both}

.hot-rank .rank-extend-list li { float: left; width: 20%; padding-bottom: 17px}

.hot-rank .rank-extend-list li:nth-child(5n+1):nth-last-child(-n+5),.hot-rank .rank-extend-list li:nth-child(5n+1):nth-last-child(-n+5) ~ li { padding-bottom: 0}

.hot-rank .rank-extend-list a { display: inline-block; vertical-align: top; white-space: nowrap}

.hot-rank .rank-extend-list a span { display: inline-block; vertical-align: top}

.hot-rank .rank-extend-list a span.number { width: 20px; padding-right: 10px; text-align: right}

.hot-rank .rank-list ul { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%}

.hot-rank .rank-list a { display: inline-block; vertical-align: top; white-space: nowrap}

.hot-rank .rank-list a span { display: inline-block; vertical-align: top}

.hot-rank .rank-list a span.number { width: 20px; padding-right: 10px; text-align: right}

.best-product { padding-top: 50px}

.best-product .major-title { padding-top: 115px}

.best-product .product-list { padding-top: 30px; padding-bottom: 60px}

.best-product .product-list .product-list-row { position: relative; width: 100%; padding-bottom: 80px}

.best-product .product-list .product-list-row:last-child { padding-bottom: 0}

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

.best-product .product-list .product-item { position: relative; float: left; width: 260px; margin-right: 20px}

.best-product .product-list .product-item:last-child { margin-right: 0}

.best-product .product-item .figure { display: block; width: 260px; height: 260px}

.best-product .product-item .figure img { width: 100%}

.best-product .product-item .sort { padding-top: 10px; color: #000; font-family: 'Noto Sans KR'; font-size: 18px; line-height: 20px; font-weight: 600; } 

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

.best-product .product-item .title { display: inline-block; padding-top: 5px; color: #303030; font-family: 'Noto Sans KR'; font-size: 23px; font-weight: 300; line-height: 30px}

.best-product .product-item .weight { position: relative; padding-top: 8px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.best-product .product-item .weight.none::after { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 10px; height: 0; border-top: 1px solid #303030}

.best-product .product-item .price { padding-top: 7px}

.best-banner { height: 340px}

.best-banner .component { height: 100%}

.best-banner .text-area { height: 100%}

.best-banner .sort { padding-top: 35px; color: #757575; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 20px; font-weight: 300; } 

.best-banner .sort_second { padding-top: 35px; color: #000000; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 20px}

.best-banner .title { padding-top: 10px; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; line-height: 36px; letter-spacing: -0.5px; } 

.best-banner .link { padding-top: 35px}

.best-banner .line { display: block; position: absolute; bottom: 40px; width: 70px; height: 0; border-top: 1px solid rgba(48,48,48,0.3); line-height: 0}

.best-banner .column.w .sort { color: #fff}

.best-banner .column.w .title,.best-banner .column.w .title a { color: #fff}

.best-banner .column.w .link a.btn-more,.best-banner .column.w .link b.btn-more { color: #fff}

.best-banner .column.w .link a.btn-more span.arrow:after,.best-banner .column.w .link b.btn-more span.arrow:after { background-image: url(/design/sona6769/images/arrow_w.svg)}

.best-banner .column.w .line { border-top: 1px solid rgba(255,255,255,0.3)}

.fix-banner { height: 340px}

.fix-banner .component { height: 100%}

.fix-banner .text-area { height: 100%}

.fix-banner .sort { padding-top: 35px; color: #757575; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 20px}

.fix-banner .title { padding-top: 10px; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; line-height: 36px; letter-spacing: -0.5px}

.fix-banner .title.en { font-family: 'Noto Sans KR'}

.fix-banner .title-en { padding-top: 10px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.fix-banner .link { padding-top: 35px}

.fix-banner .line { display: block; position: absolute; bottom: 40px; width: 70px; height: 0; border-top: 1px solid rgba(48,48,48,0.3); line-height: 0}

.fix-banner .column.w .sort { color: #fff}

.fix-banner .column.w .title,.fix-banner .column.w .title a { color: #fff}

.fix-banner .column.w .title-en { color: #fff}

.fix-banner .column.w .link a.btn-more,.fix-banner .column.w .link b.btn-more { color: #fff}

.fix-banner .column.w .link a.btn-more span.arrow:after,.fix-banner .column.w .link b.btn-more span.arrow:after { background-image: url(/design/sona6769/images/arrow_w.svg)}

.fix-banner .column.w .line { border-top: 1px solid rgba(255,255,255,0.3)}

.fix-banner .limit { overflow: hidden; position: absolute; width: 140px; height: 140px; bottom: 60px; border-radius: 50%; text-align: center; color: #fff}

.fix-banner .limit .name { padding-top: 33px; font-size: 18px; font-weight: 600; line-height: 24px}

.fix-banner .limit .person { font-size: 24px; font-weight: 600; line-height: 30px}

.fix-banner .limit .person span { display: inline-block; vertical-align: top}

.fix-banner .limit .person .amount { font-family: 'Noto Sans KR'; font-size: 48px; font-weight: 500; line-height: 54px}

.fix-banner .limit .person .unit { padding-top: 20px; padding-left: 4px}

.category-best .major-title { padding-top: 60px}

.category-best .product-list { position: relative; padding-top: 50px; padding-bottom: 100px}

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

.category-best-menu { width: 780px; margin: 0 auto; padding-top: 60px}

.category-best-menu ul { display: flex; justify-content: space-between}

.category-best-menu li { display: inline-block}

.category-best-menu li a { display: block; color: #757575; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px}

.category-best-menu li a.is-selected { position: relative; color: #303030; font-weight: 600}

.category-best-menu li a.is-selected::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; width: 100%; height: 0; border-bottom: 1px solid #303030}

.category-best .product-list .product-item { overflow: hidden; position: relative; float: left; width: 210px; height: 320px; margin-right: 12px; padding-bottom: 50px; text-align: center}

.category-best .product-list .product-item:nth-child(5n+1) { margin-left: 1px}

.category-best .product-list .product-item:nth-child(5n+5) { margin-right: 1px}

.category-best .product-list .product-item:nth-child(5n+1):nth-last-child(-n+5),.category-best .product-list .product-item:nth-child(5n+1):nth-last-child(-n+5) ~ .product-item { padding-bottom: 0}

.category-best .product-item .product-item-container { position: absolute; width: 210px; height: 320px}

.category-best .product-item a.figure { display: block; width: 210px; height: 210px}

.category-best .product-item a.figure img { width: 100%}

.category-best .product-item a.title { display: inline-block; margin-top: 20px; color: #000; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing : -1px; } 

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

.category-best .product-item .badges { left: 10px}

.category-best .price .amount { font-size: 20px; line-height: 26px}

.category-best .price .amount ins { padding-left: 3px}

.category-best .price .unit { padding-top: 5px; padding-left: 6px}

/* .category-best .product-list .product-list-item { position:relative; float:left; width:20%; text-align:center } 
.category-best .product-list-item .category-title { color:#303030; text-transform:uppercase; font-size:16px; line-height:22px; letter-spacing:2px } 
.category-best .product-list-item .product-list-cols { position:relative; margin-top:60px } 
.category-best .product-list-item .product-list-cols::before { content:''; display:block; position:absolute; top:0; right:0; width:0; height:100%; border-right:1px solid rgba(48,48,48,0.3) } 
.category-best .product-list-item:last-child .product-list-cols::before { border:none } 
.category-best .product-list-cols .product-item { position:relative; padding-right:5px; padding-bottom:45px; padding-left:5px } 
.category-best .product-list-cols .product-item:last-child { padding-bottom:10px } */
.new-banner .column.w { color: #fff}

.new-banner .column.w .price { color: #fff}

.new-banner .column.w a,.new-banner .column.w b { color: #fff}

.new-banner .column.b { color: #303030}

.new-banner .column.b .price { color: #303030}

.new-banner .column.b a,.new-banner .column.b b { color: #303030}

.new-banner { height: 480px}

.new-banner .column.w a.btn-more span.arrow::after,.new-banner .column.w b.btn-more span.arrow::after { background-image: url(/design/sona6769/images/arrow_w.svg)}

.new-banner .column .badge { margin-top: 80px; width: 46px; height: 24px; border-radius: 4px; mix-blend-mode: screen}

.new-banner .column.w .badge { background-color: #fff}

.new-banner .column.b .badge { background-color: #303030}

.new-banner .column.b .badge { mix-blend-mode: normal}

.new-banner .column .badge span { display: block; color: #000; text-transform: uppercase; text-align: center; font-size: 12px; font-weight: 300; line-height: 24px; } 

.new-banner .column.b .badge span { color: #fff}

.new-banner .column .sort { padding-top: 18px; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 20px; font-weight: 300; } 

.new-banner .column .title { padding-top: 5px; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; line-height: 36px; letter-spacing: -0.5px; } 

.new-banner .column .desc { padding-top: 20px; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 16px}

.new-banner .column .feature { padding-top: 16px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 300; line-height: 16px; } 

.new-banner .column .price { padding-top: 30px}

.new-banner .column .link { padding-top: 50px}

.new-banner .price .amount { font-size: 20px; line-height: 26px}

.new-banner .price .amount ins { padding-left: 3px}

.new-banner .price .unit { padding-top: 5px; padding-left: 6px}

.best-review .major-title { padding-top: 60px}

.best-review .review-list { padding-top: 80px; padding-bottom: 100px}

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

.best-review .review-list .review-item { float: left; width: 245px; padding-right: 40px}

.best-review .review-list .review-item:last-child { padding-right: 0}

.best-review .review-item .figure { overflow: hidden; display: block; width: 240px; height: 240px; border-radius: 50%}

.best-review .review-item .figure img { width: 100%}

.best-review .review-item .title { display: inline-block; padding-top: 40px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; } 

.best-review .review-item .desc { overflow: hidden; height: 72px; padding-top: 20px; margin-bottom: 20px; color: #000; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 1.5; font-weight: 300; } 

.best-review .review-item .desc a { overflow: hidden; display: block; color: #757575; height: 100%; text-overflow: ellipsis}

.best-review .review-item .total { position: relative; padding-top: 22px}

.best-review .review-item .total::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 50px; height: 0; border-top: 1px solid #999}

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

.best-review .review-item .total .name { display: inline-block; padding-top: 7px; padding-left: 8px; vertical-align: top; color: #000; text-transform: uppercase; font-size: 16px; font-weight: 300; line-height: 20px; } 

.aside .major-title { padding-bottom: 30px; color: #111; text-align: left; font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: 1px}

.aside .monthly-item,.aside .instagram-feed { float: left; padding-bottom: 100px; position: relative}

.aside .monthly-item { position: relative; width: 540px}

.aside .instagram-feed .feed { position: relative}

.aside .instagram-feed .follow { position: absolute; top: 0; right: 0; width: 125px; height: 40px; background-color: #c1c1c1; border-radius: 2px}

.aside .instagram-feed .follow a { display: block; width: 100%; height: 20px; padding-top: 10px; padding-bottom: 10px; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 300; line-height: 20px; } 

.aside .instagram-feed { width: 560px}

.aside .instagram-feed .major-title { margin-left: -8px}

.aside .monthly-item .item .title,.aside .instagram-feed .feed .title { padding-top: 15px; padding-bottom: 15px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.aside .monthly-item .video-area { position: relative; width: 500px; height: 281px}

.aside .monthly-item .figure { position: absolute; width: 100%; height: 100%}

.aside .monthly-item .figure img { width: 100%}

.aside .monthly-item .video { overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%}

/* .aside .monthly-item .video-area::after { content:''; display:block; position:absolute; z-index:100; top:0; left:0; width:100%; height:100% } */
.aside .feed-link { position: absolute; display: block; right: 0; width: 125px; height: 40px; background-color: #3897f0; border-radius: 2px; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 40px}

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

.aside .feed-list li { float: left; width: 139px; height: 139px; margin-right: 1px; margin-bottom: 1px}

.aside .feed-list li a, .aside .feed-list li span { overflow: hidden; display: block; width: 100%; height: 100%}

.aside .feed-list li img { width: 100%}

.aside .monthly-item .link,.aside .instagram-feed .link { padding-top: 15px}

/* --- Brand Story Banner --- */
.brand-story-banner { height: 426px; color: #fff; text-align: center}

.brand-story-banner .brand-story-banner-item { position: absolute; display: none; 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%}

.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: 24px; font-weight: 500; line-height: 30px; letter-spacing: 0.5px; } 

.brand-story-banner .copy { padding-top: 15px; padding-bottom: 60px; font-size: 14px; line-height: 16px; letter-spacing: 0.5px; font-weight: 300; } 

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

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

.brand-story-banner .btn-brand-story .arrow { display: inline-block; width: 60px; height: 14px; margin-top: 3px; margin-bottom: 3px; vertical-align: top; background-image: url(/design/sona6769/images/arrow_long.svg); background-size: 60px 14px}

/* --- Products --- */
.product-nav { float: left; width: 330px; padding-top: 53px}

.product-nav>ul { visibility: hidden}

.product-nav>ul.enabled { visibility: visible}

.product-nav.fix { position: fixed; top: 120px}

.product-nav li { padding-bottom: 17px}

.product-nav li.is-selected { padding-bottom: 30px}

.product-nav li:last-child { padding-bottom: 0 !important}

.product-nav li a,.product-nav li b { color: #999; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 500; line-height: 22px; cursor: pointer; -webkit-transition: color 120ms ease-in-out; } 

.product-nav li a:hover,.product-nav li b:hover { color: #303030}

.product-nav li.is-selected a,.product-nav li.is-selected b { text-transform: uppercase; color: #303030; font-size: 20px; line-height: 26px; cursor: default}

.product-nav li .desc { display: none; padding-top: 13px; color: #000; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px; font-weight: 300; } 

.product-nav li.is-selected .desc { display: block}

.product-list-view { float: right; width: 770px; padding-top: 60px}

.product-list-view.all { width: 1098px; padding-right: 1px; padding-left: 1px}

.product-list-view .result { padding-bottom: 16px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

.product-list-view .result .count { display: inline-block; padding-right: 2px; font-family: 'Noto Sans KR'; font-size: 14px}

.product-list-view .list-type { visibility: hidden; padding-bottom: 20px}

.product-list-view .list-type.enabled { visibility: visible}

.product-list-view .list-type .title-ko { display: inline-block; padding-right: 17px; font-weight: 600; font-size: 32px}

.product-list-view .list-type .title-en { text-transform: uppercase; color: #757575; letter-spacing: 0.2em}

.product-list-view .product-list { padding-top: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.product-list-view .product-list-view-item { position: relative; padding-bottom: 90px}

.product-list-view .product-list-view-item:last-child { padding-bottom: 0}

.product-list-view .product-list-view-item .result { position: absolute; right: 0; top: 7px; font-size: 12px}

.product-list-view .product-list-view-item .result .count { font-size: 12px}

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

.product-list-view .product-list .product-list-row { padding-bottom: 40px}

.product-list-view .product-list .product-list-row:last-child { padding-bottom: 0}

.product-list-view .product-list .product-item { position: relative; float: left; width: 210px; margin-right: 70px}

.product-list-view.all .product-list .product-item { margin-right: 86px}

.product-list-view .product-list .product-item:last-child { margin-right: 0 !important}

.product-list-view .product-list .figure { overflow: hidden; display: block; width: 210px; height: 210px}

.product-list-view .product-list .figure img { width: 100%}

.product-list-view .product-list .sort { padding-top: 21px; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 500; line-height: 16px; } 

.product-list-view .product-list .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -0.2px; } 

.product-list-view .product-list .desc { min-height: 48px; padding-top: 6px; padding-bottom: 4px; color: #000; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 16px; font-weight: 300; } 

.product-list-view .product-list .features { position: relative; min-height: 16px}

.product-list-view .product-list .features li { display: inline-block; padding-right: 5px}

.product-list-view .product-list .features li:last-child { padding-right: 0}

.product-list-view .product-list .features li span { display: inline-block; } 

.product-list-view .product-list .features li span img { padding-right: 5px; padding-top: 1px; } 

.product-list-view .product-list .features li span img:last-child { padding-right: 0; } 

.product-list-view .product-list .features.none::before { content: ''; display: block; position: absolute; top: 50%; left: 0; width: 20px; height: 0; margin-top: -1px; border-bottom: 1px solid #999}

.product-list-view .product-list .weight { padding-top: 10px; color: 000; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px; font-weight: 300; } 

.product-list-view .product-list .price { padding-top: 4px}

.product-list-view .product-list .price .amount { font-size: 20px; line-height: 26px}

.product-list-view .product-list .price .amount ins { padding-left: 4px}

.product-list-view .product-list .price .unit { padding-top: 7px; padding-left: 6px; font-size: 12px; line-height: 18px}

.product-load-more { position: relative; padding-top: 100px; text-align: center}

.product-load-more a.btn-load-more { display: inline-block; width: 258px; height: 58px; border: 1px solid #303030; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px;; -webkit-transition: background-color 180ms ease-in-out,border-color 180ms ease-in-out,color 180ms ease-in-out}

.product-load-more a.btn-load-more:hover { background-color: #303030; color: #fff}

.product-load-more a.btn-load-more span { display: block}

/* --- Product --- */
/* --- *product major --- */
.product-major .component { padding-top: 40px}

.product-major .product-view { float: left; width: 680px}

.product-major .product-view .product-goods { overflow: hidden; position: relative; width: 680px; height: 600px; margin-top: 40px; margin-bottom: 40px; padding-bottom: 30px}

.product-major .product-goods .product-goods-container { position: absolute; width: 100%; height: 600px}

.product-major .product-goods .product-goods-container::after { content: ''; display: block; position: relative; clear: both}

.product-major .product-goods .product-goods-item { float: left; width: 680px; height: 600px}

.product-major .product-goods .product-goods-item img { width: 600px; height: 600px; margin-left: 40px}

.product-major .product-view .product-goods-gallery { overflow: hidden; position: relative; width: 680px; padding-bottom: 45px}

.product-major .product-goods-gallery .product-gallery-wrap { overflow: hidden; position: relative; width: 680px; height: 680px}

.product-major .product-goods-gallery .product-gallery-wrap .product-gallery-container { display: block; position: absolute; width: 100%; height: 100%}

.product-major .product-goods-gallery .product-gallery-wrap .product-gallery-container::after { content: ''; display: block; position: relative; clear: both}

.product-major .product-goods-gallery .product-gallery-item { display: none; float: left; width: 680px; height: 680px}

.product-major .product-goods-gallery .product-gallery-item.is-selected { display: block}

.product-major .product-goods-gallery .product-gallery-item img { width: 100%}

.product-major .product-view .product-gallery-thumbnail { width: 100%; height: 100px; padding-top: 45px; padding-bottom: 25px; /*border-bottom:1px solid #9a9a9a*/}

.product-major .product-view .product-gallery-thumbnail:last-child { padding-bottom: 0; border-bottom: none}

.product-major .product-gallery-thumbnail .thumbnail-list { display: block; text-align: center}

.product-major .product-gallery-thumbnail .thumbnail-list li { display: inline-block; width: 100px; height: 100px; margin-right: 10px; vertical-align: top}

.product-major .product-gallery-thumbnail .thumbnail-list li:last-child { margin-right: 0}

.product-major .product-view .gift { width: 588px; height: 88px; margin-top: 20px}

.product-major .thumbnail-list li b { display: block; position: relative; width: 100px; height: 100px; cursor: pointer}

.product-major .thumbnail-list li b.is-selected { cursor: default}

.product-major .thumbnail-list li b.is-selected::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 98px; height: 98px; border: 1px solid #999}

.product-major .thumbnail-list li b img { width: 100%}

.product-major .product-summary { float: right; width: 350px; position: relative}

.product-major .product-summary .product-review span { display: inline-block; vertical-align: top; color: #303030}

/* .product-major .product-review .number { color:#dd426f; font-family:'Noto Sans KR'; font-size:20px; line-height:21px } */
.product-major .product-review .number { color: #dd426f !important; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 300; line-height: 21px; vertical-align: middle; } 

.product-major .product-review .result { padding-top: 16px; padding-left: 3px; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 300; line-height: 24px; } 

.product-major .product-review .result .btn-more { vertical-align: top; margin-top: 1px; line-height: 20px}

.product-major .product-review .result .arrow { vertical-align: top; width: 20px; height: 20px}

.product-major .product-review .result .arrow:after { background-size: 20px}

.product-major .product-summary .product-names { padding-top: 10px}

.product-major .product-names span { display: block; color: #303030; font-family: 'Noto Sans KR'}

.product-major .product-names .title { font-size: 34px; font-weight: 500; line-height: 46px; } 

.product-major .product-names .sort { font-size: 22px; line-height: 36px; font-weight: 300; } 

.product-major .product-info { padding-top: 8px}

.product-major .product-info .product-info-item { padding-bottom: 14px}

.product-major .product-info .product-info-item:last-child { padding-bottom: 0; padding-top: 5px}

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

.product-major .product-info .product-info-item .title { float: left; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

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

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

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

.product-major .product-info .product-info-item.product-price.member .grade { float: right; padding-top: 14px; padding-right: 10px; color: #dd426f; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

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

.product-major .product-info .product-info-item.product-price .price .amount { font-family: 'Noto Sans KR'; font-size: 28px; font-weight: 300; line-height: 42px; } 

.product-major .product-info .product-info-item.product-price .price .unit { padding-top: 16px; padding-left: 6px; font-size: 14px; line-height: 20px}

.product-major .product-info .product-info-item.product-shipping { padding-top: 8px; padding-bottom: 14px}

.product-major .product-info .product-info-item .free { width: auto; height: 24px; padding: 0 40px; background-color: #303030; border-radius: 4px; color: #fff; text-align: center; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 24px; font-weight: 300; } 

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

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

.product-major .product-info .product-info-item.product-point .price .unit { padding-top: 6px; padding-left: 5px; color: #111111; font-family: 'Noto Sans KR'; font-weight: 400; letter-spacing: 0}

.product-major .product-info .product-info-item.product-option { padding-bottom: 7px}

.product-major .product-info .product-info-item.product-option .option { float: right; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

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

.product-major .product-info .product-info-item.product-weight .weight { color: #303030}

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

.product-major .product-info .product-info-item.product-weight .weight .unit { display: inline-block; padding-top: 6px; padding-left: 3px; vertical-align: top; font-size: 12px; line-height: 20px; letter-spacing: 1px}

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

.product-major .product-form .product-option { padding-top: 10px}

.product-major .product-form .product-option::after { content: ''; display: block; position: relative; clear: both}

.product-major .product-form .product-option .title { float: left; padding-top: 15px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.product-major .product-form .product-option .option { float: right; width: 190px}

.product-major .product-form .product-option .option select { z-index: 100; position: relative; width: 190px; padding: 15px 60px 14px 20px; border: none; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; letter-spacing: -0.5px; border-bottom: 1px solid rgba(48,48,48,0.3); border-radius: 0; outline: none; box-shadow: none; border-image: none; appearance: none; -webkit-appearance: none; -moz-appearance: none}

.product-major .product-form .product-option .option .form-select { position: relative; width: 190px; height: 50px}

.product-major .product-form .product-option .option .form-select + .form-select { margin-top: 15px}

.product-major .product-form .product-option .option .form-select::after { content: ''; display: block; position: absolute; top: 50%; right: 15px; width: 20px; height: 20px; margin-top: -10px; background-image: url(/design/sona6769/images/select-arrow.svg); background-size: 20px}

.product-major .product-form .product-quantity { padding-top: 10px}

.product-major .product-form .product-quantity::after { content: ''; display: block; position: relative; clear: both}

.product-major .product-form .product-quantity .title { float: left; padding-top: 3px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.product-major .product-form .product-quantity .option-quantity { float: right; width: 190px}

.product-major .product-form .product-quantity .option-quantity .quantity { display: inline-block; width: 90px; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 400; line-height: 30px; border: none; outline: none; text-align: center}

.product-major .product-form .option-quantity .btn-control { display: inline-block; position: relative; width: 20px; height: 20px; padding: 5px 15px; vertical-align: top}

.product-major .product-form .option-quantity .btn-control span { overflow: hidden; display: block; position: absolute; width: 20px; height: 20px; text-indent: -9999px}

.product-major .product-form .option-quantity .btn-control span::before { content: ''; display: block; position: absolute; top: 9px; left: 0; width: 20px; height: 0; border-top: 1.5px solid #303030}

.product-major .product-form .option-quantity .btn-control.plus span::after { content: ''; display: block; position: absolute; top: 0; left: 9px; width: 0; height: 20px; border-right: 1.5px solid #303030}

.product-major .product-form .product-subtotal { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(48,48,48,0.3)}

.product-major .product-form .product-subtotal::after { content: ''; display: block; position: relative; clear: both}

.product-major .product-form .product-subtotal .title { float: left; padding-top: 8px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.product-major .product-form .product-subtotal .price { float: right}

.product-major .product-form .product-subtotal .price .amount { font-family: 'Noto Sans KR'; font-size: 28px; font-weight: 300; line-height: 42px; } 

.product-major .product-form .product-subtotal .price .unit { padding-top: 16px; padding-left: 6px; font-size: 14px; line-height: 20px}

.product-major .product-form .fix-component .product-order-util:first-child { margin-top: 30px; padding-top: 15px; border-top: 1px solid rgba(48,48,48,0.3)}

.product-major .product-form .product-order-util { font-size: 0; margin-top: 20px}

.product-major .product-form .product-order-util .util-item { display: inline-block; vertical-align: top}

.product-major .product-form .product-order-util .util-item + .util-item-row { padding-top: 10px}

.product-major .product-form .product-order-util .util-item.sold-out,.product-major .product-form .product-order-util .util-item.cart { padding-right: 6px}

.product-major .product-form .product-order-util .util-item.sold-out span { display: block; width: 170px; height: 44px; color: #999; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 44px; border: 1px solid rgba(48, 48, 48, 0.2)}

.product-major .product-form .product-order-util .util-item.buy { display: block}

.product-major .product-form .product-order-util .util-item a { display: block; height: 24px; border: 0; background: #ededed; text-align: center; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 32px; -webkit-transition: background-color 180ms ease-in-out,border-color 180ms ease-in-out,color 180ms ease-in-out; width: 100% !Important; padding: 6px 0px 14px 0 !important; } 

.product-major .product-form .product-order-util .util-item b { display: block; width: 132px; height: 30px; padding: 15px 20px; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 30px}

.product-major .product-form .product-order-util .util-item a:hover { /*background-color:#303030; color:#fff*/}

.product-major .product-form .product-order-util .util-item.buy .btn-buy { display: block; width: 300px; height: 24px; padding-top: 6px; background-color: #ed145b; color: #fff}

.product-major .product-form .product-order-util .util-item.buy .btn-buy:hover { /*background-color:#dd426f; border-color:#dd426f*/}

.product-major .product-form .product-n-pay { margin-top: 10px; padding-top: 10px; font-weight: 100; color: #000; } 

.product-major .product-form .product-n-pay img { width: 81%}

/* .product-major .product-view .product-banner { width:680px; padding-top:40px; border-top:1px solid #9a9a9a } */
.product-major .product-view .product-banner { width: 680px; padding-top: 30px; border-top: 1px solid rgba(48,48,48,0.3)}

.product-major .product-view .product-banner img { width: 100%}

.product-form .gift.mini { width: 350px; height: 150px; margin-top: 15px; padding: 22px 0 0 13px; box-sizing: border-box}

.product-form .gift.mini2 { width: 350px; height: 150px; margin-top: 15px; padding: 0px 0 0 0px}

.product-form .gift.mini .info { width: auto; padding-left: 30px}

.product-form .gift.mini .info .note { position: relative}

.product-form .gift.mini .info .link { bottom: 25px}

.cart-burble { position: relative}

.cart-popup { position: absolute; margin-top: 10px; border: 1px solid #303030; width: 348px; height: 120px; z-index: 10000; background-color: #fff; box-shadow: 0 1px 3px rgba(48, 48, 48, 0.3)}

.cart-popup .title { padding-top: 18px; padding-bottom: 19px; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px; color: #303030; font-weight: 500; text-align: center}

.cart-popup-util { position: relative; margin-left: -1px; margin-right: -1px; width: 350px; height: 40px}

.cart-popup-util a { display: inline-block; width: 50%; border: 1px solid #303030; line-height: 38px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; text-align: center; box-sizing: border-box}

.cart-popup-util a.btn-cart { background-color: #303030; color: #fff}

/* --- *related product --- */
.related-product .component { padding-top: 50px}

.related-product .product-list { padding-top: 40px; padding-bottom: 70px}

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

.related-product .product-item { position: relative; float: left; padding-right: 5px; padding-left: 5px; width: 20%; text-align: center; box-sizing: border-box}

.related-product .product-item a.figure { display: block; width: 210px; height: 210px}

.related-product .product-item .figure img { width: 100%}

.related-product .product-item a.title { display: inline-block; padding-top: 20px; color: #000; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 300; line-height: 20px; } 

.related-product .product-item .badges { left: 10px}

.related-product .product-item .price { padding-top: 5px}

.related-product .price .amount { font-size: 20px; line-height: 26px}

.related-product .price .amount ins { padding-left: 3px}

.related-product .price .unit { padding-top: 6px; padding-left: 6px}

/* --- *product detail --- */
.product-details { position: relative}

.product-details .detail-content { position: relative; padding-top: 120px; padding-bottom: 0px}

.product-details .detail-content .detail-section { _display: none; margin-top: 100px; } 

.product-details .detail-content .detail-section.is-selected { display: block}

.product-details .detail-content .detail-section.product-explain { padding-top: 60px}

/* .product-details .detail-section .explain.old .component { width:750px } */
/* .product-details .detail-content .detail-section.product-explain .component .explain.old { width:750px; margin-right:auto; margin-left:auto } */
/* .product-details .detail-content .detail-section.product-explain .component .explain.old img { display:block; float:none !important; width:750px !important; margin-right:auto; margin-left:auto } */
.product-details .detail-content .detail-section.product-explain .explain .component { _width: 1000px; font-weight: 300; color: #000; } 

.product-details .detail-content .detail-section.product-explain .component .explain.old img { display: block; margin-right: auto; margin-left: auto}

.product-details .detail-content .detail-section.product-explain .Nanum a { font-family: Nanum Gothic,'³ª´®°íµñ'; letter-spacing: 0.02em}

.product-details .detail-content .detail-section.product-explain .Nanum a:hover,.Nanum a:active,.Nanum a:link { font-family: Nanum Gothic,'³ª´®°íµñ'; letter-spacing: 0.02em}

.product-details .detail-content .detail-section.product-explain .rel { position: relative !important}

.product-details .detail-content .detail-section.product-explain .abs { position: absolute !important}

.product-details .detail-content .detail-section.product-explain .l { text-align: left !important}

.product-details .detail-content .detail-section.product-explain .c { text-align: center !important}

.product-details .detail-content .detail-section.product-explain .r { text-align: right !important}

.product-details .detail-content .detail-section.product-explain .t { vertical-align: top !important}

.product-details .detail-content .detail-section.product-explain .m { vertical-align: middle !important}

.product-details .detail-content .detail-section.product-explain .b { vertical-align: bottom !important}

.product-details .detail-content .detail-section.product-explain .mb0 { margin-bottom: 0 !important}

.product-details .detail-content .detail-section.product-explain .mb5 { margin-bottom: 5px !important}

.product-details .detail-content .detail-section.product-explain .mb10 { margin-bottom: 10px !important}

.product-details .detail-content .detail-section.product-explain .mb15 { margin-bottom: 15px !important}

.product-details .detail-content .detail-section.product-explain .mb20 { margin-bottom: 20px !important}

.product-details .detail-content .detail-section.product-explain .mb25 { margin-bottom: 25px !important}

.product-details .detail-content .detail-section.product-explain .mb30 { margin-bottom: 30px !important}

.product-details .detail-content .detail-section.product-explain .mb40 { margin-bottom: 40px !important}

.product-details .detail-content .detail-section.product-explain .mr0 { margin-right: 0 !important}

.product-details .detail-content .detail-section.product-explain .mr5 { margin-right: 5px !important}

.product-details .detail-content .detail-section.product-explain .mr10 { margin-right: 10px !important}

.product-details .detail-content .detail-section.product-explain .mr15 { margin-right: 15px !important}

.product-details .detail-content .detail-section.product-explain .mr20 { margin-right: 20px !important}

.product-details .detail-content .detail-section.product-explain .mr25 { margin-right: 25px !important}

.product-details .detail-content .detail-section.product-explain .mr30 { margin-right: 30px !important}

.product-details .detail-content .detail-section.product-explain .mr100 { margin-right: 100px !important}

.product-details .detail-content .detail-section.product-explain .pt5 { padding-top: 5px !important}

.product-details .detail-content .detail-section.product-explain .floatL { float: left !important}

.product-details .detail-content .detail-section.product-explain .floatR { float: right !important}

.product-details .detail-content .detail-section.product-explain .clear { clear: both !important}

.product-details .detail-content .detail-section.product-explain .clearfix:after { content: ""; display: block; clear: both}

.product-details .detail-content .detail-section.product-explain .of { overflow: hidden}

.product-details .detail-content .detail-section.product-explain .fn11 { font-size: 11px}

.product-details .detail-content .detail-section.product-explain .fn12 { font-size: 12px}

.product-details .detail-content .detail-section.product-explain .fn12 { font-size: 14px; line-height: 20px; text-align: center}

.product-details .detail-content .detail-section.product-explain .col1 { color: #e68a91}

.product-details .detail-content .detail-section.product-explain .col2 { color: #d2a579}

.product-details .detail-content .detail-section.product-explain .col3 { color: #ff0000}

.product-details .detail-content .detail-section.product-explain .col4 { color: #4a3f73}

.product-details .detail-content .detail-section.product-explain .movie { position: absolute; top: 15px; left: 15px}

.product-details .detail-content .detail-section.product-explain .ul1 { padding: 0 15px; margin-top: 8px; font-size: 12px; font-family: Nanum Gothic,'³ª´®°íµñ',Dotum,helvetica,sans-serif}

.product-details .detail-content .detail-section.product-explain .ul1 li { padding-bottom: 5px; list-style: outside url('/design/sona6769/images/pro_one.png')}

.product-details .detail-content .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}

.product-details .detail-content .detail-section.product-explain .ul2 li { list-style-type: decimal; } 

.product-details .detail-content .detail-section.product-explain .tit_detail365 { border-bottom: 1px solid #b8b8b8}

.product-details .detail-content .detail-section.product-explain .tit_detail365 .txt { padding: 3px 10px; background-color: #b8b8b8; color: #fff; font-size: 11px}

.product-details .detail-content .detail-section.product-explain .head_t { padding-top: 5px; width: 100%; font-size: 14px; line-height: 20px; display: block; color: #303030; text-align: center; font-family: 'Noto Sans KR'}

.product-details .detail-content .detail-section.product-explain .head_s { width: 100%; font-size: 14px; line-height: 20px; display: block; font-family: 'Noto Sans KR'; text-align: center}

.product-details .detail-content .detail-section.product-explain .ban { position: absolute; top: 0; right: 0; } 

.product-details .detail-content .detail-section.product-explain .sel { background-color: #d2a579; color: #fff}

.product-details .detail-content .detail-section.product-explain .sel2 { background-color: #4a3f73; color: #fff}

.product-details .detail-section .explain img { width: 100%}

.product-details .detail-section .explain + .video { margin-top: 150px}

.product-details .detail-section .explain .explain-head { text-align: center}

.product-details .detail-section .explain .explain-head + .explain-figure,.product-details .detail-section .explain .explain-head + #so_idGoodsDescription { padding-top: 70px}

.product-details .detail-section .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}

.product-details .detail-section .explain-head .title { padding-bottom: 45px; color: #303030; font-family: 'Noto Sans KR'; font-size: 46px; font-weight: 600; line-height: 52px}

.product-details .detail-section .explain-head .desc { color: #757575; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 28px}

.product-details .detail-section .video { overflow: hidden; position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background-color: #303030; text-align: center}

.product-details .detail-section .video.load .video-cover { display: none}

.product-details .detail-section .video.load .video-util { display: none}

.product-details .detail-section .video.load .video-title { display: none}

.product-details .detail-section .video .video-frame,.product-details .detail-section .video .video-cover { position: absolute; width: 100%; height: 100%}

.product-details .detail-section .video .video-cover img { width: 100%}

.product-details .detail-section .video .video-util,.product-details .detail-section .video .video-title { position: absolute}

.product-details .detail-section .video .video-util { top: 50%; left: 50%; width: 168px; height: 168px; margin-top: -92px; margin-left: -92px; border: 8px solid #fff; border-radius: 50%}

.product-details .detail-section .video .video-util span { overflow: hidden; display: block; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin-top: -45px; margin-left: -25px; border-style: solid; border-width: 45px 0 45px 70px; border-color: transparent transparent transparent #fff; text-indent: -9999px}

.product-details .detail-section .video .video-title { bottom: 55px; width: 100%; color: #fff; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; line-height: 36px}

.product-details .detail-section .col1 { color: #e68a91 !important}

.product-details .detail-section .col2 { color: #d2a579 !important}

.product-details .detail-section .col3 { color: #ff0000 !important}

.product-details .detail-section .col4 { color: #4a3f73 !important}

.product-details .detail-section .cos1 { color: #1c1c1c !important}

.product-details .detail-section .cos2 { color: #515151 !important}

.product-details .detail-section .cos3 { color: #ff0000 !important}

.product-details .detail-section .cos4 { color: #ff3399 !important}

.product-details .detail-section .cos5 { color: #ff9600 !important}

.product-details .detail-section .cos6 { color: #a13d00 !important}

.product-details .detail-section .cos7 { color: #53aea8 !important}

.product-details .detail-section .cos8 { color: #e57981 !important}

.product-details .detail-section .cos9 { color: #e5af0c !important}

.product-details .detail-section .cos10 { color: #f36ea5 !important}

.product-details .detail-section .cos11 { color: #2e8dbb !important}

.product-details .detail-section .cos12 { color: #f4545a !important}

.product-details .detail-section .cos13 { color: #6a4b1a !important}

.product-details .detail-section .cos14 { color: #76A021 !important}

.product-details .detail-section .cos15 { color: #f35905 !important}

.product-details .detail-section .cos16 { color: #d29c67 !important}

.product-details .detail-section .cos17 { color: #4a3f73 !important}

.product-details .detail-section .cos18 { color: #39521d !important}

.product-details .detail-section .cos19 { color: #662d91 !important}

.product-details .detail-section .cos20 { color: #46C3D2 !important}

.product-details .detail-section .cos21 { color: #16b1b5 !important}

.product-details .detail-section .cos1_b { background-color: #1c1c1c; color: #fff !important}

.product-details .detail-section .cos2_b { background-color: #515151; color: #fff !important}

.product-details .detail-section .cos3_b { background-color: #ff0000; color: #fff !important}

.product-details .detail-section .cos4_b { background-color: #ff3399; color: #fff !important}

.product-details .detail-section .cos5_b { background-color: #ff9600; color: #fff !important}

.product-details .detail-section .cos6_b { background-color: #a13d00; color: #fff !important}

.product-details .detail-section .cos7_b { background-color: #53aea8; color: #fff !important}

.product-details .detail-section .cos8_b { background-color: #e57981; color: #fff !important}

.product-details .detail-section .cos9_b { background-color: #e5af0c; color: #fff !important}

.product-details .detail-section .cos10_b { background-color: #f36ea5; color: #fff !important}

.product-details .detail-section .cos11_b { background-color: #2e8dbb; color: #fff !important}

.product-details .detail-section .cos12_b { background-color: #f4545a; color: #fff !important}

.product-details .detail-section .cos13_b { background-color: #6a4b1a; color: #fff !important}

.product-details .detail-section .cos14_b { background-color: #76A021; color: #fff !important}

.product-details .detail-section .cos15_b { background-color: #f35905; color: #fff !important}

.product-details .detail-section .cos16_b { background-color: #d29c67; color: #fff !important}

.product-details .detail-section .cos17_b { background-color: #4a3f73; color: #fff !important}

.product-details .detail-section .cos18_b { background-color: #39521d; color: #fff !important}

.product-details .detail-section .cos19_b { background-color: #662d91; color: #fff !important}

.product-details .detail-section .cos20_b { background-color: #46C3D2; color: #fff !important}

.product-details .detail-section .cos21_b { background-color: #16b1b5; color: #fff !important}

.product-details .ingredient .component { padding-top: 60px; padding-bottom: 65px}

.ingredient .major-title { font-family: 'Noto Sans KR'}

.product-details .ingredient-list { padding-top: 40px; text-align: center}

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

.product-details .ingredient-list .ingredient-item { position: relative; display: inline-block; width: 100px; height: 56px; padding: 30px 0; margin-right: 40px; background-image: url(/design/sona6769/images/hex.png); background-size: 100px 116px}

.product-details .ingredient-list .ingredient-item:nth-child(8n) { margin-right: 0}

.product-details .ingredient-list .ingredient-item:last-child { margin-right: 0}

.product-details .ingredient-list .ingredient-item .title { display: table; width: 100px; height: 100%; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 18px; white-space: nowrap}

.product-details .ingredient-list .ingredient-item .title span { display: table-cell; width: 100%; vertical-align: middle; font-weight: 300; color: #000; } 

.product-details .set-product-step .component { padding-bottom: 75px}

.product-details .set-product-step .step-list { padding-top: 40px; text-align: center}

.product-details .set-product-step .step-list .step-item { display: inline-block; width: 210px; margin-right: 60px; vertical-align: top}

.product-details .set-product-step .step-list .step-item:last-child { margin-right: 0}

.product-details .set-product-step .step-list .step-title { display: inline-block; position: relative; width: 100%; color: #000; text-transform: uppercase; font-size: 16px; line-height: 20px; font-weight: 300; } 

.product-details .set-product-step .step-list .step-title::after { content: ''; display: block; position: absolute; top: 10px; right: -90px; width: 120px; height: 0; border-top: 1px solid #999}

.product-details .set-product-step .step-list .step-item:last-child .step-title::after { display: none; width: 0; border: none}

.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: 210px; height: 210px; 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: 38px; vertical-align: top; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.product-details .set-product-step .step-item .desc { padding-top: 18px; font-family: 'Noto Sans KR'; color: #000; font-size: 14px; line-height: 18px; font-weight: 300; } 

.product-details .set-product-step .step-list.step-5 .step-item { width: 218px; margin-right: 0}

.product-details .set-product-step .step-list.step-5 .step-title::after { right: -60px; width: 120px}

.product-details .guides .guide-table { position: relative}

.product-details .guides .guide-table .guide-row { padding-top: 20px; padding-bottom: 20px; color: #303030; border-bottom: 1px solid #999}

.product-details .guides .guide-table .guide-row::after { content: ''; display: block; position: relative; clear: both}

.product-details .guides .guide-table .guide-title { float: left; width: 190px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

.product-details .guides .guide-table .guide-content { float: left; width: 910px}

.product-details .guides .guide-content .use-list li { display: block; position: relative; padding-left: 12px; padding-bottom: 8px; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; color: #000; } 

.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(17,17,17,0.6)}

.product-details .guides .guide-content .use-list li span { position: relative; display: inline-block; color: #000; font-weight: 300; } 

.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(0,0,0,0.6); 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-family: 'Noto Sans KR'; 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-family: 'Noto Sans KR'; font-size: 14px; line-height: 24px; font-weight: 300; } 

.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: 20px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.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-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.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}

.product-details .product-review .review-benefit .desc { color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.product-details .product-review .review-benefit .link { padding-top: 20px}

.product-details .product-review .photo-review { padding-top: 20px; padding-bottom: 95px}

.product-details .photo-review .review-desc { text-align: center; margin-top: 18px; padding-bottom: 35px}

.product-details .text-review .review-desc { text-align: center; margin-top: 18px; padding-bottom: 50px}

/* .product-details .photo-review .review-desc + .review-board { margin-top:-30px } */
/* .product-details .text-review .review-desc + .review-board { margin-top:-80px } */
.product-details .product-review .desc-box { display: inline-block; width: 160px; height: 30px; background-color: #999999; color: #fff}

.product-details .product-review .desc-box span { display: inline-block; vertical-align: top; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 30px}

.product-details .product-review .desc-notice { padding-top: 18px}

.product-details .product-review .desc-notice span { display: inline-block; position: relative; padding-left: 14px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 16px}

.product-details .product-review .desc-notice span::before { content: '*'; display: block; position: absolute; left: 0}

.product-details .board-none { padding-top: 115px; padding-bottom: 125px; text-align: center}

.product-details .board-none .none-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px}

.product-details .board-none .none-desc { padding-top: 20px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.product-details .product-review .review-board .board-row { border-bottom: 1px solid rgba(48,48,48,0.3)}

.product-details .product-review .review-board .summary { display: table; position: relative; width: 100%; padding-top: 17px; padding-bottom: 20px}

.product-details .product-review .review-board .summary>div { display: table-cell}

.product-details .product-review .review-board .thumbnail { width: 100px; height: 100px}

.product-details .product-review .review-board .thumbnail span { overflow: hidden; display: block; position: relative; width: 140px; height: 0; padding-bottom: 100%}

/* .product-details .product-review .review-board .thumbnail img { display:inline-block; width:100%; vertical-align:middle } */
.product-details .product-review .review-board .thumbnail img { display: block; position: absolute; width: 100%}

.product-details .product-review .review-board .info { position: relative; width: 660px; vertical-align: top}

.product-details .product-review .photo-board .info { padding-left: 90px}

.product-details .product-review .review-board .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 30px; cursor: pointer}

.product-details .product-review .review-board .info .title span { display: inline-block; vertical-align: top}

.product-details .product-review .review-board .info .title .sort { width: 48px; height: 25px; margin-right: 20px; border: 1px solid #303030; border-radius: 2px; text-align: center; font-size: 14px; line-height: 25px}

.product-details .product-review .review-board .info .desc { overflow: hidden; padding-top: 3px; max-height: 60px; color: #757575; font-size: 14px; line-height: 1.45}

.product-details .product-review .photo-board .info .writer { position: absolute; bottom: 0}

.product-details .product-review .text-board .summary { padding-bottom: 15px}

.product-details .product-review .text-board .info .title span { padding-top: 3px}

.product-details .product-review .text-board .info .writer { position: relative; padding-top: 17px}

.product-details .product-review .review-board .board-row .view { display: none; border-top: 1px solid rgba(48,48,48,0.3)}

.product-details .product-review .review-board .view-writer { position: relative; width: 650px; padding-top: 60px; padding-bottom: 60px; padding-left: 190px}

.product-details .product-review .review-board .view-writer:last-child { padding-bottom: 55px}

.product-details .product-review .review-board .view-writer .view-content { padding-bottom: 35px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px}

.product-details .product-review .review-board .view-writer .view-figure img { max-width: 650px; padding-bottom: 40px}

.product-details .product-review .review-board .view-writer .view-content:last-child,.product-details .product-review .review-board .view-writer .view-figure img:last-child { padding-bottom: 0}

.product-details .product-review .review-board .view-util { padding-bottom: 55px}

.product-details .product-review .review-board .view-util::after { content: ''; display: block; position: relative; clear: both}

.product-details .product-review .review-board .view-util .edit-area { float: right}

.product-details .product-review .review-board .view-util .edit-area a { display: inline-block; width: 118px; height: 58px; border: 1px solid #303030; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 58px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.product-details .product-review .review-board .view-util .edit-area a.btn-modify { margin-right: 20px; color: #303030}

.product-details .product-review .review-board .view-util .edit-area a.btn-modify:hover { background-color: #303030; color: #fff}

.product-details .product-review .review-board .view-util .edit-area a.btn-delete { background-color: #303030; color: #fff}

.product-details .product-review .review-board .view-util .edit-area a.btn-delete:hover { background-color: #fff; color: #303030}

.product-details .product-review .text-board .view-writer { padding-top: 35px; padding-bottom: 55px}

.product-details .product-review .text-board .view-writer .view-content { padding-bottom: 40px}

.product-details .product-review .review-board .view-admin { position: relative; padding-top: 60px; padding-bottom: 55px}

.product-details .product-review .text-board .view-admin { padding-bottom: 40px}

.product-details .product-review .review-board .view-admin::before { content: ''; display: block; position: absolute; top: 0; left: 190px; width: 70px; height: 0; border-bottom: 2px solid rgba(48,48,48,0.3)}

.product-details .product-review .review-board .view-admin::after { content: ''; display: block; position: relative; clear: both}

.product-details .product-review .review-board .view-admin .logo { float: left; width: 190px; height: 61px; text-align: center}

.product-details .product-review .review-board .view-admin .logo span { display: inline-block; vertical-align: top; width: 80px; height: 61px; background-image: url(/design/sona6769/images/logo.svg); background-size: 80px 61px; text-indent: -9999px}

.product-details .product-review .review-board .view-admin .reply { float: left; width: 650px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px}

.product-details .product-review .review-board .published { display: block; position: absolute; top: 17px; right: 0; color: #303030; font-family: 'Noto Sans KR'; font-size: 18px; line-height: 24px}

.product-details .product-review .text-board .published { top: 20px}

.product-details .product-review .review-board .status { display: block; position: absolute; bottom: 20px; right: 0; white-space: nowrap}

.product-details .product-review .review-board .status p { float: left; display: table; width: 45px; height: 28px; margin-left: 20px; border-radius: 3px; text-align: center; box-sizing: border-box; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.product-details .product-review .review-board .status p:first-child { margin-left: 0}

.product-details .product-review .review-board .status p.complete { background-color: #757575; color: #fff; cursor: pointer}

.product-details .product-review .review-board .status p.complete:hover { background-color: transparent; border: 1px solid #757575; color: #757575}

.product-details .product-review .review-board .status p.buy { background-color: transparent; border: 1px solid #303030; color: #303030}

.product-details .product-review .review-board .status p span { display: table-cell; vertical-align: middle; text-align: center}

.product-details .product-review .review-board .status p span b { display: inline-block; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 14px}

.product-details .product-review .review-board .board-notice { position: relative; padding-top: 20px; padding-left: 12px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px}

.product-details .product-review .review-board .board-notice::before { content: '*'; display: block; position: absolute; left: 0}

.product-details .product-review .review-board .board-paddle-nav { padding-top: 55px}

.wish-list-board .board-paddle-nav { padding-top: 100px}

.product-details .product-qna .qna-notice .desc { color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.product-details .product-qna .qna-notice .notice { position: relative; padding-top: 18px; padding-left: 12px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.product-details .product-qna .qna-notice .notice::before { content: '*'; display: block; position: absolute; left: 0}

.product-details .product-qna .qna-content .qna-board { padding-top: 65px}

.product-details .product-qna .qna-board .board-head { display: table; width: 100%; padding-bottom: 20px; color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.product-details .product-qna .qna-board .board-head>p { display: table-cell}

.product-details .product-qna .qna-board .board-body { position: relative}

.product-details .product-qna .qna-board .board-body .board-row { border-bottom: 1px solid rgba(48,48,48,0.3)}

.product-details .product-qna .qna-board .board-body .summary { display: table; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.product-details .product-qna .qna-board .board-body .board-row.is-selected { margin-top: -1px; border-top: 1px solid #303030; border-bottom: none}

.product-details .product-qna .qna-board .board-body .board-row.is-selected .summary { color: #303030}

.product-details .product-qna .qna-board .board-body .board-row:first-child { margin-top: 0; border-top: none !important}

.product-details .product-qna .qna-board .board-body .board-row.is-selected + .board-row { border-top: 1px solid #303030}

.product-details .product-qna .qna-board .board-body .summary>p { display: table-cell}

.product-details .product-qna .qna-board .status { width: 140px}

.product-details .product-qna .qna-board .title { width: 700px; cursor: pointer}

.product-details .product-qna .qna-board .writer { width: 160px; text-align: right}

.product-details .product-qna .qna-board .date { width: 100px; text-align: right}

.product-details .product-qna .qna-board .writer span { display: inline-block; width: 50px; text-align: center}

.product-details .product-qna .qna-board .date span { display: inline-block; width: 70px; text-align: center}

.product-details .product-qna .qna-board .board-body .view { display: none; padding-left: 140px}

.product-details .product-qna .qna-board .board-body .board-row.is-selected .view { display: block}

.product-details .product-qna .qna-board .view .quest { padding-top: 10px; padding-bottom: 35px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.product-details .product-qna .qna-board .view .view-util { padding-bottom: 55px}

.product-details .product-qna .qna-board .view .view-util::after { content: ''; display: block; position: relative; clear: both}

.product-details .product-qna .qna-board .view .view-util .edit-area { float: right}

.product-details .product-qna .qna-board .view .view-util .edit-area a { display: inline-block; width: 118px; height: 58px; border: 1px solid #303030; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 58px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.product-details .product-qna .qna-board .view .view-util .edit-area a.btn-modify { margin-right: 20px; color: #303030}

.product-details .product-qna .qna-board .view .view-util .edit-area a.btn-modify:hover { background-color: #303030; color: #fff}

.product-details .product-qna .qna-board .view .view-util .edit-area a.btn-delete { background-color: #303030; color: #fff}

.product-details .product-qna .qna-board .view .view-util .edit-area a.btn-delete:hover { background-color: #fff; color: #303030}

.product-details .product-qna .qna-board .view .answer { padding-bottom: 25px}

.product-details .product-qna .qna-board .view .answer .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.product-details .product-qna .qna-board .view .answer .desc { padding-top: 20px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px}

.product-details .product-qna .qna-content .board-paddle-nav { padding-top: 90px}

.product-details .notice-item { padding-bottom: 60px; color: #303030}

.product-details .notice-item.service { padding-bottom: 50px}

.product-details .notice-item:last-child { padding-bottom: 0}

.product-details .notice-item .notice-title { font-family: 'Noto Sans KR'; font-size: 22px; font-weight: 600; line-height: 26px}

.product-details .notice-item .notice-desc { padding-top: 40px; font-family: 'Noto Sans KR'; font-size: 18px; line-height: 24px}

.product-details .notice-item .notice-emphasis { padding-top: 15px; color: #303030; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 600; line-height: 20px}

.product-details .notice-item .shipping-list { padding-top: 55px}

.product-details .notice-item .shipping-list li { padding-bottom: 13px}

.product-details .notice-item .shipping-list li span { display: inline-block; vertical-align: top; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px}

.product-details .notice-item .shipping-list li .title { width: 190px; font-size: 16px}

.product-details .notice-item .shipping-list li .desc { width: 910px; font-size: 16px; color: #757575}

.product-details .notice-item .service-list { padding-top: 75px}

.product-details .notice-item .service-list li { float: left; width: 50%; padding-bottom: 55px}

.product-details .notice-item .service-list li:nth-child(n+4) { float: left; width: 50%; padding-bottom: 40px}

.product-details .notice-item .service-list::after { content: ''; display: block; position: relative; clear: both}

.product-details .notice-item .service-list li .icon,.product-details .notice-item .service-list li .info { display: inline-block; vertical-align: top}

.product-details .notice-item .service-list li .icon { width: 200px}

.product-details .notice-item .service-list li .icon span { display: inline-block; width: 65px; vertical-align: top}

.product-details .notice-item .service-list li .icon img { width: 100%}

.product-details .notice-item .service-list li .info { width: 350px}

.product-details .notice-item .service-list li .info span { display: block; font-family: 'Noto Sans KR'}

.product-details .notice-item .service-list li .info span.subject { color: #757575; font-size: 14px; line-height: 20px}

.product-details .notice-item .service-list li .info span.title { padding-top: 10px; color: #303030; font-size: 20px; font-weight: 600; line-height: 24px}

.product-details .notice-item .service-list li .info span.title.en { text-transform: uppercase; font-family: 'Noto Sans KR'; letter-spacing: 1.5px}

.product-details .expiration-table { margin-top: 60px}

.product-details .expiration-table thead th { height: 38px; text-align: left; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; line-height: 20px}

.product-details .expiration-table tbody th { height: 28px; text-align: left; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: -0.4px}

.product-details .expiration-table tbody td { height: 48px; border-bottom: 1px solid rgba(48,48,48,0.3); color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; line-height: 20px}

.product-details .expiration-table tbody td:first-child { color: #303030}

.product-details .expiration-table tfoot td { height: 48px; padding-top: 10px; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; line-height: 20px}

.popup { display: none; position: fixed; z-index: 3000; top: 0; right: 0; left: 0; width: 100%; height: 100%}

html.is-popup .popup { display: block}

.popup .dim { position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0.9)}

.popup .popup-view { position: absolute; top: 50%; left: 50%; width: 818px; height: 938px; margin-top: 0; margin-top: -470px; margin-left: -410px; background-color: #fff; border: 1px solid #757575}

.popup .popup-content { padding: 55px 120px 75px; text-align: center}

.popup .popup-content .popup-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; line-height: 36px}

.popup .popup-content .popup-sub-title { padding-top: 28px; color: #303030; font-size: 20px; font-weight: 600; line-height: 26px}

.popup .popup-content .popup-sub-title:first-line { padding-bottom: 2px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.popup .popup-content .popup-notice { padding-top: 20px}

.popup .popup-content .popup-notice span { display: inline-block; position: relative; padding-left: 14px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 600; line-height: 20px}

.popup .popup-content .popup-notice span::before { content: '*'; display: block; position: absolute; left: 0}

.popup .popup-content .popup-list { padding-top: 70px}

.popup .popup-content .popup-list li { display: inline-block; width: 160px; margin-right: 140px; vertical-align: top}

.popup .popup-content .popup-list li:last-child { margin-right: 0}

.popup .popup-content .popup-list li .thumbnail { width: 140px; height: 140px; padding-right: 10px; padding-left: 10px}

.popup .popup-content .popup-list li .thumbnail img { width: 100%}

.popup .popup-content .popup-list li .title { padding-top: 22px; color: #303030; font-size: 16px; font-weight: 600; line-height: 22px}

.popup .popup-content .popup-list li .reserve { padding-top: 10px}

.popup .popup-content .popup-list li .reserve .amount { display: inline-block; vertical-align: top; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; line-height: 36px; letter-spacing: -2px}

.popup .popup-content .popup-list li .reserve .name { display: inline-block; padding-top: 13px; padding-left: 4px; vertical-align: top; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 600; line-height: 18px}

.popup .popup-content .popup-list li .note { padding-top: 3px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.popup .popup-content .popup-desc { padding-top: 55px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.popup .popup-content .popup-desc span { display: block; padding-bottom: 5px}

.popup .popup-content .popup-desc span:last-child { padding-bottom: 0}

.popup .popup-content .popup-explain { padding-top: 32px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 22px}

.popup .popup-content .popup-explain + .popup-notice { padding-top: 70px}

.popup .btn-close { display: block; position: absolute; top: 50px; right: 40px; width: 40px; height: 40px; cursor: pointer}

.popup .btn-close span { overflow: hidden; display: block; width: 20px; height: 20px; margin: 10px; background-image: url(/design/sona6769/images/close.svg); background-size: 20px 20px; text-indent: -9999px}

/* --- My Page --- */
.my-info .member { padding-top: 50px; padding-bottom: 60px; text-align: center}

.my-info .member-2 { padding-top: 50px; padding-bottom: 20px; text-align: center}

.my-info .greeting { display: block; padding-bottom: 20px; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.my-info .grade { display: inline-block; width: 70px; height: 16px; border-radius: 2px; color: #fff; background-color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 600; line-height: 16px}

.my-info .grade.b { display: inline-block; width: 112px; height: 25px; font-size: 14px; line-height: 25px; font-weight: 300; } 

.my-info .grade-go { display: block; text-align: center; padding-top: 20px}

.my-info .btn-grade { display: inline-block; position: relative; color: #303030; font-family: 'Noto Sans KR'; padding-right: 15px; font-size: 15px; font-weight: 500; line-height: 20px; } 

.my-info .btn-grade::after { content: ''; overflow: hidden; display: block; position: absolute; top: 3px; right: 0; width: 7px; height: 12px; background-image: url(/design/sona6769/images/grade-arrow.png); background-size: 7px 12px; text-indent: -9999px}

.my-info .stats { position: relative; padding-top: 40px; text-align: center}

.my-info .stats::after { content: ''; display: block; position: relative; clear: both}

.my-info .stats li { display: inline-block; position: relative; width: 140px; vertical-align: top; color: #303030; font-family: 'Noto Sans KR'; font-weight: 300; color: #000; } 

.my-info .stats li.g { width: 270px}

.my-info .stats li::before { content: ''; display: block; position: absolute; top: 10px; right: 0; width: 0; height: 30px; border-right: 1px solid #303030}

.my-info .stats li:last-child::before { display: none; border: none}

.my-info .stats li .title { padding-bottom: 4px; font-size: 14px; line-height: 20px}

.my-info .stats li .own { font-size: 18px; font-weight: 500; line-height: 24px; } 

.my-info .stats li .own .amount { font-family: 'Noto Sans KR'}

.my-info .stats li .period { font-family: 'Noto Sans KR'}

.my-info .stats li .period span { display: inline-block; position: relative; vertical-align: top; font-size: 18px; font-weight: 500; line-height: 24px; } 

.my-info .stats li .period span.start { padding-right: 16px}

.my-info .stats li .period span.start::after { content: ''; display: block; position: absolute; top: 50%; right: 5px; width: 6px; height: 0; border-top: 2px solid #303030}

.my-info .stats li .exp span { display: inline-block; position: relative; vertical-align: top; font-size: 18px; font-weight: 500; line-height: 24px; } 

.my-info .stats li .exp .total { padding-right: 6px}

.my-info .stats li .exp .amount { font-family: 'Noto Sans KR'}

.my-info .stats li .exp .unit { padding-left: 2px}

.my-dashboard .my-page-menu { padding-top: 80px}

.my-dashboard .sub-menu { padding-top: 60px}

.sub-menu { display: none}

.sub-menu.active { display: block}

.sub-menu .sub-menu-item { display: none; width: 680px; margin: 0 auto}

.sub-menu .sub-menu-item.is-selected { display: block}

.sub-menu .sub-menu-item ul { display: flex; justify-content: space-between}

.sub-menu .sub-menu-item li { display: inline-block}

.sub-menu .sub-menu-item li a { display: block; color: #000; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px; font-weight: 300; } 

.sub-menu .sub-menu-item li a.is-selected { position: relative; color: #303030; font-weight: 500; } 

.sub-menu .sub-menu-item li a.is-selected::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; width: 100%; height: 0; border-bottom: 1px solid #303030}

.my-page-content .board,.my-page-content .product-board { padding-top: 100px}

.wish-list-board .list-board,.inquire-board .list-board,.address-manage-board .list-board { border-bottom: 1px solid rgba(48,48,48,0.3)}

.wish-list-board .list-board.bn { border-bottom: none}

.list-board .board-none { padding-top: 100px; padding-bottom: 100px; text-align: center; font-weight: 600}

.list-board .board-none .none-desc { color: #303030; font-family: 'Noto Sans KR'; font-size: 24px; line-height: 26px}

.board .result,.product-board .result { color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px}

.board .result .count,.product-board .result .count { padding-left: 2px; font-family: 'Noto Sans KR'}

.board .board-table,.product-board .board-table { margin-top: 30px; width: 100%}

.board .board-table thead th { padding: 0; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(48,48,48,0.3); text-align: left; color: #303030; font-size: 14px; font-weight: 500; line-height: 20px; } 

.order-history-table thead th:nth-child(4) { text-align: center}

.order-history-table thead th:nth-child(5),.order-history-table thead th:last-child { text-align: right}

.coupon-history-table thead th:nth-child(4),.coupon-history-table thead th:last-child { text-align: right}

.reserve-history-table thead th:nth-child(3),.reserve-history-table thead th:last-child { text-align: right}

.address-manage-table thead th:nth-child(4),.address-manage-table thead th:last-child { text-align: right}

.board .board-table thead th .date { display: inline-block; width: 70px; text-align: center !important}

.board .board-table thead .modify,.board .board-table thead .delete { display: inline-block; width: 50px; vertical-align: top; text-align: center}

.board .board-table tbody tr { border: none; border-bottom: 1px solid rgba(48,48,48,0.3)}

.board .board-table tbody tr:first-child td { padding-top: 25px; border-top: 1px solid rgba(48,48,48,0.3)}

.board .board-table tbody td { padding: 0; padding-top: 19px; padding-bottom: 19px; vertical-align: middle; text-align: left; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.board .board-table tbody td span.lock { margin-top: 3px; margin-bottom: 2px; margin-left: 10px; display: inline-block; width: 10px; height: 15px; background-image: url(/design/sona6769/images/lock_g.png); background-size: 10px 15px; vertical-align: top}

.board .board-table tbody td.reply span.lock { background-image: url(/design/sona6769/images/lock_b.png)}

.board .board-table tbody td span.comment { display: inline-block; margin-left: 10px}

.board .board-table tbody td a { display: inline-block; color: #757575; -webkit-transition: color 180ms ease-in-out}

.board .board-table tbody tr.recent td,.board .board-table tbody tr.recent td a { color: #303030}

.order-history-table tbody td:nth-child(4) { text-align: center}

.order-history-table tbody td:nth-child(5),.order-history-table tbody td:last-child { text-align: right}

.coupon-history-table tbody td:nth-child(4),.coupon-history-table tbody td:last-child { text-align: right}

.reserve-history-table tbody td:nth-child(3),.reserve-history-table tbody td:last-child { text-align: right}

.address-manage-table tbody td:nth-child(4),.address-manage-table tbody td:last-child { padding-top: 7px; padding-bottom: 8px; text-align: right}

.board .board-table tbody .date,.board .board-table tbody .number,.board .board-table tbody .quantity,.board .board-table tbody .range,.board .board-table tbody .phone,.board .board-table tbody .count { font-family: 'Noto Sans KR'}

.board .board-table tbody .price { color: #757575}

.board .board-table tbody tr.recent .price { color: #303030}

.board .board-table tbody .price .amount,.board .board-table tbody .price .unit { font-size: 14px; line-height: 20px}

.board .board-table tbody .price .unit { padding-top: 0; padding-left: 4px}

.board .board-table tbody .range span { display: inline-block; position: relative; width: 70px; vertical-align: top}

.board .board-table tbody .range span.start { padding-right: 50px}

.board .board-table tbody .range span.start::after { content: ''; display: block; position: absolute; top: 50%; right: 15px; width: 20px; height: 0; margin-top: -1px; border-top: 1px solid #757575}

.board .board-table tbody tr.recent .range span.start::after { border-color: #303030}

.board .board-table tbody .address span { display: inline-block; font-family: 'Noto Sans KR'}

.board .board-table tbody .address span.zipcode { padding-right: 4px}

.board .board-table tbody .address span.zipcode::after { content: ')'; padding-left: 2px; font-family: 'Noto Sans KR'}

.board .board-table tbody .modify,.board .board-table tbody .delete { display: inline-block; width: 50px; vertical-align: top}

.board .board-table tbody .btn-modify,.board .board-table tbody .btn-delete { width: 50px; height: 35px; border: 1px solid #303030; background-color: #fff; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.board .board-table tbody .btn-delete { background-color: #fff; color: #303030}

.board .board-table tbody .btn-modify:hover { background-color: #303030; color: #fff}

.board .board-table tbody .btn-delete:hover { background-color: #303030; color: #fff}

.my-page-content .board .board-paddle-nav { padding-top: 100px}

.my-page-content .board-notice { padding-top: 60px; border-top: 1px solid rgba(48,48,48,0.3)}

.my-page-content .board + .board-notice { border-top: none}

.my-page-content .board-notice li { display: block; position: relative; padding-left: 26px; padding-bottom: 8px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.my-page-content .board-notice 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%}

.my-page-content .coupon-history-method { padding-top: 60px; border-top: 1px solid rgba(48,48,48,0.3)}

.my-page-content .board + .coupon-history-method { border-top: none}

.coupon-history-method .method-item { padding-bottom: 50px}

.coupon-history-method .method-item:last-child { padding-bottom: 0}

.coupon-history-method .method-item > div { display: inline-block; vertical-align: top}

.coupon-history-method .method-item .title { width: 210px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.coupon-history-method .method-item .notice { color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.coupon-history-method .method-item .notice small { display: inline-block; padding-top: 4px; font-size: 12px; line-height: 18px}

.coupon-history-method .method-item .notice-list li { display: block; position: relative; padding-left: 26px; padding-bottom: 8px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.coupon-history-method .method-item .notice-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%}

.wish-list-table.board-table thead tr { border-top: 1px solid rgba(48,48,48,0.3)}

.wish-list-table.board-table thead th { padding: 0; padding-top: 10px; padding-bottom: 10px; text-align: center; color: #303030; font-size: 14px; font-weight: 400; line-height: 20px}

.wish-list-table.board-table thead th:nth-child(2) { text-align: left}

.wish-list-table.board-table thead th:nth-child(4),.wish-list-table.board-table thead th:last-child { text-align: right}

.wish-list-table.board-table thead .info { display: inline-block; width: 120px; text-align: center}

.wish-list-table.board-table thead .add,.wish-list-table.board-table thead .remove { display: inline-block; text-align: center}

.wish-list-table.board-table thead .add { width: 90px}

.wish-list-table.board-table thead .remove { width: 50px}

.wish-list-table.board-table tbody td { padding: 0; padding-top: 25px; padding-bottom: 25px; border-top: 1px solid rgba(48,48,48,0.3); vertical-align: middle; color: #303030; text-align: center}

.wish-list-table.board-table tbody td:nth-child(2) { text-align: left}

.wish-list-table.board-table tbody td:nth-child(4),.wish-list-table.board-table tbody td:last-child { text-align: right}

.wish-list-table.board-table tbody tr:last-child td { padding-bottom: 50px}

.wish-list-table.board-table tbody .check { display: inline-block; width: 100%; text-align: center; vertical-align: middle}

.wish-list-table.board-table tbody .check { display: inline-block; user-select: none; -webkit-user-select: none; vertical-align: middle}

.wish-list-table.board-table tbody .check input { display: inline-block; position: relative; width: 16px; height: 16px; border: 1px solid #757575; vertical-align: top}

.wish-list-table.board-table tbody .check input:disabled { background-color: rgba(48,48,48,0.3); border-color: rgba(48,48,48,0.3); opacity: 0.4}

.wish-list-table.board-table tbody .check input.round { border-radius: 50%}

.wish-list-table.board-table tbody .check input::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: #303030; border-radius: 50%; opacity: 0; -webkit-transition: opacity 120ms ease-in-out}

.wish-list-table.board-table tbody .check input:checked { border-color: #303030}

.wish-list-table.board-table tbody .check input:checked::before { opacity: 1.0}

.address-manage-table.board-table tbody .check { display: inline-block; width: 100%; text-align: center; vertical-align: middle}

.address-manage-table.board-table tbody .check { display: inline-block; user-select: none; -webkit-user-select: none; vertical-align: middle}

.address-manage-table.board-table tbody .check input { display: inline-block; position: relative; width: 16px; height: 16px; border: 1px solid #757575; vertical-align: top}

.address-manage-table.board-table tbody .check input:disabled { background-color: rgba(48,48,48,0.3); border-color: rgba(48,48,48,0.3); opacity: 0.4}

.address-manage-table.board-table tbody .check input.round { border-radius: 50%}

.address-manage-table.board-table tbody .check input::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: #303030; border-radius: 50%; opacity: 0; -webkit-transition: opacity 120ms ease-in-out}

.address-manage-table.board-table tbody .check input:checked { border-color: #303030}

.address-manage-table.board-table tbody .check input:checked::before { opacity: 1.0}

.ps_cls_btn_addressBook { display: none}

.wish-list-table.board-table tbody .thumbnail { display: inline-block; width: 120px; }

.wish-list-table.board-table tbody .thumbnail img { width: 120px; height: auto; vertical-align: top}

.wish-list-table.board-table tbody .info-cell-wrap { display: inline-block; position: relative; max-width: 360px; height: 120px; padding-left: 20px; vertical-align: top}

.wish-list-table.board-table tbody .info-cell-container { display: table; height: 100%}

.wish-list-table.board-table tbody .info { display: table-cell; vertical-align: middle}

.wish-list-table.board-table tbody .info p.title { font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.wish-list-table.board-table tbody .info .option { font-family: 'Noto Sans KR'; color: rgba(48,48,48,0.6); font-size: 14px; line-height: 20px}

.wish-list-table.board-table tbody .info .option span { display: inline-block}

.wish-list-table.board-table tbody .info .option span em { font-style: normal}

.wish-list-table.board-table tbody .info .option span.title { position: relative; padding-right: 15px}

.wish-list-table.board-table tbody .info .option span.title::after { content: ''; display: block; position: absolute; top: 4px; right: 7px; width: 0; height: 12px; border-right: 1px solid rgba(48,48,48,0.6)}

.wish-list-table.board-table tbody .price .amount,.wish-list-table.board-table tbody .price .unit { font-size: 14px; line-height: 20px}

.wish-list-table.board-table tbody .price .unit { padding-top: 0; padding-left: 4px}

.wish-list-table.board-table tbody .add .btn-add { display: inline-block; width: 88px; height: 33px; margin: 0; padding: 0; background-color: #fff; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 33px}

.wish-list-table.board-table tbody .add .btn-add span { display: inline-block; vertical-align: top}

.wish-list-table.board-table tbody .add .btn-add:hover { background-color: #303030; color: #fff}

.wish-list-table.board-table tbody .add .sold-out { display: inline-block; width: 90px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.wish-list-table.board-table tbody .remove .btn-remove { display: inline-block; width: 48px; height: 33px; margin: 0; padding: 0; background-color: #fff; border: 1px solid #303030; outline: none; vertical-align: top; color: #303030; text-align: center; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 33px}

.wish-list-table.board-table tbody .remove .btn-remove span { display: inline-block; vertical-align: top}

.wish-list-table.board-table tbody .remove .btn-remove:hover { background-color: #303030; color: #fff}

.wish-list-table + .board-paddle-nav { padding-top: 100px; border-top: 1px solid rgba(48,48,48,0.3)}

.my-page-content .board-table + .board-util { padding-top: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.my-page-content .board-util a,.my-page-content .board-util button { display: inline-block; border: 1px solid #303030; outline: none; vertical-align: top; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.my-page-content .board-util a span,.my-page-content .board-util button span { display: block}

.my-page-content .board-util a { width: 188px; height: 58px; line-height: 58px}

.my-page-content .board-util button { width: 190px; height: 60px; line-height: 26px}

.my-page-content .board-util a:first-child,.my-page-content .board-util button:first-child { margin-right: 20px}

.my-page-content .board-util .btn-delete { background-color: #fff; color: #303030}

.my-page-content .board-util .btn-cart.all { width: 268px; background-color: #303030; color: #fff}

.my-page-content .board-util .btn-cart.all:hover { background-color: #fff; color: #303030}

.my-page-content .board-util .btn-cart { margin-right: 0; background-color: #fff; color: #303030}

.my-page-content .board-util .btn-delete:hover { background-color: #fff; color: #303030}

.my-page-content .board-util .btn-cart:hover { background-color: #303030; color: #fff}

.my-page-content .form-row .form-value { color: #757575; font-size: 14px; line-height: 20px}

.my-page-content .form-row .form-value span { padding-left: 20px}

.my-page-content .my-account-form { padding-top: 100px}

.my-page-content .form-check label { font-size: 12px}

.my-page-content .form-util.account-util { padding-top: 85px; text-align: center}

.my-page-content .form-util.address-util { padding-top: 20px; padding-left: 140px; text-align: center}

.my-page-content .form-util .btn-apply { display: inline-block; width: 188px; height: 58px; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.my-page-content .form-util .btn-apply:hover { background-color: #303030; color: #fff}

.my-page-content .form-util .write-area { float: right}

.my-page-content .form-util .write-area button { display: inline-block; width: 120px; height: 60px; border: 1px solid #303030; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 60px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.my-page-content .form-util .write-area button.btn-modify { margin-right: 20px; color: #303030}

.my-page-content .form-util .write-area button.btn-modify:hover { background-color: #303030; color: #fff}

.my-page-content .form-util .write-area button.btn-delete { background-color: #303030; color: #fff}

.my-page-content .form-util .write-area button.btn-delete:hover { background-color: #fff; color: #303030}

.my-page-content .form-util .write-area a { display: inline-block; width: 118px; height: 58px; border: 1px solid #303030; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 58px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.my-page-content .form-util .write-area a.btn-modify { margin-right: 20px; color: #303030}

.my-page-content .form-util .write-area a.btn-modify:hover { background-color: #303030; color: #fff}

.my-page-content .form-util .write-area a.btn-delete { background-color: #303030; color: #fff}

.my-page-content .form-util .write-area a.btn-delete:hover { background-color: #fff; color: #303030}

.my-page-content .form-util .btn-add { display: inline-block; width: 188px; height: 58px; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px}

.my-page-content .form-util .btn-add:hover { background-color: #303030; color: #fff}

.inquire-board { padding-top: 100px}

.inquire-board + .inquire-notice { border-top: none !important}

.inquire-board .board-head { display: table; width: 100%; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid rgba(48,48,48,0.3); border-bottom: 1px solid rgba(48,48,48,0.3); color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.inquire-board .board-head>p { display: table-cell}

.inquire-board .board-body .board-row { border-bottom: 1px solid rgba(48,48,48,0.3)}

.inquire-board .board-body .board-row:last-child { border-bottom: none}

.inquire-board .board-body .summary { display: table; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.inquire-board .board-body .board-row.is-selected { margin-top: -1px; border-top: 1px solid #303030; border-bottom: none}

.inquire-board .board-body .board-row.is-selected .summary { color: #303030}

.inquire-board .board-body .board-row:first-child { margin-top: 0; border-top: none !important}

.inquire-board .board-body .board-row.is-selected + .board-row { border-top: 1px solid #303030}

.inquire-board .board-body .summary>p { display: table-cell}

.inquire-board .status { width: 140px}

.inquire-board .title { width: 860px}

.inquire-board .writer { width: 160px}

.inquire-board .date { width: 100px; text-align: right}

.inquire-board .date span { display: inline-block; width: 70px; text-align: center}

.inquire-board .board-body .date { font-family: 'Noto Sans KR'}

.inquire-board .board-body .view { display: none; padding-left: 140px}

.inquire-board .board-body .board-row.is-selected .view { display: block}

.inquire-board .view .quest { padding-top: 10px; padding-bottom: 35px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.inquire-board .view .answer { padding-bottom: 55px}

.inquire-board .view .answer .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.inquire-board .view .answer .desc { padding-top: 20px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.inquire-board .board-paddle-nav { padding-top: 90px; padding-bottom: 140px}

.my-page-content .inquire-notice { padding-top: 50px; border-top: 1px solid rgba(48,48,48,0.3)}

.inquire-notice .desc { color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.inquire-notice .link { padding-top: 20px}

.inquire-notice .link a.btn-qna { display: inline-block; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 24px}

.inquire-notice .link a.btn-qna span { display: inline-block; vertical-align: top}

.inquire-notice .link a.btn-qna span.arrow { display: inline-block; position: relative; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%}

.inquire-notice .link a.btn-qna span.arrow:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/design/sona6769/images/arrow_g.svg); background-size: 24px}

.address-manage-board .board-table + .board-util { padding-top: 100px; border-top: none}

.address-manage-board .board-util .btn-add:hover { background-color: #303030; color: #fff}

.secede-form { width: 820px; margin: 0 auto; padding-top: 90px}

.secede-form .info { padding-bottom: 60px; color: #303030; font-family: 'Noto Sans KR'; text-align: center}

.secede-form .info .title { font-size: 20px; font-weight: 600; line-height: 26px}

.secede-form .info .desc { padding-top: 35px; font-size: 14px; line-height: 24px}

.secede-form .info .notice { padding-top: 15px; font-size: 14px; font-weight: 600; line-height: 20px}

.secede-form .form-row .form-textarea { width: 100%}

.secede-form .form-row .form-textarea textarea { width: 778px; height: 110px}

.secede-form .form-util { text-align: center}

.secede-form .form-util.secede-util { padding-top: 100px}

.secede-form .form-util a { display: inline-block; width: 188px; height: 58px; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px}

.secede-form .form-util a:first-child { margin-right: 20px}

.secede-form .form-util .btn-secede { margin-right: 0; background-color: #303030; color: #fff}

.secede-form .form-util .btn-cancel { background-color: #fff; color: #303030}

.secede-form .form-util .btn-secede:hover { background-color: #fff; color: #303030}

.secede-form .form-util .btn-cancel:hover { background-color: #303030; color: #fff}

/* --- Cart --- */
.content .step-intro { position: relative; padding-top: 0; text-align: center}

.content .step-intro .stitle { font-family: 'Noto Sans KR'; font-size: 20px; line-height: 28px; letter-spacing: -0.4px; font-weight: 300; } 

.content .step-intro .title { padding-top: 65px; font-family: 'Nanum Myeongjo'; font-size: 30px; font-weight: 600; line-height: 30px; letter-spacing: 0.5px}

.content .product-order .step-guide { padding-top: 60px}

.content .one-stop { padding-top: 85px; text-align: center; color: #303030}

.content .one-stop .icon { display: inline-block; width: 80px; height: 80px}

.content .one-stop .icon img { width: 100%}

.content .one-stop .title { padding-top: 2px; text-transform: uppercase; font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: 0.4px}

.content .one-stop .desc { padding-top: 25px; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 26px; letter-spacing: -0.4px}

.content .step-guide { display: block; width: 860px; margin: 0 auto; padding-top: 95px}

.content .step-guide ul { display: flex; justify-content: space-between}

.content .step-guide li { display: inline-block}

.content .step-guide li b { display: block; height: 20px}

.content .step-guide li .number { display: inline-block; width: 18px; height: 18px; background-color: #fff; border: 1px solid #999; border-radius: 50%; vertical-align: top; text-align: center; color: #999; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 400; line-height: 18px}

.content .step-guide li b.is-selected .number { background-color: #303030; border-color: #303030; color: #fff}

.content .step-guide li .title { display: inline-block; padding-left: 20px; font-family: 'Noto Sans KR'; color: #999; font-size: 20px; font-weight: 300; line-height: 20px; } 

.content .step-guide li b.is-selected .title { color: #303030}

.product-form.cart .cart-table { margin-bottom: 30px}

.product-form { padding-bottom: 60px}

.product-form.fixB { bottom: -100px}

.product-form.fixT { bottom: 0}

.product-form.fix { /*overflow:hidden; */
 position: fixed; z-index: 2000; right: 0; left: 0; bottom: 0; background-color: #fff; width: 100%; height: 70px; border-top: 1px solid rgba(48,48,48,0.3); } 

.product-form.anim { -webkit-transition: bottom 200ms ease-in-out}

.product-form.fix .fix-component { position: relative; width: 1100px; height: 40px; margin: 0 auto; padding: 15px 0}

.product-form:last-child { padding-bottom: 0}

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

.product-form .result { padding-top: 80px; font-family: 'Noto Sans KR'; color: #303030; font-size: 16px; font-weight: 400; line-height: 22px}

.product-form .result .count { font-family: 'Noto Sans KR'}

.product-form .cart-table { margin-top: 55px; margin-bottom: 90px}

/* .product-order .cart-table thead th { padding-bottom:50px } */
.product-order .cart-table .price .amount { font-size: 28px}

.product-order .order-table .price .amount { font-size: 28px}

.product-order .cart-table tfoot td { padding-top: 35px}

.cart-table thead th { padding: 0; padding-top: 15px; padding-bottom: 15px; border-top: 1px solid rgba(48,48,48,0.3); color: #303030; font-size: 14px; font-weight: 400; line-height: 20px}

.cart-table thead th:first-child { text-align: left}

.cart-table thead th:nth-child(4),.cart-table thead th:last-child { text-align: right}

.cart-table thead .info { display: inline-block; width: 120px; text-align: center}

.cart-table thead .price { padding-right: 22px}

.cart-table .price .amount { font-size: 28px}

.order-table .price .amount { font-size: 28px}

.cart-table thead .remove { display: inline-block; width: 50px; text-align: center}

.cart-table tbody td { padding: 0; padding-top: 25px; padding-bottom: 25px; border-top: 1px solid rgba(48,48,48,0.3); vertical-align: middle; color: #303030; text-align: center}

.cart-table tbody td:first-child { text-align: left}

.cart-table tbody td:nth-child(4),.cart-table tbody td:last-child { text-align: right}

.cart-table tbody tr:last-child td { padding-bottom: 50px}

.cart-table tbody .thumbnail { display: inline-block; width: 120px; vertical-align: top}

.cart-table tbody .thumbnail img { width: 120px; height: 120px; vertical-align: top}

.cart-table tbody .info { display: inline-block; position: relative; height: 115px; padding-top: 5px; padding-left: 20px; white-space: nowrap}

.cart-table tbody .info p.title { font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.cart-table tbody .info .option { family: 'Noto Sans KR'; color: rgba(48,48,48,0.6); font-size: 14px; line-height: 20px}

.cart-table tbody .info .option span { display: inline-block}

.cart-table tbody .info .option span.title { position: relative; padding-right: 15px}

.cart-table tbody .info .option em { font-style: normal}

.cart-table tbody .info .option span.title::after { content: ''; display: block; position: absolute; top: 4px; right: 7px; width: 0; height: 12px; border-right: 1px solid rgba(48,48,48,0.6)}

.cart-table tbody .info .product-price { position: absolute; bottom: 10px; font-weight: 300; } 

.cart-table tbody .info .product-price .amount { display: inline-block; vertical-align: top; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px}

.cart-table tbody .info .product-price .unit { display: inline-block; padding-top: 4px; padding-bottom: 2px; padding-left: 2px; vertical-align: top; font-size: 12px; line-height: 20px; letter-spacing: 1px}

.cart-table tbody .sold-out { font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.cart-table tbody .option-quantity .quantity { display: inline-block; width: 60px; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px; border: none; outline: none; text-align: center}

.cart-table tbody .option-quantity .btn-control { display: inline-block; position: relative; width: 16px; height: 16px; padding: 5px 5px; vertical-align: top}

.cart-table tbody .option-quantity .btn-control span { overflow: hidden; display: block; position: absolute; width: 16px; height: 16px; text-indent: -9999px}

.cart-table tbody .option-quantity .btn-control span::before { content: ''; display: block; position: absolute; top: 7.5px; left: 0; width: 16px; height: 0; border-top: 1px solid #303030}

.cart-table tbody .option-quantity .btn-control.plus span::after { content: ''; display: block; position: absolute; top: 0; left: 7.5px; width: 0; height: 16px; border-right: 1px solid #303030}

.cart-table tbody .reserve-price { font-size: 14px; line-height: 20px}

.cart-table tbody .reserve-price .amount { display: inline-block; font-family: 'Noto Sans KR'}

.cart-table tbody .reserve-price .unit { display: inline-block; padding-left: 2px; font-family: 'Noto Sans KR'}

.cart-table tbody .remove .btn-remove { display: inline-block; width: 48px; height: 33px; margin: 0; padding: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 400; line-height: 33px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.cart-table tbody .remove .btn-remove span { display: inline-block; vertical-align: top}

.cart-table tbody .remove .btn-remove:hover { background-color: #fff; color: #303030}

.cart-table tfoot td { padding: 0; padding-top: 15px; border-top: 1px solid rgba(48,48,48,0.3); text-align: right}

.cart-table tfoot td .total { display: inline-block; padding-right: 100px; vertical-align: top; text-align: left}

.cart-table tfoot td .total .title { display: inline-block; padding-right: 25px; vertical-align: middle; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.cart-table tfoot td .total .price { display: inline-block; vertical-align: middle}

.cart-table tfoot td .total .price .amount { font-size: 36px; line-height: 32px}

.cart-table tfoot td .total .price .unit { padding-top: 15px; padding-left: 10px}

.product-form .gift { width: 588px; height: 98px; float: none}

.product-order .product-form .gift { float: left}

.product-order .cart-n-pay { float: right; padding-top: 10px}

.product-order .npay_type_D_1_1,.product-order .npay_type_D_2_1 { width: 350px !important}

.product-form .cart-util { float: right; width: 350px}

.product-form .cart-util a { display: inline-block; width: 168px; height: 58px; margin: 0; padding: 0; margin-right: 6px; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.product-form .cart-util .btn-continue { background-color: #fff; color: #303030}

.product-form .cart-util .btn-buy { margin-right: 0; background-color: #303030; color: #fff}

.product-form .cart-util .btn-continue:hover { background-color: #303030; color: #fff}

.product-form .cart-util .btn-buy:hover { background-color: #fff; color: #303030}

.product-major .product-form.fix .product-option { display: inline-block; position: relative; margin-left: 390px; padding-top: 0}

.product-major .product-form.fix .product-option + .product-option { margin-left: 25px}

.product-major .product-form.fix .product-option .title { display: none; position: absolute; top: 0; left: 0; padding-top: 0; font-size: 12px; font-weight: 600; line-height: 20px}

.product-major .product-form.fix .product-option .option { position: relative; float: left; width: 160px; height: 40px}

.product-major .product-form.fix .product-option .option::after { content: ''; display: block; position: relative; clear: both}

.product-major .product-form.fix .product-option .option select { width: 160px; height: 40px; padding: 10px 26px 9px 10px}

.product-major .product-form.fix .product-option .option .form-select { float: left; width: 160px; height: 40px; margin-right: 0}

.product-major .product-form.fix .product-option .option .form-select + .form-select { margin-top: 0}

.product-major .product-form.fix .product-option .option .form-select::after { right: 5px; width: 16px; height: 16px; margin-top: -8px; background-size: 16px}

.product-major .product-form.fix .product-quantity { position: absolute; top: 15px; left: 0; padding-top: 0}

.product-major .product-form.fix .product-quantity .title { display: none}

.product-major .product-form.fix .product-quantity .option-quantity { float: inherit; width: 124px; margin-left: -12px}

.product-major .product-form.fix .product-quantity .option-quantity .quantity { width: 44px; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 40px}

.product-major .product-form.fix .option-quantity .btn-control { width: 40px; height: 40px; padding: 0}

.product-major .product-form.fix .option-quantity .btn-control span { width: 16px; height: 16px; margin: 12px}

.product-major .product-form.fix .option-quantity .btn-control span::before { top: 7px; width: 16px}

.product-major .product-form.fix .option-quantity .btn-control.plus span::after { left: 7px; height: 16px}

.product-major .product-form.fix .product-subtotal { position: absolute; top: 6px; right: 405px; FONT-VARIANT: JIS83; padding: 0; border-top: none; } 

.product-major .product-form.fix .product-subtotal .title { display: none}

.product-major .product-form.fix .product-subtotal .price { float: inherit}

.product-major .product-form.fix .product-subtotal .price .amount { font-size: 28px; line-height: 34px}

.product-major .product-form.fix .product-subtotal .price .unit { padding-top: 12px; padding-left: 4px; font-size: 12px; line-height: 18px}

.product-major .product-form.fix .product-order-util { position: absolute; top: 15px; right: 0; margin-top: 0; white-space: nowrap}

.product-major .product-form.fix .product-order-util:after { content: ''; display: block; position: relative; clear: both}

.product-major .product-form.fix .product-order-util .util-item-row,.product-major .product-form.fix .product-order-util .util-item { display: inline-block}

.product-major .product-form.fix .product-order-util .util-item + .util-item-row { padding-top: 0; float: left}

.product-major .product-form.fix .product-order-util .util-item.sold-out { padding-right: 14px}

.product-major .product-form.fix .fix-component .product-order-util:first-child { margin-top: 0; padding-top: 0; border-top: none}

.product-major .product-form.fix .product-order-util .util-item.cart { padding-right: 14px}

.product-major .product-form.fix .product-order-util .util-item.wish { _padding-right: 14px; float: unset !important; } 

.product-major .product-form.fix .mem { display: none}

.product-form.fix #MK_innerOptScroll { position: absolute; top: 0; } 

.product-major .product-form.fix .product-order-util .util-item.sold-out + .util-item.wish { padding-right: 0}

.product-major .product-form.fix .product-order-util .util-item.buy { display: inline-block; padding-top: 0; padding-right: 3px !IMPORTANT; } 

.product-major .product-form.fix .product-order-util .util-item a { width: 90px !important; height: 18px; padding-right: 14px !important; padding-left: 14px !IMPORTANT; font-size: 16px; font-weight: 400; line-height: 28px; } 

.product-major .product-form.fix .product-order-util .util-item b { width: 100px; height: 18px; padding-right: 10px; padding-left: 10px; font-size: 20px; font-weight: 600; line-height: 28px}

.product-major .product-form.fix .product-order-util .util-item.buy .btn-buy { width: 90px; height: 18px; margin-right: 4px !important; } 

.product-major .product-form.fix .product-n-pay { display: none !important}

.product-major .product-form.fix .gift { display: none !important}

.product-major .product-form.fix .gift.mini { display: none !important}

.product-major .product-form.fix .gift.mini2 { display: none !important}

.product-major .product-form #id_dlg_cart_progress_next { position: absolute !important; left: 750px !important}

.product-major .product-form.fix #id_dlg_cart_progress_next { position: absolute !important; top: auto !important; bottom: 57px !important; left: 0 !important}

.cart-info { padding-top: 25px; border-top: 1px solid rgba(48,48,48,0.3)}

.cart-info .info-item:last-child { padding-bottom: 0}

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

.cart-info .info-item .title { float: left; width: 190px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

.cart-info .info-item .notice-list { float: left; width: 910px}

.cart-info .info-item .notice-list li { display: block; position: relative; padding-left: 12px; padding-bottom: 8px; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; color: #000; } 

.cart-info .info-item .notice-list li:last-child { padding-bottom: 0}

.cart-info .info-item .notice-list li::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid rgba(0,0,0,0.6); border-radius: 50%}

.form-field-item.address { padding-top: 60px}

/* --- Checkout --- */
.product-form .order-table { margin-top: 55px; border-bottom: 1px solid rgba(48,48,48,0.3)}

.product-order.checkout .product-form .order-table { margin-top: 85px}

.product-order.checkout .form-content.s .form-input { margin-right: 24px}

.checkout fieldset { padding-top: 50px}

.checkout .form-field-item { padding-bottom: 60px}

.checkout .form-field-item:last-child { padding-bottom: 0}

.checkout .form-content.billing-select .form-radio { width: 466px; padding-right: 24px}

.checkout .form-content.billing-select .form-radio .radio-item { padding-right: 50px}

.checkout .form-content.billing-select .form-radio .radio-item:last-child { padding-right: 0}

.checkout .form-content.billing-select .button-label { display: block; width: 188px; height: 48px; background-color: #303030; border: 1px solid #303030; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.checkout .form-content.billing-select .button-label:hover { background-color: #fff; color: #303030}

.checkout .form-content.reserve .form-input { width: 466px; padding-right: 24px}

.checkout .form-content.reserve .form-input input { width: 426px}

.checkout .form-content.reserve .form-note { display: block; clear: both; padding-top: 25px}

.checkout .form-content.reserve .form-note p { display: inline-block; font-size: 12px; line-height: 18px}

.checkout .form-content.reserve .form-note p.title { color: #303030; font-family: 'Noto Sans KR'}

.checkout .form-content.reserve .form-note p.title::after { content: ':'; display: inline-block; padding-right: 6px; padding-left: 6px}

.checkout .form-content.reserve .form-note p.point { font-family: 'Noto Sans KR'}

.checkout .form-content.reserve .form-note p.point span { display: inline-block}

.checkout .form-content.reserve .form-note p.point span.amount { font-family: 'Noto Sans KR'}

.checkout .form-content.reserve .form-note p.point span.unit { padding-left: 3px}

.checkout .form-content.reserve .form-note p.note { padding-left: 4px; color: #757575; font-family: 'Noto Sans KR'}

.checkout .form-content.reserve .form-note p.note::before { content: '('}

.checkout .form-content.reserve .form-note p.note::after { content: ')'}

.checkout .form-content.reserve .form-note p.note span { display: inline-block}

.checkout .form-content.reserve .form-note p.note span.amount { font-family: 'Noto Sans KR'}

.checkout .form-content.coupon .form-input { width: 252px; padding-right: 24px}

.checkout .form-content.coupon .form-input input { width: 210px}

.checkout .form-content.coupon .form-button { width: 404px}

.checkout .form-content.coupon .form-button a { display: inline-block}

.checkout .form-content.coupon .form-button a:last-child { margin-left: 24px}

.checkout .form-field-item-row .form-notice { padding-top: 20px}

.checkout .form-field-item-row .form-notice .notice { position: relative; padding-left: 16px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.checkout .form-field-item-row .form-notice .notice::before { content: '*'; display: block; position: absolute; left: 0}

.checkout .attent { position: relative; width: 606px; height: 65px; padding-top: 50px}

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

.checkout .attent .icon,.checkout .attent .info { float: left}

.checkout .attent .icon { width: 70px; height: 65px}

.checkout .attent .icon img { width: 100%}

.checkout .attent .info { padding-left: 40px; color: #303030}

.checkout .attent .info .explain { padding-top: 8px; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.checkout .attent .info .title { padding-top: 6px}

.checkout .attent .info .title em { display: inline-block; vertical-align: bottom; font-family: 'Noto Sans KR'; font-size: 24px; font-style: normal; line-height: 30px}

.checkout .attent .info .title span { display: inline-block; position: relative; padding-left: 16px; vertical-align: bottom; white-space: nowrap; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.checkout .attent .info .title span::before { content: ''; display: block; position: absolute; top: 50%; left: 5px; width: 6px; height: 0; margin-top: -1px; border-top: 1px solid #303030}

.checkout .attent .info .title span strong { font-family: 'Noto Sans KR'; font-weight: 400}

.checkout .attent .link { position: absolute; bottom: 0; right: 15px}

.checkout .form-field-item.freebie { padding-top: 50px; border-top: 1px solid rgba(48,48,48,0.3)}

.checkout .freebie-info { position: relative; padding-top: 20px}

.checkout .freebie-info::after { content: ''; display: block; position: relative; clear: both}

.checkout .freebie-info .info { float: left}

.checkout .freebie-info .info .desc { color: #757575; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px; white-space: nowrap}

.checkout .freebie-info .info .desc2 { color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px; white-space: nowrap}

.checkout .freebie-info .info .desc b { color: #303030; font-weight: 600}

.checkout .freebie-info .info .desc .price { display: inline-block; vertical-align: top}

.checkout .freebie-info .info .desc .price .amount,.checkout .freebie-info .info .desc .price .unit { color: #303030; font-size: 20px; font-weight: 400; line-height: 26px}

.checkout .freebie-info .info .desc .price .unit { padding-top: 0; padding-left: 2px}

.checkout .freebie-info .info .notice { padding-top: 6px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.checkout .freebie-info .remain { float: right; text-align: right; display: none}

.checkout .freebie-info .remain .title { color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.checkout .freebie-info .remain .price { padding-top: 6px}

.checkout .freebie-info .remain .price .amount { font-size: 28px; font-weight: 400}

.checkout .freebie-info .remain .price .unit { padding-top: 10px; padding-left: 8px; font-size: 14px; font-weight: 600}

.checkout .freebie-list { padding-top: 70px}

.checkout .freebie-list ul { text-align: center}

.checkout .freebie-list li { display: inline-block; vertical-align: top; padding-right: 50px; padding-left: 50px; padding-bottom: 30px}

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

.checkout .freebie-list li .thumbnail { width: 210px; height: 210px}

.checkout .freebie-list li .thumbnail img { width: 100%}

.checkout .freebie-list li .title { display: block; padding-top: 16px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.checkout .freebie-list li .title b { font-family: 'Noto Sans KR'}

.checkout .freebie-list li .nearly { padding-top: 4px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 600; line-height: 24px}

.checkout .freebie-list li .form-row { padding-top: 10px}

.checkout .freebie-list li .form-row .form-select { width: 100px; float: none; margin: 0 auto}

.checkout .freebie-list li .form-row .form-select select { width: 100px}

.form-row .form-select select.clsPriceOffCoupon { width: 210px!important}

.checkout .freebie-list li .option-quantity { padding-top: 16px}

.checkout .freebie-list li .option-quantity .quantity { display: inline-block; width: 60px; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px; border: none; outline: none; text-align: center}

.checkout .freebie-list li .option-quantity .btn-control { display: inline-block; position: relative; width: 16px; height: 16px; padding: 5px 5px; vertical-align: top}

.checkout .freebie-list li .option-quantity .btn-control span { overflow: hidden; display: block; position: absolute; width: 16px; height: 16px; text-indent: -9999px}

.checkout .freebie-list li .option-quantity .btn-control span::before { content: ''; display: block; position: absolute; top: 7.5px; left: 0; width: 16px; height: 0; border-top: 1px solid #303030}

.checkout .freebie-list li .option-quantity .btn-control.plus span::after { content: ''; display: block; position: absolute; top: 0; left: 7.5px; width: 0; height: 16px; border-right: 1px solid #303030}

/* .checkout .form-field-item.payment { border-top:1px solid rgba(48,48,48,0.3) } */
.checkout .form-field-item.trans::after { content: ''; display: block; position: relative; clear: both}

.checkout .form-field-item .form-sub-content:first-child { padding-left: 140px}

.checkout .form-field-item.trans { padding-bottom: 0}

.checkout .form-field-item.trans .form-sub-title { padding-top: 15px}

.checkout .form-field-item.trans input { width: 150px}

.checkout .form-field-item.trans .form-row.map { padding-top: 15px; padding-bottom: 25px !important}

.checkout .form-field-item.trans .form-row.map .form-value { padding-top: 0; padding-bottom: 0}

.checkout .form-field-item.trans .form-row.map .link { float: left; margin-top: 13px; margin-left: 20px}

.checkout .form-field-item.trans .form-value a { display: inline-block; width: 188px; height: 48px; background-color: #303030; border: 1px solid #303030; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.checkout .form-field-item.trans .form-value a:hover { background-color: #fff; color: #303030}

.checkout .form-field-item.trans .form-value span + a { margin-left: 24px}

.checkout .form-field-item.payment::after { content: ''; display: block; position: relative; clear: both}

.checkout .form-field-item.payment .form-field-item-col.payment-info { float: left; width: 680px; padding-top: 40px}

.checkout .form-field-item.payment .form-field-item-col.payment-util { float: right; width: 320px; padding-top: 60px}

.checkout .form-field-item.payment .form-row .form-content { width: 540px}

.checkout .form-field-item.payment .form-field-item-col.payment-info .form-row { padding-bottom: 8px}

.checkout .form-field-item.payment .form-field-item-col.payment-info .form-row .form-radio .radio-item { padding-bottom: 0}

.checkout .form-content.shipping .form-notice { display: inline-block; padding-top: 5px}

.checkout .form-content.shipping .form-notice .notice { position: relative; padding-left: 16px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

.checkout .form-content.shipping .form-notice .notice::before { content: '*'; display: block; position: absolute; left: 0}

.checkout .form-content.shipping .radio-item { width: 140px}

.checkout .form-content.shipping .radio-item + .radio-item { width: 200px}

.checkout .form-content.shipping .form-notice { padding-left: 0; padding-top: 15px; padding-bottom: 5px}

.checkout .form-content.payment-method .radio-item { width: 140px}

.checkout .field-item-payment { margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.checkout .form-sub-title { padding-bottom: 30px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.checkout .form-content.bank-in-date .form-input { width: 190px}

.checkout .form-content.bank-in-date .form-input input { width: 150px}

.checkout .form-content.bank-in-date .form-notice { float: left; width: 330px; padding-top: 5px; padding-bottom: 5px; padding-left: 20px}

.checkout .form-content.bank-in-date .form-notice span { white-space: nowrap}

.checkout .form-content.bank-escrow .form-check-note { display: inline-block; padding-top: 15px; padding-bottom: 15px; padding-left: 50px; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

.checkout .form-row .form-notice { clear: inherit}

.checkout .payment-item .form-notice { color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

.checkout .payment-item::after { content: ''; display: block; position: relative; clear: both}

.checkout .payment-item.one .form-sub-title,.checkout .payment-item.one .form-sub-content { float: left}

.checkout .payment-item.one .form-sub-title { width: 140px}

.checkout .payment-item.one .form-sub-content { width: 540px}

.checkout .payment-item .form-notice { padding-top: 0}

.checkout .payment-item .notice-list p { padding-bottom: 5px}

.checkout .payment-item .notice-list ul { padding-bottom: 15px}

.checkout .payment-item .notice-list li { display: block; color: #757575}

.checkout .payment-item .notice-list p em { display: inline-block; position: relative; margin-top: 10px; padding-left: 14px; color: #757575; font-style: normal}

.checkout .payment-item .notice-list p em::before { content: '*'; display: block; position: absolute; left: 0}

.checkout .form-content.shipping ul::after { content: ''; display: block; position: relative; clear: both}

.checkout .form-content.shipping li { position: relative; float: left; padding-top: 15px; min-width: 140px}

.checkout .form-content.shipping input { display: inline-block; position: absolute; left: 0; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #757575; border-radius: 50%; vertical-align: top}

.checkout .form-content.shipping input::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: #303030; border-radius: 50%; opacity: 0; -webkit-transition: opacity 120ms ease-in-out}

.checkout .form-content.shipping input:checked { border-color: #303030}

.checkout .form-content.shipping input:checked::before { opacity: 1.0}

.checkout .form-content.shipping label { display: inline-block; position: relative; padding-left: 36px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; -webkit-transition: color 120ms ease-in-out}

/* .checkout .form-content.shipping label:has(input:checked) { color:#303030 } */
.checkout .receipt .form-row { padding-bottom: 0}

.checkout .form-content.receipt .radio-item { width: 140px; white-space: nowrap}

.checkout .form-content.receipt .form-input { width: 100%; padding-top: 20px}

.checkout .form-content.receipt .form-input input { width: 498px}

.checkout .form-content.receipt .form-notice { clear: both}

.checkout .form-content.receipt .form-notice { padding-top: 25px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.checkout .form-content.receipt .form-notice span { display: block; padding-bottom: 2px}

.checkout .form-content.receipt .form-notice span:last-child { padding-bottom: 0}

.checkout .form-content.payment-method ul::after { content: ''; display: block; position: relative; clear: both}

.checkout .form-content.payment-method li { position: relative; float: left; padding-top: 15px; width: 160px}

.checkout .form-content.payment-method input { display: inline-block; position: absolute; left: 0; width: 16px; height: 16px; margin-top: 2px; border: 1px solid #757575; border-radius: 50%; vertical-align: top}

.checkout .form-content.payment-method input::before { content: ''; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; background-color: #303030; border-radius: 50%; opacity: 0; -webkit-transition: opacity 120ms ease-in-out}

.checkout .form-content.payment-method input:checked { border-color: #303030}

.checkout .form-content.payment-method input:checked::before { opacity: 1.0}

.checkout .form-content.payment-method label { display: inline-block; position: relative; padding-left: 36px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px; cursor: pointer; -webkit-transition: color 120ms ease-in-out}

/* .checkout .form-content.payment-method label:has(input::checked) { color:#303030 } */
.checkout .form-content.bank-escrow { padding-left: 140px; padding-top: 30px}

.checkout .form-content.bank-escrow::after { content: ''; clear: both; display: block}

.checkout .form-content.bank-escrow .form-check { float: left; width: 170px}

.checkout .form-content.bank-escrow .form-check label { color: #303030; font-size: 12px}

.checkout .form-content.bank-escrow .form-check-note { padding-left: 10px}

.checkout .payment-util .order-result { padding-bottom: 40px}

.checkout .payment-util .form-util.checkout-util { padding-bottom: 25px; padding-left: 40px}

.checkout .payment-util .form-util a { display: block; width: 278px; height: 58px; margin: 0; padding: 0; margin-bottom: 5px; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.checkout .payment-util .form-util .btn-checkout { background-color: #303030; color: #fff}

.checkout .payment-util .form-util .btn-cancel { margin-bottom: 0; background-color: #fff; color: #303030}

.checkout .payment-util .form-util .btn-checkout:hover { background-color: #fff; color: #303030}

.checkout .payment-util .form-util .btn-cancel:hover { background-color: #303030; color: #fff}

.checkout .payment-util .form-link { margin-left: 40px; padding-top: 25px; border-top: 1px solid rgba(48,48,48,0.3)}

.checkout .payment-util .form-link li { display: inline-block; width: 50%}

.checkout .payment-util .form-link li:last-child { text-align: right}

/* --- Thank you --- */
.thankyou .order-result-container { padding-top: 40px; text-align: right}

.thankyou .order-result-container .order-result { display: inline-block; width: 320px; text-align: left}

.thankyou .order-info { padding-top: 60px}

.thankyou .order-info.billing { padding-top: 35px; padding-bottom: 40px}

.thankyou .order-info.payment { padding-top: 35px; padding-bottom: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.thankyou .order-info.shipping { padding-top: 0; padding-bottom: 40px}

.thankyou .message { padding-top: 100px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 600; line-height: 34px}

.thankyou .order-number { padding-top: 50px; padding-bottom: 65px; text-align: center}

.thankyou .order-number .title { color: #757575; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; line-height: 20px}

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

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

.thankyou .order-info .info-title h2 { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.thankyou .order-info .order-info-row { padding-top: 40px}

.thankyou .info-row { width: 820px; padding-bottom: 15px}

.thankyou .info-row:last-child { padding-bottom: 0}

.thankyou .info-row::after,.thankyou .info-row .info-content::after { content: ''; display: block; position: relative; clear: both}

.thankyou .info-row .title,.thankyou .info-row .info-content,.thankyou .info-row .desc { float: left}

.thankyou .info-row .title { display: inline-block; width: 140px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.thankyou .info-row .desc { display: inline-block; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.thankyou .info-row .info-content,.thankyou .info-row .desc { width: 680px}

.thankyou .info-row .info-content.bank-account .desc { display: inline-block; float: none; width: auto; white-space: nowrap}

.thankyou .info-row .info-content.bank-account .notice { display: inline-block; position: relative; margin-left: 40px; padding-left: 16px; color: #757575; font-size: 12px; line-height: 20px}

.thankyou .info-row .info-content.bank-account .notice::before { content: '*'; display: block; position: absolute; left: 0}

.thankyou .info-row.address .desc { font-family: 'Noto Sans KR'}

.thankyou .info-row .desc .phone,.thankyou .info-row .desc .zipcode,.thankyou .info-row .desc .account-number,.thankyou .info-row .desc .date { font-family: 'Noto Sans KR'; letter-spacing: 1px}

.thankyou .info-row .desc .zipcode { padding-right: 4px}

.thankyou .info-row .desc .zipcode::after { content: ')'; padding-left: 2px; font-family: 'Noto Sans KR'}

.thankyou .info-row .desc .account-number { padding-right: 10px; padding-left: 10px}

.thankyou .info-row .desc.price .amount,.thankyou .info-row .desc.price .unit { font-size: 14px; font-weight: 400; line-height: 20px}

.thankyou .info-row .desc.price .unit { padding-top: 0; padding-left: 2px}

.thankyou .order-result-container .result-total { padding-top: 20px}

.thankyou .order-table-bottom { position: relative; border-top: 1px solid rgba(48,48,48,0.3)}

.thankyou .order-table-bottom::after { content: ''; clear: both; display: block}

.thankyou .order-table-bottom .order-infomation { float: left; width: 680px}

.thankyou .order-table-bottom .order-final-amount { float: right}

.thankyou .order-util { padding-top: 50px; text-align: center}

.thankyou .order-util a { display: inline-block; width: 278px; height: 58px; margin: 0; padding: 0; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.thankyou .order-util a + a { margin-left: 24px}

.thankyou .order-util a.btn-check { background-color: #fff; color: #303030}

.thankyou .order-util a.btn-order-list { background-color: #303030; color: #fff}

/* --- Login --- */
.login-form { position: relative; text-align: left}

.login-form .form-row { padding-bottom: 40px}

.login-form .form-row .form-content,.login-form .form-row .form-title { display: inline-block; float: none; vertical-align: top}

.login-form .form-row .form-title { width: 120px; text-align: left}

.login-form .form-row .form-content,.login-form .form-row .form-input { width: 280px}

.login-form .form-row .form-input input { width: 240px}

.login-form .form-row-util { position: absolute; right: auto; top: 0; width: auto; margin: 0; text-align: left}

.login-form .form-row-util .title { padding-top: 2px; color: #999; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.login-form .form-row-util .link { padding-top: 6px}

.login-form .form-row-util .link a { display: inline-block; position: relative; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 24px}

.login-form .form-row-util .link a::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; border-bottom: 1px solid #303030}

.login-form .form-util { position: absolute; top: 0; right: auto; width: auto; margin: 0; text-align: left}

.login-form .form-util .login-area { width: 100%}

.login-form .form-util .login-area .btn-login { display: block; width: 138px; height: 138px; background-color: #303030; border: 1px solid #303030; color: #fff; font-family: 'Noto Sans KR'; text-align: center; font-size: 20px; font-weight: 500; line-height: 138px; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out; } 

.login-form .form-util .login-area .btn-login span { display: inline-block}

.login-form .form-util .login-area .btn-login:hover { background-color: #fff; color: #303030}

.login-form .form-util .setting-area { position: absolute; top: 6px; right: -220px; width: 150px; text-align: left}

.login-form .form-util .setting-area .form-check:first-child { padding-bottom: 8px}

.login-form .field-bottom { position: relative; margin-top: -12px}

.login-form .field-bottom::after { content: ''; display: block; position: relative; clear: both}

.login-form .field-bottom .forget-item { float: left}

.login-form .field-bottom .forget-item .title { padding-top: 2px; color: #000; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px; font-weight: 300; } 

.login-form .field-bottom .forget-item .link { padding-top: 3px}

.login-form .field-bottom .forget-item .link a { display: inline-block; position: relative; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 24px; } 

.login-form .field-bottom .forget-item .link a::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; border-bottom: 1px solid #303030}

.login-form .field-bottom .forget-item.id { margin-right: 44px}

.login-form .field-bottom .setting-area { position: absolute; left: 422px; top: 0; width: auto}

.login-form .field-bottom .setting-area .form-check { display: block}

.login-form .field-bottom .setting-area .form-check:first-child { padding-bottom: 8px}

.login-form .field-bottom .setting-area .form-check label span { font-size: 12px; font-weight: 500; } 

.account-login .account-member { padding-top: 150px}

.account-login .login-form { padding-top: 0}

.account-member::after { content: ''; display: block; position: relative; clear: both}

.account-member .member-go { float: left; width: 470px}

.member-go .member-title { color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 24px; font-weight: 300; } 

.member-go .member-avail ul { display: flex; justify-content: space-between}

.member-go .member-avail li.m-1 { width: 45px}

.member-go .member-avail li.m-2 { width: 46px}

.member-go .member-avail li.m-3 { width: 45px}

.member-go .member-avail li.m-4 { width: 45px}

.member-go .member-avail li.m-5 { width: 46px}

.member-go .member-avail li.m-6 { width: 52px}

.member-go .member-avail li .icon { display: block; position: relative; width: 100%; height: 52px}

.member-go .member-avail li .icon img { display: inline-block; position: absolute; bottom: 0; width: 100%}

.member-go .member-avail li .title { display: block; padding-top: 8px; text-align: center; color: #000; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 16px; font-weight: 300; } 

.account-login .account-member .member-go { padding-top: 20px; border-top: 1px solid rgba(48,48,48,0.3)}

.account-login .member-go .member-avail { padding-top: 15px}

.account-login .member-go .link { padding-top: 35px}

.account-member .member-event { float: right; width: 560px; height: 230px}

.account-member .member-event.banner .dot-nav { bottom: 20px}

.member-event.banner .banner-item { text-align: center}

.member-event.banner .banner-item .title { padding-top: 25px; font-size: 20px; line-height: 26px}

.member-event.banner .banner-item .desc { padding-top: 6px; color: #000; font-size: 14px; line-height: 20px; font-weight: 300; } 

.member-event.banner .banner-item .icon { overflow: hidden; width: 50px; height: 50px; margin: 25px auto 0}

.member-event.banner .banner-item .icon img { width: 100%}

.member-event.banner .dot-nav li b { background-color: #303030}

.account-login .account-major { position: relative; padding-top: 82px; padding-bottom: 60px}

.account-login .account-major::after { content: ''; display: block; position: relative; clear: both}

.account-login .account-major .login-title { position: relative; height: 50px}

.account-login .account-major .login-title .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 22px; font-weight: 600; line-height: 26px}

.account-login .account-major .login-title .sub-text { position: absolute; color: #999}

.account-login .account-major .login-title .sub-text strong { display: block; color: #303030}

.account-login .member-login { float: left; width: 595px}

.account-login .member-login .login-title .sub-text { right: 30px; top: 9px}

.account-login .member-login .login-form { margin-top: 10px}

.account-login .member-login .login-form .form-util { left: 422px}

.account-login .nonmember-login { float: right; width: 470px; height: 275px; padding-left: 34px; border-left: 1px solid rgba(48,48,48,0.3)}

.account-login .nonmember-login .login-title .sub-text { right: 0; top: -5px}

.account-login .nonmember-login .login-form { margin-top: 10px}

.account-login .nonmember-login .login-form .form-util { right: 0}

.account-login .nonmember-login .login-form .form-row { padding-bottom: 0}

.account-login .nonmember-login .login-form .form-row .form-title label { margin-top: 13px; margin-bottom: 13px}

.account-login .nonmember-login .login-form .form-row .form-input input { width: 170px; padding: 14px 10px 9px}

.account-login .nonmember-login .agree-box { padding-bottom: 30px; margin-top: -6px}

.account-login .nonmember-login .agree-box .box-title { padding-bottom: 15px; border-bottom: 1px solid rgba(48,48,48,0.3); color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.account-login .nonmember-login .box-wrap { height: 83px; border: solid rgba(48,48,48,0.3); border-width: 1px 0}

.account-login .nonmember-login .box-util { position: relative; padding-top: 10px}

.account-login .nonmember-login .box-util .form-check { position: absolute; right: 0; top: 10px}

.account-login .nonmember-login .box-util .form-check label { font-size: 12px}

.account-login .nonmember-login.agree .login-form { margin-top: 0}

.account-login .nonmember-login.agree .login-form .form-row .form-input input { width: 210px; padding: 14px 10px 9px}

.account-login .nonmember-login.agree .form-util .login-area .btn-login { width: 88px; height: 88px; font-size: 12px; line-height: 88px}

.account-login .member-event { float: right; width: 400px; height: 214px; padding-left: 68px; border-left: 1px solid rgba(48,48,48,0.3)}

.member-event.banner { padding-left: 0; border: 1px solid #979797}

/* .member-event.banner .banner-item { text-align:center } */
/* .member-event.banner .banner-item .title { padding-top:25px; font-size:20px; line-height:26px } */
/* .member-event.banner .banner-item .desc { padding-top:6px; color:#757575; font-size:14px; line-height:20px } */
/* .member-event.banner .banner-item .icon { overflow:hidden; width:46px; height:46px; margin:25px auto 0; border:2px solid #303030; border-radius:50% } */
.member-event.banner .banner-item .icon img { width: 100%}

.member-event.banner .dot-nav { bottom: 20px}

.member-event.bi b { background-color: #303030}

.account-login .account-member { padding-top: 18px; border-top: 1px solid rgba(48,48,48,0.3)}

.account-login .account-member .member-go { padding-top: 0; border-top: 0}

.account-login .member-benefit { float: right; width: 470px}

.member-benefit .benefit-item { float: none; display: table}

.member-benefit .benefit-item + .benefit-item { margin-top: 20px}

.member-benefit .benefit-icon { display: table-cell; width: 95px; vertical-align: middle}

.member-benefit .benefit-icon img { width: 94px}

.member-benefit .benefit-content { display: table-cell; padding-left: 45px; vertical-align: middle}

.member-benefit .benefit-item .stitle, .member-benefit .benefit-item .title { color: #303030; font-family: 'Noto Sans KR'; font-weight: 500; line-height: 24px; } 

.member-benefit .benefit-item .stitle { font-size: 14px}

.member-benefit .benefit-item .title { display: block; font-size: 16px}

.member-benefit .benefit-item .description { color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 24px; font-weight: 300; } 

/* --- Register --- */
.account-register .register-step-item { width: 860px; margin: 0 auto; padding-top: 85px}

.account-register .register-step-item .register-form fieldset + fieldset { padding-top: 60px}

.register-step-item.c { width: 100%}

.register-step-item .agree-box { padding-bottom: 58px}

.register-step-item .agree-box .box-title { padding-bottom: 20px; border-bottom: 1px solid rgba(48,48,48,0.3); color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.register-step-item .box-wrap { height: 299px; border-bottom: 1px solid rgba(48,48,48,0.3)}

.box-wrap { overflow-y: scroll}

.box-wrap .box-inner { color: #303030; font-family: 'Noto Sans KR'}

.box-wrap .box-inner { padding-top: 15px; padding-bottom: 15px}

.box-wrap .box-inner > div:last-child { padding-bottom: 0 !important}

.box-wrap .box-inner .notice { padding-bottom: 20px; font-size: 12px; line-height: 18px}

.box-wrap .box-inner .ftc { padding-top: 10px; padding-bottom: 25px; text-align: center}

.box-wrap .box-inner .ftc .logo { width: 120px; height: 90px; margin: 0 auto}

.box-wrap .box-inner .ftc .logo img { width: 100%}

.box-wrap .box-inner .ftc .title { padding-top: 15px; font-weight: 600}

.box-wrap .box-inner .emphasis { padding-bottom: 25px; font-size: 16px; font-weight: 600; line-height: 28px}

.box-wrap .box-inner .article { line-height: 20px}

.box-wrap .box-inner .article .clause { padding-bottom: 20px}

.box-wrap .box-inner .article .clause:last-child { padding-bottom: 0}

.box-wrap .box-inner .article .c-title { padding-bottom: 8px}

.box-wrap .box-inner .article .gather { padding-bottom: 30px}

.box-wrap .box-inner .article .gather:last-child { padding-bottom: 0}

.box-wrap .box-inner .article p,.box-wrap .box-inner .article li { padding-left: 8px; font-size: 11px; line-height: 22px}

.box-wrap .box-inner .article .g-title { padding-bottom: 8px; padding-left: inherit; font-size: 12px; font-weight: 600; line-height: 18px}

.box-wrap .box-inner .article .g-title:last-child { padding-bottom: 0}

.register-step-item .box-util { padding-top: 38px}

.register-step-item .form-check label { font-size: 12px}

.register-step-item .terms-util { display: block; padding-top: 18px; border-top: 1px solid #303030}

.register-step-item .terms-util .notice { padding-bottom: 35px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.register-step-item .terms-util .form-check label { font-size: 16px}

.register-auth { padding-top: 95px}

.register-auth .auth-box .auth-ipin { display: none}

.register-auth .auth-box.ipin .auth-phone { display: block}

.register-auth .auth-box.ipin .auth-ipin { display: block}

.register-auth .auth-title { padding-bottom: 18px; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.register-auth .auth-desc { padding-bottom: 25px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.account-register .register-auth .radio-item { width: 210px}

.register-auth .form-content.ipin .form-value { width: 466px}

.register-auth .form-content.ipin .form-button { padding-left: 24px}

.register-step-item .register-notice { padding-top: 35px}

.register-step-item .register-notice li { display: block; position: relative; padding-left: 20px; padding-bottom: 8px; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 16px}

.register-step-item .register-notice li b { color: #303030; font-weight: 400}

.register-step-item .register-notice li small { font-size: 11px; line-height: 18px}

.register-step-item .register-notice li::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid rgba(117,117,117,0.6); border-radius: 50%}

.register-step-item .register-step-util { padding-top: 90px}

.register-step-item .register-step-util button { display: inline-block; width: 210px; height: 60px; margin-right: 20px; background-color: #303030; border: 1px solid #303030; color: #fff; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 60px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.register-step-item .register-step-util button:last-child { margin-right: 0}

.register-step-item .register-step-util button:hover { background-color: #fff; color: #303030}

.register-step-item .register-step-util button.b { background-color: #fff; color: #303030}

.register-step-item .register-step-util button.b:hover { background-color: #303030; color: #fff}

.register-step-item .register-step-util a { display: inline-block; width: 208px; height: 58px; margin-right: 20px; background-color: #303030; border: 1px solid #303030; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 58px; cursor: pointer; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

.register-step-item .register-step-util a:last-child { margin-right: 0}

.register-step-item .register-step-util a:hover { background-color: #fff; color: #303030}

.register-step-item .register-step-util a.b { background-color: #fff; color: #303030}

.register-step-item .register-step-util a.b:hover { background-color: #303030; color: #fff}

.join-membership-form .form-row .form-title { width: 160px; text-indent: 10px}

.join-membership-form .form-row .form-notice-check { margin-bottom: -14px}

.join-membership-form .form-row.address { padding-top: 20px; padding-bottom: 0}

.join-membership-form .form-row.address .form-notice { padding-top: 25px}

.join-membership-form .form-row.address .form-input.address input { padding-top: 20px; padding-bottom: 19px}

.account-register .form-content.id .form-button { padding-left: 24px}

.account-register .radio-item { width: 140px}

.form-row .form-content.birth .form-radio { width: 100%}

.form-row .form-content.birth .form-input { width: 210px; padding-left: 24px}

.form-row .form-content.birth .form-input::after { display: block; position: absolute; top: 15px; right: 15px; text-align: right; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.form-row .form-content.birth .form-input.yy { padding-left: 0}

.form-row .form-content.birth .form-input.yy::after { content: '³â'}

.form-row .form-content.birth .form-input.mm::after { content: '¿ù'}

.form-row .form-content.birth .form-input.dd::after { content: 'ÀÏ'}

.form-row .form-content.birth .form-input input { width: 151px; padding-right: 39px}

.form-row .form-notice-check { clear: both; float: left}

.form-row .form-notice-check .form-check { width: 120px; white-space: nowrap}

.form-row .form-notice-check .form-check-note { display: inline-block; vertical-align: top; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px}

.form-row .form-notice { clear: both; float: left; padding-top: 15px; padding-bottom: 15px}

.form-row .form-notice .notice { display: inline-block; position: relative; padding-left: 16px; color: #757575; font-size: 12px; line-height: 20px; white-space: nowrap}

.form-row .form-notice .notice::before { content: '*'; display: block; position: absolute; left: 0}

.account-register .form-row .form-content.forever .form-notice { padding: 0}

.account-register fieldset .form-row:last-child { padding-bottom: 0}

.account-register .complete-welcome { padding-bottom: 100px; text-align: center}

.complete-welcome .logo { overflow: hidden; display: inline-block; width: 260px; height: 198px; background-image: url(/design/sona6769/images/logo.svg); background-size: 260px 198px; text-indent: -9999px}

.complete-welcome .welcome { padding-top: 35px; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; line-height: 36px}

.account-member .member-benefits { float: right; width: 480px}

.member-benefits .benefit-item { padding-bottom: 60px}

.member-benefits .benefit-item:last-child { padding-bottom: 0}

.member-benefits .benefit-item .icon { display: inline-block; width: 90px; height: 90px; vertical-align: top}

.member-benefits .benefit-item .icon img { width: 100%}

.member-benefits .benefit-item .info { display: inline-block; width: 300px; padding-left: 50px; vertical-align: top}

.member-benefits .benefit-item .info .number { color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.member-benefits .benefit-item .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; line-height: 22px}

.member-benefits .benefit-item .info .desc { color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.account-register .member-go .member-title { font-size: 20px; font-weight: 600; line-height: 30px}

.account-register .member-go .link { padding-top: 16px}

.account-register .member-go .member-avail { padding-top: 50px}

.kakaotalk-banner { position: relative; height: 200px; background-color: #fbe300}

.kakaotalk-banner .banner-text { padding-top: 133px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

/* --- Search --- */
#search .component { padding-top: 35px; padding-bottom: 200px}

#search form { display: inline-block; position: relative; width: 540px; height: 59px; margin-top: 65px; margin-left: 280px}

#search form .search-field { display: block; width: 440px; height: 50px; margin: 0; padding: 2px 80px 5px 20px; background-color: transparent; border: none; outline: none; border-bottom: 1px solid #303030; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; letter-spacing: -0.8px; line-height: 36px}

#search form .btn-search { overflow: hidden; display: block; position: absolute; top: 9px; right: 20px; width: 40px; height: 40px; margin: 0; padding: 0; text-indent: -9999px}

#search form .btn-search span { display: block; position: absolute; width: 32px; height: 34px; top: 3px; left: 4px; background-image: url(/design/sona6769/images/search-bar.svg); background-size: 32px 34px}

#search form .re-search { position: absolute; left: 50%; top: 18px; margin-left: -380px; font-size: 14px; color: #757575}

#search .product-list-view .result { border-bottom: 1px solid rgba(48,48,48,0.3); font-size: 16px}

#today-goods .search-list-wrap { padding-top: 0}

.search-list-wrap { position: relative; padding-top: 70px}

.search-list-wrap .wish-list-table { table-layout: fixed; width: 100%}

/* .search-list-wrap .wish-list-table thead th { padding-bottom:25px } */
.search-list-wrap .wish-list-table thead th.wish { text-align: center}

.search-list-wrap .wish-list-table tbody td { border: solid #ddd; border-width: 1px 0; height: 154px; padding: 0 !important}

.search-list-wrap .wish-list-table tbody tr:last-child td { padding-bottom: 50px}

.search-list-wrap .wish-list-table td.product { text-align: left}

.search-list-wrap .wish-list-table .info p.feature { padding-bottom: 10px; font-weight: 600; color: #757575; font-size: 14px}

.search-list-wrap .wish-list-table .info .option { padding-top: 15px}

.search-list-wrap .wish-list-table tbody .wish .btn-wish { display: inline-block; width: 88px; height: 33px; margin: 0; padding: 0; background-color: #fff; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 33px}

#today-goods .search-list-wrap .wish-list-table.board-table thead th:nth-child(2) { text-align: left}

#today-goods .search-list-wrap .wish-list-table.board-table tbody td:nth-child(2) { text-align: left}

.search-list-wrap .wish-list-table.board-table thead th:nth-child(2) { text-align: center}

.search-list-wrap .wish-list-table.board-table tbody td:nth-child(2) { text-align: center}

.search-list-wrap .wish-list-table tbody .wish .btn-wish span { display: inline-block; vertical-align: top}

.search-list-wrap .wish-list-table tbody .wish .btn-wish:hover { background-color: #303030; color: #fff}

.search-list-wrap .wish-list-table.board-table tbody .review .count,.wish-list-table.board-table tbody .review .unit { font-size: 14px; line-height: 20px}

.search-list-wrap .wish-list-table.board-table tbody .price .unit { padding-top: 0; padding-left: 4px}

.search-list-wrap .review .count,.search-list-wrap .price .amount { position: relative; top: 2px; display: inline-block; vertical-align: top; font-family: 'Noto Sans KR'}

#search .product-list-view { position: relative; width: 1098px; padding-top: 50px; padding-right: 1px; padding-left: 1px}

#search .product-list-view .product-filter { position: absolute; top: 50px; right: 0}

#search .product-list-view .product-filter li { display: inline-block; margin-right: 20px}

#search .product-list-view .product-filter li:last-child { margin-right: 0}

#search .product-list-view .product-filter li b,#search .product-list-view .product-filter li a { display: block; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

#search .product-list-view .product-filter li a { -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

#search .product-list-view .product-filter li a:hover { color: #303030}

#search .product-list-view .product-filter li b.is-selected { color: #303030}

#search .product-list-view .product-list .product-item { margin-right: 86px}

#search .product-list-view .product-list .product-item:last-child { margin-right: 0}

#search .product-list-view .search-none { padding-top: 120px; padding-bottom: 15px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px}

/* --- Brand Story --- */
.brand-story-top { overflow: hidden; position: relative; width: 100%; height: 420px}

.brand-story-top .image-area { position: absolute; top: 0; left: 0; width: 100%}

.brand-story-top .image-area img { width: 100%}

.brand-story-top .text-area { position: relative; height: 100%; color: #fff; font-weight: 600}

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

.brand-story-top .text-area .title { display: block; padding-top: 40px; font-family: 'Noto Sans KR'; font-size: 43px; line-height: 72px; font-weight: 500; } 

.brand-story-top .text-area .title span.line { display: inline-block; position: relative; width: 70px; margin-left: 30px; vertical-align: top}

.brand-story-top .text-area .title span.line::before { content: ''; display: block; position: absolute; top: 50%; width: 70px; height: 0; margin-top: -4px; border-bottom: 8px solid #fff}

.brand-story-top .text-area .title-en { display: block; padding-top: 55px; padding-bottom: 35px; text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px; opacity: 0.8; font-weight: 400; } 

.zero-margin { padding-top: 120px}

.zero-margin .zero { position: absolute; width: 460px; height: 280px; margin-top: 10px}

.zero-margin .zero .number { display: inline-block; width: 189px}

.zero-margin .zero .number img { width: 100%}

.zero-margin .zero .text { position: relative; bottom: 22px; display: inline-block; vertical-align: bottom; color: #303030; font-family: 'Noto Sans KR'; font-size: 42px; font-weight: 600}

.zero-margin .info { padding-left: 610px}

.zero-margin .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 51px}

.zero-margin .info .title_2 { color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 51px; text-align: center}

.one-stop-content { position: relative; padding-top: 30px}

.one-stop-content .info .title { text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 400; line-height: 48px; text-align: center}

.one-stop-content .info .desc { padding-top: 30px; color: 000; font-family: 'Noto Sans KR'; font-size: 18px; letter-spacing: 0.5px; line-height: 31px; text-align: center; font-weight: 300; } 

.one-stop-content .info .s-desc { padding-top: 35px; font-size: 14px; line-height: 28px}

.one-stop-content .icon { position: absolute; top: 60px; right: 0}

.one-stop-content .icon span { display: block; width: 191px; height: 208px; background-image: url(/design/sona6769/images/process.png); background-size: 191px 208px}

.one-stop-pride { position: relative; padding-top: 55px}

.one-stop-pride::after { content: ''; display: block; position: relative; clear: both}

.one-stop-pride .pride-item { float: left; width: 210px; margin-right: 70px}

.one-stop-pride .pride-item:last-child { margin-right: 0}

.one-stop-pride .pride-item .number { width: 100%; padding-bottom: 14px; border-bottom: 4px solid #303030}

.one-stop-pride .pride-item .number span { display: inline-block; font-family: 'Noto Sans KR'; font-size: 42px; font-weight: 500; letter-spacing: -1px; line-height: 48px; } 

.one-stop-pride .pride-item .title { height: 65px; padding-top: 22px; padding-bottom: 36px; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; letter-spacing: 1px; line-height: 36px; } 

.one-stop-pride .pride-item .title-en { position: relative; padding-top: 30px; text-transform: uppercase; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; letter-spacing: 1.5px; line-height: 19px; white-space: nowrap; font-weight: 300; } 

.one-stop-pride .pride-item .title-en::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 50px; height: 0; border-bottom: 2px solid #999}

.features .best-present { position: relative; padding-top: 200px}

.features .best-present .figure { position: absolute; width: 420px; height: 420px; margin-top: 30px}

.features .best-present .figure img { width: 100%}

.features .best-present .info { text-align: right}

.features .best-present .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; letter-spacing: -0.5px; line-height: 53px; } 

.features .best-present .info .title span.line { display: inline-block; position: relative; width: 65px; margin-right: 30px; vertical-align: top}

.features .best-present .info .title span.line::before { content: ''; display: block; position: absolute; top: 50%; width: 65px; height: 0; margin-top: -2px; border-bottom: 4px solid #303030}

.features .best-present .info .desc { padding-top: 55px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px; font-weight: 300; } 

.features .feature-list { padding-top: 100px; padding-bottom: 110px}

.features .feature-list .feature-item { position: relative; padding-bottom: 90px}

.features .feature-list .feature-item:last-child { padding-bottom: 0}

.features .feature-list .feature-item .number { position: absolute; top: 0; margin-top: -30px; color: #303030; font-family: 'Noto Sans KR'; font-size: 240px; font-weight: 600; line-height: 240px}

.features .feature-list .feature-item .feature { display: inline-block; width: 750px; padding-bottom: 40px; color: #303030; font-family: 'Noto Sans KR'; font-size: 46px; font-weight: 500; line-height: 52px; } 

.features .feature-list .feature-item .info { display: inline-block; width: 750px; padding-top: 35px; border-top: 1px solid rgba(48,48,48,0.3); font-family: 'Noto Sans KR'}

.features .feature-list .feature-item .info .title { color: #303030; font-size: 20px; font-weight: 500; line-height: 26px; } 

.features .feature-list .feature-item .info .desc { padding-top: 18px; color: #000; font-size: 14px; line-height: 22px; font-weight: 300; } 

.features .feature-list .feature-item .info .desc em { color: #303030; font-style: normal}

.features .feature-list .feature-item:nth-child(odd) .number { right: 0}

.features .feature-list .feature-item:nth-child(odd) .feature { text-align: right}

.features .feature-list .feature-item:nth-child(even) .number { left: 0}

.features .feature-list .feature-item:nth-child(even) { text-align: right}

.features .feature-list .feature-item:nth-child(even) .feature { text-align: left}

.natural-brand { overflow: hidden; position: relative; width: 100%; height: 430px}

.natural-brand .image-area { position: absolute; top: 0; left: 0; width: 100%}

.natural-brand .image-area img { width: 100%}

.natural-brand .text-area { position: relative; height: 100%; color: #fff}

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

.natural-brand .text-area .title { font-family: 'Nanum Myeongjo'; font-size: 24px; font-weight: 500; line-height: 45px; } 

.natural-brand .text-area .desc { padding-top: 25px; padding-bottom: 10px; font-family: 'Noto Sans KR'; font-size: 16px; letter-spacing: 1px; line-height: 22px; font-weight: 300; } 

.stories { padding-top: 95px; padding-bottom: 135px}

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

.stories .story-item { float: left; width: 330px; margin-right: 55px; text-align: center}

.stories .story-item:last-child { margin-right: 0}

.stories .story-item .brand .logo { display: block; position: relative; width: 100%; height: 50px; text-align: center}

.stories .story-item .brand .logo span { overflow: hidden; display: inline-block; text-indent: -9999px}

.stories .story-item .brand.so-natural .logo span { width: 140px; height: 49px; background-image: url(/design/sona6769/images/logo-sonatural.svg); background-size: 140px 49px}

.stories .story-item .brand.so-vegan .logo span { width: 200px; height: 50px; background-image: url(/design/sona6769/images/logo-sovegan.png); background-size: 200px 50px}

.stories .story-item .brand.powder-4-room .logo span { width: 205px; height: 34px; margin-top: 8px; background-image: url(/design/sona6769/images/logo-powder4room.png); background-size: 205px 34px}

.stories .story-item .brand .use { padding-top: 15px; text-transform: uppercase; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; letter-spacing: 1px; line-height: 18px}

.stories .story-item .product { width: 100%; padding-top: 35px}

.stories .story-item .product img { width: 100%}

.stories .story-item .desc { padding-top: 35px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.stories .story-item .link { padding-top: 35px}

.stories .story-item .link a.btn-brand { display: inline-block; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 24px; } 

.stories .story-item .link a.btn-brand span { display: inline-block; vertical-align: top}

.stories .story-item .link a.btn-brand span.arrow { display: inline-block; position: relative; width: 24px; height: 24px; margin-left: 8px; border-radius: 50%}

.stories .story-item .link a.btn-brand span.arrow:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/design/sona6769/images/arrow_g.svg); background-size: 24px}

.history { overflow: hidden; position: relative; width: 100%}

.history .image-area { position: absolute; top: 0; left: 0; width: 100%}

.history .image-area img { width: 100%}

.history .text-area { position: relative; color: #fff}

.history .text-area .major-title.w { padding-top: 140px; color: #fff; font-family: 'Noto Sans KR'; font-weight: 600; letter-spacing: 1px; } 

.history .text-area ul { padding-top: 85px; padding-bottom: 195px}

.history .text-area li { display: block; padding-bottom: 45px}

.history .text-area li:last-child { padding-bottom: 0}

.history .text-area li>p { display: inline-block; vertical-align: top}

.history .text-area li .yy { width: 330px; font-family: 'Noto Sans KR'; font-size: 46px; letter-spacing: 1.5px; line-height: 52px; font-weight: 300; } 

.history .text-area li .info { font-family: 'Noto Sans KR'}

.history .text-area li .info span { display: block}

.history .text-area li .info .title { padding-top: 10px; text-transform: uppercase; font-size: 20px; font-weight: 500; line-height: 31px; white-space: nowrap; } 

.history .text-area li .info .title b { text-transform: none; font-weight: 400}

.history .text-area li .info .desc { padding-top: 10px; font-size: 14px; line-height: 19px}

.brand-define { position: relative; padding-top: 130px}

.brand-define .info .logo { position: relative; margin: 0 auto}

.brand-define .info .logo img { width: 100%}

.brand-define .info .title { text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 42px; font-weight: 800; letter-spacing: 1px; line-height: 48px}

.brand-define .info .desc { padding-top: 30px; color: #000; text-align: center; font-family: 'Noto Sans KR'; font-size: 18px; letter-spacing: 0.5px; line-height: 32px; font-weight: 300; } 

.brand-define .info .desc-ko,.brand-define .info .desc-en { text-align: center; text-transform: uppercase; color: #757575; font-size: 18px; font-weight: 500; line-height: 32px; } 

.brand-define .info .desc-ko { font-family: 'Noto Sans KR'; font-size: 22px}

.brand-define .info .desc-en { color: #303030; font-family: 'Noto Sans KR'; letter-spacing: 0.5px}

.brand-define .info .desc em { color: #303030; font-weight: 500; font-style: normal; } 

.brand-define .logo { position: absolute; top: 0; right: 0; width: 330px; margin-top: -15px}

.brand-define .logo span { overflow: hidden; display: inline-block; width: 330px; text-indent: -9999px}

.brand-define.so-natural .info .logo { width: 638px}

.brand-define.so-natural .info .desc { padding-top: 40px}

.brand-define.so-natural .logo span { height: 250px; background-image: url(/design/sona6769/images/brand-logo-so-natural.png); background-size: 330px 250px}

.brand-define.the-pure { padding-top: 120px}

.brand-define.the-pure .info .logo { width: 468px}

.brand-define.the-pure .logo span { height: 81px; margin-top: 70px; background-image: url(/design/sona6769/images/brand-logo-the-pure.png); background-size: 330px 81px}

.brand-define.the-pure .info .desc-ko { padding-top: 15px; color: #347d58}

.brand-define.powder-4-room { padding-top: 120px}

.brand-define.powder-4-room .info .logo { width: 699px}

.brand-define.powder-4-room .logo span { height: 54px; margin-top: 58px; background-image: url(/design/sona6769/images/brand-logo-powder4room.png); background-size: 330px 54px}

.brand-define.powder-4-room .info .desc-ko { padding-top: 25px; color: #333}

.brand-define.powder-4-room .info .desc-en { padding-top: 8px; font-size: 22px; color: #7bc142}

.natural-force { position: relative; padding-top: 110px}

.natural-force .force-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; letter-spacing: -0.5px; line-height: 36px; } 

.natural-force .force-list { padding-top: 60px}

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

.natural-force .force-list .force-item { position: relative; float: left; width: 330px; margin-right: 55px; color: #303030; font-family: 'Noto Sans KR'}

.natural-force .force-list .force-item::before { content: ''; display: block; position: absolute; top: 14px; left: 0; width: 100%; height: 0; border-bottom: 2px solid rgba(48,48,48,0.3)}

.natural-force .force-list .force-item:last-child { margin-right: 0}

.natural-force .force-item .sort { display: inline-block; position: relative; min-width: 190px; background-color: #fff; font-size: 30px; font-weight: 500; letter-spacing: 1px; line-height: 36px; } 

.natural-force .force-item .title { padding-top: 17px; font-size: 46px; font-weight: 500; line-height: 52px; } 

.natural-force .force-item .desc { padding-top: 43px; color: #000; font-size: 14px; line-height: 22px; font-weight: 300; } 

.philosophy .philosophy-info { padding-top: 100px; text-align: center}

.philosophy .philosophy-info .title { text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; letter-spacing: 1px; line-height: 36px; } 

.philosophy .philosophy-info .title span { display: inline-block}

.philosophy .philosophy-info .title span.light { font-weight: 600; } 

.philosophy .philosophy-info .title span.plus { position: relative; width: 22px; height: 36px; margin-right: 8px; margin-left: 8px}

.philosophy .philosophy-info .title span.plus::before { content: ''; position: absolute; top: 50%; left: 0; width: 22px; height: 0; margin-top: -2px; border-bottom: 4px solid #303030}

.philosophy .philosophy-info .title span.plus::after { content: ''; position: absolute; top: 7px; left: 50%; width: 0; height: 22px; margin-left: -2px; border-left: 4px solid #303030}

.philosophy .philosophy-info .title-en { padding-top: 12px; text-transform: uppercase; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; letter-spacing: 1.5px; line-height: 20px; font-weight: 300; } 

.philosophy .philosophy-info .desc { padding-top: 38px; color: #000; font-family: 'Noto Sans KR'; font-size: 20px; letter-spacing: -0.5px; line-height: 26px; font-weight: 300; } 

.philosophy .philosophy-list { padding-top: 60px}

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

.philosophy .philosophy-list .philosophy-item { float: left; width: 330px; margin-right: 55px}

.philosophy .philosophy-list .philosophy-item:last-child { margin-right: 0}

.philosophy .philosophy-item .figure { width: 100%}

.philosophy .philosophy-item .figure img { width: 100%}

.philosophy .philosophy-item .info { padding-top: 40px}

.philosophy .philosophy-item .info .title { text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; line-height: 26px; } 

.philosophy .philosophy-item .info .desc { padding-top: 20px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px; font-weight: 300; } 

.natural-keyword { position: relative; padding-top: 100px; padding-bottom: 200px}

.natural-keyword .keyword { position: absolute; top: 0; left: 50%; width: 100px; margin-left: -50px; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 120px; font-weight: 600; line-height: 126px; } 

.natural-keyword .keyword span { display: block}

.natural-keyword .keyword-item { clear: both; width: 420px; padding-bottom: 34px}

.natural-keyword .keyword-item.f { padding-top: 15px}

.natural-keyword .keyword-item:nth-child(even) { float: right; text-align: right}

.natural-keyword .keyword-item:nth-child(odd) { float: left}

.natural-keyword .keyword-item:last-child { padding-bottom: 0}

.natural-keyword .keyword-item .title { padding-bottom: 11px; border-bottom: 1px solid #303030; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 600; line-height: 30px; } 

.natural-keyword .keyword-item .desc { padding-top: 30px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; color: #000; font-weight: 300; } 

.for-skin { overflow: hidden; position: relative; width: 100%; height: 430px}

.for-skin .image-area { position: absolute; top: 0; left: 0; width: 100%}

.for-skin .image-area img { width: 100%}

.for-skin .text-area { position: relative; height: 100%; color: #fff}

.for-skin .text-area .component { height: 100%}

.for-skin .text-area .title { font-family: 'Nanum Myeongjo'; font-size: 24px; font-weight: 500; line-height: 45px; } 

.naturalism { position: relative; padding-top: 60px; text-align: center}

.naturalism .figure { display: inline-block; width: 240px; height: 168px}

.naturalism .figure img { width: 100%}

.naturalism .title { padding-top: 30px; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 36px}

.naturalism .desc { padding-top: 37px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px}

.naturalism .desc-en { padding-top: 17px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 22px}

.philosophy-six { padding-top: 75px}

.philosophy-six::after { content: ''; display: block; position: relative; clear: both}

.philosophy-six .keywords { float: left; width: 446px; height: 498px; margin-top: -19px}

.philosophy-six .keywords img { width: 100%}

.philosophy-six .keyword-list { float: right; width: 560px}

.philosophy-six .keyword-list .keyword-item { float: left; width: 140px; margin-right: 70px; margin-bottom: 130px}

.philosophy-six .keyword-list .keyword-item:nth-child(3n),.philosophy-six .keyword-list .keyword-item:last-child { margin-right: 0}

.philosophy-six .keyword-list .keyword-item:nth-child(3n+1):nth-last-child(-n+3),.philosophy-six .keyword-list .keyword-item:nth-child(3n+1):nth-last-child(-n+3) ~ .keyword-item { margin-bottom: 0}

.philosophy-six .keyword-item .title { padding-bottom: 15px; border-bottom: 1px solid #757575; color: #303030; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 600; line-height: 30px}

.philosophy-six .keyword-item .title span { display: block}

.philosophy-six .keyword-item .title span.en { padding-top: 4px; text-transform: uppercase; color: #757575; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px}

.philosophy-six .keyword-item .desc { padding-top: 15px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px; white-space: nowrap}

.perfume { position: relative; padding-top: 100px}

.perfume .perfume-info .title { text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 800; letter-spacing: 1px; line-height: 36px}

.perfume .perfume-info .desc { padding-top: 25px; color: #757575; font-family: 'Noto Sans KR'; font-size: 20px; letter-spacing: -0.5px; line-height: 26px}

.perfume-list { position: relative; padding-top: 55px}

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

.perfume-list .perfume-item { float: left; width: 330px; margin-right: 55px}

.perfume-list .perfume-item:last-child { margin-right: 0}

.perfume-list .perfume-item .title { position: relative; padding-bottom: 22px; border-bottom: 4px solid #303030; color: #303030}

.perfume-list .perfume-item .title span { display: inline-block; font-family: 'Noto Sans KR'; font-size: 46px; font-weight: 600; line-height: 52px}

.perfume-list .perfume-item .title span.en { position: absolute; right: 0; bottom: 12px; text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 16px; letter-spacing: 1px; line-height: 22px}

.perfume-list .perfume-item .words { padding-top: 35px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; letter-spacing: 0.5px; line-height: 20px}

.perfume-list .perfume-item .desc { padding-top: 12px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px}

.essential { position: relative; padding-top: 40px; padding-bottom: 120px}

.essential .word { position: absolute; top: 0; left: 0; margin-left: -25px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 290px; font-weight: 800; line-height: 290px}

.essential .info { padding-top: 35px; text-align: right}

.essential .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 600; letter-spacing: -0.5px; line-height: 53px}

.essential .info .title span.en { font-family: 'Noto Sans KR'; font-weight: 800}

.essential .info .title span.line { display: inline-block; position: relative; width: 65px; margin-right: 30px; vertical-align: top}

.essential .info .title span.line::before { content: ''; display: block; position: absolute; top: 50%; width: 65px; height: 0; margin-top: -2px; border-bottom: 4px solid #303030}

.essential .info .desc { padding-top: 30px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px}

.rooms { position: relative}

/* .rooms .number { position:absolute; top:0; left:0; margin-top:-15px; font-family:'Noto Sans KR'; font-size:445px; font-weight:600; line-height:445px } */
.rooms .info { padding-top: 45px; text-align: right}

.rooms .info .title { text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; letter-spacing: -0.5px; line-height: 53px; } 

.rooms .info .desc { padding-top: 15px; text-align: center; color: #000; font-family: 'Noto Sans KR'; font-size: 13px; line-height: 19px; font-weight: 300; } 

.rooms .info .desc em { display: inline-block; padding: 0 4px; font-style: normal; text-decoration: underline}

/* .rooms ul { padding-top:95px; text-align:right } */
/* .rooms li { display:inline-block; position:relative; margin-right:60px; padding-top:30px } 
.rooms li::before { content:''; display:block; position:absolute; top:0; left:50%; width:12px; height:12px; margin-left:-6px; background-color:#303030; border-radius:50% } 
.rooms li:last-child { margin-right:0 } 
.rooms li span { text-transform:uppercase; color:#303030; font-family:'Noto Sans KR'; font-size:14px; font-weight:600; letter-spacing:0.9px; line-height:20px } */
.room-style { position: relative; padding-top: 60px; padding-bottom: 110px}

.room-style::after { content: ''; display: block; position: relative; clear: both}

.room-style .style-item { float: left; width: 210px; margin-right: 70px}

.room-style .style-item:last-child { margin-right: 0}

.room-style .style-item .sort { text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 500; letter-spacing: -0.6px; line-height: 30px; } 

.room-style .style-item .word { padding-top: 4px; padding-bottom: 15px; border-bottom: 4px solid #303030; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; letter-spacing: -0.4px; line-height: 22px; } 

.room-style .style-item .figure { width: 100%; padding-top: 18px}

.room-style .style-item .figure img { width: 100%}

.room-style .style-item .title { padding-top: 20px; padding-bottom: 25px; color: #303030; font-family: 'Noto Sans KR'; font-size: 30px; font-weight: 500; letter-spacing: 1px; line-height: 36px; } 

.room-style .style-item .desc { padding-top: 30px; position: relative; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.room-style .style-item .desc::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 50px; height: 0; border-bottom: 2px solid #999}

/* --- CS Center --- */
.board .board-table thead th:last-child { text-align: right}

.board .board-table tbody tr.notice-pin td .subject { font-weight: 500; } 

.board .board-table tbody tr.notice-pin td,.board .board-table tbody tr.notice-pin td a { color: #dd426f}

.board .board-table tbody tr.notice-pin td a { font-weight: 500; } 

.board .board-table tbody tr.notice-pin td .date { color: #000}

.board .board-table tbody td:last-child { text-align: right}

.notice-board.board .board-paddle-nav { padding-top: 90px}

.notice-board.board .board-search-bar { padding-top: 90px}

.board-search-bar { text-align: center}

.board-search-bar .form-search { display: inline-block; width: 540px; padding-bottom: 0}

.board-search-bar .form-search .form-select select { width: 120px; padding-right: 20px}

.board-search-bar .form-search .form-input { width: 300px}

.board-search-bar .form-search .form-input input { width: 260px}

.board-search-bar .form-search .form-button,.board-search-bar .form-search .form-button .btn-search { width: 120px}

.form-row.form-search .form-input input:focus { border-color: rgba(48,48,48,0.3)}

.notice-board { padding-top: 50px}

.notice-board .board-view { padding-top: 50px}

.notice-board .board-view .board-head { border-bottom: 1px solid rgba(48,48,48,0.3)}

.notice-board .board-head { display: table; width: 100%; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(48,48,48,0.3); color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

.notice-board .board-summary { display: table; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.notice-board .board-head p,.notice-board .board-summary p { display: table-cell; text-align: left; vertical-align: top}

.notice-board .sort,.notice-board .number { width: 140px}

.notice-board .title { width: 800px}

.notice-board .date { width: 160px; text-align: right !important}

.notice-board .date span { display: inline-block; width: 70px; text-align: center}

.notice-board .board-summary .title { font-weight: 500; } 

.notice-board .board-summary .date { font-family: 'Noto Sans KR'}

.notice-board .board-content { position: relative; padding-top: 55px; padding-left: 140px; border-top: 1px solid rgba(48,48,48,0.3); color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.notice-board .board-content::before { content: ''; display: block; position: absolute; top: 60px; left: 0; width: 46px; height: 0; border-top: 1px solid #303030}

/* .notice-board .board-content p { padding-bottom:15px } */
.notice-board .board-content p:last-child { padding-bottom: 0}

.notice-board .board-util { text-align: right}

.notice-board .board-util { padding-left: 140px; text-align: left}

.notice-board .board-util a { display: inline-block; width: 118px; height: 48px; margin-right: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.notice-board .board-util a:hover { background-color: #fff; color: #303030}

.notice-board .board-util + .board-paddle-post { padding-top: 30px}

.board-paddle-post .nav-post { padding-top: 30px; padding-bottom: 30px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.board-paddle-post .nav-post.next-post { border-bottom: 1px solid rgba(48,48,48,0.3)}

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

.board-paddle-post .nav-post .name { width: 140px; text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; letter-spacing: 1.5px; } 

.board-paddle-post .nav-post .title { width: 960px; color: #757575}

.board-paddle-post .nav-post .title a { display: inline-block; color: #000; -webkit-transition: color 180ms ease-in-out; font-weight: 300; } 

.board-paddle-post .nav-post .title a:hover { color: #303030}

.content .terms { padding-top: 40px; font-weight: 300; color: #000; } 

.terms .term-item { padding-bottom: 90px}

.terms .term-item:last-child { padding-bottom: 0}

.term-item .term-title { padding-bottom: 30px; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.term-item .info .title { padding-bottom: 15px; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px}

.term-item .info .desc { padding-bottom: 30px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; } 

.term-item .info .desc:first-child { padding-bottom: 25px; color: #000; font-size: 16px; line-height: 22px; } 

.term-item .info:last-child .title:last-child { padding-bottom: 0}

.term-item .info:last-child .desc:not(:first-child) { padding-bottom: 0}

.term-item .info .term-list { padding-bottom: 30px}

.term-item .info:last-child .term-list { padding-bottom: 0}

.term-item .info .term-list li { position: relative; padding-bottom: 10px; padding-left: 50px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; } 

.term-item .info .term-list li:last-child { padding-bottom: 0}

.term-item .info .term-list li::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid rgba(117,117,117,0.6); border-radius: 50%}

.term-item .info .term-list li .case { display: block; padding-bottom: 8px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; } 

.term-item .info .info-list { padding-bottom: 30px}

.term-item .info .info-list li { padding-bottom: 15px}

.term-item .info .info-list li p,.term-item .info .info-list li span { display: inline-block; vertical-align: top}

.term-item .info .info-list li .name { width: 190px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; } 

.term-item .info .info-list li .explains,.term-item .info .info-list li .explain { width: 910px}

.term-item .info .info-list li .explain { color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; } 

.term-item .info .info-list li .explains .explain { padding-bottom: 8px}

.term-item .info .info-list li .explains .explain:last-child { padding-bottom: 0}

.term-item .info a { display: inline-block; color: #000; vertical-align: baseline; } 

.term-item .info a:hover { color: #303030}

.consult .consult-menu { padding-top: 80px}

.consult .sub-menu { padding-top: 50px}

.consult .faq-board { padding-top: 55px}

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

.list-board.nb .board-row { border-bottom: none}

.list-board .board-row.is-selected .summary { margin-top: -1px; border-top: 1px solid #303030}

.list-board .board-row.is-selected { border-color: #303030}

.list-board .summary { position: relative; width: 100%; padding-top: 20px; padding-bottom: 20px}

.list-board .summary .title { color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.list-board .board-row.is-selected .summary .title { color: #303030}

.list-board .summary .arrow { position: absolute; top: 21px; right: 0; width: 18px; height: 18px; background-image: url(/design/sona6769/images/select-arrow.svg); background-size: 18px; opacity: 0.3}

.list-board .board-row.is-selected .summary .arrow { opacity: 1.0; -webkit-transform: rotate(-180deg)}

.list-board .view { display: none}

.list-board .board-row.is-selected .view { display: block}

.list-board .view .answer { padding-top: 20px; padding-bottom: 55px}

.list-board .view .answer .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.list-board .view .answer .desc { padding-top: 20px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.consult-wanna { padding-top: 55px; text-align: center}

.consult-wanna .desc { color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 500; line-height: 24px; } 

.consult-wanna .link { padding-top: 45px}

.consult-wanna .link a { display: inline-block; width: 258px; height: 58px; background-color: #303030; border: 1px solid #303030; color: #fff; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.consult-wanna .link a:hover { background-color: #fff; color: #303030}

.consult-content .board { padding-top: 90px}

.consult-content .board .board-paddle-nav { position: relative; padding-top: 90px}

.consult-content .board .board-side-util { position: absolute; right: 0; height: 50px; margin-top: -35px}

.consult-content .board .board-side-util button { width: 120px; height: 50px; background-color: #fff; border: 1px solid #303030; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.consult-content .board .board-side-util button:hover { background-color: #303030; color: #fff}

.consult-content .board .board-side-util a { display: inline-block; width: 118px; height: 48px; background-color: #fff; border: 1px solid #303030; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.consult-content .board .board-side-util a:hover { background-color: #303030; color: #fff}

.consult-content .board-search-bar { padding-top: 90px}

.consult-content .board .board-table td .reply,.consult-content .board .board-table td a { display: inline-block; vertical-align: top}

.consult-content .board .board-table td .reply { padding-right: 45px; color: #303030; font-weight: 600}

.consult-content .board .board-table td .reply + a { color: #303030}

.consult-content .board.qna-board .board-table thead th:nth-child(3) { text-align: center}

.consult-content .board.qna-board .board-table tbody td:nth-child(3) { text-align: center}

.consult-content .board.private-board .board-table thead th:nth-child(3) { text-align: right}

.consult-content .board.private-board .board-table tbody td:nth-child(3) { text-align: right}

.consult-content .board .board-table th .writer { display: inline-block; width: 50px; text-align: center}

.consult-content .board .board-table td .writer { display: inline-block}

.consult-content .board .board-table td .writer.admin { width: 50px}

.consult-content .board .board-table td .writer.admin .logo { overflow: hidden; display: block; width: 50px; height: 18px; margin-top: 1px; background-image: url(/design/sona6769/images/logo-admin.svg); background-size: 50px 18px; text-align: left; text-indent: -9999px}

.consult-content .board .board-table td .writer span { display: inline-block}

.consult-content .board .board-table td .writer span.grade { margin-right: 20px; margin-left: 0}

.consult-content .board .board-table td .writer .name { min-width: 50px; text-align: center}

.consult-content .board .board-view .board-head { display: table; width: 100%; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(48,48,48,0.3); border-bottom: 1px solid rgba(48,48,48,0.3); color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

.consult-content .board .board-view .board-head>p { display: table-cell}

.consult-content .board .board-view .status,.consult-content .board .board-view .number { width: 140px}

.consult-content .board .board-view .number { font-family: 'Noto Sans KR'}

.consult-content .board .board-view .title { width: 600px}

.consult-content .board .board-view .writer { width: 180px; text-align: right}

.consult-content .board .board-view .writer b { font-weight: 400}

.consult-content .board .board-view .date { width: 180px; text-align: right}

.consult-content .board .board-view .board-head .writer span { display: inline-block; width: 50px; text-align: center}

.consult-content .board .board-view .board-head .date span { display: inline-block; width: 70px; text-align: center}

.consult-content .board .board-view .board-summary { display: table; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.consult-content .board .board-view .board-summary>p { display: table-cell}

.consult-content .board .board-view .board-summary .title { font-weight: 500; } 

.consult-content .board .board-view .board-summary .title span { display: inline-block; vertical-align: top}

.consult-content .board .board-view .board-summary .title .reply { padding-right: 45px; color: #303030}

.consult-content .board .board-view .board-summary .writer b { display: inline-block}

.consult-content .board .board-view .board-summary .writer.admin b { width: 50px}

.consult-content .board .board-view .board-summary .writer.admin .logo { overflow: hidden; display: block; width: 50px; height: 18px; margin-top: 1px; background-image: url(/design/sona6769/images/logo-admin.svg); background-size: 50px 18px; text-align: left; text-indent: -9999px}

.consult-content .board .board-view .board-summary .writer span.grade { margin-right: 20px; margin-left: 0}

.consult-content .board .board-view .board-summary .writer .name { display: inline-block; min-width: 50px; text-align: center}

.consult-content .board .board-view .board-summary .date { font-family: 'Noto Sans KR'}

.consult-content .board .board-content { position: relative; padding-top: 55px; padding-left: 140px; border-top: 1px solid rgba(48,48,48,0.3); color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; font-weight: 300; } 

.consult-content .board .board-content::before { content: ''; display: block; position: absolute; top: 60px; left: 0; width: 46px; height: 0; border-top: 1px solid #303030}

.consult-content .board .board-content p { padding-bottom: 15px}

.consult-content .board .board-content p:last-child { padding-bottom: 0}

.consult-content .board .board-util { padding-left: 140px}

.consult-content .board .board-util::after { content: ''; display: block; position: relative; clear: both}

.consult-content .board .board-util .edit-area { float: left}

.consult-content .board .board-util .util-area { float: right}

.consult-content .board .board-util .edit-area button { display: inline-block; width: 70px; height: 50px; margin-right: 10px; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.consult-content .board .board-util .edit-area button:last-child { margin-right: 0}

.consult-content .board .board-util .edit-area button.w { background-color: #fff; color: #303030}

.consult-content .board .board-util .edit-area button:hover { background-color: #fff; color: #303030}

.consult-content .board .board-util .edit-area button.w:hover { background-color: #303030; color: #fff}

.consult-content .board .board-util a { display: inline-block; width: 118px; height: 48px; margin-right: 10px; padding: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.consult-content .board .board-util a:last-child { margin-right: 0}

.consult-content .board .board-util a.w { background-color: #fff; color: #303030}

.consult-content .board .board-util a:hover { background-color: #fff; color: #303030}

.consult-content .board .board-util a.w:hover { background-color: #303030; color: #fff}

.consult-content .board .board-util + .board-paddle-post { padding-top: 30px}

.consult-board.consult .board-write { padding-top: 90px}

.consult-board.consult .form-row { padding-bottom: 0}

.consult-board.consult .form-row.content { padding-top: 20px}

.consult-board.consult .form-row.content + .form-row { padding-top: 20px}

/* --- Review --- */
.review .review-info { padding-top: 40px; padding-bottom: 65px; text-align: center; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.review .review-info .title { color: #303030; font-size: 20px; font-weight: 500; line-height: 26px; } 

.review .review-info .desc { padding-top: 25px; color: #000; font-weight: 300; } 

.review .review-benefits { padding-top: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.review .review-benefits::after { content: ''; display: block; position: relative; clear: both}

.review .review-benefits .benefit-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.review .review-benefits .benefit-list { padding-top: 30px}

#text-review.review .review-benefits .benefit-list { float: left; width: auto}

#text-review.review .review-board .board-paddle-nav { padding-top: 100px}

.review .review-benefits .benefit-list::after { content: ''; display: block; position: relative; clear: both}

.benefit-list .benefit-item { position: relative; float: left}

.benefit-list .benefit-item.grand { width: 400px}

.benefit-list .benefit-item.excellence { width: 440px}

.benefit-list .benefit-item.most { width: 250px; padding-left: 10px}

.benefit-list .benefit-item.bob { width: 392px; margin-left: -5px; margin-right: 52px}

.benefit-list .benefit-item.best { width: 392px; margin-right: 53px}

.benefit-list .benefit-item.grand::after,.benefit-list .benefit-item.excellence::after,.benefit-list .benefit-item.bob::after,.benefit-list .benefit-item.best::after,.benefit-list .benefit-item.most::after { content: ''; position: absolute; top: 0; width: 1px; height: 290px; background-color: rgba(48,48,48,0.3)}

.benefit-list .benefit-item.grand::after { right: 0}

.benefit-list .benefit-item.excellence::after { right: 0}

.benefit-list .benefit-item.bob::after { right: 0}

.benefit-list .benefit-item.best::after { right: 0}

.benefit-list .benefit-item.most::after { display: none}

.benefit-list .benefit-phase { padding-top: 10px; padding-bottom: 40px; text-align: center; text-transform: uppercase; font-size: 30px; font-weight: 500; line-height: 1; } 

#text-review .benefit-list .benefit-item { position: relative}

#text-review .benefit-list .benefit-item.bob { width: 264px; margin-right: 0}

#text-review .benefit-list .benefit-item.best { width: 264px; margin-right: 0}

#text-review .benefit-list .benefit-item.most { width: 264px; margin-right: 0}

#text-review .benefit-list .benefit-item:last-child { margin-right: 0}

#photo-review .benefit-list .benefit-gift .icon { width: 311px; height: 124px}

#photo-review .benefit-list .benefit-item.grand .benefit-gift .icon { padding-left: 27px}

#photo-review .benefit-list .benefit-item.excellence .benefit-gift .icon { padding-left: 49px}

#text-review .benefit-list .benefit-gift .icon { width: 217px; margin: 0 auto; margin-left: 33px}

.benefit-list .benefit-item.most .benefit-gift .icon { width: 217px !important; margin-left: 32px !important}

.benefit-list .benefit-gift .icon img { width: 100%}

.benefit-list .benefit-gift .gift-list { padding-top: 25px}

#photo-review .benefit-list .benefit-gift .gift-list ul { padding-left: 30px}

#photo-review .benefit-list .benefit-item.excellence .benefit-gift .gift-list ul { padding-left: 50px}

.benefit-list .benefit-item.most .benefit-gift .gift-list ul { padding-left: 12px}

.benefit-list .benefit-gift .gift-list li { display: inline-block; vertical-align: top; text-align: center}

.benefit-list .benefit-gift .gift-list li:nth-child(1) { width: 190px}

.benefit-list .benefit-gift .gift-list li:nth-child(2) { width: 92px; margin-left: 50px}

.benefit-list .benefit-gift .gift-list li .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 13px; font-weight: 300; line-height: 20px; } 

.benefit-list .benefit-gift .gift-list li .price { padding-top: 2px}

.benefit-list .benefit-gift .gift-list li .price .amount { color: #303030; font-size: 20px; font-weight: 500; line-height: 26px; } 

.benefit-list .benefit-gift .gift-list li .price .unit { padding-top: 0; padding-left: 1px; color: #303030; font-size: 20px; font-weight: 500; line-height: 26px; } 

.benefit-list .benefit-gift .gift-list li .random { padding-top: 2px; color: #303030; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 500; line-height: 26px; } 

.benefit-list .benefit-item .placard { height: 49px; margin-top: 45px}

#photo-review .benefit-list .benefit-item .placard { width: 392px}

#text-review .benefit-list .benefit-item .placard { width: 218px}

.benefit-list .benefit-item.grand .placard { background-image: url(/design/sona6769/images/pr-placard-grand.png); background-size: 392px 49px}

.benefit-list .benefit-item.excellence .placard { background-image: url(/design/sona6769/images/pr-placard-excellence.png); background-size: 392px 49px}

.benefit-list .benefit-item.bob .placard { background-image: url(/design/sona6769/images/tr-placard-bob.png); background-size: 218px 49px}

.benefit-list .benefit-item.best .placard { background-image: url(/design/sona6769/images/tr-placard-best.png); background-size: 218px 49px}

.benefit-list .benefit-item.most .placard { width: 218px !important; background-image: url(/design/sona6769/images/pr-placard-most.png); background-size: 218px 49px}

.benefit-list .benefit-item .placard span { display: block; padding-top: 2px; text-transform: uppercase; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 18px; font-weight: 600; line-height: 31px}

.benefit-list .benefit-item.bob .placard span,.benefit-list .benefit-item.best .placard span { font-family: 'Noto Sans KR'; font-weight: 700}

#text-review.review .benefit-event { float: right; width: 260px; padding-top: 55px; padding-top: 45px}

.review .benefit-event { padding-top: 85px; padding-bottom: 55px}

.review .benefit-event::after { content: ''; display: block; position: relative; clear: both}

.review .benefit-event>div { float: left}

#text-review .benefit-event .event-info { width: 260px}

.benefit-event .event-summary,.benefit-event .event-reserve { position: relative}

.benefit-event .event-summary { width: 545px; margin-right: 65px}

.benefit-event .event-summary::after,.benefit-event .event-reserve::after { content: ''; position: absolute; top: 0; width: 1px; height: 290px; background-color: rgba(48,48,48,0.3)}

.benefit-event .event-summary::after { right: -23px}

.benefit-event .event-reserve::after { right: -59px}

.benefit-event .event-reserve { width: 125px; margin-right: 104px}

.benefit-event .event-info { width: 260px}

.benefit-event .event-summary .summary-title { padding-top: 17px}

.benefit-event .event-summary .summary-title>p { display: inline-block; vertical-align: top}

.benefit-event .event-summary .summary-title .name { color: #303030; font-family: 'Noto Sans KR'; font-size: 70px; font-weight: 600; line-height: 80px}

.benefit-event .event-summary .summary-title .percent { padding-left: 14px; color: #303030; font-family: 'Noto Sans KR'; font-weight: 500}

.benefit-event .event-summary .summary-title .percent span { display: inline-block; vertical-align: top}

.benefit-event .event-summary .summary-title .percent .amount { font-size: 90px; font-weight: 600; line-height: 80px}

.benefit-event .event-summary .summary-title .percent .unit { padding-top: 32px; font-size: 50px; line-height: 40px; font-weight: 600}

.benefit-event .event-summary .summary-title .title { padding-top: 52px; padding-left: 18px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; line-height: 22px}

.benefit-event .event-summary .summary-info { padding-top: 65px}

.benefit-event .event-summary .summary-info .title { text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 22px; font-weight: 600; line-height: 28px}

.benefit-event .event-summary .summary-info .desc { padding-top: 5px; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.benefit-event .event-summary .summary-info .explain { padding-top: 6px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.benefit-event .event-reserve { text-align: center}

.benefit-event .event-reserve .icon { width: 135px}

.benefit-event .event-reserve .icon img { width: 100%}

.benefit-event .event-reserve .info .title { padding-top: 20px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.benefit-event .event-reserve .info .price { padding-top: 2px; color: #303030}

.benefit-event .event-reserve .info .price .amount { font-size: 21px; font-weight: 600; line-height: 26px}

.benefit-event .event-reserve .info .price .unit { padding-top: 0; padding-left: 2px; font-size: 20px; font-weight: 600; line-height: 26px}

.benefit-event .event-reserve .notice { padding-top: 35px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.benefit-event .event-info .info-desc { padding-top: 4px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

.benefit-event .event-info .info-list { padding-top: 12px}

.benefit-event .event-info .info-list li { padding-bottom: 6px; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.benefit-event .event-info .info-list li:last-child { padding-bottom: 0}

.benefit-event .event-info .info-list li>span { display: inline-block}

.benefit-event .event-info .info-list li .title { width: 70px; color: #757575}

.benefit-event .event-info .info-list li .desc { color: #303030; font-weight: 500; } 

.benefit-event .event-info .info-notice { padding-top: 23px; font-family: 'Noto Sans KR'; font-size: 12px}

.benefit-event .event-info .info-notice .title { position: relative; padding-left: 12px; color: #303030; font-weight: 600; line-height: 18px}

.benefit-event .event-info .info-notice .title::before { content: '*'; display: block; position: absolute; left: 0; } 

.benefit-event .event-info .info-notice .desc { padding-top: 6px; color: #757575; line-height: 18px}

.benefit-event .event-info .info-util { padding-top: 18px}

.benefit-event .event-info .info-util a { display: block; width: 258px; height: 58px; background-color: #303030; border: 1px solid #303030; text-align: center; color: #fff; font-size: 20px; font-weight: 500; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.benefit-event .event-info .info-util a:hover { background-color: #fff; color: #303030}

.review .review-notice { padding-top: 35px; padding-bottom: 55px; border-top: 1px solid rgba(48,48,48,0.3)}

.review .review-notice .notice-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.review-notice .notice-list { padding-top: 40px}

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

.review-notice .notice-list .notice-item { position: relative; float: left; width: 420px}

.review-notice .notice-list .notice-item:first-child { margin-right: 260px}

.review-notice .notice-list .notice-item:first-child::after { content: ''; display: block; position: absolute; top: 0; right: -130px; width: 0; height: 255px; border-right: 1px solid rgba(48,48,48,0.3)}

.notice-list .notice-item .figure { display: inline-block; width: 140px; height: 140px; padding-right: 40px; vertical-align: top}

.notice-list .notice-item .figure img { width: 100%}

.notice-list .notice-item .title { display: inline-block; position: relative; margin-top: -3px; font-family: 'Noto Sans KR'; font-size: 40px; line-height: 36px; font-weight: 300; } 

.notice-list .notice-item .title small,.notice-list .notice-item .title strong { display: block}

.notice-list .notice-item .title small { font-size: 16px; line-height: 20px}

.notice-list .notice-item .title strong { padding-top: 10px; padding-bottom: 28px}

.notice-list .notice-item .title span.icon { overflow: hidden; display: block; position: relative; top: 0; right: 0; width: 50px; height: 50px; border-radius: 50%}

.notice-list .notice-item .title span.icon img { width: 100%}

.notice-list .notice-item .title span.icon::after { content: ''; display: block; position: absolute; top: 0; right: 0; width: 46px; height: 46px; border: 2px solid #303030; border-radius: 50%}

.notice-list .notice-item .sub-title { position: relative; margin-top: 30px; padding-left: 12px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 20px; } 

.notice-list .notice-item .sub-title::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid #303030; border-radius: 50%}

.notice-list .notice-item ul { padding-top: 16px}

.notice-list .notice-item ul::after { content: ''; display: block; position: relative; clear: both}

.notice-list .notice-item li { position: relative; padding-bottom: 4px; padding-left: 16px; color: #000; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; white-space: nowrap; font-weight: 300; } 

.notice-list .notice-item:first-child li { float: left; box-sizing: border-box}

.notice-list .notice-item:first-child li:nth-child(odd) { width: 55%}

.notice-list .notice-item:first-child li:nth-child(even) { width: 45%}

.notice-list .notice-item li::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid rgba(0,0,0,0.6); border-radius: 50%}

.review-won { padding-top: 55px; padding-bottom: 55px; border-top: 1px solid rgba(48,48,48,0.3)}

.review-won .review-rank { padding-top: 55px}

.review-won .review-rank::after { content: ''; display: block; position: relative; clear: both}

.review-won .review-rank .rank-item { float: left; width: 330px; margin-right: 55px}

.review-won .review-rank .rank-item:last-child { margin-right: 0}

.review-rank .rank-item .icon { float: left; width: 92px; height: 127px}

.review-rank .rank-item .icon span { display: block; width: 92px; height: 127px; background-size: 92px 127px}

.review-rank .rank-item .icon.rank-1 span { background-image: url(/design/sona6769/images/win-1.png)}

.review-rank .rank-item .icon.rank-2 span { background-image: url(/design/sona6769/images/win-2.png)}

.review-rank .rank-item .icon.rank-3 span { background-image: url(/design/sona6769/images/win-3.png)}

.review-rank .rank-item .info { float: left; width: 210px; padding-left: 28px; color: #303030; font-family: 'Noto Sans KR'}

.review-rank .rank-item .info .product { font-size: 14px; font-weight: 500; line-height: 20px; } 

.review-rank .rank-item .info .writer { padding-top: 5px; font-size: 24px; font-weight: 500; line-height: 30px; } 

.review-rank .rank-item .info .writer span { display: inline-block}

.review-rank .rank-item .info .writer .customer { padding-left: 5px; font-size: 14px; line-height: 20px}

.review-rank .rank-item .info .desc { overflow: hidden; max-height: 56px; padding-top: 15px; color: #000; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; } 

.review-rank .rank-item .change { clear: both; width: 330px; padding-top: 35px}

.review-rank .rank-item .change::after { content: ''; display: block; position: relative; clear: both}

.review-rank .rank-item .change .figure { float: left; width: 163px}

.review-rank .rank-item .change .figure img { width: 100%}

.review-rank .rank-item .change .figure.before { margin-right: 4px}

.review-rank .rank-item .change .figure .title { padding-top: 15px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 600; line-height: 18px}

.review-guide { padding-top: 65px; text-align: center; color: #000; font-family: 'Noto Sans KR'; font-weight: 300; } 

.review-guide .title { display: inline-block; position: relative; font-size: 20px; font-weight: 500; line-height: 26px; } 

.review-guide .title::after { content: ''; display: block; position: absolute; width: 100%; height: 0; border-bottom: 2px solid #303030}

.review-guide .sub-title { padding-top: 18px; font-size: 14px; font-weight: 500; line-height: 20px; } 

.review-guide .notice { display: inline-block; position: relative; margin-top: 35px; padding-left: 14px; font-size: 12px; line-height: 18px}

.review-guide .notice::after { content: '*'; display: block; position: absolute; top: 0; left: 0; } 

.review .review-board { padding-top: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.review .review-board .result { padding-bottom: 40px; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 22px}

.review .review-board .result .count { display: inline-block; padding-right: 2px; padding-left: 6px; font-family: 'Noto Sans KR'; font-size: 16px}

.review .review-board .photo-board .board-row { padding-right: 1px; padding-bottom: 60px; padding-left: 1px}

.review .review-board .photo-board .board-row:after { content: ''; display: block; position: relative; clear: both}

.review .review-board .photo-board .board-row:last-child { padding-bottom: 0}

.review .review-board .board-row .board-item { position: relative; float: left; width: 240px; margin-right: 46px; color: #303030; font-family: 'Noto Sans KR'}

.review .review-board .board-row .board-item:last-child { margin-right: 0}

.review .review-board .board-row .board-item .thumbnail,.review-board .board-row .board-item .thumbnail img { width: 100%}

.review .review-board .board-row .board-item .thumbnail { overflow: hidden; display: block; height: 240px}

.review .review-board .board-row .board-item .thumbnail a { display: table; width: 100%; height: 100%}

.review .review-board .board-row .board-item .thumbnail span { display: table-cell; width: 100%; vertical-align: middle}

.review .review-board .board-row .board-item .product { padding-top: 20px; font-size: 19px; line-height: 25px; letter-spacing: -0.5px}

.review .review-board .board-row .board-item .title { overflow: hidden; height: 20px; padding-top: 4px; font-size: 14px; font-weight: 600; line-height: 20px}

.review .review-board .board-row .board-item .count { padding-top: 15px; font-size: 12px; line-height: 20px; text-align: right}

.review .review-board .board-row .board-item .count span { display: inline-block; vertical-align: top; text-align: left}

.review .review-board .board-row .board-item .count .subject { padding-right: 2px; font-family: 'Noto Sans KR'}

.review .review-board .board-row .board-item .count .amount { font-family: 'Noto Sans KR'; margin-top: -1px}

.review .review-board .board-row .board-item .writer { padding-top: 6px}

.review .review-board .board-row .board-item .writer .grade { margin-left: 10px}

.review .review-board .board-row .board-item .published { position: absolute; right: 0; bottom: 0; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.review .review-board .board-notice { position: relative; margin-top: 55px; padding-left: 12px; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 18px}

.review .review-board .board-notice::before { content: '*'; display: block; position: absolute; left: 0}

.review .review-board .board-paddle-nav { padding-top: 30px}

.review .review-board .board-search-bar { padding-top: 90px}

#text-review.review .review-board .board-row:first-child { border-top: 1px solid rgba(48,48,48,0.3)}

#text-review.review .review-board .board-row { border-bottom: 1px solid rgba(48,48,48,0.3)}

.review .review-board .summary { display: table; position: relative; width: 100%; padding-top: 20px; padding-bottom: 20px}

.review .review-board .board-view .summary { padding-top: 0; padding-bottom: 10px}

.review .review-board .summary>div { display: table-cell}

.review .review-board .summary .thumbnail { width: 120px; height: 120px}

.review .review-board .board-view .summary .thumbnail { width: 140px; height: 140px}

.review .review-board .summary .thumbnail img { width: 100%}

.review .review-board .summary .info { position: relative; width: 860px; padding-top: 15px; padding-left: 20px; vertical-align: top}

.review .review-board .board-view .summary .info { padding-top: 5px; padding-left: 50px; vertical-align: top}

.review .review-board .summary .info .title { color: #303030; font-family: 'Noto Sans KR'; font-size: 24px; font-weight: 600; line-height: 30px}

.review .review-board .summary .info .product { padding-top: 6px; color: #757575; font-size: 20px; font-weight: 600; line-height: 26px}

.review .review-board .summary .info .product a { color: #757575}

.review .review-board .summary .info .writer { padding-top: 18px}

.review .review-board .board-view .summary .info .writer { position: absolute; bottom: 10px; padding-top: 0}

.review .review-board .summary .info .writer .grade { margin-left: 12px}

.review .review-board .summary .published { display: block; position: absolute; top: 17px; right: 0; color: #303030; font-family: 'Noto Sans KR'; font-size: 18px; line-height: 24px}

.review .review-board .summary .published { top: 25px}

.review .review-board .board-view .summary .published { top: 5px}

.review .review-board .view { display: none}

.review .review-board .board-view .view { display: block}

.review .review-board .board-row .view { border-top: 1px solid rgba(48,48,48,0.3)}

.review .review-board .view-writer { position: relative; width: 650px; padding-top: 35px; padding-bottom: 60px; padding-left: 190px}

.review .review-board .view-writer p { font-size: 14px; line-height: 21px; color: #757575}

.review .review-board .view-writer:last-child { padding-bottom: 35px}

.review .review-board .view-writer .view-content { padding-bottom: 35px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px}

.review .review-board .view-writer .view-figure img { max-width: 650px; padding-bottom: 40px}

.review .review-board .view-writer .view-content:last-child,.review .review-board .view-writer .view-figure img:last-child { padding-bottom: 0}

.review .review-board .view-admin { position: relative; padding-top: 60px; padding-bottom: 35px}

.review .review-board .view-admin::before { content: ''; display: block; position: absolute; top: 0; left: 190px; width: 70px; height: 0; border-bottom: 2px solid rgba(48,48,48,0.3)}

.review .review-board .view-admin::after { content: ''; display: block; position: relative; clear: both}

.review .review-board .view-admin .logo { float: left; width: 190px; height: 61px; text-align: center}

.review .review-board .view-admin .logo span { display: inline-block; vertical-align: top; width: 80px; height: 61px; background-image: url(/design/sona6769/images/logo.svg); background-size: 80px 61px; text-indent: -9999px}

.review .review-board .view-admin .reply { float: left; width: 650px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px}

.review .review-board .board-util { padding-left: 190px}

.review .review-board .board-util::after { content: ''; display: block; position: relative; clear: both}

.review .review-board .board-util .list-area { float: left}

.review .review-board .board-util .edit-area { float: right}

.review .review-board .board-util .edit-area a { width: 68px; height: 48px; line-height: 48px}

.review .review-board .board-util .edit-area button { display: inline-block; width: 70px; height: 50px; margin-right: 10px; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.review .review-board .board-util .edit-area button:last-child { margin-right: 0}

.review .review-board .board-util .edit-area button.w { background-color: #fff; color: #303030}

.review .review-board .board-util .edit-area button:hover { background-color: #fff; color: #303030}

.review .review-board .board-util .edit-area button.w:hover { background-color: #303030; color: #fff}

.review .review-board .board-util a { display: inline-block; width: 118px; height: 48px; margin-right: 10px; padding: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.review .review-board .board-util a:last-child { margin-right: 0}

.review .review-board .board-util a.w { background-color: #fff; color: #303030}

.review .review-board .board-util a:hover { background-color: #fff; color: #303030}

.review .review-board .board-util a.w:hover { background-color: #303030; color: #fff}

.review .review-board .board-util + .board-paddle-post { padding-top: 30px}

/* --- What's New --- */
#whats-new .major-title { font-family: 'Noto Sans KR'}

.major-title.e { font-family: 'Noto Sans KR'}

.major-title.e h2,.major-title.e h3 { font-weight: 800}

#whats-new .major-title h3 { font-weight: 800}

.new-items.f { padding-top: 100px; padding-bottom: 55px}

.new-items::after { content: ''; display: block; position: relative; clear: both}

.new-items .new-item { float: left; width: 550px; color: #303030}

.new-items .new-item .figure { width: 100%}

.new-items .new-item .figure img { width: 100%}

.new-items .new-item .title { padding-top: 25px; padding-left: 10px; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.new-items .new-item .title-en { padding-left: 10px; text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 14px; letter-spacing: 0.9px; line-height: 20px}

.new-items .new-item .desc { padding-top: 24px; padding-left: 10px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 21px}

.sale-banner { position: relative}

.sale-banner .image-area img { width: 100%}

.sale-banner .text-area { position: absolute; top: 0; width: 100%; color: #982352}

.sale-banner .text-area .title { padding-top: 105px; padding-left: 70px; font-family: 'Noto Sans KR'; font-size: 20px; letter-spacing: 0.2px; line-height: 26px}

.sale-banner .text-area .percent { padding-top: 4px; padding-left: 65px}

.sale-banner .text-area .percent span { display: inline-block; vertical-align: top}

.sale-banner .text-area .percent .amount { font-family: 'Noto Sans KR'; font-size: 180px; font-weight: 500; letter-spacing: -3px; line-height: 190px}

.sale-banner .text-area .percent .unit { padding-top: 80px; padding-left: 15px; font-family: 'Noto Sans KR'; font-size: 32px; font-weight: 600; line-height: 40px}

.sale-banner .text-area .percent .off { padding-top: 78px; padding-left: 12px; text-transform: uppercase; font-family: 'Noto Sans KR'; font-size: 32px; font-weight: 600; line-height: 40px}

.sale-banner .text-area .during { padding-top: 40px; padding-left: 70px}

.sale-banner .text-area .during .range { font-family: 'Noto Sans KR'; font-size: 18px; line-height: 24px}

.sale-banner .text-area .during .range p,.sale-banner .text-area .during .range span { display: inline-block; position: relative; vertical-align: top}

.sale-banner .text-area .during .range span.time { padding-left: 10px}

.sale-banner .text-area .during .range p.start { padding-right: 20px}

.sale-banner .text-area .during .range p.start::after { content: ''; display: block; position: absolute; top: 50%; right: 7px; width: 6px; height: 0; border-bottom: 1px solid #982352}

.sale-banner .text-area .during .note { padding-top: 3px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 20px}

.lead-items { padding-top: 60px; padding-bottom: 55px}

.lead-items::after { content: ''; display: block; position: relative; clear: both}

.lead-items .lead-item { float: left; width: 25%}

.lead-items .lead-item .figure { width: 100%}

.lead-items .lead-item .figure img { width: 100%}

.lead-items .lead-item .title { padding-top: 32px; padding-left: 10px; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 600; line-height: 22px}

.lead-items .lead-item .title-en { padding-top: 6px; padding-left: 10px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; letter-spacing: 0.8px; line-height: 18px}

.lead-items .lead-item .desc { padding-top: 12px; padding-left: 10px; color: #757575; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 22px}

/* --- HOTDEAL --- */
#hotdeal .major-title { font-family: 'Noto Sans KR'}

.major-title.e { font-family: 'Noto Sans KR'}

.major-title.e h2,.major-title.e h3 { font-weight: 800}

#hotdeal .major-title h3 { font-weight: 800}

/* --- Beauty Zone --- */
.beauty-tester-info { padding-top: 45px; padding-bottom: 65px; text-align: center; font-family: 'Noto Sans KR'}

.beauty-tester-info .title { color: #303030; font-size: 20px; font-weight: 500; line-height: 26px; } 

.beauty-tester-info .desc { padding-top: 22px; color: #000; font-size: 14px; line-height: 20px; font-weight: 300; } 

.beauty-tester-recruit { padding-top: 35px; border-top: 1px solid rgba(48,48,48,0.3)}

.beauty-tester-recruit .recruit-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; letter-spacing: 0.5px; line-height: 26px; text-align: center; } 

.beauty-tester-recruit .recruit-title span { display: inline-block; vertical-align: top}

.beauty-tester-recruit .recruit-title .yy,.beauty-tester-recruit .recruit-title .mm { font-family: 'Noto Sans KR'; font-weight: 500}

.beauty-tester-recruit .recruit-list { padding-top: 50px; padding-bottom: 60px; display: flex; justify-content: center; } 

.beauty-tester-recruit .recruit-list::after { content: ''; display: block; position: relative; clear: both}

.recruit-list .recruit-item { position: relative; width: 550px; height: 420px}

.recruit-item .image-area { position: relative; width: 100%}

.recruit-item .image-area img { width: 100%}

.recruit-item.c-b .text-area .sort { color: #038cda}

.recruit-item.c-b .text-area .limit { background-color: #038cda}

.recruit-item.c-g .text-area .sort { color: #646566}

.recruit-item.c-g .text-area .limit { background-color: #646566}

.recruit-item.c-r .text-area .sort { color: #c54650}

.recruit-item.c-r .text-area .limit { background-color: #c54650}

.recruit-item.c-k .text-area .sort { color: #575e2b}

.recruit-item.c-k .text-area .limit { background-color: #575e2b}

.recruit-item .text-area { position: absolute; top: 0; width: 100%; font-family: 'Noto Sans KR'}

.recruit-item .text-area .sub-title { color: #303030; font-size: 14px; font-weight: 500; line-height: 20px; } 

.recruit-item .text-area .sort { padding-top: 5px; font-size: 30px; font-weight: 500; line-height: 36px; } 

.recruit-item .text-area .title,.recruit-item .text-area .desc,.recruit-item .text-area .feature { color: #000; font-size: 14px; line-height: 20px; font-weight: 300; } 

.recruit-item .text-area .title { padding-top: 35px}

.recruit-item .text-area .desc { padding-top: 20px}

.recruit-item .text-area .feature { font-weight: 500; } 

.recruit-item .text-area .limit { overflow: hidden; width: 140px; height: 140px; margin-top: 85px; border-radius: 50%; text-align: center; color: #fff}

.recruit-item .text-area .limit .name { padding-top: 33px; font-size: 18px; font-weight: 500; line-height: 24px; } 

.recruit-item .text-area .limit .person { font-size: 24px; font-weight: 600; line-height: 30px}

.recruit-item .text-area .limit .person span { display: inline-block; vertical-align: top}

.recruit-item .text-area .limit .person .amount { font-family: 'Noto Sans KR'; font-size: 48px; font-weight: 400; line-height: 54px; } 

.recruit-item .text-area .limit .person .unit { padding-top: 20px; padding-left: 4px}

.beauty-tester-notice { padding-top: 35px; padding-bottom: 40px; border-top: 1px solid rgba(48,48,48,0.3)}

.beauty-tester-notice .info::after { content: ''; display: block; position: relative; clear: both}

.beauty-tester-notice .info .info-cols { float: left; width: 550px}

.beauty-tester-notice .info .info-item { display: block; margin-bottom: 16px; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.beauty-tester-notice .info .info-item:last-child { margin-bottom: 0}

.beauty-tester-notice .info .info-item>div { display: inline-block; vertical-align: top}

.beauty-tester-notice .info .info-item .title { position: relative; width: 126px; padding-left: 14px}

.beauty-tester-notice .info .info-item .title::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid rgba(0,0,0,0.6); border-radius: 50%}

.beauty-tester-notice .info .info-item .desc { width: 410px; font-weight: 400; } 

.beauty-tester-notice .info .info-item .notice { display: block; position: relative; padding-top: 4px; padding-left: 14px; font-size: 12px; line-height: 18px}

.beauty-tester-notice .info .info-item .notice::before { content: '*'; display: block; position: absolute; left: 0}

.beauty-tester-notice .info .info-cols:nth-child(2) .info-item .desc { margin-top: -2px; line-height: 24px}

.beauty-tester-notice .info .info-cols:nth-child(2) .info-item .notice { padding-top: 12px}

.beauty-tester-notice .info-notice { display: block; position: relative; margin-top: 50px; padding-left: 14px; color: #303030; font-size: 14px; font-weight: 500; line-height: 20px; } 

.beauty-tester-notice .info-notice::before { content: '*'; display: block; position: absolute; left: 0}

.beauty-tester-entry { padding-top: 55px; padding-bottom: 50px; border-top: 1px solid rgba(48,48,48,0.3); text-align: center}

.beauty-tester-entry .slogan { color: #303030; font-family: 'Nanum Myeongjo'; font-size: 16px; font-weight: 500; line-height: 22px; } 

.beauty-tester-entry .copy { padding-top: 14px; text-transform: uppercase; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 500; line-height: 18px; } 

.beauty-tester-entry .btn-entry { display: inline-block; width: 258px; height: 58px; margin-top: 55px; background-color: #303030; border: 1px solid #303030; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 58px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out; } 

.beauty-tester-entry .btn-entry:hover { background-color: #fff; color: #303030}

.beauty-tester-entry .btn-entry.is-selected { opacity: 0.4; background-color: #303030; color: #fff; cursor: default}

.beauty-tester-entry .btn-entry span { display: inline-block; vertical-align: top}

.beauty-tester-table thead th:nth-child(3),.beauty-tester-table thead th:nth-child(4),.beauty-tester-table thead th:last-child { text-align: center}

.beauty-tester-table tbody td:nth-child(3),.beauty-tester-table tbody td:nth-child(4),.beauty-tester-table tbody td:last-child { text-align: center}

.beauty-tester-board.board .board-table tbody td { padding-top: 20px; padding-bottom: 20px}

.beauty-tester-table th .date { display: inline-block; width: 70px; text-align: center}

.beauty-tester-table th .writer { display: inline-block; width: 50px; text-align: center}

.beauty-tester-table td .writer { display: inline-block}

.beauty-tester-table td .writer.admin { width: 50px}

.beauty-tester-table td .writer.admin .logo { overflow: hidden; display: block; width: 50px; height: 18px; margin-top: 1px; background-image: url(/design/sona6769/images/logo-admin.svg); background-size: 50px 18px; text-align: left; text-indent: -9999px}

.beauty-tester-table td .writer span { display: inline-block}

.beauty-tester-table td .writer span.grade { margin-right: 20px; margin-left: 0}

.beauty-tester-table td .writer .name { min-width: 50px; text-align: center}

.beauty-tester-table td a .sort { display: inline-block; width: 48px; height: 20px; margin-right: 10px; border: 1px solid #303030; border-radius: 2px; text-transform: uppercase; text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 700; line-height: 20px}

.beauty-tester-board.board .board-table tbody td a:hover { color: #303030}

.beauty-tester-board .board-paddle-nav { padding-top: 90px}

.beauty-tester-board .board-search-bar { padding-top: 90px}

.beauty-tester-board .board-view { padding-top: 40px}

.beauty-tester-board .board-view .board-head { display: table; width: 100%; padding-bottom: 40px; color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.beauty-tester-board .board-view .board-head>p { display: table-cell; font-weight: 600}

.beauty-tester-board .board-view .sort,.beauty-tester-board .board-view .number { width: 140px}

.beauty-tester-board .board-view .number { font-family: 'Noto Sans KR'}

.beauty-tester-board .board-view .title { width: 460px}

.beauty-tester-board .board-view .writer { width: 180px; text-align: right}

.beauty-tester-board .board-view .date { width: 200px; text-align: right; font-family: 'Noto Sans KR'}

.beauty-tester-board .board-view .count { width: 120px; text-align: right; font-family: 'Noto Sans KR'}

.beauty-tester-board .board-view .board-head .writer span { display: inline-block; width: 50px; text-align: center}

.beauty-tester-board .board-view .board-head .date span { display: inline-block; width: 70px; text-align: center}

.beauty-tester-board .board-view .board-summary { display: table; width: 100%; padding-bottom: 20px; color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.beauty-tester-board .board-view .board-summary>p { display: table-cell}

.beauty-tester-board .board-view .board-summary .title { font-weight: 600}

.beauty-tester-board .board-view .board-summary .title span { display: inline-block; vertical-align: top}

.beauty-tester-board .board-view .board-summary .title .reply { padding-right: 45px; color: #303030}

.beauty-tester-board .board-view .board-summary .writer b { display: inline-block; font-weight: normal}

.beauty-tester-board .board-view .board-summary .writer.admin b { width: 50px}

.beauty-tester-board .board-view .board-summary .writer.admin .logo { overflow: hidden; display: block; width: 50px; height: 18px; margin-top: 1px; background-image: url(/design/sona6769/images/logo-admin.svg); background-size: 50px 18px; text-align: left; text-indent: -9999px}

.beauty-tester-board .board-view .board-summary .writer span { display: inline-block; vertical-align: top}

.beauty-tester-board .board-view .board-summary .writer span.grade { margin-right: 20px; margin-left: 0}

.beauty-tester-board .board-view .board-summary .writer .name { min-width: 50px; text-align: center}

.beauty-tester-board .board-view .board-content { position: relative; padding-top: 55px; padding-bottom: 40px; padding-left: 140px; border-top: 1px solid rgba(48,48,48,0.3); color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.beauty-tester-board .board-view .board-content::before { content: ''; display: block; position: absolute; top: 60px; left: 0; width: 46px; height: 0; border-top: 1px solid #303030}

.beauty-tester-board .board-view .board-content p { padding-bottom: 15px}

.beauty-tester-board .board-view .board-content p:last-child { padding-bottom: 0}

.beauty-tester-board .board-util { padding-left: 140px}

.beauty-tester-board .board-util::after { content: ''; display: block; position: relative; clear: both}

.beauty-tester-board .board-util .edit-area { float: left}

.beauty-tester-board .board-util .util-area { float: right}

.beauty-tester-board .board-util .util-area:first-child { float: left}

.beauty-tester-board .board-util .edit-area button { display: inline-block; width: 70px; height: 50px; margin-right: 10px; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.beauty-tester-board .board-util .edit-area button:last-child { margin-right: 0}

.beauty-tester-board .board-util .edit-area button.w { background-color: #fff; color: #303030}

.beauty-tester-board .board-util .edit-area button:hover { background-color: #fff; color: #303030}

.beauty-tester-board .board-util .edit-area button.w:hover { background-color: #303030; color: #fff}

.beauty-tester-board .board-util a { display: inline-block; width: 118px; height: 48px; margin-right: 10px; padding: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.beauty-tester-board .board-util a:last-child { margin-right: 0}

.beauty-tester-board .board-util a.w { background-color: #fff; color: #303030}

.beauty-tester-board .board-util a:hover { background-color: #fff; color: #303030}

.beauty-tester-board .board-util a.w:hover { background-color: #303030; color: #fff}

.beauty-tester-board .board-util + .board-paddle-post { padding-top: 30px}

.beauty-tester-board .board-write { padding-top: 30px}

.beauty-tester-board .board-write .form-row { padding-bottom: 0}

.beauty-tester-board .board-write .form-row.subject { padding-bottom: 20px}

.beauty-tester-board .board-write .form-util .write-area { float: right}

.beauty-counselor-board.board { padding-top: 50px}

.board .beauty-counselor-view { padding-top: 45px}

.beauty-counselor-board.board .board-table tbody td { padding-top: 20px; padding-bottom: 20px}

.beauty-counselor-board.board .board-table tbody td a:hover { color: #303030}

.beauty-counselor-table thead th { font-weight: 600}

.beauty-counselor-table thead th:nth-child(3),.beauty-counselor-table thead th:last-child { text-align: right}

.beauty-counselor-table tbody td:nth-child(3),.beauty-counselor-table tbody td:last-child { text-align: right}

.beauty-counselor-table th .date { display: inline-block; width: 70px; text-align: center}

.beauty-counselor-board.board .board-paddle-nav { padding-top: 150px}

.beauty-counselor-board.board .board-search-bar { padding-top: 90px}

.beauty-counselor-board .board-view .board-head { display: table; width: 100%; padding-top: 10px; padding-bottom: 10px; border-top: 1px solid rgba(48,48,48,0.3); border-bottom: 1px solid rgba(48,48,48,0.3); color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.beauty-counselor-board .board-view .board-head>p { display: table-cell}

.beauty-counselor-board .board-head .sort,.beauty-counselor-board .board-summary .number { width: 140px}

.beauty-counselor-board .board-view .number { font-family: 'Noto Sans KR'}

.beauty-counselor-board .board-view .title { width: 720px}

.beauty-counselor-board .board-view .date,.beauty-counselor-board .board-view .count { width: 120px; text-align: right; font-family: 'Noto Sans KR'}

.beauty-counselor-board .board-view .board-head .date span { display: inline-block; width: 70px; text-align: center}

.beauty-counselor-board .board-view .board-summary { display: table; width: 100%; padding-top: 20px; padding-bottom: 20px; color: #111111; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px}

.beauty-counselor-board .board-view .board-summary>p { display: table-cell}

.beauty-counselor-board .board-view .board-summary .title { font-weight: 600}

.beauty-counselor-board .board-view .board-summary .title span { display: inline-block; vertical-align: top}

.beauty-counselor-board .board-view .board-summary .writer b { display: inline-block; font-weight: normal}

.beauty-counselor-board .board-view .board-summary .writer span { display: inline-block; vertical-align: top}

.beauty-counselor-board .board-view .board-summary .writer span.grade { margin-right: 20px; margin-left: 0}

.beauty-counselor-board .board-view .board-summary .writer .name { min-width: 50px; text-align: center}

.beauty-counselor-board .board-view .board-content { position: relative; padding-top: 40px; padding-bottom: 40px; padding-left: 140px; border-top: 1px solid rgba(48,48,48,0.3); text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 24px}

.beauty-counselor-board .board-view .board-content::before { content: ''; display: block; position: absolute; top: 55px; left: 0; width: 46px; height: 0; border-top: 1px solid #303030}

/* .beauty-counselor-board .board-view .board-content>p { padding-bottom:15px } */
/* .beauty-counselor-board .board-view .board-content>p:last-child { padding-bottom:0 } */
.beauty-counselor-board .board-view .board-content>p strong { display: block; padding-bottom: 5px; font-size: 20px; line-height: 26px}

.beauty-counselor-board .board-view .board-content .product { position: relative; width: 100%; padding-top: 40px; padding-bottom: 25px}

.beauty-counselor-board .board-view .board-content .product .item { position: relative; width: 450px; height: 450px; margin: 0 auto 55px}

.beauty-counselor-board .board-view .board-content .product .item .figure { width: 100%}

.beauty-counselor-board .board-view .board-content .product .figure img { width: 100%}

.beauty-counselor-board .board-view .board-content .product .certificate { position: absolute; right: -75px; bottom: 15px; width: 138px; min-height: 78px; border: 1px solid #303030; border-radius: 6px; font-size: 14px; font-weight: 600}

.beauty-counselor-board .board-view .board-content .product .certificate .desc { display: block; min-height: 40px; padding-top: 7px; padding-bottom: 8px; background-color: #303030; color: #fff; font-family: 'Noto Sans KR'; line-height: 20px}

.beauty-counselor-board .board-view .board-content .product .certificate .type { display: block; height: 23px; color: #303030; font-family: 'Noto Sans KR'; line-height: 23px}

.beauty-counselor-board .board-view .board-content .product .info { padding-top: 10px; font-family: 'Noto Sans KR'; font-weight: 600}

.beauty-counselor-board .board-view .board-content .product .info .sort { font-size: 24px; line-height: 30px}

.beauty-counselor-board .board-view .board-content .product .info .name { font-size: 42px; line-height: 48px}

.beauty-counselor-board .board-util { padding-left: 140px}

.beauty-counselor-board .board-util::after { content: ''; display: block; position: relative; clear: both}

.beauty-counselor-board .board-util .list-area { float: left}

.beauty-counselor-board .board-util a { display: inline-block; width: 118px; height: 48px; margin-right: 10px; padding: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.beauty-counselor-board .board-util a:last-child { margin-right: 0}

.beauty-counselor-board .board-util a.w { background-color: #fff; color: #303030}

.beauty-counselor-board .board-util a:hover { background-color: #fff; color: #303030}

.beauty-counselor-board .board-util a.w:hover { background-color: #303030; color: #fff}

.beauty-counselor-board .board-util + .board-paddle-post { padding-top: 30px}

.beauty-tester-board .board-util .edit-area button { display: inline-block; width: 70px; height: 50px; margin-right: 10px; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.beauty-tester-board .board-util .edit-area button:last-child { margin-right: 0}

.beauty-tester-board .board-util .edit-area button.w { background-color: #fff; color: #303030}

.beauty-tester-board .board-util .edit-area button:hover { background-color: #fff; color: #303030}

.beauty-tester-board .board-util .edit-area button.w:hover { background-color: #303030; color: #fff}

.cf-stories { padding-top: 100px}

.cf-stories::after { content: ''; display: block; position: relative; clear: both}

.cf-stories .cf-story-item { float: left; width: 540px; margin-bottom: 60px; margin-right: 20px}

.cf-stories .cf-story-item:nth-child(2n+1):nth-last-child(-n+2),.cf-stories .cf-story-item:nth-child(2n+1):nth-last-child(-n+2) ~ .cf-story-item { margin-bottom: 0}

.cf-stories .cf-story-item:nth-child(even) { margin-right: 0}

.cf-story-item .figure { width: 100%; height: 300px}

.cf-story-item .figure img { width: 100%}

.cf-story-item .info { position: relative; padding-top: 25px; padding-right: 10px; padding-left: 10px}

.cf-story-item .info .release { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.cf-story-item .info .release span { display: inline-block; vertical-align: top}

.cf-story-item .info .release .yy,.cf-story-item .info .release .number { font-weight: 500; } 

.cf-story-item .info .release .yy { padding-right: 5px}

.cf-story-item .info .release .number { padding-left: 5px}

.cf-story-item .info .title { padding-top: 1px; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 22px; } 

.cf-story-item .info .episode { position: absolute; right: 10px; bottom: 0; color: #303030; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 22px; } 

.cf-story-item .info .episode span { display: inline-block; vertical-align: top}

.cf-story-item .info .episode .unit { padding-top: 1px; padding-left: 2px; font-size: 14px; line-height: 20px}

.cf-story-item.note { text-align: center; color: #303030; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 17px; } 

.cf-story-item .to-thanks { padding-top: 115px}

.cf-story-item .only { padding-top: 38px; font-family: 'Nanum Myeongjo'; font-weight: 800}

.so-ad-list { padding-top: 100px}

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

.so-ad-list .so-ad-item { float: left; width: 190px; margin-bottom: 60px; margin-right: 110px; text-align: center; color: #303030}

.so-ad-list .so-ad-item:nth-child(4n+1) { clear: both}

.so-ad-list .so-ad-item:nth-child(4n+2) { margin-right: 120px}

.so-ad-list .so-ad-item:nth-child(4n) { margin-right: 0}

.so-ad-list .so-ad-item:nth-child(4n+1):nth-last-child(-n+4),.so-ad-list .so-ad-item:nth-child(4n+1):nth-last-child(-n+4) ~ .so-ad-item { margin-bottom: 0}

.so-ad-item .thumbnail { width: auto; padding: 8px; border: 1px solid #d6d6d6}

.so-ad-item .thumbnail img { width: 100%}

.so-ad-item .published { padding-top: 17px; font-family: 'Noto Sans KR'; font-size: 16px; line-height: 20px}

.so-ad-item .title { padding-top: 4px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 400; line-height: 20px}

.so-ad-list + .board-paddle-nav { padding-top: 100px}

.so-ad-list + .board-paddle-nav + .board-search-bar { padding-top: 90px}

.so-ad-view { padding-top: 100px; padding-bottom: 110px}

.so-ad-view .view-content { padding-top: 60px}

.so-ad-view .view-content .content-info { text-align: center; color: #303030}

.so-ad-view .view-content .content-info .published { font-family: 'Noto Sans KR'; font-size: 20px; line-height: 26px}

.so-ad-view .view-content .content-info .title { padding-top: 4px; padding-bottom: 45px; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 400; line-height: 26px}

.so-ad-view .paddle-nav { position: absolute; top: 15px; left: 50%; width: 680px; margin-left: -340px}

.so-ad-view .paddle-nav b.arrow { overflow: hidden; position: absolute; width: 50px; height: 14px; text-indent: -9999px; cursor: pointer; opacity: 1.0; -webkit-transition: opacity 180ms ease-in-out}

.so-ad-view .paddle-nav b.arrow.disabled { cursor: default; opacity: 0.25}

.so-ad-view .paddle-nav b.arrow.prev { left: 0; background-image: url(/design/sona6769/images/btn-prev.png); background-size: 50px 14px}

.so-ad-view .paddle-nav b.arrow.next { right: 0; background-image: url(/design/sona6769/images/btn-next.png); background-size: 50px 14px}

.so-ad-view .view-content .content-magazine { overflow: hidden; position: relative; width: 100%; min-height: 500px; padding-top: 10px; padding-bottom: 15px}

.so-ad-view .view-content .content-magazine .magazine-wrap { position: relative; width: 100%}

.so-ad-view .view-content .content-magazine .magazine-wrap .magazine-container { position: relative; left: 50%; width: 1480px; margin-left: -340px}

.so-ad-view .view-content .content-magazine .magazine-container::after { content: ''; display: block; position: relative; clear: both}

.so-ad-view .view-content .content-magazine .magazine-item { float: left; width: 680px; margin-right: 120px; box-shadow: 0 4px 8px rgba(0,0,0,0.25)}

.so-ad-view .view-content .content-magazine .magazine-item:last-child { margin-right: 0}

.so-ad-view .view-content .content-magazine .magazine-item img { width: 100%}

.so-ad-view .view-util .board-util { padding-left: 140px}

.so-ad-view .view-util .board-util::after { content: ''; display: block; position: relative; clear: both}

.so-ad-view .view-util .board-util .list-area { float: left}

.so-ad-view .view-util .board-util a { display: inline-block; width: 118px; height: 48px; margin-right: 10px; padding: 0; background-color: #303030; border: 1px solid #303030; outline: none; vertical-align: top; text-align: center; color: #fff; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 500; line-height: 48px; -webkit-transition: background-color 180ms ease-in-out, color 180ms ease-in-out}

.so-ad-view .view-util .board-util a:last-child { margin-right: 0}

.so-ad-view .view-util .board-util a.w { background-color: #fff; color: #303030}

.so-ad-view .view-util .board-util a:hover { background-color: #fff; color: #303030}

.so-ad-view .view-util .board-util a.w:hover { background-color: #303030; color: #fff}

.so-ad-view .view-util .board-util + .board-paddle-post { padding-top: 30px}

.so-ad-view .view-util .board-paddle-post a { display: inline-block}

.so-ad-view .view-util .board-paddle-post a span { display: inline-block}

.so-ad-view .view-util .board-paddle-post a span.published { color: #757575; font-family: 'Noto Sans KR'; font-weight: 400; padding-right: 20px}

/* --- Link Page --- */
#use-term .term-content,#private-term .term-content { width: 860px; margin: 0 auto; padding-top: 90px; padding-bottom: 15px; color: #303030; font-family: 'Noto Sans KR'}

.term-content > div:last-child { padding-bottom: 0 !important}

.term-content .notice { padding-bottom: 20px; font-size: 12px; line-height: 18px}

.term-content .ftc { padding-top: 10px; padding-bottom: 20px; text-align: center}

.term-content .ftc .logo { width: 120px; height: 90px; 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: 16px; font-weight: 600; line-height: 28px}

.term-content .article { line-height: 20px}

.term-content .article .clause { padding-bottom: 20px}

.term-content .article .clause:last-child { padding-bottom: 0}

.term-content .article .c-title { padding-bottom: 8px}

.term-content .article .gather { padding-bottom: 30px}

.term-content .article .gather-table { margin-top: 30px; margin-bottom: 30px}

.term-content .article .gather-table th,.term-content .article .gather-table td { height: 30px; padding-left: 30px; 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: 8px; font-size: 11px; line-height: 22px}

.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: 12px}

.term-content .article .gather > ol { margin-left: 8px}

.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: 12px}

.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: 18px; 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 #303030; 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}

.smartOutput { font-size: inherit !important; line-height: inherit !important; font-family: inherit !important}

.smartOutput p { margin-top: inherit !important; margin-bottom: inherit !important}

/*------------------------*/
/*--- membership */
.badge-grade { display: inline-block; width: 112px; height: 25px; border-radius: 2px; vertical-align: top; text-align: center; color: #fff; font-size: 14px; line-height: 25px}

.badge-grade.general { background-color: #95c954}

.badge-grade.excellent { background-color: #d64747}

.badge-grade.vip { background-color: #303030}

.badge-grade.vvip { background-color: #6c0b9d}

.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}

.coupon-icon { display: inline-block; line-height: 1}

.coupon-icon .icon { display: inline-block; width: 65px; height: 38px; text-indent: -9999em; background-size: 65px 38px}

.coupon-icon .icon.point-3000 { background-image: url(/design/sona6769/images/pay_3000.png)}

.coupon-icon .icon.point-5000 { background-image: url(/design/sona6769/images/pay_5000.png)}

.coupon-icon .type { display: block; margin-top: 10px; font-weight: bold}

.coupon-icon .price { display: block; margin-top: 3px; font-weight: bold; font-size: 13px}

.coupon-icon.large .icon { width: 103px; height: 60px; background-size: 103px 60px}

.coupon-icon.large .icon.point-3000 { background-image: url(/design/sona6769/images/pay_3000_l.png)}

.coupon-icon.large .icon.point-5000 { background-image: url(/design/sona6769/images/pay_5000_l.png)}

.reserve-icon { display: inline-block; line-height: 1}

.reserve-icon .icon { display: inline-block; width: 60px; height: 62px; text-indent: -9999em; background-size: 60px 62px}

.reserve-icon .icon.point-500 { background-image: url(/design/sona6769/images/coin_500.png)}

.reserve-icon .icon.point-200 { background-image: url(/design/sona6769/images/coin_200.png)}

.reserve-icon .icon.point-100 { background-image: url(/design/sona6769/images/coin_100.png)}

.reserve-icon .type { display: block; margin-top: 10px; font-weight: bold}

.reserve-icon .price { display: block; margin-top: 3px; font-weight: bold; font-size: 13px}

.sn-notice-list { position: relative}

.sn-notice-list li { display: block; position: relative; padding-left: 12px; padding-bottom: 4px; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; color: #757575}

.sn-notice-list li em { font-style: normal; color: #303030}

.sn-notice-list li:last-child { padding-bottom: 0}

.sn-notice-list li::before { content: ''; display: block; position: absolute; top: 7px; left: 0; width: 4px; height: 4px; border: 1px solid rgba(0,0,0,0.6); border-radius: 50%}

.sn-notice-list li.no-order:before { border: 0px}

/*------------------------*/
/*--- membership */
.membership-intro { position: relative; padding-top: 55px; padding-bottom: 80px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.2)}

.membership-intro .subtitle { margin-bottom: 45px; font-size: 16px; color: #757575}

.membership-intro .benefit { display: inline-block}

.membership-intro .benefit-1 { position: relative; padding-right: 180px}

.membership-intro .benefit-1::after { content: ''; position: absolute; display: block; right: 90px; top: 0; width: 24px; height: 24px; margin-right: -12px; background-image: url(/design/sona6769/images/multiply.png); background-size: 24px 24px}

.membership-intro .benefit .title { font-size: 32px; font-weight: 600}

.membership-intro .benefit .number { position: relative; top: 2px; font-size: 36px; font-family: 'Noto Sans KR'; font-weight: 600}

.membership-intro .benefit small { position: relative; left: -5px; font-size: 20px; font-weight: 600}

.membership-intro .benefit .text { display: block; padding-top: 10px; text-align: left; font-size: 14px; color: #757575}

.membership-section { position: relative; margin-top: -1px; padding-top: 40px; padding-bottom: 35px; border: solid #d6d6d6; border-width: 1px 0}

.membership-section .section-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.membership-section.grade { border-top: 0}

.membership-section.grade .table-container { position: relative; padding-top: 15px}

.membership-section.grade table { table-layout: fixed; width: 100%}

.membership-section.grade table th { padding: 20px 0; border: 1px solid #dedede; text-align: left; font-size: 14px; font-weight: 400; color: #757575}

.membership-section.grade table td { padding: 20px 0 20px 10px; border: 1px solid #dedede; text-align: left; font-size: 14px; line-height: 20px; color: #303030}

.membership-section.grade table td.text-center { padding: 20px 0; text-align: center}

.membership-section.grade table td:last-child { border-right: 0}

.membership-section.grade table thead th { border: none; padding-bottom: 16px}

.membership-section.grade table tbody th { vertical-align: top; border-left: 0}

.membership-section.grade .badge-grade { margin-left: 10px}

.membership-section.grade .line { display: inline-block; width: 22px; height: 2px; background-color: #ddd; line-height: 0; vertical-align: middle}

.membership-section.grade .table-notice { padding-top: 20px}

.membership-section.grade .align-center { text-align: center}

.membership-section.grade .disconut th { vertical-align: middle; color: #303030}

.membership-section.grade .disconut td { height: 60px; padding-top: 0; padding-bottom: 0}

.membership-section.grade .coupons th { padding-top: 40px; color: #303030}

.membership-section.grade .coupons td { padding-left: 17px}

.membership-section.grade .coupons .coupon-icon + .coupon-icon { margin-left: 40px}

.membership-section.grade .reserve .reserve-icon + .reserve-icon { margin-left: 50px}

.membership-section.grade .reserve .reserve-text { margin-top: 20px}

.membership-section.grade .criteria { padding-top: 40px}

.membership-section.grade .criteria .section-title { margin-bottom: 25px}

.membership-section.grade .criteria .section-text { font-size: 14px}

.membership-section.grade .criteria .section-text + .section-text { margin-top: 6px}

.membership-section.condition { } 

.membership-section.condition .section-title { margin-bottom: 25px}

.membership-section.condition .section-text { font-size: 14px}

.membership-section.condition .section-text + .section-text { margin-top: 6px}

.membership-section.coupons { } 

.membership-section.coupons .check-header { margin-bottom: 40px}

.membership-section.coupons .check-header .section-title { } 

.membership-section.coupons .check-content { position: relative; padding-left: 65px; margin-bottom: 40px}

.membership-section.coupons .check-content .icon { position: absolute; left: 0; top: -3px; display: inline-block; width: 48px; height: 48px}

.membership-section.coupons .check-content .icon img { width: 100%}

.membership-section.coupons .check-content .section-subtitle { font-size: 14px; line-height: 1.6}

.membership-section.coupons .check-content .section-subtitle small { margin-top: 15px; display: block; font-size: 12px}

.membership-section.coupons .coupons-container { position: relative; padding-top: 30px; border-top: 2px dashed #303030}

.membership-section.coupons .coupons-container::before { content: ''; position: absolute; top: -11px; left: 15px; width: 21px; height: 21px; background-image: url(/design/sona6769/images/icon_cutter.png); background-size: 21px 21px}

.membership-section.coupons .coupons-header { margin-bottom: 25px}

.membership-section.coupons .coupon-list { } 

.membership-section.coupons .coupon-item { display: inline-block; position: relative; padding-left: 125px}

.membership-section.coupons .coupon-item + .coupon-item { margin-left: 100px}

.membership-section.coupons .coupon-icon { position: absolute; left: 0; top: 0}

.membership-section.coupons .coupon-info .type { margin-bottom: 4px; font-size: 16px; font-weight: bold}

.membership-section.coupons .coupon-info .text { font-size: 13px; } 

.membership-event { position: relative; height: 368px}

.membership-event .event-component { padding-top: 40px}

.membership-event .mini-title { display: block; padding-bottom: 18px; font-size: 16px}

.membership-event .title { padding-top: 10px; padding-bottom: 20px; font-size: 22px; line-height: 30px; font-weight: 600}

.membership-event .logo { width: 288px; height: 97px; margin: 0 auto}

.membership-event .logo img { width: 100%}

.membership-event.kakao { background-color: #fbe300; text-align: center}

/*------------------------*/
/*--- gift */
/*------------------------*/
/*--- gift */
.gift-section { position: relative; margin-top: -1px; padding-top: 40px; padding-bottom: 60px; border: solid #d6d6d6; border-width: 1px 0}
.gift-section#plus_gift {padding-top:150px;}
.gift-section .emp { color: #DD426F}

.gift-section .section-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 500; line-height: 26px; } 

.gift-section .section-title small { font-size: 14px}

.gift-section .section-stext { padding-top: 10px; font-size: 14px; font-weight: 600; color: #757575}

.gift-section .section-stext strong { color: #303030}

.gift-section.intro { position: relative; padding-top: 65px; padding-bottom: 40px; text-align: center; border-top: none}

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

.gift-section.intro .description { padding-top: 40px; font-size: 14px; line-height: 20px; color: #757575}

.gift-section.intro .intro-content { position: relative; float: left; width: 50%; height: 142px; text-align: left; box-sizing: border-box}

.gift-section.intro .intro-content .intro-title { font-size: 32px; font-weight: 600}

.gift-section.intro .intro-content .intro-description { font-size: 12px; line-height: 20px; color: #757575}

.gift-section.intro .intro-content .intro-description em { font-style: normal; color: #303030}

.gift-section.intro .intro-content.amount { position: relative}

.gift-section.intro .intro-content.amount::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background-color: #efefef}

.gift-section.intro .intro-content.amount .intro-title { margin-bottom: 29px}

.gift-section.intro .intro-content.basic { float: right; width: 50%; background-color: #fbfbfb; padding-left: 180px}

.gift-section.intro .intro-content.basic .image { position: absolute; left: 40px; top: 11px; width: 120px; height: 120px}

.gift-section.intro .intro-content.basic .image a { overflow: hidden; display: block; width: 118px; height: 118px; border-radius: 50%; background-color: #fff; border: 1px solid rgba(48,48,48,0.3)}

.gift-section.intro .intro-content.basic .image a img { width: 82px; margin: 18px}

.gift-section.intro .intro-content.basic .image img { width: 100%; height: auto}

.gift-section.intro .intro-content.basic .intro-title { padding-top: 30px; margin-bottom: 22px}

.gift-section.intro .intro-content.basic .intro-sub-title { margin-bottom: 10px; font-size: 20px; font-weight: 600}

.gift-section.intro .intro-content.promotion { position: relative; float: left; width: 50%; /*border:1px solid #fa2828; background-color:#fa2828*/}

.gift-section.intro .intro-content.promotion .image { position: relative; width: 353px; height: 65px; margin: 12px auto 0}

.gift-section.intro .intro-content.promotion .image img { width: 100%}

.gift-section.intro .intro-content.promotion .promotion-text { text-align: center; font-size: 16px; line-height: 1.4; color: #fff; font-weight: bold}

.gift-section.intro .intro-content.promotion .payco { display: inline-block; width: 63px; height: 14px; margin-top: 4px; line-height: 14px; vertical-align: top}

.gift-section.intro .intro-content.promotion .payco img { width: 100%}

.gift-section.basic { text-align: center}

.gift-section.basic .basic-gift { padding-top: 10px}

.gift-section.basic .basic-gift .product-item { display: inline-block}

.gift-section.basic .product-item .thumbnail { width: 200px; height: 200px}

.gift-section.basic .product-item .title { display: block; padding-top: 10px; color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.gift-section.basic .product-item .text { font-size: 16px; font-weight: 600; color: #757575}

.gift-section.basic .basic-gift .notice { padding-top: 20px; color: #757575}

.gift-section.basic .basic-gift .notice span { color: #303030}

.gift-section.criterion { } 

.gift-section.criterion .criterion-header { position: relative; margin-bottom: 40px; text-align: center}

.gift-section.criterion .criterion-header .section-title { font-size: 32px}

.gift-section.criterion .criterion-header .section-stext { padding-top: 14px; font-size: 20px}

.gift-section.criterion .freebie-item { position: relative; display: table; width: 100%}

.gift-section.criterion .freebie-item::after { content: ''; display: block; clear: both}

.gift-section.criterion .product-thumbnail { position: relative; display: table-cell; width: 70%; text-align: center}

.gift-section.criterion .product-thumbnail a { display: inline-block}

.gift-section.criterion .product-thumbnail .badge { position: absolute; left: 0; top: 0; display: block; text-align: center; vertical-align: middle; width: 126px; height: 126px; background-color: #fff; border: 1px solid #ddd; border-radius: 50%}

.gift-section.criterion .product-thumbnail .badge { left: 50%; margin-left: -260px}

.gift-section.criterion .product-thumbnail .badge .icon { display: inline-block; width: 52px; height: 58px; margin-top: 25px}

.gift-section.criterion .product-thumbnail .badge .icon img { width: 100%; height: auto}

.gift-section.criterion .product-thumbnail .badge .text { margin-top: 5px; font-size: 13px; font-weight: 500; } 

.gift-section.criterion .product-content { display: table-cell; vertical-align: middle; width: 30%}

.gift-section.criterion .product-content .name { margin-bottom: 25px; font-size: 40px; line-height: 1; font-weight: 500; } 

.gift-section.criterion .product-content .name small { font-size: 22px}

.gift-section.criterion .product-content .summary { margin-bottom: 30px; font-size: 20px; line-height: 1.2; color: #757575}

.gift-section.criterion .product-content .feature { margin-bottom: 50px; color: #757575; line-height: 1.4; font-size: 13px}

.gift-section.criterion .product-content .feature .en { display: block; text-transform: uppercase; font-weight: bold; letter-spacing: 0.02em}

.gift-section.criterion .product-content .price { position: relative; padding-bottom: 60px; font-size: 36px; font-weight: 500; line-height: 1; } 

.gift-section.criterion .product-content .price::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 2px; background-color: #eaeaea}

.gift-section.criterion .product-content .price .type { } 

.gift-section.criterion .product-content .price .amount { font-size: 38px; font-weight: bold}

.gift-section.criterion .product-content .price .currency { } 

.gift-section.criterion .product-content .price small { font-size: 20px}

.gift-section.criterion .criterion-notice { position: relative; padding: 30px 0 40px 75px; margin-top: 30px; background-color: #fbfbfb}

.gift-section.criterion .criterion-notice .section-subtitle { margin-bottom: 20px; font-size: 16px; font-weight: 500; } 

.gift-section.criterion .criterion-notice .sn-notice-list .item { color: #000; font-weight: 300; } 

.gift-section.criterion .criterion-notice .sn-notice-list span { color: #000; } 

.gift-section.amount { } 

.gift-section.amount .section-title { font-size: 32px}

.gift-section.amount .sn-notice-list { padding-top: 35px; padding-bottom: 60px}

.gift-section.amount .sn-notice-list li { font-weight: 600}

.gift-section.amount .sn-notice-list p { padding-top: 15px; font-weight: 600; font-size: 14px; color: #df4975}

.gift-section.amount .condition-list { position: relative}

.gift-section.amount .condition-list::after { content: ''; clear: both; display: block}

.gift-section.amount .condition-item { position: relative; float: left; width: 50%}

.gift-section.amount .condition-item.c-10, .gift-section.amount .condition-item.c-15 { padding-top: 110px}

.gift-section.amount .condition-item.c-15::after { content: ''; position: absolute; width: 585px; height: 365px; top: 50px; right: 0; border: 1px solid #d6d6d6}

.gift-section.amount .condition { position: relative}

.gift-section.amount .condition .price { font-family: 'Noto Sans KR'; font-size: 50px; font-weight: 600}

.gift-section.amount .condition .unit { position: relative; top: -4px; font-size: 24px; font-weight: 600}

.gift-section.amount .condition .text { padding-top: 10px; font-size: 20px; font-weight: 600; color: #757575}

.gift-section.amount .condition .text strong { color: #303030}

.gift-section.amount .condition .stext { position: absolute; bottom: -29px; font-size: 14px; font-weight: 600; color: #303030}

.gift-section.amount .gift-list { position: relative; padding-right: 30px; padding-top: 40px}

.gift-section.amount .gift-list::after { content: ''; clear: both; display: block}

.gift-section.amount .gift-item { position: relative; float: left; width: 33%; text-align: center}

.gift-section.amount .gift-item::after { content: '¶Ç´Â'; position: absolute; right: 0; top: 0; width: 40px; text-align: center; font-weight: 600; line-height: 130px; color: #757575}

.gift-section.amount .gift-item:last-child::after { display: none}

.gift-section.amount .mini-product-item { position: relative; margin-left: -35px}

.gift-section.amount .mini-product-item a { display: block}

.gift-section.amount .mini-product-item .thumbnail { display: inline-block; width: 130px; height: 130px}

.gift-section.amount .mini-product-item .thumbnail img { width: 100%}

.gift-section.amount .mini-product-item .information { } 

.gift-section.amount .mini-product-item .title { display: block; font-size: 14px; font-weight: 600; color: #303030}

.gift-section.amount .mini-product-item .price { display: block; padding-top: 5px; font-size: 14px; color: #757575}

.gift-section.promotion { position: relative; padding-top: 40px; padding-bottom: 40px}

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

.gift-section.promotion .promotion-banner { float: left; width: 630px; height: 190px; background-color: #fa2828}

.gift-section.promotion .promotion-banner img { width: 100%}

.gift-section.promotion .promotion-content { float: right; width: 400px}

.gift-section.promotion .promotion-item { position: relative; padding-left: 80px; margin-top: 30px}

.gift-section.promotion .promotion-item .icon { position: absolute; left: 0; top: -4px; width: 65px; height: 56px}

.gift-section.promotion .promotion-item .icon img { width: 100%}

.gift-section.promotion .promotion-item .title { margin-bottom: 13px; font-size: 22px; font-weight: 600; color: #303030}

.gift-section.promotion .promotion-item .desc { font-size: 14px; color: #303030}

.gift-section.promotion .promotion-item + .promotion-item { margin-top: 45px}

.gift-section.special { position: relative}

.gift-section.special .section-title { font-size: 32px; text-align: center}

.gift-section.special .section-stext { margin-bottom: 40px; text-align: center}

.gift-section.special .special-list-container { } 

.gift-section.special .special-list { position: relative}

.gift-section.special .special-list::after { content: ''; display: block; clear: both}

.gift-section.special .special-item { position: relative; float: left; width: 33.3%; text-align: center; padding-bottom: 40px}

.gift-section.special .special-item:nth-child(3n+1):nth-last-child(-n+3),.gift-section.special .special-item:nth-child(3n+1):nth-last-child(-n+3) ~ .special-item { padding-bottom: 0}

.gift-section.special .special-item img { width: 100%}

.gift-section.special .special-item:nth-of-type(3n+1) { clear: both}

.gift-section.special .special-item .discount { position: absolute; top: 0; right: 0; width: 100px; height: 100px; border-radius: 50%}

.gift-section.special .special-item .discount .title { display: block; padding-top: 22px; font-size: 18px; font-weight: 400; line-height: 24px}

.gift-section.special .special-item .discount .rate { display: block; padding-top: 2px; font-size: 28px; font-weight: 600; line-height: 34px}

/* .gift-section.special .special-item:nth-of-type(n+4) { padding-top:40px } */
.gift-section.special .product-area { } 

.gift-section.special .product-area .product { } 

.gift-section.special .product-area .product img { } 

.gift-section.special .content-area { } 

.gift-section.special .content-area .title { font-size: 18px; font-weight: 500; } 

.gift-section.special .content-area .price { line-height: 1; padding-top: 8px}

.gift-section.special .content-area .price * { font-size: 14px; color: #757575; vertical-align: middle; line-height: 1; font-weight: 500; } 

.gift-section.special .content-area .price .type { } 

.gift-section.special .content-area .price .amount { } 

.gift-section.special .content-area .price .currency { } 

.gift-section.special .content-area .summary { position: relative; margin-top: 12px; font-size: 18px; font-weight: 500; color: #dd426f; } 

.gift-section.service { position: relative; padding-top: 70px; border-bottom: none}

.gift-section.service .section-title { font-size: 32px}

.gift-section.service .major-text { padding-top: 37px; font-size: 24px; line-height: 30px; font-weight: 600; color: #303030}

.gift-section.service .minor-text { padding-top: 25px; font-size: 14px; line-height: 22px; color: #303030}

.gift-section.service .visual { position: absolute; right: 0; top: 55px; width: 230px; height: 224px}

.gift-section.service .visual img { width: 100%}

.gift-section.membership { } 

.gift-section.membership .membership-header { margin-bottom: 40px; text-align: center}

.gift-section.membership .membership-header .section-title { font-size: 32px; line-height: 1}

.gift-section.membership .membership-header .link-arrow { display: inline-block; position: relative; color: #303030; font-family: 'Noto Sans KR'; margin-top: 30px; padding-right: 15px; font-size: 15px; font-weight: 500; line-height: 20px; } 

.gift-section.membership .membership-header .link-arrow::after { content: ''; overflow: hidden; position: absolute; right: 0; top: 3px; display: block; width: 7px; height: 12px; background-image: url(/design/sona6769/images/grade-arrow.png); background-size: 7px 12px; text-indent: -9999px}

.gift-section.membership .membership-content { position: relative; text-align: center}

.gift-section.membership .grade-type { position: relative; margin-bottom: 50px}

.gift-section.membership .grade-type .grade { display: inline-block; border-radius: 50%; vertical-align: middle; text-align: center; width: 120px; height: 120px; line-height: 1.1; font-size: 24px; font-weight: 500; color: #fff; } 

.gift-section.membership .grade-type .grade + .grade { margin-left: 40px}

.gift-section.membership .grade-type .grade .type { display: block; padding-top: 31px; text-transform: uppercase}

.gift-section.membership .grade-type .grade .member { } 

.gift-section.membership .basic-benefits { position: relative; margin-bottom: 35px}

.gift-section.membership .basic-benefits::after { content: ''; display: block; clear: both}

.gift-section.membership .benefit-item { float: left; width: 500px; height: 120px; border: 1px solid #d6d6d6}

.gift-section.membership .benefit-item2 { position: relative; width: 500px; height: 120px; border: 1px solid #d6d6d6}

.gift-section.membership .coupon-icon { display: inline-block; margin-top: 30px; vertical-align: top}

.gift-section.membership .coupon-icon .icon { display: inline-block; width: 103px; height: 60px; text-indent: -9999em}

.gift-section.membership .coupon-icon .icon.point-5000 { background-image: url(/design/sona6769/images/point_5000.png); background-size: 103px 60px}

.gift-section.membership .coupon-icon .icon.point-3000 { background-image: url(/design/sona6769/images/point_3000.png); background-size: 103px 60px}

.gift-section.membership .discount-icon { display: inline-block; margin-top: 24px; vertical-align: top}

.gift-section.membership .discount-icon .icon { display: inline-block; width: 70px; height: 70px; border-radius: 50%; color: #fff; background-color: #dd426f; font-weight: bold}

.gift-section.membership .discount-icon .rate { display: inline-block; padding-top: 26px; font-size: 36px; letter-spacing: -0.075em; margin-right: 2px}

.gift-section.membership .discount-icon .percent { position: relative; top: -4px; font-size: 12px}

.gift-section.membership .benefit-content { display: inline-block; margin-top: 50px; padding-left: 25px; font-size: 20px; font-weight: bold}

.gift-section.membership .benefit-content em { } 

.gift-section.membership .and { float: left; width: 96px; height: 120px; text-align: center}

.gift-section.membership .and .and-icon { display: inline-block; width: 24px; height: 24px; margin-top: 50px; background-image: url(/design/sona6769/images/multiply.png); background-size: 24px 24px}

.gift-section.membership .member-go { position: relative}

.gift-section.membership .member-go::after { content: ''; clear: both; display: block}

.gift-section.membership .member-avail { float: left; width: 675px}

.gift-section.membership .member-avail ul { padding: 0 80px}

.gift-section.membership .member-join { float: right; width: 425px; padding-top: 9px}

.gift-section.membership .member-join .member-title { margin-bottom: 8px}

/*----location */
.location { padding-top: 82px}

.location .map { position: relative}

.location .map:first-child { margin-bottom: 100px}

.location .map h5 { font-size: 20px}

.location .map .map-image { margin-top: 20px; margin-bottom: 20px}

.location .map #showroom-banner { margin-top: 20px; margin-bottom: 20px}

.location .map .map-image img { width: 100%}

.location .map .address { font-size: 18px; color: #303030; line-height: 24px; margin-bottom: 20px}

.location .map .second-address { font-size: 14px; color: #999}

/*----monthly issue */
.minor-title { position: absolute; width: 100%; font-size: 14px; color: #757575; text-align: center; padding-top: 20px}

.monthly-issue { padding-top: 82px}

.monthly-issue:after { float: none; content: ''; display: block; } 

.monthly-issue .issue { position: relative; width: 350px; display: block; float: left; padding-right: 25px; padding-bottom: 60px}

.monthly-issue .issue:nth-child(3n+1) { clear: both}

.monthly-issue .issue:nth-child(3n) { padding-right: 0}

.monthly-issue .issue:nth-child(3n+1):nth-last-child(-n+3),.monthly-issue .issue:nth-child(3n+1):nth-last-child(-n+3) ~ .issue { padding-bottom: 0}

.monthly-issue .issue .issue-image { border: 1px solid rgba(48, 48, 48, 0.2); margin-bottom: 30px}

.monthly-issue .issue .issue-image img { width: 100%}

.monthly-issue .issue .issue-badge { font-family: 'Noto Sans KR'; display: inline-block; border: 1px solid #303030; padding: 3px 6px; border-radius: 2px; margin-bottom: 20px}

.monthly-issue .issue .issue-name { font-size: 24px; margin-bottom: 10px; line-height: 24px}

.monthly-issue .issue .issue-sub-name { font-size: 14px}

/* .issue.no-right-margin { margin-right:0px } */
/* .issue.last-issue-line { margin-bottom:0px } */
/*------------------------*/
/*--- skin */
.skin-section { position: relative; margin-top: -1px; padding-top: 40px; padding-bottom: 60px; border: solid #d6d6d6; border-width: 1px 0}

.skin-section .section-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.skin-section .section-title small { font-size: 14px}

.skin-section .section-stext { padding-top: 10px; font-size: 14px; font-weight: 600; color: #757575}

.skin-section .section-stext strong { color: #303030}

.skin-section.intro { position: relative; padding-top: 100px; padding-bottom: 70px; text-align: center; border-top: none; border-bottom: none}

.skin-section.intro .description { padding-top: 40px; font-size: 14px; line-height: 20px; color: #757575}

.skin-type-tabs { position: relative}

.skin-type-tabs::after { content: ''; display: block; clear: both}

.skin-type-tabs .type-item { float: left; width: 16.6%; border-bottom: 2px solid #dedede; text-align: center; -webkit-transition: border-color 180ms ease-in-out}

.skin-type-tabs .type-item .type-tab { display: block; padding-bottom: 26px}

.skin-type-tabs .type-item .text { font-size: 14px; color: #999; -webkit-transition: color 180ms ease-in-out}

.skin-type-tabs .type-item .title { display: block; font-size: 16px; font-weight: 600; color: #999; -webkit-transition: color 180ms ease-in-out}

.skin-type-tabs .type-item:hover,.skin-type-tabs .type-item.is-selected { border-bottom-color: #303030}

.skin-type-tabs .type-item:hover .text,.skin-type-tabs .type-item.is-selected .text { color: #303030}

.skin-type-tabs .type-item:hover .title, .skin-type-tabs .type-item.is-selected .title { color: #303030}

.skin-type { display: none; position: relative}

.skin-type.is-selected { display: block}

.skin-type .intro-content { position: relative; padding-top: 44px; padding-bottom: 44px; text-align: center}

.skin-type .intro-content .visual { display: inline-block; margin-top: 14px; width: 160px; height: 160px}

.skin-type .intro-content .visual img { width: 100%}

.skin-type .intro-content .title { font-size: 24px; line-height: 32px; font-weight: 600; color: #303030}

.skin-type .intro-content .description { padding-top: 13px; font-size: 14px; line-height: 20px; color: #757575}

.skin-type .intro-content .note { position: absolute; width: 100%; font-size: 12px; line-height: 18px; color: #dd426f}

.skin-type .product-type-list { position: relative; display: flex}

.skin-type .product-type-list::after { content: ''; display: block; clear: both; } 

.skin-type .product-type-list .type-item { position: relative; float: left; width: 12.5%; padding: 16px 0 100px; text-align: center}

.skin-type .product-type-list.list-6 .type-item { width: 16.6%}

.skin-type .product-type-list .type-item:nth-child(even) { background-color: #fafafa}

.skin-type .product-type-list .type-item:nth-child(odd) { background-color: #fff}

.skin-type .product-type-list .type-item:nth-child(even)::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: -webkit-linear-gradient(top, #fafafa 0%,#fff 100%); background: -ms-linear-gradient(top, #fafafa 0%,#fff 100%); background: linear-gradient(top, #fafafa 0%,#fff 100%)}

.skin-type .product-type-list .type-header { position: relative; padding-bottom: 25px; margin-bottom: 50px; color: #303030}

.skin-type .product-type-list .type-header::after { content: ''; position: absolute; bottom: 0; left: 50%; margin-left: -16px; width: 32px; height: 2px; background-color: #bdbdbd}

.skin-type .product-type-list .type-header .step { display: inline-block; width: 79px; height: 26px; border-radius: 3px; line-height: 26px; text-align: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #fff; background-color: #c0c0c0}

.skin-type .product-type-list .type-header .ko { display: block; padding-top: 39px; padding-bottom: 5px; font-size: 16px; font-weight: 600; letter-spacing: -0.025em}

.skin-type .product-type-list .type-header .en { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em}

.skin-type .type-item:nth-of-type(1) .type-header .step { background-color: #c0c0c0}

.skin-type .type-item:nth-of-type(2) .type-header .step { background-color: #ababab}

.skin-type .type-item:nth-of-type(3) .type-header .step { background-color: #979797}

.skin-type .type-item:nth-of-type(4) .type-header .step { background-color: #848484}

.skin-type .type-item:nth-of-type(5) .type-header .step { background-color: #6e6e6e}

.skin-type .type-item:nth-of-type(6) .type-header .step { background-color: #5c5c5c}

.skin-type .type-item:nth-of-type(7) .type-header .step { background-color: #444444}

.skin-type .type-item:nth-of-type(8) .type-header .step { background-color: #353535}

.skin-type .product-list .product-item + .product-item { padding-top: 40px}

.skin-type .product-list .product-item a { display: block}

.skin-type .product-list .product-item .thumbnail { display: block; width: 126px; height: 126px; margin: 0 auto}

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

.skin-type .product-list .product-item .title { display: block; width: 100%; padding-top: 5px; font-size: 12px; font-weight: 600; line-height: 18px}

/*------------------------*/
/*--- recall */
.recall-section { position: relative; margin-top: -1px; padding-top: 40px; padding-bottom: 60px; border: solid #d6d6d6; border-width: 1px 0}

.recall-section .section-title { color: #303030; font-family: 'Noto Sans KR'; font-size: 20px; font-weight: 600; line-height: 26px}

.recall-section .section-title small { font-size: 14px}

.recall-section .section-stext { padding-top: 10px; font-size: 14px; font-weight: 600; color: #757575}

.recall-section .section-stext strong { color: #303030}

.recall-section.intro { position: relative; padding-top: 100px; padding-bottom: 70px; text-align: center; border-top: none; border-bottom: none}

.recall-section.intro .description { padding-top: 40px; font-size: 14px; line-height: 20px; color: #757575}

.recall-section.notice { position: relative; padding-top: 35px; padding-left: 190px}

.recall-section.notice .sn-notice-list { padding-top: 10px}

.recall-section.notice .icon { position: absolute; left: 100px; top: 70px; width: 12px; height: 50px; background-color: #f1f1f1}

.recall-section.notice .icon img { width: 100%}

.recall-product-container { position: relative; padding-top: 10px}

.recall-product-list { position: relative}

.recall-product-list::after { content: ''; display: block; clear: both}

.recall-product-item { float: left; width: 430px; padding: 40px}

.recall-product-item:nth-child(even) { float: right}

.recall-product-item .product-item { } 

.recall-product-item .product-thumbnail { position: relative; display: block}

.recall-product-item .product-thumbnail::after { content: ''; display: block; clear: both}

.recall-product-item .product-area { float: left; width: 270px}

.recall-product-item .product-area .image { width: 320px; height: 380px; background-color: #f1f1f1}

.recall-product-item .product-area .image img { width: 100%}

.recall-product-item .recall-area { float: right; padding-top: 100px}

.recall-product-item .recall-area .icon { width: 100px; height: 100px; margin: 0 auto 20px; border-radius: 50%; text-align: center; background-color: #f1f1f1}

.recall-product-item .recall-area .icon span { display: inline-block; padding-top: 20px; font-size: 20px; font-weight: 600; line-height: 30px; color: #fff}

.recall-product-item .recall-area .icon em { font-weight: 500}

.recall-product-item .recall-area em { font-family: 'Noto Sans KR'; font-style: normal}

.recall-product-item .recall-area .sample { } 

.recall-product-item .recall-area .sample span { display: block}

.recall-product-item .recall-area .sample .image { width: 102px; height: 110px; margin: 0 auto 10px; border-bottom: 1px solid #bfbfbf; background-color: #f1f1f1}

.recall-product-item .recall-area .sample .image img { width: 100%}

.recall-product-item .recall-area .sample .title { text-align: center; font-size: 14px; color: #303030; font-weight: 700}

.recall-product-item .recall-area .sample .title em { font-size: 13px}

.recall-product-item .recall-area .sample .text { text-align: center; color: #757575}

.recall-product-item .product-information { padding-top: 50px}

.recall-product-item .product-title { position: relative}

.recall-product-item .product-title .text { font-size: 16px; font-weight: 600; color: #757575}

.recall-product-item .product-title .title { display: block; padding-top: 7px; padding-bottom: 20px; font-size: 20px; font-weight: 600; color: #353535}

.recall-product-item .product-title .features { display: block; position: absolute; top: 0; right: 0; padding-right: 10px; padding-left: 10px; background-color: #303030; border-radius: 2px; color: #fff; font-family: 'Noto Sans KR'; font-size: 12px; font-weight: 600; line-height: 16px}

.recall-product-item .product-title .description { font-size: 14px; line-height: 18px; color: #757575}

.recall-product-item .sn-notice-list { padding-top: 35px; padding-bottom: 40px}

.recall-product-item .product-price { position: relative}

.recall-product-item .product-price em { font-family: 'Noto Sans KR'; font-style: normal}

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

.recall-product-item .product-price .unit { padding-left: 3px; color: #757575}

.recall-product-item .product-price .ml { position: absolute; right: 0; top: 4px}

/*------------------------*/
/*--- kakao */
.kakao-section { position: relative; margin-top: -1px; padding-top: 40px; padding-bottom: 60px; border: solid #d6d6d6; border-width: 1px 0}

.kakao-section .section-title { font-size: 20px; font-weight: 600; color: #303030}

.kakao-section.intro { position: relative; border-top: 0; padding-top: 100px}

.kakao-section.intro .kakao-intro { position: relative; margin-bottom: 60px; text-align: center}

.kakao-section.intro .kakao-intro .target { display: inline-block; font-size: 32px; font-weight: 600; color: #303030}

.kakao-section.intro .kakao-intro .between { display: inline-block; width: 190px; text-align: center; vertical-align: top}

.kakao-section.intro .kakao-intro .between .icon { display: inline-block; width: 25px; height: 25px}

.kakao-section.intro .kakao-intro .between .icon img { width: 100%}

.kakao-section.intro .intro-visual { width: 320px; height: 380px; margin: 0 auto}

.kakao-section.intro .intro-visual img { width: 100%}

.kakao-section.intro .intro-title { position: relative; padding-top: 50px; text-align: center}

.kakao-section.intro .intro-title .text { font-size: 20px; line-height: 1; font-weight: 600; color: #757575}

.kakao-section.intro .intro-title .title { padding-top: 20px; line-height: 1; font-size: 36px; font-weight: 700; color: #303030}

.kakao-section.benefit { position: relative; padding-bottom: 60px}

.kakao-section.benefit .section-title { padding-bottom: 40px; text-align: center}

.kakao-section.benefit .benefit-list { position: relative; padding: 0 85px}

.kakao-section.benefit .benefit-list::after { content: ''; display: block; clear: both}

.kakao-section.benefit .benefit-item { float: left; width: 33.3%; text-align: center}

.kakao-section.benefit .benefit-item:first-child { text-align: left}

.kakao-section.benefit .benefit-item:last-child { text-align: right}

.kakao-section.benefit .benefit-inner { display: inline-block; text-align: center}

.kakao-section.benefit .benefit-inner .icon { width: 60px; height: 50px; margin: 0 auto}

.kakao-section.benefit .benefit-inner .icon img { width: 100%}

.kakao-section.benefit .benefit-inner .title { padding-top: 35px; font-size: 20px; letter-spacing: .06em; font-weight: 700; color: #353535}

.kakao-section.benefit .benefit-inner .description { padding-top: 15px; font-size: 14px; line-height: 20px; font-weight: 600; color: #353535}

.kakao-section.guide { position: relative}

.kakao-section.guide .guide-content { position: relative}

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

.kakao-section.guide .text-guide { float: left; padding-top: 120px}

.kakao-section.guide .text-guide .section-title { padding-bottom: 45px}

.kakao-section.guide .text-guide .location { font-size: 24px; font-weight: 600}

.kakao-section.guide .text-guide .location span { display: inline-block; width: 50px; text-align: center; font-family: 'Noto Sans KR'}

.kakao-section.guide .text-guide .text { padding-top: 30px; font-size: 24px}

.kakao-section.guide .text-guide .text .text-underline { position: relative}

.kakao-section.guide .text-guide .text .text-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background-color: #303030}

.kakao-section.guide .image-guide { float: right; width: 530px; height: 380px}

.kakao-section.guide .image-guide img { width: 100%}

.kakao-section.qr { position: relative; border-bottom: none}

.kakao-section.qr .qr-content { position: relative; padding-left: 280px}

.kakao-section.qr .qr-content .icon { position: absolute; left: 0; top: 65px; width: 180px; height: 180px}

.kakao-section.qr .qr-content .icon img { width: 100%}

.kakao-section.qr .procedure-guide { position: relative; padding-top: 85px}

.kakao-section.qr .procedure-guide::after { content: ''; display: block; content: ''}

.kakao-section.qr .procedure-guide .step { float: left; width: 146px}

.kakao-section.qr .procedure-guide .step .number { display: inline-block; padding-bottom: 20px; font-size: 42px; font-family: 'Noto Sans KR'; font-weight: 600; color: 353535}

.kakao-section.qr .procedure-guide .step .description { padding-top: 15px; border-top: 1px solid #353535; font-size: 22px; font-weight: 600; line-height: 34px; color: #353535}

.kakao-section.qr .procedure-guide .step.step-1 { margin-right: 140px}

.kakao-section.qr .procedure-guide .step.step-2 { margin-right: 140px}

#tocplusWindow { position: fixed; bottom: 20px; right: 110px; width: 200px !important; z-index: 1000; border-radius: 2px; display: none; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2)}

#tocplusWindow>div { border: none !important; padding: 6px}

#tocplusWindow.active { display: block}

#tocplusWindow #eTkZp { overflow: hidden; position: relative; display: block; width: 174px; padding-bottom: 4px; margin-bottom: 5px; border-bottom: 1px solid rgba(48,48,48,0.3); text-indent: -9999px}

#tocplusWindow #TpTbw > div:nth-of-type(2) { display: none}

#tocplusWindow #eTkZp::before { content: '½Ç½Ã°£ »ó´ã'; position: absolute; display: block; color: #757575; font-family: 'Noto Sans KR'; font-size: 12px; line-height: 20px; text-indent: 0}

.n-pay .npay_type_D_1_2,.n-pay .npay_type_D_2_2 { width: 100% !important; height: 83px !important}

.ui-datepicker { z-index: 200 !important}

.showroom-intro { position: relative; padding-bottom: 60px; text-align: center}

.showroom-intro .title-ko { font-size: 46px; line-height: 50px; letter-spacing: 2px; font-weight: 500; } 

.showroom-intro .title-en { padding-top: 20px; font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; } 

.showroom-intro .description { padding-top: 40px; font-family: 'Noto Sans KR'; font-size: 16px; font-weight: 300; line-height: 22px; color: #000; } 

.showroom-section.banner { height: 620px}

.showroom-section.banner img { width: 100%}

.showroom-section.feature { position: relative; padding-bottom: 90px}

.showroom-section.feature .feature-list { position: relative; padding-top: 70px}

.showroom-section.feature .feature-list::after { content: ''; display: block; clear: both}

.showroom-section.feature .feature-item { float: left; width: 33.3%; text-align: center}

.showroom-section.feature .feature-item .icon { width: 140px; height: 70px; margin: 0 auto 20px}

.showroom-section.feature .feature-item .icon img { width: 100%}

.showroom-section.feature .feature-item .title { font-size: 20px; line-height: 26px; font-weight: 500; color: #303030; } 

.showroom-section.feature .feature-item .description { padding-top: 15px; font-size: 14px; line-height: 20px; color: #000; font-weight: 300; } 

.showroom-section.map { position: relative; padding-bottom: 60px; border-bottom: 1px solid #d6d6d6}

.showroom-section.map .map-area { height: 710px}

.showroom-section.map .info-area { position: relative; padding-top: 30px}

.showroom-section.map .info-area::after { content: ''; display: block; clear: both}

.showroom-section.map .info-item { float: left}

.showroom-section.map .info-item .title { display: block; margin-bottom: 13px; font-size: 12px; font-weight: 500; color: #303030; } 

.showroom-section.map .info-item .emphasis { font-size: 20px; line-height: 24px; font-weight: 500; color: #303030; } 

.showroom-section.map .info-item .text { padding-top: 5px; font-size: 14px; line-height: 20px; color: #000; font-weight: 300; } 

.showroom-section.map .info-item.directions { width: 400px}

.showroom-section.map .info-item.hour { } 

.showroom-section.map .info-item.contact { float: right}

.showroom-section.event { position: relative; padding: 60px 0}

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

.showroom-section.event .event { position: relative; float: left}

.showroom-section.event .event .type { display: block; font-size: 22px; font-weight: 700; color: #dd426f}

.showroom-section.event .event .image { position: absolute; right: 0}

.showroom-section.event .event .image img { width: 100%}

.showroom-section.event .event .title { padding-top: 25px; font-size: 20px; line-height: 26px; font-weight: 600; color: #303030}

.showroom-section.event .event .description { padding-top: 20px; font-size: 14px; line-height: 20px; color: #303030}

.showroom-section.event .event .description + .description { padding-top: 5px}

.showroom-section.event .event .stext { position: relative; display: block; padding-left: 14px; padding-top: 25px; font-size: 12px; line-height: 18px; color: #757575}

.showroom-section.event .event .stext::after { content: '*'; position: absolute; top: 25px; left: 0; line-height: 18px}

.showroom-section.event .event.event-1 { width: 550px; margin-right: 60px; border-right: 1px solid #d6d6d6}

.showroom-section.event .event.event-1 .image { right: 90px; top: 40px; width: 205px; height: 205px}

.showroom-section.event .event.event-2 { float: right; width: 489px}

.showroom-section.event .event.event-2 .image { right: 20px; width: 170px; height: 280px; bottom: 0}

.showroom-section.event .event.event-2 .btn-more { margin-top: 35px}

.hold-content { width: 860px; margin-right: auto; margin-left: auto; padding-top: 80px}

.hold-content .hold-title { padding-bottom: 20px; color: #303030; font-size: 18px; font-weight: 600; line-height: 30px}

.hold-content .hold-desc { padding-top: 40px; padding-bottom: 40px; border-top: 1px solid rgba(48,48,48,0.3); border-bottom: 1px solid rgba(48,48,48,0.3); font-size: 15px; line-height: 22px}

.hold-content .hold-desc p { padding-bottom: 30px}

.hold-content .hold-desc p:last-child { padding-bottom: 0}

#user-hold .form-util { text-align: right; padding-top: 18px}

#user-hold .form-util a { display: inline-block; width: 118px; height: 58px; border: 1px solid #303030; background-color: #303030; color: #fff; vertical-align: top; text-align: center; font-family: 'Noto Sans KR'; font-size: 20px; line-height: 58px; font-weight: 600; -webkit-transition: background-color 180ms ease-in-out,color 180ms ease-in-out}

#user-hold .form-util a:hover { background-color: #fff; color: #303030}

.cou-align { margin-bottom: 10px; text-align: center}

.cou-num { font-family: 'Noto Sans KR'; font-size: 24px; vertical-align: bottom; font-weight: 400; } 

.cou-box { background-color: #ff6a90; color: white; border: 1px solid; border-color: #ff6a90; padding: 15px 30px; text-align: center; text-decoration: none; font-size: 20px; display: inline-block; vertical-align: bottom; -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: white; color: #ff6a90; border: 1px solid; border-color: #ff6a90; } 

.cou-box2 { background-color: #303030; color: white; border: 1px solid; border-color: #303030; padding: 15px 30px; text-align: center; text-decoration: none; font-size: 18px; display: inline-block; vertical-align: bottom; -webkit-transition: background-color 180ms ease-in-out, border-color 180ms ease-in-out, color 180ms ease-in-out; font-weight: 300; } 

.cou-box2:hover { background-color: white; color: #303030; border: 1px solid; border-color: #303030; } 

/*--- 2018-02-02 ununa */
.natural-lab { position: relative; margin-top: -20px}

.natural-lab .lab-header { position: relative; margin-bottom: 60px; text-align: center}

.natural-lab .lab-header .subtitle { margin-bottom: 19px; line-height: 1; font-size: 42px}

.natural-lab .lab-header .title { margin-bottom: 23px; line-height: 1; font-size: 42px; font-weight: 700; text-transform: uppercase}

.natural-lab .lab-header .text { display: inline-block; padding: 10px 20px; background-color: #303030; font-size: 18px; font-weight: 600; color: #fff; text-transform: uppercase}

.natural-lab .lab-info { position: relative; padding-left: 540px; min-height: 214px; margin-bottom: 60px}

.natural-lab .lab-info .title { padding-top: 26px; font-size: 36px; font-weight: 700; text-transform: uppercase}

.natural-lab .lab-info .subtitle { padding-top: 26px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600}

.natural-lab .lab-info .description { padding-top: 38px; font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; color: #757575}

.natural-lab .lab-info .figure { position: absolute; left: 0; top: 0; width: 490px; height: 214px; background-color: #ccc}

.natural-lab .lab-team { position: relative; margin-bottom: 70px}

.natural-lab .lab-team::after { content: ''; display: block; clear: both}

.natural-lab .lab-team .circle { position: absolute; top: 0; width: 200px; height: 200px; border-radius: 50%; background-color: #303030}

.natural-lab .lab-team .inner { position: relative; padding-top: 68px}

.natural-lab .lab-team .header { padding-bottom: 15px; border-bottom: 2px solid #989898; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600}

.natural-lab .lab-team .feature { padding-top: 28px}

.natural-lab .lab-team .item { font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; color: #757575}

.natural-lab .lab-team .sgl, .natural-lab .lab-team .between, .natural-lab .lab-team .sn { position: relative; float: left; min-height: 200px}

.natural-lab .lab-team .sgl { width: 490px}

.natural-lab .lab-team .sgl .circle { right: 0}

.natural-lab .lab-team .between { width: 120px; line-height: 200px; text-align: center}

.natural-lab .lab-team .sn { width: 490px; text-align: right}

.natural-lab .lab-team .sn .circle { left: 0}

.natural-lab .lab-member { position: relative; padding-right: 490px; margin-bottom: 100px}

.natural-lab .lab-member .header { position: relative; margin-bottom: 44px; padding-top: 3px}

.natural-lab .lab-member .header .name { font-size: 26px; font-weight: 700}

.natural-lab .lab-member .career { position: relative; margin-bottom: 40px}

.natural-lab .lab-member .career::after { content: ''; display: block; clear: both}

.natural-lab .lab-member .career .left { float: left}

.natural-lab .lab-member .career .right { float: right}

.natural-lab .lab-member .career .summary { line-height: 20px; font-size: 14px; font-weight: 600; letter-spacing: -0.025em}

.natural-lab .lab-member .career .list { } 

.natural-lab .lab-member .career li { line-height: 20px; font-size: 14px; font-weight: 600; letter-spacing: -0.025em}

.natural-lab .lab-member .career em { font-style: normal; color: #d11919}

.natural-lab .lab-member .quote { margin-bottom: 23px}

.natural-lab .lab-member .quote p { font-family: 'Noto Sans KR'; font-size: 14px; line-height: 20px; color: #757575}

.natural-lab .lab-member .signature { position: relative}

.natural-lab .lab-member .signature .name { position: relative; display: inline-block; height: 24px; padding-top: 18px; padding-right: 120px; font-family: 'Noto Sans KR'; font-size: 14px; font-weight: 600}

.natural-lab .lab-member .signature .name::after { content: ''; position: absolute; right: 0; top: 0; width: 90px; height: 42px; background: url(/design/sona6769/images/lab-member-signature.png) no-repeat 0 0}

.natural-lab .lab-member .figure { position: absolute; right: 0; top: 0}

.natural-lab .lab-feature { position: relative; padding-bottom: 160px}

.natural-lab .lab-feature .feature-list { position: relative}

.natural-lab .lab-feature .feature-list::after { content: ''; display: block; clear: both}

.natural-lab .lab-feature .feature-list .item { float: left; width: 284px}

.natural-lab .lab-feature .feature-list .header { margin-bottom: 30px; padding-bottom: 18px; border-bottom: 4px solid #303030}

.natural-lab .lab-feature .feature-list .number { font-size: 42px; font-weight: 800}

.natural-lab .lab-feature .feature-list .text { line-height: 31px; letter-spacing: -0.025em; font-size: 23px; font-weight: 700}

.natural-lab .lab-feature .feature-list .item + .item { margin-left: 124px}

.jcarousel-skin-tango { margin:; } 

.jcarousel-skin-tango .jcarousel-container { background: #FFF; } 

.jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; } 

.jcarousel-skin-tango .jcarousel-container-horizontal { padding:; } 

/*.jcarousel-skin-tango .jcarousel-container-vertical { width: 60px; height: 230px; padding: 10px 0; margin:0 auto; overflow:hidden; } */
.jcarousel-skin-tango .jcarousel-clip { overflow: hidden; } 

.jcarousel-skin-tango .jcarousel-clip-horizontal { width:; height:; } 

.jcarousel-skin-tango .jcarousel-clip-vertical { width: 61px; height: 126px; } 

/*.jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 0; margin-right: 10px; } */
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; } 

.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom:; padding:; } 

.jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } 

/**
 * Horizontal Buttons
 */
/*.jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 43px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-horizontal.png) no-repeat 0 0; } */
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; } 

.jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus { cursor: pointer; } 

.jcarousel-skin-tango .jcarousel-next-horizontal:active { } 

/*.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; opacity:.3!important; filter:alpha(opacity=30); } 

.jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 43px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-horizontal.png) no-repeat 0 0; } */
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; background-image: url(next-horizontal.png); } 

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { cursor: pointer; } 

.jcarousel-skin-tango .jcarousel-prev-horizontal:active { } 

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; } 

/**
 * Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical { position: absolute; bottom: 0px; right: 8px; width: 22px; height: 9px; cursor: pointer; background: #FFF url(/design/sona6769/images/btn_down.gif) no-repeat 0 0; } 

.jcarousel-skin-tango .jcarousel-next-vertical:hover, .jcarousel-skin-tango .jcarousel-next-vertical:focus { } 

.jcarousel-skin-tango .jcarousel-next-vertical:active { } 

.jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:focus, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active { cursor: default; } 

.jcarousel-skin-tango .jcarousel-prev-vertical { position: absolute; bottom: 0px; left: 8px; width: 22px; height: 9px; cursor: pointer; background: #FFF url(/design/sona6769/images/btn_up.gif) no-repeat 0 0; } 

.jcarousel-skin-tango .jcarousel-prev-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-vertical:focus { } 

.jcarousel-skin-tango .jcarousel-prev-vertical:active { } 

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active { cursor: default; } 

.displaynone { display: none !important; } 

.category-best .product-item .product-item-container .badges .badge span { font-weight: 500; } 

.aside .monthly-item .major-title h2, .aside .instagram-feed .major-title h2 { font-weight: 300; } 

/* 2024 07 15 new header */
#header { position: absolute; top: 0; left: 0; right: 0; height: 122px; box-sizing: border-box; background: #fff; -weblit-transition: transform 0.3s ease; transition: transform 0.3s ease; z-index: 999; width: 100%;    border-bottom: 1px solid #ebebeb; } 

#header .header-inner {padding: 45px 0 40px;width: 1100px;margin: 0 auto;height: 37px;font-size: 0;position: relative;display: flex;align-items: center;justify-content: space-between;} 

#header.fixed { position: fixed;     border-bottom: 1px solid #ebebeb;} 

#header .logo  {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
}
#header .logo img { width: 173px;}
#header .left {
    display: flex;
    vertical-align: middle;
    z-index: 9;
    align-items: center;
}
#header .left .menuBtn { width: 19px; margin-right: 23px; cursor: pointer; } 

#header .left .menuList { } 

#header .left .menuList ul { display: flex; align-items: center; margin-top: -4px; } 

#header .left .menuList ul li { } 

#header .left .menuList ul li + li { margin-left: 18px; } 

#header .left .menuList ul img { } 

#header .left .menuBtn img { width: 100%; } 

#header .left .menuList ul li a { color: #303030; font-size: 16px; font-weight: bold; } 

#header .left .menuList ul li:first-child a { color: #e42a83; } 

#header .right {position: relative;display: inline-block;vertical-align: middle;z-index: 9;} 
 
#header .right ul { display: flex; align-items: center; justify-content: flex-end; } 

#header .right ul li { margin-left: 8px; font-size: 9px; } 

#header .right ul li:last-child { margin-left: 15px; } 

#header .right ul li.lang { margin-left: 18px; } 

#header .right ul li a { position: relative; color: #303030; font-size: 15px; } 

#header .right ul li .joinPoint { background: url(/design/sona6769/images/Triangle1.png) no-repeat; color: #fff; width: 51px; height: 23px; display: inline-block; background-size: contain; text-align: center; font-size: 10px; position: absolute; top: -23px; left: 0; } 

#header .right ul li a img { width: 18px; } 

#header .right ul li a #user_basket_quantity { background: #000; width: 12px; height: 12px; position: absolute; top: 0px; right: -4px; color: #fff; border-radius: 100%; text-align: center; line-height: 12px; font-size: 10px; } 

#header .searchArea { width: 197px; display: block; position: absolute; bottom: -35px; right: 0; } 

#header .searchArea .search input { display: block; width: 100%; height: 21px; margin: 0; padding: 2px 20px 2px 2px; background-color: transparent; border: none; outline: none; border-bottom: 1px solid rgba(48, 48, 48, 0.3); color: #000; font-size: 12px; line-height: 21px; font-weight: 300; box-sizing: border-box; } 

#header .searchArea .search a { overflow: hidden; display: block; position: absolute; top: 0; right: 0; width: 20px; height: 20px; margin: 0; padding: 0; text-align: center; } 

#header .searchArea .search a img { margin-top: 3px; } 

.quick { position: fixed; bottom: 38px; right: 38px; z-index: 99; } 

.quick a { display: block; position: relative; } 

.quick a + a { margin-top: 12px; } 

.quick a span { color: #fff; position: absolute; z-index: 100; right: 20px; top: 17px; font-size: 10px; width: 11px; text-align: center; letter-spacing: -1px; } 

.sub-wrap { position: absolute; top: 121px; line-height: 18px; background: #fff; width: 100%; left: 0px; padding: 50px 0 60px; box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; z-index: 10000; border-top: 1px solid #bdbdbd; border-bottom: 1px solid rgba(189, 189, 189, 0.8); } 

.sub-wrap.fixed { position: fixed; } 

.sub-wrap.active { opacity: 1; visibility: visible}

.sub-wrap-inner { width: 1100px; margin: 0 auto; display: flex; align-items: stretch; justify-content: flex-start; position: relative; } 

.sub-wrap-inner > div { box-sizing: border-box; } 

.sub-wrap-inner .first { width: 73px; } 

.sub-wrap-inner > div + div { border-left: 1px solid #dedede; padding-left: 40px; } 

.sub-wrap-inner .second { width: 602px; } 

.sub-wrap-inner .third { width: calc(100% - 602px - 73px); } 

.sub-wrap-inner > div .big-cate { display: flex; justify-content: space-between; } 

.sub-wrap-inner > div .big-cate a { color: #303030; font-size: 16px; font-weight: bold; } 

.sub-wrap-inner > div.first .big-cate a { color: #e42a83; } 

.sub-wrap-inner > div .sub-nav { } 

.sub-wrap-inner > div .sub-nav > li { display: inline-block; position: relative; min-width: 138px; vertical-align: top; } 

.sub-wrap-inner > div .sub-nav > li > a { display: block; position: relative; padding: 30px 30px 15px 0; text-transform: uppercase; color: #303030; font-size: 16px; font-weight: 500; line-height: 20px; -webkit-transition: color 180ms ease-in-out; } 

.sub-wrap-inner > div .sub-nav > li > a > span { display: inline-block; position: relative; vertical-align: top; } 

.sub-wrap-inner > div .sub-nav > li .sub-depth { /* position: absolute; */
 /* width: 160px; */}

.sub-wrap-inner > div .sub-nav > li .sub-depth > li { display: block; } 

.sub-wrap-inner > div .sub-nav > li .sub-depth > li > a { position: relative; display: inline-block; /* margin-left: 30px; */
 padding: 9px 0; color: #656565; font-size: 14px; line-height: 15px; font-weight: 400; } 

.sub-wrap-inner > div .sub-nav > li .sub-depth > li > a:hover { color: #000; } 

.sub-wrap-inner > div .sub-nav > li .sub-depth > li > a::after { content: ''; display: block; position: absolute; top: 50%; right: -13px; width: 9px; height: 9px; background-color: #dd426f; border-radius: 50%; opacity: 0; transform: translateY(-50%); -webkit-transition: opacity 180ms ease-in-out}

.sub-wrap-inner > div .sub-nav > li .sub-depth > li > a:hover::after { opacity: 1; } 

.sub-wrap-inner > div .sub-nav > li .sub-depth > li > .sub { padding-bottom: 13px; font-size: 12px; line-height: 18px; color: #656565; display: block; /* margin-left: 30px; */
 font-weight: 300; } 

.sub-wrap-inner > div.third .sub-nav > li { display: block; padding: 18px 30px 0 0; } 

.sub-wrap-inner > div.third .sub-nav > li:first-child { padding-top: 30px; } 

.sub-wrap-inner > div.third .sub-nav > li > a { padding: 0; } 

.sub-wrap-inner > div.third .sub-nav > li > ul.sub-depth { margin-top: 15px; } 

.sub-banner { position: absolute; bottom: 8px; right: 8px; } 

.sub-banner a { display: block; margin-top: 8px; position: relative; } 

.sub-banner .title { position: absolute; top: 50%; transform: translateY(-50%); left: 20px; color: #303030; } 

.sub-banner .title h3 { font-size: 15px; font-weight: bold; } 

.sub-banner .title h5 { font-size: 14px; line-height: 1.25; font-weight: 300; padding-top: 8px; } 
 



/* top banner */
/* top banner */
/* top banner */


.topbanner {
  position: relative;
  min-width: 1200px;
  /*height: 50px;*/
  overflow: hidden; display:none;
}
.topbanner .inner {
/*  background-color: #5343f0; */
  text-align: center;
}
.topbanner .inner2 {
  
  text-align: center;
}
.topbanner .inner img {
  max-width: 100%;
}
.topbanner .inner form {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    outline: 0;
    right: 100px;
    z-index: 99;
} 
header#sn-header.topbanner-container.min .topbanner{
    display:none;
} 
#sn-header.min {
    height: 80px !important; margin-top:0 !important;
}
.positionfixed{
    position: fixed;
    top: 0;
    z-index: 2222;
    width: 100%;}

.topbanner {height:50px; overflow:hidden; }

/* top banner */
/* top banner */
/* top banner */
/* BASIC css end */