:root {
  --main-color: #fd9602;
  --bg-color: #F9F9F9;
  --sub-bg-color: #FFD700;
  --black-color: #222222;
  --sub-txt-color: #555555;
  --border-color: #DBDBDB;
  --sub-border-color: #5b4c2b;
}

@media screen and (max-width: 1699px) {
  .lg-wrap {
      padding: 0 8px;
  }
  .wrap {
      padding: 0 8px;
  }
  .sub-menu .wrap {
    padding: 0;
  }
  /*header*/
  .header-wrap {
      padding: 0 8px;
  }
  .header-wrap .user {
      gap: 24px;
  }
  /*footer*/
  .footer-wrap {
      padding: 0 8px;
  }
}
@media screen and (max-width: 1023px) {
  main {
    padding-top: 128px;
  }
  /*header*/
  .mobile-wrap {
    display: flex;
  }
  header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .header-wrap {
    justify-content: center;
    height: auto;
    flex-direction: column;
    background-color: var(--sub-bg-color);
  }
  .header-wrap > a {
    width: 200px;
    padding: 4px 0;
  }
  .header-wrap .h-social {
    display: none;
  }
  .header-wrap .user {
    display: none;
  }
  .gnb-wrap {
    width: 100dvw;
    height: calc(100dvh - 128px);
    position: absolute;
    top: 129px;
    left: 0;
    overflow: hidden;
    display: none;
  }
  .gnb {
    height: calc(100dvh - 128px);
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #0b1b44;
  }
  .gnb > li {
    border-top: 1px solid #3c4969;
    display: flex;
    position: unset;
  }
  .gnb > li > a {
    text-align: left;
    padding: 0 8px;
    width: 50%;
    font-size: 14px;
    pointer-events: none;
  }
  .gnb-sub {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    gap: 0;
    background-color: #243257;
    top: 60px;
    left: unset;
    right: 0;
    transform: unset;
    padding: 0;
    display: none;
  }
  .gnb-sub.on {
    display: flex !important;
  }
  .gnb-sub li a {
    font-size: 14px;
    height: 61px;
    line-height: 60px;
    text-align: left;
    padding: 0 8px;
    border-top: 1px solid #3c4969;
  }
  .gnb:hover .gnb-sub {
    display: none;
  }
  .gnb > li:hover > .gnb-sub {
    display: flex;
  }
  .mobile-user {
    display: flex;
  }

  /*메인*/
  .main-slider {
      aspect-ratio: 16 / 9;
      height: unset;
  }
  .middle-area {
      flex-direction: column;
  }
  .next-match {
      width: 100%;
  }
  .next-match .item-tit {
      text-align: center;
  }
  .main-rank {
      width: 100%;
  }
  .sponsor-area .box {
      flex-direction: column;
  }
  .main-notice {
      width: 100%;
  }

  /*페이지*/
  .greeting-area .txt .lg-txt {
      font-size: 24px;
  }
  .history-area .tab-menu button {
      font-size: 24px;
  }
  .history-area .tab-cont .history-list {
      gap: 24px;
  }
  .history-area .tab-cont .item > p {
      font-size: 24px;
  }
  .symbol-area .txt p:first-child b {
      font-size: 24px;
  }
  .symbol-area .txt p:first-child {
      font-size: 24px;
  }
  .symbol-area .txt p:nth-child(2) {
      font-size: 48px;
  }
  .symbol-area .txt p:nth-child(3) {
      font-size: 32px;
  }
  .symbol-area .txt p:nth-child(4) {
      font-size: 16px;
  }
  .sponsor-area .sponsor-expl {
      justify-content: space-between;
      gap: 24px;
  }
  .sponsor-area .sponsor-expl .txt p:first-child {
      font-size: 32px;
  }
  .sponsor-area .sponsor-expl .txt p:first-child br {
      display: none;
  }
  .sponsor-area .sponsor-expl .txt p:nth-child(2) {
      font-size: 16px;
  }
  .sponsor-area .sponsor-expl .txt p:nth-child(2) br {
      display: none;
  }

  .board-area .view .tit {
      font-size: 32px;
  }
  .board-area .file ul li {
      font-size: 14px;
  }
  .photo-list {
      gap: 48px 16px;
      flex-wrap: wrap;
  }
  .photo-list li {
      width: calc(100% / 4 - 12px);
  }

  .staff-area .staff-grid .item span:first-child {
      font-size: 16px;
  }
  .staff-area .staff-grid .item {
      font-size: 20px;
  }
  .result-box .stadium {
      font-size: 12px;
  }
  .result-box .score {
      flex-direction: column;
  }
  .about-area .step .history {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
  }
  .about-area .step .history .history-item > span {
      font-size: 16px;
  }
  .about-area .step .history .history-item > p {
      font-size: 14px;
  }
  .business-list .business-item > span {
      font-size: 14px;
  }
  .business-list .business-item .business-content {
      font-size: 14px;
  }
  .about-area .step .tit span {
      font-size: 48px;
  }
  .about-area .step .tit p {
      font-size: 20px;
  }
  .register-item .table-box table th {
      width: 140px !important;
  }
  .search-box {
    flex-direction: column-reverse;
    gap: 12px;
  }
}
@media screen and (max-width: 767px) {
  /*footer*/
  .footer-wrap .terms-box a {
    font-size: 14px;
  }
  .footer-wrap .bottom-box .wrap {
    flex-direction: column;
    gap: 24px;
    padding: 24px 8px;
  }
  .footer-wrap .bottom-box .info {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .footer-wrap .bottom-box .info ul li {
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
  }
  .footer-wrap .terms-box a:not(:last-child)::after {
    margin: 0 8px;
  }
  /*메인*/
  .main-sub-tit {
    font-size: 24px;
    text-align: center;
    line-height: 1.3;
  }
  .bottom-area .main-social a {
    width: 60px;
    height: 60px;
  }
  .sponsor-area .tit {
    font-size: 24px;
  }
  .sponsor-area .box .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .main-rank ul li span {
    width: auto;
    min-width: auto;
    font-size: 12px;
  }
  .main-rank ul li span:first-child {
    font-size: 20px;
  }
  .next-match .item-tit {
    font-size: 20px;
  }
  .ball {
    width: 48px;
  }
  .next-match .item .team .box {
    gap: 12px;
  }
  .next-match .item .team .box > p {
    font-size: 14px;
  }
  .next-match .item .team .box img {
    height: 120px;
  }
  .next-match .item .team > span {
    font-size: 32px;
  }
  .next-match .item .date-info {
    font-size: 14px;
  }
  /*페이지*/
  .page-name {
    font-size: 24px;
  }
  .greeting-area {
    flex-direction: column;
  }
  .greeting-area .txt .lg-txt {
    text-align: center;
  }
  .greeting-area .txt .lg-txt br {
    display: none;
  }
  .greeting-area .txt .sm-txt {
    text-align: center;
  }
  .greeting-area .img-box {
    margin: 0 auto;
  }
  .greeting-area .img-box img {
    max-width: 100%;
  }
  .history-area .tab-menu button {
    font-size: 20px;
  }
  .history-area .tab-cont .item > p {
    font-size: 20px;
  }
  .sponsor-area .sponsor-expl {
    flex-direction: column;
    align-items: center;
  }
  .sponsor-area .sponsor-expl .txt {
    width: 100%;
  }
  .sponsor-area .sponsor-expl .txt p:first-child {
    font-size: 24px;
    text-align: center;
  }
  .sponsor-area .sponsor-expl .txt p:nth-child(2) {
    text-align: center;
  }
  .sponsor-area .sponsor-expl .img-box {
    max-width: 100%;
  }
  .sponsor-area .sponsor-grid {
    gap: 12px;
  }
  .photo-list {
    gap: 48px 12px;;
  }
  .photo-list li {
    width: calc(100% / 3 - 10px);
  }
  .board-area .view .tit {
    font-size: 24px;
  }
  .board-area .view .view-info {
    font-size: 14px;
  }
  .staff-area .staff-grid {
    gap: 12px;
  }
  .staff-area .staff-grid .item {
    padding: 16px;
  }
  .staff-area .staff-grid .item span:first-child {
    font-size: 14px;
  }
  .staff-area .staff-grid .item {
    font-size: 16px;
  }
  .result-box .stadium {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .register-item .table-box table th > button {
    padding: 12px;
  }
  .bank-box .bank-num {
    flex-direction: column;
  }
  .bank-box .bank-num .bank-item {
    width: 100%;
  }
  .sub-menu button span {
    font-size: 14px;
  }
  .sub-banner > p {
    width: 100%;
    padding: 0 12px;
    font-size: 38px;
    text-align: center;
  }
  .register-btn-wrap {
    margin-top: 24px;
  }
  .bank-box .call {
    font-size: 14px;
  }
}
@media screen and (max-width: 480px) {
  /*메인*/
  .main-sub-tit {
    font-size: 20px;
    word-break: keep-all;
  }
  .sponsor-area .tit {
    font-size: 20px;
  }
  .sponsor-area .sub-tit {
    font-size: 14px;
  }
  .main-notice > a {
    font-size: 20px;
  }
  .main-notice > ul li a .notice-tit {
    font-size: 14px;
  }
    /*페이지*/
    .sub-banner > p {
        font-size: 28px;
    }
    .page-name {
        margin: 48px 0;
    }
    .form-item .input-grid {
      grid-template-columns: repeat(1, 1fr);
    }
    .form-item .input-grid .id-chk-btn {
      width: 100%;
    }
    .form-item .input-grid .add-btn {
      width: 100%;
    }
    .board-area .file ul li {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }
    .gray-box {
      font-size: 20px;
    }
    .photo-list li {
        width: calc(100% / 2 - 6px);
      }

}