@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:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* reset */
* {box-sizing:border-box}
body {position:relative; line-height:1.5; font-size:16px; font-family:"Pretendard" , 'Montserrat', sans-serif; color:#333;word-break: keep-all;    overflow-x: hidden;}
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}
address,caption,cite,code,dfn,em,var { font-style:normal; font-weight:normal; }

/* 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:13px;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:13px;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: #303e67;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:#656d9a;}

label.label{display:inline-block;margin-right:20px;position:relative;padding-left:21px;cursor:pointer;color:#444;line-height:38px;}
label.label input{position:absolute;z-index:-1;opacity:0;}
.mark{position:absolute;top:50%;margin-top:-7px;left:0;height:16px;width:16px;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:#3b3836;border:1px solid #3b3836;}
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:#e6e6e6;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: #1761fd;border: 1px solid #1761fd;}
.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:#1761fd;}
.radio .mark:after{left:3px;top:3px;height:8px;width:8px;border-radius:50%;background:#fff;}
.radio input:disabled ~ .mark:after{background:#1761fd;}

/* 
 <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_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:#3b3836;} a.bg_basic:hover{background:#222;}
.bg_gray{background:#666;} a.bg_gray:hover{background:#555;}
.bg_blue{background:#1761fd;}
.bg_green{background:#02b86c;}
.bg_red{background:#9f2841 !important;}

/* font color */
.txt_white{color:#fff !important;}
.txt_red{color:#9f2841 !important;}
.txt_basic{color:#3b3836 !important;}
.txt_blue{color:#1761fd;}
.txt_black{color:#000;}
.txt_gray{color:#888;}

.txt_b{font-weight:700;}
.txt_en{font-family:'Montserrat', sans-serif;}

/* 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;}
.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%;}