/* Container
----------------------------------------------------------- */
body {
  background: #00bbff; }
  body.open {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0; }
  body div.btnWrap {
    width: 500px;
    margin: 0 auto; }
    body div.btnWrap ul li {
      width: calc(50% - 8px); }
      body div.btnWrap ul li:first-child a img {
        width: 55%; }
      body div.btnWrap ul li:last-child a img {
        width: 77%; }

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

body.news {
  height: auto;
  min-height: 0; }
  body.news div#container {
    display: block;
    margin-top: 80px;
    box-sizing: border-box; }

/* 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;
    position: relative;
    overflow: hidden; }
  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: 123px;
    right: 30%;
    z-index: 1;
    line-height: 1; }
  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 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: 85%;
    padding: 0;
    position: relative;
    width: auto; }
    #popUp div.ppCont.mCS_no_scrollbar {
      padding: 0 25px; }
    #popUp div.ppCont img {
      display: block; }

.btnClose {
  display: block;
  cursor: pointer;
  width: 5%;
  height: 5.8%;
  top: 2.5%;
  right: 2.5%;
  position: absolute;
  z-index: 1000;
  background: #fff url(/img/btn_close.png) 0 0 no-repeat;
  border-radius: 5px;
  background-size: 100% 100%;
  transition: 0.3s all; }
  .btnClose:hover {
    background-color: #fa0; }

@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; } }
@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 30px;
    box-sizing: border-box; }

  body.news div#container {
    margin-top: 0; }

  /* 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 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 10px; } }
/*----------------grade Top--------------------*/
body#grad {
  background: #99d6b4; }
  body#grad.news {
    background: #f7cade; }

ul.gradMenu {
  display: flex;
  justify-content: center;
  width: 1020px;
  padding: 20px; }
  ul.gradMenu li {
    width: 490px; }
    ul.gradMenu li ~ li {
      margin-left: 40px; }
    ul.gradMenu li a {
      display: block; }
      ul.gradMenu li a:hover figure {
        opacity: 0.8; }
      ul.gradMenu li a:hover .btn::after {
        height: 0; }
    ul.gradMenu li figure {
      margin: 0;
      padding: 0;
      transition: 0.3s all; }
  ul.gradMenu .btn {
    width: 482px;
    height: 60px;
    border: 6px solid #000;
    box-sizing: border-box;
    border-radius: 30px;
    background: #ffef00;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; }
    ul.gradMenu .btn::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; }
    ul.gradMenu .btn img {
      height: 40px; }

@media screen and (max-width: 1100px) {
  div#container {
    height: auto; }

  ul.gradMenu {
    width: calc(100% - 40px); }
    ul.gradMenu li {
      width: calc(50% - 20px); }
    ul.gradMenu .btn {
      width: 100%; }
      ul.gradMenu .btn img {
        height: 65%; } }
@media screen and (max-width: 767px) {
  ul.gradMenu {
    width: 100%;
    padding: 20px 0; }
    ul.gradMenu li {
      width: calc(50% - 10px); }
      ul.gradMenu li ~ li {
        margin-left: 20px; }
    ul.gradMenu .btn img {
      height: 45%; } }
@media screen and (max-width: 480px) {
  div#container {
    display: block; }

  ul.gradMenu {
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px; }
    ul.gradMenu li {
      width: 100%; }
      ul.gradMenu li ~ li {
        margin-left: 0;
        margin-top: 50px; }
    ul.gradMenu .btn img {
      height: 50%; } }
/*----------------grade News--------------------*/
section.newsSec {
  width: 1020px;
  margin: 0 auto;
  padding: 20px; }
  section.newsSec h1 {
    width: 530px;
    margin-bottom: 30px; }
  section.newsSec div.contWrap {
    display: flex;
    justify-content: space-between; }
  section.newsSec div.sideMenu {
    width: 240px;
    background: url(../img/vline.png) right 0 repeat-y; }
    section.newsSec div.sideMenu li {
      width: 217px;
      position: relative; }
      section.newsSec div.sideMenu li ~ li {
        margin-top: 10px; }
      section.newsSec div.sideMenu li a {
        transition: 0.3s all; }
        section.newsSec div.sideMenu li a:hover {
          filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.3));
          opacity: 0.8; }
      section.newsSec div.sideMenu li.current::after {
        content: "";
        width: 0;
        height: 0;
        display: block;
        border: 10px solid transparent;
        border-left-color: #000;
        position: absolute;
        top: calc(50% - 10px);
        right: -24px;
        z-index: 10; }
  section.newsSec ul.newsList {
    width: 780px;
    display: flex;
    flex-wrap: wrap; }
    section.newsSec ul.newsList.w760 {
      width: 760px; }
    section.newsSec ul.newsList li {
      width: 380px;
      position: relative; }
      section.newsSec ul.newsList li:nth-child(n+3) {
        margin-top: 30px; }
      section.newsSec ul.newsList li.w400 {
        width: 400px; }
      section.newsSec ul.newsList li.new::before {
        content: "";
        display: block;
        width: 94px;
        height: 94px;
        background: url(../grade6/img/new.png) 0 0 no-repeat;
        position: absolute;
        top: 142px;
        left: 183px;
        z-index: 10; }
      section.newsSec ul.newsList li a {
        transition: 0.3s all; }
        section.newsSec ul.newsList li a:hover {
          filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.3));
          opacity: 0.8; }
      section.newsSec ul.newsList li.disable a {
        pointer-events: none; }
  section.newsSec .notice {
    font-size: 10px;
    text-indent: -1em;
    margin-left: 1em;
    text-align: right;
    margin: 10px 30px 0 0;
    font-weight: bold; }
    section.newsSec .notice span {
      display: inline-block;
      text-align: left; }

@media screen and (max-width: 1100px) {
  section.newsSec {
    width: 100%;
    box-sizing: border-box;
    padding: 20px; }
    section.newsSec div.sideMenu {
      width: 240px; }
    section.newsSec ul.newsList {
      width: calc(100% - 250px); }
      section.newsSec ul.newsList.w760 {
        width: calc(100% - 250px); }
      section.newsSec ul.newsList li {
        width: 50%; }
        section.newsSec ul.newsList li:nth-child(n+3) {
          margin-top: 30px; }
        section.newsSec ul.newsList li.w400 {
          width: 52.6%;
          margin-right: -2.6%; } }
@media screen and (max-width: 767px) {
  section.newsSec {
    padding: 20px 0; }
    section.newsSec h1 {
      width: 100%;
      max-width: 530px; }
    section.newsSec div.sideMenu {
      width: 180px; }
      section.newsSec div.sideMenu li {
        width: 160px; }
    section.newsSec ul.newsList {
      width: calc(100% - 200px);
      flex-direction: column; }
      section.newsSec ul.newsList.w760 {
        width: calc(100% - 200px); }
      section.newsSec ul.newsList li {
        width: 100%; }
        section.newsSec ul.newsList li:nth-child(n+2), section.newsSec ul.newsList li:nth-child(n+3) {
          margin-top: 20px; }
        section.newsSec ul.newsList li.w400 {
          width: 105.3%; } }
@media screen and (max-width: 480px) {
  body#grad.news #container {
    padding: 0 15px; }

  section.newsSec {
    padding: 20px 0; }
    section.newsSec div.sideMenu {
      width: 35%; }
      section.newsSec div.sideMenu li {
        width: calc(100% - 18px); }
        section.newsSec div.sideMenu li.current::after {
          border-width: 7px;
          top: calc(50% - 7px);
          right: -17px; }
    section.newsSec ul.newsList {
      width: calc(65% - 10px);
      flex-direction: column; }
      section.newsSec ul.newsList.w760 {
        width: calc(65% - 10px); }
      section.newsSec ul.newsList li {
        width: 100%; }
        section.newsSec ul.newsList li:nth-child(n+2), section.newsSec ul.newsList li:nth-child(n+3) {
          margin-top: 20px; } }
.notfound {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 50px; }

.toSelect {
  font-size: 22px; }
  .toSelect a {
    text-decoration: underline; }
    .toSelect a:hover {
      text-decoration: none;
      color: #c00; }

/**/

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