@charset "UTF-8";

/*UL,OL*/
ul, ol{list-style:none;}

/*HYPER*/
a:link{text-decoration:none; color:#000;}
a:visited{text-decoration:none; color:#000;}
a:hover{text-decoration:none; color:#000;}
a:active{text-decoration:none; color:#000;}

/*FONT*/
@font-face{font-family:'Noto Thin';font-style:normal;src:url(../font/NotoSans-Thin.woff) format("woff")}
@font-face{font-family:'Noto Light';font-style:normal;src:url(../font/NotoSans-Light.woff) format("woff")}
@font-face{font-family:'Noto Regular';font-style:normal;src:url(../font/NotoSans-Regular.woff) format("woff")}
@font-face{font-family:'Noto Medium';font-style:normal;src:url(../font/NotoSans-Medium.woff) format("woff")}
@font-face{font-family:'Noto Bold';font-style:normal;src:url(../font/NotoSans-Bold.woff) format("woff")}
*{font-family: 'Noto Light';}

/*BACKGROUND*/
body.login{background: url(../images/login/bg-service.png) no-repeat center center;background-size:cover;}

/*CONTENTS*/

.wrap{width:1240px;height:430px;margin: 230px auto 205px;box-sizing:border-box;text-align: left;}
.text-box{text-align: left;display: inline-block;vertical-align: top;width: 50%;word-break: keep-all;}
.text-box span.logo{font-size:40px;font-family: 'Noto Medium';color:#000;line-height: 1.2;font-weight: normal;display: block;margin-bottom:15px;}
.text-box p{font-size:50px;font-family: 'Noto Regular';color:#000;letter-spacing: -2.5px;line-height: 1.15;margin-bottom: 15px;}
.text-box strong{color:#fff;font-family: 'Noto Medium';font-size:35px;font-weight: normal;display: block;line-height: 1.2;margin-bottom: 5px;}
.text-box strong i{font-style: normal;color:#fff;font-family: 'Noto Medium';font-size:35px;font-weight: normal;display: inline-block;line-height: 1;position: relative;top: -3px;}
.text-box span.sub-title{font-size:14px;color:#ababab;display: block;}

.login-box{width:38%;display: inline-block;vertical-align: top;background: #fff;border-radius: 10px;padding:35px 40px;box-sizing: border-box;margin-left: 11.5%;position: relative;margin-top: 0px;}
.login-box > strong{font-size:25px;color:#3e3e3e;font-family: 'Noto Bold';font-weight: normal;display:block;margin-bottom: 20px;}
.login-box .whatiscode{position: absolute;top: 35px;right:40px;}
.login-box .whatiscode > a{font-size:14px;color:#003089;font-family: 'Noto Regular';font-weight: 600;padding-bottom: 3px;border-bottom: 1px solid #003089;}
.login-box .whatiscode:after{content:'';width:25px;height:25px;background: url('../images/login/quesicon.png') no-repeat center;display: inline-block;vertical-align: top;margin-top: 2px;margin-left: 5px;}
.login-box ._inputArea{margin-bottom: 15px; position:relative;}
.login-box ._inputArea > select,
.login-box ._inputArea > input{width:100%; background: transparent; height: 60px;border-left:0;border-right:0;border-top:0;border-bottom:1px solid #cdcdcd;padding-left:70px;box-sizing: border-box;color:#4f4f4f;font-family: 'Noto Regular';font-weight: lighter;}
.login-box ._inputArea > select{padding-left:0; text-indent:70px;}
_:-ms-fullscreen, :root .login-box ._inputArea > select { padding-left:70px;} /* ie hack*/
.login-box ._inputArea .pass-btn{position: absolute; right:17px; top:20px; text-indent:-9999px; display:block; width:26px; height:18px; background: url(./../images/contents/icon-eye-off.png) no-repeat;}
.login-box ._inputArea.on .pass-btn,
.login-box ._inputArea:hover .pass-btn,
.login-box ._inputArea:focus .pass-btn{background: url(./../images/contents/icon-eye-on.png) no-repeat;}

.login-box ._inputArea > .agency,
.login-box ._inputArea > ._inputId{background:url('../images/login/idicon.png') no-repeat 20px center;}
.login-box ._passwordW:focus,
.login-box ._passwordW:hover{background:url('../images/login/passicon_on.png') no-repeat 20px center;border-bottom:2px solid #0056f5;}
.login-box ._passwordW{background:url('../images/login/passicon.png') no-repeat 20px center; border-bottom:2px solid transparent;}
.login-box ._inputArea > input._inputPassword{/*background: url(./../images/contents/icon-eye-off.png) 95% center no-repeat;*/}
.login-box ._inputArea > input._inputPassword:focus,
.login-box ._inputArea > input._inputPassword:hover{/*background: url(./../images/contents/icon-eye-on.png) 95% center no-repeat;*/}

.login-box ._employeeW:focus,
.login-box ._employeeW:hover{background:url('../images/login/emp_on.png') no-repeat 20px center;border-bottom:2px solid #0056f5;}
.login-box ._employeeW{background:url('../images/login/emp.png') no-repeat 20px center; border-bottom:2px solid transparent;}

.login-box ._loginSumit{display:block;border:none;background:#00428e;color:#fff;font-size:23px;font-family:'Noto Regular';border-radius: 100px;padding: 16px 0 19px;width: 100%;margin-top: 30px;margin-bottom: 35px;}
.login-box .keep{display: inline-block;vertical-align: top;float: left;}
.login-box .keep label{cursor: pointer;}
.login-box .keep label span{color:#979fa9;font-family: 'Noto Regular';font-size:17px;display: block;white-space: nowrap;padding-left: 35px;margin-top: -1px;}
.login-box .keep input[type="checkbox"] {display:none;}
.login-box .keep input[type="checkbox"] + label {width:25px;height:25px;background:url('../images/login/nonchecked-icon.png') no-repeat center;display: inline-block;float: left;}
.login-box .keep input[type="checkbox"]:checked + label {width:25px;height:25px;background:url('../images/login/checked-icon.png') no-repeat center;display: inline-block;float: left;}
.login-box .keep input[type="checkbox"]:checked + label span{color:#3a6bc7;}

.login-box .change{display: inline-block;vertical-align: top;float: right;padding-right: 23px;position: relative;}
.login-box .change:after{content:'';background: url('../images/login/gray-arrow.png') no-repeat center;width:20px;height:20px;position: absolute;top: 3px;right: 0px;}
.login-box .change input{color:#666;background: none;border:none;font-family: 'Noto Light';border-bottom: 1px solid #666;font-size: 17px;padding-bottom: 5px;display: inline-block;}

.footer{background: #16181d;padding:40px 0 40px;box-sizing: border-box;text-align: center;}
.footer p{color:#ababab;text-align: center;}

/*RESPONSIVE*/
@media only screen and (max-width:1241px){
  .wrap{width:100%;}
}

@media only screen and (max-width:1023px){
.text-box{width:44%;}
.text-box span.logo{font-size:22px;}
.text-box p{font-size:42px;}
.text-box strong{font-size:22px;}
.text-box strong i{font-size:22px;}
.login-box{width:44%;}
}

@media only screen and (max-width:767px){
.wrap{margin:120px auto 105px;padding:0 25px;height: auto;}
.text-box{width:100%;display: block;margin-bottom: 50px;}
.login-box{width:100%;display: block;margin-left:0;padding:35px 40px 60px; margin-top:0;}
}

@media only screen and (max-width:480px){
.wrap{margin: 50px auto 55px;}
.text-box p{font-size:20px;letter-spacing: 0;font-family: 'Noto Light';}
.text-box strong{font-size:18px;}
.text-box strong i{font-size:18px;}

.login-box{padding: 35px 20px 10px;}
.login-box > strong{font-size:20px;margin-bottom: 40px;}
.login-box .whatiscode{top:60px;right:20px;}
.login-box .whatiscode a{font-family: 'Noto Light';font-size:13px;}
.login-box .whatiscode:after{display: none;}

.login-box ._inputArea > input{padding-left:60px;}
.login-box ._inputArea > input,
.login-box ._inputArea > input:focus,
.login-box ._inputArea > input:hover{background: none !important;font-size: 14px;height: 50px;}

.login-box ._loginSumit{font-size:18px;padding:10px 0 13px;margin-top: 20px;margin-bottom: 25px;}

.login-box .keep{float:none;display: block;height: 28px;margin-bottom: 10px;}
.login-box .keep input[type="checkbox"] + label,
.login-box .keep input[type="checkbox"]:checked + label{width:20px;height:20px;background-size:cover;}
.login-box .keep label span{font-size: 13px;padding-left: 28px;padding-top: 3px;}
.login-box .change{float:none;display: block;text-align: left;position: absolute;bottom: 28px;right: 0;}
.login-box .change input{font-size: 12px;padding-bottom: 3px;}
.login-box .change:after{display: none;}

.footer p{font-size:15px;}
}