@import url('fonts.css');
html{ overflow:auto}
body{background-color:#fff;}
body, input, textarea, select, button, table {margin:0; font-size:inherit; color:#222; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
body, h1, h2, h3, h4, h5, dl, dt, dd, ul, li, ol, th, td, p, /*blockquote,*/ form, fieldset, legend, button { margin: 0; padding: 0; }
img, fieldset{border:0 none}
dl, ul, ol, li {list-style: none outside none;}
button{border:0 none; cursor:pointer; display: block;}
button:disabled {cursor: not-allowed;}
table, th, td, div{border-collapse:collapse}
table, th, td {word-break:break-all;}
a,img,input {outline:none;}
img {max-width:100%;}
li img { vertical-align:top;}
td img { vertical-align:middle}
strong, .strong , b {font-weight:600;}
address, caption, cite, code, dfn, em, var {font-style:normal;}

hr { clear: both; display: none; }
.blind, legend, caption {display:none !important}

a {text-decoration:none; color:#666;}
a:hover, a:active, a:focus {text-decoration:none;}
a.underline {text-decoration:none; color:#666;}
a.underline:hover, a.underline:active, a.underline:focus {color:#006740; text-decoration:underline;}
table a:link, table a:visited {color:#666;}
table a:hover, table a:active {color:#000; text-decoration:underline;}
.underline {text-decoration:underline !important;}


.button{border:0 none; cursor:pointer;}
input, select, textarea {vertical-align:middle; font-size:1em; line-height:130%; border-color:#aaa;}
input, textarea, select { border-width:1px; border-style: solid; border-color:#E4E5E7; background:#fff}
select{height:30px; font-size:13px;}
input.text{padding: 1rem; box-sizing:border-box; height:3.25rem; color:#222; width:100%; border-radius:4px; appearance:none; -webkit-appearance:none;}
input.text::placeholder {color: #8E8E8E;}
input:disabled {cursor: not-allowed;}
textarea.textarea {height:120px; padding: 1rem;}
textarea.textarea::placeholder {color: #8E8E8E;}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* margin */
.mgT3 {margin-top:3px !important}
.mgT5 {margin-top:5px !important}
.mgT6 {margin-top:6px !important}
.mgT8 {margin-top:8px !important}
.mgT10 {margin-top:10px !important}
.mgT13 {margin-top:13px !important}
.mgT15 {margin-top:15px !important}
.mgT20 {margin-top:20px !important}
.mgT25 {margin-top:25px !important}
.mgT30 {margin-top:30px !important}
.mgT35 {margin-top:35px !important}
.mgT40 {margin-top:40px !important}
.mgT50 {margin-top:50px !important}
.mgT60 {margin-top:60px !important}
.mgT60 {margin-top:60px !important}
.mgT75 {margin-top:75px !important}

.mgB5 {margin-bottom:5px !important}
.mgB10 {margin-bottom:10px !important}
.mgB20 {margin-bottom:20px !important}
.mgB30 {margin-bottom:30px !important}
.mgB35 {margin-bottom:35px !important}
.mgB40 {margin-bottom:40px !important}
.mgB50 {margin-bottom:50px !important}


.mgR5 {margin-right:5px !important}
.mgR10 {margin-right:10px !important}
.mgR12 {margin-right:12px !important}
.mgR14 {margin-right:14px !important}
.mgR20 {margin-right:20px !important}
.mgR23 {margin-right:23px !important}
.mgR28 {margin-right:28px !important}
.mgR30 {margin-right:30px !important}
.mgR70 {margin-right:70px !important}

.mgL0 {margin-left:0px !important}
.mgL5 {margin-left:5px !important}
.mgL10 {margin-left:10px !important}
.mgL12 {margin-left:12px !important}
.mgL15 {margin-left:15px !important}
.mgL17 {margin-left:17px !important}
.mgL20 {margin-left:20px !important}
.mgL25 {margin-left:25px !important}
.mgL30 {margin-left:30px !important}
.mgL40 {margin-left:40px !important}

/* padding */
.pd3 {padding:3px !important}
.pd10 {padding:10px !important}
.pd17 {padding:17px !important}

.pdT4 {padding-top:4px !important}
.pdT5 {padding-top:5px !important}
.pdT7 {padding-top:7px !important}
.pdT10 {padding-top:10px !important}
.pdT15 {padding-top:15px !important}
.pdT20 {padding-top:20px !important}
.pdT30 {padding-top:30px !important}
.pdT50 {padding-top:50px !important}
.pdT120{padding-top:120px !important;}

.pdB5 {padding-bottom:5px !important}
.pdB10 {padding-bottom:10px !important}
.pdB20 {padding-bottom:20px !important}
.pdB30 {padding-bottom:30px !important}
.pdB40 {padding-bottom:40px !important}
.pdB50 {padding-bottom:50px !important}

.pdL8 {padding-left:8px !important}
.pdL12 {padding-left:12px !important}
.pdL20 {padding-left:20px !important}
.pdL30{padding-left:30px !important;}
.pdL50 {padding-left:50px !important}
.pdL120{padding-left:120px !important;}
.pdL150{padding-left:150px !important;}

.pdR5 {padding-right:5px !important}
.pdR10 {padding-right:10px !important}
.pdR20 {padding-right:20px !important}

/* align */
.alignL {text-align:left !important}
.alignR {text-align:right !important}
.alignC {text-align:center !important}
.clear {clear:both !important}
.floatL {float:left !important}
.floatR {float:right !important}
img.imgT {vertical-align:top !important}
img.imgB {vertical-align:bottom !important}
img.imgC {vertical-align:middle !important}

.w20 {width:20% !important;}
.w30 {width:30% !important;}
.w40 {width:40% !important;}
.w48 {width:48% !important;}
.w50 {width:50% !important;}
.w60 {width:60% !important;}
.w70 {width:70% !important;}
.w80 {width:80% !important;}
.w100 {width:100% !important;}

.green {color:#006740 !important;}
.red {color:#e70000 !important;}
.orange {color:#f68811 !important;}

.comm_radio {position:absolute; left:-9999px;}
.comm_radio_label {display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 14px; font-weight: 400; line-height: 140%; color: #444; cursor: pointer; margin-right: 10px; vertical-align: top; user-select: none;}
.comm_radio_label .ico_radio {width: 20px; height: 20px; box-sizing: border-box; background: #fff; border-radius: 100%; border: 2px solid #d0d0d0; border-radius: 100%;}
.radio_on .ico_radio {border-color: #444; border-width: 6px;}
.radio_disabled {cursor: not-allowed;}
.radio_disabled .ico_radio {background: #F1F2F3;}

.comm_check {position:absolute; left:-9999px;}
.comm_check_label {display: flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 14px; font-weight: 400; line-height: 140%; color: #444; cursor: pointer; user-select: none;}
.comm_check_label strong {font-weight: 600; color: #006740;}

.comm_check_label .ico_check {width: 18px; height: 18px; margin: 2px; border: 1.5px solid #d0d0d0; border-radius: 3px; background-color: #fff;}
.check_on .ico_check {border-color: #006740; background-color: #006740; background-image: url('/images/nshop/common/icon_check.png'); background-repeat: no-repeat; background-position: center center; background-size: 16px;}
.check_on {color:#555}
.check_disabled {cursor: not-allowed;}

input[type=submit], input[type=button], input[type=image] {margin:0; border:none; cursor:pointer; vertical-align:top; box-sizing: content-box; appearance:none; -webkit-appearance:none; border-radius:0;}
.btn_memgray {flex-shrink: 0; display:inline-block; min-width:55px; padding:0 20px; height:52px; line-height:52px; font-size: 18pxx; font-weight: 600; text-align:center; color:#fff !important; border:none; background:#B0B0B0; border-radius: 4px;}
.btn_green {display:inline-block; min-width:55px; padding:0 20px; height:40px; line-height:40px; text-align:center; color:#fff !important; border:none; background:#006740; border-radius: 4px;}
.btn_gray {display:inline-block; min-width:55px; padding:0 20px; height:40px; line-height:40px; text-align:center; color:#fff !important; border:none; background:#444; border-radius: 4px;}
.btn_orange {display:inline-block; min-width:55px; padding:0 20px; height:40px; line-height:40px; text-align:center; color:#fff !important; border:none; background:#f68811; border-radius: 4px;}
.btn_search {display: inline-flex; width:92px; padding:0 20px; height:40px; line-height:40px; text-align:center; color:#fff !important; border:none; background:#B0B0B0; border-radius: 4px !important; box-sizing: border-box !important; font-weight: 600;}
.btn_graySm {display:inline-flex; align-items: center; justify-content: center; min-width:55px; padding:0 16px; height:28px; line-height:28px; text-align:center; color:#fff !important; border: none; background:#444; font-size: 14px; font-weight: 500; border-radius: 4px;} 
.btn_grayLineSm {display:inline-flex; align-items: center; justify-content: center; min-width:55px; padding:0 16px; height:28px; line-height:28px; text-align:center; color:#444 !important; border: 1px solid #E4E5E7; background:#fff; font-size: 14px; font-weight: 600; border-radius: 4px;}
.btn_greenMid {display:inline-block; min-width:100px; height:40px; text-align:center; padding:0 20px; background:#006740; font-size:16px; color:#fff; line-height:40px; border:none;}
.btn_grayMid {display:inline-block; min-width:100px; height:40px; text-align:center; padding:0 20px; background:#8f8f8f; font-size:16px; color:#fff; line-height:40px; border:none;}
.btn_orangeMid {display:inline-block; min-width:100px; height:40px; text-align:center; padding:0 20px; background:#f68811; font-size:16px; color:#fff; line-height:40px; border:none;}
.btn_greenBig {display:inline-block; min-width:240px; height:60px; text-align:center; padding:0 2%; background:#006740; font-size:18px; font-weight: 600; color:#fff; line-height:60px; border:none; border-radius: 4px;}
.btn_orangeBig {display:inline-block; min-width:240px; height:60px; text-align:center; padding:0 2%; background:#f68811; font-size:18px; font-weight: 600; color:#fff; line-height:60px; border:none; border-radius: 4px;}
.btn_lgreenBig {display:inline-block; min-width:240px; height:60px; text-align:center; padding:0 2%; background:#7fb39f; font-size:18px; font-weight: 600; color:#fff; line-height:60px; border:none; border-radius: 4px;}
.btn_grayBig {display:inline-block; min-width:240px; height:60px; text-align:center; padding:0 2%; background:#8f8f8f; font-size:18px; font-weight: 600; color:#fff; line-height:60px; border:none; border-radius: 4px;}
.btn_deep_grayBig {display:inline-block; min-width:240px; height:60px; text-align:center; padding:0 2%; background:#444; font-size:18px; font-weight: 600; color:#fff; line-height:60px; border:none; border-radius: 4px;}
.btn_grayLineBig {display:inline-block; min-width:240px; height:60px; text-align:center; padding:0 2%; background:#fff; font-size:18px; font-weight: 500; color:#444; line-height:60px; border:none; border-radius: 4px; border: 1px solid #E4E5E7;}
.btn_login {display:inline-block; width:100%; height:60px; text-align:center; padding:0 3%; background:#006740; font-size:18px; font-weight: 600; color:#fff; line-height:60px; border:none; box-sizing:border-box; border-radius: 4px;}
.btn_join1 {display:inline-block; width:100%; box-sizing:border-box; border:1px solid #006740; color:#006740; text-align:center; height:40px; line-height:38px; background:#fff;}
.btn_join2 {display:inline-block; width:49.5%; box-sizing:border-box; border:1px solid #777; color:#333; text-align:center; height:40px; line-height:38px; background:#fff;}
.btn_write {display:inline-block; min-width:96px; padding:0 16px; height:40px; line-height:40px; text-align:center; color:#fff !important; border:none; background:#006740; border-radius: 4px;}
.btn_del {display:inline-block; min-width:96px; padding:0 16px; height:40px; line-height:40px; font-weight: 600; text-align:center; color:#fff !important; border:none; background:#b0b0b0;  border-radius: 4px;}

.ico_delivery01 {display: inline-flex; align-items: center; justify-content: center; min-width:5rem; padding:0 .75rem; height:1.75rem; border:1px solid #d0d0d0; background:#f3f3f3; border-radius:4px; font-size: .875rem; font-weight: 500; text-align:center;}
.ico_delivery02 {display: inline-flex; align-items: center; justify-content: center; min-width:5rem; padding:0 .75rem; height:1.75rem; border: none; background:var(--color-primary); color:#fff; border-radius:4px; font-size: .875rem; font-weight: 500; text-align:center;}
.ico_delivery03 {display: inline-flex; align-items: center; justify-content: center; min-width:5rem; padding:0 .75rem; height:1.75rem; border: none; background:#B0B0B0; color:#fff; border-radius:4px; font-size: .875rem; font-weight: 500; text-align:center;}


.replyList .replyTxt .btn_cmt {background:#aeaeae; font-size:12px; color:#fff; border-radius:2px; display:inline-block; padding:0 5px; height:18px; line-height:18px;}

.btn_wish {font-size: 0; line-height: 0; text-indent: -9999px; width: 40px; height: 40px; background: #B0B0B0 url('/images/nshop/common/icon_heart.png') no-repeat center center; background-size: 24px; border-radius: 100%; overflow: hidden; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); transition: background-color 0.2s;}
.btn_wish:hover,
.btn_wish.active {background-color: #FE3668;}
.btn_cart {font-size: 0; line-height: 0; text-indent: -9999px; width: 40px; height: 40px; background: #B0B0B0 url('/images/nshop/common/icon_cart.png') no-repeat center center; background-size: 24px; border-radius: 100%; overflow: hidden; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.15); transition: background-color 0.2s;}
.btn_cart:hover,
.btn_cart.active {background-color: #909090;}

.btnArea {display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 3.5rem;}


/* icon */
.icon_best {padding: .25rem .625rem; border-radius: 2.5rem; background: #444; font-size: .75rem; font-weight: 600; line-height: 150%; color: #fff;}
.icon_new {padding: .25rem .625rem; border-radius: 2.5rem; background: #006740; font-size: .75rem; font-weight: 600; line-height: 150%; color: #fff;}
.icon_sold_out {display: inline-flex; align-items: center; height: 26px; padding: 4px 8px; margin-left: 4px; border-radius: 4px; background: #8E8E8E; font-size: .75rem; font-weight: 600;  color: #fff; vertical-align: middle;}

/* modal */
.modalType01 {display: none; position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: 100; align-items: center; justify-content: center;}
.modalType01 .overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; background: rgba(0, 0, 0, 0.4);}
.modalType01 .modalContents {position: relative; width: 500px; background: #fff; border-radius: 16px; z-index: 101; overflow: hidden;}
.modalType01 .modalTitle {display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(228, 228, 228, 0.50);}
.modalType01 .modalTitle .title {font-size: 18px; font-weight: 500; line-height: 140%; color: #393E4B;}
.modalType01 .modalTitle .btnClose {width: 1.25rem; border: none; background: none;}
.modalType01 .modalTitle .btnClose img {vertical-align: top;}
.modalType01 .modalInfo {padding: 16px 24px; background: #F0F8F5; font-size: .875rem; font-weight: 400; color: #444;}
.modalType01 .modalBody {padding: 24px;}
.modalType01 .modalBody p {font-size: .875rem; font-weight: 400; color: #444;}
.modalType01 .modalBody input.text,
.modalType01 .modalBody select,
.modalType01 .modalBody .select {width: 100%; height: 3.25rem; line-height: 3.25rem; font-size: 16px;}
.modalType01 .modalBody .nice-select .option {padding: 16px; line-height: 1.4;}
.modalType01 .modalBody .modalBtnArea {display: flex; align-items: center; gap: 8px; margin-top: 24px;}
.modalType01 .modalBody .modalBtnArea button {flex: 1; min-width: auto;}

/********************************************************/
/**************** PC 1400px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1400px){

}

/********************************************************/
/**************** 테블릿 1024px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:1024px){

}

/********************************************************/
/**************** 테블릿 768px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:768px){
  
}

/********************************************************/
/**************** 모바일 640px 해상도 ******************/
/********************************************************/
@media only screen and (max-width:640px){
input.text {height: 3rem; line-height: 3rem; padding: .625rem 1rem; font-size: .875rem;}

.comm_radio_label .ico_radio {width:16px; height:16px; background-size:16px;}
.comm_check_label .ico_check {width:16px; height:16px; background-size:16px;}

.btn_memgray {height: 3rem; line-height: 3rem; font-size: 1rem; padding:0 3%;}

.btn_login {height: 3.5rem; line-height: 3.5rem; font-size: 1.125rem;}
.btn_join1 {font-size: 1.125rem; padding:0 3%;}
.btn_join2 {font-size: 1.125rem; padding:0 3%; width:100%; margin-bottom:2px;}

.btn_greenBig {min-width:auto; height: 3.5rem; padding:0 .5rem; font-size: 1.125rem; line-height: 3.5rem; white-space: nowrap;}
.btn_orangeBig {min-width:auto; height: 3.5rem; padding:0 .5rem; font-size: 1.125rem; line-height: 3.5rem; white-space: nowrap;}
.btn_lgreenBig {min-width:auto; height: 3.5rem; padding:0 .5rem; font-size: 1.125rem; line-height: 3.5rem; white-space: nowrap;}
.btn_grayBig {min-width:auto; height: 3.5rem; padding:0 .5rem; font-size: 1.125rem; line-height: 3.5rem; white-space: nowrap;}
.btn_grayLineBig {min-width:auto; height: 3.5rem; padding:0 .5rem; font-size: 1.125rem; line-height: 3.5rem; white-space: nowrap;}
.btn_deep_grayBig {min-width:auto; height: 3.5rem; padding:0 .5rem; font-size: 1.125rem; line-height: 3.5rem; white-space: nowrap;}

.btn_wish,
.btn_cart {width: 1.875rem; height: 1.875rem; background-size: 1.125rem;}

.btnArea button,
.btnArea a {flex: 1; min-width: auto;}
.btnArea.wide {flex-wrap: wrap;}
.btnArea.wide button,
.btnArea.wide a {flex: none; width: 100%;}

/* modal */
.modalType01 .modalTitle .title {font-size: 1rem; font-weight: 600;}
.modalType01 .modalBody {padding: 1.5rem;}
.modalType01 .modalBody input.text,
.modalType01 .modalBody select,
.modalType01 .modalBody .select {height: 2.5rem; line-height: 2.5rem; font-size: .875rem;}
.modalType01 .modalBody .nice-select .option {padding: .625rem 1rem;}
.modalType01 .modalBody .btn_memgray {height: 2.5rem; line-height: 2.5rem;}
.modalType01 .modalInfo {padding: .5rem 1.5rem;}



}