* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    font-family: 'Nanum Gothic', sans-serif;
  }
  
  a:link {color:white;}
  a:visited {color:white;}
  a:hover {color:white;}
  a:active {color:white;}

.headerImg{
    width: 100%;
    height: 350px;
    background-color: #003e98;
}

.headImgReal{
    width: 1080px;
    height: 350px;
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
    position: relative;
    background-image: url('../IMG/bg3.jpg');
    background-size: 100%;
    background-position: center center;
    cursor:pointer;
}

.mainDivParents {
    z-index: 2;
    width: 100%;
    height: calc(100vh - 470px);
}

.mainDiv{
    background-color: #d8d8d8;
    padding: 20px;
    padding-top:40px;
    padding-bottom: 40px;
    width: 80vw;
    max-width: 1040px;
    min-width: 800px;
    height: calc(60vh - 190px);
    max-height: 250px;
    position: relative;
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
    border-radius: 10px;
}

.mainHeader{
    float: left;
    display: inline-block;
    width: 10%;
    height: calc(60vh - 240px);
    max-height: 200px;
    margin-right: 5px;
    font-weight: bold;
}

.mainHeaderInner {
    position: relative;
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
    width: 95%;
    text-align: center;
    color:#003e98;
}

.mainHeaderInner i {
    margin-bottom: 20px;
    font-size: 80px;
}

.parentsDiv{
    float: left;
    display: inline-block;
    width: 30%;
    overflow-y: scroll;
    height: calc(60vh - 240px);
    max-height: 200px;
    margin-right: 5px;
    background-color: #ececec;
}

.childNoDiv, .childNoDiv2 {
    width: 100%;
    text-align: center;
    position: relative;
    transform: translate(-50%,-50%);
    left:50%;
    top:50%;
    color:rgb(102, 102, 102);
}

.childNoDiv2 {
    transform: translateX(-50%);
    left:50%;
    top:20px;
    padding-bottom: 25px;
    color:rgb(27, 27, 27);
    line-height: 25px;
}


.childsDiv {
    float: left;
    display: inline-block;
    width: 58%;
    overflow-y: scroll;
    height: calc(60vh - 240px);
    max-height: 200px;
    background-color: #ececec;
}

.parentDivSub, .parentDivSub2  {
    width: 100%;
    height: 32px;
    line-height: 32px;
    background-color: #003e98;
    color:white;
    border-radius: 5px;
    margin-bottom: 3px;
    text-align: center;
    cursor: pointer;
}

.parentDivSub2 {
    background-color: #002152;
}

.clicked {
    background-color: #002152;
}

.greetingHead {
    font-weight: bold;
    font-size: 22px;
    line-height: 40px;
}

.greetingHead2 {
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    height: 40px;
    width: 510px;
    margin-top: 10px;
    margin-bottom: 5px;
    background-color: #fbc700;
    display: inline-block;
    color: #002152;
}

.greetingHead3 {
    font-weight: bold;
    font-size: 13.5px;
    line-height: 20px;
    color: #424242;
}

.parentDivSub:last-child {
    margin-bottom: 0px;
}

.childDivSub {
    width: 100%;
    height: 32px;
    line-height: 32px;
    color: rgb(34, 34, 34);
    background-color:#c9c9c9;
    border-radius: 5px;
    margin-bottom: 3px;
    text-align: center;
    cursor: pointer;
}


.footer{
    width: 100%;
    height: 120px;
    background-color: #fbc700;
  }

  .footerInner a:link {color:#003e98;}
  .footerInner a:visited {color:#003e98;}
  .footerInner a:hover {color:#003e98;}
  .footerInner a:active {color:#003e98;}

  
  .footerInner {
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 30px;
    position: relative;
    transform: translate(-50%,-50%);
    top:50%;
    left:50%;
  }
  
  .footerInner2 {
    text-align: center;
    width: 100%;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    position: relative;
    transform: translate(-50%,-50%);
    top:30%;
    left:50%;
    color: #003e98;
  }
    /*------------------------------------------------------------------*/
  .searchDiv{
      z-index: 1;
      transform: translateX(-50%);
      left:50%;
      width: 520px;
      height: 40px;
      background-color:#c9c9c9;
      position:fixed;
      padding: 0 40px;
      line-height: 40px;
      border-radius: 20px;
      bottom:25px;
  }

  .searchDiv i {
      line-height: 40px;
      font-size: 30px;
      color:#003e98;
      margin-right: 20px;
      float:left;
  }

  .searchBox {
      margin-top: 5px;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      padding-left:20px;
      width: 350px;
      float: left;
      border:none;
      outline:none;
      border-radius: 5px;
  }

  .searchButton{
      display: inline-block;
      margin-top: 5px;
      width: 70px;
      margin-left: 20px;
      height:30px;
      line-height: 30px;
      cursor:pointer;
      text-align: center;
      background-color: #003e98;
      color:white;
      border-radius: 10px;
      border:none;
      outline: none;
      cursor:pointer;
  }

  @media screen and (max-height :800px){
      /* .searchDiv {
          display: none;
      } */

      .footer {
          display: none;
      }
      .mainDiv {
        top:25vh;
      }
  }