: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;
}
* {
  box-sizing: border-box;
  /*
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  */
  -webkit-tap-highlight-color : transparent;
}
html {
  scroll-behavior : smooth;
}
body {
  font-family: "Noto Sans KR", "Open Sans";
  position: relative;
}

/*공통*/
main {
  min-height: calc(100vh - 481px);
}
.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.bg-wrap {
  background-color: #000;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

/* 배경 이미지 오버레이 */
.bg-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.bg-wrap .wrap {
  position: relative;
  z-index: 2;
}
.lg-wrap {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
}
.sm-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.1);
  background-color: var(--main-color);
  cursor: pointer;
  z-index: 98;
}
.top-btn img {
  width: 20px;
  height: 20px;
}


/*header*/
header {
  background-color: var(--sub-bg-color);
  position: relative;
}
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  height: 173px;
  background-color: var(--bg-sub-color);
  padding-top: 24px;
}
.header-wrap .h-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-wrap .h-social a {
  display: block;
}
.header-wrap .user {
  display: flex;
  align-items: center;
  gap: 40px;
}
.header-wrap .user a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
}


.gnb-wrap {
  background-color: var(--sub-bg-color);
  border-top: 1px solid var(--sub-border-color);
  border-bottom: 1px solid var(--sub-border-color);
}
.gnb::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 2;
  width: 100%;
  height: 0;
  background-color: var(--sub-bg-color);
}
.gnb:hover::after {
  height: 250px;
}
.gnb {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.gnb > li {
  width: 100%;
  position: relative;
}
.gnb > li > a {
  display: block;
  text-align: center;
  font-family: 'DWImpactamin', sans-serif;
  background-color: transparent;
  color: #fff;
  font-size: 18px;
  letter-spacing: -0.010em;
  line-height: 60px;
}
.gnb > li:hover > a {
  background-color: var(--main-color);
}
.gnb:hover .gnb-sub {
  display: flex;
}
.gnb-sub {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
  display: none;
}
.gnb-sub li a {
  display: block;
  text-align: center;
  color: #fff;
}
.gnb-sub li:hover a {
  text-decoration: underline;
}


/*footer*/
footer {
  background-color: #232323;
}
.footer-wrap {
  width: 100%;
}
.footer-wrap .terms-box {
  background-color: #1C1C1C;
  border-bottom: 1px solid #2D2D2D;
}
.footer-wrap .terms-box .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.footer-wrap .terms-box a {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.footer-wrap .terms-box a:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0 20px;
}
.footer-wrap .bottom-box .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 44px 0 60px;
}
.footer-wrap .bottom-box .info {
  display: flex;
  align-items: center;
  gap: 40px;
}
.footer-wrap .bottom-box .info ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-wrap .bottom-box .info ul li {
  font-size: 14px;
  color: #fff;
}
.footer-wrap .bottom-box .f-social {
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer-wrap .bottom-box .f-social a {
  display: block;
}


/*메인*/
.main-slider {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.main-slider .swiper-slide {
  width: 100%;
  height: 100%;
}
.main-slider .swiper-slide .img-box {
  width: 100%;
  height: 100%;
}
.main-slider .swiper-slide .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.main-tit {
  font-size: 45px;
  font-weight: 900;
  color: #ee2d23;
  width: 100%;
  text-align: center;
}
.main-tit span {
  display: inline-block;
  color: #000;
}
.main-tit::after {
  content: "";
  display: block;
  width: 250px;
  height: 3px;
  background-color: var(--main-color);
  margin: 15px auto 25px;
}
.main-gi {
  background: url('../images/common/main_gallery_bg.jpg') no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 0;
}
.main-gi .gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 110px;
}
.main-gi .gallery-grid .item {
  position: relative;
  width: 100%;
}
.main-gi .gallery-grid .item.empty {
  grid-column: auto / span 5;
  text-align: center;
  padding: 80px 16px;
  font-weight: 600;
}
.main-gi .gallery-grid .item .img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.main-gi .gallery-grid .item .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-gi .gallery-grid .item .content {
  padding: 12px 8px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.main-gi .gallery-grid .item .content span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}


.main-gi .instagram-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 110px;
}
.main-gi .instagram-grid .item {
  position: relative;
  width: 100%;
}
.main-gi .instagram-grid .item.empty {
  grid-column: auto / span 5;
  text-align: center;
  padding: 80px 16px;
  font-weight: 600;
}
.main-gi .instagram-grid .item .img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.main-gi .instagram-grid .item .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.main-gi .instagram-grid .item .content {
  padding: 12px 8px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.main-gi .instagram-grid .item .content span {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}



.main-youtube {
  padding: 120px 0;
  background: url('../images/common/main_bn_bg.jpg') no-repeat center;
  background-size: cover;
}
.main-youtube .lg-wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.main-youtube .main-video {
  width: 45%;
  min-width: 45%;
}
.main-youtube .main-video iframe {
  width: 100%;
  height: 100%;
}
.main-youtube .sub-video {
  width: 100%;
  display: flex;
  gap: 20px;
}
.main-youtube .sub-video .video {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.main-youtube .sub-video .video iframe {
  width: 100%;
  flex: 1;
}
.main-youtube .sub-video .quick {
  display: flex;
  flex-direction: column;
  gap: 20px;;
}
.main-youtube .sub-video .quick a {
  display: block;
}
.main-youtube .sub-video .quick a img {
  min-width: 100%;
}


.bottom-area {
  padding: 80px 0;
}
.main-sub-tit {
  font-size: 35px;
  color: #484848;
  letter-spacing: -2px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-sub-tit::after {
  content: "";
  display: block;
  background-color: #000;
  width: 100%;
  max-width: 700px;
  height: 1px;
  margin: 45px auto 25px;
}

.bottom-area .main-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}
.bottom-area .main-social a {
  display: block;
}

.sponsor-area {
  padding-bottom: 80px;
}
.sponsor-area .tit {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 15px;
}
.sponsor-area .sub-tit {
  font-size: 17px;
  font-weight: 400;
  color: #a1a1a1;
  line-height: 1.3;
  letter-spacing: -1px;
  text-align: center;
  margin-bottom: 40px;
}

.sponsor-area .box {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.sponsor-area .box .grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.sponsor-area .box .grid .item {
  border: 1px solid var(--border-color);
  position: relative;
}
.sponsor-area .box .grid .item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.sponsor-area .box .grid .item img {
  width: calc(100% - 16px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-notice {
  display: flex;
  flex-direction: column;
}
.main-notice > a {
  display: block;
  font-size: 24px;
  font-weight: 600;
  padding-bottom: 15px;
}
.main-notice > ul {
  border-top: 2px solid #000;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}
.main-notice > ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}
.main-notice > ul li a:hover {
  color: #3170bf;
}
.main-notice > ul li:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.main-notice > ul li a .notice-tit {
  font-weight: 400;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.main-notice > ul li a .notice-date {
  display: inline-block;
  font-weight: 300;
  color: #222;
  white-space: nowrap;
}


.main-score {
  background: url('../images/common/main_score_bg.jpg') no-repeat center;
  padding: 45px 0;
}
.main-score .wrap {
  position: relative;
}
.score-slider {
  width: 100%;
  overflow: hidden;
}
.score-slider .swiper-wrapper {
  align-items: center;
  min-height: 400px;
  padding: 20px 0;
}
.score-slider .swiper-slide {
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  transition: all 200ms linear;
  transform: scale(0.9);
}
.score-slider .swiper-slide.swiper-slide-active {
  border: 3px solid #cdb9bc;
  color: #000;
  background: #fff;
  transform: scale(1.1);
}
.score-slider .date {
  font-size: 24px;
  font-weight: 700;
  color: #ffd800;
  padding: 8px;
  text-align: center;
  padding: 20px;
}
.score-slider .swiper-slide.swiper-slide-active .date {
  background-color: #cb1f15;
  color: #fff;
  padding: 12px 20px;
}
.score-slider .league {
  margin-top: 15px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  display: none;
}
.score-slider .swiper-slide.swiper-slide-active .league {
  display: flex;
}
.score-slider .league .emblem img {
  width: 100%;
  max-width: 50px;
  max-height: 50px;
}
.score-slider .league > span {
  display: inline-block;
  font-size: 20px;
}
.score-slider .score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.score-slider .score .vs {
  font-size: 36px;
}
.score-slider .score .emblem {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}
.score-slider .score .home .emblem {
  flex-direction: column-reverse;
}
.score-slider .swiper-slide.swiper-slide-active .score .emblem {
  flex-direction: row;
}
.score-slider .score .emblem .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.score-slider .score .emblem img {
  width: 100%;
  max-width: 80px;
  max-height: 85px;
  display: none;
}
.score-slider .swiper-slide.swiper-slide-active .score .emblem img {
  display: block;
}
.score-slider .score .emblem .goal {
  display: inline-block;
  font-size: 50px;
  font-weight: 600;
}
.score-slider .score .home {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.score-slider .score .away {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}
.score-slider .score .name {
  display: inline-block;
}
.score-slider .stadium {
  margin-top: 10px;
  text-align: center;
}
.score-slider .view-more {
  display: block;
  text-align: center;
  border: 1px solid #fff;
  width: 100%;
  max-width: 140px;
  height: 40px;
  line-height: 35px;
  margin: 20px auto;
}
.score-slider .swiper-slide.swiper-slide-active .view-more {
  color: #fff;
  background-color: #2d383c;
  border: 1px solid #2d383c;
}
.swiper-arrow-box {
  width: calc(100% + 116px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.swiper-arrow-box span {
  display: inline-block;
  cursor: pointer;
}


/*페이지*/
.sub-banner {
  width: 100%;
  height: 280px;
  background: url('../images/common/2025Banner.png');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
}
.sub-banner > p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 48px;
  line-height: 1.2;
}

.sub-menu {
  display: flex;
  align-items: center;
  background-color: var(--main-color);
  border-bottom: 1px solid #0b1b44;
}
.sub-menu .wrap {
  display: flex;
  align-items: center;
  height: 60px;
}
.sub-menu .home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-left: 1px solid #0b1b44;
  border-right: 1px solid #0b1b44;
}
.sub-menu button {
  width: 100%;
  height: 100%;
  max-width: 240px;
  border-right: 1px solid #0b1b44;
  position: relative;
  margin-left: -1px;
}
.sub-menu button span {
  display: block;
  font-size: 16px;
}
.sub-menu button img {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.sub-menu ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #000;
  position: absolute;
  z-index: 5;
  top: 100%;
  display: none;
}
.sub-menu ul li a {
  display: block;
  text-align: left;
  padding: 0 30px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 30px;
  color: #fff;
  font-size: 16px;
  border-top: 1px solid #3c4969;
}

.page-name {
  font-size: 2em;
  line-height: 1;
  font-weight: 700;
  margin: 65px 0 55px 0;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}
.page-name::before {
  display: block;
  content: "";
  width: 46px;
  height: 3px;
  background-color: #222;
  margin: 0 auto 20px;
}


.greeting-area {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 25px;
}
.greeting-area .txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.greeting-area .txt .lg-txt {
  font-size: 2em;
  line-height: 1.35;
  font-weight: 300;
  letter-spacing: -1px;
  word-break: keep-all;
}
.greeting-area .txt .lg-txt b {
  font-weight: bold;
}
.greeting-area .txt .sm-txt {
  word-break: keep-all;
  line-height: 1.5;
}
.greeting-area .img-box img {
  width: 100%;
  max-width: 400px;
}
.greeting-area .img-box .sign {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.greeting-area .img-box .sign span {
  display: inline-block;
  font-family: 'Nanum Pen Script';
  font-size: 48px;
  font-weight: normal;
}

.history-area {
  margin-bottom: 100px;
}
.history-area .tab-menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.history-area .tab-menu button {
  width: 100%;
  font-size: 38px;
  font-weight: 400;
  color: #999;
  line-height: 1;
  display: block;
  padding: 20px 0;
  font-family: 'Frank Ruhl Libre Medium';
  border: 0;
  border-bottom: 1px solid var(--border-color);
}
.history-area .tab-menu button.on {
  color: #000;
}
.history-area .tab-cont {
  display: none;
}
.history-area .tab-cont.on {
  display: block;
}
.history-area .tab-cont .history-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px;
  margin-top: 60px;
}
.history-area .tab-cont .item > p {
  font-size: 32px;
  font-weight: 400;
  font-family: 'Frank Ruhl Libre Medium';
  text-align: center;
  line-height: 1.2;
}
.history-area .tab-cont .item .img-box {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
  margin: 12px 0 24px;
}
.history-area .tab-cont .item .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.history-area .tab-cont .item ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.history-area .tab-cont .item ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  line-height: 1.2;
}
.history-area .tab-cont .item ul li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--main-color);
}

.org-area {
  margin-bottom: 25px;
}
.org-area .img-box {
  width: 100%;
  border: 1px solid var(--main-color);
  padding: 30px;
  text-align: center;
}
.org-area .img-box img {
  object-fit: contain;
}

.symbol-area {
  margin-bottom:25px;
}
.symbol-area .symbol-box {
  width: 100%;
  border: 1px solid var(--main-color);
  padding: 30px;
  text-align: center;
  margin-bottom: 60px;
}

.symbol-area .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.symbol-area .txt p {
  text-align: center;
  line-height: 1.2;
}
.symbol-area .txt p:first-child {
  font-size: 29px;
  font-weight: 200;
}
.symbol-area .txt p:first-child b {
  font-size: 35px;
  font-weight: 600;
}
.symbol-area .txt p:nth-child(2) {
  font-size: 80px;
  font-weight: 700;
  color: var(--main-color);
  margin-top: 20px;
}
.symbol-area .txt .cp-txt {
  margin: 50px 0 !important;
  font-size: 20px !important;
  font-weight: bold;
  color: var(--main-color);
}
.symbol-area .txt p:nth-child(3) {
  font-size: 45px;
  font-weight: 700;
  margin-top: 20px;
}
.symbol-area .txt p:nth-child(4) {
  font-size: 20px;
  font-weight: 300;
  margin-top: 40px;
}
.symbol-area .txt a {
  display: inline-block;
  min-width: 240px;
  height: 60px;
  background-color: #ffb61d;
  padding: 0 20px;
  color: #fff;
  font-weight: 700;
  line-height: 60px;
  text-align: center;
  overflow: hidden;
  position: relative;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  transition: .3s ease;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  margin-top: 60px;
}
.symbol-area .txt a::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #10632c;
  position: absolute;
  left: -100%;
  top: 0;
  transition: .5s ease;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  z-index: -1;
}
.symbol-area .txt a:hover::after {
  left: 0;
}

.symbol-area .kit-box {
  width: 100%;
  border: 1px solid var(--main-color);
  padding: 30px;
  text-align: center;
  margin: 80px 0 60px;
}

.stadium-area {
  margin: 20px 0;
}
.stadium-area .kakao-map {
  width: 100%;
}

.sponsor-area .sponsor-expl {
  display: flex;
  gap: 70px;
  margin-bottom: 36px;
}
.sponsor-area .sponsor-expl .txt {
  display: flex;
  flex-direction: column;
  gap: 16px;
  order: 1;
}
.sponsor-area .sponsor-expl .txt p:first-child {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
}
.sponsor-area .sponsor-expl .txt p:nth-child(2) {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #999;
}
.sponsor-area .sponsor-expl .img-box {
  width: 100%;
  max-width: 500px;
  border: 1px solid var(--border-color);
  padding: 20px;
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sponsor-area .sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 24px;
}
.sponsor-area .sponsor-grid .item {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px solid var(--border-color);
}
.board-area .num-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.board-area .num {
  font-size: 15px;
  font-weight: 400;
  color: #4e546f;
}

.board-list {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--main-color);
}
.board-list li.empty {
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  padding: 24px 0;
}
.board-list li:first-child {
  background-color: var(--bg-color);
}
.board-list li {
  border-bottom: 1px solid var(--border-color);
  padding: 15px 0;
  font-size: 13px;
  display: flex;
  align-items: center;
}
.board-list li:hover {
  background-color: var(--bg-color);
}
.board-list li.th .cnt, .board-list li.th .date {
  color: var(--black-color);
}
.board-list li.th .tit {
  justify-content: center;
}
.board-list li .chk {
  width: 60px;
  text-align: center;
}
.board-list li .chk input[type="checkbox"] {
  cursor: pointer;
}
.board-list li .tit {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
}
.board-list li .writer {
  width: 90px;
  text-align: center;
}
.board-list li .cnt {
  width: 60px;
  text-align: center;
  color: #999;
}
.board-list li .date {
  width: 80px;
  text-align: center;
  color: #999;
}
.board-list li .tit a {
  display: flex;
  align-items: center;
  gap: 3px;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.board-list li .tit a .ct {
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.board-list li .notice-badge {
  display: inline-block;
  width: 25px;
  line-height: 16px;
  font-size: 12px;
  color: #fff;
  background: #990000;
  text-align: center;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
  white-space: nowrap;
}
.board-list li:hover .tit a {
  padding-left: 5px;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}
.search-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 40px;
}
.search {
  display: flex;
  align-items: center;
  border: 1px solid #999;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 38px;
}
.search select {
  width: 100%;
  max-width: 110px;
  height: 100%;
  border: none;
  border-right: 1px solid var(--border-color);
  padding: 0 10px;
}
.search .search-input {
  position: relative;
  width: 100%;
  height: 100%;
}
.search .search-input input {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0 30px 0 10px;
}
.search .search-input button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 15px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
}
.pagination button {
  width: 35px;
  font-size: 16px;
  font-weight: 700;
}
.pagination button:hover {
  color: #409EFF;
}
.pagination button:disabled {
  color: #C0C4CC;
  background-color: #FFF;
  cursor: not-allowed;
}
.pagination ul {
  display: flex;
  align-items: center;
}
.pagination ul li {
  width: 35px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.pagination ul li.on {
  color: var(--main-color);
}
.pagination ul li:hover {
  color: #409EFF;
}
.board-area .file {
  border: 1px solid var(--border-color);
  border-radius: 5px;
  overflow: hidden;
}
.board-area .file .box-tit {
  background-color: #f3f3f3;
  font-size: 18px;
  font-weight: 500;
  padding: 10px;
}
.board-area .file ul li.empty {
  justify-content: center;
  height: 34px;
  line-height: 34px;
}
.board-area .file ul {
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.board-area .file ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  padding: 5px 10px;
  position: relative;
}
.board-area .file ul li a {
  display: inline-block;
  font-weight: 700;
  color: #c89b43;
  text-decoration: underline;
}
.board-area .file ul li a:hover {
  text-decoration: none;
}
.board-area .file .right {
  font-size: 14px;
  color: #888;
}

.basic-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.basic-btn-wrap.justify-start {
  justify-content: flex-start;
}
.basic-btn-wrap.justify-center {
  justify-content: center;
}
.basic-btn-wrap .btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 30px 0 20px;
  font-size: 13px;
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
  -moz-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}
.basic-btn-wrap .btn.m-0 {
  margin: 0;
}
.basic-btn-wrap .btn.wc-btn {
  border: 1px solid #000;
}
.basic-btn-wrap .btn.wc-btn:hover {
  background: #a6a6a6;
  color: #fff;
  border: 1px solid #797979;
}
.basic-btn-wrap .btn.mc-btn {
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
  color: #fff;
}
.basic-btn-wrap .btn.mc-btn:hover {
  background: #955800;
  border: 1px solid #955800;
}
.basic-btn-wrap .btn.bc-btn {
  background-color: #000;
  color: #fff;
}
.basic-btn-wrap .btn.bc-btn:hover {
  background: #ff3746;
  color: #fff;
}

.board-area .view {
  padding-bottom: 50px;
}
.board-area .view .tit {
  font-size: 36px;
  line-height: 1.2;
}
.board-area .view .view-info {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0 15px;
  margin: 10px 0 20px;
  border-bottom: 1px solid var(--border-color);
  color: #666;
}
.board-area .view .view-info span:first-child {
  display: inline-block;
  font-weight: 700;
  color: #000;
}

.board-area .view-content {
  width: 100%;
  height: auto;
  min-height: 200px;
  margin: 10px 0 30px;
  word-break: break-all;
  overflow: hidden;
  line-height: 1.2;
}
.board-area .view-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.board-area .reply .reply-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: bold;
  color: #242424;
  padding: 10px 0;
}
.reply-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-color);
}
.reply-list li.empty {
  align-items: center;
  padding: 80px 0;
  color: #777;
}
.reply-list li {
  display: flex;
  flex-direction: column;
  padding-bottom: 12px;
}
.reply-list li:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}
.reply-list .info {
  width: 100%;
  height: 48px;
  font-size: 13px;
  font-weight: 500;
  color: #bbb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: not-allowed;
}
.reply-list .content {
  font-size: 13px;
  color: #303133;
  line-height: 1.769230769230769;
  background: #eee;
  padding: 15px;
}

.write {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 80px;
}
.write .type {
  display: flex;
  align-items: center;
  gap: 12px;
}
.write .type label {
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.write .type label input[type="checkbox"] {
  margin: 0;
}
.write .tit-box {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
}
.write .tit-box:has(input:focus) {
  border: 2px solid var(--main-color);
}
.write .tit-box input {
  font-size: 13px;
  color: #000;
  width: 100%;
  height: 100%;
  border: none;
  padding: 5px 30px 5px 5px;
}
.write .tit-box input:focus {
  padding: 5px 29px 5px 4px;
}
.write .file-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.write .file-box .file-btn {
  display: flex;
  align-items: center;
}
.write .file-box .file-btn label {
  font-size: 12px;
  border-radius: 3px;
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
  padding: 9px 15px;
  cursor: pointer;
}
.write .file-box .file-btn label:hover {
  opacity: .8;
}
.write .file-box .file-btn input[type="file"] {
  display: none;
}
.write .file-box ul {
  display: flex;
  flex-direction: column;
}
.write .file-box ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  cursor: pointer;
}
.write .file-box ul li:hover {
  background-color: #F5F7FA;
}
.write .file-box ul li .file-name {
  padding: 0 4px;
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #606266;
}
.write .file-box ul li:hover .file-name {
  color: #409EFF;
}
.write .file-box ul li .file-name i {
  font-weight: 400;
  color: #909399;
}
.write .file-box ul li .file-su {
  font-weight: 300;
  color: #67C23A;
}
.write .file-box ul li:hover .file-su {
  display: none;
}
.write .file-box ul li > button {
  display: none;
}
.write .file-box ul li:hover > button {
  display: block;
}
.write .file-box ul li > button i {
  color: #999;
}
.wm-btn-wrap {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.wm-btn-wrap button {
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
  text-align: center;
  font-size: 13px;
  color: #fff;
}
.wm-btn-wrap button:first-child {
  background: #969696;
}
.wm-btn-wrap button:nth-child(2) {
  background: #4c4f6f;
}

.photo-list {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 60px 20px;
}
.photo-list li {
  width: calc(100% / 4 - 15px);
}
.photo-list li.empty {
  width: 100%;
  text-align: center;
  padding: 30px 0;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
}
.photo-list li a {
  display: block;
  position: relative;
}
.photo-list li .img-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}
.photo-list li input[type="checkbox"] {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.photo-list li .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: .1s ease-in-out;
}
.photo-list li:hover .img-box img {
  transform: scale(1.1);
  transition: .1s ease-in-out;
}
.photo-list li .img-box iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-list li .tit {
  font-size: 12px;
  font-weight: bold;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 10px 0 0;
}
.photo-list li .img-box .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  transition: .1s ease-in-out;
}
.photo-list li:hover .img-box .cover {
  opacity: 1;
  transition: .1s ease-in-out;
}
.photo-list li .img-box .cover::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.photo-list li .img-box .cover .info {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: #fff;
  font-style: italic;
  position: relative;
  z-index: 2;
}
.photo-list li .img-box .cover .writer {
  font-size: 14px;
  color: #fff;
  position: relative;
  z-index: 2;
}

.staff-area .staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 30px;
}
.staff-area .staff-grid .item {
  border: 1px solid var(--border-color);
  padding: 30px;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: center;
}
.staff-area .staff-grid .item span:first-child {
  display: inline-block;
  width: max-content;
  height: 36px;
  line-height: 36px;
  background-color: #ffb61d;
  font-size: 20px;
  color: #fff;
  padding: 0 10px;
  text-align: center;
  font-style: italic;
}
.staff-area .staff-grid .item span:nth-child(2) {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
}
.staff-area .staff-grid .item span:nth-child(2)::before {
  display: inline-block;
  content: "";
  width: 1px;
  height: 16px;
  background-color: #000;
  margin: 0 10px 0 0;
}
.back-numbers-area {
  text-align: center;
  margin-bottom: 30px;
}
.about-area {
  margin-bottom: 60px;
}
.about-area .intro {
  font-size: 15px;
    line-height: 1.6em;
    text-align: center;
    color: #666;
    overflow: hidden;
    padding: 20px;
    border: 2px dashed var(--border-color);
    clear: both;
    margin-bottom: 15px;
}
.about-area .intro p:first-child {
  font-size: 18px;
  font-weight: bold;
  color: var(--main-color);
  margin-bottom: 10px;
}
.about-area .step {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.about-area .step .tit {
  display: flex;
  align-items: flex-end;
  margin-bottom: 25px;
}
.about-area .step .tit span {
  font-size: 60px;
  color: #f5f5f5;
  letter-spacing: -4px;
  font-weight: bold;
  line-height: 0.8;
}
.about-area .step .tit p {
  font-size: 25px;
  letter-spacing: -2px;
  margin-left: -20px;
  display: block;
}
.about-area .step .basic-content {
  font-size: 16px;
  line-height: 1.7;
}
.about-area .step .history {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.about-area .step .history .history-item {
  display: inline-table;
  border: solid 5px #121212;
  padding-top: 20px;
  height: 157px;
}
.about-area .step .history .history-item > span {
  font-size: 20px;
  color: #121212;
  font-style: italic;
  font-weight: bold;
  position: relative;
  padding-left: 28px;
}
.about-area .step .history .history-item > span:before {
  content: '';
  position: absolute;
  left: 0px;
  top: 14px;
  width: 30px;
  height: 1px;
  background: #121212;
}
.about-area .step .history .history-item > p {
  font-size: 16px;
  padding: 15px 10px 0 10px;
  text-align: center;
  word-break: keep-all;
  line-height: 1.3;
}
.about-area .step .history .history-item .point {
  padding-top: 10px;
  color: red;
}

.business-list {
  display: flex;
  flex-direction: column;
}
.business-list .business-item {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.business-list .business-item > span {
  display: block;
  width: 150px;
  min-width: 150px;
  padding: 8px 0;
  font-weight: 600;
  color: #444;
  border-bottom: 1px dotted #fff;
  background: #e1e9ef;
  text-align: center;
}
.business-list .business-item .business-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
  color: #666;
  border-bottom: 1px dotted var(--border-color);
}

.about-register-area {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 60px;
}
.about-register-area .expl-box {
  font-size: 14px;
  color: #666;
  padding: 20px;
  border: 1px dashed var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-register-area .expl-box .item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.about-register-area .expl-box .item .rc-txt {
  color: red;
}

.register-item {
  border: 1px solid var(--border-color);
}
.register-item .tit {
  font-size: 18px;
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid #dbdbdb;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  gap: 30px;
}
.register-item .tit span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
}
.register-item .tit span:nth-child(2) {
  font-size: 14px;
  color: red;
}
.register-item .table-box {
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.register-item .table-box table {
  width: 100%;
  border: 1px solid var(--border-color);
}
.register-item .table-box table th, .register-item .table-box table td {
  padding: 10px;
  font-size: 13px;
  vertical-align: middle;
  line-height: 1.5;
  width: max-content;
}
.register-item .table-box table th {
  background-color: #999;
  font-weight: 500;
  color: #fff;
  border: 1px solid #888;
}
.register-item .table-box table th > span {
  color: #000;
}
.register-item .table-box table th > button {
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
  font-weight: 600;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.register-item .table-box table th > button:hover {
  opacity: .8;
}
.register-item .table-box table td {
  border: 1px solid var(--border-color);
}
.register-item .table-box table td label {
  cursor: pointer;
  margin-bottom: 5px;
  display: inline-block;
  white-space: nowrap;
}
.register-item .table-box .inner-table td.sm-td {
  width: 120px;
  min-width: 120px;
  text-align: center;
}
.register-item .table-box table td label input[type="chekbox"] {
  margin: 0;
}
.register-item .table-box table th input[type="text"], .register-item .table-box table td input[type="text"], .register-item .table-box table td select {
  width: 100%;
  height: 40px;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 0 10px;
}
.register-item .table-box table th input[type="text"]:focus, .register-item .table-box table td input[type="text"]:focus, .register-item .table-box table td select:focus {
  border: 2px solid #000;
}
.register-item .table-box table td input[type="text"].input-sm {
  border: 1px solid var(--border-color);
  max-width: 200px;
}
.register-item .table-box table td input[type="text"].input-xs, .register-item .table-box table td select.input-xs  {
  border: 1px solid var(--border-color);
  max-width: 120px;
}
.register-item .table-box table th input[type="text"]:read-only, .register-item .table-box table td input[type="text"]:read-only {
  background-color: var(--bg-color);
}
.register-item .table-box table td .rc-txt {
  color: red;
}

.bank-box {
  padding: 15px;
  background: #efefef;
}
.bank-box .call {
  padding: 20px;
  background: #fff;
  text-align: center;
}
.bank-box .bank-num {
  display: flex;
}
.bank-box .bank-num .bank-item {
  width: 50%;
  text-align: center;
  padding: 15px;
  line-height: 1.5;
}

.register-terms .terms-tit {
  padding: 8px 20px;
  border-left: 5px solid var(--border-color);
  font-size: 16px;
  color: #957958;
  margin-bottom: 20px;
}
.register-terms .expl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  border: 2px dashed var(--border-color);
  padding: 20px;
  margin-bottom: 15px;
}
.register-terms .expl p {
  line-height: 1.5;
  font-size: 14px;
  color: #666;
}
.register-terms .agree {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.register-terms .agree label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #666;
}
.register-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.register-btn-wrap .cancel {
  line-height: 45px;
  height: 50px;
  padding: 0 30px;
  font-weight: bold;
  font-size: 16px;
  background: #969696;
  color: #fff;
}
.register-btn-wrap .cancel:hover {
  opacity: .8;
}
.register-btn-wrap .submit {
  line-height: 45px;
  height: 50px;
  padding: 0 40px;
  font-weight: bold;
  font-size: 16px;
  background: #fd9602;
  color: #fff;
}

.user-area {
  margin-bottom: 60px;
}
.user-area .login-box {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.user-area .login-box .expl-box {
  text-align: center;
  color: #666;
  padding: 20px;
  border: 1px dashed var(--border-color);
  font-size: 14px;
  line-height: 1.5;
  word-break: keep-all;
}
.user-area .input-box {
  position: relative;
}
.user-area .input-box.rs::after {
  content: "*";
  font-size: 20px;
  color: red;
  position: absolute;
  right: 5px;
  top: 5px;
}
.user-area .input-box input {
  border: 1px solid var(--border-color);
  background: #fff;
  color: #000;
  vertical-align: middle;
  border-radius: 3px;
  padding: 0 20px 0 10px;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.user-area .input-box input:focus {
  border: 2px solid #000;
  padding: 0 19px 0 9px;
}
.submit-btn {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: var(--main-color);
  font-size: 16px;
  color: #fff;
}
.submit-btn:hover {
  background: #10632c;
}
.cancel-btn {
  width: 100%;
  height: 45px;
  font-weight: bold;
  font-size: 1em;
  border: 1px solid #6c6c6c;
  background-color: var(--bg-color);
}
.user-area .login-box .auto-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
.user-area .login-box .auto-login input {
  margin: 0;
}
.user-area .login-box .basic-btn-wrap {
  padding: 10px 0 60px;
}
.user-area .login-box .social-login {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.user-area .login-box .social-login button {
  border: 1px solid var(--border-color);
  width: 100%;
  height: 45px;
  line-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  font-size: 16px;
  font-weight: 500;
}
.user-area .login-box .social-login button:first-child {
  color: #159c2f;
}
.user-area .register-box {
  width: 100%;
  max-width: 1200px;
}
.user-area .register-box  {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.user-area .register-box .expl-box {
  text-align: center;
    color: #666;
    padding: 20px;
    border: 1px dashed var(--border-color);
    font-size: 14px;
    line-height: 1.5;
}
.user-area .register-box .all-chk {
  display: flex;
  justify-content: flex-end;
}
.user-area .register-box .all-chk label {
  width: max-content;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.user-area .register-box .all-chk label input {
  width: 20px;
  height: 20px;
}
.terms-item {
  display: flex;
  flex-direction: column;
  border-radius: 3px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.terms-item .terms-tit {
  text-align: left;
  padding: 15px 20px;
  border-bottom: 1px solid #dbdbdb;
  background: #f8f8f8;
  font-size: 18px;
}
.terms-item .terms-content {
  display: block;
  padding: 20px;
  width: 100%;
  height: 150px;
  background: #fff;
  border: 0;
  line-height: 1.6em;
  font-size: 14px;
  white-space: pre-line;
  overflow: hidden;
  overflow-y: auto;
}
.terms-item .terms-table {
  padding: 20px;
  background: #fff;
}
.terms-item .terms-table table {
  width: 100%;
}
.terms-item .terms-table table th {
  background: #999;
  width: 33.33%;
  color: #fff;
  padding: 10px;
  border: 1px solid #888;
  font-size: 13px;
  font-weight: 500;
}
.terms-item .terms-table table td {
  border: 1px solid var(--border-color);
  padding: 10px;
  border-collapse: collapse;
  border-spacing: 0;
  font-weight: normal;
  height: 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.terms-item .terms-chk {
  padding: 15px;
  background: #efefef;
  display: flex;
  justify-content: flex-end;
}
.terms-item .terms-chk label {
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.form-item .form-tit {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}
.form-item .input-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.form-item .input-grid .input-box.col-span-2 {
  grid-column: auto / span 2;
}
.form-item .input-grid .input-box .info-txt {
  font-size: 13px;
  font-weight: 400;
  color: #c89b43;
  margin: 5px 0;
}

.form-item .input-grid .id-chk-btn {
  width: max-content;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  background: #FFF;
  border: 1px solid #DCDFE6;
  -webkit-transition: .1s;
  transition: .1s;
  font-weight: 500;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
}
.form-item .input-grid .id-chk-btn:hover {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.form-item .input-grid .add-btn {
  width: max-content;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  background: #707070;
  border: 1px solid #DCDFE6;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.form-item .alarm-box {
  border: 1px dashed var(--border-color);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-item .alarm-box > div {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  color: var(--sub-txt-color);
}
.form-item .alarm-box > div > span {
  display: block;
  min-width: 110px;
}
.form-item .alarm-box .radio-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-item .alarm-box .radio-box label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.form-item .alarm-box .radio-box label input {
  margin: 0;
  cursor: pointer;
}

.calendar-area {
  padding-bottom: 60px;
}
.fc .fc-toolbar-title {
  font-size: 24px;
}
.fc .fc-daygrid-day-number {
  font-size: 14px;
}
.fc-h-event {
  background-color: transparent !important;
  border: none !important;
}
.fc-event .fc-event-main {
  height: auto;
  color: var(--black-color) !important;
}
.fc .fc-daygrid-day-frame {
  min-height: unset;
  height: auto;
}

.calendar-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.calendar-btn-wrap.end {
  justify-content: flex-end;
}
.calendar-btn-wrap .box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.calendar-btn-wrap input {
  text-align: center;
  font-size: 13px;
  color: #000;
  width: max-content;
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--border-color);
  padding: 5px;
}
.calendar-btn-wrap select {
  font-size: 13px;
  color: #000;
  width: 150px;
  height: 40px;
  line-height: 40px;
  border: 1px solid var(--border-color);
  padding: 5px;
}
.calendar-btn-wrap a {
  width: 75px;
  height: 45px;
  border: 1px solid #7c7c7c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-color);
}
.calendar-btn-wrap a.on {
  background-color: #7c7c7c;
  color: #fff;
}

.result-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.result-box .emblem {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
}
.result-box .emblem img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.result-box .score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--black-color);
}
.result-box .score img {
  width: 28px;
  height: 28px;
}
.result-box .stadium {
  font-size: 14px;
  font-weight: 500;
}

.result-list {
  display: flex;
  flex-direction: column;
}
.result-list li.empty {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  background-color: var(--bg-color);
  text-align: center;
}
.result-list li:first-child {
  display: flex;
  border-top: 2px solid var(--main-color);
  background-color: #fff4e5;
}
.result-list li:first-child span {
  width: 100%;
  padding: 15px 0;
  font-size: 13px;
  text-align: center;
}
.result-list li:not(:first-child) {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}
.result-list li:not(:first-child) span {
  width: 100%;
  padding: 15px 2px;
  font-size: 13px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.result-list li:not(:first-child) span:first-child {
  font-size: 14px;
  font-weight: 700;
}
.result-list li:not(:first-child) span.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.result-list li:not(:first-child) span.team img {
  width: 36px;
  height: 36px;
}


.rank-list {
  display: flex;
  flex-direction: column;
}
.rank-list li.empty {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #999;
  background-color: var(--bg-color);
  text-align: center;
}
.rank-list li:first-child {
  display: flex;
  border-top: 2px solid var(--main-color);
  background-color: #fff4e5;
}
.rank-list li:first-child span {
  width: 100%;
  padding: 15px 0;
  font-size: 13px;
  text-align: center;
}
.rank-list li:not(:first-child) {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}
.rank-list li:not(:first-child) span {
  width: 100%;
  padding: 15px 2px;
  font-size: 13px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rank-list li:not(:first-child) span:first-child {
  font-size: 14px;
  font-weight: 700;
}


.middle-area {
  position: relative;
  width: 1495px;
  height: 980px;
  left: calc(50% - 1495px/2 - 0.5px);
  top: calc(50% - 980px/2 + 0.5px);
  background: rgba(11, 56, 32, 0.8);
}
.ball {
  width: 60px;
  margin: 0 auto;
}
.ball img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.next-match {
  position: absolute;
  width: 685px;
  height: 407px;
  left: 48px;
  top: 46px;
}
.next-match .item-tit {
  position: absolute;
  width: 205px;
  height: 46px;
  left: 500px;
  top: 0px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  line-height: 38px;
  color: #FFFFFF;
}
.next-match .item {
  position: absolute;
  width: 685px;
  height: 407px;
  left: 0px;
  top: 0px;
}

.next-match .item::before {
  position: absolute;
  width: 685px;
  height: 0px;
  left: 0px;
  top: 56px;
  border: 3px solid #FF8C00;
}
.next-match .item.empty {
    background-color: transparent;
    color: #fff;
    align-items: center;
}
.next-match .item .team {
  position: absolute;
  width: 685px;
  height: 300px;
  left: 0px;
  top: 56px;
}
.next-match .item .team > span {
  position: absolute;
  width: 45px;
  height: 43px;
  left: 318px;
  top: 221px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.next-match .item .team .box {
  position: absolute;
  width: 189px;
  height: 189px;
}
.next-match .item .team .box > p {
  position: absolute;
  width: 155px;
  height: 29px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.next-match .item .team .box img {
  position: absolute;
  width: 189px;
  height: 189px;
  object-fit: contain;
}

.next-match .item .date-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  background-color: transparent;
  padding: 8px 24px;
  font-family: 'Noto Sans KR';
}

/* 이전 경기 결과 스타일 */
.previous-result {
  position: absolute;
  width: 685px;
  height: 412px;
  left: 48px;
  top: 513px;
}
.previous-result .item-tit {
  position: absolute;
  width: 297px;
  height: 46px;
  left: 408px;
  top: 0px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  font-size: 32px;
  line-height: 38px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.previous-result .item {
  position: absolute;
  width: 685px;
  height: 412px;
  left: 0px;
  top: 0px;
}

.previous-result .item::before {
  position: absolute;
  width: 297px;
  height: 0px;
  left: 408px;
  top: 56px;
  border: 3px solid #FF8C00;
}
.previous-result .item.empty {
    background-color: transparent;
    color: #fff;
    align-items: center;
}
.previous-result .item .team {
  position: absolute;
  width: 685px;
  height: 300px;
  left: 0px;
  top: 56px;
}
.previous-result .item .team > span {
  position: absolute;
  width: 45px;
  height: 43px;
  left: 252px;
  top: 220px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.previous-result .item .team .box:first-child {
  position: absolute;
  width: 189px;
  height: 189px;
  left: 0px;
  top: 147px;
}
.previous-result .item .team .box:last-child {
  position: absolute;
  width: 216px;
  height: 216px;
  left: 353px;
  top: 133px;
}
            .previous-result .item .team .box:first-child > p {
              position: absolute;
              width: 155px;
              height: 29px;
              left: 94px;
              top: -50px;
              font-family: 'Noto Sans KR';
              font-style: normal;
              font-weight: 700;
              font-size: 24px;
              line-height: 29px;
              text-transform: uppercase;
              color: #FFFFFF;
              text-align: center;
              z-index: 3;
              white-space: nowrap;
            }
            .previous-result .item .team .box:last-child > p {
              position: absolute;
              width: 155px;
              height: 29px;
              left: 108px;
              top: -50px;
              font-family: 'Noto Sans KR';
              font-style: normal;
              font-weight: 700;
              font-size: 24px;
              line-height: 29px;
              text-transform: uppercase;
              color: #FFFFFF;
              text-align: center;
              z-index: 3;
              white-space: nowrap;
            }
.previous-result .item .team .box:first-child img {
  position: absolute;
  width: 189px;
  height: 189px;
  left: 90px;
  top: -20px;
  object-fit: contain;
}
.previous-result .item .team .box:last-child img {
  position: absolute;
  width: 216px;
  height: 216px;
  left: 60px;
  top: -20px;
  object-fit: contain;
}

.previous-result .item .result-info {
  position: absolute;
  width: 685px;
  height: 100px;
  left: 0px;
  top: 312px;
}
.previous-result .item .result-info .home-score {
  position: absolute;
  width: 22px;
  height: 43px;
  left: 177px;
  top: 57px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.previous-result .item .result-info .away-score {
  position: absolute;
  width: 22px;
  height: 43px;
  left: 513px;
  top: 57px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.previous-result .item .result-info .score-separator {
  position: absolute;
  width: 10px;
  height: 34px;
  left: 342px;
  top: 62px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
  color: #FFFFFF;
}

.previous-result .item .result-info .date {
  position: absolute;
  width: 100px;
  height: 20px;
  left: 226px;
  top: 88px;
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #FFFFFF;
  opacity: 0.8;
}

.main-rank {
  position: absolute;
  width: 685px;
  height: 888px;
  left: 763px;
  top: 46px;
}
.main-rank .item-tit {
  padding: 16px 24px;
  border-bottom: 3px solid #FF8C00;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-transform: uppercase;
  font-family: 'Noto Sans KR';
}
.main-rank .item-tit a i {
  font-size: 24px;
}

.main-rank ul {
  display: flex;
  flex-direction: column;
}
.main-rank ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  gap: 8px;
  background-color: transparent;
}
.main-rank ul li.empty {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  justify-content: center;
  padding: 24px 16px;
}
.main-rank ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 50px;
  min-width: 50px;
  color: #fff;
  text-align: center;
  font-family: 'Noto Sans KR';
}
.main-rank ul li.th span:first-child {
  font-size: 16px;
  font-weight: 400;
}
.main-rank ul li span:first-child {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  font-family: 'Noto Sans KR';
}
.main-rank ul li.th span.team-name {
  justify-content: center;
}
.main-rank ul li span.team-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 200px;
  font-family: 'Noto Sans KR';
}
.main-rank ul li span.team-name img {
  height: 20px;
  margin-right: 8px;
}

/* 춘천시민축구단 하이라이트 스타일 */
.main-rank ul li.chuncheon-team {
  background-color: #FF8C00;
  color: #fff;
}
.main-rank ul li.chuncheon-team span {
  color: #fff;
}
.main-rank ul li.chuncheon-team:hover {
  background-color: #FF8C00;
}

.terms-area {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding-bottom: 80px;
}

.gray-box {
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  padding: 15px 20px;
  line-height: 1.3;
  font-size: 24px;
}
.white-box {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.white-box p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  word-break: keep-all;
}
.border-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border: 1px dashed var(--border-color);
  margin-top: 10px;
}
.border-box .box {
  display: flex;
  flex-direction: column;
}
.border-box .box .blue-txt {
  font-size: 14px;
  font-weight: 600;
  color: #336699;
  line-height: 1.3;
  margin-bottom: 2px;
}
.border-box .box .bc-txt {
  font-size: 14px;
  font-weight: 400;
  color: var(--sub-txt-color);
  line-height: 1.3;
  word-break: keep-all;
}

.mobile-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  border-top: 1px solid var(--main-color);
  display: none;
}
.mobile-social {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mobile-social a {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
}

.ham input {
  display: none;
}
#ham_btn + label {
  position: relative;
  display: block;
  width: 32px;
  height: 24px;
  cursor: pointer;
  z-index: 10;
}
#ham_btn + label > span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 5px;
  transition: all 300ms;
}
#ham_btn:checked + label > span:nth-child(1) {
  top: 50%;
  transform: translate(0, -50%);
  transform: rotate(45deg);
}
#ham_btn + label > span:nth-child(2) {
  top: 50%;
  transform: translate(0, -50%);
}
#ham_btn:checked + label > span:nth-child(2) {
  opacity: 0;
}
#ham_btn + label > span:nth-child(3) {
  bottom: 0;
}
#ham_btn:checked + label > span:nth-child(3) {
  top: 50%;
  transform: translate(0, -50%);
  transform: rotate(-45deg);
}

.mobile-user {
  display: flex;
  display: none;
}
.mobile-user a {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #050b2f;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.mobile-user a:not(:last-child) {
  border-right: 1px solid #3c4969;
}


.reply-write {
  display: flex;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}
.reply-write textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 8px;
}
.reply-write button {
  width: 80px;
  min-width: 80px;
  height: 80px;
  background: #4c4f6f;
  color: #fff;
}


.file-thumbnail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.file-thumbnail .expl {
  font-size: 14px;
  font-weight: 400;
  color: var(--sub-txt-color);
}
.file-thumbnail .input-box {
  width: 100%;
  display: flex;
  gap: 12px;
}

.file-thumbnail .upload-name {
  width: 100%;
  max-width: 500px;
  display: inline-block;
  height: 38px;
  padding: 0 10px;
  vertical-align: middle;
  border: 1px solid #dddddd;
  color: #999999;
}
.file-thumbnail label {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  background-color: #4c4f6f;
  cursor: pointer;
  padding: 0 8px;
  width: 90px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-thumbnail input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/* 반응형 스타일 */
@media (max-width: 1200px) {
  .middle-area {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
  }
  
  .next-match,
  .previous-result,
  .main-rank {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .middle-area {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
    padding: 20px;
  }
  
  .next-match,
  .previous-result,
  .main-rank {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .bg-wrap {
    padding: 40px 0;
  }
  
  .middle-area {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
    margin: 0 10px;
    padding: 15px;
  }
  
  .next-match,
  .previous-result,
  .main-rank {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    margin-bottom: 20px;
  }
}

/* 팝업 스타일 */
.popup-layer {
  position: fixed;
  z-index: 9999;
}

/* 팝업 오른쪽 상단 X 버튼 숨기기 */
.popup-close {
  display: none !important;
}

/* 팝업 close_section 스타일 */
.close_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #1C1C1C;
  border-top: 1px solid #2D2D2D;
}

/* 팝업 체크박스 스타일 */
.close_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-checkbox-container {
  display: flex;
  align-items: center;
  gap: 0;
}

.popup-24h-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--main-color);
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.popup-checkbox-container p {
  display: inline;
  font-size: 14px;
  color: #fff;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  cursor: pointer;
  user-select: none;
}

/* 팝업 닫기 버튼 (기존 closeButton) */
#closeButton {
  padding: 8px 20px;
  background-color: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}
.reply-write button {
  width: 80px;
  min-width: 80px;
  height: 80px;
  background: #4c4f6f;
  color: #fff;
}


.file-thumbnail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.file-thumbnail .expl {
  font-size: 14px;
  font-weight: 400;
  color: var(--sub-txt-color);
}
.file-thumbnail .input-box {
  width: 100%;
  display: flex;
  gap: 12px;
}

.file-thumbnail .upload-name {
  width: 100%;
  max-width: 500px;
  display: inline-block;
  height: 38px;
  padding: 0 10px;
  vertical-align: middle;
  border: 1px solid #dddddd;
  color: #999999;
}
.file-thumbnail label {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  background-color: #4c4f6f;
  cursor: pointer;
  padding: 0 8px;
  width: 90px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-thumbnail input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/* 반응형 스타일 */
@media (max-width: 1200px) {
  .middle-area {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
  }
  
  .next-match,
  .previous-result,
  .main-rank {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .middle-area {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
    padding: 20px;
  }
  
  .next-match,
  .previous-result,
  .main-rank {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .bg-wrap {
    padding: 40px 0;
  }
  
  .middle-area {
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
    margin: 0 10px;
    padding: 15px;
  }
  
  .next-match,
  .previous-result,
  .main-rank {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    margin-bottom: 20px;
  }
}

/* 팝업 스타일 */
.popup-layer {
  position: fixed;
  z-index: 9999;
}

/* 팝업 오른쪽 상단 X 버튼 숨기기 */
.popup-close {
  display: none !important;
}

/* 팝업 close_section 스타일 */
.close_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #1C1C1C;
  border-top: 1px solid #2D2D2D;
}

/* 팝업 체크박스 스타일 */
.close_section {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup-checkbox-container {
  display: flex;
  align-items: center;
  gap: 0;
}

.popup-24h-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--main-color);
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}

.popup-checkbox-container p {
  display: inline;
  font-size: 14px;
  color: #fff;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  cursor: pointer;
  user-select: none;
}

/* 팝업 닫기 버튼 (기존 closeButton) */
#closeButton {
  padding: 8px 20px;
  background-color: var(--main-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

#closeButton:hover {
  background-color: #e68500;
}