/* Container
----------------------------------------------------------- */
body.open {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0; }
body#grade1, body#grade2 {
  background: #1eace4; }
  body#grade1.login, body#grade2.login {
    background: #e8545d; }
  body#grade1.summer, body#grade2.summer {
    background: #1eace4 url("../img/dec_summer.png") center 0 repeat-x;
    background-size: 135px auto; }
    body#grade1.summer.login, body#grade2.summer.login {
      background-color: #f8df08; }
  body#grade1 div.btnWrap, body#grade2 div.btnWrap {
    width: 500px;
    margin: 0 auto; }
    body#grade1 div.btnWrap ul li, body#grade2 div.btnWrap ul li {
      width: calc(50% - 8px); }
      body#grade1 div.btnWrap ul li:first-child a img, body#grade2 div.btnWrap ul li:first-child a img {
        width: 55%; }
      body#grade1 div.btnWrap ul li:last-child a img, body#grade2 div.btnWrap ul li:last-child a img {
        width: 77%; }
body#grade3, body#grade4 {
  background: #8bc23d; }
  body#grade3.login, body#grade4.login {
    background: #fbcf06; }
  body#grade3.summer, body#grade4.summer {
    background: #c3d600 url("../img/dec_summer.png") center 0 repeat-x; }
    body#grade3.summer.login, body#grade4.summer.login {
      background-color: #e8949f; }
  body#grade3 div.btnWrap, body#grade4 div.btnWrap {
    width: 685px;
    margin: 0 auto; }
    body#grade3 div.btnWrap ul li, body#grade4 div.btnWrap ul li {
      width: calc(25% - 8px); }
body#grade5, body#grade6 {
  background: #ed85b2; }
  body#grade5.login, body#grade6.login {
    background: #ffef95; }
  body#grade5.summer, body#grade6.summer {
    background: #f7ae29 url("../img/dec_summer.png") center 0 repeat-x; }
    body#grade5.summer.login, body#grade6.summer.login {
      background-color: #24b397; }
  body#grade5 div.btnWrap, body#grade6 div.btnWrap {
    width: 850px;
    margin: 0 auto; }
    body#grade5 div.btnWrap ul li, body#grade6 div.btnWrap ul li {
      width: calc(20% - 8px); }

div#container {
  height: 100%;
  min-height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }

/* contents
--------------------------*/
div#contWrap {
  width: 100%;
  max-width: 1000px;
  padding: 100px 50px;
  box-sizing: border-box;
  margin: auto;
  text-align: center; }

div#contBox {
  position: relative;
  text-align: center;
  /*----------------home--------------------*/ }
  div#contBox div.btnWrap,
  div#contBox div.formWrap {
    height: 150px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 40px; }
  div#contBox div.inputWrap {
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    line-height: 1; }
    div#contBox div.inputWrap p:first-child {
      width: 70.4%; }
    div#contBox div.inputWrap p:last-child {
      width: 28%; }
    div#contBox div.inputWrap input[type=password] {
      width: 100%;
      height: 105px;
      line-height: 105px;
      padding: 0 30px;
      box-sizing: border-box;
      vertical-align: middle;
      font-size: 42px;
      border: 5px solid #251e1c;
      border-radius: 20px; }
    div#contBox div.inputWrap button {
      background: none;
      border: none;
      cursor: pointer;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffef00;
      width: 100%;
      height: 105px;
      border: 5px solid #251e1c;
      border-radius: 20px;
      position: relative; }
      div#contBox div.inputWrap button::after {
        content: "";
        width: 100%;
        height: 50%;
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        background: rgba(10, 2, 0, 0.1);
        transition: 0.3s all; }
      div#contBox div.inputWrap button:hover::after {
        height: 0; }
      div#contBox div.inputWrap button img {
        width: 77%; }
  div#contBox .popupPwd {
    width: 29.5%;
    margin: 19px 0 0 25px; }
  div#contBox .logo {
    width: 20%;
    margin: 40px auto 0; }
  div#contBox .errNote {
    display: none;
    color: #f00;
    font-size: 22px;
    font-weight: bold;
    text-align: right;
    position: absolute;
    top: 165px;
    left: 42px;
    z-index: 1;
    line-height: 1; }
  div#contBox .limitDate {
    position: absolute;
    top: 110px;
    right: 32%;
    z-index: 1;
    width: 25%; }
  div#contBox div.btnWrap ul {
    display: flex;
    justify-content: space-between;
    margin-top: 10px; }
    div#contBox div.btnWrap ul li.btnLg a {
      background: #e40011; }
    div#contBox div.btnWrap ul li.btnMt a {
      background: #0075c0; }
    div#contBox div.btnWrap ul li.btnSc a {
      background: #009744; }
    div#contBox div.btnWrap ul li.btnSs a {
      background: #ea6c00; }
    div#contBox div.btnWrap ul li.btnEg a {
      background: #fac500; }
    div#contBox div.btnWrap ul a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 84px;
      width: 100%;
      border: 5px solid #251e1c;
      border-radius: 20px;
      box-sizing: border-box;
      overflow: hidden;
      position: relative; }
      div#contBox div.btnWrap ul a img {
        width: 68%; }
      div#contBox div.btnWrap ul a::after {
        content: "";
        width: 100%;
        height: 0;
        display: block;
        position: absolute;
        bottom: 0;
        top: 0;
        z-index: 1;
        background: rgba(255, 255, 255, 0.3);
        transition: 0.3s all; }
      div#contBox div.btnWrap ul a:hover::after {
        height: 50%; }

div#contBox.error .errNote {
  display: block; }
div#contBox.error .limitDate {
  top: 110px; }
div#contBox.error div.inputWrap input[type=password] {
  border-color: #f00; }

#popUp {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 998; }
  #popUp div.ppWrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8); }
  #popUp div.ppCont {
    height: 80%;
    padding: 0 25px;
    position: relative;
    max-width: 800px; }
    #popUp div.ppCont img {
      display: block;
      padding: 10px 0; }

.btnClose {
  display: block;
  cursor: pointer;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 20px;
  right: 25px;
  z-index: 1000; }
  .btnClose::after, .btnClose::before {
    content: "";
    width: 80px;
    height: 5px;
    display: block;
    background: #000;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1001;
    transform: rotate(45deg); }
  .btnClose::after {
    transform: rotate(-45deg); }

body.summer div#contWrap {
  max-width: 1200px;
  padding-bottom: 0; }
body.summer div#contBox .logo {
  width: 16.7%; }

@media screen and (max-width: 1366px) {
  div#contWrap {
    max-width: 800px; }

  body#grade1 div.btnWrap, body#grade2 div.btnWrap {
    width: 385px; }
  body#grade3 div.btnWrap, body#grade4 div.btnWrap {
    width: 530px; }
  body#grade5 div.btnWrap, body#grade6 div.btnWrap {
    width: 650px; }

  div#contBox .errNote {
    font-size: 20px;
    top: 155px; }
  div#contBox .limitDate {
    top: 112px; }
  div#contBox div.btnWrap,
  div#contBox div.formWrap {
    padding-bottom: 30px; } }
@media screen and (max-width: 767px) {
  body#grade1 div.btnWrap, body#grade2 div.btnWrap {
    width: 100%; }
    body#grade1 div.btnWrap ul li, body#grade2 div.btnWrap ul li {
      width: calc(50% - 3px); }
      body#grade1 div.btnWrap ul li img, body#grade2 div.btnWrap ul li img {
        max-height: 28px; }
  body#grade3 div.btnWrap, body#grade4 div.btnWrap {
    width: 100%; }
    body#grade3 div.btnWrap ul li, body#grade4 div.btnWrap ul li {
      width: calc(25% - 3px); }
  body#grade5 div.btnWrap, body#grade6 div.btnWrap {
    width: 100%; }
    body#grade5 div.btnWrap ul li, body#grade6 div.btnWrap ul li {
      width: calc(20% - 3px); }

  div#container {
    padding: 50px 0;
    box-sizing: border-box; }

  /* contents
  --------------------------*/
  div#contWrap {
    max-width: 480px;
    padding: 0; }

  div#contBox {
    /*----------------home--------------------*/ }
    div#contBox div.btnWrap,
    div#contBox div.formWrap {
      height: 120px;
      overflow: visible; }
    div#contBox div.inputWrap {
      margin-top: 20px;
      padding: 0 15px; }
      div#contBox div.inputWrap p:first-child {
        width: 70%; }
      div#contBox div.inputWrap p:last-child {
        width: 30%; }
      div#contBox div.inputWrap input[type=password] {
        height: 55px;
        line-height: 60px;
        padding: 0 15px;
        font-size: 25px;
        border: 3px solid #251e1c;
        border-right: none;
        border-radius: 10px 0 0 10px; }
      div#contBox div.inputWrap button {
        width: 100%;
        height: 55px;
        border: 3px solid #251e1c;
        border-radius: 0 10px 10px 0; }
        div#contBox div.inputWrap button img {
          max-width: 75px; }
    div#contBox .popupPwd {
      width: 150px;
      margin: 20px 0 0 25px; }
    div#contBox .logo {
      width: 100px;
      margin: 25px auto 20px; }
    div#contBox .errNote {
      position: static;
      font-size: 14px;
      text-align: left;
      margin: 10px 0 0 38px; }
    div#contBox .limitDate {
      top: auto;
      bottom: 62px;
      right: 20px;
      width: 31%; }
    div#contBox.error .limitDate {
      top: auto; }
    div#contBox div.btnWrap ul {
      flex-wrap: wrap;
      margin-top: 20px;
      padding: 0 10px; }
      div#contBox div.btnWrap ul a {
        height: 60px;
        border: 3px solid #251e1c;
        border-radius: 10px; }
        div#contBox div.btnWrap ul a img {
          width: 68%; }

  #popUp div.ppCont {
    height: 75%;
    padding: 0; }
    #popUp div.ppCont img {
      padding: 20px 0; }

  .btnClose {
    width: 30px;
    height: 30px;
    top: 5px;
    right: 5px; }
    .btnClose::after, .btnClose::before {
      width: 30px;
      height: 3px; } }
/**/

/*# sourceMappingURL=layout.css.map */