@charset "utf-8"; 

/* 프리텐다드 variable 지원 브라우저 */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('PretendardVariable.woff2') format('woff2');
}

/* 프리텐다드 variable 미지원 브라우저 (static font) */
@font-face {
  font-family: 'Pretendard';
  src: 
		url('Pretendard-Regular.woff2') format('woff2'),
		url('Pretendard-Regular.woff') format('woff');
  font-weight: 400;
}

/** reset **/
html{width:100%; height:100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button{margin:0; padding:0}
li{list-style-type:none}
img,fieldset,legend{border:0}
label,button{cursor:pointer}
hr,legend{display:none}


/** 본문공통 **/
body,h1,h2,h3,h4,input,button{margin:0; padding:0; color:#555; font-size:62.5%; font-family:'Pretendard Variable', 'Pretendard', '맑은 고딕', '맑은고딕', malgun gothic, '돋움', Dotum, '굴림', Gulim, Helvetica,'Apple SD Gothic Neo', AppleGothic, Arial, Sans-serif;  -webkit-font-smoothing: antialiased;  -webkit-text-size-adjust: 100%;  -moz-text-size-adjust: 100%;}
body{background:#fff;word-break:break-all;overflow-wrap: break-word;}

a:link{text-decoration:none; color:#777;}
a:visited{text-decoration:none; color:#777;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
a:focus{text-decoration:none;}

.pc-only {display:block;}

.color-white {color:#fff;}
.color-blue {color:#0038a3}
.color-red {color:#e74c3c}
.bold600 {font-weight: 600;}
.underline {text-decoration: underline;}

.mark{position: relative;  padding-left: 1rem;  text-indent: -0.85rem;}
.mark:before{content:'※';margin-right: 0.3rem;}

.hidden{display:block; position:absolute; overflow:hidden; top:-1000em; left:0}

/** 레이아웃 **/
/* 국문용 */
.wrapper {padding-right: max(1rem, 5.12821vw); padding-left: max(1rem, 5.12821vw);}
#wrapper{font-size:1rem; max-width:1060px; margin:0 auto; padding-top: clamp(3.2rem, 5vmax, 11rem);  padding-bottom: clamp(6rem, 5vmax, 20rem);} /*max-width:900px;*/
#header{text-align: center;padding:clamp(1rem, 1.2vmax, 4.8rem)}
#header h1 {color:#1d1d1d;font-size:3rem;font-weight:700;}
#header h1 span {color:#3367d6}
#header p {padding:1rem 0 0 0}
#container{border:1px solid #e1e3e5; background:#fff; max-width:1060px; margin-bottom:10px;border-radius: max(1rem, 0.625vw); box-shadow: 0 2px 6px 0 rgba(129,135,142,.1); box-sizing:border-box;transition:border 0.5s ease-in;} /*max-width:900px;*/
/* #container{*zoom:1;} */
#container:hover {border:1px solid #3367d6}
#container:after{content:""; display:block; clear:both}
#contain {margin:0}
#yulogin {border-top:1px solid #e5e5e5; background:transparent; padding:0 70px;}
#footer{color:#1c1c21; font-size:0.92em; padding:1rem 0; display: flex; align-items: center; justify-content: space-between;}

/** 로그인 **/
.logintype_sel{width:100%; margin:40px 0 75px 0; font-size:1.14rem; font-weight: 700;}
.logintype_sel ul {border-bottom:1px solid #e5e5e5;display: flex;padding:0 69px;}
.logintype_sel ul li {width: calc(100%/2); height:40px; text-align:center; display:block;transition:color 0.5s ease-in;}
.logintype_sel ul li.on {background:#fff; color:#3367d6; border-bottom:1px solid #3367d6}
.logintype_sel ul li.on a {color:#3367d6;transition:color 0.5s ease-in;}
.logintype_sel ul li:hover {color:#3367d6;text-decoration: none;border-bottom:1px solid #3367d6;}
.logintype_sel a {display:block;}
.logintype_sel a:hover {color:#3367d6;font-weight: 700; text-decoration: none;}

#login-box-container {display:flex;margin:0 69px;justify-content: center;}
#login-box-container > div {width:calc(100% / 2)}
#login-box-container > .login-img {background:transparent;display:flex;justify-content:center;}
/* #login-box-container > .login-img > p > img {width:240px;} */
#logintype_idpw{width:auto;}/* padding:0 0 0 30px */
#logintype_idpw form{overflow:hidden;width:100%}
#logintype_idpw .field_wrap{overflow:hidden;position:relative}
.uid, .upw{width:100%;height:48px;border:1px solid #ccc; margin-bottom:0.8rem; border-radius: 0.6rem;box-sizing: border-box;} /*width:378px; height:46px;*/

#userId{border-bottom:none; background-position:10px -262px; background:#fff url(../image/txt_id_ko-2026.gif) no-repeat 11px 13px; ime-mode: disabled}
#userPwd{background:#fff url(../image/txt_pw_ko-2026.gif) no-repeat 11px 13px}
#userId.on, #userPwd.on {background-image:none}
#userId, #userPwd{width:calc(100% - 15px);height:32px; border:0; font-size:1.2rem;color:#333}
#userId[type="text"] {padding:7px 4px 7px 11px;border-radius: 0.6rem;}
#userPwd[type="password"] {padding:7px 4px 7px 11px;border-radius: 0.6rem;}

.check_box{padding:0.6rem 0 2rem 0;font-size:1rem; color:#333; margin:0 0 25px 0}
.check_box input {margin-right:2px}
#saveLoginID, #secureKey[type="checkbox"] {vertical-align:middle}

#logintype_idpw .btn input{width:100%; padding:1.125rem 0; border:0; border-radius:0.6rem; background:#3367d6; color:#fff; font-size:1.125rem; font-weight:600; margin-bottom:4px; cursor:pointer; transition:background 0.5s ease-in;}
#logintype_idpw .btn input:focus, #logintype_idpw .btn input:hover {background:#0038a3;}
#btn_login{display:block}

.form_hidden{position: absolute; left: -9999in; width: 0px; height: 0px; overflow: hidden;}

/* 보안 관련 */
.security-banner {display:flex; align-items: center; gap: 0.6rem; background:rgba(145,194,216,0.15);margin:0 69px 2.5rem 69px;padding:2rem 2rem;border-radius: max(1rem, 0.625vw);} /* margin:0 69px 2rem 69px; */
.security-banner > div {display: flex;}
.security-banner > div.icon {width:120px;}
.security-banner > div.icon > p {margin:0 auto;}
.security-banner > div.info {display: block;}
.security-banner > div.info > .title {font-size:1.125rem; font-weight: 700; color:#1d1d1d; padding:0 0 0.6rem 0}
.security-banner > div.info > .title span {display: inline-block; background:#1C1C21; border-radius:0.6rem; padding:0.25rem 0.5rem 0.25rem 0.5rem; margin:0 0.3rem 0 0; color:#fff}
.security-banner > div.info > ul > li {line-height:1.5rem;}

/*  아이디/비밀번호 찾기 */
.btn-help-box {padding-top:max(0, 3rem); padding-bottom:3rem; margin:0 69px; display:flex;} /* border-top:#d9d9d9 1px solid */
.btn-help-wrap {display: flex; border-right:1px solid #e5e5e5;}
.btn-help-wrap > .icon {min-width:32px; padding:0 0.75rem;}
.btn-help-wrap > .icon img {width:32px;padding:0.25rem 0 0 0}
.btn-help-wrap:last-child {border:0;padding:0 0 0 1.6rem}
.btn-help-wrap{width:calc(100% - 1.6rem);}
.btn-help-wrap > .btn-help > p {font-size:0.92rem; line-height:1.5em; margin-bottom:18px}
.btn-help > ul {display:flex;flex-wrap:wrap;}
.btn-help > ul > li{display: inline-flex;color:#3367d6}
.btn-help > ul > li > a {color:#3367d6; font-weight:600; display:block; padding-right:12px; margin-right:1.6rem; background:url('../image/icon_arr_blue.gif') right 50% no-repeat}
.btn-help > ul > li > a {position: relative;color: #3367d6;text-decoration: none;}
.btn-help > ul > li > a:after {content: "";position: absolute;left: 0;bottom: -1px;width: 0;height: 1px;background: #3367d6;transition: width 0.5s ease;}
.btn-help > ul > li > a:hover:after {width: calc(100% - 0.675rem);}

.btn_help_box {border-top:#d9d9d9 1px solid; padding:22px 0 30px 0; margin:0 69px; display:flex;}
.btn_help_type1:last-child {border:0;padding:0 0 0 20px}
.btn_help_type1{width:calc(100% / 2);border-right:1px solid #d9d9d9;}
.btn_help_type1 > p {font-size:0.92rem; line-height:1.5rem; margin-bottom:18px}
.btn_help_type1 > ul > li{float:left; color:#3367d6}
.btn_help_type1 > ul > li > a {color:#3367d6; display:block; padding-right:12px; margin-right:20px; background:url('../image/icon_arr_blue.gif') right 33% no-repeat}

/* 개별 로그인 링크 */
.login_home{padding:30px 0;}
.box1_table{margin:0 auto; display:table}
.box1_table:after{content:""; display:block; clear:both}
.box1 {display:flex;}
.box1 > .box1-inner {display:flex; width: 100%; align-items: center; justify-content: center; flex-direction: column;}
.box1 > .box1-inner > .btn_box {width:100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: center; flex-direction: row;}
.box1 > .box1-inner > .btn_box ul {width:100%;margin:0 auto;display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.box1 > .box1-inner > .btn_box ul > li {display:inline-flex; margin:0.3rem; border-radius:0.6rem; background:#11244c; border:1px solid #11244c; color:#fff; font-size:1.125rem; font-weight:600; text-align:center;transition: all 0.5s ease-in;}
.box1 > .box1-inner > .btn_box ul > li:hover, .box1 > .box1-inner > .btn_box li:focus {background:#0038a3;border:1px solid #0038a3;}
.box1 > .box1-inner > .btn_box ul > li a {color:#fff; display:block; padding:0.8rem 1.25rem}
.box1 > .box1-inner > .btn_box ul > li a:hover {color:#fff;text-decoration:none;}
.box1 > .box1-inner > .btn_box ul > li span {font-size:0.92rem}
.box1 > .box1-inner > .btn_box ul > li.wbtn {background:#fff; border:1px solid #11244c; color:#11244c;}
.box1 > .box1-inner > .btn_box ul > li.wbtn:hover {background:transparent;box-shadow: inset 0 0 0 2px #3367d6;}
.box1 > .box1-inner > .btn_box ul > li.wbtn a {color:#11244c}
.help_box{width:100%; border-top:1px solid #e6e6e6; padding-top:1.6rem; margin: 2rem 0 0 0}
.help_box:after{content:""; display:block; clear:both}

ul.help{line-height:23px; margin:0 10px}
ul.help li {position:relative; padding-left:8px; color:#11244c}
ul.help li:before{width:3px; height:3px; background:#3367d6; border-radius:100%; left:0; top:calc(11% - 2px); display:block; content:""; position:absolute; }
ul.help2{line-height:23px; margin:0 1rem 1.6rem 1rem}
ul.help2 li {position:relative; padding-left:8px}
ul.help2 li:before{width:3px; height:3px; background:#777; border-radius:100%; left:0; top:calc(11px - 2px); display:block; content:""; position:absolute; }
ul.help2 li.point {color:#11244c}
ul.help2 li.point:before {background:#11244c}

.btn_help_type2{margin:20px 10px 10px 10px}
.btn_help_type2 ul li{float:left; color:#3367d6}
.btn_help_type2 ul li a {color:#3367d6; display:block; padding-right:12px; margin-right:20px; background:url('../image/icon_arr_blue.gif') right 33% no-repeat}
.btn_help_type2:after{content:""; display:block; clear:both;}

/* 푸터 컨텐츠 */
.copyright > p {letter-spacing: 0.025rem;}
.copyright > p span {font-size:0.6rem;}
.footer-list a:nth-child(1) {color:#0d3f7a;font-weight:600;}
.footer-list a:nth-child(2) {padding-left:0.6rem;}

.admin-only {display: block;}
.admin-only ul {display: flex; align-items: center; justify-content: space-between;flex-wrap:wrap;background:#0d3f7a;border-radius:0.6rem;margin-bottom:0.6rem;}
.admin-only ul > li {display: inline-block; font-size:0.92rem;padding:0.5rem 1rem;}
.admin-only ul > li > a {color:#fff}
.admin-only ul > li > a:hover {text-decoration:underline}

/* 로그인 실패 */
#error_box {background:#fff; width:760px; margin:0 69px; font-size:1.3em; color:#333; line-height:1.5em; overflow:hidden}
#error_box .guide {margin:0 110px 40px 110px; font-size:1em; overflow:hidden}
#error_box .guide h2 {font-size:2em; color:#0d3f7a; text-align:center; margin:70px 0}
#error_box .guide h3 {font-size:1em; color:#333; font-weight:normal}

.btn_go {margin:0 auto; overflow:hidden; display:table}
.btn_go li {float:left; display:block; background:#0d3f7a; border:1px solid #0d3f7a; color:#fff; font-size:1.11em; text-align:center; width:368px; height:43px; padding-top:13px}
.btn_go li a {color:#fff; display:block; cursor:pointer}
.btn_go li a:hover {color:#fff}
.btn_go li span {font-size:0.8em}
.btn_go li.wbtn {background:#fff; border:1px solid #0d3f7a; color:#0d3f7a}
.btn_go li.wbtn a {color:#0d3f7a}

.guide_list {border-top:1px solid #e6e6e6; font-size:14px; margin:30px 0; overflow:hidden}

.btn_help_type3{font-size:1em; margin:30px 10px 20px 10px}
.btn_help_type3 ul li{color:#777; line-height:2em; padding-left:18px; margin-right:20px; background:url('../image/ico_arr.gif') 0 3px no-repeat; line-height:1.3em; margin-bottom:10px}

.btn_help_type4{font-size:1.12em; margin:0 auto; display:table}
.btn_help_type4 ul li{float:left; color:#3367d6}
.btn_help_type4 ul li a {color:#3367d6; display:block; padding-right:14px; margin-right:20px; background:url('../image/icon_arr_blue.gif') right 40% no-repeat}
.btn_help_type4:after{content:""; display:block; clear:both;}

#tel_box {border:4px solid #e5e5e5; background:#fff; padding:0 70px}
#tel_box h2 {font-size:1.42em; font-weight:normal; color:#0d3f7a; margin:30px 0}
#tel_box ul.help3 {overflow:hidden}
#tel_box ul.help3>li {float:left; position:relative; padding-left:8px; color:#666; margin: 0 30px 8px 0}
#tel_box ul.help3>li:before{width:3px; height:3px; background:#777; border-radius:100%; left:0; top:calc(11px - 6px); display:block; content:""; position:absolute; }
#tel_box ul.help3>li ul {margin:8px 0; width:100%}
#tel_box ul.help3>li ul li {font-size:0.9em; position:relative; padding:0 8px; margin-bottom:4px; line-height:1.3em}
#tel_box ul.help3>li ul li:before{width:5px; height:1px; background:#777; left:0; top:calc(11px - 6px); display:block; content:""; position:absolute; }

@media screen and (max-width:1920px) {
}

@media screen and (max-width:1280px) {
	.pc-only {display:none !important}

	.btn-help-box {display:block;}
	.btn-help-wrap {width:calc(100% - 54px);margin:0;padding:2rem 1.6rem 1.6rem;border:1px solid #e1e1e1;border-radius: 1rem 1rem 0 0;}
	.btn-help-wrap:last-child {width:calc(100% - 54px);margin:0;padding:1.6rem 1.6rem 2rem;border:1px solid #e1e1e1;border-top:0;border-radius: 0 0 1rem 1rem;}
	.btn-help-wrap > .btn-help > p {margin-bottom:0.35rem;}
}

@media screen and (max-width:1024.98px) {
	#header {text-align: left;padding-left:0}
	#header h1 {font-size:2rem;}
	#header p {padding:0.6rem 0 0 0}

	#login-box-container {margin:0 40px;}
	#logintype_idpw {min-width: 360px;}

	.logintype_sel {margin: 30px 0 50px 0}
	.logintype_sel ul {padding:0 40px;}

	.security-banner {margin:0 40px 2rem 40px;}

	#yulogin {padding: 0 40px;}
	.btn-help-box {margin:0 40px;}
}

@media screen and (max-width :768px) {
	#login-box-container > div {width:100%;display: block;}
	#login-box-container > .login-img {display: none;}
	#logintype_idpw{padding:0}

	.security-banner > div.icon {display:none;}
}

@media screen and (max-width :640px) {
	.wrapper {padding-right: max(1rem, 5.12821vw); padding-left: max(1rem, 5.12821vw);}

	#header h1 {font-size:1.8rem;}
	#header h1 span{display:block}
	
	#login-box-container {margin:0 1.6rem;}
	#logintype_idpw {min-width: unset;}
	.logintype_sel {margin: 2rem 0}
	.logintype_sel ul {padding:0 1.6rem;}
	.check_box {margin:0}
	
	.security-banner {display:none;}

	#yulogin {padding: 0 1.6rem;}
	.btn-help-box {margin:0 1.6rem;}
	.box1 > .box1-inner > .btn_box li {margin:0.25rem;}
	ul.help2 {margin:0 0 1.25rem 0}
}

@media screen and (max-width :600px) {
	#container {border-radius:0.4rem}
	#header p {font-size:0.9rem}
	.uid, .upw {border-radius:0.4rem}
	#userId[type="text"] {border-radius:0.4rem}
	#userPwd[type="password"] {border-radius:0.4rem}
	#logintype_idpw .btn input {border-radius:0.4rem}

	/* .security-banner
	.security-banner > div.info > .title span */
	.box1 > .box1-inner > .btn_box ul > li {border-radius:0.4rem; margin:0.15rem;}

	.btn-help-wrap {width:auto; padding:1rem 0.8rem 1rem 0.8rem; border-radius: 0.4rem 0.4rem 0 0;}
	.btn-help-wrap:last-child {width:auto; padding:0.8rem 0.8rem 1rem; border-radius: 0 0 0.4rem 0.4rem;}

	.btn-help-box {margin:0 1.6rem;width: calc(100% - 3.2rem)}
	.btn-help > ul {flex-wrap: wrap;}
	.btn-help > ul > li {margin-top:0.5rem;}
	.btn-help > ul > li > a {font-size:0.92rem;}

	.help_box {font-size:0.92rem}
	.box1 > .box1-inner > .btn_box ul > li {font-size:1rem;border-radius: 0.4rem;}
}

@media screen and (max-width :480px) {
	#header p {font-size:0.75rem}
	/* .btn-help-wrap > .icon {display:none;} */	
	/* .logintype_sel ul {padding:0 1rem} */	
	.btn-help-wrap {align-items: center;}
	.btn-help-wrap > .icon {padding:0 0.75rem 0 0.25rem}
	.btn-help-wrap > .icon img {width:34px;padding:0.5rem 0 0 0}
	.btn-help-wrap > .btn-help > p {display:none;}

	.btn-help-box {padding-bottom:2.25rem}

	.btn-help > ul > li {width:auto; margin-top:0.3rem;}
	
	.box1 > .box1-inner > .btn_box ul > li {display:block;width:100%;}
	.btn-help > ul > li > a {margin-right:0.4rem}

	#footer {flex-wrap: wrap}
	#footer > div {display: block;width:100%;text-align:center;}
	.copyright > p {letter-spacing: 0rem; font-size:0.9rem; padding-bottom:0.6rem;}
}

@media screen and (orientation: landscape) and (max-height: 1180px) {
	#wrapper {padding-top: clamp(1.6rem, 1.6vmax, 10rem);  padding-bottom: clamp(1.6rem, 2vmax, 10rem);}
}