@charset "utf-8";

/********** SECTION 별 BROKEN POINT 시작 - KE✓ **********/
section, .section, .sectStyle1 {padding: 3rem 0;}

section {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}


#introSection {margin: 0 auto 1.5rem; padding: 3rem 0 0.5rem;}
#introSection .tBox {margin-bottom: 0;}
#introSection p.wspl {min-width: 22rem;}

#firstSec {padding: 0 0 3rem;}
#upPadOnly {padding: 3rem 0 0;}

.subTitBox {margin-bottom: 1rem; text-align: center;}

.sectStyle1 {
  background: #FFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  
  transform: translateY(30px);
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

.sectStyle1:nth-of-type(2) {animation-delay: 0.1s;}
.sectStyle1:nth-of-type(3) {animation-delay: 0.2s;}
.sectStyle1:nth-of-type(4) {animation-delay: 0.3s;}
.sectStyle1:nth-of-type(5) {animation-delay: 0.4s;}

@keyframes fadeIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sectStyle2 {width: 100%; overflow: hidden;}

@media screen and (min-width: 768px) {
  #introSection, section, .section, .sectStyle1 {padding: 4rem 0;}
  #upPadOnly {padding: 4rem 0 0;}
  
}

@media screen and (min-width: 1440px) {
  #introSection, section, .section, .sectStyle1 {padding: 5rem 0;}
  #upPadOnly {padding: 5rem 0 0;}
}

/********** SECTION 별 BROKEN POINT 끝 - KE✓ **********/
#overview table tr td:first-child,
#tabToEx table tr td:first-child {text-align: center;}


#tips {position: relative;}
  #tips img.tip {position: absolute;}

#sidePics {width: 100%; overflow: hidden;}
#sidePics div.paraVer1.toHalfBox,
#sidePics div.paraVer2.toHalfBox {padding-bottom: 2rem;}
  #sidePics div.paraVer1.toHalfBox h3,
  #sidePics div.paraVer2.toHalfBox h3 {padding: 0.5rem 0 1rem;}
  #sidePics div.paraVer1.toHalfBox p.cataTit,
  #sidePics div.paraVer2.toHalfBox p.cataTit {
    padding-top: 1rem; padding-bottom: 0; font-size: 0.875rem; text-align: center;
  }
  #sidePics div.paraVer1 p.wspl {width: fit-content; margin: 0 auto;}
  #sidePics a.moreBtn {
    display: block;
    max-width: 5rem; margin: 0 auto;
    text-align: center;
  }
  #sidePics a.moreBtn:hover {border: 1px solid var(--c-secondary); background-color: var(--c-secondary);}

  #sidePics .halfBoxes div.toHalfImg {background-size: cover; background-position: 50%;}
    #sidePics > div:nth-child(3) {flex-direction: column-reverse;}


@media screen and (min-width: 768px) {
  #sidePics div.paraVer1.toHalfBox p.cataTit,
  #sidePics div.paraVer2.toHalfBox p.cataTit {padding-top: 2rem; font-size: 1.125rem;}

  #sidePics div.paraVer1 {padding-bottom: 0rem;}
  #sidePics > div:nth-child(3) {flex-direction: row;}
  #sidePics .halfBoxes {justify-content: center;}
    #sidePics .halfBoxes div[class^="toHalf"] {width: calc(100% / 2 - 1rem);}
}





.halfBoxes {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 3rem;
}
  .fullToHalfBox {
    width: 100%; height: auto;
    font-size: 0.875rem;
  }

/* with Animation */
  div[class^="toHalf"] {
    width: 100%; height: auto;
    font-size: 0.875rem;
    overflow: auto;
    -ms-overflow-style: none; scrollbar-width: none;
  }
    div[class^="toHalf"] h3 {padding: 1rem; text-align: center;}
    div[class^="toHalf"] table {width: 100%;}
    div.toHalfBox.tBox {margin-bottom: 0;}

  div[class^="toHalfImg"] {
    position: relative;
    width: 100%;
    margin: 0 auto;
    border-radius: 0.5rem;

    object-fit: cover;
    background-position: 50% 50%;
    background-size: cover; background-repeat: no-repeat;
    overflow: hidden;
  }
  div.toHalfImgLtoR {
    transform: translateX(-50%); opacity: 0;
    transition: all 2s ease-in-out;
  }
  div.toHalfImgRtoL {
    transform: translateX(50%); opacity: 0;
    transition: all 2s ease-in-out;
  }
    .halfBoxes.active .toHalfImgLtoR,
    .halfBoxes.active .toHalfImgRtoL {
      transform: translateX(0); opacity: 1;
    }


@media screen and (min-width: 768px) {
  .halfBoxes {gap: 1.5rem;}
    .fullToHalfBox,
    div[class^="toHalf"], div[class^="toHalfImg"] {
      width: calc(100% / 2 - 0.75rem);
    }
    div[class^="toHalfImg"] {border-radius: 1rem;}

}

@media screen and (min-width: 1024px) {
  .halfBoxes {gap: 2rem;}
    .fullToHalfBox,
    div[class^="toHalf"], div[class^="toHalfImg"] {
      width: calc(100% / 2 - 1rem);
    }
}



#noMargin, #bothSide {width: 100%; padding-top: 3rem; overflow: hidden;}
  #noMargin .halfBoxes {
    align-items: flex-end; flex-direction: column-reverse;
    max-width: 75rem; margin: 0 auto;
  }
  
    #noMargin .halfBoxes:nth-child(2) {padding-top: 3rem; flex-direction: column;}
    #noMargin .halfBoxes .toHalfImgLtoR,
    #noMargin .halfBoxes .toHalfImgRtoL {
      height: 15rem; aspect-ratio: unset;
      margin: 0; border-radius: 0;
      background-size: cover;
    }
    #noMargin .halfBoxes div.toHalfBox {margin: 0 auto; width: calc(100% - 2rem);}
    #noMargin .tBox {margin-bottom: 0;}
      #noMargin p.wspl {width: fit-content; margin: 0 auto; padding-top: 0.5rem;}


@media screen and (min-width: 768px) {
  #noMargin {padding: 0;}
    #noMargin .halfBoxes .sectionTitBox {padding-bottom: 1.5rem;}

    #noMargin .halfBoxes,
    #noMargin .halfBoxes:nth-child(2) {
      flex-direction: row;
      align-items: center; justify-content: space-between;
      gap: 0;
    }

    #noMargin .halfBoxes .toHalfImgLtoR,
    #noMargin .halfBoxes .toHalfImgRtoL {height: -webkit-fill-available;}

    #noMargin .halfBoxes:nth-child(2) {padding-top: 0;}
      #noMargin .halfBoxes div[class^="toHalf"],
      #noMargin .halfBoxes div[class^="toHalfImg"] {width: calc(100% / 2);}
      #noMargin .halfBoxes .toHalfBox {margin: 0; padding: 4.5rem 2rem;}
}





#rankSch .tBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
  #rankSch tbody td:first-child {text-align: center;}
  #rankSch tbody td:last-child {padding: 0 .5rem;}
  #rankSch table a.toGoBtn {
    padding: 0.25rem .75rem;
    border-radius: 0; font-size: .875rem;
  }
  #page-search {
    display: flex;
    gap: 4px;
    background: #fff;
    padding: 4px;
    z-index: 9999;
  }
    #searchInput {
      width: 110px;
      padding: 4px;
      font-size: 12px;
    }
    #searchBtn {
      padding: 4px 6px;
      font-size: 12px;
      cursor: pointer;
    }
    .schLight {background-color: yellow;}


@media screen and (min-width: 1440px) {
    #rankSch .tBox {justify-content: flex-end;}  
}





.mwn {min-width: none;}
.mw48 {min-width: 3rem;}
.mw64 {min-width: 4rem;}
.mw80 {min-width: 5rem;}
.mw96 {min-width: 6rem;}
.mw112 {min-width: 7rem;}
.mw128 {min-width: 8rem;}
.mw160 {min-width: 10rem;}
.mw176 {min-width: 11rem;}
.mw192 {min-width: 12rem;}
.mw224 {min-width: 14rem;}
.mw240 {min-width: 15rem;}
.mw256 {min-width: 16rem;}
.mw288 {min-width: 18rem;}
.mw320 {min-width: 20rem;}
.mw400 {min-width: 25rem;}
.mw480 {min-width: 30rem;}
.mw512 {min-width: 32rem;}
.mw560 {min-width: 36rem;}
.mw640 {min-width: 40rem;}
.mw800 {min-width: 50rem;}



.maTop {margin-top: 112px;} /* 설치된 위치(주로 게시판) : bbs/search.php - KE✓ */

/********** BOTTON - KE✓ **********/

.more_bc-s {
  display: inline-block;
  margin: 0 auto; padding: 0.875rem 1rem;
  border: 1px solid var(--c-secondary); border-radius: 10px;
  font-size: 1rem; font-weight: 500;
  background-color: var(--c-secondary);
  color: #fff;
  text-align: center;
}
.more_bc-s:hover {
  border: 1px solid var(--c-secondary);
  background-color: #FFF; color: var(--c-secondary);}



.moreBtnBox {
  display: flex; flex-direction: row-reverse;
  gap: 0.5rem;    
}
  .toGoBtn {
    display: block;
    width: fit-content;
    margin: 0 auto; padding: 0.5rem 1rem;
    border: var(--c-primary) solid 1px; border-radius: 50px;
    background-color: var(--c-primary); color: #FFF;
    box-shadow: 2px 2px 6px rgb(0 0 0 / 25%);
    cursor: pointer;
  }
    .toGoBtn:hover, .toGoBtn:active {
      color: var(--c-primary); background-color: #FFF;
      font-weight: 500; box-shadow: none;
    }

  .toBtn, .moreBtn, .moreConsBtn {
    padding: 0.5rem 1rem;
    border: var(--c-primary) solid 1px;
    border-radius: 50px;
    box-shadow: 2px 2px 6px rgb(0 0 0 / 15%);
    cursor: pointer;
  }
  .toBtn, .moreConsBtn {color: var(--c-primary); background-color: #FFF;}

  .moreBtn, .toBtn:hover, .moreConsBtn:hover {color: #FFF; background-color: var(--c-primary);}
  .toBtn:hover, .moreBtn:hover, .moreConsBtn:hover {font-weight: 600; box-shadow: none;}
  
  .moreBtn:hover {border: #094b77 solid 1px; background-color: #094b77;}
  .moreBtn.active {
    border: var(--c-primary) solid 1px;
    color: var(--c-primary);
    background-color: #FFF;
    box-shadow: 4px 4px 6px rgb(0 0 0 / 15%);
    font-weight: normal;
  }

@media screen and (min-width: 768px) {
  .more_bc-s {padding: 1rem 1.5rem;}
}

@media screen and (min-width: 1024px) {
  .more_bc-s {padding: 1rem 2rem;}
}



/* 1 */
.btn_1 {
  position: relative;
  display: inline-block;
  width: 130px; height: 40px;
  padding: 0;
  border: none;
  border-radius: 5px;
  font-weight: 500; text-align: center;
  line-height: 42px;
  color: #fff;
  background: transparent;
  background: var(--c-primary);
  
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
    7px 7px 20px 0px rgba(0,0,0,.1),
    4px 4px 5px 0px rgba(0,0,0,.1);
  transition: all 0.3s ease;
  outline: none;
  cursor: pointer;
}
.btn_1 span {
  position: relative;
  display: block;
  width: 100%; height: 100%;
}
.btn_1:before,
.btn_1:after {
  position: absolute; right: 0; top: 0;
  content: "";
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn_1:before {height: 0%; width: 2px;}
.btn_1:after {width: 0%; height: 2px;}
.btn_1:hover {background: transparent; box-shadow: none;}
.btn_1:hover:before {height: 100%;}
.btn_1:hover:after {width: 100%;}
.btn_1 span:hover {color: rgba(2,126,251,1);}
.btn_1 span:before,
.btn_1 span:after {
  position: absolute; left: 0; bottom: 0;
  content: "";
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.btn_1 span:before {width: 2px; height: 0%;}
.btn_1 span:after {width: 0%; height: 2px;}
.btn_1 span:hover:before {height: 100%;}
.btn_1 span:hover:after {width: 100%;}




/********** CARD - KE✓ **********/

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}
  .card {
    padding: 1.25rem;
    border:1px solid rgba(0, 110, 184, 0.35); border-radius: 12px;
    background: #FFF; color: #353535;
    box-shadow: 0 4px 10px rgba(0, 110, 184, 0.15);
    line-height: 1.5;
  }
  .card:hover {border: 1px solid var(--c-primary); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);}
    .card h4 {
      margin-bottom: 0.75rem;
      color: var(--c-primary);
    }



/********** COMMON SECTION - KE✓ **********/
#midBanner {
  padding:  2.5rem 0;
  background-size: cover; background-position: 50%;
}
  #midBanner > .frame {width: 85%; max-width: 800px; height: auto;}
    #midBanner > .frame > .secTitBox {text-align: right;}
    #midBanner > .frame > .secTitBox > h3 {display: block; margin-right: 0.5rem;}
    #midBanner > .frame > .secTitBox > p {
      padding: 0.75rem 0 1rem;
      font-size: 0.875rem; line-height: 1.35;
      white-space: pre-line;
    }



#why .paraVer1 {text-align: center;}
  #why .paraVer1 p {font-size: 0.75rem; white-space: pre-line;}



#recomFor {
  display: flex; flex-direction: column;
  justify-content: center;
}
  #recomFor > .sectionTitBox {padding-bottom: 0;}
  #recomFor .frame {font-size: 0;}
    #recomFor .fullToHalfBox {display: block; vertical-align: middle;}
    #recomFor .fullToHalfBox:first-child {text-align: right;}
    #recomFor .fullToHalfBox img {width: 100%; max-width: 360px;}



#effect {background-image:none;}
  #effect .halfBoxes .paraVer1 {}
  #effect .halfBoxes .halfImg1 {
    height: 240px; margin-bottom: 1rem;
    border-radius: 1rem;
    background-size: cover;
  }


@media screen and (min-width: 768px) {
  #midBanner {padding: 60px 0 5rem;}
  #midBanner > .frame {width: 75%;}
  #midBanner > .frame > .secTitBox > p {font-size: 1rem; line-height: 1.5;}

  #why .paraVer1 p {font-size: 0.875rem;}


  #recomFor {height: auto;}
    #recomFor .sectionTitBox {margin-bottom: 0;}
    #recomFor .fullToHalfBox, #effect .fullToHalfBox {display: inline-block;}
}

@media screen and (min-width: 1024px) {
  #recomFor .fullToHalfBox img {max-width: 400px; margin-right: 3rem;}
}



#bottom_banner {
  margin: 0; font-size: 1rem; line-height: 1.5;
  background-position: 50% 50%;
  background-size: cover; background-repeat: no-repeat;
  background: var(--c-secondBG);
}


#contact.halfBoxes {
  margin: 30px auto;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  gap: 0;
}
  #contact .contImg {
    width: 160px; height: 160px;
    margin: 1.5rem auto;
    background-position: 50% 50%;
    background-size: cover; background-repeat: no-repeat;
    background-image: url(https://aaauhak.co.kr/img/logo-aaa.png);
  }
  .contDetail_1 {
    padding: 1rem;
    border-top: 3px solid var(--c-secondary);
    border-left: 0;
  }



@media screen and (min-width: 520px) {
  .contDetail_1 {padding: 1.5rem;}
}

@media screen and (min-width: 768px) {
  #contact {padding: 0;}
    #contact > div.fullToHalfBox {
      vertical-align: middle; line-height: 1.5;
    }
      .contImg {background-size: contain;}
      .contDetail_1 {
        padding: 1rem;
        border-top: 0;
        border-left: 3px solid var(--c-secondary);
      }
      .contDetail_1 > h2 {font-size: 1.25rem; line-height: 1.75;}
}





@media screen and (min-width: 375px) {
}

@media screen and (min-width: 520px) {
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
}

@media screen and (min-width: 1600px) {
}