@charset "utf-8";
html,body {height:100%; height:100%; }
#wrap { position:relative; min-height:100%;}
 h1.logo {position:absolute; left:20px; top:25px; z-index:99;}
#login_container{position:relative; min-width:100%;  min-height:100%;  }

/* login */
.login_area {}
.login_visual {min-width:500px; overflow:hidden;}
.login_visual li img {width:auto; height:100% !important;}
/*.login_visual li div { position:absolute; left:0; top:0; width:100%; height:100vh; background-size:cover; background-position:center top; -webkit-filter:grayscale(100%); mix-blend-mode:luminosity; background-image:url(../img/login/login_bg01.jpg);}*/
.login_visual li div { position:fixed; left:0; top:0; width:100%; height:100%; background: url("../img/login/login_bg01.jpg") no-repeat center top; background-size: cover;  -webkit-filter:grayscale(100%); }
.login_bx {position:absolute; top:50%; left:50%; margin-left:-234px; margin-top: 300px; width:468px; height:374px; background: url(../img/login/login_bx.png) no-repeat center;}

/* language  */
.language {margin:60px 0 0 130px;}
.language span { margin-left:30px; background: url(../img/login/language_bg.png) no-repeat 0 0;}
.language span a {display:inline-block; width:20px; height:20px; font-size:0; line-height:0; color:#fff;}
.language span.bg02 {background-position:-55px 0;}
.language span.bg03 {background-position:-110px 0;}
.language span.bg04 {background-position:-165px 0;}
.language span.bg05 {background-position:-220px 0;}

.language span.on, 
.language span:hover{background: url(../img/login/language_bg.png) no-repeat 0 -30px;}
.language span.bg02.on, .language span.bg02:hover {background-position:-55px -30px;}
.language span.bg03.on, .language span.bg03:hover {background-position:-110px -30px;}
.language span.bg04.on, .language span.bg04:hover {background-position:-165px -30px;}
.language span.bg05.on, .language span.bg05:hover {background-position:-220px -30px;}

.from-area {margin:80px 0 0 80px;}
.from-area li {margin-top:5px;}
.from-area label {width:80px; font-size:14px; font-weight:bold; color:#888888;}
.from-area input[type="text"] {width:220px; height:28px; border:1px solid #dedede; background:#f5f5f5} 
.from-area input.on, 
.from-area input[type="text"]:hover, 
.from-area input[type="text"]:visited, 
.from-area input[type="text"]:active { border:1px solid red; background:#fff} 
.from-area input[type="password"] {width:220px; height:28px; border:1px solid #dedede; background:#f5f5f5; text-indent: 10px;} 
.from-area input.on, 
.from-area input[type="password"]:hover, 
.from-area input[type="password"]:visited, 
.from-area input[type="password"]:active { border:1px solid red; background:#fff}

/*.from-area label:hover, 
.from-area label:visited, 
.from-area label:active */
.from-area label.on{color:red !important;}

/*패스워드변경*/
.login_bx2 {position:absolute; top:50%; left:50%; margin-left:-234px; margin-top:-235px; width:472px; height:461px; background: url(../img/login/login_bx2.png) no-repeat center;}
.login_bx2 .tit{display:block; height:57px; width:400px; margin:30px 0 0 35px; text-align: center; }
.login_bx2 .tit h1{/*line-height: 64px;*/ font-size:24px; padding-top: 30px; }
.login_bx2 .cancelBtn{position: absolute; top: 40px; right: 60px;}

.login_bx2 .from-area {margin:22px 0 0 70px;}
.login_bx2 .from-area 
.login_bx2 .from-area .cor_red{color:red;}

/*패스워드변경02*/
.login_bx3{position:absolute; top:50%; left:50%; margin-left:-234px; margin-top:-186px; width:515px; height:320px; background: url(../img/login/login_bx3.png) no-repeat center;}
.login_bx3 .tit{display:block;height:57px; width:400px; margin:30px 0 0 49px;border-bottom:1px solid  #f5f5f5;}
.login_bx3 .tit h1{/*line-height: 64px;*/ font-size:24px;padding:16px 0 0 100px; }
.login_bx3 .from-area {margin:22px 0 0 80px;}
.login_bx3 .login_btn{border:none;}

.login_bx2 .from-area label, 
.login_bx3 .from-area label {width:130px; font-size:14px; font-weight:bold; color:#888888;}
.login_bx2 .from-area input[type="text"],
.login_bx3 .from-area input[type="text"] {width:190px; }

.rig_none{border-right:none;}
.from-area li input {width:220px ;}

/* check-area */
.check-area {margin:5px 0 0 115px;}

/* login_btn */
.login_btn {padding-top:40px; text-align:center; border-top:1px solid #dedede; margin:40px auto; width:396px; }

/* tool tip */
.login_bx2 .tool_tip,
.login_bx3 .tool_tip {position:absolute; width:300px; background:#fffab0; border:1px solid #e5e19e; padding:15px 10px 15px; }
.login_bx2 .tool_tip span,
.login_bx3 .tool_tip span{position:absolute;  left:100px; bottom:-5px; display:block; width:7px; height:5px; background: url(../img/login/tool_tip_bg.png) no-repeat 0 0;}

/* footer */
#footer {position:absolute; left:0; right:0; bottom:0; height:63px; padding-top:30px;  background: url(../img/login/footer_bg.png) repeat-x 0 0; text-align:center; color:#ccc; font-size:12px;}