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

.login-wrap #__nuxt{height:100%;}

/* layout */
html.login {
    background-color: #fafbfc;
}
/* .login{position:relative} */
.login body {
    background-color: transparent;
}
.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;
    cursor: pointer;
}
.login select::-ms-expand {
    display: none;
}

/* logo */
.logo {
    padding-top: 20px;
    text-align: center;
}
.login .watv-logo{overflow:hidden; width:80px; height:21px; margin:0 auto; background-image:url('/images/logo-watv.svg'); background-repeat:no-repeat; background-size:100%; vertical-align:middle; top:-3px; position:relative;}
.site-name{font-size:24px; font-weight:600; position:relative; margin-left:2px}
.logo a {
    display: inline-block;
}
.logo .site-logo img {
    width: 120px;
    height: 50px;
}
.logo .site-logo img:lang(en),
.logo .site-logo img:lang(es) {
    width: 200px;
}
.logo .site-logo img:lang(ne),
.logo .site-logo img:lang(hi) {
    width: 140px;
}
.logo .site-logo img:lang(mn) {
    width: 180px;
    height: 47px;
}
.logo .site-logo img:lang(vi) {
    width: 150px;
    height: 60px;
}
.logo .site-logo img:lang(pt) {
    width: 240px;
    height: 54px;
}
.login-msg {
    margin-bottom: 24px;
    font-size: 14px;
    color: #888;
    text-align: center;
}
@media (min-width: 768px) {
    .logo {
        padding-top: 20px;
    }
    .login-msg {
        margin-bottom: 34px;
        font-size: 15px;
    }
    .site-name{font-size:32px; top:-1px}
    .login .watv-logo{top:-6px}
}

/* 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; background:white}
.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:#00CC66; 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:'\e82d'; font-family:'fontello'; display:inline-block; width:24px; height:24px; position:absolute; top:0; left:0; background:#fff; border-radius:20px; border:2px solid #ccc; display:flex; align-items:center; justify-content:center; font-size:12px; color:#ccc;}

.login .id-check input[type=checkbox]:checked+label:before{color:#00CC66; border-color:#00CC66;}

.login .btn-login{width:100%; height:54px; font-size:18px; font-weight:500; color:#fff; background-color:#00CC66; border-radius:6px}
.login .btn-login:hover{background-color:#00CC66}
@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 .link{font-size:0; text-align:center}
.login .link a{font-size:14px; color:#888}
.login .login-link a:hover{color:#666}
.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}
}

/* 로그인 연속 실패 */
.login .error-msg, .login .error-msg-red, .login .recaptcha-msg{text-align:start}
.login .error-msg{font-size:20px; margin-bottom:20px}
.login .error-msg-red{font-size:15px; color:#FF5174; margin-bottom:5px}
.login .recaptcha-msg{font-size: 16px; color: #FF5174; text-align: center; margin-bottom: 10px}
.login .g-recaptcha{display:inline-block}
.login .w-recaptcha{text-align:center; margin:10px 0}

legend {
    position: absolute;
    overflow: hidden;
    margin: -1px;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
}
.opacity-50{opacity:0.5}

.copyright{font-size:13px; color:#aaa;}
.gothic{font-family:'notokr';}