@charset "utf-8";

/************************************************************************
 - FILE NAME : base.css
 - SUMMARY   : basic define, common style
 - DATE      : 20121.07.07
************************************************************************/

@import url("font.css");
@import url("layout.css");
@import url("style.css");
@import url("swiper.css");
@import url("invoice.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

/* basic */
html { height:100%; margin:0px; padding:0px; font-family:"montserrat", "arial", "sans-serif"; }
body { height:100%; margin:0px; padding:0px; text-align:left; font-size:14px; font-weight:300; }

div,p,strong,span,object,img,a,iframe,h1,h2,h3,h4,h5,h6,address,blockquote,q,pre,abbr,cite,code,dfn,em,ins,kbd,samp,small,sub,sup,var,b,i,ol,ul,li,dl,dt,dd,form,
fieldset,legend,label,table,textarea,input,select,caption,tbody,thead,tfoot,tr,th,td,aside,canvas,details,figcaption,figure,header,footer,menu,nav,section,summary,
time,mark,audio,video { margin:0px; padding:0px; border:0px; font-size:14px; color:#5d5d5d; line-height:20px; word-break:keep-all; box-sizing:border-box; }
@media all and (max-width: 768px) {
  div,p,strong,span,object,img,a,iframe,h1,h2,h3,h4,h5,h6,address,blockquote,q,pre,abbr,cite,code,dfn,em,ins,kbd,samp,small,sub,sup,var,b,i,ol,ul,li,dl,
  dt,dd,form,fieldset,legend,label,table,textarea,input,select,caption,tbody,thead,tfoot,tr,th,td,aside,canvas,details,figcaption,figure,header,footer,menu,nav,
  section,summary,time,mark,audio,video { font-size:12px; line-height:18px; word-break:keep-all; }
}

table { border-collapse:collapse; border-spacing:0px; empty-cells:show; }
table caption,legend,figcaption { position:absolute; left:-10000px; height:0px; line-height:0px; }
hr { clear:both; visibility:hidden; }
ul,ol,li { list-style-type:none; }
img,button,fieldset,iframe,abbr,acronym { border:0px; }
button { cursor:pointer; }
address,caption,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }
img { vertical-align:top; font-size:0px; }
li img,dd img { vertical-align:top; }
input { vertical-align:middle; }
img,video,audio,object,embed,iframe { max-width:100%; height:auto; }
video { min-width:100%; }
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption { display:block; }
pre { white-space:pre-line; }
/*
@media all and (max-width: 767px) {
  * { -webkit-tap-highlight-color:rgba(0, 0, 0, 0); tap-highlight-color:rgba(0, 0, 0, 0); -webkit-appearance:none; appearance:none;
    -webkit-focus-ring-color:rgba(0, 0, 0, 0); focus-ring-color:rgba(0, 0, 0, 0); resize:none; outline:0; }
}
*/
/* 
@media all and (max-width:767px){
* {-webkit-box-sizing:border-box; box-sizing:border-box;} 
*:before, *:after {-webkit-box-sizing:border-box; box-sizing:border-box;}
}
*/
/* basic E */

/* link */
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { color:#344a63 !important; text-decoration:none; }
a:active { text-decoration:none; }
/* link E */

/* h */
h1,h2,h3,h4,h5,h6 { font-weight:normal; }
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:18px; font-weight:300; }
/* h4 {}
h5 {}
h6 {} */
/* h E */

/* float hack */
.clfix:after { content:"."; display:block; clear:both; visibility:hidden; height:0px; }
.clfix { display:inline-block; }
/* ie Holly Hack \*/
* html .clfix { height:1%;}
.clfix { display:block;}
/* //ie Holly Hack E */
/* float hack E */


/* scroll */
::-webkit-scrollbar { width:12px; /* 세로축 스크롤바 길이 */}
::-webkit-scrollbar-track { background-color:#fff; }
::-webkit-scrollbar-track-piece { background-color:#fff; }
::-webkit-scrollbar-thumb { border-radius:0px; background-color:#dae3ed; }
::-webkit-scrollbar-button { background-color:#dae3ed; width:0px; height:0px; }
::-webkit-scrollbar-button:start { background-color:#dae3ed; /* Top, Left 방향의 이동버튼 */}
::-webkit-scrollbar-button:end { background-color:#dae3ed; /* Bottom, Right 방향의 이동버튼 */}
/* ::-webkit-scrollbar-button:vertical:increment {}
::-webkit-scrollbar-button:vertical:decrement {} */
::-webkit-scrollbar-corner { background-color:#fff; /* 우측 하단의 코너 부분 */}
::-webkit-resizer { background-color:#fff;}


/* scroll E */

/* scrollbar *
.scroll::-webkit-scrollbar{ width:12px; }
.scroll::-webkit-scrollbar-thumb{ height:17%; background-color:#dae3ed; border-radius:0px; }
.scroll::-webkit-scrollbar-track{ background-color:#fff; }
/* //scrollbar */



/* form */
select,
input,
textarea {border-radius:0px; border:1px solid #ccc; color:#2C3238; }
textarea {padding:10px 15px;}
select:focus,
input:focus,
textarea:focus { border:1px solid #f05a88; }
@media all and (max-width:767px) {

}
/* form E */

/*selectBox*/
select::-ms-expand { display: none; }
select { height:35px; padding:0 25px 0 15px; font-size:14px; font-family:"montserrat"; font-weight:300; background:#fff url(../img/ico_selectbox_arr.png) no-repeat right 10px top 13px;
  -webkit-appearance:none; -moz-appearance:none; appearance:none; }
select:focus {outline:0; border:1px solid #f05a88;}
/* selectBox E */

/* input by nox */
input[type='text'],input[type='email'],input[type='password'] { border:1px solid #ccc; width:100%; height:35px; line-height:35px; padding:0 15px; color:#2C3238; font-size:14px; font-weight:300; font-family:"montserrat"; }
input[type='text']::placeholder,input[type='password']::placeholder { color:#999; }
input[type='text']:focus,input[type='password']:focus { outline:0; border:1px solid #f05a88; }
/* input E */

/* check/radio */
input[type='radio']:checked{display:block;position:absolute;left:-9999px;width:1px;height:1px;background:none;}
input[type='checkbox'],
input[type='radio'],
input[type='checkbox']:checked,
input[type='radio']:checked{display:block;position:absolute;left:-9999px;width:1px;height:1px;background:none;}

.inp-chk label{display:inline-block;position:relative;padding-left:30px;color:#2C3238;font-size:13px;font-weight:300;cursor:pointer; margin-right:20px;}
.inp-chk label:before{display:inline-block;content:'';}
.inp-chk label:after{display:inline-block;content:'';}
.inp-chk input[type='checkbox'] + label:before{position:absolute;left:0;top:0px;width:20px;height:20px;border-radius:0px; border:1px solid #BEC9D4; 
  background:#fff url(../img/ico_checkbox.png) center no-repeat; box-sizing:border-box; }
.inp-chk input[type='checkbox']:checked + label:before{background-color:#f05a88;border:1px solid #f05a88; background: url(../img/ico_checkbox_w.png) #f05a88 center no-repeat;}
.inp-chk input:focus + label{outline:0px;}
.inp-chk input[type='radio'] + label:before{position:absolute;left:0;top:0px;width:20px;height:20px;border:1px solid #b9b9b9;border-radius:50%;background-color:#fff;}
.inp-chk input[type='radio'] + label:after{position:absolute;top:6px;left:6px;width:10px;height:10px;border-radius:50%;background:#e2e2e2;}
.inp-chk input[type='radio']:checked + label:after{position:absolute;top:6px;left:6px;width:10px;height:10px;border-radius:50%;background:#f05a88;}
/* check/radio E */

/* button */
/* button { display:flex; justify-content:center; align-items:center; font-family:"montserrat"; font-weight:300; padding:0 35px; }

button:hover,
button.bg1:hover { background:#344a63; color:#fff;}
button.big {height:60px; font-size:20px;}


button.small {height:42px; font-size:14px;}
button.bg1:disabled,
button:disabled {background:#d4d4d4;} */

button.middle {height:50px; font-size:17px;  color:#344a63; background:#f5f5f5; border:1px solid #aaa; font-weight:500;}
button.middle.selectBtn, button.middle.addCartBtn, button.middle.subscribeBtn, button.middle.lensBtn {width: 140px}
button.middle.subscribeBtn{border-left: none;}
button.middle:hover {height:50px; font-size:17px; color:#fff; background:#344a63; }
button.bg1 {background:#f5f5f5; color:#344a63; border:1px solid #aaa; font-weight:700;}
button.bg1:hover {background:#344a63; color:#fff;}

/* new button style */
#myprofile_Btn #userBtn, .mypage-cont-box #passwordBtn, .add-cant #addressBtn{color: #0070ba; background-color: #fff; border: 1px solid #0070ba; border-radius: 30px; padding: 6px 20px; font-weight: 600; font-size: 14px; margin: 10px auto 0; display:flex; justify-content:center;}
#myprofile_Btn #userBtn:hover, .mypage-cont-box #passwordBtn:hover, .add-cant #addressBtn:hover{background-color: #0070ba; color: #fff;}
cartBtn
.cont-wrap section #mycart_Btn button, .cont-wrap section .delete-btn,
.cont-wrap section #mycart_Btn button, .cont-wrap section #mycart_Btn .cartBtn{height: auto; margin-right:20px; color: #0070ba; border: 1px solid #0070ba; border-radius: 30px; padding: 6px 20px; font-weight: 600; font-size: 14px; background-color: #fff;}
.cont-wrap section #mycart_Btn button:hover, .cont-wrap section .delete-btn:hover{background-color: #0070ba; color: #fff;} 





/* new button style 끝 */


/* 로그인 버튼 스타일 */
.bbtn-wrap button {width: 100%; height:40px; font-size:17px;  color:#344a63; background:#f5f5f5; border:1px solid #aaa; font-weight:500;}
.bbtn-wrap button:first-child {margin-left:0px;}
.bbtn-wrap button:hover{height:40px; font-size:17px; color:#fff; background:#344a63;}
.bbtn-wrap {display:flex; justify-content:center; margin-top:50px;}

/* 로그인 버튼 스타일 끝 */

/* @media all and (max-width:1239px) {
  button.big {height:50px; font-size:15px;}
  button.middle {height:40px; font-size:14px;}
  button.small {height:36px; font-size:14px;}
} */

/* style */
.borderBn {border-bottom:none;}
.borderTn {border-top:none;}
.borderLn {border-left:none;}
.borderRn {border-right:none;}
/* style E */

/* align */
.block {display:block;}
.inline {display:inline;}
.flL  {float:left;}
.flR  {float:right;}
.clear {clear:both;}
.clearL {clear:left;}
.clearR {clear:right;}
.positionR {position:relative;}
.positionA {position:absolute;}
.talR {text-align:right;}
.talL {text-align:left;}
.talC {text-align:center;}
.valT {vertical-align:top;}
.valM {vertical-align:middle;}
.valB {vertical-align:bottom;}
/* align E */

/* font */
.point_A, 
a.point_A:link, 
a.point_A:visited, 
a.point_A:hover, 
a.point_A:active {color:#ff6600;}

.point_B, 
a.point_B:link, 
a.point_B:visited, 
a.point_B:hover, 
a.point_B:active {color:#26baf1;}

.normal {font-weight:normal;}
.bold   {font-weight:bold;}

.lH10   {line-height:10px;}

.lSm1   {letter-spacing:-1px;}
.lSm2   {letter-spacing:-2px;}

.underline, a.underline:link, a.underline:visited, a.underline:hover, a.underline:active {text-decoration:underline;}
.underlineN, a.underlineN:link, a.underlineN:visited, a.underlineN:hover, a.underlineN:active {text-decoration:none;}
.through, a.through:link, a.through:visited, a.through:hover, a.through:active {text-decoration:line-through;}

.textIndent_A {padding-left:20px; text-indent:-16px;}

.ellipsis_A {display:block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap;} 

a.link_A {font-weight:bold; text-decoration:underline; }
/* font E */

/* cursor */
.cursor_A {cursor:hand;}
/* cursor E */

.hide {position:absolute; visibility:hidden;}

/* margin padding */
.paT1 {padding-top:1px;}

.paB1 {padding-bottom:1px;}

.paL1 {padding-left:1px;}

.paR1 {padding-right:1px;}

.mt0 {margin-top:0px;}
.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt90 {margin-top:90px;}
.mt100 {margin-top:100px;}
.mt120 {margin-top:120px;}

@media all and (max-width:1239px) {
  .mt5 {margin-top:2.5px;}
  .mt10 {margin-top:10px;}
  .mt20 {margin-top:20px;}
  .mt30 {margin-top:30px;}
  .mt40 {margin-top:40px;}
  .mt50 {margin-top:50px;}
  .mt60 {margin-top:60px;}
  .mt70 {margin-top:70px;}
  .mt80 {margin-top:80px;}
  .mt90 {margin-top:90px;}
  .mt100 {margin-top:100px;}
  .mt120 {margin-top:120px;}
}

.mgB1 {margin-bottom:1px;}
.mgB10 {margin-bottom:10px;}

.mgLm1 {margin-left:-1px;}
.mgLm4 {margin-left:-4px;}
.mgL1 {margin-left:1px;}
.mgL10 {margin-left:10px;}

.mgR1 {margin-right:1px;}
.mgR10 {margin-right:10px;}
/* margin padding  E */

/* 2021.10.12 by nox */
.error { display: block; width: 100%; margin-top: .25rem; font-size: .875em !important; color: #dc3545; }