@charset "utf-8";

/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');


@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 100;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

/* reset */
* {box-sizing:border-box}
body {overflow-y:auto; position:relative; line-height:1.5; font-size:15px; font-family:'Montserrat', 'Noto Sans KR', 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; transition-duration:0.3s;}
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 #e3ebf6;font-size:15px;color:#4c5365;padding-left:10px;box-sizing:border-box;transition:all 0.3s; font-family:'Montserrat', 'Noto Sans KR', sans-serif, serif;}
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 #d0d0d0;font-size:15px;font-weight:500;color:#4c5365;padding-left:12px;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 94.5% center; font-family:'Montserrat', 'Noto Sans KR', sans-serif, serif;cursor:pointer;}
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:#ccc;}

/* 상세페이지 SELECT */
.viewSelect {font-size:15px;  font-weight:500; font-family:'Montserrat', 'Noto Sans KR', sans-serif, serif;}

label.label{display:inline-block;margin-right:20px;position:relative;padding-left:20px;cursor:pointer;color:#4c5365;line-height:40px;font-weight:500;}
label.label input{position:absolute;z-index:-1;opacity:0;}
.mark{position:absolute;top:50%;transform:translateY(-50%);left:0;height:16px;width:16px;background:#fff;border:1px solid #d3d9e7;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:#446ca1;border:1px solid #446ca1;}
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;}
.w475{width:47.5% !important;}

.wd_50{width:50px !important;}
.wd_100{width:100px !important;}
.wd_150{width:150px !important;}
.wd_200{width:200px !important;}
.wd_210{width:210px !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:#475260;} a.bg_basic:hover{background:#363e48;}
.bg_gray{background:#616a7d;} a.bg_gray:hover{background:#394050;}
.bg_gray2{background:#f3f3f3; border:1px solid #e5e5e5; color:#333 !important;} a.bg_gray2:hover{background:#e5e5e5;}
.bg_gray3 {background:#f6f9fc !important;}
.bg_blue{background:#1761fd;} a.bg_blue:hover{background:#1054e4;}
.bg_green{background:#02b86c;}
.bg_red{background:#f5325c !important;} a.bg_red:hover{background:#e4254e !important;}
.bg_comgreen{background:#0a6976 !important;} a.bg_comgreen:hover{background:#095e6a !important;}
.bg_comblue{background:#315078 !important; border:1px solid #315078;} a.bg_comblue:hover{background:#203a5c !important; border:1px solid #203a5c;}
.amtBtn {display:block;width:150px;line-height:50px;border-radius:3px;margin:30px auto 0 auto;text-align:center;color:#fff; font-size:16px;}

/* font color */
.txt_white{color:#fff !important;}
.txt_red{color:#ce2626 !important;}
.txt_basic{color:#2f71c5 !important;}
.txt_blue{color:#2f71c5;}
.txt_black{color:#000;}
.txt_gray{color:#888;}

.txt_b{font-weight:700 !important;}
.txt_m{font-weight:500;}
.txt_s{font-weight:300;}

/* 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;}
.mgt15{margin-top:15px !important;}
.mgt20{margin-top:20px;}
.mgt30{margin-top:30px;}
.mgt40{margin-top:40px;}
.mgt50{margin-top:50px;}
.mgt100{margin-top:100px;}
.mgb0{margin-bottom:0 !important;}
.mgb3{margin-bottom:3px;}
.mgb5{margin-bottom:5px;}
.mgb10{margin-bottom:10px;}
.mgb20{margin-bottom:20px;}
.mgb30{margin-bottom:30px !important;}
.mgb40{margin-bottom:40px;}
.mgb50{margin-bottom:50px !important;}
.mgb100{margin-bottom:100px;}
.mgl0{margin-left:0 !important;}
.mgl8{margin-left:8px !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 !important;}
.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 !important;}
.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;}
.pdl5{padding-left:5px;}
.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;}

/* font-size */
.f-size45 {font-size:45px !important;}
.f-size20   {font-size:20px !important;}
.f-size17   {font-size:17px !important;}

/* border */
.bd0{border:0 !important;}
.bdt0{border-top:0 !important;}
.bdb0{border-bottom:0 !important;}
.bdall{border:1px solid #e3ebf6;}
.bd1 {border:1px solid #eaf0f7 !important;} /* */
.view_bdt {border-top:1px solid #eaeaea;} /* 상세페이지내 사용 */
.bdt2 {border-top:2px solid #333 !important;} 
.bdr_ddd {border:1px solid #ddd;}
.bdl_ddd {border-left:1px solid #ddd;}

/* 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:11px;line-height:1;padding:5px 7px;border-radius:50px;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;}

/* -------- 메인 공지사항 팝업 배너 -------- */
/* Slider */
.mainpopupWrap{position:absolute; top:130px; left:50%; z-index:99; background:#fff; margin-left:-320px; border:1px solid #ddd;}
.mainpopupWrap .main_popup{padding: 50px;width: 700px;height: 720px;}
.mainpopupWrap .main_popup .slick-list{width:100%; height:100%; position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.mainpopupWrap .main_popup .slick-slide{display:block; background:#f5f5f5; float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}
.mainpopupWrap .main_popup .slick-track{width:100%; height:100%;position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.mainpopupWrap .popupfooter{padding:10px 20px; border-top:1px solid #ddd;}
.main_popup .slick-prev{background:url(../../images/os/main/arrowL.jpg)no-repeat center;}
.main_popup .slick-next{background:url(../../images/os/main/arrowR.jpg)no-repeat center;}
.main_popup .slick-next:before, .main_popup .slick-prev:before{display:none;}

.slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; width:557px;}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: pointer;cursor: hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat}@font-face{font-family:slick;font-weight:400;font-style:normal;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg')}
.slick-next,.slick-prev{font-size:0;line-height:0;position:absolute;top:50%;display:block;width: 30px;height: 30px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);cursor:pointer;color: #fff;border:none;outline:0;background:0 0;/* border-radius: 50%; *//* background: #555; */z-index: 9999; margin-top: -15px;}
/* .slick-next:focus,.slick-next:hover,.slick-prev:focus,.slick-prev:hover{color:transparent;outline:0;background:0 0} */
.slick-next:focus:before,.slick-next:hover:before,.slick-prev:focus:before,.slick-prev:hover:before{opacity:1}
.slick-next.slick-disabled:before,.slick-prev.slick-disabled:before{opacity:.25}
.slick-next:before,.slick-prev:before{font-family:slick;font-size: 20px;line-height: 40px;opacity:.75;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.slick-prev{left: 10px;}[dir=rtl] .slick-prev{right:-25px;left:auto}
.slick-prev:before{content:'';background:url(../../images/os/new_img1/main/control-left.png) no-repeat;width: 30px;height: 30px;display: block;background-size:100%;}
[dir=rtl] .slick-prev:before{content:'';background:url(../../images/os/new_img1/main/control-right.png) no-repeat; width: 40px; height: 40px; display: block; background-size:100%;}
.slick-next{right: 10px;}[dir=rtl] .slick-next{right:auto;left:-25px}
.slick-next:before{content:'';background:url(../../images/os/new_img1/main/control-right.png) no-repeat;width: 30px;height: 30px;display: block;background-size:100%;}
[dir=rtl] .slick-next:before{content:'';background:url(../../images/os/new_img1/main/control-left.png) no-repeat; width: 40px; height: 40px; display: block; background-size:100%;}
.slick-dots{position:absolute;display:block;width: calc(100% - 100px);margin:0;list-style:none;text-align:center;box-sizing: border-box;bottom: 20px;}
.slick-dots li{position:relative;display:inline-block;width:20px;height:20px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:20px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:0;background:0 0}
.slick-dots li button:focus,.slick-dots li button:hover{outline:0}
.slick-dots li button:focus:before,.slick-dots li button:hover:before{opacity:1}
.slick-dots li button:before{font-family:slick;font-size:30px;line-height:20px;position:absolute;top:0;left:0;width:20px;height:20px;content:'•';text-align:center;opacity:.25;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.slick-dots li.slick-active button:before{opacity:.75;color:#000}

.prntBtn{float:right; width:150px; height: 30px; text-align:center; margin-top:10px; margin-right:10px; border-radius:5%; border: 1px solid black;}
.prntBtn:hover{text-decoration:none; color:black;}
.prntBtn:link{text-decoration:none; color:black;}
.prntBtn:visited{text-decoration:none; color:black;}