@import url('reset.css');



@font-face {
  font-family: 'GmarketSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansLight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}




body { background: #e9f6fd; }
html, body { height: 100%; margin: 0;}

#wrap { 
    width: 100%;
    height: 100%;
    background: url('../images/bg.png')center center;
    background-size: cover;
}



header { width: 100%; padding: 0 5%; }
header h1 { float: left; width: 20%; padding: 25px 0; }
header h1 img { max-width: 100%; height: auto;}

.main_title { 
    float: left; 
    width: 50%; 
    color: #0075b2;
    font-size: 20px; 
    padding-left: 10px; 
    padding: 45px 0 0 10px;
    font-family: 'GmarketSansBold';
}


.login_box { 
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, -50%);
    max-width: 500px;
    padding: 3% 5%;
    background: #fff;
    box-shadow: 0px 0px 10px 3px #79cdfa;
    border-radius: 20px;
    border: 1px solid #79cdfa;
 }

 h2 { margin-bottom: 20px; font-size: 30px; font-weight: 500; color: #0075b2; font-family: 'GmarketSansBold';}

 p { margin-bottom: 10px; }

 input[type=text], input[type=password] {
    width: 100%;
    padding: 10px;
    border: none;
    background: #eee;
    font-size: 14px;
    border-radius: 3px;
  }

  input[type=text]:focus, input[type=password]:focus {
    background: #e1f4fd;
    outline: none;
  }

  .btn {
    width: 100%;
    text-align: center;
  }

  .btn a { padding: 10px 20px; color: #fff; background: #0075b2; display: block; border-radius: 3px;}
  .btn a:hover { background: #000;}

  .btn2 {
    float: left;
    width: 49%;
    text-align: center;
    margin-right: 2%;
  }

  .btn2 a { padding: 10px 20px; color: #fff; background: #0075b2; display: block; border-radius: 3px;}
  .btn2 a:hover { background: #000;}

  .btn3 {
    float: left;
    width: 49%;
    text-align: center;
  }

  .btn3 a { padding: 10px 20px; color: #fff; background: #0075b2; display: block; border-radius: 3px;}
  .btn3 a:hover { background: #000;}

.login_text { font-size: 14px; color: #79cdfa;; }

  @media (max-width:1220px){
    header {  padding: 0 2%;}
}

@media (max-width:1080px){
    header h1 { width: 35%; padding: 25px 0 0 0;}
    .main_title { width: 65%;}
}


@media (max-width:768px){
    header{ padding: 0; }
    header h1{ width: 100%;  padding: 10px 5%; border-bottom: 1px solid #0075b2;}
    header h1 img { width: 35%;}
    .main_title { width: 100%; height: 120px; padding: 20px 0 0 5%;}
    .login_box { padding: 5% 10%;}
}

@media (max-width:480px){
    header h1 img { width: 60%;}
    .main_title { font-size: 16px;}
    .login_box { padding: 10%;}
    h2 { font-size: 24px;}
}