/* common */
.blind{position:absolute; overflow:hidden; margin:-1px; width:1px; height:1px; clip:rect(0 0 0 0)}

/* layout */
html.login{background-color:#FAFAFB; height:100%}
.login body{background-color:transparent; height:100%}
.login .wrap{width:100%; height:100%}
.login .contents{max-width:490px; padding:15px; margin:0 auto}
@media(min-width:768px){
  .login .wrap{display:table}
  .login .container{display:table-cell; vertical-align:middle}
}

/* language */
.login .lang{position:relative; text-align:right}
.login .lang select{font-size:13px; min-width:95px; height:30px; line-height:30px; padding:0 25px 0 10px; color:#888; background-color:transparent; border:1px solid #DEE0E3; border-radius:4px; box-sizing:border-box; -webkit-appearance:none; cursor:pointer}
.login .lang::after{content:''; position:absolute; top:12px; right:10px; width:10px; height:6px; background-image:url(../images/login/ico_lang_arrow@2x.png); background-repeat:no-repeat; background-size:100%; cursor:pointer}
.login select::-ms-expand{display:none}

/* logo */
.login h1{padding:20px 0 12px}
.login .logo{display:block; overflow:hidden; width:128px; height:32px; margin:0 auto; background-image:url('../images/login/logo_watv.png'); background-repeat:no-repeat; background-size:100%}
.login .login-msg{margin-bottom:24px; font-size:14px; color:#888; text-align:center}
@media(min-width:768px){
  .login h1{padding:18px 0 16px}
  .login .logo{width:160px; height:40px}
  .login .login-msg{margin-bottom:34px; font-size:15px}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .login .logo{background-image:url('../images/login/logo_watv@2x.png')}
}

/* login form */
.login form{margin-bottom:30px}
.login form input[type=text],
.login form input[type=password]{width:100%; height:48px; padding:5px 18px; margin-bottom:8px; font-size:14px; border:1px solid #DEE0E3; border-radius:6px; -webkit-border-radius:6px; -webkit-appearance:none}
.login form input[type=text]:focus,
.login form input[type=text]:hover,
.login form input[type=password]:focus,
.login form input[type=password]:hover{border-color:#2575F3; transition:all 0.3s ease}

.login input::placeholder{ /* Chrome, Firefox, Opera, Safari 10.1+ */color:#999; opacity:1; /* Firefox */}
.login input:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#999}
.login input::-ms-input-placeholder{ /* Microsoft Edge */color:#999}
.login input[type=text]::-ms-clear{display:none}

.login .id-check{margin-bottom:8px}
.login .id-check input[type=checkbox]+label{display:inline-block; cursor:pointer; position:relative; padding-left:31px; font-size:15px; color:#444; line-height:25px}
.login .id-check input[type=checkbox]+label:before,
.login .id-check input[type=checkbox]:checked+label:before{background-repeat:no-repeat; background-size:24px}
.login .id-check input[type=checkbox]+label:before{content:''; display:inline-block; width:24px; height:24px; position:absolute; top:0; left:0; background-image:url('../images/login/ico_id_check.png'); border:0; background-color:transparent}
.login .id-check input[type=checkbox]:checked+label:before{background-image:url('../images/login/ico_id_checked.png')}

.login .btn-login{width:100%; height:54px; font-size:18px; font-weight:500; color:#fff; background-color:#2575F3; border-radius:6px}
.login .btn-login:hover{background-color:#1565E3}
@media(min-width:768px){
  .login form input[type=text],
  .login form input[type=password]{height:56px; margin-bottom:12px; font-size:16px}
  .login .id-check{margin-bottom:12px}
  .login .btn-login{height:56px; font-size:18px}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .login .id-check input[type=checkbox]+label:before{background-image:url('../images/login/ico_id_check@2x.png')}
  .login .id-check input[type=checkbox]:checked + label:before{background-image:url('../images/login/ico_id_checked@2x.png')}
}

/* footer */
.login .login-link a:hover{color:#666}
.login .link{font-size:0; text-align:center}
.login .link a{font-size:14px; color:#888}
.login .link a::after{content:''; width:1px; height:12px; margin:0 7px; vertical-align:-2px; background-color:#E3E3E3; display:inline-block}
.login .link a:last-child::after{display:none}

.login .footer{font-size:12px; text-align:center; margin-top:40px}
.login .footer p{color:#aaa; margin-bottom:8px}
.login .footer .link a{color:#aaa; font-size:12px}
.login .footer .link a:hover{color:#888}
@media(min-width:768px){
  .login .footer{margin-bottom:48px}
}