/* 변수 */
:root {
	--textColor: #ffffff90;
	--firstColor: #313a46;
	--secondColor: #727cf5;
	--backgroundColor: #00000080;
	--boxBackgroundColor: #00000020;
	--borderColor: #dddddd;
	--ovbtnTextColor: #ffffff;
}

html {
   height: 100%;
}

body {
   margin: 0;
   min-height: 820px;
   height: 100%;
   background: radial-gradient(#657783, #313a46);
   color: #ddd;
   font-family: nanum gothic;
}

a {
   text-decoration: none;
   color: #ddd;
   font-size: 12px;
   font-weight: bold;
}

   a:hover {
      text-decoration: underline;
   }

div,
input {
   box-sizing: border-box;
}

.container {
   width: 100%;
   height: 100%;
   padding: 0 40px;
   display: table;
   table-layout: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
}

img {
   width: 30px;
}

input[type="text"] {
   width: 100%;
   height: 45px;
   padding: 0 0 0 10px;
   margin-bottom: 10px;
   /*
      background: #6f7d8b;
      color: #ddd;
    */
    background: #ffffff23;
    color: #ffffff90;
   border-radius: 5px;
   border: none;
   display: block;
   font-size: 16px;
}

input[type="password"] {
   width: 100%;
   height: 45px;
   padding: 0 0 0 10px;
   margin-bottom: 15px;
   background: #6f7d8b;
   color: #ddd;
   border-radius: 5px;
   border: none;
   display: block;
   font-size: 16px;
}

input[type="checkbox"] {
   width: 16px;
   height: 16px;
   vertical-align: middle;
   border-radius: 5px;
   color: #ddd;
   display: inline-block;
}
input:focus {
	border: 1px solid #ffffff40;
	outline: solid 2px var(--firstColor);
	background: #ffffff10;
}
:focus {
	outline:none;
}
label {
   color: #ddd;
   vertical-align: middle;
   font-size: 14px;
   font-weight: bold;
   margin: 0 0 2px 5px;
   display: inline-block;
}

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 30px #6f7d8b inset;
   box-shadow: 0 0 0 30px #6f7d8b inset;
   -webkit-text-fill-color: #ddd;
}

   input:-webkit-autofill,
   input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
      transition: background-color 5000s ease-in-out 0s;
   }

input::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.3);
   z-index: 99999;
}

input:-moz-placeholder {
   color: #aaa;
   z-index: 999999;
}

.wrap {
   margin: 0 auto;
   width: 310px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

   .wrap img {
      width: 180px;
      opacity: 0.7;
   }

   .wrap .logotxt {
       margin-top:15px;
       margin-bottom:30px;
   }

   .wrap .logotxt_bottom {
       margin-bottom:30px;
       margin-top:80px;
   }
   .wrap .logotxt_bottom .desc {
       margin-bottom:10px;
   }

   .wrap .logotxt_bottom .desc_sub {
       font-size:0.7em;
       opacity:.5;
   }

   .wrap .login {
      width: 100%;
      padding: 15px 0;
      margin: 3px 0 40px 0;
      border-radius: 5px;
      display: block;
      color: #eee;
      background: linear-gradient(#313a46, #313a46);
      font-size: 16px;
      border: none;
   }
   
   .wrap .btn_wide {
      width: 100%;
      padding: 15px 0;
      margin: 3px 0 3px 0;
      border-radius: 5px;
      display: block;
      color: #eee;
      background: linear-gradient(#313a46, #313a46);
      font-size: 16px;
      border: none;
   }
   .wrap .btn_wide.wire {
      color: rgba(255,255,255,.7);
      text-decoration:underline;
      font-size: 16px;
      border: none;
      background:unset;
      box-sizing:border-box;
   }
      .wrap .login:hover {
         background: linear-gradient(#313a46, #1d252f);
         text-decoration: none;
      }

      .wrap .login:active {
         opacity: 0.5;
      }

   .wrap .line {
      position: relative;
      width: 100%;
      height: 1px;
      margin: 13px 0;
      background: linear-gradient( to right, rgba(204, 204, 204, 0), rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0) );
   }

   .wrap .bottom {
      height: 0;
   }

   .wrap .bottom100 {
      height: 100px;
   }

   .wrap .height50 {
      height: 50px;
   }

   .wrap .text_bigger {
      font-size: 14px;
      display: inline-block;
   }

      .wrap .text_bigger:hover {
         text-decoration: underline;
      }

   .wrap .bold {
      font-weight: bold;
   }

   .wrap .text_small {
      font-size: 12px;
   }


/* absolute */
.footer_tl {
   position: fixed;
   left: 10px;
   top: 10px;
   font-size: 17px;
   font-weight: bold;
   letter-spacing: 2px;
}

.footer_tr {
   position: fixed;
   right: 15px;
   top: 10px;
   font-size: 16px;
   opacity: 0.5;
}

   .footer_tr:hover {
      opacity: 1;
   }

   .footer_tr a {
      font-size: 16px;
      font-weight: normal;
      vertical-align: middle;
   }

   .footer_tr img {
      width: 18px;
      vertical-align: middle;
      margin-bottom: 3px;
   }

.footer {
   position: fixed;
   right: 15px;
   bottom: 15px;
   font-size: 13px;
}

.footer_l {
   position: fixed;
   left: 15px;
   bottom: 10px;
   opacity: 0.8;
}

   .footer_l:hover {
      opacity: 1;
   }

.pop_dimm {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
}
.pop_box {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80% !important;
   max-height: 60%;
   width: auto;
   height: auto;
   border-radius: 10px;
   background: var(--firstColor);
   padding: 40px;
   color: #fff;
   filter: drop-shadow(0 0 15px rgba(0,0,0,.2));
   display:flex;
   flex-direction:column;
}
.pop_align_center {
   align-items: center;
}
.pop_title {
font-size:1.6em;
font-weight:500;
}
.pop_content {
margin-top:20px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap: 15px;
line-height:1.4;
}
.pop_content div.pop_btns {
display:flex;
gap:5px;
}
.pop_content div a {
border:1px solid #fff;
padding:10px 20px;
display:inline-block;
} 

.pop_content div a.active {
background:rgba(255,255,255,.5);
color:#000;
font-size:14px;
}

.agreement .pop_content {

}
.agreement .pop_content.agreement_scroll {
    font-size:11px;
    line-height:1.6;
    text-align:justify;
    width:100%;
    position:relative; height:200px
}
    .agreement .pop_content.agreement_scroll div {
        position:absolute;
        top:0;
        left:0;
    }

    .agreement .pop_content.agreement_scroll textarea {
    width: 100%;
    height: 200px;
    background: transparent;
    color: #fff;
    overflow-y: visible;
    font-family: 'Nanum Gothic';
    text-align:justify;
    font-size: 11px;
    line-height: 1.6;
    border:none;
}
    
.footer_text_thin {
    width:calc(100% + 20px);
    padding:15px;
    font-weight:normal;
   font-size:9px;
   line-height:1.4;
   background:rgba(255,255,255,.05);
   margin-top:40px;
    margin-left:-10px;
   box-sizing:border-box;
   border-radius:5px;
   display:block;
   color:rgba(255,255,255,.5);
}
.footer_text_thin a {
   font-size:9px;
   color:rgba(255,255,255,.5);
}

.pop_btn_close {
   position: absolute;
   top: 20px;
   right: 20px;
}
.pop_btn_close img {
   width: 15px;
}

.left_top_box {
    position:fixed;
    left:20px;
    top:25px;
}
.left_top_box a {
    color:#rgba(255,255,255,.7);
    font-size:16px !important;
    letter-spacing:1px;
}
/*ëª¨ë°”ì ¼*/
@media (max-width: 1000px) {
   /*ë¡œê·¸ì ¸*/
   .footer_tl {
      display: none;
   }

   .footer_tr {
      display: none;
   }

   .footer_l {
      display: none;
   }

   .footer {
      display: none;
   }

   .wrap {
      width: 100%;
   }

   .container {
      height: inherit;
   }

   body {
      min-height: inherit;
      height: inherit;
   }
}