@charset "utf-8";

/* ----------------------------
2019.04.15 pjsuny - 엠로 디자인팀
2020.01.15 pjsuny - 엠로 디자인팀 - 한라건설 
---------------------------- */

/*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, strong, 
sub, sup, tt, var, b, 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 {margin:0;padding:0;border:0;font-size:100%;font-family: 'Noto sans','Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;color:#333;line-height: 1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul, li {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}
a {text-decoration:none; cursor:pointer}
em, address {font-style:normal;}
table {border-spacing:0; border-collapse: collapse;;}
a, a:link, a:visited {cursor:pointer;text-decoration:none; color:#000;}
p, a, h2, h3 {word-wrap:break-word;}
a, em, label, span, strong, button {display:inline-block;}
li {list-style:none;}
img, fieldset {border:0 none;}
img {vertical-align:middle;}
legend, hr {display:none;}
legend {position:absolute; top:0; left:0; width:0; height:0; display:block; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
caption {padding:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
input:-ms-input-placeholder {color:#666;}
input::-webkit-input-placeholder {color:#666;}
input::-moz-placeholder {color:#666;}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {-webkit-box-shadow: 0 0 0 0 #fff inset; -moz-box-shadow: 0 0 0 0 #fff inset; box-shadow: 0 0 0 0 #fff inset;}
h1, h2, h3, h4, h5, h6{font-size:100%;font-family: 'Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;}
input, select, textarea {font-size:100%; font-family:'Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;vertical-align:middle }
button {overflow:visible; border:0 none;background:transparent;vertical-align:top;cursor:pointer;font-family:'Malgun Gothic', "맑은고딕",'dotum',"돋움",sans-serif;}
button::-moz-focus-inner {border:0;padding:0;}



/*COMMON*/
body {overflow: hidden;height: 100vh;min-height: 100%;font-size: 13px;letter-spacing: -1px;color: #111;background: #fff;}
div {box-sizing: border-box;}

/* ========================================
   Login Page Redesign
   ======================================== */

/* Self-hosted webfonts - prevents FOUT */
@font-face {
	font-family: 'Baumans';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url('fonts/Baumans/baumans-v18-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: local('Pretendard Regular'), url('fonts/Pretendard/Pretendard-Regular.subset.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 500;
	font-display: block;
	src: local('Pretendard Medium'), url('fonts/Pretendard/Pretendard-Medium.subset.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 600;
	font-display: block;
	src: local('Pretendard SemiBold'), url('fonts/Pretendard/Pretendard-SemiBold.subset.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 700;
	font-display: block;
	src: local('Pretendard Bold'), url('fonts/Pretendard/Pretendard-Bold.subset.woff2') format('woff2');
}

/* Top-left HamaH logo */
.topLogo {position: absolute;top: 40px;left: 60px;z-index: 10;}
.topLogo .logoMain {height: 36px;color: #002762;font-family: 'Baumans', cursive;font-size: 36px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -1.08px;opacity: 0.8;}
.topLogo .logoSub {height: 16px;margin-top: 6px;color: #002762;font-family: 'Pretendard', sans-serif;font-size: 16px;font-style: normal;font-weight: 500;line-height: normal;letter-spacing: -0.48px;}

/* Login wrap overlay */
.loginWrap {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;pointer-events: none;}
.loginWrap > * {pointer-events: auto;}

/* Login box (right side) */
.loginbox {
	position: absolute;
	top: 50%;
	right: 17%;
	transform: translateY(-50%);
	display: flex;
	width: 400px;
	padding: 20px 25px;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	border-radius: 10px;
	background: rgba(30, 49, 85, 0.80);
	box-shadow: 1px 4px 4px 3px rgba(0, 0, 0, 0.10);
}
.loginbox > form {width: 100%;display: flex;flex-direction: column;gap: 10px;}
.loginbox h4 {color: #FFF;font-family: 'Pretendard', sans-serif;font-size: 32px;font-style: normal;font-weight: 600;line-height: normal;letter-spacing: -0.96px;align-self: stretch;margin: 0;}
.loginbox .msgMain {color: #9EC8FF;font-family: 'Pretendard', sans-serif;font-size: 24px;font-style: normal;font-weight: 700;line-height: 28px;letter-spacing: -0.72px;align-self: stretch;margin: 0;word-break: keep-all;}
.loginbox .msgSub {color: #E0E0E0;font-family: 'Pretendard', sans-serif;font-size: 18px;font-style: normal;font-weight: 400;line-height: 28px;letter-spacing: -0.54px;align-self: stretch;margin: 0;word-break: keep-all;}
.loginbox .msgSub #countdown {color: #9EC8FF;font-weight: 700;}

/* Inputs */
.loginbox .loginform {margin: 0;display: flex;flex-direction: column;gap: 10px;}
.loginbox .loginform .input-wrap {
	position: relative;
	display: block;
	width: 100%;
}
.loginbox .loginform .input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	pointer-events: none;
	z-index: 2;
}
.loginbox .loginform input[type=text], .loginbox .loginform input[type=password] {
	width: 100%;
	height: 48px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background-color: rgba(0, 0, 0, 0.25);
	box-sizing: border-box;
	padding: 0 16px 0 46px;
	color: #fff;
	font-family: 'Pretendard', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	outline: none;
}
.loginbox .loginform input::placeholder {color: rgba(255, 255, 255, 0.50);font-family: 'Pretendard', sans-serif;font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;}
.loginbox .loginform input:-webkit-autofill,
.loginbox .loginform input:-webkit-autofill:hover,
.loginbox .loginform input:-webkit-autofill:focus,
.loginbox .loginform input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px rgb(56, 68, 89) inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	transition: background-color 5000s ease-in-out 0s;
}
.loginbox .loginform select[hidden] {display: none;}

/* Option row: save id + find links */
.loginbox .option {overflow: hidden;margin: 0;display: flex;align-items: center;justify-content: space-between;align-self: stretch;}
.loginbox .option .saveid {display: inline-flex;align-items: center;gap: 8px;}
.loginbox .option .saveid input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	background: url(../img/uncheck.svg) no-repeat center / 18px 18px;
	cursor: pointer;
	vertical-align: middle;
}
.loginbox .option .saveid input[type=checkbox]:checked {background-image: url(../img/check.svg);}
.loginbox .option .saveid label {color: #9EC8FF;font-family: 'Pretendard', sans-serif;font-size: 14px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.42px;cursor: pointer;}
.loginbox .option .findLinks {display: inline-flex;align-items: center;gap: 6px;}
.loginbox .option .findLinks a, .loginbox .option .findLinks a:link, .loginbox .option .findLinks a:visited {color: #9EC8FF;font-family: 'Pretendard', sans-serif;font-size: 14px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -0.42px;background: none;padding: 0;height: auto;}
.loginbox .option .findLinks a:hover {text-decoration: underline;}
.loginbox .option .findLinks .findDivider {color: #9EC8FF;font-family: 'Pretendard', sans-serif;font-size: 14px;font-weight: 400;letter-spacing: -0.42px;}

/* Login button */
.loginbox .loginbtn {
	display: flex;
	padding: 12px 15px;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	border-radius: 10px;
	background: #3171E9;
	margin: 0;
	transition: background .2s;
}
.loginbox .loginbtn:hover {background: #235ad0;}
.loginbox .loginbtn > span {
	color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px;
}
.loginbox .commt {font-size: 12px;color: rgba(255, 255, 255, 0.65);line-height: 1.5;margin-top: 12px;}

/* Copyright */
.copyright {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	height: 28px;
	background: url(../img/logo_footer.png) no-repeat left center;
	background-size: 95px auto;
	padding-left: 103px;
	color: #000;
	font-family: 'Pretendard', sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* ----- Full-screen JS-driven crossfade slider ----- */
#sliderFrame {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;margin: 0;z-index: 0;background: #F2F4F7;overflow: hidden;}
#sliderFrame .bgSlide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
    background-size: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
#sliderFrame .bgSlide.active {opacity: 1;}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
    z-index:2;
    cursor:pointer;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
    position:absolute;
    width:100%;
    height:auto;
    padding:10px 0;/* 10px will increase the height.*/
    left:0px;
    bottom:0px;top:auto;
    overflow:hidden;
    font: bold 14px/20px Arial;
    color:#EEE;
    text-align:center;
    background:rgba(0,0,0,0.3);
}
#slider .mc-caption a {
    color:#FB0;
}
#slider .mc-caption a:hover {
    color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
    top:320px;
    text-align:center;
    background:none;
    position:relative;
    z-index:3;
}

/* each bullet */
#slider .navBulletsWrapper div 
{
    width:11px; height:11px;
    font-size:0;color:White;/*hide the index number in the bullet element*/
   /*  background:transparent url(bullet.png) no-repeat 0 0; */
    display:inline-block; *display:inline; zoom:1;
    overflow:hidden;cursor:pointer;
    margin:0 6px;/* set distance between each bullet*/
}

#slider .navBulletsWrapper .active {background-position:0 -11px;}


/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider .sliderInner {
    overflow:hidden;
    position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
/* test end  */


/* ===== Find ID / Password Popup ===== */
.popLayer {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	height: auto;
	background: rgba(30, 49, 85, 0.95);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 10px;
	box-shadow: 1px 4px 16px 3px rgba(0, 0, 0, 0.30);
	z-index: 100;
	padding: 24px 25px;
	box-sizing: border-box;
}
.popContainer {width: 100%;height: 100%;}

.popHeader {
	position: relative;
	width: 100%;
	height: auto;
	background: transparent;
	padding: 0;
	margin-bottom: 16px;
	box-sizing: border-box;
}
.popHeader h3 {
	float: none;
	display: block;
	height: auto;
	color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.72px;
	background: none;
	padding: 0;
}
.popHeader .popClose {
	position: absolute;
	top: 4px;
	right: 0;
	width: 24px;
	height: 24px;
	background: transparent;
	margin: 0;
	cursor: pointer;
}
.popHeader .popClose::before,
.popHeader .popClose::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 1px;
}
.popHeader .popClose::before {transform: translate(-50%, -50%) rotate(45deg);}
.popHeader .popClose::after {transform: translate(-50%, -50%) rotate(-45deg);}
.popHeader .popClose:hover::before,
.popHeader .popClose:hover::after {background: #FFF;}

.popConts {
	padding: 0;
	text-align: left;
}
.popConts .popForm {
	width: 100%;
	height: auto;
	margin: 0;
	background: transparent;
	border: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: left;
}
.popConts .popForm ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.popConts .popForm li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-family: 'Pretendard', sans-serif;
}
.popConts .popForm li label {
	display: block;
	width: auto;
	color: #9EC8FF;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -0.42px;
}
.popConts .popForm li label .id_txt {color: inherit;font: inherit;}
.popConts .popForm li input[type=text] {
	width: 100%;
	height: 48px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	margin: 0;
	padding: 0 16px;
	color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-size: 16px;
	font-weight: 400;
	box-sizing: border-box;
	outline: none;
}
.popConts .popForm li input[type=text]::placeholder {color: rgba(255, 255, 255, 0.5);}
.popConts .popForm li input[type=text]:-webkit-autofill,
.popConts .popForm li input[type=text]:-webkit-autofill:hover,
.popConts .popForm li input[type=text]:-webkit-autofill:focus,
.popConts .popForm li input[type=text]:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px rgb(56, 68, 89) inset !important;
	-webkit-text-fill-color: #fff !important;
	caret-color: #fff;
	transition: background-color 5000s ease-in-out 0s;
}

.popConts .popBtn {
	display: flex;
	width: 100%;
	padding: 12px 15px;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	background: #3171E9;
	color: #FFF;
	font-family: 'Pretendard', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px;
	margin: 20px 0 0;
	box-sizing: border-box;
	text-align: center;
	transition: background .2s;
}
.popConts .popBtn:hover {background: #235ad0;}

/*Two Factor Certification*/
.popContsTF {
	text-align: center;
}
.popContsTF .popFormTF {
	height: auto;
	margin: 0 auto;
	background: #f0f2f5;
	border: 1px solid #cbced2;
	padding:20px 40px;
	box-sizing: border-box;
	text-align: left;
}

/* Message */
.messageWrap {background:#f1f1f1;border-top: 0;}
.messageWrap .wrap {position:relative;width:100%;height:100%;}
.messageWrap .container {position:fixed;left:50%;top:50%;width:500px;height:460px;margin-top:-280px;margin-left:-250px;box-shadow:0px 3px 8px #dadada;background:#fff}
.messageWrap .container2 {position:fixed;left:50%;top:50%;width:540px;height:500px;margin-top:-300px;margin-left:-270px;box-shadow:0px 3px 8px #dadada;background:#fff} 
.messageWrap .header {overflow: hidden;width:100%;height:52px;border-radius:5px 5px 0 0;background:#007ec8;box-sizing:border-box}
.messageWrap .header .logo {float: left;display:inline-block;width:183px;height:35px;margin:10px 0 0 25px;text-indent:-10000px;}
.messageWrap .header .logo2 {float: right;display:inline-block;width:81px;height:24px;background:url(../img/logo_message2.png) no-repeat;margin:15px 25px 0 0;text-indent:-10000px;}
.messageWrap .section {width:100%;border-radius:0 0 5px 5px;box-sizing:border-box}
.messageWrap .section .subject {overflow:hidden;margin:60px auto 25px;}
.messageWrap .section .subject b,
.messageWrap .section .subject span {display:inline-block;letter-spacing:-1px}
.messageWrap .section .subject b {font-size:80px;font-weight:normal;vertical-align:top;letter-spacing:-6px}
.messageWrap .section .subject span {font-size:28px;color:#303030;font-weight:bold;line-height:1.2em;letter-spacing:-1px;padding-top:10px;padding-left:22px}
.messageWrap .section .explan {width:380px;min-height:32px;margin:0 auto;background:url(../img/ico_caution_y.png) no-repeat;padding-left:55px;font-size:12px;color:#7f7f7f;line-height:1.3em;}
.messageWrap .section .subject2 {width:340px;margin:60px auto 25px;}
.messageWrap .section .subject2 b {display:inline-block;min-height:32px;background:url(../img/ico_caution_y.png) no-repeat;padding-left:55px;padding-top:5px;font-size:24px;font-weight:bold;}
.messageWrap .section .explan2 {width:380px;margin:0 auto;font-size:13px;color:#252424;line-height:1.5em;text-align:center}
.messageWrap .section .subject3 {width:340px;margin:60px auto 30px;}
.messageWrap .section .subject3 b {display:inline-block;min-height:71px;background:url(../img/ico_logout_y.png) no-repeat;padding-left:100px;padding-top:5px;font-size:24px;font-weight:bold;line-height:1.3em;}
.messageWrap .section .hr {width:370px;height:1px;background:#b1b1b1;margin:40px auto}
.messageWrap .section .hr2 {width:450px;height:1px;background:#b1b1b1;margin:40px auto}
.messageWrap .section .commt {margin: 0 auto;font-size:15px;color:#252424;line-height:1.6em;text-align: center;}
.messageWrap .section .commt b {font-weight:normal;}
.messageWrap .section .btn_bg_msg {width:290px;height:52px;border-radius:5px;border:0;background:#7d7d7d;cursor:pointer;text-align:center;font-size:18px;color:#fff;line-height:1.3em}
.messageWrap .section .btn_bg_msg:hover {background:#32426e}
.messageWrap .section .btn_cnt {margin: 25px auto;text-align: center;}