@charset "utf-8";

.pageTitBox {background-image: url(https://www.aaauhak.co.kr/img/freepik/bg/midsection-woman-reading-2560x360.jpg);}

#ranking table {width: 100%; max-width: 60rem;}
  #ranking p.wspl {width: fit-content; margin: 0 auto; padding-top: 1rem;}
  #ranking table tr td:first-child {text-align: center;}

#noMargin {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 .toHalfImgLtoR {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;}
      

#full-BG {background-size: cover;}
  #full-BG .halfBoxes {flex-direction: column-reverse;}
    #full-BG .tBor_1 thead > tr {background: var(--c-secondBG);}
    #full-BG .tBor_1 tbody > tr {background: #ffffffa1;}

#setsApart .flexBoxes {max-width: 75rem;}
  #setsApart .flexBox {
    align-items: flex-start; justify-content: flex-start;
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(0, 110, 184, 0.35);
    box-shadow: 0 4px 10px rgba(0, 110, 184, 0.15);
  }
    #setsApart .flexBox p.wspl {padding: 0; text-align: left;}


@media screen and (min-width: 375px) {
  .tabMenuPanel {gap: 0.25rem;}
}

@media screen and (min-width: 768px) {
  .tabMenuPanel {gap: 0.5rem;}

  #noMargin {padding: 0;}
    #noMargin .halfBoxes {
      flex-direction: row;
      align-items: center; justify-content: flex-start;
    }
      #noMargin .halfBoxes .toHalfImgLtoR {aspect-ratio: 1 / 2;}
      #noMargin .halfBoxes div.toHalfBox {margin: 0; width: calc(50% - 2rem);}

    #full-BG .halfBoxes {flex-direction: row;}
      #full-BG .toHalfBox {height: auto;}

  #setsApart .flexBox {width: calc(100% / 2 - 1.125rem);}
}

@media screen and (min-width: 1440px) {
  .tabMenuPanel {gap: 1rem;}

  #full-BG .frame {max-width: 80rem; padding: 3rem 2rem;}

  #setsApart .flexBox {width: calc(100% / 3 - 1.125rem); padding: 1.5rem;}
    .flexBox h4 {font-size: 1.35rem;}
}