@charset "utf-8";
/*----------------------------------------------------
Reset
----------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html{height:100%}
body{height:100%}
body,input,select,textarea,button, thead th{color:#222; line-height:1.4; font-weight:400; letter-spacing:0; font-family:'Roboto', Helvetica, Arial, sans-serif}

a{text-decoration:none; color:#222}/*transition:all 0.3s ease*/
a:hover{text-decoration:none}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block}
dl, ol, ul, menu, li{list-style:none}
i,em,address{font-style:normal;font-weight:normal}
input, select, button, textarea{vertical-align:middle;outline:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
input[type=”button”], input[type=”submit”], input[type="radio"], input[type="checkbox"], /*input[type="text"],*/ button{cursor:pointer;transition:all 0.2s ease}
hr{display:block; visibility:hidden}
strong{font-weight:600}
table{border-collapse:collapse;border-spacing:0; width:100%; text-align:left}
img{border:0;max-width:100%;vertical-align:middle}
fieldset{border:none}
legend{position:absolute; overflow:hidden; margin:-1px; width:1px; height:1px; clip:rect(0 0 0 0)}
body{-webkit-text-size-adjust:100%}
sup{vertical-align:super; font-size:smaller}
sub{vertical-align:sub; font-size:smaller}
button{border:none; background:none; padding:0; margin:0}

input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}


/* IOS input 초기화 */
input, select, button, textarea{-webkit-border-radius:0; /* 모서리 스타일 제거 */ -webkit-appearance:none; /* 인풋내 그림자 제거 */ }


/*----------------------------------------------------
Grid system
----------------------------------------------------*/
@-ms-viewport{width:device-width}
html{box-sizing:border-box; -ms-overflow-style:scrollbar}
*,::after,::before{box-sizing:inherit}

@-ms-viewport{width:device-width}html{box-sizing:border-box;-ms-overflow-style:scrollbar}*,::after,::before{box-sizing:inherit}
.container, .container-fluid{width:90%; /*padding-right:15px; padding-left:15px;*/ margin-right:auto; margin-left:auto}
/* @media (min-width:576px){.container{max-width:100%}} */

@media (min-width:768px){
  .container{max-width:760px}
  .container, .container-fluid{width:100%; padding-left:15px; padding-right:15px}
  .row{margin-left:-15px; margin-right:-15px}
}
@media (min-width:1070px){
  .container{max-width:980px}  
}
@media (min-width:1260px){
  .container{max-width:1140px}
  .container1000{max-width:1000px}
}
@media (min-width:1400px){
  .container{max-width:1280px}
  .container1000{max-width:1000px}

}


/*----------------------------------------------------
Padding
----------------------------------------------------*/
.part-t-05x {padding-top:10px}
.part-b-05x {padding-bottom:10px}
.part-tb-05x{padding-top:10px; padding-bottom:10px}
.part-t     {padding-top:20px}
.part-b     {padding-bottom:20px}
.part-tb    {padding-top:20px; padding-bottom:20px}
.part-t-2x  {padding-top:30px}
.part-b-2x  {padding-bottom:30px}
.part-tb-2x {padding-top:30px; padding-bottom:30px}
.part-t-3x  {padding-top:40px}
.part-b-3x  {padding-bottom:40px}
.part-tb-3x {padding-top:40px; padding-bottom:40px}
@media (min-width: 768px){
  .part-t-05x {padding-top:15px}
  .part-b-05x {padding-bottom:15px}
  .part-tb-05x{padding-top:15px; padding-bottom:15px}
  .part-t     {padding-top:30px}
  .part-b     {padding-bottom:30px}
  .part-tb    {padding-top:30px; padding-bottom:30px}
  .part-t-2x  {padding-top:45px}
  .part-b-2x  {padding-bottom:45px}
  .part-tb-2x {padding-top:45px; padding-bottom:45px}
  .part-t-3x  {padding-top:70px}
  .part-b-3x  {padding-bottom:70px}
  .part-tb-3x {padding-top:70px; padding-bottom:70px}
}
@media (min-width: 1070px){
  .part-t-05x {padding-top:25px}
  .part-b-05x {padding-bottom:25px}
  .part-tb-05x{padding-top:25px; padding-bottom:25px}
  .part-t     {padding-top:40px}
  .part-b     {padding-bottom:40px}
  .part-tb    {padding-top:40px; padding-bottom:40px}
  .part-t-2x  {padding-top:70px}
  .part-b-2x  {padding-bottom:70px}
  .part-tb-2x {padding-top:70px; padding-bottom:70px}
  .part-t-3x  {padding-top:110px}
  .part-b-3x  {padding-bottom:110px}
  .part-tb-3x {padding-top:110px; padding-bottom:110px}
}


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

/* layout */
.login{background-color:#FAFAFB; height:100vh}
.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/ico_lang_arrow@2x.png); background-repeat:no-repeat; background-size:100%; cursor:pointer}
.login select::-ms-expand{display:none}

/* logo */
.gothic{font-family:'NanumSquare';}
.site-name{font-size:24px; font-weight:600; position:relative; margin-left:8px}
.login h1{padding:20px 0 12px; text-align:center}
.login .logo{display:inline-block; overflow:hidden; width:61px; height:15px; margin:0 auto; background-image:url('/images/login/logo_watv.svg'); background-repeat:no-repeat; background-size:contain}
.login .login-msg{margin-bottom:24px; font-size:14px; color:#888; text-align:center}
@media(min-width:768px){
  .login h1{padding:18px 0 16px; scale:1.1}
  .site-name{font-size:32px; top:-1px}
  .login .logo{width:85px; height:21px;}
  .login .login-msg{margin-bottom:34px; font-size:15px}
}

/* 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')}
}

.login .error-msg{font-size:20px; margin-bottom:20px}
.login .error-msg-red{font-size:16px; color:#FF5174; margin-bottom:20px}
.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}

/* 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}
}

/* loader */
.loader{display:block; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; text-align:center; z-index:9999}
.loader > div{margin:0 auto; border-radius:10px; display:inline-block; background:#FFF; box-shadow:0 0 50px 3px rgba(0,0,0,0.1); min-width:280px; min-height:170px; padding-top:30px; position:relative; top:50%; margin-top:-85px}
.load-imgwrap{display:flex; justify-content:center}
.loader img{width:60px}
.loader p{color:#444; font-size:15px; padding-top:20px}
html.loadershow,
html.loadershow body{height:100%; overflow:hidden}
@media(min-width:1070px){
  .loader > div{min-width:350px}
}