html, body{margin:0; height:100%;}
ul, li {list-style:none}

.inpt-reg {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #dedede;
  box-sizing: border-box;
  background:#f7f8f9;
  color:#18191c;
  border-radius:6px;
}


.btn-reg {
  font-size:16px;
  color: #fff !important;
  font-weight:bold;
  background-color: #125bc6 !important;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}


.divRegister {
  position: fixed;
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
  padding-top: 60px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

.login-common {height:max-content}
.login-common .login-wrap {width:100%;height:100%;}
.login-common .login-wrap .login-box{display:flex; align-items:center; justify-content:center;height:100%;width:100%;flex-direction:column;}
.login-common .login-wrap .login-box form {border:1px solid #e4e5e8; max-width:480px; width:100%; padding:16px 24px 32px; border-radius:6px;}
.login-common .login-wrap .login-box .login-title{font-size:26px; color:#1e2329; margin-bottom:20px; font-weight:600; text-align:center}
.login-common .login-wrap .login-box .login-logo {text-align:center;padding:20px 0 40px;}
.login-common .login-wrap .login-box .login-logo img {margin:0 auto;max-width:114px;width:100%;}
.login-common .login-wrap .login-box label{font-size:14px; color:#1e2329; font-weight:400;letter-spacing:-0.06em}
.login-common .login-wrap .login-box .inpt-reg {border-radius:0px 5px 5px 0; height:45px; margin-top:0; margin-bottom:25px; background:#f7f8f9; color:#18191c}
.login-common footer{background:transparent; font-size:12px; padding:12px; color:#474D57; position:absolute; width:100%; bottom:0; left:0; text-align:center}
.login-common .login-wrap .sign-up{font-size:16px; color:#333; text-align:right; font-weight:bold; }
.login-common .login-wrap .sign-up a{font-size:16px; color:#333; text-decoration:none}
.login-common .login-wrap .login-box .btn-code{margin-left:10px;}
.login-common .login-wrap .login-box .btn-code button{font-size:16px; color:#fff; height:45px; border-radius:5px; border:1px solid #125bc6; background:#125bc6; padding:0 10px}
.login-common .login-wrap .login-box .agree-code .inpt-reg{border-radius:5px;}

.input-group{position:relative; display:flex; /*flex-wrap:wrap;*/ align-items:stretch; width:100%; -webkit-box-align:stretch;}
.input-group-prepend{margin-right:-1px; display:flex}
.input-group-text{display:flex; -webkit-box-align:center; align-items:center; padding:0.65rem 1rem; margin-bottom:0; font-size:1rem; font-weight:400; color:#74788d; text-align:center; white-space:nowrap; border-radius:4px; height:45px; border-radius:5px 0 0 5px; border:1px solid #dedede; background:#f7f8f9; color:#18191c; font-size:}
.input-group-text i{font-size:18px}
.input-group > .inpt-reg{position:relative; -webkit-box-flex:1; flex:1 1 0%; min-width:0;}
.input-group select {border-radius: 0px 5px 5px 0;height: 45px;margin-top: 0;margin-bottom: 25px;background: #f7f8f9;color: #18191c;    position: relative;-webkit-box-flex: 1;flex: 1 1 0%;min-width: 0;width: 100%;padding: 12px 20px;display: inline-block;border: 1px solid #dedede;box-sizing: border-box;}
/* üũ¹Ú½º Å©±â Å°¿ì±â */
input[type="checkbox"] {
  width: 16px;       /* ±âº»º¸´Ù Å­ */
  height: 16px;
  cursor: pointer;
  transform: scale(1.1); /* Å©±â Á¶Á¤ */
  margin-right: 5px;
}
.modal-header {position:relative;}
.modal-header .close{top: 50%;
    transform: translateY(-50%);}


.noti_box {
    max-width: 600px;
    width: 100%;
    padding: 40px 0;
}
.noti_box h4 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 134%;
    margin-bottom: 20px;
}
.noti_box p {
    letter-spacing: -0.06em;
    font-size: 1.2rem;
}
.noti_box h3 {
    text-align: center;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 15px;
    margin-top: 30px;
}
.noti_box img {width:100%;}

.container .banner-box{overflow:hidden; border-radius:20px; position:relative}
.container .banner-box img{width:100%;}
.container .banner-box .ontext{position:absolute; top:50%; left:5%; z-index:1; transform:translateY(-50%); }
.container .banner-box .ontext h3{font-size:30px; color:#fff; font-weight:bold;}
.container .banner-box .ontext span{font-size:30px; color:#fff; font-weight:bold;}
.remittance {border:1px solid #e4e5e8; padding:15px; margin-top:20px; border-radius:10px;box-shadow:0 3px 10px 0 rgb(66 66 66 / 5%)}
.remittance .remittance-adress{padding:18px 15px;}

.table-responsive .table td{vertical-align:middle}
.table-responsive label{margin-bottom:0;}
.table-responsive.table-border{box-shadow:0 3px 10px 0 rgb(66 66 66 / 5%); border:1px solid #e4e5e8; padding:15px; border-radius:10px;}
.table-responsive.table-border .table{margin-bottom:0;}
.table-responsive .table-bordered{border:0;}
.table-responsive .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{border:0; border-top:1px solid #e4e5e8}
.table-responsive .btn-up{text-align:right; margin-bottom:10px; float:right;margin-left:5px;}
.table-responsive .btn-up .btn-select{background:#0059ff; font-size:15px; border:1px solid #0059ff; color:#fff; padding:6px 15px; margin-top:15px}
.table-responsive .btn-up .btn-select2{background:#ff0000; font-size:15px; border:1px solid #ff0000; color:#fff; padding:6px 15px; margin-top:15px}
.table-responsive .table th{font-size:14px;}
.table-responsive .table td{font-size:15px;}
.label-chk {display:inline-block; position:relative; cursor:pointer; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
.label-chk .input-chk{position:absolute; z-index:-1; opacity:0;}
.label-chk > span{background:#e4e8ee; border:1px solid transparent; border-radius:3px; position:absolute; top:-15px; left:0; width:18px; height:18px;}
.label-chk > input:checked ~ span:after{content:''; position:absolute; display:none; top:50%; left:50%; margin-left:-2px; margin-top:-6px; width:5px; height:10px; border-width:0 2px 2px 0 !important; -webkit-transform:rotate(45deg); transform:rotate(45deg)}
.label-chk > input:checked ~ span:after{border:solid #0abb87; display:block; }


.excel-btn{background:#206f44 !important; color:#fff !important; border-radius:5px; padding:6px 15px; font-size:15px;}
.w3-main .container{padding-top:100px !important}
.copy-link{margin-left:-1px; background:#5cb85c; border:1px solid #5cb85c; color:#fff; border-radius:0 5px 5px 0;}
/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }

}

.btn-100{
    display:inline-block;
    width:100%;
    padding: 14px 20px;
    margin: 8px 0;
    text-align:center;
}

.gs-gray{
    background-color:#ccc;
}

/* head */
.nav-sub{position:relative; max-width:1200px; width:100%; margin:0 auto}


/*footer*/
footer p{margin-bottom:0; color:#6d717a; font-weight:bold}

/* member-info */
.container .my-page01{max-width:700px; width:100%; margin:0 0 50px 0; border:1px solid #e5e5e5; padding:20px 30px; display:inline-block; border-radius:5px; box-shadow:0 3px 10px 0 rgb(66 66 66 / 5%)}
.container .my-page01 .my-info{padding:0 0 40px; overflow:hidden; text-align:left;}
.container .my-page01 .my-info .user-icon{display:block; color:#ccc; font-size:55px; text-align:center}
.container .my-page01 .my-info .user-days{display:block; text-align:center;}
.container .my-page01 .my-info .user-days .user-name{font-size:24px; color:#333; font-weight:bold}
.container .my-page01 .my-info .user-days .user-time{font-size:18px; color:#757575}
.container .my-page01 .my-info-list{}
.container .my-page01 .my-info-list ul{padding:0 0 30px; text-align:left;}
.container .my-page01 .my-info-list ul li{padding:10px 0}
.container .my-page01 .my-info-list .info-title{padding:10px 15px;}
.container .my-page01 .my-info-list .info-set {}
.container .my-page01 .my-info-list .info-set .inpt-reg{height:45px; margin:0; border-radius:0 5px 5px 0; background:#fff}
.container .my-page01 .info-chg{text-align:center}
.container .my-page01 .info-chg a{background:#f6f6f8; padding:12px 0; font-size:17px; color:#757575; display:block; border-radius:5px}
.container .my-page01 .info-chg a:hover{background:#125bc6; text-decoration:none; color:#fff; font-weight:bold}

.table-caption {padding-left:0; margin-bottom:15px;}
.table-caption li{font-size:14px; color:#666; position:relative; padding-left:15px; width:75%}
.table-caption li span{color:#ff0000; font-weight:bold; position:absolute; left:0; top:1px;  }

footer p {font-size:13px;}

@media (min-width:1500px){
	.container{width:1500px; padding-right:0; padding-left:0;}
}

@media (max-width:1200px){
	.container{width:1200px; padding-right:0; padding-left:0;}
}

@media (max-width:1024px){
	.login-common{}
	.login-common .login-wrap {height:100%}
	.login-common .login-wrap .login-box{border:none;}
	.table-responsive .btn-up{float:none}
	.table-caption li{width:100%}
}


@media (max-width:991px){
	.container .banner-box .ontext {line-height:20px;}
	.container .banner-box .ontext h3{font-size:26px; margin-bottom:0; margin-top:5px;}
	.container .banner-box .ontext span{font-size:26px;}
}

@media (max-width:767px){
	.login-common .login-wrap .login-box .login-title {font-size:24px;margin-bottom:15px;}
	.container .banner-box .ontext {display:flex}
	.container .banner-box .ontext h3{font-size:22px; margin-bottom:0; margin-top:0;}
	.container .banner-box .ontext span{font-size:22px;}
	.input-group-text i {font-size:16px;}
	.input-group select, .inpt-reg {padding:12px;}
	.login-common .login-wrap .login-box form {border:none;padding:0;}
	.login-common .login-wrap .login-box {padding:0 15px;}
	.noti_box h4 {font-size: 1.6rem;}
	.noti_box h3 {font-size: 1.4rem;}
	.noti_box p {font-size: 1.1rem;} 
}