@charset "utf-8";

html, body {-webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, main, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, select, svg {margin: 0; padding: 0; font: inherit; color: inherit; vertical-align: baseline; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; -webkit-touch-callout: none;}
*:after, *:before {box-sizing: border-box;}
main, header, nav, section, footer, menu, article, aside, details, figcaption, figure, hgroup {display: block;}
address,cite,code,em {font-style: inherit; font-weight: inherit;}
ol, ul {list-style: none;}
fieldset {border: 0;}
strong {font-weight: 500;}
small {font-size: 14px; font-weight: 300; color: #999;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ""; content: none;}
table {border-collapse: collapse; border-spacing: 0; table-layout: fixed;}
caption, legend {width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden;}
th, td {font-family: inherit; font-size: inherit; color: inherit; line-height: 1.5; vertical-align: middle; word-break: break-all; text-overflow: ellipsis; word-wrap: break-word;}
img {display: block; border: 0; vertical-align: middle;}
button {cursor: pointer; margin: 0; padding: 0; font: inherit; color: inherit; vertical-align: middle; line-height: normal; border: 0; background: transparent; text-transform: none; overflow: visible; -webkit-appearance: button;}
button[disabled] {cursor: default; opacity: 0.5;}
a {color: inherit; text-decoration:none; -webkit-text-decoration-skip: objects;}
a:active, a:hover {outline: 0;}
video {display: block; width: 100%;}
iframe {border: 0 none;}
label {vertical-align: middle;}
select {padding-left: 10px; border: 1px solid #ddd; background: #fff; border-radius: 0; vertical-align: middle; border-radius: 6px;}
input, textarea {vertical-align: middle; line-height: normal; border-radius: 0; background-color: #fff; -webkit-touch-callout: default !important; -webkit-user-select: text !important; border-radius: 6px;}
input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="time"], input[type="file"], input[type="date"], textarea {padding: 13px 20px; width: 100%; border: 1px solid #ccc; -webkit-appearance: none; appearance: none;}
input[type="password"] {font-family: Arial, Tahoma, sans-serif !important;}
input[type="checkbox"], input[type="radio"] {width: auto; border: none;}
input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer; -webkit-appearance: button;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset;}
input::-webkit-input-placeholder{color:#999 !important; font-weight: 300 !important;}
input:-moz-placeholder{color:#999 !important; font-weight: 300 !important; opacity:1 !important;}
input::-moz-placeholder{color:#999 !important; font-weight: 300 !important; opacity:1 !important;}
input:-ms-input-placeholder{color:#999 !important; font-weight: 300 !important;}
textarea {padding: 10px; width: 100%; height: auto; line-height: 1.8; resize: none;}
textarea::-webkit-input-placeholder{color:#999 !important; font-weight: 300 !important;}
textarea:-moz-placeholder{color:#999 !important; font-weight: 300 !important; opacity:1 !important;}
textarea::-moz-placeholder{color:#999 !important; font-weight: 300 !important; opacity:1 !important;}
textarea:-ms-input-placeholder{color:#999 !important; font-weight: 300 !important;}
input[type="text"][readonly], input[type="password"][readonly], input[type="email"][readonly], input[type="tel"][readonly], input[type="search"][readonly], input[type="text"][disabled], input[type="password"][disabled], input[type="email"][disabled], input[type="tel"][disabled], input[type="search"][disabled], textarea[readonly], textarea[disabled], select[disabled] {color: #333; background: #f6f6f6; border-color: #ededed;}
input[readonly], textarea[readonly] {cursor: default;}
a, label, input, select, textarea {-webkit-tap-highlight-color: transparent;}
a:focus, button:focus, select:focus {box-shadow: 0 0 0 1px #40a3ff; outline: 0;}
input:focus, textarea:focus { border: 1px solid #40a3ff; outline: 0; }
.is-mobile select {font-size: 16px !important; -webkit-appearance: none; background: #fff url(../img/btn_select.png) no-repeat 95%; background-size: 10px;}

body { font-family: "Noto Sans KR", Arial, Tahoma, sans-serif; font-size: 16px; font-weight: 400; color: #333; background: #fff; word-break: keep-all; }
body.open-sm, body.hidden { overflow: hidden; }
.open-sm #wrapper:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 960; }

.skipnavigation { position: fixed; top: -100px; left: 0; padding: 10px; width: 100%; font-size: 15px; color: #fff; text-align: center; background: #0f3e8e; z-index: 1000000; transition: top 0.3s; }
.skipnavigation span { display: inline-block; position: relative; }
.skipnavigation span:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #fff; }
.skipnavigation:focus { top: 0; }

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

#header { position: fixed; top: 0; left: 0; width: 100%; height: 82px; line-height: 82px; font-size: 20px; color: #fff; text-align: center; background-color: #111; z-index: 950; transition: left 0.45s; }
#header > div { position: relative; margin: 0 auto; max-width: 2000px; min-width: 320px; width: 100%; height: 100%; z-index: 8; }
#header .logo { display: block; margin: 0 auto; width: 115px; height: 55px; background: url(../img/img-topbar-logo.png) no-repeat center / 95px; transform: translateY(12px); }
.nav-toggle-btn { display: block; position: absolute; top: 50%; left: 30px; width: 50px; height: 50px; transform: translateY(-50%); }
.nav-toggle-btn em { display: block; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -15px; width: 30px; height: 3px; background-color: #fff; user-select: none; transition: transform 0.3s; border-radius: 2px; }
.nav-toggle-btn em:before, .nav-toggle-btn em:after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: #fff; transition: transform 0.3s; border-radius: 2px; }
.nav-toggle-btn em:before { top: 0; transform: translateY(-10px); }
.nav-toggle-btn em:after { bottom: 0; transform: translateY(10px); }
.is-online .nav-toggle-btn:hover em, .is-online .nav-toggle-btn:focus em { transform: rotate(-180deg); }
.is-online .nav-toggle-btn:hover em:before, .is-online .nav-toggle-btn:focus em:before { transform: rotate(-45deg) scaleX(0.5) translate(-10px, -11px); }
.is-online .nav-toggle-btn:hover em:after, .is-online .nav-toggle-btn:focus em:after { transform: rotate(45deg) scaleX(0.5) translate(-10px, 11px); }
.nav-toggle-btn.on em { visibility: hidden; }
.nav-toggle-btn:before, .nav-toggle-btn:after { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -2px; margin-left: -15px; width: 30px; height: 3px; background: #fff; opacity: 0; transition: opacity 0s; }
.nav-toggle-btn.on:before, .nav-toggle-btn.on:after { opacity: 1; }
.nav-toggle-btn:before { transform: rotate(45deg) translateX(100%); }
.nav-toggle-btn.on:before { transition: all 0.3s 0.1s cubic-bezier(0.72, 0.09, 0.32, 1.57); transform: rotate(45deg) translateX(0); }
.nav-toggle-btn:after { transform: rotate(-45deg) translateX(100%); }
.nav-toggle-btn.on:after { transition: all 0.3s 0.25s cubic-bezier(0.72, 0.09, 0.32, 1.57); transform: rotate(-45deg) translateX(0); }
.open-sm .nav-toggle-btn { display: none; }
.h-right-btns { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); }
.h-right-btns .button { display: block; float: left; margin: 0 10px; background-repeat: no-repeat; background-position: center; }
.h-right-btns .button.search { width: 48px; height: 48px; background-image: url(../img/btn-search.png); background-size: 38px; }
.h-right-btns .button.mypage { width: 55px; height: 48px; background-image: url(../img/btn-my.png); background-size: 44px; }
.h-right-btns .button.notify { position: relative; width: 48px; height: 48px; background-image: url(../img/btn-notice.png); background-size: 39px; }
.h-right-btns .button.notify.on:after { content: ""; position: absolute; top: 3px; right: 3px; width: 4px; height: 4px; border-radius: 2px; background: #ff3f3f; }

.mypage-menu-modal { position: absolute; top: 80px; right: 68px; width: 360px; text-align: left; z-index: 900; visibility: hidden; transform: translateY(10%); }
.mypage-menu-modal.open { visibility: visible; transform: translateY(0%); transition: transform 0.3s; }
.mypage-menu-modal:before { content: ""; position: absolute; top: -19px; right: 47px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #f5f2ed; z-index: 50; }
.mypage-menu-modal > div { position: relative; z-index: 950; -webkit-overflow-scrolling: touch; }

.mypage-menu-modal .mypage-header { position: relative; padding: 0 65px 0 35px; height: 84px; line-height: 84px; font-size: 16px; color: #000; background: #f5f2ed; overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px; z-index: 30; }
.mypage-menu-modal .mypage-header .user { padding-left: 60px; background: url(../img/img-my-more.png) no-repeat left / 44px; }
.mypage-menu-modal .mypage-header .user.kakao { position: relative; display: inline-block; max-width: 100%; padding-right: 34px; }
.mypage-menu-modal .mypage-header .user.kakao:after { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 26px; height: 26px; background: url(../img/img-s-kakao.png) no-repeat center / 100%; transform: translateY(-50%); }
.mypage-menu-modal .mypage-header .user span { color: #2687e2; background-image: linear-gradient(#2687e2, #2687e2); background-size: 100% 2px; }
.mypage-menu-modal .close-mypage-btn { position: absolute; top: 50%; right: 10px; width: 40px; height: 40px; transform: translate(100%, -50%) rotate(180deg); }
.mypage-menu-modal .close-mypage-btn:before, .mypage-menu-modal .close-mypage-btn:after { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -14px; width: 28px; height: 2px; background: #000; border-radius: 2px; opacity: 0; transition: opacity 0s; }
.mypage-menu-modal.open .close-mypage-btn { transform: translate(0%, -50%) rotate(0deg); transition: transform 0.5s; }
.mypage-menu-modal .close-mypage-btn:before { transform: rotate(45deg) translateX(0%); }
.mypage-menu-modal .close-mypage-btn:after { transform: rotate(-45deg) translateX(0%); }
.mypage-menu-modal.open .close-mypage-btn:before, .mypage-menu-modal.open .close-mypage-btn:after { opacity: 1; }
.mypage-menu-modal .mypage-body { position: absolute; top: 80px; bottom: 0; left: 0; right: 0; height: 420px; line-height: 1.5; border: 1px solid #ededed; overflow: hidden; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 20; zoom: 1; }
.mypage-menu-modal .mypage-body > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 16px 40px 0; width: auto; font-size: 18px; color: #000; background: #fff; overflow: auto; z-index: 20; zoom: 1; }
.mypage-menu-modal .mypage-body li { height: auto; }
.mypage-menu-modal .mypage-body li a { display: block; padding: 18px 0; border-bottom: 1px solid #ededed; transition: color 0.3s; }
.is-online .mypage-menu-modal .mypage-body li a:hover { color: #40a3ff; }
.mypage-menu-modal .login-btn { display: block; padding: 25px 0; text-align: center; color: #333; }
.is-online .mypage-menu-modal .login-btn:hover { color: #40a3ff; }

#footer { padding: 42px 20px 66px; font-size: 13px; font-weight: 300; color: #999; line-height: 1.8; background: #111; transition: left 0.45s; }
#footer > div { position: relative; margin: 0 auto; padding: 2px 0 0 155px; max-width: 1200px; min-width: 320px; }
#footer  .logo { position: absolute; top: 4px; left: 0; padding-top: 40px; width: 130px; font-size: 12px; font-weight: 300; color: #ccc; line-height: 1.5; background: url(../img/img-footer-logo.png) no-repeat left top / 105px; }
#footer  .logo span { display: block; }
#footer .link { display: inline-block; position: relative; padding: 7px 14px; font-size: 14px; font-weight: 400; color: #fff; }
#footer .link > span { padding: 1px 0; background-image: linear-gradient(#fff, #fff); }
#footer .link strong { font-weight: 700; }
#footer .link:after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 14px; background: #666; transform: translate(3px, -45%); }
#footer .link:last-child:after { content: none; }
#footer .info { padding: 0 14px; }
#footer .info .item { display: inline-block; position: relative; margin-right: 8px; padding-left: 10px; }
#footer .info .item:before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 12px; background: #999; opacity: 0.7; transform: translate(2px, -40%); }
#footer .info > div > .item:first-child{ padding-left: 0; }
#footer .info > div > .item:first-child:before { content: none; }
#footer .copyright { padding: 0 14px; }
#footer .copyright > span { display: inline-block; }
#footer .copyright a span { background-image: linear-gradient(#999, #999); }

#nav { position: fixed; top: 0; left: 0; width: 100%; max-width: 360px; height: 100%; background: #fff; z-index: 980; transform: translateX(-100%); }
#nav > div > div { display: none; }
.open-sm #nav { transform: translateX(0%); transition: transform 0.45s; }
.open-sm #nav > div > div { display: block; }
#nav .sm-header { position: relative; height: 60px; line-height: 60px; overflow: hidden; z-index: 30; }
.close-nav-btn { position: absolute; top: 25px; left: 30px; width: 40px; height: 40px; opacity: 0; background: #fff; z-index: -1; transition: all 0s 0.45s; }
.close-nav-btn:focus { box-shadow: 0 0 0 1px #40a3ff; outline: 0; }
.open-sm .close-nav-btn { opacity: 1; z-index: 95; }
.close-nav-btn:before, .close-nav-btn:after { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -14px; width: 28px; height: 2px; background: #000; border-radius: 2px; opacity: 0; transition: opacity 0s; }
.close-nav-btn:before { transform: rotate(45deg) translateX(100%); }
.close-nav-btn:after { transform: rotate(-45deg) translateX(100%); }
.open-sm .close-nav-btn:before, .open-sm .close-nav-btn:after { opacity: 1; }
.open-sm .close-nav-btn:before { transition: all 0.6s 0.25s cubic-bezier(0.72, 0.09, 0.32, 1.57); transform: rotate(45deg) translateX(0); }
.open-sm .close-nav-btn:after { transition: all 0.6s 0.5s cubic-bezier(0.72, 0.09, 0.32, 1.57); transform: rotate(-45deg) translateX(0); }
#nav .sm-body { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; overflow: hidden; z-index: 20; zoom: 1; }
#nav .sm-body > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 20px 40px; width: auto; font-size: 16px; color: #999; overflow: auto; z-index: 20; zoom: 1; }
#nav .search-btn { display: block; padding: 0 23px; height: 52px; line-height: 50px; font-size: 18px; font-weight: 300; color: #999; border: 1px solid #ccc; background: url(../img/btn-menu-search.png) no-repeat 93% / 21px; border-radius: 25px; }
#gnb ul { padding: 35px 0; }
#gnb li a { display: block; padding: 16px 0; font-size: 20px; color: #333; border-bottom: 1px solid #ededed; }
#gnb li a.on { cursor: default; font-weight: 500; color: #2687e2; }
#gnb li a.on > span { background: none; transition: none; }

#container { position: relative; left: 0; margin: 0 auto; padding: 82px 0 100px; max-width: 1200px; min-width: 320px; transition: left 0.45s; }
#container.full { padding-bottom: 0; max-width: 100%; }
#content { padding-top: 100px; }

.scroll-top-btn { display: block; position: fixed; bottom: 12px; right: 12px; width: 40px; height: 40px; background: #111; border-radius: 20px; outline: none; z-index: 950; visibility: hidden; opacity: 0; transition: height 0.3s; }
.scroll-top-btn:focus { box-shadow: none; }
.scroll-top-btn span, .scroll-top-btn:before, .scroll-top-btn:after { content: ""; display: block; position: absolute; top: 14px; left: 50%; width: 15px; height: 2px; background-color: #fff; transform-origin: left 50%; }
.scroll-top-btn span { bottom: auto; margin-left: -1px; width: 2px; height: 0; transition: all 0.2s linear; }
.scroll-top-btn:before, .scroll-top-btn:after { transition: top 0.4s; }
.scroll-top-btn:before { transform: rotate(135deg); }
.scroll-top-btn:after { transform: rotate(45deg); }
.is-online .scroll-top-btn:hover { height: 50px; }
.is-online .scroll-top-btn:hover:before, .is-online .scroll-top-btn:hover:after { top: 8px; }
.is-online .scroll-top-btn:hover span { top: auto; bottom: 8px; height: 32px; }

.goods-con { margin-top: 60px; padding-bottom: 5px; }
.goods-con > .title { margin-bottom: 10px; font-size: 36px; }
.goods-con > .title strong { font-weight: 700; }
.goods-con > .title a { display: inline-block; position: relative; padding-right: 25px; }
.goods-con > .title a:after { content: ""; position: absolute; top: 50%; right: 0; width: 13px; height: 21px; background: url(../img/img-big-arrow.png) no-repeat center / 13px; transform: translate(0%, -45%); transition: transform 0.3s; }
.is-online .goods-con > .title a:focus { color: #40a3ff; box-shadow: none; }
.is-online .goods-con > .title a:hover:after, .is-online .goods-con > .title a:focus:after { transform: translate(6px, -45%); }
.goods-con .goods-title { margin-bottom: 20px; padding: 5px 0; font-size: 18px; font-weight: 300; border-bottom: 1px solid #ccc; overflow: hidden; }
.goods-con .goods-title > p { float: left; margin-bottom: 15px; }
.goods-con .goods-title select { margin: -4px 0 10px 20px; width: 130px; height: 40px; font-size: 14px; color: #000; float: right; }
.goods-con .goods-title.diff { margin-bottom: 10px; border-bottom: 0 none; }
.goods-con .goods-title.diff > p { margin-bottom: 0; }
.is-mobile .goods-con .goods-title select { font-size: 16px; }
.goods-con > ul { margin: 0 -12px; padding: 16px 0 0; }
.goods-con > ul:after { content: ""; display: block; clear: both; }
.goods-con .goods-item { position: relative; margin-bottom: 24px; padding: 0 12px; float: left; width: 33.33%; }
.goods-con li > a { display: block; border: 1px solid #ededed; border-radius: 20px; overflow: hidden; }
.goods-con li > a:focus { box-shadow: none; border-color: #40a3ff; }
.goods-con .figure .img { max-height: 268px; overflow: hidden; }
.goods-con .figure img { width: 100%; object-fit: cover; }
.goods-con .figcaption { padding: 20px; }
.goods-con .figcaption h3 { margin-bottom: 5px; height: 55px; font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.goods-con .state { position: relative; }
.goods-con .state span { position: relative; display: inline-block; margin-left: 10px; padding-left: 10px; font-size: 14px; font-weight: 300; color: #999; letter-spacing: -1px; }
.goods-con .state span:before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 14px; background-color: #ddd; transform: translateY(-42%); }
.goods-con .state span:first-child { margin-left: 0; padding-left: 0; }
.goods-con .state span:first-child:before { content: none; }
.goods-con .state span strong { font-weight: 500; color: #2687e2; }

.goods-con.light .goods-item { margin-bottom: 10px; }
.goods-con.light .goods-item a { border: 0 none; border-radius: 0; }
.goods-con.light .goods-item .img:after { font-size: 16px; }
.goods-con.light .figure { position: relative; padding: 10px 0 10px 135px; }
.goods-con.light .figure .num { position: absolute; top: 50%; left: 0; width: 24px; font-size: 22px; font-weight: 700; text-align: center; transform: translateY(-50%); }
.goods-con.light .figure .img { position: absolute; top: 50%; left: 30px; width: 88px; height: 61px; border-radius: 6px; overflow: hidden; transform: translateY(-50%); }
.goods-con.light .figcaption { padding: 0; }
.goods-con.light .figcaption h3 { margin-bottom: 0; height: 40px; line-height: 1.3; font-size: 16px; }
.goods-con .good-icon { position: absolute; top: 2px; right: 15px; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; background-image: url(../img/icon-list-hart.png); background-size: 24px; border-radius: 50%; }

.goods-thumb-item { position: relative; margin-bottom: 40px; }
.goods-thumb-item .link { display: block; position: relative; padding: 0 15px 0 290px; display: flex; align-items: center; min-height: 187px; }
.goods-thumb-item .link .img { position: absolute !important; top: 0; left: 0; width: 270px; height: 187px; border: 1px solid #ededed; border-radius: 16px; overflow: hidden; }
.goods-thumb-item .img img { width: 100%; }
.goods-thumb-item .caption { padding: 5px 0; }
.goods-thumb-item .caption > span { display: block; }
.goods-thumb-item .caption .cap-1 { margin-bottom: 2px; font-size: 16px; font-weight: 300; color: #666; }
.goods-thumb-item .caption .cap-2 { margin-bottom: 10px; font-size: 19px; max-height: 54px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }
.goods-thumb-item .caption .cap-3 { margin-bottom: 4px; color: #2687e2; }
.goods-thumb-item .caption .cap-4 { font-size: 14px; font-weight: 300; }
.goods-thumb-item .caption .space { position: relative; margin-right: 10px; padding-right: 10px; }
.goods-thumb-item .caption .space:after { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 70%; background: #ddd; transform: translateY(-45%); }
.goods-thumb-item .caption .space:last-child { margin-right: 0; padding-right: 0; }
.goods-thumb-item .caption .space:last-child:after { content: none; }
.goods-thumb-item .caption .product { color: #909090; }
.goods-thumb-item .link:focus { color: #333; }
.goods-thumb-item .link:focus .cap-2 { font-weight: 500; color: #2687e2; }
.goods-thumb-item .cancel-btn { display: block; position: absolute; top: 50%; right: 0; width: 88px; height: 44px; line-height: 44px; font-size: 16px; color: #333; text-align: center; border-radius: 6px; background: #ededed; transform: translateY(-50%); }
.goods-thumb-item .del-btn { display: block; position: absolute; top: 50%; right: 0; width: 88px; height: 44px; line-height: 40px; font-size: 16px; color: #333; text-align: center; border: 1px solid #ccc; border-radius: 6px; transform: translateY(-50%); }
.goods-thumb-item .view-btn { display: block; position: absolute; top: 50%; right: 0; padding-right: 14px; font-size: 18px; font-weight: 500; color: #40a3ff; transform: translateY(-50%); }
.goods-thumb-item .view-btn:after { content: ""; display: block; position: absolute; top: 50%; right: 0; margin-top: 2px; width: 10px; height: 10px; border-top: 2px solid #40a3ff; border-right: 2px solid #40a3ff; transform: translateY(-50%) rotate(45deg); }
.goods-thumb-item.cancel { padding-right: 110px; }
.goods-thumb-item.view a.link { padding-right: 110px; }
.goods-thumb-item.view a.creating { cursor: default; }
.goods-thumb-item.view a.creating:hover img { opacity: 1; }
.goods-thumb-item.view a.creating .img:before, .goods-thumb-item.view a.creating .img:after { content: none; }
.goods-thumb-item.view .supplement .badge { position: absolute; bottom: 0; left: 0; padding: 12px 10px; width: 100%; font-size: 16px; color: #fff; text-align: center; background: rgba(255, 103, 103, 0.7); }
.goods-thumb-item.view .cap-4 { color: #909090; }
.goods-thumb-item.view .cap-4 li.txt { color: #333; }
.goods-thumb-item.view .cap-4 li.txt .percent { padding-left: 6px; }
.goods-thumb-item.view .supplement .view-btn { margin-top: -50px; }
.goods-thumb-item.view > a.link ~ button { right: 10px; }
.goods-thumb-item.view .supplement-btn { display: block; position: absolute; top: 50%; right: 0; width: 88px; height: 44px; line-height: 40px; font-size: 16px; color: #333; text-align: center; border-radius: 6px; background: #f6f6f6; transform: translateY(-50%); }
.goods-thumb-item.view .supplement ~ button.supplement-btn { top: 35%; }
.goods-thumb-item.view .supplement ~ button.del-btn { top: 65%; }

.good-select { font-size: 18px; color: #000; text-align: center; background: #f6f6f6; border-radius: 6px; }
.good-select > div { padding: 20px 0; }
.good-select .select-item { display: inline-block; padding: 8px 16px; }
.good-select .select-item span { margin-right: 10px; }
.good-select .select-item select { width: 150px; height: 40px; font-size: 14px; color: #000; border-color: #999; }
.good-select .select-item:nth-of-type(2) select { width: 134px; }

.goods-detail-con { padding: 100px 0 50px; color: #000; background: #eff4f8; }
.goods-detail-con > div { position: relative; margin: 0 auto; padding: 0 20px; max-width: 1240px; }
.goods-detail-con > div:after { content: ""; display: block; clear: both; }
.goods-detail-con > div > div { float: left; width: 50%; }
.goods-detail-con .goods-info { padding-top: 6px; padding-left: 5%; }
.goods-figure .img { border: 1px solid #ededed; border-radius: 20px; overflow: hidden; }
.goods-figure img { width: 100%; }
.goods-figure .caption { margin-top: 30px; }
.goods-figure .caption p { font-size: 18px; }
.goods-figure .caption ul { margin-top: 30px; line-height: 1.8; }
.goods-info .info-1 { margin-bottom: 35px; }
.goods-info .info-1 .top { margin-bottom: 25px; overflow: hidden; }
.goods-info .info-1 .top span { display: block; }
.goods-info .info-1 .top .left { float: left; font-weight: 300; }
.goods-info .info-1 .top .left strong { font-size: 24px; }
.goods-info .info-1 .top .right { margin-top: 10px; float: right; color: #666; }
.goods-info .info-1 .middle { margin-bottom: 30px; }
.goods-info .info-1 .middle small { font-size: 16px; font-weight: 400; color: #666; }
.goods-info .info-1 .middle h3 { margin-top: 6px; font-size: 32px; font-weight: 700; line-height: 1.3; }
.goods-info .info-1 .bottom > strong { display: block; color: #666; }
.goods-info .info-1 .bottom > .name { margin-bottom: 12px; font-size: 18px; color: #000; }
.goods-info .info-1 .bottom > div { margin: 5px 0 10px; font-size: 26px; }
.goods-info .info-1 .bottom > div span { display: inline-block; }
.goods-info .info-1 .bottom > div span:before { content: "/"; margin: 0 10px; font-size: 26px; }
.goods-info .info-1 .bottom > div span:first-child:before { content: none; }
.goods-info .info-1 .bottom small { font-size: 16px; color: #333; }
.goods-info .info-2 { display: none; margin-bottom: 25px; }
.goods-detail-con.finish .goods-info .info-2 { display: block; }
.goods-info .info-2 > p { font-size: 18px; }
.goods-info .info-2 ul { margin-top: 15px; }
.goods-info .info-2 li { margin-bottom: 3px; }
.goods-info .info-3 { font-size: 14px; color: #666; }
.goods-info .info-3 .donation-btn { height: 60px; }
.goods-info .info-3 .donation-btn .cc-btn { margin-top: 0; transition: letter-spacing 0.35s; }
.is-online .goods-info .donation-btn .cc-btn:hover { letter-spacing: 7px; }
.goods-info .info-3 .txt { margin-top: 25px; font-weight: 300; }
.goods-info .info-3 .help-btn { display: inline-block; margin-top: 20px; color: #000; }
.goods-info .info-3 .help-btn span { padding-bottom: 4px; }
.bookmark-share-btns { position: relative; margin-top: 40px; }
.bookmark-share-btns > div { font-size: 16px; color: #333; text-align: center; border: 1px solid #ededed; background: #fff; border-radius: 6px; overflow: hidden; }
.bookmark-share-btns .btn { position: relative; border-left: 1px solid #ededed; }
.bookmark-share-btns .btn:first-child { border-left: 0 none; }
.bookmark-share-btns .btn:focus { color: #40a3ff; box-shadow: none; }
.is-online .bookmark-share-btns .btn:after { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 100%; height: 0; background: #40a3ff; transition: height 0.2s; }
.is-online .bookmark-share-btns .btn:hover:after { right: auto; left: 0; height: 2px; }

.bookmark-share-btns .btn span { display: inline-block; position: relative; padding: 15px 5px 15px 35px; letter-spacing: -1px; background-repeat: no-repeat; background-position: left 55%; }
.bookmark-share-btns .bookmark-btn span { background-image: url(../img/icon-hart-normal.png); background-size: 24px; }
.bookmark-share-btns .bookmark-btn span:after { content: ""; position: absolute; top: 50%; left: 0; margin-top: -9px; width: 24px; height: 21px; background: url(../img/icon-hart-selected.png) no-repeat center / 100%; opacity: 0; transform: scale(2); transition: all 0.4s cubic-bezier(.42,.97,.52,1.7); }
.bookmark-share-btns .bookmark-btn.on span { background: none; }
.bookmark-share-btns .bookmark-btn.on span:after { opacity: 1; transform: scale(1); }
.bookmark-share-btns .share-btn span { background-image: url(../img/icon-link.png); background-size: 25px; }
.bookmark-share-btns .question-btn span { background-image: url(../img/icon-bubble.png); background-size: 23px; }
.bookmark-share-btns .share-items { position: absolute; top: 100%; right: 0; width: 100%; margin-top: -1px; padding: 30px 30px 20px; z-index: 30; visibility: hidden; transform: translateY(-15px); }
.bookmark-share-btns .share-items.open { visibility: visible; transform: translateY(0px); transition: transform 0.3s; }
.bookmark-share-btns .share-items > div { position: relative; }
.bookmark-share-btns .share-items .title { padding-bottom: 15px; font-size: 18px; font-weight: 500; color: #000; text-align: left; border-bottom: 1px solid #ccc; }
.bookmark-share-btns .share-items .close-share-btn { position: absolute; top: 0; right: -9px; width: 36px; height: 36px; background: url(../img/btn-popup-x.png) no-repeat center / 18px; }
.bookmark-share-btns .share-items ul { padding: 0 20px; }
.bookmark-share-btns .share-items ul:after { content: ""; display: block; clear: both; }
.bookmark-share-btns .share-items li { float: left; padding-top: 10px; width: 25%; opacity: 0; transition: opacity 0.35s 0.15s; }
.bookmark-share-btns .share-items a { display: block; padding: 10px 0; transform: translateY(15px); transition: transform 0.3s cubic-bezier(.42,.97,.52,1.49); }
.bookmark-share-btns .share-items span { display: block; padding: 40px 0 0; font-size: 13px; font-weight: 300; color: #333; background-repeat: no-repeat; background-position: top; background-size: 35px; }
.bookmark-share-btns .share-items .kakao-talk span { background-image: url(../img/btn-share-kakao.png); }
.bookmark-share-btns .share-items .facebook span { background-image: url(../img/btn-share-facebook.png); }
.bookmark-share-btns .share-items .twitter span { background-image: url(../img/btn-share-twitter.png); }
.bookmark-share-btns .share-items .link-address span { background-image: url(../img/btn-share-url.png); }
.bookmark-share-btns .share-items.open li { opacity: 1; }
.bookmark-share-btns .share-items.open a { transform: translateY(0px); }
.bookmark-share-btns .share-items .kakao-talk { transition-delay: 0.1s; }
.bookmark-share-btns .share-items .facebook { transition-delay: 0.15s; }
.bookmark-share-btns .share-items .twitter { transition-delay: 0.2s; }
.bookmark-share-btns .share-items .link-address { transition-delay: 0.25s; }
.is-online .bookmark-share-btns .share-items a:hover { margin-top: -3px; transition: margin 0.2s ease-out; }
.detail-header .bookmark-share-btns { position: absolute; bottom: 6px; right: 20px; margin-top: 0; text-align: right; }
.detail-header .bookmark-share-btns > div { border: 0 none; }
.detail-header .bookmark-share-btns .btn { display: inline-block; float: none; padding: 0 20px; width: auto; border: 0 none; }
.detail-header .bookmark-share-btns .share-items { padding-left: 20px; padding-right: 20px; width: 120%; border: 1px solid #ededed; }
.detail-header .bookmark-share-btns .share-items ul { padding: 0 10px; }
.is-online .detail-header .bookmark-share-btns .btn:hover { color: #40a3ff; box-shadow: none; }
.is-online .detail-header .bookmark-share-btns .btn:hover:after { content: none; }

.keyword-items .btn { display: inline-block; margin-right: 8px; }
.keyword-items .btn:before { content: "#"; }

.total-search { margin: 10% 0 50px; padding: 0 20px; min-height: 40vh; }
.total-search .fieldset { margin: 0 auto; max-width: 540px; }
.total-search fieldset { position: relative; padding-right: 50px; border: 0 none; border-bottom: 5px solid #000; }
.total-search input { padding: 26px 0; font-size: 24px; font-weight: 300; border: 0 none; border-radius: 0; }
.total-search .total-search-btn { position: absolute; top: 50%; right: 0; width: 50px; height: 100%; background: url(../img/btn-large-search.png) no-repeat center / 36px; transform: translateY(-50%); }
.total-search .keyword-items { margin-top: 40px; font-size: 18px; text-align: center; }
.total-search .keyword-items .btn { padding: 4px 8px; }
.total-search .keyword-items .btn:before { font-size: 20px; color: #999; }
.total-search.results { margin-top: 0; min-height: 0; }
.total-search.results .keyword-items { display: none; }

.no-con { padding: 10% 25px; min-height: 35vh; font-size: 18px; color: #333; text-align: center !important; }

.cc-txt { word-break: keep-all; text-overflow: ellipsis; word-wrap: break-word; }
.cc-txt dt { margin-bottom: 8px; color: #333; font-weight: 500; }
.cc-txt dd, .cc-txt li { margin-bottom: 5px; font-size: 14px; color: #999; }
.text-s { font-size: 14px; font-weight: 300; color: #666; }
.indent { padding-left: 10px; text-indent: -10px; }

.cc-btn { display: block; margin: 60px auto 0; width: 100%; height: 60px; line-height: 60px; font-size: 20px; font-weight: 400; color: #fff; text-align: center; background: #2687e2; border-radius: 6px; }
.cc-btn.submit { color: #fff !important; background: #2687e2 !important; }
.cc-btn.black { color: #fff !important; background: #333 !important; }
.cc-btn.gray { color: #333 !important; background: #ededed !important; }
.cc-btn.kakao { font-weight: 400; color: #333; background: #ffde00; }
.cc-btn.kakao span:before { content: ""; display: inline-block; margin-top: -4px; margin-right: 9px; width: 33px; height: 30px; background: url(../img/icon-login-btn-kakao.png) no-repeat left center / 33px; vertical-align: middle; }
.cc-btn.small { display: inline-block; margin: 0; width: auto; padding: 0 28px; height: 44px; line-height: 44px; font-size: 18px; background: #999; }
.btn-con { margin-top: 60px; }
.btn-con .grid-con { margin: 0 -6px; }
.btn-con .grid-item { padding: 6px; }
.btn-con .cc-btn { margin: 0; }
.btn-con .cc-btn { height: 65px; line-height: 65px; font-size: 18px; }
.btn-con.small { margin: 0 auto; max-width: 300px; }
.btn-con.small .cc-btn { font-size: 20px; }

.cc-box { padding: 30px; font-size: 20px; border: 1px solid #ccc; border-radius: 6px; }
.cc-box.gray { border: 0 none; background: #f6f6f6; }
.cc-box strong { font-weight: 500; }
.cc-box small { font-size: 16px; }

.cc-more-btn { width: 125px; height: 44px; line-height: 42px; font-size: 16px; color: #666; border: 1px solid #ccc; background: #fff; border-radius: 22px; }
.cc-more-btn > span { display: inline-block; position: relative; padding: 0 10px; }
.cc-more-btn em { display: inline-block; transition: all 0.3s ease-out; }
.cc-more-btn > span:before, .cc-more-btn > span:after { content: ""; display: block; position: absolute; top: 50%; opacity: 0; }
.cc-more-btn > span:before { right: 50%; margin-top: -4px; width: 10px; height: 10px; border-right: 2px solid #40a3ff; border-bottom: 2px solid #40a3ff; transform: rotate(-45deg); transition: all, 0.3s, cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out; }
.cc-more-btn > span:after { right: 100%; width: 50%; height: 2px; background-color: #40a3ff; transition: all, 0.4s, 0.1s cubic-bezier(0.55, 0, 0.1, 1) 1s ease-in-out; }
.is-online .cc-more-btn:hover { box-shadow: 0px 0px 0px 2px #40a3ff; }
.is-online .cc-more-btn:hover em { opacity: 0; transform: translateX(100%); }
.is-online .cc-more-btn:hover > span:before { right: 15px; opacity: 1; }
.is-online .cc-more-btn:hover > span:after { right: 16px; opacity: 1; }
.cc-more-btn.vertical { overflow: hidden; }
.cc-more-btn.vertical > span:before { top: 20%; right: 43% !important; width: 10px; height: 10px; border-right: 0 none; border-left: 2px solid #40a3ff; border-bottom: 2px solid #40a3ff; }
.cc-more-btn.vertical > span:after { top: -40%; right: 50% !important; width: 2px; height: 50%; }
.is-online .cc-more-btn.vertical:hover em { transform: translateY(100%); }
.is-online .cc-more-btn.vertical:hover > span:before { top: 60%; opacity: 1; }
.is-online .cc-more-btn.vertical:hover > span:after { top: 25%; opacity: 1; }

.cc-list-con > .top { font-size: 18px; color: #666; }
.cc-list-con > div { margin-top: 15px; border-top: 2px solid #ededed; }
.cc-list-con .list-item { display: block; position: relative; padding: 26px 180px 26px 20px; min-height: 80px; border-bottom: 1px solid #ededed; }
.cc-list-con .list-item span { font-size: 18px; }
.cc-list-con .list-item.new span:after { content: "N"; margin-left: 8px; font-size: 16px; color: #ff3f3f; }
.cc-list-con .list-item .date { display: block; position: absolute; top: 50%; right: 30px; font-size: 16px; font-weight: 300; color: #666; text-align: center; transform: translateY(-50%); }
.cc-list-con.avatar .list-item { padding-left: 70px; background: url(../img/img-my-more.png) no-repeat 10px / 45px; }
.cc-list-con .list-item .left { font-size: 14px; color: #666; }
.cc-list-con .list-item em { font-size: 18px; font-weight: 400; color: #333; }
.cc-list-con a.list-item.arrow { padding-right: 60px; }
.cc-list-con a.list-item.arrow:after { content: ""; display: block; position: absolute; top: 50%; right: 40px; width: 12px; height: 23px; background: url(../img/arrow-list-arrow.png) no-repeat center / 100%; transform: translateY(-50%); }
.cc-list-con .list-item.right .date { position: static; margin-top: 4px; font-size: 14px; text-align: left; transform: none; }

.cc-list-table .title { margin-bottom: 20px; font-size: 20px; color: #000; }
.cc-list-table table { width: 100%; border-top: 2px solid #666; }
.cc-list-table th, .cc-list-table td { font-size: 16px; border-bottom: 1px solid #ededed; word-break: keep-all; }
.cc-list-table thead th { padding: 5px; height: 53px; }
.cc-list-table td { padding: 10px; height: 80px; }
.cc-list-table .data { font-size: 14px; color: #999; }
.cc-list-table tfoot th, .cc-list-table tfoot td  { font-size: 18px; background: #f6f6f6; }
.cc-list-table tfoot .price { font-size: 19px; }

.underline > span { background: linear-gradient(#333, #333) no-repeat bottom left / 0% 1px; }
.underline.green > span { background-image: linear-gradient(#65bf38, #65bf38); }
.underline.effect > span { transition: background 0.4s ease-in-out; }
.underline:not(.effect) > span { background-size: 100% 1px; }
.is-online .underline.effect:hover > span { background-size: 100% 1px; }
.grid-con:after { content: ""; display: block; clear: both; }
.grid-con > .grid-item { display: block; float: left; width: 50%; }
.grid-con.col-3 > .grid-item { width: 33.33%; }
.grid-con.col-4 > .grid-item { width: 25%; }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-height: 18px; }
.ellipsis-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; }

.pad-con { padding: 0 20px; }
.small-page { margin: 0 auto; padding: 0 20px; max-width: 560px; }

.page-title { position: relative; margin-bottom: 40px; min-height: 90px; font-size: 18px; font-weight: 300; color: #666; text-align: center; letter-spacing: -2px; }
.page-title > strong { display: block; margin-bottom: 8px; font-size: 36px; font-weight: 700; color: #333; }
.page-title .move-page-btn { position: absolute; top: 10px; right: 0; margin: 0; width: 160px; height: 44px; line-height: 44px; font-size: 18px; }

.sub-title { margin-bottom: 35px; font-size: 24px; font-weight: 700; text-align: center; }
p.sub-title { margin-bottom: 16px; font-size: 20px; text-align: left; }

.detail-page-con { position: relative; }
.detail-page-con > .top { margin-bottom: 15px; font-size: 20px; font-weight: 500; }
.prev-page-btn { display: inline-block; position: relative; margin-bottom: 18px; padding: 0 16px 0 32px; min-width: 80px; height: 46px; line-height: 44px; color: #666; border: 1px solid #ccc; border-radius: 4px; }
.prev-page-btn:before { content: ""; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-right: 1px solid #666; border-bottom: 1px solid #666; transform: translate(15px, -50%) rotate(135deg); transition: left 0.3s; }
.is-online .prev-page-btn:hover { box-shadow: 0 0 0 1px #40a3ff; }
.is-online .prev-page-btn:hover:before { left: -3px; }

.detail-page-con .detail-area > div { border: 1px solid #ededed; border-radius: 6px; }
.detail-page-con .detail-header { position: relative; padding: 30px; font-size: 18px; border-bottom: 1px solid #ededed; }
.detail-page-con .detail-header small { display: block; margin-top: 10px; font-size: 16px; font-weight: 100; color: #666; }
.detail-page-con .detail-body { padding: 30px 30px 60px; }

.attach-file-con { margin-top: 70px; padding-top: 20px; border-top: 1px solid #ededed; }
.attach-file-con > div { position: relative; padding-left: 110px; min-height: 24px; }
.attach-file-con .txt-t { position: absolute; top: 3px; left: 0; margin-bottom: 10px; font-weight: 300; color: #666; }
.attach-file-con li { margin-top: 8px; padding: 3px 0; font-size: 16px; font-weight: 400; color: #333; }
.attach-file-con li:first-child { margin-top: 0; }
.attach-file-con small { font-size: 16px; }

.attach-file-con.del > div { padding: 10px 20px; min-height: 50px; border-radius: 6px; background: #fff; }
.attach-file-con.del li { position: relative; margin-top: 5px; background: #fff; z-index: 5; }
.attach-file-con.del li.no-files { position: absolute; margin-top: 3px; z-index: 3; }
.attach-file-con.del a:after { content: "X"; margin-left: 10px; font-family: Arial, Tahoma, sans-serif; }
.attach-file-con.del .underline > span { background: none; }

.move-page-list { margin-top: 40px; border: 1px solid #ededed; border-radius: 6px; }
.move-page-list li { position: relative; padding: 25px 25px 25px 150px; border-top: 	1px solid #ededed; overflow: hidden; }
.move-page-list li:first-child { border-top: 0 none; }
.move-page-list li > small { display: block; position: absolute; top: 50%; left: 42px; font-size: 16px; font-weight: 300; color: #666; transform: translateY(-50%); }
.move-page-list li a { font-size: 17px; }

.inblock { display: inline-block !important; }
.inblock.comma { position: relative; margin-right: 5px; }
.inblock.comma:after { content: ","; }
.inblock.comma:last-child:after { content: none; }
.fc-basic { color: #40a3ff !important; }
.fc-red { color: #e6002d !important; }
.fc-gray { color: #666 !important; }
.ta-left { text-align: left !important; }
.ta-center { text-align: center !important; }
.ta-right { text-align: right !important; }
.bullet { display: block; position: relative; padding-left: 10px; text-indent: -10px; }
.bullet:before { content: "*"; position: relative; top: 3px; margin-right: 3px; }
.bullet.hyphen:before { content: "-"; top: 0; }
.pos-r { position: relative; }

.editor-content { line-height: 1.5; text-overflow: ellipsis; word-wrap: break-word; word-break: keep-all; }
.editor-content * { font-family: inherit !important; }
.editor-content img, .editor-content table { max-width: 100% !important; }
.editor-content table { margin: auto; table-layout: auto; }
.editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4, .editor-content h5, .editor-content h6 { font-weight: bold; font-weight: 700; line-height: 1.5em; }
.editor-content h1 { margin: 18px 0; font-size: 26px; }
.editor-content h2 { margin: 18px 0; font-size: 20px; }
.editor-content h3 { margin: 15px 0; font-size: 15px; }
.editor-content h4 { margin: 18px 0; font-size: 13px; }
.editor-content h5 { margin: 18px 0; font-size: 11px; }
.editor-content h6 { margin: 20px 0; font-size: 10px; }

.enter-con > div { padding: 30px 0; font-weight: 300; border-top: 1px solid #ededed; }
.enter-con > div:first-child { border-top: 0 none; }
.enter-con .text { margin: 5px 0; }
.enter-con .text > span { margin-right: 12px; font-weight: 500; color: #666; }
.enter-con .text .text-s { display: inline-block; }
.enter-con .item { margin: 10px 0; }
.enter-con .item p.title { color: #000; margin: 10px 0; }
.enter-con .item input[readonly] { background: #f7f7f7; }
.enter-con .item textarea { height: 32vh; }
.enter-con .item select { height: 50px; font-weight: 400; border-radius: 6px; }
.enter-con .item select.full { padding-left: 42%; width: 100%; background-color: #e4e8ec; }
.enter-con .has-btn { display: block; position: relative;  padding-right: 100px;width: 100%; }
.enter-con  .has-btn .cc-btn { display: block; position: absolute; top: 0; right: 0; width: 90px; margin: 0; height: 52px; line-height: 52px; font-size: 16px; font-weight: 500; background: #999; border-radius: 6px; }

.enter-con .search-file-btn { margin: 10px 0; width: 98px; height: 44px; line-height: 44px; font-size: 16px; color: #333; background: #ededed; border-radius: 6px; }
.enter-con .attach-file-con { margin-top: 0; padding-top: 0; border-top: 0 none; }
.enter-con .attach-file-con > div { padding-left: 0; }

.enter-con .agree-area .texts { max-height: 0; visibility: hidden; }
.enter-con .agree-area .texts > div { margin: 6px 0 30px; padding: 20px; font-size: 14px; color: #666; line-height: 1.8; border: 1px solid #ccc; border-radius: 6px; overflow: auto; }
.enter-con .agree-area.opened .texts { max-height: 500px; visibility: visible; transition: all 0.3s; }

.enter-con .agree-area .cc-check-item { display: block; padding-right: 80px; }
.enter-con .agree-area .more-btn { position: absolute; bottom: 2px; right: 0; padding-right: 22px; font-size: 14px; color: #666; }
.enter-con .agree-area .more-btn i { display: block; position: absolute; top: 6px; right: 16px; transform: rotate(45deg); transition: 0.2s; }
.enter-con .agree-area .more-btn i:before, .enter-con .agree-area .more-btn i:after { content: ""; display: block; position: absolute; width: 12px; height: 1px; background: #333; transition: 0.2s; }
.enter-con .agree-area .more-btn i:after { top: -6px; left: 6px; transform: rotate(90deg); }
.enter-con .agree-area.opened .more-btn i { transform: rotate(45deg) translate(-6px, -6px); }
.enter-con .agree-area.opened .more-btn i:before { transform: translate(12px, 0); }
.enter-con .agree-area.opened .more-btn i:after { transform: rotate(90deg) translate(12px, 0); }
.enter-con .agree-area a.more-btn i { top: 17px; right: 14px; transform: rotate(-45deg); }
.enter-con .agree-area a.more-btn i:before, .enter-con .agree-area a.more-btn i:after { width: 10px; }
.enter-con .agree-area a.more-btn i:after { top: -5px; left: 5px; }

.enter-con .cc-check-item { margin-bottom: 10px; }

.grid-btns { margin: 0 -5px; }
.grid-btns > .grid-item { padding: 0 5px; }
.grid-btns .cc-btn { margin: 0; height: 52px; line-height: 1; font-size: 16px; color: #000; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.grid-btns .cc-btn.on { font-weight: 500; color: #fff; border: 1px solid #40a3ff; background: #40a3ff; }
.grid-btns.medium .cc-btn { height: 44px; line-height: 44px; color: #000; border: 0 none; background: #ededed; }

.tab-line-nav { position: relative; left: 0; background: #fff; transition: left 0.45s; }
.tab-line-nav:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #ccc; }
.tab-line-nav > div { position: relative; margin: 0 auto; max-width: 1200px; min-width: 320px; }
.tab-line-nav > div:after { content: ""; display: block; clear: both; }
.tab-line-nav a { display: block; position: relative; float: left; width: 33.33%; padding: 25px 0; font-size: 18px; font-weight: 300; color: #000; text-align: center; letter-spacing: -1.5px; }
.tab-line-nav .tab-line { position: absolute; bottom: 0; left: -33.33%; width: 33.33%; height: 4px; background: #030c13; z-index: 4; transition: 0.3s ease-in-out; }
.tab-line-nav .tab-item-1.on ~ .tab-line { left: 0%; }
.tab-line-nav .tab-item-2.on ~ .tab-line { left: 33.33%; }
.tab-line-nav .tab-item-3.on ~ .tab-line { left: 66.66%; }
.is-online .tab-line-nav .tab-item-1:hover ~ .tab-line { left: 0%; }
.is-online .tab-line-nav .tab-item-2:hover ~ .tab-line { left: 33.33%; }
.is-online .tab-line-nav .tab-item-3:hover ~ .tab-line { left: 66.66%; }
.is-online .tab-line-nav a:not(.on):hover ~ .tab-line { background: #40a3ff; }
.tab-line-nav a.on { cursor: default; font-weight: 500; }
.tab-line-nav.two a, .tab-line-nav.two .tab-line { width: 50%; }
.tab-line-nav.two .tab-item-1.on ~ .tab-line { left: 0%; }
.tab-line-nav.two .tab-item-2.on ~ .tab-line { left: 50%; }
.is-online .tab-line-nav.two .tab-item-1:hover ~ .tab-line { left: 0%; }
.is-online .tab-line-nav.two .tab-item-2:hover ~ .tab-line { left: 50%; }
.tab-line-nav.four a, .tab-line-nav.four .tab-line { width: 25%; }
.tab-line-nav.four .tab-item-1.on ~ .tab-line { left: 0%; }
.tab-line-nav.four .tab-item-2.on ~ .tab-line { left: 25%; }
.tab-line-nav.four .tab-item-3.on ~ .tab-line { left: 50%; }
.tab-line-nav.four .tab-item-4.on ~ .tab-line { left: 75%; }
.is-online .tab-line-nav.four .tab-item-1:hover ~ .tab-line { left: 0%; }
.is-online .tab-line-nav.four .tab-item-2:hover ~ .tab-line { left: 25%; }
.is-online .tab-line-nav.four .tab-item-3:hover ~ .tab-line { left: 50%; }
.is-online .tab-line-nav.four .tab-item-4:hover ~ .tab-line { left: 75%; }

.slide-toggle-wrap { border-top: 2px solid #666; }
.slide-toggle-con { border-bottom: 1px solid #ededed; }
.slide-toggle-con .st-header { display: block; position: relative; padding: 0 100px 0 220px; width: 100%; text-align: left; }
.slide-toggle-con .st-header:focus { box-shadow: none; }
.slide-toggle-con .st-header small { display: block; position: absolute; top: 50%; left: 0; width: 150px; font-size: 14px; color: #999; text-align: center; transform: translateY(-50%); }
.slide-toggle-con .st-header .underline { display: block; padding: 30px 0; }
.slide-toggle-con .arrow { display: inline-block; position: absolute; top: 50%; right: 40px; width: 30px; height: 30px; transform: translateY(-50%); }
.slide-toggle-con .arrow:before, .slide-toggle-con .arrow:after { content: ""; display: inline-block; position: absolute; top: 50%; width: 18px; height: 1px; background-color: #333; border-radius: 1px; transition: all 0.2s; }
.slide-toggle-con .arrow:before { left: 0; transform: rotate(45deg); }
.slide-toggle-con .arrow:after { right: 0; transform: rotate(-45deg); }
.slide-toggle-con .st-body { height: 0; padding: 0 100px 0 220px; font-weight: 300; overflow: hidden; transform: scaleY(0); transform-origin: top; }
.slide-toggle-con.on { padding-bottom: 40px; background: #f6f6f6; }
.slide-toggle-con.on .arrow:before { background-color: #2687e2; transform: rotate(-45deg); }
.slide-toggle-con.on .arrow:after { background-color: #2687e2; transform: rotate(45deg); }
.slide-toggle-con.on .st-body { height: auto; transform: scaleY(1); transition: transform 0.2s ease-out; }
.slide-toggle-con.on .underline span { background-size: 100% 1px; }

.cc-check-item { display: inline-block; position: relative; }
.cc-check-item button { cursor: pointer; position: relative; min-width: 26px; min-height: 26px; font-size: 16px; color: #000; text-align: left; z-index: 5; }
.cc-check-item button span { display: inline-block; padding-left: 40px; }
.cc-check-item button:focus { box-shadow: none; text-decoration: underline; }
.cc-check-item em { cursor: pointer; display: block; position: absolute; top: 2px; left: 0; width: 26px; height: 26px; vertical-align: middle; border: 3px solid #ccc; background-color: #fff; border-radius: 4px; z-index: 5; transition: background 0.3s linear; }
.cc-check-item em:after { content: none; display: block; position: absolute; top: 10px; left: 2px; width: 9px; height: 14px; border-right: 3px solid #a2a2a2; border-top: 3px solid #a2a2a2; transform: scaleX(-1) rotate(135deg); transform-origin: left top; }
.is-online .cc-check-item:hover em, .is-online .cc-check-item:hover em:after { border-color: #40a3ff; }
.cc-check-item input:checked + em { border-color: #40a3ff; background-color: #40a3ff; }
.cc-check-item input:checked + em:after { content: ""; border-color: #fff !important; animation: checkbox-effect 0.7s; }
.cc-check-item input[disabled] ~ button { cursor: default; color: #999; }
.cc-check-item input[disabled] + em { cursor: default; opacity: 0.4; border-color: #a2a2a2 !important; }
.cc-check-item input[disabled] + em:after { border-color: #a2a2a2 !important; animation: none; }
.cc-check-item input:checked[disabled] + em { border: 0 none !important; }
.cc-check-item input:checked[disabled] + em:after { border-color: #fff !important; }
@keyframes checkbox-effect {
	0% { width: 0; height: 0; }
	25% { width: 9px; height: 0; }
	50% { width: 9px; height: 14px; }
}
.cc-check-item.all { margin-bottom: 10px; }
.cc-check-item.all button { font-size: 18px; font-weight: 500; }
.cc-check-item.thin button:focus { border: 2px solid #40a3ff; border-radius: 4px; }
.cc-check-item.thin em { border: 1px solid #999; }
.cc-check-item.thin em:after { top: 12px; left: 3px; }

.toggle-switch { cursor: pointer; display: inline-block; position: relative; width: 68px; height: 32px; vertical-align: middle; border-radius: 20px; user-select: none; border: 1px solid #40a3ff; background: #40a3ff; box-shadow: inset 0px 0px 0px 16px #40a3ff; transition: border 0.4s, box-shadow 0.4s, background-color 1.2s; }
.toggle-switch .button { position: absolute; top: -4px; left: 34px; width: 36px; height: 36px; border-radius: 100%; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: background-color 0.4s, left 0.2s; }
.toggle-switch.off { border-color: #ccc; background-color: #ccc; box-shadow: inset 0px 0px 0px 0px #dfdfdf; transition: border 0.4s, box-shadow 0.4s; }
.toggle-switch.off .button { left: -2px; transition: background-color 0.4s, left 0.2s; }

.cc-paging { margin: 50px 0; text-align: center; }
.cc-paging a { display: inline-block; margin: 2px; width: 40px; height: 40px; line-height: 40px; font-size: 17px; font-weight: 300; color: #999; vertical-align: middle; border: 1px solid #d5d5d5; }
.cc-paging a.num { padding: 0 5px; min-width: 23px; }
.cc-paging a.num span { display: inline-block; position: relative; }
.cc-paging a.num.on { color: #fff !important; border: 0 none; background: #2687e2; }
.cc-paging a.arrow { background-repeat: no-repeat; background-position: center; background-size: 20px; }
.cc-paging a.arrow.first { background-image: url(../img/btn-arrow-first.png); }
.cc-paging a.arrow.last { background-image: url(../img/btn-arrow-last.png); }
.cc-paging a.arrow.prev { margin-right: 5px; background-image: url(../img/btn_page_back.png); }
.cc-paging a.arrow.next { margin-left: 5px; background-image: url(../img/btn_page_next.png); }
.is-online .cc-paging a.num:hover, .cc-paging a.num.on { color: #2687e2; }

.sns-items { margin-top: 24px; text-align: center; }
.sns-items a { display: inline-block; margin: 6px; width: 35px; height: 35px; background-repeat: no-repeat; background-position: center; background-size: 100%; transform: translateY(0px); transition: transform 0.2s; }
.sns-items .sns-instar { background-image: url(../img/btn-share-instar.png); }
.sns-items .sns-youtube { background-image: url(../img/btn-share-youtube.png); }
.sns-items .sns-kakaoplus { background-image: url(../img/btn-share-kakaoplus.png); }
.sns-items .sns-naver { background-image: url(../img/btn-share-naver.png); }
.sns-items .sns-facebook { background-image: url(../img/btn-share-facebook.png); }
.sns-items .sns-homepage { background-image: url(../img/btn-share-homepage.png); }
.is-online .sns-items a:hover, .is-online .sns-items a:focus { transform: translateY(-3px); }

.is-online .thumb-hover-effect .img { position: relative; }
.is-online .thumb-hover-effect img { transition: opacity 0.5s; }
.is-online .thumb-hover-effect .img:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; background-image: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #40a3ff 75%, #7800a8 100%); background-repeat: no-repeat; background-size: 400% 400%; opacity: 0; transition: all 0.4s; }
.is-online .thumb-hover-effect .img:after { display: block; content: "View"; position: absolute; top: 50%; left: 50%; font-size: 18px; font-weight: bold; color: #fff; text-align: center; letter-spacing: 0.1em; z-index: 30; transform: scale(0) translate(-100%, 150%); transition: all 0.3s; transform-origin: center; }
.is-online .thumb-hover-effect:hover img { opacity: 0.5; }
.is-online .thumb-hover-effect:hover .img:before { opacity: 1; background-position: 100% 100%; }
.is-online .thumb-hover-effect:hover .img:after { opacity: 1; transform: scale(1) translate(-50%, -50%); }
.is-online .thumb-hover-effect:focus { box-shadow: none; color: #2687e2; }

.cc-list-con.comment > div { border-top: 0 none; }
.comment-enter { padding: 10px !important; border-radius: 6px; background: #f6f6f6; }
.comment-enter > div { position: relative; padding-right: 90px; }
.comment-enter textarea { min-height: 80px; border: 0 none; }
.comment-enter button[type="submit"] { display: block; position: absolute; top: 0; right: 0; width: 80px; height: 80px; line-height: 80px; font-size: 18px; font-weight: 500; color: #fff; text-align: center; border-radius: 6px; background: #999; }
.comment-con > div { padding: 25px 0; border-bottom: 1px solid #ededed; }
.comment-info { margin-bottom: 10px; padding: 0 30px; }
.comment-info strong { margin-right: 8px; }
.comment-info .date { font-size: 15px; font-weight: 100; color: #666; }
.comment-txt { position: relative; padding: 0 30px 40px 30px; font-weight: 300; color: #666; }
.comment-txt .write-comment-btn { position: absolute; bottom: 0; left: 30px; color: #2687e2; }
.comment-txt .write-comment-btn:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #2687e2; }
.comment-txt .my-comment-btn { position: absolute; bottom: 0; right: 0; }
.comment-txt .my-comment-btn span { position: relative; padding: 0 14px; color: #666; }
.comment-txt .my-comment-btn span:before { content: ""; position: absolute; top: 5px; left: 0; width: 1px; height: 16px; background: #ededed; }
.comment-txt .my-comment-btn button:first-child span:before { content: none; }
.comment-reply { background: #f6f6f6; }
.comment-reply .comment-info, .comment-reply .comment-txt { padding-left: 80px; }
.comment-reply .comment-txt:before { content: ""; display: block; position: absolute; top: 4px; left: 46px; width: 12px; height: 12px; border-left: 1px solid #999; border-bottom: 1px solid #999; }
.comment-wrap .comment-enter { position: relative; padding-left: 80px !important; }
.comment-wrap .comment-enter:before { content: ""; display: block; position: absolute; top: 40px; left: 46px; width: 12px; height: 12px; border-left: 1px solid #999; border-bottom: 1px solid #999; }

.comment-enter.has-attach { position: relative; }
.comment-enter.has-attach > div { position: static; }
.comment-enter.has-attach button[type="submit"] { top: 10px; right: 10px; height: calc(100% - 20px); }
.comment-enter.has-attach .attach-box { position: relative; padding-left: 110px; }
.comment-enter.has-attach .search-file-btn { position: absolute; top: 0; left: 0; margin: 0; width: 100px; height: 50px; line-height: 1; font-size: 16px; color: #333; text-align: center; border-radius: 6px; background: #e4e8ec; }
.comment-enter.has-attach .attach-file-con.del li { padding: 0; line-height: 1.3; }

.ckeditor-con .cke_editor_ck-editor { height: 40vh; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }

.modal-wrap { position: fixed; top: 50%; left: 50%; padding: 20px; width: 100%; max-width: 440px; min-width: 300px; transform: translate(-50%, -50%); }
.modal-wrap > div { padding: 40px 20px; border: 1px solid #eee; border-radius: 12px; background: #fff; box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.2); }
.modal-wrap.confirm .desc { padding: 10px 20px 20px; text-align: center; }
.modal-wrap .grid-con.btns .grid-item { padding: 0 5px; }
.modal-wrap .grid-con.btns .cc-btn { display: block; margin-top: 10px; font-size: 16px; height: 50px; line-height: 50px; letter-spacing: -1.5px; background: #333; }
.modal-wrap .grid-con.btns .cc-btn.gray { background: #ececec; }

.app-bridge-message-box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; word-break: keep-all; }
.app-bridge-message-box > div { position: absolute; top: 50%; left: 50%; width: 300px; font-size: 16px; font-weight: normal; color: #333; text-align: center; line-height: 1.5; border-radius: 10px; background: #fff; overflow: hidden; transform: translate(-50%, -50%); box-shadow: 0px 3px 20px 0 rgba(0, 0, 0, 0.2); }
.app-bridge-message-box .top { padding: 20px 10px 10px; font-size: 21px; letter-spacing: -1px; text-align: center; }
.app-bridge-message-box .top .title { font-weight: bold; }
.app-bridge-message-box .middle { padding: 30px 10px 25px; min-height: 100px; max-height: 80vh; letter-spacing: -1px; overflow-y: auto; }
.app-bridge-message-box .middle .desc { font-size: 17px; }
.app-bridge-message-box .middle .btns { margin-top: 15px; padding: 0 15px; }
.app-bridge-message-box .middle .btns a { display: block; margin-top: 10px; padding: 5px; font-size: 16px; color: #fff; text-align: center; background: #1e2f46; border-radius: 4px; }
.app-bridge-message-box .middle .enter { margin-top: 20px; padding: 0 15px; }
.app-bridge-message-box .middle .enter-txt { text-align: left; }
.app-bridge-message-box .middle .enter input, .app-bridge-message-box .middle .enter select { display: block; margin: 10px 0; padding: 0 10px; width: 100%; height: 40px; border: 1px solid #ccc; }
.app-bridge-message-box .middle .enter .btn { display: block; width: 100%; height: 44px; line-height: 42px; color: #fff; background: #888; border-radius: 6px; }
.app-bridge-message-box .top ~ .middle { padding-top: 0; }
.app-bridge-message-box .bottom .btns { overflow: hidden; background: #fff; }
.app-bridge-message-box .bottom .btns a { display: block; float: left; width: 50%; height: 44px; line-height: 44px; font-size: 16px; color: #000; text-align: center; background: #ececec; overflow: hidden; }
.app-bridge-message-box .bottom .btns a.submit { color: #fff; background: #333; }
.app-bridge-message-box .bottom .btns.col-1 a { width: 100%; }
.app-bridge-message-box .bottom .btns.col-3 a { width: 33.333%; }
.app-bridge-message-box .bottom .btns.col-4 a { width: 25%; }
.app-bridge-message-box .app-txt { margin-top: -10px; text-align: left; }
.app-bridge-message-box .symbol { position: relative; padding-left: 10px; }
.app-bridge-message-box .symbol:before { content: "*"; position: absolute; top: 4px; left: 0; }
.app-bridge-message-box input[readonly], .app-bridge-message-box select[disabled] { background: #f5f5f5; }
.app-bridge-message-box .middle .enter.check { text-align: left; font-size: 15px; }
.app-bridge-message-box .middle .enter.check input[type="checkbox"] { cursor: pointer; display: inline-block; width: 26px; height: 26px; }
.app-bridge-message-box .middle .enter.check label { cursor: pointer; padding-left: 10px; }
.app-bridge-address-box > div { width: 100%; min-width: 300px; max-width: 400px; }
.app-bridge-address-info-box > div { width: 100%; min-width: 300px; max-width: 600px; }
.app-bridge-address-info-box .middle { padding-left: 20px; padding-right: 20px; padding-bottom: 50px; max-height: 60vh; }
.app-bridge-address-info-box .address-btns { padding-bottom: 10px; border-bottom: 2px solid #666; overflow: hidden; }
.app-bridge-address-info-box .address-btns a { display: block; float: right; padding: 10px; min-width: 80px; font-size: 15px; color: #fff; text-align: center; border-radius: 6px; background: #2687e2; }
.app-bridge-address-info-box .address-table-lists { min-height: 60px; max-height: 80vh; overflow-y: auto; }
.app-bridge-address-info-box table {  width: 100%; table-layout: fixed; }
.app-bridge-address-info-box th, .app-bridge-address-info-box td { height: 50px; font-size: 15px; color: #333; text-align: left; word-break: keep-all; border-bottom: 1px solid #eee; }
.app-bridge-address-info-box th.atl-1 { text-align: center; }
.app-bridge-address-info-box th.atl-2 { padding-left: 30%; }
.app-bridge-address-info-box td { position: relative; height: 120px; }
.app-bridge-address-info-box td span { display: inline-block; }
.app-bridge-address-info-box td.atl-1 { padding: 20px 5px; color: #40a3ff; text-align: center; }
.app-bridge-address-info-box td.atl-1 button { display: block; margin: 5px auto; width: 86px; height: 44px; line-height: 44px; color: #40a3ff; text-align: center; border: 1px solid #ededed; border-radius: 6px; }
.app-bridge-address-info-box td.atl-2 { padding: 20px 110px 20px 10px; }
.app-bridge-address-info-box .atl-bnts { position: absolute; top: 0; right: 10px; width: 86px; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.app-bridge-address-info-box .atl-bnts a { display: block; margin: 5px; width: 86px; height: 44px; line-height: 44px; font-size: 15px; color: #333; text-align: center; border-radius: 6px; background: #ededed; }
.app-bridge-address-info-box .atl-bnts a:last-child { border: 1px solid #ededed; background: none; }
.app-bridge-message-box a:focus, .app-bridge-message-box button:focus { box-shadow: 0 0 0 1px #40a3ff; outline: 0; }

@media all and (max-width: 599px) {
	.app-bridge-address-info-box td.atl-2 { padding-left: 5px; padding-right: 5px; }
	.app-bridge-address-info-box .atl-bnts { position: static; display: block; margin-top: 10px; width: 100%; height: auto; text-align: right; }
	.app-bridge-address-info-box .atl-bnts a { display: inline-block; margin: 5px 0 0 5px; width: 60px; height: 34px; line-height: 34px; }
}

@media all and (min-width: 400px) {
	.open-sm #container, .open-sm #header, .open-sm #footer { left: 360px; 	}
}
@media all and (min-width: 1400px) {
	.is-online .scroll-top-btn { mix-blend-mode: screen; }
}
@media all and (max-width: 1250px) {
	.goods-con > .title { padding: 0 20px; font-size: 26px; }
	.goods-con > .title a:after { background-size: 10px; }
	.goods-con > ul { margin: 0; }
}
@media all and (max-width: 1220px) {
	#footer > div { padding-left: 130px; }
	.pad-con { padding: 0; }
	p.sub-title { padding: 0 20px; }
	.con-pd { padding: 0 20px; }
	.goods-con .goods-title { padding-left: 15px; padding-right: 15px; }
	.goods-con > ul { padding-left: 12px; padding-right: 12px; }
	.slide-toggle-con .st-header, .slide-toggle-con .st-body { padding-left: 150px; }
	.prev-page-btn { left: 20px; }
	.detail-page-con > .top { padding: 0 20px; }
	.detail-page-con .detail-area > div { border-left: 0 none; border-right: 0 none; border-radius: 0; }
	.detail-page-con .detail-header { padding: 20px; }
	.detail-page-con .detail-body { padding-left: 20px; padding-right: 20px; }
	.cc-list-con > .top { padding: 0 20px; }
	.goods-thumb-item { padding: 0 15px; }
	.goods-thumb-item .cancel-btn { right: 15px; }
	.page-title .move-page-btn { right: 10px; }
}
@media all and (max-width: 940px) {
	.goods-con .goods-item { width: 50%; }
	.goods-detail-con { padding-top: 0; }
	.goods-detail-con > div { padding: 0; }
	.goods-detail-con > div > div { float: none; width: 100%; }
	.goods-figure .img { border: 0 none; border-radius: 0; }
	.goods-figure .caption { display: none; }
	.goods-detail-con .goods-info { padding: 10px 20px 0; }
	.goods-info .info-1 .bottom > div { font-size: 24px; letter-spacing: -1.5px; }
	.goods-info .info-2 { display: block; }
}
@media all and (max-width: 820px) {
	.goods-thumb-item { margin-top: 15px; margin-bottom: 30px; padding: 15px 15px 30px 15px !important; border-bottom: 1px solid #ededed; }
	.goods-thumb-item .link { display: block; padding-left: 15px; align-items: stretch; }
	.goods-thumb-item .link .img { position: relative !important; margin: 0 auto; margin-bottom: 10px; width: 70%; height: auto; }
	.goods-thumb-item .cancel-btn { position: static; width: 125px; margin: 10px auto 0; transform: none; }
	.good-select .select-item { display: block; margin: 0 auto; max-width: 540px; text-align: left; }
	.goods-thumb-item.view a.link { padding-right: 15px; padding-bottom: 60px; }
	.goods-thumb-item.view .view-btn { top: auto; bottom: 0; right: auto; left: 50%; margin: 0; padding: 0; width: 100px; height: 44px; line-height: 42px; font-size: 16px; font-weight: 400; color: #333; text-align: center; border: 1px solid #ccc; border-radius: 6px; transform: translate(-50%, 0%); }
	.goods-thumb-item.view .supplement .view-btn { margin-left: -50px; }
	.goods-thumb-item.view .view-btn:after { content: none; }
	.goods-thumb-item.view > a.link ~ .del-btn { top: auto; right: 50%; bottom: 30px; margin-right: -160px; width: 100px; transform: translateX(-50%); }
	.goods-thumb-item.view > a.link.creating { padding-bottom: 14px; }
	.goods-thumb-item.view > a.link.creating ~ .del-btn { position: static; margin: 0 auto; transform: translate(0%); }
	.goods-thumb-item.view > a.link.supplement { padding-bottom: 16px; }
	.goods-thumb-item.view > a.link.supplement ~ .del-btn { position: static; margin: 0 auto; transform: translate(60px, 0%); }
	.goods-thumb-item.view > a.link.supplement ~ .supplement-btn { position: absolute; top: auto; bottom: 30px; right: 50%; width: 100px; transform: translate(0%); 	}
}
@media all and (max-width: 840px) {
	#footer { padding-left: 0; padding-right: 0; }
	#footer > div { padding: 0; text-align: center; }
	#footer .logo { position: static; margin-bottom: 10px; width: auto; background-position: center top; }
	#footer .logo span { display: inline-block; }
	#footer .info .item { margin-right: 0; padding: 0 5px; }
	#footer .info .item:before { content: none; }
}
@media all and (max-width: 770px) {
	#content { padding-top: 30px; }
	.page-title { margin-bottom: 20px; }
	.page-title > strong { margin-bottom: 6px; }
	.slide-toggle-con .st-header { padding: 0 50px 0 0; padding: 20px 50px 0 20px; }
	.slide-toggle-con .st-header .underline { padding: 20px 0; }
	.slide-toggle-con .st-header small { top: 15px; left: 20px; text-align: left; transform: none; }
	.slide-toggle-con .arrow { right: 10px; }
	.slide-toggle-con .st-body { padding: 0 50px 0 20px; }
}
@media all and (max-width: 720px) {
	.goods-con > ul { margin: 0 auto; padding-left: 0; padding-right: 0; max-width: 460px; }
	.goods-con .goods-item { float: none; width: 100%; }
	.goods-con .figcaption h3 { height: auto; max-height: 55px; }
	.total-search { padding: 0 !important; }
	.total-search .fieldset { max-width: 100%; }
	.total-search input { padding: 22px 10px; }
	.cc-paging a { width: 34px; height: 34px; line-height: 32px; font-size: 16px; }
}
@media all and (max-width: 640px) {
	#header { height: 64px; }
	#header .logo { height: 100%; background-size: 80px; transform: translateY(0); }
	.nav-toggle-btn { left: 0; width: 54px; height: 100%; }
	.h-right-btns { right: 5px; height: 100%; }
	.h-right-btns .button { margin: 0 3px; width: 40px !important; height: 100% !important; }
	.h-right-btns .button.search { background-size: 32px; }
	.h-right-btns .button.mypage { background-size: 36px; }
	.h-right-btns .button.notify { background-size: 33px; }
	.h-right-btns .button.notify.on:after { top: 14px; }
	.mypage-menu-modal { top: 62px; right: 42px; }
	.mypage-menu-modal:before { top: -14px; right: 17px; border-left-width: 15px; border-right-width: 15px; border-bottom-width: 15px; }
	#container { padding-top: 64px; }
	.cc-list-con .list-item { padding-right: 20px; }
	.cc-list-con .list-item .date { position: static; margin-top: 5px; text-align: left; transform: none; }
	.cc-list-con a.list-item.arrow { padding-right: 40px; }
	.cc-list-con a.list-item.arrow:after { right: 20px; }
	.comment-enter > div { padding-right: 0; }
	.comment-enter button[type="submit"] { position: static; margin-top: 10px; width: 100%; height: 50px; line-height: 50px; }
	.comment-reply .comment-info, .comment-reply .comment-txt, .comment-wrap .comment-enter { padding-left: 50px !important; }
	.comment-reply .comment-txt:before, .comment-wrap .comment-enter:before { left: 20px; }
	.comment-enter.has-attach .attach-box { margin-top: 15px; padding-left: 0; }
	.comment-enter.has-attach .search-file-btn { position: static; }
	.comment-enter.has-attach .attach-file-con { margin-top: 10px; }
	.comment-enter.has-attach button[type="submit"] { margin-top: 20px; }
	.page-title .move-page-btn { top: -20px; padding: 6px 10px; width: auto; height: auto; line-height: 1; font-size: 15px; }
}
@media all and (max-width: 540px) {
	#footer > div { padding-left: 10px; padding-right: 10px; text-align: center; }
	.bookmark-share-btns .share-items { padding: 20px; }
	.bookmark-share-btns .share-items ul { padding: 0; }
	.attach-file-con > div { padding-left: 0; }
	.attach-file-con .txt-t { position: static; }
	.move-page-list li { padding: 15px 20px; }
	.move-page-list li > small { position: static; margin-bottom: 8px; transform: none; }
	.goods-thumb-item .link .img { width: 100%; }
}
@media all and (max-width: 440px) {
	.mypage-menu-modal { right: 0; padding: 0 10px; width: 100%; }
	.mypage-menu-modal:before { right: 58px; }
	.mypage-menu-modal .mypage-header { padding-left: 18px; height: 65px; line-height: 65px; font-size: 18px; }
	.mypage-menu-modal .mypage-header .user { padding-left: 50px; background-size: 40px; }
	.mypage-menu-modal .mypage-body { top: 65px; height: 42vh; max-height: 335px; }
	.mypage-menu-modal .mypage-body > div { padding: 10px 20px 0; font-size: 16px; }
	.mypage-menu-modal .mypage-body li a { padding: 12px 0; }
	.detail-header .bookmark-share-btns { position: static; margin-bottom: -10px; }
	.detail-header .bookmark-share-btns .share-items { width: 100%; }
	.modal-wrap .grid-con.btns .grid-item { float: none; width: 100%; }
}
@media all and (max-width: 400px) {
	#header .logo { position: relative; left: -16px; }
	.h-right-btns .button { width: 32px !important; }
	.h-right-btns .button.search { background-size: 28px; }
	.h-right-btns .button.mypage { background-size: 32px; }
	.h-right-btns .button.notify { background-size: 28px; }
	.h-right-btns .button.notify.on:after { top: 16px; right: 0; }
	.mypage-menu-modal:before { right: 48px; }
	#footer .link { padding: 6px; letter-spacing: -1px; }
	.goods-con > .title { text-align: left; }
	.total-search input { font-size: 22px; }
	.bookmark-share-btns { font-size: 15px; }
	.bookmark-share-btns .btn span { padding-left: 30px; }
}
@media all and (max-width: 380px) {
	.goods-thumb-item .caption .space { display: block; }
	.goods-thumb-item .caption .space:after { content: none; }
}