@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

/* 22.05.06 JHM FOUC 현상 제거 */
html {opacity: 0;}
.add-fouc {opacity: 1;}

@font-face {
 font-family: 'Noto Sans KR2';
 src: url(./font/NotoSansKR.eot);
 src: url(./font/NotoSansKR.eot?#iefix) format('embedded-opentype'),
	  url(./font/NotoSansKR.otf) format('opentype');
}
@font-face {
 font-family: 'NanumSquare2';
	src: url(./font/NanumSquareR.eot); 
	src: url(./font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(/font/NanumSquareR.ttf) format('truetype');

}

@font-face {
 font-family: 'NanumSquareB';
	src: url(./font/NanumSquareB.eot); 
	src: url(./font/NanumSquareB.eot?#iefix) format('embedded-opentype'),url(./font/NanumSquareB.ttf) format('truetype');
}

@font-face {
 font-family: 'NanumSquareEB';
	src: url(./font/NanumSquareEB.eot); 
	src: url(./font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),url(./font/NanumSquareEB.ttf) format('truetype');
}


/*===========================================================================
	RESET
============================================================================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, br {margin:0;padding:0;border:0;box-sizing:border-box; color:#464646; line-height:1.3; letter-spacing:-0.36px;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
a {display: inline-block;text-decoration:none;color:inherit;}
a:link, a:visited {text-decoration:none;}
a:hover, a:active {text-decoration:none;}
img {border:none;vertical-align: baseline;}
ol, ul, li {list-style:none;}
i, em {font-style: normal;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset {border:none;}
legend{width:1px;height:1px;overflow:hidden;visibility:hidden;line-height:0;font-size:0;position:absolute; left:-999px;}
button, input[type="button"] {padding:0;margin:0;border:none;vertical-align:middle;cursor:pointer;background:transparent;}
input{margin:0;padding:0;border:0;}
input[type=text]::-ms-clear {display:none;}
input[type=password]::-ms-clear {display:none;}
textarea {resize:none;box-sizing:border-box;background-color:transparent;border:1px solid #CCCCCC; color:#464646; padding: 10px 16px; font-size: 15px; border-radius: 2px;}
input, select, button, textarea{outline: none; -moz-appearance: none; -webkit-appearance: none;} 
button:focus{outline:0;}
input[type="file"]{display:none;}
input[type="text"], input[type="password"], input[type="number"] {padding:15px 14px;font-size:15px; border-radius: 2px;}
input[type="text"], input[type="password"]{height: 50px; background-color:transparent;border:1px solid #CCCCCC;color:#464646;}
input[type="password"]:-ms-input-placeholder{color: #CCC; letter-spacing:-0.36px;}
input:-ms-input-placeholder {color: #ccc;}
textarea:-ms-input-placeholder {color: #ccc;}
input[type="text"]:disabled , textarea:disabled , select:disabled{background-color:#F5F5F5; opacity:1;}
input::placeholder,textarea::placeholder{color:#CCCCCC; font-size: 14px;font-weight:100;line-height:1.5;}
input[type="checkbox"] , input[type="radio"]{display:none;}
select{border:1px solid #CCCCCC; color:#4C4D51;height: 50px;background:url(../img/icons/select_arrow.png)no-repeat right; background-size: 11px; background-position-x:calc(100% - 12px); -webkit-appearance: none;   -moz-appearance: none; border-radius: 2px; padding:10px 12px; font-size: 15px;}
select:focus {border: 1px solid #252730;}
select::-ms-expand { display: none;}
/*reset end*/


/*--------------------------------------------
|   common                                                             |
---------------------------------------------*/
*{font-family:'Noto Sans KR', 'Noto Sans KR2', sans-serif;font-size:15px; word-break: break-all;scroll-behavior: smooth;}
body {/*min-width: 1200px;*/ background: #F2F2F2;}
.clearfix:after, .clearfix2:after{content:''; display:block; clear:both;}
.clearfix>*{float:left;}
.clearfix2>*:first-child{float:left;}
.clearfix2>*:nth-child(2){float:right;}
.has_right_border{margin-right:20px;position:relative;}
.has_right_border:after{content:"";display:inline-block;position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:1px;height:10px;background:#C9C9C9;}
.ellipsis {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;}
.ellipsis2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.5;}
.ellipsis3 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.5;}
.required{position:relative;margin-bottom:10px;font-size:16px;}
.required:after{position:absolute;content:'*';color:#F83B56;width:6px;height:100%;}
.pre{white-space:pre-line;line-height:1.6;}
.text_hidden {overflow: hidden;  display: inline-block;  border: 0;  margin: -1px;  width: 1px;  height: 1px;  clip: rect(1px, 1px, 1px, 1px);  clip-path: inset(50%);}
.underline{text-decoration:underline !important;}
span , strong {color: inherit; font-size: inherit;} 

/* IOS app padding*/
body {min-height:100vh;padding-top: constant(safe-area-inset-top); /* iOS 11.0 */padding-top: env(safe-area-inset-top); /* iOS 11+ */  padding-bottom:  constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}

/*float*/
.floatL{float:left;}
.floatR{float:right;}
.leftT {text-align: left !important;}
.rightT {text-align: right !important;}
.centerT{text-align:center;}

/*font*/
.bold{font-weight:bold;}
.fw400{font-weight:400;}
.fw500 {font-weight: 500;}
.nanum {font-family: 'NanumSquare'; font-weight: normal;}
.nanumB {font-family: 'NanumSquareB'; font-weight: bold;}
.nanumEB {font-family: 'NanumSquareEB'; font-weight: 800;}
.font_13{font-size:13px;}
.font_14{font-size:14px;}
.font_15{font-size:15px;}
.font_16 {font-size: 16px;}
.font_17 {font-size: 17px;}
.font_18 {font-size: 18px;}
.font_20 {font-size: 20px;}
.font_24 {font-size: 24px;}
.normal_txt{color:#464646;}
.point_txt{color:#F83B56;}
.yellow_txt{color:#FF9900;}
.black_txt {color: #1D1D1D;}
.gray_txt {color: #666666;}
.gray2_txt {color: #A7A7A7 !important;}
.gray3_txt {color: #959595;}
.white_txt{color:#fff;}
.no_break{word-break:keep-all;}

/*bg*/
.white_bg {background: #fff;}

/*btn*/
.btn {width: 180px; height: 48px; border-radius: 2px; background: #3A394B; color: #fff; border: 1px solid #3A394B; font-size: 16px; font-weight: 500; }
.btn.gray {background: #CCC; border: 1px solid #CCCCCC;}
.btn.gray2 {background: #A7A7A7; border: 1px solid #A7A7A7;}
.btn.dark_gray {background: #666666; border: 1px solid #666666;}
.btn.point {background: #F83B56; border: 1px solid #F83B56;}
.btn.line {background: #fff; border: 1px solid #464646; color: #464646; }
.btn.point.line {background: #fff; border: 1px solid #F83B56; color: #F83B56; }
.btn.bdrs0 {border-radius: 0;}
.btn_wrap.double button {width: calc(50% - 6px);}

/*margin*/
.mt7 {margin-top: 7px;}
.mt10 {margin-top: 10px;}
.mt12 { margin-top: 12px; }
.ml5{margin-left:5px;}
.mt20{margin-top:20px;}
.mt46 {margin-top: 46px;}
.ml5 {margin-left: 5px; }
.ml10 {margin-left: 10px;}
.ml24 {margin-left: 24px; }
.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}

/*width*/
.width_100{width:100%;}
.width_80{width:80%}
.width_60{width:60%}
.width_50{width:50%;}
.width_40{width:40%}
.width_48{width:48%}
.width_30{width:30%}
.width_15{width:15%}
.width300 {width: 300px;}
input[type="text"].width_100,input[type="password"].width_100{width:100%}
input[type="text"].width_80,input[type="password"].width_80{width:80%}
input[type="text"].width_60,input[type="password"].width_60{width:60%}
input[type="text"].width_50,input[type="password"].width_50{width:50%; }
input[type="text"].width_48,input[type="password"].width_48{width:48%}
input[type="text"].width_40,input[type="password"].width_40{width:40%}
input[type="text"].width_30,input[type="password"].width_30{width:30%}
input[type="text"].width_15,input[type="password"].width_15{width:15%}
input[type="text"].width300,input[type="password"].width300{width:300px;}
.btn_input input {width: calc(100% - 102px) !important; }
.btn_input button {width: 90px; height: 50px; font-size: 15px;}
/*--------------------------------------------
|   layout                                                                 |
---------------------------------------------*/
.container {max-width:1200px;margin: 0 auto;/* overflow: hidden;*/width:calc(100% - 34px); }
.shadow_box {padding: 40px; background: #fff; box-shadow:0 3px 15px rgba(142,142,142,0.14); border-radius: 10px;}
header + section{padding-top:70px;}
/*--------------------------------------------
|   popup                                                                 |
---------------------------------------------*/
.pop_wrap {position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 100;display:none;}
.pop_wrap .dim, .pop_wrap .dim2{position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.8);left: 0;top: 0;}
.pop_wrap .pop_cont {position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); background: #fff;width:90%;max-width:540px;max-height:85vh;border-radius:8px;padding:20px 30px 30px;overflow:hidden;}
.pop_wrap .pop_cont>.pop_close, .pop_wrap .pop_cont>.pop_close_btn {position: absolute; right: 20px; top: 20px; }
.pop_wrap .pop_cont .pop_title {color:#2E2C2C;font-size:20px;font-weight:500;}
.pop_wrap .pop_cont .pop_title + p{margin-top:8px;margin-bottom:8px;}
.pop_wrap .pop_cont .pop_inner{max-height:calc(85vh - 200px);}
.pop_wrap .pop_cont .pop_inner.resume_wrap{max-height:calc(85vh - 277px)}
.pop_wrap .pop_cont .btn_box{margin-top:10px;text-align:center;}
.pop_wrap .pop_cont .btn_box button{min-width:230px;}
.pop_wrap .pop_cont .btn_box.btn_box2 button{width:calc(50% - 10px);}

/*--------------------------------------------
|   header                                                                |
---------------------------------------------*/
header { position: fixed; width:100%;left:0;top:0;height: 70px; background: #fff; box-shadow:0 3px 6px rgba(230,229,229,0.32);background:#fff;z-index:99; transition:0.3s;top: constant(safe-area-inset-top); /* iOS 11.0 */top: env(safe-area-inset-top); /* iOS 11+ */ }
header .container {padding: 24px 0;}
header .logo {margin-right: 80px; margin-top: -4px;}
header .menu li{margin-right: 45px; line-height:26px;}
header .menu li.active a {color: #F83B56; }
header .right_menu>li {position: relative; margin-right: 30px;}
header .right_menu>li:after {position: absolute; content:''; width: 1px; height: 12px; border-right: 1px solid #A7A7A7; right: -15px; top: 5px; }
header .right_menu>li:last-child:after {border: 0;}
header .right_menu>li a img.on_icon {display: none;}
header .right_menu>li.on a {color: #F83B56; }
header .right_menu>li.on a img {display: none; }
header .right_menu>li.on a img.on_icon {display: inline-block;}
header .right_menu>li a {font-size: 14px; font-weight: 500; color: #666;}
header .right_menu>li a img {width: 14px; margin-right: 5px;}
header .alarm_menu.new:before {position: absolute; content:''; width: 4px; height: 4px;  border-radius: 50%; right: -6px; top: 2px; background: #F83B56; }
/*알림박스-----------------*/
header .alarm_list {position: absolute; right: 17%; top: 83px; width: 347px; background: #fff; box-shadow:0 3px 15px rgba(142,142,142,0.14); border-radius: 8px; padding: 17px 12px; z-index: 2; display: none;}
header .alarm_list .overflow_div {height: 255px;}
/*스크롤바 커스텀*/
header .alarm_list .mCSB_inside>.mCSB_container {margin-right: 10px;}
header .alarm_list .mCSB_scrollTools {width: 4px;}
header .alarm_list .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {background-color: #E3E3E3;	}
header .alarm_list .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color:#A7A7A7; }
/*스크롤바 커스텀 끝*/
header .alarm_list h3 {font-size: 16px; font-weight: 500; margin-bottom: 15px;}
header .alarm_list h3 span {color: #F83B56; }
header .alarm_list ul li {margin-bottom: 2px; }
header .alarm_list ul li.new {background: #ffefef;}
header .alarm_list ul li a {color:#f83b56; padding: 14px 16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:100%;} 
header .alarm_list ul li a strong {font-weight: 500; }


/*checkbox*/
.checkbox{padding:0;height:initial;width: initial;margin-bottom:0;display:none;cursor:pointer;}
input[type="checkbox"].checkbox + label{position: relative;cursor: pointer;width:auto;background:transparent;border:0;height:auto;}
input[type="checkbox"].checkbox + label:before{content:'';-webkit-appearance: none;background-color:transparent;border:1px solid #A9A9A9;padding:6px;display: inline-block;position: relative;vertical-align: middle;cursor: pointer;margin-right: 5px;}
input[type="checkbox"].checkbox:checked + label{background:transparent;border:0;}
input[type="checkbox"].checkbox:checked + label:after{content: '';display: block;position: absolute;top:2px;left:5px;width:4px;height:8px;border: solid #F83B56;border-width: 0 2px 2px 0;transform: rotate(45deg);}

/*--------------------------------------------
|   footer                                                                  |
---------------------------------------------*/
footer {background: #fff; height: 225px; border-top: 1px solid #E3E3E3; padding-top: 18px;}
footer ul {display: inline-block;}
footer ul>li {} 
footer .menu li {margin-right: 30px; display: inline-block;}
footer .menu li:last-child {margin-right: 0;}
footer .menu li a {font-weight: 500; }
footer .info {margin: 20px 0 15px;width:calc(100% - 40px);}
footer .info li {margin-bottom: 7px; }
footer .info li div {display: inline-block; }
footer .info li p {position: relative; color: #818181; font-size: 12px; }
footer h6 {font-size: 12px; color: #818181; font-weight: normal;    line-height: 1.4; }
footer .blog_logo { width:30px; height:30px; /*margin-top: 15px;*/}
footer .blog_logo img { object-fit:cover; width:100%; height:100%;}
footer .logos_wrap a{margin-right:10px;}
footer .logos_wrap a:last-of-type{margin-right:0;}
/*popup*/
.pop_contents{position:fixed;top:80px;right:0px;/*;max-width:480px;width:100%;*/z-index:9999;}
/*.popup img{max-width:100%;}*/
.btn_area{width:100%;/*background:rgba(0,0,0,0.4);*/}
.pop_contents .btn_area img{height:20px;}
.pop_contents .btn_area button{}
.pop_contents .btn_area{padding:8px 10px;}
.pop_contents .btn_area span{margin-top:4px;}
.popup .btn_area>div{margin-top:3px;}
.pop_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);}
.main_pop .pop_contents, .pop_contents .btn_area{width:100%;max-width:450px;}
.main_pop .pop_contents{background:rgba(0,0,0,0.4);}
/** 2021-05-03 HUBDNC_JHM 희망급여 및 프로젝트 예상금액 CSS **/
.mt5 { margin-top: 5px; }
/** 2021-05-03 HUBDNC_JHM 희망급여 및 프로젝트 예상금액 CSS **/

/** 2022-01-18 HUBDNC_JHM 폰트 사이즈 important **/
.imt_font_18{font-size: 18px !important;;}
.ml90{margin-left: 90px;}
.ml105{margin-left: 105px;}