@charset 'utf-8';

/* ********************************************************************************* *
* 02) Pretendard // font-family: 'Pretendard';
* ********************************************************************************* */
@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 600;
	src: url("../@/assets/fonts/Pretendard-SemiBold.woff2") format("woff2"), url("../@/assets/fonts/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 500;
	src: url("../@/assets/fonts/Pretendard-Medium.woff2") format("woff2"), url("../@/assets/fonts/Pretendard-Medium.woff") format("woff");
}
@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 400;
	src: url("../@/assets/fonts/Pretendard-Regular.woff2") format("woff2"), url("../@/assets/fonts/Pretendard-Regular.woff") format("woff");
}
@font-face {
	font-family: "Pretendard";
	font-style: normal;
	font-weight: 300;
	src: url("../@/assets/fonts/Pretendard-Light.woff2") format("woff2"), url("../@/assets/fonts/Pretendard-Light.woff") format("woff");
}

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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video{margin:0;padding:0;border:0;font:inherit;color:inherit;vertical-align:baseline;background:transparent;font-weight:normal;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,span,button,th,td,a{font-family:"Pretendard", "NotoSans", "sans-serif", "AppleGothic", "굴림", "Gulim", "Arial", "verdana", "Helvetica";}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, form, fieldset, p, button { margin: 0; padding: 0; list-style: none; }
a {text-decoration: none;}
body {height: 100vh; background:#f5f6f7; margin: 0;padding: 0;font-size: 13px;overflow-x: hidden;word-break: break-all;}
.login_body {display: flex; align-items: center; min-height: 100%; background-color: #f5f6f7;}
#newLoginWrap{width:100%;background:#f5f6f7;position:relative;}
#newLoginWrap .loginArea_w {position:relative;max-width:1030px;height:auto;margin:0 auto;padding:10px 45px;background-color:#fff;border: 13px solid #f0f0f0;}
.newLoginTop {text-align: center;}
.newLoginTop h1 {margin-bottom:20px !important}

.hidden {position: absolute;left: -9999;top: 0;width: 0;height: 0;line-height: 0;text-indent: -9999em; overflow: hidden;}
.slog_sns_lst .tp{display: inline-block; width: 25px; height: 25px; background: no-repeat left top;}

.onepassBtn {font-size: 18px;color: #ffffff;background-color: #5a69dc;margin-bottom: 10px;height: 50px;line-height: 1;display: flex;align-items: center;justify-content: center;}
.onepassBtn .slog_sns_lst {padding-left: 0}

@media (max-width: 431px){
	.slog_sns_lst .tp{background-size: 100% auto; width: 20px; height: 20px;}
	.slog_sns_lst.type02 .tp .txt{padding-left: 50px;font-size: 13px;}
}

.login_MD  {overflow:hidden;}
.login_MD:after {content:""; display:block; clear:both; height:0;}
.login_MD .loginFrm {position:relative;padding:0px 0px 5px 0}
.login_MD .loginFrm:after{ content:"";display:block;clear:both;height:0}
.login_MD .loginFrm input {background-color:#fff;border:1px solid #e2e2e2;color:#8e8e8e;width:100%;height:50px;margin:0  0  7px 0;padding-left:50px;font-size:15px;color:#666;vertical-align:middle;box-sizing:border-box}
.login_MD .loginFrm .login_id {background:#fff url(../images/ico_login_id.gif) 15px 50% no-repeat}
.login_MD .loginFrm .login_pw {background:#fff url(../images/ico_login_pw.gif) 15px 50% no-repeat}
.login_MD .loginFrm a.loginok{position:relative;width:100%;height:65px;display:block;line-height:65px;margin:0px 0 5px 0;text-align:center;background:#007dde;font-weight:600;color:#fff; cursor: pointer;}
.login_MD .loginFrm a.loginok span{font-size:18px !important;}

.login_MD .join_idpw_w {width:100%;min-height:40px;padding:0px 0 6px 0;}
.login_MD .join_idpw_w .addlink {float:left;padding:5px 0;height:22px;}
.login_MD .join_idpw_w .addlink input[type="checkbox"] {display: none;}
.login_MD .join_idpw_w .addlink input[type="checkbox"] + label {float:left; width:20px;height:20px; background: #fff; cursor: pointer;border:1px solid #e2e2e2; }
.login_MD .join_idpw_w .addlink input[type="checkbox"]:checked + label {background:url(../images/login_new/check_f.png) #009e96 no-repeat center; float: left}
.login_MD .join_idpw_w .addlink input[type="checkbox"] + label span {position: absolute; left:30px; display: block;line-height:21px;font-size:15px;color:#666;letter-spacing:-1px;}

.login_MD .join_idpw_w .idpw_search{float:right;margin-top:7px;color:#666;overflow:hidden}
.login_MD .join_idpw_w .idpw_search li{padding:0 2px;display:inline-block;font-size:15px;line-height:15px;vertical-align:top;}
.login_MD .join_idpw_w .idpw_search li a{font-size:15px;color:#666;letter-spacing:-1px;}

.login_MD .btns{position:relative;background:#fff;padding:6px 6px 2px 6px;text-align:center;border:1px solid #e2e2e2;}
.login_MD .btns img {position:absolute; top:12px; right:10px; }

.slog_sns_lst{padding-left:50px;}
.slog_sns_lst .tp{display: inline-block; width: 40px; height: 40px; background: no-repeat left top;margin:0 2px;}

.join_w{position: relative;width: 100%;display: block;border-top:1px solid #e8e8e8;margin:40px 0;padding-top:40px;text-align:center;}
.join_w p{font-size: 17px; line-height:20px;margin-bottom:20px;}
.join_w .join_btns {display:block;width:120px;background-color:#767676;text-align:center;padding:8px 3px 7px 2px;margin:0 auto;}
.join_w .join_btns::after {content:"";display:block;clear:both;height:0;}
.join_w .join_btns span {display:inline-block;color:#fff;font-size:15px;line-height:20px;font-weight:600;letter-spacing:-1px;margin-right:17px; }
.join_w .join_btns img {width:10px;height:16px;vertical-align:middle;margin-bottom:3px}
.newLoginMid {display: flex; justify-content: space-between;}
.login_divide {width: 1px; background: #ddd; margin: 0 10px; }
.login_ML {display: flex; align-items: center;}
.login_ML a img {width: 100%;}
.login_ML {
	position: relative;
	width: 100%;
	max-width: 485px;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	user-select: none;
}

.slider-track {
	display: flex;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: grab;
	will-change: transform;
}

.slider-track.dragging {
	transition: none;
	cursor: grabbing;
}

.slider-item {
	min-width: 100%;
}

.slider-item a {
	display: block;
	width: 100%;
}

.slider-item img {
	width: 100%;
	height: auto;
	display: block;
	pointer-events: none;
	border-radius: 16px;
}
/* Prev / Next buttons */
.slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	border: 1.5px solid #e0e0e0;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0,0,0,0.10);
	transition: background 0.18s, box-shadow 0.18s;
	z-index: 10;
	font-size: 13px;
	color: #555;
}

.slider-btn:hover { background: #f5f5f5; box-shadow: 0 3px 10px rgba(0,0,0,0.15); }
.slider-btn.prev { left: 8px; }
.slider-btn.next { right: 8px; }

@media (max-width:750px){
	#newLoginWrap .loginArea_w .newLoginTop {padding-top:10%;}
	.login_MD {width:100%;border-right:none;}
	.login_divide, .login_ML {display: none;}
	.join_w{padding-top:20px;margin-top:50px;}
}
@media (max-width:450px){
	#newLoginWrap {padding-top:0;}
	#newLoginWrap .loginArea_w {padding:15px 15px;border:none;}
	#newLoginWrap .loginArea_w .newLoginTop {padding-top:10%;}
	#newLoginWrap .loginArea_w .newLoginTop a img{width:50%;}
	.join_w{padding-top:20px;margin-top:50px;}
	.join_w p{font-size: 15px; }
}

/* ------------------------------ */
#reLoad:focus {
	outline: -webkit-focus-ring-color auto 2px;
}

/* 웹 접근성 조치 start */
.id_save { float: left; margin-top: 5px; color: #666; }
.id_save li { font-size: 15px; line-height: 15px; vertical-align: top; }

.saveIdLabel { line-height: 21px; font-size: 15px; color: #666; letter-spacing: -1px; vertical-align: top; }
#saveEdunetId { width: 20px; height: 20px; background: #fff; cursor: pointer; border: 1px solid #e2e2e2; padding: 0px; vertical-align: auto; }

.login_MD .join_idpw_w { padding-bottom: 3px; min-height: 35px; }

#newLoginWrap input[type=checkbox] { appearance: none; display: inline-block; border: 1px solid #e5e5e5; border-radius: 1px; }
#newLoginWrap input[type=checkbox]:checked { background-color: #fff; color: var(--st-main-color); border: 1px solid var(--st-main-color); font-size: 16px; line-height: 18px; text-align: center; overflow: hidden; }
#newLoginWrap input[type=checkbox]:checked:before { content: "\2714" }

#newLoginWrap .idpw_search { overflow: initial; }
#saveEdunetId:focus-visible { outline-offset: 0px; }
#loginBtn:focus-visible { outline-offset: -1px; }

#txtPwd { margin-bottom: 3px; }

.slog_sns_lst .tp { border: 0;  cursor: pointer; }

.sns_arrow {
	width: 22px;
	height: 25px;
	background: url(../images/login_2021/btn_join_arrow.png) no-repeat center 3px;
	border: 0px;
	float: right;
	margin: 5px 3px 0 0;
}
/* 웹 접근성 조치 end */

.customAlert { padding: 35px 45px; color : black; }

#socialDiv { display: block; position: relative; cursor: pointer; }

#socialDiv span { position: absolute; top: 12px; left: 10px; font-size: 16px; text-align: left; }

.login_MD .btns {border: none; padding: 0;}
.login_MD .btns .btn {border: 1px solid #e2e2e2; padding: 6px; box-sizing: border-box; width: 100%; cursor: pointer; line-height: 1;}
.login_MD .btns .btn span {display: inline-block; font-size: 16px;}
.login_MD .btns .slog_sns_lst {display: inline-block; vertical-align: middle;}
.login_MD .btns .slog_sns_lst .tp {width: 30px; height: 30px; background-size: cover;}
.login_MD .btns .slog_sns_lst .tp.tp04 {background-image: url(../images/onepass/ico_WF_BtnLogin.png); background-size: auto; background-position: center;}

.slog_sns_lst .tp{display: inline-block; width: 25px; height: 25px; background: no-repeat left top;}
.slog_sns_lst .tp.naver{background-image: url(../images/login_2021/ico_sns01.png);}
.slog_sns_lst .tp.kakao{background-image: url(../images/login_2021/ico_sns02.png);}
.slog_sns_lst .tp.google{background-image: url(../images/login_2021/ico_sns03.png);}

/* CAPTCHA */
.captcha_section {border: 1px solid #e2e2e2; padding: 10px;}
.captcha_txt {background: #f5f6f7; color: #666; font-size: 13px; padding: 10px 15px; clear: both; }
.captcha_txt .c_blk{color: #333;}
.captcha_txt .fwb{font-weight: 600; margin-bottom: 5px;}
.captcha_area {clear: both; display: block; margin-top: 10px;}
.captcha_lt,.captcha_rt {display: inline-block; width: auto; min-width: 150px; vertical-align: middle;}
.captcha_lt .img {width: 100%; display: block; height: 60px; border: 1px solid #e2e2e2; box-sizing: border-box; text-align: center; line-height: 60px;}
.captcha_lt .img img {display: inline-block; vertical-align: middle; max-width: 100%; max-height: 60px; margin-top: -5px;}
.captcha_rt {width: calc(100% - 157px); min-width: 0;}
.captcha_rt .capt_lst {display: block; padding-bottom: 5px;}
.captcha_rt	.capt_lst .tp {display: inline-block; font-size: 14px}
.captcha_rt	.capt_lst .tp.tp01 .txt {height: auto; border: none;  background: no-repeat 5px center; background-size: 19px; background-image: url(../images/login_new/ico_capt_lst01.png); color: #767676; padding: 0 0 0 29px; margin: 0;}
.captcha_rt	.capt_lst .tp.tp02 {float: right;}
.captcha_rt .capt_lst .tp .captcha_time {color: #007dde; font-weight: bold; font-size: 14px;}
.captcha_rt .captcha_input .input {margin: 0; padding: 5px; height: 30px;}
@media (max-width: 370px) {
	.captcha_rt {width: 100%;}
}

.newLoginBtm {width: 100%;text-align: center;color: #666;font-size: 11px;padding: 30px 0;}

/* -------------------------------------------------------------------------------------------------------------------- */
/* 로그인 페이지 15/11/26 */
/* 2025.03.05 기존 다른 css 파일에 있던 것 옮겨옴. 필요없는 부분 수정 및 삭제필요 */
/* -------------------------------------------------------------------------------------------------------------------- */

#newLoginWrap .loginArea {width:990px;height:auto;margin:0 auto;padding-top:20px}
.newLoginTop {width:100%;padding-top:60px;overflow:hidden}
.newLoginTop h1 {width:100%;text-align:center;margin-bottom:25px}
.newLoginTop p.subTit {font-size:13px;color:#666;width:100%;text-align:center}
.newLoginBtm {width:100%;text-align:center;color:#666;font-size:11px;padding:30px 0}

.newForPwd .loginArea .newLoginMid{ background-image:url(/images/bg_pwd.png); }
.newForPwd .loginArea .loginSec{ height:520px; width:860px; }
.newForPwd .loginArea .keyTit{ padding-left:75px; color:#666; padding-bottom:15px; }
.newForPwd .loginArea .keyTit span{ color:#c84e0b; }
.newForPwd .loginArea .loginCon{ width:740px; float:left; margin-left:75px; }
.newForPwd .loginArea .pwdArea{ border-bottom:1px dashed #ccc; padding-bottom:12px; }
.newForPwd .loginArea .pwdArea li label{ background:url(/images/bu_orgarr.gif) no-repeat left center; padding-left:10px; position:absolute; left:0; top:0; width:135px; color:#565656; font-weight:600; letter-spacing:-1px; font-size:13px; line-height:24px; }
.newForPwd .loginArea .pwdArea li input{ border:1px solid #ccc; width:200px; height:20px; }
.newForPwd .loginArea .pwdArea li{ padding-left:145px; position:relative; padding-bottom:8px; }
.newForPwd .loginArea .pwdArea li span{ display:inline-block; *display:inline; *zoom:1; padding-left:5px; color:#666; font-size:12px; letter-spacing:-1px; line-height:20px; font-weight:600; }
.newForPwd .loginArea .pwdArea li span strong{ color:#c84e0b; }
.newForPwd .loginArea .pwdArea li p{ display:block; color:#666; font-size:12px; letter-spacing:-1px; line-height:20px; padding-top:5px; }
.newForPwd .loginArea ul.addtxt li{ padding-left:8px; background:url(/images/bu_sqdot.gif) no-repeat left 7px; padding-bottom:12px; }
.newForPwd .loginArea .btns{ width:100%; text-align:center; }
.newForPwd .loginArea .txtbtn{ display:inline-block; height:38px; background:url(/images/bg_bbsbtn.gif) no-repeat right 0; padding:0 16px 0 0; *display:inline; *zoom:1; margin-right:10px; }
.newForPwd .loginArea .txtbtn img{ background:url(/images/bg_bbsbtn.gif) no-repeat left 0; height:20px; padding:9px 10px 9px 16px; float:left; }
.newForPwd .loginArea .txtbtn span{ font-size:14px; font-weight:600; color:#333; display:inline-block; padding-top:10px; *display:inline; *zoom:1; }

@media all and (min-width:870px) and (max-width:1000px) {
	#newLoginWrap .loginArea {width:98%;margin:0 auto}
}

@media all and (min-width:680px) and (max-width:869px) {
	#newLoginWrap .loginArea {width:98%;margin:0 auto}
}

@media all and (min-width:500px) and (max-width:679px) {
	#newLoginWrap .loginArea {width:98%;margin:0 auto}
	.newLoginTop {width:100%;padding-top:10px;overflow:hidden}
	.newLoginTop h1 {width:100%;text-align:center;margin-bottom:15px}
	.newLoginTop p.subTit .br {display:block;}
}

@media all and (min-width:432px) and (max-width:499px) {
	#newLoginWrap .loginArea {width:98%;margin:0 auto}
	.newLoginTop {width:100%;padding:0;overflow:hidden}
	.newLoginTop h1 {display:block;width:100%;text-align:center;margin-bottom:15px}
	.newLoginTop p.subTit .br {display:block;}
}

@media all and (min-width:369px) and (max-width:431px) {
	#newLoginWrap .loginArea {width:90%;margin:0 auto}
	.newLoginTop {width:100%;padding:0;overflow:hidden}
	.newLoginTop h1 {width:100%;text-align:center;margin-bottom:15px}
	.newLoginTop p.subTit .br {display:block;}
}

@media all and (min-width:321px) and (max-width:368px) {
	#newLoginWrap .loginArea {width:90%;margin:0 auto}
	.newLoginTop {width:100%;padding:0;text-align:center;overflow:hidden}
	.newLoginTop h1 {width:100%;text-align:center;margin-bottom:15px}
	.newLoginTop p.subTit .br {display:block;}
}

@media all and (max-width:320px){
	#newLoginWrap .loginArea {width:90%;min-width:306px;margin:0 auto}
	.newLoginTop {width:100%;padding:0;overflow:hidden}
	.newLoginTop h1 {width:100%;text-align:center;margin-bottom:15px}
	.newLoginTop p.subTit .br {display:block;}
}