@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

@font-face {
    font-family: 'HallymGothic-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2204@1.0/HallymGothic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

* {
  -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box; 	
}

/* link */
a:link    {text-decoration:none; color:#444;}
a:visited {text-decoration:none; color:#444;}
a:active  {text-decoration:none; color:#444;}
a:hover   {text-decoration:none; color:#0C98F6;}

/* login */
html, body, #wrap, .login-wrap{ height: 100%; overflow-y: hidden;}
.bg-login{background:#556270 url("../images/bg-login-04.jpg") no-repeat; background-size: cover; color:#fff;}
.login-wrap{ display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative}
.login-wrap .loginBox{ max-width:480px; padding: 30px 15px;}
.login-wrap .loginBox a{ color:#fff;}
.login-wrap .login-logo{ text-align: center; margin-bottom: 30px;}
.input-id,.input-pw, .input-tel {
    display: inline-block;
    position: relative;
    padding-left: 20px;
	border: none;
    border: 1px solid rgba(255,255,255,0.1);
    width:100%;
    height: 50px ;
    outline: none;
    border-radius:0px;
	font-size:17px;
	margin-bottom: 15px;
	padding-left: 50px;
	color:#fff;
}
.input-id::placeholder,.input-pw::placeholder{ color:rgba(255,255,255,0.7)}
.input-id{ background:rgba(0,0,0,0.45) url(../images/icon-id.svg) no-repeat 10px center;}
.input-pw{ background:rgba(0,0,0,0.45) url(../images/icon-pw.svg) no-repeat 10px center;  }
.input-id:focus,.input-pw:focus, .input-tel:focus {
    border: 1px solid #0C98F6 !important;
}
.login-wrap .btn-cen{ text-align: center}
.login-wrap .bar{ margin: 0 10px; color:#ccc;}

/* button */
.btn-login, a.btn-login {
	display: inline-block;
	width:100%;
	height: 50px;
	line-height: 50px;
	padding: 0px 5px;
	border-radius:1px;
	text-decoration: none;
	background: #000000;
	color:#fff;
	margin: 20px 0 20px 0;
	text-align: center;
	font-size:19px;
	font-weight: 600;
}
.btn-login:hover,a.btn-login:hover, .btn-login:focus {
  background: #1494EB;color: #fff;
}

.login-copyright{ font-size:14px; margin-top: 15px; color:#fff;  font-family: 'Noto Sans KR', sans-serif !important;}
.login-img{ position: absolute; bottom:5%; right:0; z-index: -1}
@media screen and (max-width: 999px){	
	.login-img{ bottom:0; right: inherit; text-align: center}
	.login-img img{ width:80%}
}

/************** check box **************/
body:not(#foo) .checkBox input[type='checkbox'] {
  opacity: 0; position: absolute;
}

body:not(#foo) .checkBox input[type='radio'] {
  opacity: 0; position: absolute; 	  
}

body:not(#foo) .checkBox .check,.radiobtn {
  width: 24px;
  height: 24px;/*
  margin-left: -20px ;*/
  display: inline-block;
  cursor: pointer;/*
  -webkit-filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  -moz-filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));
  filter: drop-shadow(11px 10px 14px rgba(0,0,0,0.25));*/
  position: relative;
}

.checkBox label span.check {
  background: url(../images/icon-check-off.svg) 0px 0px; margin-right: 3px;
}
.checkBox input[type='checkbox']:checked + label span.check {
  background: url(../images/icon-check-on.svg) 0px 0px; 
}
.checkBox label span.radiobtn {
  background: url(../images/icon-radio-off.svg) 0px 0px; position: relative; top:5px; margin-right: 3px
}
.checkBox input[type='radio']:checked + label span.radiobtn {
  background: url(../images/icon-radio-on.svg) 0px 0px;
}
.checkBox{ position: relative}
.checkBox .check{ position: absolute;  top:5px; padding: 0; margin: 0; line-height: 18px}
.checkBox .title-check{ cursor: pointer;}