@charset "utf-8";
body { letter-spacing: -0.5px; } 

/* font */
h1, .h1 { font-size: 32px; font-weight: 500; } 
h2, .h2 { font-size: 28px; } 
h3, .h3 { font-size: 24px; } 
h4, .h4 { font-size: 18px; } 
h5, .h5 { font-size: 16px; } 
h6, .h6 { font-size: 14px; } 


h1 span { font-weight: 700; font-size: inherit; } 
h2 span { font-weight: 700; font-size: inherit; } 
h3 span { font-weight: 700; font-size: inherit; } 
h4 span { font-weight: 700; font-size: inherit; } 
h5 span { font-weight: 700; font-size: inherit; } 
h6 span { font-weight: 700; font-size: inherit; } 

.b { font-weight: 700!important; } 
.m { font-weight: 400; } 
.d-gray { color: #333; } 
.gray { color: #888; } 
.dark { color:#000 } 
.red { color:#ff5b37!important } 
.white { color:#fff!important } 
.underline { text-decoration: underline!important; }
.ls-normal { letter-spacing: normal!important; } 
.txt-coral{color:#ff7f50;font-size:14px;}
.txt-coral a{font-size:14px;}

.cat-h3 { font-size: 30px; line-height: 38px; color: #000; padding:0 0 5px 0 } 

.visual-txt01 { font-size: 40px; line-height: 52px; font-weight: 400; color: #000; letter-spacing: -1px; } 
.visual-txt02 { font-size: 80px; line-height: 90px; font-weight: 700; color: #000; letter-spacing: -2px; } 
.wh { color: #fff!important; } 
.visual-txt03 { font-size: 22px; line-height: 32px; font-weight: 400; color: #000; } 
.visual-txt04 { font-size: 60px; line-height: 70px; font-weight: 400; color: #000; letter-spacing: -5px; } 
.section-tit { display: inline-block; font-size: 45px; line-height: 59px; font-weight: 400; border-bottom: 2px solid #000; color: #000; padding-bottom: 13px } 
.section-tit-02 { position: relative; display: inline-block; font-size: 30px; line-height: 40px; font-weight: 400; border-bottom: 2px solid #000; color: #000; padding-bottom: 6px } 
.section-tit-02 .ico-plus { position:absolute; top: 8px; right: -30px; width: 20px; height: 20px; background:url(../images/common/ico-plustxt.svg) no-repeat center center } 
.section-tit.wh { border-bottom-color: #fff } 
.section-tit-02.wh { border-bottom-color: #fff } 
.section-tit-03 { font-size: 35px; line-height: 35px; font-weight: 400; color: #000; } 

.section-tit span,
.section-tit-02 span,
.section-tit-03 span,
.visual-txt01 span,
.visual-txt02 span,
.visual-txt03 span,
.visual-txt04 span {font-size:inherit;}

/* background-color */
.bg-gray { background-color: #F8F8F8!important; } 
.bg-black { background-color: #000!important; } 

/* group */
.flex { display: flex; align-items: center; position: relative; } 
.flex.left { justify-content: flex-start; } 
.flex.center { justify-content: center; } 
.flex.right { justify-content: flex-end; } 
.flex .end { margin-left: auto; } 
.flex.top { align-items: flex-start; } 
.flex.bottom { align-items: flex-end; } 
.flex.between { justify-content: space-between; } 
.flex.division { align-items:normal; } 
.flex.division > div { flex: 1; } 
.flex.margin > * { margin-left: 20px; } 
.flex.margin > *:first-child { margin-left: 0px; } 
.flex.full > * { width: 100%!important; } 
.flex-wrap { flex-wrap: wrap; } 
.flex-column { flex-direction: column; } 
.d-block{ display:block!important }

.ellipsis { overflow:hidden; max-width:100%; white-space:nowrap; text-overflow:ellipsis; } 
.ellipsis2 { overflow:hidden; max-width:100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } 

.div-middle { margin-top: 40px; } 
.div-middle.phone button { width: 140px; height: 50px; flex: none; margin: 0 0 0 10px; padding: 0; } 
.div-middle.phone .time { position: absolute; right: 20px; top: 14px; font-size: 14px; } 
.div-middle.phone .box span { font-size: 16px; font-weight: 500; } 
.div-middle .half-w {width:445px;}

.box-holder { border: 1px solid #ddd; padding: 15px 20px 18px; color: #888; font-size: 12px; line-height: 1.5; } 
.noborder{border:none!important}
.box-holder.bg-gray { border: none; padding: 20px 30px }
.box-holder p { position: relative; padding-left: 5px; font-size: 14px;} 
.box-holder p::before { content: ''; position: absolute; left: -5px; top: 8px; width: 3px; height: 3px; background: #888; } 
.box-holder p span { color: #000;font-size: inherit; } 
.box-holder p:not(:first-child) { margin-top: 5px; } 
.box-holder p a { color: #000; vertical-align: baseline; text-decoration:underline; text-underline-position: under; } 
.box-holder .tit {display:block; margin:0 0 10px -10px; color:#333; font-size:14px; font-weight:500;}
.box-holder .tit:before {display:inline-block; content:'!'; width:16px; height:16px; margin-right:10px; background-color:#333; border-radius:100%; color:#fff; font-size:14px; line-height:16px; text-align:center; vertical-align:0;}

.tit-border {padding-bottom:10px; border-bottom:1px solid #000;}
.txt-holder { color: #666; font-size: 14px; line-height: 1.5; } 
.pr-sticky{clear:both;}
.label+.input-holder { margin-top: 10px; } 
.label { color: #333; font-weight: 500; } 

[class *= _img] { display: inline-block; font-size: 0; } 

/* button */
[class^="btn-type"] { display: inline-block; height: 60px; color: #fff; border: solid 1px #000; background: #000; cursor: pointer; font-size: 18px; text-align: center; vertical-align: top; padding: 8px 20px; } 
[class^="btn-type"] .box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; } 
[class^="btn-type"]:active { background: #212129; } 
[class^="btn-type"]:disabled { cursor: default; background: #ccc; border-color: #ccc; color: #fff; } 
[class^="btn-type"] span { font-size: 18px; font-weight: 700; } 
.btn-type-line { border: solid 1px #333; background: #fff; color: #333; } 
.btn-type-line:active { border-color: #353642; background: #fff; } 
.btn-type-line:disabled { border-color: #ccc; background: #ccc; color: #fff; } 
.btn-type-normal i { width: 28px; height: 28px; display: inline-block; } 
.btn-type-underline { border: none; border-bottom: 1px solid #ddd; background-color: transparent; color: #888; padding: 0; }
.btn-type-underline.small { height: 24px!important }
.btn-type-gray { border: solid 1px #888; background: #888; color: #fff; } 
.btn-type-gray:active { border-color: #888; background: #888; } 
.btn-type-gray:disabled { border-color: #eee; background: #eee; color: #ddd; } 

.btn-filter { position:relative; min-width: 60px } 
.btn-filter span { display: inline-block; color: #333; font-size: 14px; margin-right: 10px } 
.btn-filter.check:after {content:'';position:absolute;top:0;right:0;width:4px;height:4px;background-color:#FF5B37; border-radius:100%;}

.btn-type-icon { background-color: transparent; border: none; } 
.btn-type-icon.cp-down { margin-left: auto; padding: 0 0 5px 0; border-bottom: 1px solid #000; height: 22px; } 
.btn-type-icon.cp-down:active { background:none; } 
.btn-type-icon.cp-down span { color:#000; font-weight:400; font-size: 14px; margin:0 2px } 
.btn-type-icon.cp-down i { background:url(../images/common/icons-24-px-dowmload.svg); width: 24px; height: 24px; } 

[class^="btn-type"].full { width:100% } 
[class^="btn-type"].large { width:322px } 
[class^="btn-type"].middle { width:140px; padding: 8px 0px; font-size:16px; height: 50px; } 
[class^="btn-type"].middle span { font-weight: 400; } 
[class^="btn-type"].xmiddle { height: 40px; } 
[class^="btn-type"].xmiddle * { font-size: 16px; font-weight: 400; } 
[class^="btn-type"].small { height: 32px; } 
[class^="btn-type"].small * { font-size: 13px; } 
[class^="btn-type"].xsmall { min-width:100px; height: 32px; border-color: #ddd } 
[class^="btn-type"].xsmall * { font-size: 14px; font-weight: normal; } 
[class^="btn-type"].wauto { width:auto; padding-left:28px; padding-right:28px; }
td [class^="btn-type"].xsmall, .td-select [class^="btn-type"].xsmall { min-width:65px; padding: 8px 0 } 
.modal-middle [class^="btn-type"].large { width:200px }
[class^="btn-type"].confirmed span{background:url(../images/common/ico-checkon.svg) no-repeat left center;padding-left: 20px}

.media-btn { position: relative } 
.media-btn::after { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; background: url(../images/common/ico-btnplayer.png) no-repeat center center; margin: -45px 0 0 -45px; }
.goods-btns .btn-type-line.heart, .goods-btns .btn-type-line.share{width:60px!important} 
.goods-btns .btn-type-line.heart {width: 41.25% !important; padding: 8px 0;}
.btn-more ._img{width:24px;height:24px;background:url(../images/common/ico24-down-arrow.svg) no-repeat center center;margin-left:10px}
.np-ico{height: 20px;vertical-align: middle;margin: -2px 0 0 5px;}
button.heart ._img {background: url(https://contents.k-village.co.kr/front/pc/images/common/ico24-heart-fill.svg) no-repeat center center / 100%;}
button.heart .box {flex-direction: column; justify-content: center;}
button.heart .box .num {display: block; width: 100%; font-size: 12px;}

/*input*/
[class^="txt-type"] { height: 50px; width: 100%; line-height: 1; color: #111; background-color: #fff; font-size: 14px; border: 1px solid #ddd; padding: 10px 20px; } 
[class^="txt-type"]:focus { border: 1px solid #353642; } 
.txt-type-normal:disabled { background-color: #f8f8f8; border-color: #ddd; color: #888 } 

.input-holder { position: relative; width: 100%; } 
.input-holder + span { padding: 0 4px; font-size: 16px; } 
.input-holder + span.txt { padding: 0 6px; font-size: 14px; margin-right: 6px; } 
.input-holder + span.dot { padding: 0 10px; font-size: 14px; } 
.input-holder + span.hyphen { width: 10px; padding: 0; background: #ddd; height: 1px; flex: none; margin: 0 11px; } 
.input-holder + span.mail-mark { padding: 0 12px; color: #888 } 

.input-holder input + span { position: absolute; right: 4px; top: 4px; cursor: pointer; } 
.input-holder .del { top: 14px; } 
.input-holder .del i { width: 24px; height: 24px; background: url(../images/common/ic-search-title-close-n.svg) left top no-repeat; } 
.input-holder .btn-search i { width: 24px; height: 24px; background: url(../images/common/ico24-search.svg) left top no-repeat; cursor: pointer; } 
.input-holder.half-w {width:445px;}

.error input { border: 1px solid #ff5b37; } 
.message span { color: #ff5b37; } 
.message { display: none } 
.error .message { display: block } 

.search-type { height: 30px; width: 210px; line-height: 1; color: #111; font-size: 13px; border-bottom: 1px solid #333; padding: 10px; } 
.essen{font-size:14px;color:#ff5b37;display:inline-block;margin:0 0 0 5px;}

/*select*/
[class^="sbox-type"] { height: 50px; width: 100%; padding: 0 30px 0 10px; border: solid 1px #ddd; background: #fff url(../images/common/ico24-down-arrow.svg) right 12px center no-repeat; font-size: 14px; background-size: 14px 14px } 
[class^="sbox-type"]:not(:disabled):hover { box-shadow: 0 0 3px 0 rgba(109, 110, 131, 0.3); } 
[class^="sbox-type"]:focus { border: 1px solid #353642; } 
.box-type-select{width: 100%;padding: 0 19px 0 15px;border: none;background: #fff url(../images/common/ico24-down-arrow.svg) right 12px center no-repeat;font-size: 14px;border: 1px solid #ddd;height: 47px;line-height: 47px;color: #888;background-position-x: calc(100% - 10px);background-position-y: center;background-size: 14px 14px }
.sbox-type-line, .sbox-type-line:not(:disabled):hover, .sbox-type-line:focus { border: none; border-bottom: solid 1px #eee; } 
.sbox-type-noline, .sbox-type-noline:not(:disabled):hover, .sbox-type-noline:focus { border: none } 

/* custom-select */
.custom-select { width: 100%; position: relative } 
.filter-select { min-width: 90px; position: relative } 
.filter-select [class^="sbox-type"] { height: 20px; min-width: 90px; padding: 0 30px 0 10px; border: none; background-color: #fff; background: url(../images/common/ico-select-down.svg) right 4px center no-repeat; font-size: 14px; } 

/*radio*/
[class^="rbox-type"] { position: absolute; left: -99999px; } 
[class^="rbox-type"] + label { height: 20px; line-height: 20px; padding: 0 34px 0 29px; background-size:20px 20px; background-repeat:no-repeat; background-position:left top; background-image: url(../images/common/radio-inactive.svg); font-size: 16px; display: inline-block; cursor: pointer; } 
input[type=radio]:checked + label { background-image: url(../images/common/radio-active.svg); } 
input[type=radio]:disabled + label { background-image: url(../images/common/radio-disabled.svg); cursor: default; } 
input[type=radio]:checked:disabled + label { background-image: url(../images/common/radio-active-disabled.svg); cursor: default; } 

.radio-type [class^="rbox-type"] + label { height: 50px; line-height: 48px; border-radius: 25px; padding: 0 25px; background:#f5f5f5; background-image:none !important; color: #555; font-size: 16px; display: inline-block; cursor: pointer; margin-right: 10px; } 
.radio-type [class^="rbox-type"]:disabled + label {color:#ddd;}
.radio-type input[type=radio]:checked + label { background: #292929; color: #fff; } 


/*checkbox*/
[class^="cbox-type"] { display: none; } 
[class^="cbox-type"] + label { height: 20px; line-height: 20px; padding: 0 24px 0 32px; background-size:20px 20px; background-repeat:no-repeat; background-position:left top; background-image:url(../images/common/check-inactive.svg); font-size: 14px; display: inline-block; cursor: pointer; color: #333; } 
input[type=checkbox]:checked + label { background-image: url(../images/common/check-active.svg); } 
input[type=checkbox]:disabled + label { background-image: url(../images/common/check-disabled.svg); cursor: default; } 
input[type=checkbox]:checked:disabled + label { background-image: url(../images/common/check-active-disabled.svg); cursor: default; } 


/* .checkbox-type [class^="cbox-type"] + label { height: auto; line-height: 20px; padding: 0 24px 0 34px; background-color:transparent; font-size: 14px; } 
.checkbox-type input[type=checkbox]:checked + label { background-image: url(../images/common/components-checkbox-active.svg); }
.checkbox-type input[type=checkbox]:disabled + label { background-position: -450px -200px; cursor: default; }  */

/* textarea */
textarea { border: 1px solid #ddd; width: 100%; padding: 10px; } 
textarea:not(:disabled):hover { box-shadow: 0 0 3px 0 rgba(109, 110, 131, 0.3); } 
textarea:focus { border: 1px solid #353642; } 

/* dropdown */
.dropdown-wrap { position: relative; }
.dropdown-toggle { -webkit-tap-highlight-color: transparent; background-color: #fff; border-radius: 0; border: solid 1px #ddd; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; min-width: 118px; height: 40px; line-height: 38px; outline: none; padding-left: 15px; padding-right: 30px; position: relative; font-size: 14px; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto}
.dropdown-toggle:hover { border-color: #ddd; } 
.dropdown-toggle:active, .dropdown-toggle.open, .dropdown-toggle:focus { border-color: #ddd; } 
.dropdown-toggle:after { border-bottom: 2px solid #000; border-right: 2px solid #000; content: ''; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; }
.dropdown-toggle.open:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } 
ul.dropdown { display: none; position: absolute; top: 100%; margin-top: -1px; background-color: #fff; min-width: 118px; border: 1px solid #ddd; z-index: 2;}
ul.dropdown li a { display: block; cursor: pointer; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 15px; padding-right: 29px; text-align: left; background-color: #fff }
ul.dropdown li.on a { background-color: #f8f8f8; font-weight: 700; }

/* margin-top */
.mt-3 { margin-top: 3px; } 
.mt-10 { margin-top: 10px; } 
.mt-20 { margin-top: 20px; } 
.mt-30 { margin-top: 30px; } 
.mt-40 { margin-top: 40px; } 
.mt-50 { margin-top: 50px; } 
.mt-60 { margin-top: 60px; } 
.mt-70 { margin-top: 70px; } 
.mt-80 { margin-top: 80px; } 
.mt-90 { margin-top: 90px; } 
.mt-100 { margin-top: 100px; } 
.mt-110 { margin-top: 110px; } 
.mt-160 { margin-top: 160px; } 

/* margin-left */
.ml-0 { margin-left: 0!important} 
.ml-10 { margin-left: 10px } 
.ml-20 { margin-left: 20px } 
.ml-30 { margin-left: 30px } 
.ml-40 { margin-left: 40px } 
.ml-50 { margin-left: 50px } 

/* margin-right */
.mr-10 { margin-right: 10px } 
.mr-20 { margin-right: 20px } 
.mr-40 { margin-right: 40px } 
.mr-50 { margin-right: 50px } 

/* margin-bottom */
.mb-10 { margin-bottom: 10px; } 
.mb-20 { margin-bottom: 20px; } 
.mb-30 { margin-bottom: 30px; } 
.mb-40 { margin-bottom: 40px; } 
.mb-50 { margin-bottom: 50px; } 
.mb-60 { margin-bottom: 60px; } 

/* padding-top */
.pt-30 { padding-top:30px } 
.pt-50 { padding-top:50px } 

/* padding-bottom */
.pb-30 { padding-bottom:30px } 
.pb-70 { padding-bottom:70px } 
.pb-100 { padding-bottom:100px } 
.pb-160 { padding-bottom:160px } 

/* padding all */
.p-0 { padding:0!important }
.p-20 { padding:20px } 
.p-30 { padding:30px } 
.p-34 { padding:34px } 
.p-40 { padding:40px } 

/* align */
.align-l { text-align: left; } 
.align-r { text-align: right; } 
.center { text-align: center; } 

/* position */
.position-relative { position: relative } 

/* content width */
.w1640 { width: 1640px; margin-left:auto; margin-right:auto } 
.w1420 { width: 1420px; margin-left:auto; margin-right:auto } 
.w1360 { width: 1360px; margin-left:auto; margin-right:auto } 
.w1280 { width: 1280px; margin-left:auto; margin-right:auto } 
.w1200 { width: 1200px; margin-left:auto; margin-right:auto } 
.w1100 { width: 1100px; margin-left:auto; margin-right:auto } 
.w1080 { width: 1080px; margin-left:auto; margin-right:auto } 
.w1020 { width: 1020px; margin-left:auto; margin-right:auto } 
.w1000 { width: 1000px; margin-left:auto; margin-right:auto } 
.w880 { width: 880px; margin-left:auto; margin-right:auto } 
.w800 { width: 800px; margin-left:auto; margin-right:auto } 
.w640 { width: 640px; margin-left:auto; margin-right:auto } 
.w560 { width: 560px; margin-left:auto; margin-right:auto } 
.w520 { width: 520px; margin-left:auto; margin-right:auto } 
.w140 { width: 140px } 
.w100 { width: 100% } 
.wauto { width: auto!important; } 

/* breadcrumb */
.breadcrumb a span, .breadcrumb li, .breadcrumb li a { font-size:14px; } 
.breadcrumb li:first-child { background:url(../images/common/ico-home.svg) no-repeat left center; padding-left: 22px } 
.breadcrumb-wh { position: absolute; top: 0; z-index: 2; left: 50%; margin-left: -820px } 
.breadcrumb-wh a span, .breadcrumb-wh li { color: #fff } 

/* etc icon */
i.bread { display:block; margin:0 5px; width:5px; height:10px; background: url(../images/common/icon-breadcrumb.svg) } 
.breadcrumb-wh i.bread { background-image: url(../images/common/icon-breadcrumb-wh.svg); } 
i.arrow-dark { display:block; margin:0 5px; width:8px; height:12px; background: url(../images/common/icon-arr-dark.svg) } 
.btn-favorite i { width: 40px; height: 40px; background-image:url(../images/common/ico-favorite.svg); background-position: center center; background-repeat: no-repeat; background-size: 22px 22px; } 
.btn-favorite.on i { background-image:url(../images/common/ico24-heart-fill.svg); background-size: 22px 22px } 
i.small-bar { width:1px; height:14px; background:url(../images/common/ico-smallbar.svg) no-repeat center center; margin: 0 10px; } 
.brand-quick i { width: 55px; height: 55px; background:#fff url(../images/common/ico_pluse.svg) no-repeat center center; border-radius: 50%; border: 1px solid #888 } 
.history i { width: 55px; height: 55px; background:#fff url(../images/common/ico_history.svg) no-repeat center center; border-radius: 50%; border: 1px solid #888 } 
.history ._img + em { height: 22px; border-radius: 50%; background: #333; min-width: 22px; padding: 4px 8px 0; color: #fff; font-size: 10px; display: inline-block; position: absolute; top: -4px; right: -8px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } 
.gotop i { width: 55px; height: 55px; background:#fff url(../images/common/ico_arrow-up.svg) no-repeat center center; border-radius: 50%; border: 1px solid #888 } 
.btn-filter i { width: 16px; height: 16px; background-image:url(../images/common/ico-filter.svg); background-position: center center; background-repeat: no-repeat; } 
i.nocart { width: 70px; height: 70px; background: url(../images/common/ico-nocart.svg) no-repeat center center; }
a.more { font-size: 16px; color: #000; background: url(../images/common/ico-arrow-next.svg) no-repeat right center; background-size: 6px 12px; padding: 4px 26px 4px 4px; margin: 0 20px 0 0 } 

/* flag */
.flag-holder { position:absolute; left:0; bottom:0; z-index: 15; } 
.flag { height:24px; line-height:24px; font-size:10px; font-weight:700; padding:0 7px; text-align: center; min-width: 48px } 
.limited { font-size: 14px; color: #ff5b37; } 
.flag.sold-out { color:#fff; background-color: #666; } 
.flag.hot { color:#fff; background-color: #ff5b37; } 
.flag.timesale { color:#fff; background-color: #ff5b37;height:38px;line-height:38px;padding:0 15px;font-size:14px} 
.flag .flagbar{display:inline-block!important;width:1px;height:14px;background-color:#FFB09F;margin:0 10px!important;vertical-align:middle!important;}
.flag .flag-clock{font-size:14px!important;color:#fff!important;display:inline-block!important;margin:0!important}
.flag.event-flag { color:#fff; background-color: #ff5b37;height:38px;line-height:38px;padding:0 15px;font-size:14px} 
.flag.new { color:#fff; background-color: #333; } 
.flag.flag-black { color:#fff; background-color: #000; } 
.flag-chart { position: absolute; left: 0; top: 0; width: 32px; height: 32px;background:rgba(0,0,0,0.5);display:block;color:#fff;text-align:center;line-height:32px; /* 20240424 gnb 위로 노출되어 z-index 수정 */ z-index: 10;} 
.flag-chart span { color: #fff; font-weight: 700; font-size: 14px; } 
.pr-block .img-wrap:after{content:'';display:block;clear:both;}
/* .promote-list .flag-holder {position: relative;left: 0;top: 0;bottom:auto;z-index: 15;float: left;margin-top: -37px;}  */

/* modal */
body[style="overflow: hidden;"] .wrap { width: calc( 100% - 15px ) } 
body[style="overflow: hidden;"] .option-layer-wrap { width: calc( 100% - 15px ) } 
.blocker { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 91; padding: 20px; box-sizing: border-box; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.5); text-align: center; } 
.blocker:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em; } 
.blocker.behind { background-color: transparent; } 
.modal { vertical-align: middle; position: relative; z-index: 92; max-width: 800px; max-height:940px; box-sizing: border-box; width: 90%; background: #fff; padding: 27px 30px 30px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); -o-box-shadow: 0 0 10px rgba(0,0,0,0.1); -ms-box-shadow: 0 0 10px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: left; }
#mypageCouponPop.modal{top:40%;}
.modal a.close-modal { position: absolute; top: 30px; right: 30px; display: block; width: 20px; height: 20px; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url('../images/common/icon-close.svg'); z-index: 999998; } 
.modal a.close-modal2 { position: absolute; top: 30px; right: 30px; display: block; width: 20px; height: 20px; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url('../images/common/icon-close.svg'); z-index: 999999; } 
.modal .scroll { overflow-y: auto; height:480px; padding: 0 20px 0 0; width: calc( 100% + 20px ); } 
.modal.xlarge { max-width: 1200px } 
.modal.middle { max-width: 520px } 
.modal.hmiddle { height: 320px } 
.modal.hmiddle .scroll { overflow-y: auto; height:160px; } 
.modal.hlarge { height: calc(100vh - 60px);} 
.modal.hlarge .scroll { height: calc( 100vh - 200px ) } 
.modal.hlarge .scroll.filter-scroll { height: calc( 100vh - 155px );max-height: 830px; } 
.modal .modal-header { position: relative; padding-bottom: 20px; margin-bottom:30px; height: 55px } 
.modal .modal-header::after { content: ''; display: block; position: absolute; left: -30px; top: 55px; width: calc( 100% + 60px ); height: 1px; background-color: #000; } 
.modal:not(.xlarge, .hlarge, .modal-full, .large, .search-modal) .modal-header + .modal-middle {padding:0;}
.modal:not(.xlarge, .hlarge, .modal-full, .large, .search-modal) .modal-middle {padding:40px 40px 0;}
.modal.modal-full { max-width: 100%; max-height: 90vh; width: 100%; height: 90vh; padding: 0; background: transparent; box-shadow: none; } 
.modal.modal-full a.close-modal { top: 0; right: 20px; background-image: url(../images/common/ico_wh_close.svg); } 
.modal.modal-right { width: 520px; height: calc(100% + 40px); max-height: calc(100% + 40px); margin: -20px -20px 0 0;float: right; }
.modal.modal-right .scroll {height: 85vh}
.modal.modal-right.modal-recent-goods .scroll {height: 80vh}
.modal .order-top{height:40px;width:calc(100% + 60px);margin:-29px 0 0 -30px;padding:0 20px}
.modal .gb-txt{width:calc(100% + 60px);margin:-29px 0 0 -30px;background:#f5f5f5;height:40px;line-height:40px;font-size:12px;color:#888;padding:0 20px;display:flex;justify-content:space-between}
.modal .order-top *{font-size:16px}
.modal .order-top + .gb-txt{margin-top:0}
.modal .gb-txt > span{color:#888;font-size:16px}
.modal .gb-txt > span em{color:#333}
.btn-modal-underline span{font-size:14px!important;color:#333;text-decoration:underline}
.progress-tit{width:100%;display:flex;height:35px;justify-content:space-between}
.progress-tit p:before{content:'';display:inline-block;width:12px;height:12px;border:solid 1px #ff5b37;background-color:#fff;border-radius:50%;margin:0 15px 0 0}
.progress .type-06 li.new .progress-tit p:before{background-color:#ff5b37;border:2px solid #fff;box-shadow:0px 0px 1px 1px #ff5b37}
.progress-tit p{font-size:16px;font-weight:500}
.progress-tit span{font-size:12px;color:#b2b2b2}
.modal .progress .type-06 {margin-left: 2px}
.progress .type-06 li .img{width:62px;height:auto}
.progress .type-06 li{padding:15px 0;margin-top:0 !important;position:relative;justify-content:flex-start;}
.progress .type-06 li:before{display:none}
.progress .type-06 li:after{content:'';display:block;width:1px;height:100%;background:#ff5b37;position:absolute;left:7px;top:23px;z-index:-1}
.progress .type-06 li:last-child:after{content:none}
.progress .type-06 li .img img{width:62px}
.progress .type-06 li .txt{margin-left:30px;justify-content:flex-start;flex-basis:calc(100% - 93px);align-items:flex-start}
.progress .type-06 li .txt .str{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;max-height:45px;margin:0;font-size:16px;color:#888;width:300px}
.progress .type-06 li .txt .detail{display:inline-block;margin:16px 0 0 0;font-size:16px}
.progress .type-06 li .txt .detail:after{content:'';background:url(../images/common/icons-light-down.svg) no-repeat;width:11px;height:13px;display:inline-block;vertical-align:middle;background-size:100%;transform:rotate(270deg);margin:-4px 0 0 10px}
.recent-goods li{position: relative}
.recent-goods .img {position:relative; width: 120px !important;height: 160px !important;}
.recent-goods .img .btn-favorite { position: absolute; top: 0; right: 0; z-index: 10; } 
.recent-goods .img img {width:100% !important;}
.recent-goods .type-06 {margin:0 !important;}
.recent-goods .type-06 li{display:flex;flex-wrap:wrap;padding:0 0 20px 0;align-items:flex-start; border-bottom:none !important; margin-top:0 !important;}
.recent-goods .date-order-view{display:flex;width:calc(100% + 40px) !important;justify-content:space-between;margin:0 -20px 20px -20px;border-bottom:1px solid #ddd;padding:0 20px;line-height:47px;}
.recent-goods .date-order-view div{font-size: 16px}
.recent-goods .txt {flex-basis: auto !important; padding-left: 30px; margin:0 !important;}
.recent-goods .date-order-view + .order-status{margin:-20px 0 0 0}
.recent-goods .r-date{border-top:1px solid #ddd;margin:20px 0;padding:15px 0 0 0;justify-content:space-between}
.recent-goods .brand{font-size:16px;color:#888;font-weight: 700;}
.recent-goods .txt .str{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;max-height:38px;font-size:16px;color:#000;width:300px;margin: 10px 0 0 0 !important;line-height:19px;}
.recent-goods .r-date>div{width:50%}
.recent-goods .r-date div>em{font-size:13px;color:#888}
.recent-goods .r-date p{font-size:13px;color:#333}
.recent-goods .r-date button{width:135px}
.recent-goods .prd-price{margin-top:10px;font-size:16px}
.recent-goods .prd-price .sale-percent{font-size:16px}
.recent-goods .txt .count span{display:inline-block}
.recent-goods .txt .count .heart{background:url(../images/common/icon-heart.svg) no-repeat;padding:0 0 0 20px;background-size:20px;font-size: 16px}
.recent-goods .txt .count span+span{padding:0 0 0 10px;margin:0 0 0 10px;border-left:1px solid #ddd;height:16px;line-height:16px;font-size:16px}
.recent-goods .txt .count .soldout{color:#ff5b37;font-size:16px}
.recent-goods .list-del{text-decoration:underline;font-size:14px;color:#333;position:absolute;right:0;top:0}

/* scroll */
.scroll::-webkit-scrollbar, ul.dropdown::-webkit-scrollbar { width: 2px; height: 8px; } 
.scroll::-webkit-scrollbar-thumb, ul.dropdown::-webkit-scrollbar-thumb{ height: 50px; width: 50px; background: #d4d4d4; -webkit-border-radius: 2px; border-radius: 2px; } 
.scroll { overflow-y: auto; height: 100%; } 
ul.dropdown { overflow-y: auto; max-height: 362px; } 

/* table */
table { width: 100%; border-bottom: 1px solid #ddd } 
.tbl-style-01 thead th { font-size: 18px; font-weight: normal; color: #000; padding: 20px 0; border-top: 2px solid #000 } 
.tbl-style-01 tbody td { padding: 40px 0; border-top: 1px solid #ddd; font-size: 16px } 
.tbl-style-01 tbody td span, .tbl-style-01 tbody td a, .tbl-style-01 tbody td p{ font-size: 16px } 
.tbl-style-01 tbody td p.opt, .tbl-style-01 tbody td p.opt *{ font-size: 13px } 
.tbl-style-01 tbody th { font-size: 16px; font-weight: normal; color: #000; padding: 12px 30px; background-color: #f8f8f8;border-bottom: 1px solid #ddd} 
.tbl-style-01.tbl-small tbody td { padding: 20px 0; } 
.tbl-style-01.tbl-small tbody td.left{ padding: 20px 12px; } 
.tbl-style-02 { border-top: 1px solid #888; border-bottom: none }
.tbl-style-02 tbody th { font-size: 14px; font-weight: normal; color: #000; padding: 12px 30px; background-color: #eee; text-align: left; border-bottom: 1px solid #ddd} 
.tbl-style-02 tbody td { font-size: 14px; font-weight: normal; color: #000; padding: 12px 30px; border-bottom: 1px solid #ddd}

/* popup table */
.table-bordered { width: 100%; border: 1px solid #ddd } 
.table-bordered tbody th {border: 1px solid #ddd } 
.table-bordered tbody td {border: 1px solid #ddd }  

/* spinner */
.ui-spinner { position:relative; padding:0 25px; display:inline-block; width:98px; box-sizing:border-box; vertical-align:top } 
.ui-spinner input[type=text] { display:block; float:left; width:46px; height:24px; line-height:24px !important; padding:0; border:0; text-align:center; font-size:18px; outline:none; color:#000 } 
.ui-spinner input[type=text]:focus { border:none } 
.ui-spinner-button { position:absolute; right:0; top:0; display:inline-block; width:25px; height:24px; background-repeat: no-repeat; background-position: center; font-size: 0; text-indent: -999em; vertical-align:top; cursor:pointer } 
.ui-spinner-button.ui-spinner-up { background-color: #fff; background-image: url(../images/common/ico-plus.svg); border:1px solid #ddd; } 
.ui-spinner-button.ui-spinner-down { background-color: #fff; left:0; right:auto; background-image: url(../images/common/ico-minus.svg); border:1px solid #ddd; } 
.ui-spinner-button .ui-button-text { display:none } 

/* pagination */
.pagination > ul > li { padding: 0 } 
.pagination > ul > li > a.prev, .pagination > ul > li > a.next { background-image:url(../images/common/ico-pg-next.svg); background-repeat: no-repeat; text-indent: -9999px; background-position: center center; } 
.pagination > ul > li > a.first-prev, .pagination > ul > li > a.last-next { background-image:url(../images/common/ico-pg-last-next.svg); background-repeat: no-repeat; text-indent: -9999px; background-position: center center; } 
.pagination > ul > li > a.prev { transform: rotate(180deg); } 
.pagination > ul > li > a.first-prev { transform: rotate(180deg); } 
.pagination > ul > li > a { display: block; width: 40px; height: 40px; border-radius: 50%; font-size: 14px; line-height: 18px; color: #222; text-align: center; padding:10px 0 0 0 } 
.pagination > ul > li > a.current { font-weight: 700; } 

/* swiper */
.swiper { position: relative; width: 100%; overflow: hidden; } 
.swiper .swiper-pagination.swiper-pagination-bullets { transform: skewX(135deg); position: relative !important; margin-top: 40px; bottom:0; } 
.swiper .swiper-pagination-bullet { width: 12px; height: 10px; margin: 0 5px !important; border-radius: 0; opacity: 1; background: #ddd; transition: .2s; } 
.swiper .swiper-pagination-bullet-active { width: 62px; background: #000; } 
.swiper-pagination.swiper-pagination-fraction { width: 85px; font-size: 14px; color: #fff; left: 50%; bottom: 60px; position: relative; height: 23px; margin-left: -42px } 
.swiper-pagination.swiper-pagination-fraction span { font-size: 14px; color: #fff } 
.swiper-pagination.swiper-pagination-fraction::before { content: ''; position: absolute; width: 85px; height: 23px; background: rgba(0,0,0,0.7); z-index: -1; transform: skewX(-40deg); left: 0; top: -3px; } 
.swiper-pagination.swiper-pagination-fraction .swiper-pagination-current { font-weight: 700; } 
.swiper-button-next, .swiper-button-prev { width: 42px !important; height: 82px !important; background: url(../images/common/ico_chevron-left.svg) center center no-repeat !important; margin-top: -40px!important } 
.swiper-5 .swiper-button-next, .swiper-5 .swiper-button-prev { margin-top: -82px!important; opacity: 0!important; } 
.swiper-5 .swiper-button-next:hover, .swiper-5 .swiper-button-prev:hover { margin-top: -82px!important; opacity: 1!important; } 
.swiper-button-next:hover, .swiper-button-prev:hover { background-image: url(../images/common/ico_chevron-left.svg) !important; } 
.swiper-button-prev { left: 0!important; transform: rotate(180deg); } 
.swiper-button-next { right: 0!important; } 
.swiper-button-next:after, .swiper-button-prev:after { content: ''; display:none } 

/* main-slide-inner */
.main-slide-inner {position:relative; width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center center; text-align: center; font-size: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.main-slide-inner > div {position:absolute;}
.main-slide-inner .p1 {left:134px; top:213px; padding:78px 78px 70px 70px; width:calc(100% - 268px); z-index:1;}
.main-slide-inner .p2 {right:257px; bottom:0;}
.main-slide-inner .a {position:absolute; left:0; top:0;}
.main-slide-inner .c {margin:58px 0 45px;}
.swiper-slide-active .main-slide-inner .right_left { animation: right_left 1s ease forwards; } 
.swiper-slide-active .main-slide-inner .left_right { animation: left_right 1s ease forwards; } 
.swiper-slide-active .main-slide-inner .b { animation-delay: 0.5s; } 
.swiper-slide-active .main-slide-inner .c { animation-delay: 0.6s; } 
.swiper-slide-active .main-slide-inner .d { animation-delay: 0.65s; } 
.swiper-slide-active .main-slide-inner .e { animation-delay: 0.7s; }

/* div border */
.hborder { width: 100%; height: 1px; border-top: 1px solid #ddd } 
.top-line { border-top: 2px solid #000;height: 1px }

/* animation */
.move { opacity: 0; } 
.left_right { opacity: 0; } 
.right_left { opacity: 0; } 

@keyframes left_right {0% { transform: translateX(-100px); opacity: 0; } 
100% { transform: translateX(0); opacity: 1; } 
 }
@keyframes right_left {0% { transform: translateX(100px); opacity: 0; } 
100% { transform: translateX(0); opacity: 1; } 
 }

/* nice select */
.nice-select { -webkit-tap-highlight-color: transparent; background-color: #fff; border-radius: 0; border: solid 1px #ddd; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; min-width: 118px; height: 40px; line-height: 38px; outline: none; padding-left: 15px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto } 
.nice-select:hover { border-color: #ddd; } 
.nice-select:active, .nice-select.open, .nice-select:focus { border-color: #ddd; } 
.nice-select:after { border-bottom: 2px solid #000; border-right: 2px solid #000; content: ''; display: block; height: 5px; margin-top: -4px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; } 
.nice-select.open:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } 
.nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } 
.nice-select.disabled { border-color: #ededed; color: #999; pointer-events: none; } 
.nice-select.disabled:after { border-color: #cccccc; } 
.nice-select.wide { width: 100%; } 
.nice-select.wide .list { left: 0 !important; right: 0 !important; } 
.nice-select.right { float: right; } 
.nice-select.right .list { left: auto; right: 0; } 
.nice-select.small { font-size: 14px; height: 36px; line-height: 34px; } 
.nice-select.small:after { height: 4px; width: 4px; } 
.nice-select.small .option { line-height: 34px; min-height: 34px; } 
.nice-select > span { font-size: 14px!important; }
.nice-select .list { background-color: #fff; border: 1px solid #ddd; min-width: 118px; box-sizing: border-box; margin-top: 0; width: 100%; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: -1px; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: translateY(-21px); -ms-transform: translateY(-21px); transform: translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; } 
.nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } 
.nice-select .option { cursor: pointer; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 15px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } 
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f5f5f5; } 
.nice-select .option.selected { font-weight:500; } 
.nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } 
.no-csspointerevents .nice-select .list { display: none; } 
.no-csspointerevents .nice-select.open .list { display: block; } 

.btn-type-line.kakaojoin {background-color: #fee500;border-color: #fee500;color: #191919;}
.btn-type-line.kakaojoin .box span{margin-left: 10px;}
.btn-type-normal.kakaojoin {background-color: #fee500;border-color: #fee500;color: #191919;}
.btn-type-normal.kakaojoin .box span{margin-left: 10px;}

.detail-section.qna {padding: 60px 0 50px 0;}
.detail-section.qna .qna-tit-wrap {border-bottom: 1px solid #000; padding-bottom: 17px;}
.detail-section.qna .qna-tit-wrap .secret-check {margin-left: 16px;}
.detail-section.qna .qna-tit-wrap .secret-check label {padding: 0 24px 0 28px;}

/* 240619 shoeBot 추가 */ 
.w1360 {
    position: relative;
}
.w1360 .shoeBot_wrap {
    position: absolute;
    width: 115px;
    top: -65px;
    left: 180px;
    z-index: 5;
}
.w1360 .shoeBot_wrap a {
    display: flex;
    align-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
.w1360 .shoeBot_wrap img{
    display: block;
    width: 31px;
    margin: 0 auto;
    height: auto;
}
.w1360 .shoeBot_wrap .shoeBot_floating {
    width: 115px;
    height: 23px;
    line-height: 23px;
    font-size: 12px;
    text-align: center;
    letter-spacing: 0;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: -22px;
    box-sizing: border-box;
    border-radius: 50px;
    background-color: #343434;
    -webkit-box-shadow: 0px 5px 9px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 5px 9px 1px rgba(0, 0, 0, 0.16);
    animation: floating .8s ease-in-out infinite;
}
.w1360 .shoeBot_wrap .shoeBot_floating::after {
    content: '';
    width: 8px;
    height: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -6px;
    background: url(../images/common/shoeBot_menu_bg2.svg) 0 0 / contain no-repeat;
}

@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 3px);
    }

    100% {
        transform: translate(0, 0px);
    }
}