@charset "utf-8";

/* font */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.montserrat-<uniquifier> {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

/* reset */
* {box-sizing:border-box}
body {overflow-y:auto; position:relative; line-height:1.5; font-size:16px; font-family: "Pretendard",sans-serif,serif; color:#333;word-break: keep-all;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, address {margin:0; padding:0;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
pre {margin:0; padding:0; word-wrap:break-word; white-space:pre-line}
table {border:0; border-collapse:collapse; border-spacing:0; width:100%; table-layout: fixed;}
fieldset, img {border:0;vertical-align:top}
ul, li {list-style:none}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal; line-height:1em}
a {text-decoration:none; cursor:pointer;color:inherit;}
body {position:relative}
em {font-style:normal}
legend, hr, caption {display:none}

/* skip menu */
.skip{display:relative;}
.skip a{display:block;width:100%;position:absolute;top:-50px;left:0;line-height:50px;background:#333;color:#fff;text-align:center;font-size:16px;font-weight:700;}
.skip a:focus, .skip a:active{top:0;z-index:999;}

/* common elements */
.clr:after{content:"";display:block;clear:both;}
.fl_right{float:right;}
.fl_left{float:left;}
.scrollx{overflow-x:scroll;}

input[type="text"], input[type="password"], textarea{height:40px;width:100%;border-radius:3px;border:1px solid #eee;font-size:15px;color:#444;padding-left:10px;box-sizing:border-box;transition:all 0.3s;}
select::-ms-expand , input[type="text"]::-ms-clear, input[type="password"]::-ms-reveal{display:none;}
select{height:40px;width:100%;border-radius:3px;border:1px solid #eee;font-size:15px;color:#444;padding-left:10px;box-sizing:border-box;transition:all 0.3s;appearance: none;-webkit-appearance: none;-moz-appearance: none;position:relative;background:#fff url(../../images/os/contents/selectArrow.png)no-repeat 96% center;}
input[type="text"]:focus, select:focus, input[type="password"]:focus, textarea:focus{color: #333;background-color: #fff;border:1px solid rgba(23,97,253,0.5) !important;outline: 0;-webkit-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);-moz-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);}
input[type="text"]:disabled{background:#f6f9fc;}
select:disabled{background:#f6f9fc url(../../images/os/contents/selectArrow.png)no-repeat 98% center;}
input::placeholder{color:#666;}

label.label{display:inline-block;margin-right:20px;position:relative;padding-left:28px;cursor:pointer;color:#444;line-height:40px;}
label.label input{position:absolute;z-index:-1;opacity:0;}
.mark{position:absolute;top:50%;margin-top: -10px;left:0;height: 18px;width: 18px;background:#fff;border:1px solid #ddd;box-sizing:border-box;}
.radio .mark{border-radius:50%;}
label.label:hover input ~ .mark, label.label input:focus ~ .mark{border:1px solid rgba(23,97,253,0.5);-webkit-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);-moz-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);}
label.label input:checked ~ .mark{background:#111;border:1px solid #111;}
label.labell:hover input:not([disabled]):checked ~ .mark, label.label input:checked:focus ~ .mark{border:1px solid rgba(23,97,253,0.5);-webkit-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);-moz-box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);box-shadow:0px 0px 10px 0px rgba(23, 97, 253, 0.1);}
label.label input:disabled ~ .mark{background:#eee;opacity:0.6;pointer-events:none;}
.mark:after{content:'';position:absolute;display:none;}
label.label input:checked ~ .mark:after{display:block;}
.mark.on:after{display:block;}
.mark.on{background: #111;border: 1px solid #111;}
.checkbox .mark:after{left:5px;top:2px;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.checkbox input:disabled ~ .mark:after{border-color:#111;}
.radio .mark:after{left:3px;top:3px;height: 10px;width: 10px;border-radius:50%;background:#fff;}
.radio input:disabled ~ .mark:after{background:#111;}

/* 
 <label class="label checkbox">First checkbox
    <input type="checkbox" checked="checked">
    <div class="mark"></div>
  </label>
  
  <label class="label checkbox">Second checkbox
    <input type="checkbox">
    <div class="mark"></div>
  </label>
  
  <label class="label checkbox">Disabled
    <input type="checkbox" disabled="disabled">
    <div class="mark"></div>
  </label>
  
  <label class="label checkbox">Disabled &amp; checked
    <input type="checkbox" disabled="disabled" checked="checked">
    <div class="mark"></div>
  </label>

  <label class="label radio">First radio
    <input type="radio" name="radio" checked="checked">
    <div class="mark"></div>
  </label>
  
  <label class="label radio">Second radio
    <input type="radio" name="radio">
    <div class="mark"></div>
  </label>
  
  <label class="label radio">Disabled
    <input type="radio" name="radio2" disabled="disabled">
    <div class="mark"></div>
  </label>
  
  <label class="label radio">Disabled &amp; checked
    <input type="radio" name="radio2" disabled="disabled" checked="checked">
    <div class="mark"></div>
  </label>
 */

/* width */
.wd100{width:100% !important;}
.wd90{width:90% !important;}
.wd80{width:80% !important;}
.wd70{width:70% !important;}
.wd60{width:60% !important;}
.wd50{width:50% !important;}
.wd40{width:40% !important;}
.wd30{width:30% !important;}
.wd25{width:25% !important;}
.wd20{width:20% !important;}
.wd15{width:15% !important;}
.wd10{width:10% !important;}

.wd_30{width:30px !important;}
.wd_35{width:35px !important;}
.wd_40{width:40px !important;}
.wd_50{width:50px !important;}
.wd_100{width:100px !important;}
.wd_130{width:130px !important;}
.wd_200{width:200px !important;}
.wd_300{width:300px !important;}
.wd_400{width:400px !important;}
.wd_500{width:500px !important;}

/* align */
.t_c{text-align:center !important;}
.t_l{text-align:left !important;}
.t_r{text-align:right !important;}

/* background */
.bg_basic{background:#111;}
.bg_gray{background:#666;}
.bg_blue{background:#0850a0;} 
.bg_green{background:#2a8b3a;}
.bg_red{background:#a51b1b !important;}
.bg_white{background:#fff;}

/* font color */
.txt_white{color:#fff !important;}
.txt_red{color:#cb1313 !important;}
.txt_red2{color:#FF7777 !important;}
.txt_basic{color:#111 !important;}
.txt_blue{color:#0850a0 !important;}
.txt_black{color:#000 !important;}
.txt_gray{color:#888;}
.txt_green{color:#2a8b3a !important;}

.txt_b{font-weight:700;}
.txt_en{font-family: "Lato", sans-serif;}
.txt_line{text-decoration: line-through;}
.txt_decoNo{text-decoration : none !important}

/* margin */
.mg0{margin:0 !important;}
.mg10{margin:10px;}
.mg0auto{margin:0 auto;}
.mgt0{margin-top:0 !important;}
.mgt5{margin-top:5px;}
.mgt10{margin-top:10px !important;}
.mgt20{margin-top:20px;}
.mgt30{margin-top:30px !important;;}
.mgt40{margin-top:40px;}
.mgt50{margin-top:50px;}
.mgt100{margin-top:100px;}
.mgb0{margin-bottom:0 !important;}
.mgb10{margin-bottom:10px;}
.mgb20{margin-bottom:20px;}
.mgb30{margin-bottom:30px;}
.mgb40{margin-bottom:40px !important;}
.mgb50{margin-bottom:50px;}
.mgb100{margin-bottom:100px;}
.mgl0{margin-left:0 !important;}
.mgl10{margin-left:10px !important;}
.mgl20{margin-left:20px;}
.mgl30{margin-left:30px;}
.mgl40{margin-left:40px;}
.mgl50{margin-left:50px;}
.mgl100{margin-left:100px;}
.mgr0{margin-right:0 !important;}
.mgr5{margin-right:5px;}
.mgr10{margin-right:10px;}
.mgr20{margin-right:20px;}
.mgr30{margin-right:30px;}
.mgr40{margin-right:40px;}
.mgr50{margin-right:50px;}
.mgr100{margin-right:100px;}

/* padding */
.pd0{padding:0 !important;}
.pd0_10{padding:0 10px !important;}
.pd10{padding:10px !important;}
.pd20{padding:20px;}
.pdt0{padding-top:0 !important;}
.pdt10{padding-top:10px;}
.pdt20{padding-top:20px;}
.pdt30{padding-top:30px;}
.pdt40{padding-top:40px;}
.pdt50{padding-top:50px;}
.pdt100{padding-top:100px;}
.pdb0{padding-bottom:0 !important;}
.pdb10{padding-bottom:10px;}
.pdb20{padding-bottom:20px;}
.pdb30{padding-bottom:30px;}
.pdb40{padding-bottom:40px;}
.pdb50{padding-bottom:50px;}
.pdb100{padding-bottom:100px;}
.pdl0{padding-left:0 !important;}
.pdl10{padding-left:10px;}
.pdl20{padding-left:20px;}
.pdl30{padding-left:30px;}
.pdl40{padding-left:40px;}
.pdl50{padding-left:50px;}
.pdl100{padding-left:100px;}
.pdr0{padding-right:0;}
.pdr10{padding-right:10px;}
.pdr20{padding-right:20px;}
.pdr30{padding-right:30px;}
.pdr40{padding-right:40px;}
.pdr50{padding-right:50px;}
.pdr100{padding-right:100px;}

/* border */
.bd0{border:0 !important;}
.bdb0{border-bottom:0 !important;}
.bdall{border:1px solid #eee;}

/* display */
.disIn{display:inline;}
.disIb{display:inline-block !important;}
.disBl{display:block;}
.posR{position:relative;}

.noticeIco{display:inline-block;color:#fff;font-size:10px;line-height:1;padding:3px 5px;border-radius:10px;}
.newIco{display:inline-block;color:#fff;font-size:15px;line-height:1;padding:3px 5px;border-radius:10px;margin-right:5px;}
#fileName a{display:inline-block;margin-right:10px;}
#fileName img{vertical-align:middle; margin-right:3px;}

/* 비밀번호 변경, 수당 발생 안내 */
.guidegb{width:100%;height:100vh;background:#f2f2f2;display:table;text-align:center;}
.guideWrap{display:table-cell;vertical-align:middle;padding-top:60px;}
.guideCont{width:1000px;background:#fff;position:relative;margin:0 auto;padding:120px 100px 100px;border-radius:50px;}
.guideCont .guideIcon{width:150px;height:150px;overflow:hidden;border-radius:50%;position:absolute;left:50%;margin-left:-75px;top:-75px;}
.guideCont h2{font-size:60px;color:#000;line-height:1.3;}
.guideCont h2 p{font-size:0.5em;font-weight:200;opacity:0.7;}
.guideCont hr{display:block;margin:30px auto;width:800px;border-top:1px solid #ddd;border-bottom:0;}
.guideCont p{color:#666;}
.guideCont .btns{margin-top:50px;font-size:0;}
.guideCont .btns a{display:inline-block;line-height:50px;color:#fff;width:180px;border-radius:3px;font-size:15px;margin:0 5px;}

/* 최근본상품 */
.box{position:fixed;float:right;width: 350px;height: 750px;overflow: hidden;background: #ffffff;right: 20px;top: 80px;padding: 20px;border-radius: 20px;z-index: 1000;} 
.box-inner{width: 100%;}