@charset "utf-8";

* {padding:0; margin:0 auto}
html, body {height: 100%; overflow: hidden;}
body{font-size:13px;font-weight:400;/*background:linear-gradient(to bottom, #fff9e5 0%, #ffd2a4 100%);*/ background:linear-gradient(#e0edff 40%, #fff 60%);
	border-top:10px #6ba4f6 solid;
	background: linear-gradient(180deg, #fff, #e1edff, #fff, #e1fffa);
	background-size: 400% 400%;
	animation: gradient 5s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,select,button{
	line-height:1.7em;margin:0;padding:0;-webkit-text-size-adjust:none;font-family:'NanumGothic','나눔고딕','돋움', 'Dotum', sans-serif; color:#323d4f;letter-spacing:-0.05em;}

a{color:inherit}
a:link, a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}

ul, ol, li, dl, dt, dd{list-style:none;}
p,form,h1,h2,h3,h4,h5,h6,fieldset,legend{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{line-height:1.2em;}
hr{display:none;}
em{font-style:normal;}

img, form, input, select{border:0 none;vertical-align:middle;}
label, button{cursor:pointer;}
select, textarea, input[type=file], input[type=text],input[type=password]{border:1px #ccc solid;background:#fff;vertical-align:middle; text-indent:50px;border-radius:0;}
select readonly, textarea readonly, input[type=file] readonly, input[type=text] readonly,input[type=password]readonly{border:1px #fff solid;}
input[type=password] {-webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
input[type=button]{cursor:pointer;}
input[type=text]{font-family:'NanumGothic', 나눔고딕, dotum;}
input.radio {border:1px #ccc solid !important;}
label,input[type=radio],input[type=checkbox]{vertical-align:middle;}
input[type=radio]{width:16px;height:16px;border:1px #ccc solid !important;}
input[type="radio"]:checked {background-color:#333 !important;}
input[type=checkbox]{width:14px;height:14px;}
textarea,input[type="text"],input[type="button"],input[type="submit"] {-webkit-appearance: none; border-radius:0;}
table{border-collapse:collapse;width:100%;}
input,button {-webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}

/* Font */
@font-face { font-family:'NanumGothic';
	src: url('NanumGothic.eot'); /* IE9 Compat Modes */
	src:url('NanumGothic.eot?#iefix') format('embedded-opentype'),
	src: local('☺'), url('NanumGothic.woff') format("woff"), /* IE 9, Firefox 3.6+, Chrome 6+ */
	url('NanumGothic.ttf') format("truetype"); /* Safari, Android, iOS */
}

.txt11{ font-size:0.7em !important}
.txt12{ font-size:0.8em !important}
.txt13{ font-size:0.9em !important}
.txt14{ font-size:1em !important}
.txt15{ font-size:1.1em !important}
.txt16{ font-size:1.2em !important}
.pt5{padding-top:5px !important}
.pt10{padding-top:10px !important}
.pt15{padding-top:15px !important}
.pt25{padding-top:28px !important;}
.pl15{padding-left:15px !important}
.pl5{padding-left:5px !important}
.pl10{padding-left:10px !important}
.p15{padding:0 15px 0 15px !important}
.m25{margin-left:25px;margin-top:15px !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb25{margin-bottom:25px !important}

.w110{width:110px !important}
.w50{width:50px !important}
.hidden{position:absolute;top:-10000px;font-size:0;line-height:0;}
.none{display:none !important}

/*align*/
.clear{clear:both;}
.fRight{float:right !important;}
.fLeft{float:left !important;}
.fR{float:right !important;}
.fL{float:left !important;}
.tL{text-align:left !important;}
.tLeft{text-align:left !important;}
.tR{text-align:right !important;}
.tRight{text-align:right !important;}
.tC{text-align:center !important;}
.tCenter{text-align:center !important;}
.vT{vertical-align:top;}
.vM{vertical-align:middle;}

/* font style */
.underline{text-decoration:underline;}
.white{color:#fff !important;}
.gray{color:#5b5a5a;}
.bold{font-weight:bold !important;}
.red{color:#b40a14 !important;}
.red_deep{color:#a70e13;}
.blue{color:#3f63bf !important;}
.orange{color:#e25000 !important;}
.lightgreen{color:#dbe60b !important}
.lightblue{color:#b1d2ff !important}
.darkgreen{color:#009082 !important}
.darkblue{ color:#00214f}
.blue1{color:#cfdffe;}
.sky{ color:#77cdda}
.darkviolet{color:#36009b}
.black{color:#000;}
.eng{font-family:arial;letter-spacing:0}
.big{font-size:20px;font-weight:bold;letter-spacing:-0.05em}

.txtxs{ font-size:0.6em !important}
.txts{ font-size:0.7em !important}

/* form */
caption{display:none;}
fieldset{border:0;}
legend{display:none;}
select, textarea,input[type=text],input[type=file],input[type=password],input[type=email],input[type=search]{display:inline-block;font-size:1em;border:1px #cacaca solid;vertical-align:middle}
select,input[type=text],input[type=password],input[type=email],input[type=search]{height:33px;line-height:33px;}
input[type=file]{height:22px;line-height:22px;padding:8px 0;}
select, option{text-align:center}
.wS{width:50px}
.wM{width:148px}
.wL{width:236px}
.wXL{width:350px}

/*button*/
.btn_area{overflow:hidden; width:100%}
.btn_area ul{ display:inline-block; text-align:center;*display:inline; zoom:1}
.btn_area li{ display:inline-block; float:left; margin:0 2px}
.btn_area.btm_area{margin:30px 0 0 0; text-align:center; display:inline-block}
.btn{text-align:center;text-decoration:none;display:inline-block;*display:inline;vertical-align:middle;zoom:1;}
.btnXS{height:33px;line-height:33px; padding:0;font-size:0.9em; display:inline-block; text-align:center}
.btnS{height:35px;line-height:35px; padding:0 16px;font-size:0.9em;}
.btnM{height:48px;line-height:48px; padding:0 13px;font-size:1em;}
.btnL{height:64px;line-height:64px;  padding:0 52px;font-size:1.2em;font-weight:700;}
.btnL_p{height:59px;line-height:59px;padding:0 32px;font-size:23px;font-weight:700;}
.btnBlack{color:#fff;background-color:#000;}
.btnBlackRe{color:#000;border:1px solid #000 !important;background-color:#fff;}
.btngray{color:#9b9fa7;background:#fff; border:1px #9b9fa7 solid}
.btngray_dark{background:#323d4f; border:1px #262e3c solid; color:#fff}
.btngray_light{color:#727272;border:1px solid #979797;}
.btnRed{color:#b40a14;border:1px solid #b40a14;background-color:#fff;}
.btnblue{color:#fff;border:1px solid #0e4fb1; background:#0e4fb1}
.btn[class*="ico_"]{position:relative;background-repeat:no-repeat;background-position-y:center;}

/* layout */
.wrap{text-align:center; width:736px; position: relative; height:100%; left:50%; margin-left:-368px;}
.wrap .map{ display:inline-block; box-sizing:content-box; width:90%; text-align:center}

.header{width:736px; display:inline-block; position:fixed; background:#f38947; border-radius:10px 10px 0 0; height:70px; z-index:10; left:50%; margin-left:-367px; top:30px;}


/* login */
.header_login{text-align:center; margin:90px 0 0 0; display:inline-block; width:100%}
.header_login .topbg{position:absolute; top:10px; left:0; width:240px; display:none}
.header_login h1{width:100%; position:relative; color:#fff; font-size:1.6em; font-weight:bold; text-align:center; }
.header_login h1 img{ width:340px; z-index:10; position:relative}

.header h1{width:100%; color:#fff; font-size:1.6em; font-weight:bold; text-align:center; }
.header h1 .title{ line-height:70px}
.header h1 .btnback{ position:absolute; left:25px; top:18px}
.header h1 .btnback img{width:16px; margin-top:-3px; padding:5px 8px}

.container_login{ margin:0 auto; text-align:center; width:40%; max-width:650px}
.container_login .loginarea{ display:inline-block; margin:40px 0 20px 0}
.container_login .loginarea li{ display:inline-block; width:100%; margin:5px 0}
.container_login .findinfo{ text-align:center; display:inline-block}
.container_login .findinfo li{ display:inline-block; float:left; border-left:1px #ccc solid; padding:0 14px; color:#7d7d7d; font-size:12px}
.container_login .findinfo li:first-child{ border-left:0}


.footer{text-align:center; width:100%; overflow:hidden; font-size:1em; color:#666; position:relative; margin-top:20px}
.footer img{ width:150px}
.footer .copy{ display:block; color:#848484; text-align:center; margin-top:15px; font-size:.9em}
.footer .version{ display:inline-block; color:#b0b0b0; position:absolute; right:8px; bottom:0; text-align:right; font-size:0.7em}

/* login_Form */
#loginForm fieldset {display:inline-block; border:0; padding:0}
fieldset#body {margin:0; display:inline-block}
#body label {color:#7e7e7e;display:inline-block; line-height:1.4}
#loginForm #body fieldset label {display:inline-block; float:none}
#loginForm #body fieldset input {width:100px; height:17px}
#loginForm input {color:#3a454d;font-weight:bold; font-size:17px; width:100%; height:52px;line-height:52px; border-radius:30em; -webkit-border-radius:30em; -moz-border-radius:30em; -ms-border-radius:30em; -o-border-radius:30em; }
#loginForm input.btnblue{color:#fff; font-size:1.3em; cursor:pointer; border:1px #4d93f8 solid; height:52px; border-radius:30em;-webkit-border-radius:30em; -moz-border-radius:30em; -ms-border-radius:30em; -o-border-radius:30em; background:#6ba4f6; }
#loginForm input.btnblue:hover{background:#4d93f8}

#Form1 select {border:1px solid #899caa;color:#3a454d; font-size:13px}
input:focus {outline:none}
.v_id-label, .v_pw-label{position: absolute;margin: 18px 9px 8px 50px; cursor:text; font-size:1.1em; }
#loginForm input.v_id { background:#fff url(../img/yuhak/ic_id.png) no-repeat 15px 50%; background-size:25px}
#loginForm input.v_pw { background:#fff url(../img/yuhak/ic_pw.png) no-repeat 15px 50%; background-size:25px}

/* 미디어 쿼리*/

/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
##Device = 데스크탑
##Screen = 1281px 이상 해상도 데스크탑
*/

@media (min-width: 1281px) {


}

/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
##Device = 랩탑, 데스크탑
##Screen = 1025px에서 1280px 사이
*/

@media (min-width: 1025px) and (max-width: 1280px) {


}

/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) {

	.wrap{background-size:60%; background-position:50% 310px}
	.header_login{ margin:40px 0 0 0}
	.header_login h1 img{width:230px}
	.container_login {width:28%}
	.container_login .loginarea{margin:25px 0 20px 0}
	.v_id-label, .v_pw-label{margin:12px 9px 8px 50px}
	#loginForm input{height:42px; line-height:42px}
	#loginForm input.v_id{background-size:22px}
	#loginForm input.v_pw{background-size:22px}
	#loginForm input.btnblue{height:42px;}
	.footer img{width:100px}
	.footer .copy{font-size:.6em}

}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.header_login{margin:70px 0 0 0; display:inline-block; width:100%}
	.header_login h1{ position:static; clear:both}
	.header_login h1 img{ width:230px}
	.container_login{width:40%}
	.container_login .loginarea{ margin:30px 0 20px 0}
	input[type=text],input[type=password]{text-indent:40px}
	.v_id-label, .v_pw-label{margin:12px 9px 8px 40px}
	#loginForm input.btnblue{height:42px;}
	#loginForm input{ height:42px; line-height:42px}
	#loginForm input.v_id { background:#fff url(../img/yuhak/ic_id.png) no-repeat 10px 50%; background-size:20px}
	#loginForm input.v_pw { background:#fff url(../img/yuhak/ic_pw.png) no-repeat 10px 50%; background-size:20px}
	.footer img{ width:20%}
	.footer .copy{ margin-top:10px}

}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

@media (min-width: 481px) and (max-width: 767px) {
	.wrap{width:100%; left:0; margin:0;}
	.header_login{margin:70px 0 0 0; display:inline-block; width:100%}
	.header_login h1{ position:static; clear:both}
	.header_login h1 img{ width:230px}
	.container_login{width:40%}
	.container_login .loginarea{ margin:30px 0 20px 0}
	input[type=text],input[type=password]{text-indent:40px}
	#loginForm input.btnblue{height:42px;}
	#loginForm input{ height:42px; line-height:42px}
	#loginForm input.v_id { background:#fff url(../img/yuhak/ic_id.png) no-repeat 10px 50%; background-size:20px}
	#loginForm input.v_pw { background:#fff url(../img/yuhak/ic_pw.png) no-repeat 10px 50%; background-size:20px}
	.v_id-label, .v_pw-label{margin:12px 9px 8px 40px}
	.footer img{ width:20%}
	.footer .copy{ margin-top:10px}
}

/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 320px에서 479px 사이
*/

@media (min-width: 320px) and (max-width: 480px) {
	.wrap{width:100%; left:0; margin:0;}
	.container{min-height:auto;}
	.container_login{ width:60%}
	.header_login{ margin:40px 0 0 0}
	.header_login h1{ position:static; clear:both}
	.header_login h1 img{ width:220px}
	.header h1{ font-size:1.3em}
	.container_login .loginarea{ margin:20px 0}
	input[type=text],input[type=password]{text-indent:45px}
	.v_id-label, .v_pw-label{margin:11px 9px 8px 45px}
	#loginForm input{ height:40px; line-height:40px}
	#loginForm input.v_id{background-size:20px}
	#loginForm input.v_pw{background-size:20px}
	#loginForm input.btnblue{ height:40px; font-size:15px; line-height:40px}
	.footer{ margin-top:5px}
	.footer img{ width:30%}
	.footer .copy{ font-size:.7em}

}