@charset "UTF-8";

#wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#subWrap {
  flex: 1;
}

.sub-page-wrap {
  width:100%;
  max-width: 1480px;
  padding: 0 20px;
  padding-top: var(--spacing-ml);
  margin: 0 auto;
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
}
.sub-content-wrap {
  width:100%;
}
.sub-content-title {
  font-weight: 400;
  font-family: 'Retrosans';
  font-size: 32px;
  margin-bottom: var(--spacing-xs);
}
.sub-content-wrap .container {
  max-width: unset;
  padding: unset;
  margin: unset;
}
.sub-page-wrap:has(.menu-none) .subDepthBox {
  display:none;
}
.grayBg {
  /* background-color: #F7F8F9; */
}

.contentBox {
  padding: 40px;
  border-radius: var(--radius-ms);
  border: 1px solid var(--gray-200);
  box-shadow: 0px 0px 40px var(--blue-50);
}
.contentBox.border-none {
  padding: unset;
  border-radius: unset;
  border: unset;
  box-shadow: unset;
}

@media (max-width: 1199px) {
  .sub-page-wrap {
    gap: 0;
    flex-direction: column;
  }
  .sub-content-title {
    margin-bottom: var(--spacing-m);
  } 
  .contentBox {
    padding: 32px 24px;
  }
}
@media (max-width: 767px) {
  .contentBox {
    padding: 24px 16px;
  }  
}
@media (max-width: 767px) {
  .sub-page-wra {
    padding: 0 16px;
  }  
}


p

/* 공통 - Flex 정렬 */
.flexRow {
  display: flex;
}

.justifyEnd {
  justify-content: flex-end;
}

/* 공통 - 여백 */
.formBox {
  margin-bottom: 16px;
}

/* 공통 - 제목 */
.titleBox .title {
  color: #454C53;
  font-size: 14px;
  font-weight: 500;
}

.titleBox {
  display: flex;
  align-items: flex-end;
  gap: 0 27px;
}

.titleBox .btnBox {
  flex-shrink: 0;
  position: relative;
  top: -8px;
  display: flex;
  gap: 0 4px;
}
.titleBox.my-state-txt .title {
  font-size: 24px;
}

@media (max-width: 1199px) {

  .titleBox .title {
    
  }

}

@media (max-width: 767px) {

  .titleBox {
    display: block;
  }

  .titleBox .btnBox {
    margin-top: 20px;
  }

  .titleBox .title {
    
  }

}

@media (max-width: 480px) {

  .titleBox .title {
    
  }

}

/* 공통 - 탭버튼 */
.comTabBtn {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.comTabBtn .btn:hover {
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  color: transparent;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  transition: all .3s;
}

.comTabBtn .btn:hover::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.comTabBtn .btn:hover .text {
  display: none;
}

.comTabBtn .btn {
  position: relative;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  font-size: 14px;
  word-break: keep-all;
}

.comTabBtn .btn .text {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.comTabBtn .btn .number {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.comTabBtn .btn.active {
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  color: transparent;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
}

.comTabBtn .btn.active::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.comTabBtn .btn.active .text {
  display: none;
}

/* 게시판 첨부파일 삭제버튼 텍스트 안보여서 추가 */
.comBtn.comBtnType02.fileDelBtn {
  font-size: 14px;
  text-indent: 0;
  color: #fff;
}
/*  */

@media (max-width: 767px) {

  .comTabBtn .btn {
    padding: 9px 12px;
    border-radius: 10px;
  }

}

@media (max-width: 480px) {


  .comTabBtn {
    gap: 8px 2%;
  }

  .comTabBtn .btn {
    flex-direction: column;
    gap: 5px 0;
    padding: 6px;
    width: 32%;
    justify-content: center;
  }

  .comTabBtn .btn .number {
    padding: 2px 6px;
    border-radius: 5px;
  }

}

@media (max-width: 414px) {

  .comTabBtn .btn {
    width: 49%;
  }

}

/* 공통 - 이전글-다음글 */
.postNav {
  margin-top:16px;
}

.postNav .postNavItem {
  display: flex;
  gap: 0 16px;
  align-items: center;
  padding: 8px;
  color: #111827;
}

.postNav .postNavTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #454C53;
  font-size:14px;
}

.postNav .postNavLabel {
  flex-shrink: 0;
}

.postNav .postNavItem .direction {
  display: flex;
  align-items: center;
  gap: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: #9EA4AA;
}

.postNav .postNavItem .direction::before {
  content: '';
  width: 17px;
  height: 11px;
}

.postNav .prevPost .direction::before {
  background: url(../images/sub/arrow_icon04.svg)no-repeat center / contain;
}

.postNav .nextPost .direction::before {
  background: url(../images/sub/arrow_icon05.svg)no-repeat center / contain;
}

@media (max-width: 480px) {

  .postNav .postNavItem {

  }

  .postNav .postNavTitle {
    max-width: 100%;
    font-size: 14px;
  }

  .postNav .postNavItem .direction::before {
    width: 14px;
    height: 9px;
  }

}

/* 공통 - 페이지네이션 */
.paginationBox {
  margin-top:40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 4px;
}

.paginationBox .pageLink {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 5px;
  background-color: #F7F8F9;
  font-size: 14px;
  font-weight: 700;
  color: #454C53;
  border-radius: 16px;
}

.paginationBox .pageLink.active {
  color: #fff;
  background-color: #4D8FFF;
}

.paginationBox .pageLinkFirst,
.paginationBox .pageLinkLast {
  background-color: #E8EBED;
  font-size: 12px;
}

.paginationBox .pageLinkPrev {
  width: 11px;
  height: 17px;
  background: url(../images/sub/arrow_icon02.svg)no-repeat center;
}

.paginationBox .pageLinkNext {
  width: 11px;
  height: 17px;
  background: url(../images/sub/arrow_icon03.svg)no-repeat center;
}

@media (max-width: 480px) {

  .paginationBox .pageLink {
    min-width: 30px;
    min-height: 30px;
    border-radius: 10px;
  }

}

/* 공통 - 폼 */
.customSelectBox .selectBtn,
input[type="text"] {
  width: 100%;
  padding: 0 20px 0 16px;
  height: 48px;
  border: 1px solid #E8EBED;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  background-color: #fff;
}

input[type="text"]::placeholder {
  color: #9EA4AA;
}

.customSelectBox {
  position: relative;
}

.customSelectBox .selectBtn {
  padding: 0 36px 0 16px;
  text-align: left;
}

.customSelectBox .selectBtn.active::after {
  transform: translateY(-50%) rotate(90deg);
}
.customSelectBox.open .selectList {
  display: block;
}

.customSelectBox .selectBtn::after {
  content: '';
  width: 7px;
  height: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  right: 16px;
  background: url(../images/sub/arrow_icon01.svg)no-repeat center;
}

.customSelectBox .selectList {
  display: none;
  max-height: 250px;
  padding: 10px 0;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  border: 1px solid #E8EBED;
  border-radius: 8px;
  background-color: #fff;
  z-index: 99;
  overflow-y: auto;
}

.customSelectBox .selectList li .btn {
  padding: 10px 10px 10px 16px;
  display: block;
  width: 100%;
  text-align: left;
  font-weight: 500;
  font-size: 14px;
  transition: all .3s;
}

.customSelectBox .selectList li .btn:hover {
  background-color: #4D8FFF;
  color: #fff;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  padding-left: 16px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  font-weight: 500;
  border: 1px solid #E8EBED;
  border-radius: 8px;
  cursor: pointer;
}

input[type="radio"]:checked+label {
  background-color: #4D8FFF;
  color: #fff;
  font-weight: 700;
}

input[type="checkbox"]+label::before,
input[type="radio"]+label::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url(../images/sub/chk_icon.svg)no-repeat center / contain;
}

input[type="checkbox"]:checked+label::before,
input[type="radio"]:checked+label::before {
  background: url(../images/sub/chk_on_icon.svg)no-repeat center / contain;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: #454C53;
}

.label .required {
  color: #FF8539;
}

.isReadonly {
  background-color: #E8EBED !important;
  cursor: auto !important;
}

.isDisabled {
  background-color: #E8EBED !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

input:disabled,
input:disabled+label,
input[readonly],
input[readonly]+label {
  background-color: #E8EBED;
}

input[readonly],
input[readonly]+label {
  cursor: auto;
}

input:disabled,
input:disabled+label {
  cursor: not-allowed;
}

input[readonly]:focus,
input[readonly]+label:focus,
input:disabled,
input:disabled+label {
  outline: none;
}

@media (max-width: 480px) {

  .label {
    font-size: 14px;
  }

}

/* 공통 - 폼 버튼 위치 */
.positionBtnBox {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 20px;
  justify-content: flex-end;
}

/* .eventNewsListBox .positionBtnBox {
  top: 5px;
}

 .noticeListBox .positionBtnBox {
  top: 74px;
} 

.pressReleaseListBox .positionBtnBox,
.galleryListBox .positionBtnBox {
  top: 12px;
}

.detailBox .positionBtnBox {
  top: 70px;
}

.eventNewsViewBox .positionBtnBox,
.noticeViewBox .positionBtnBox {
  top: 107px;
} */

@media(max-width: 1199px) {

  .positionBtnBox {
    position: static;
    justify-content: flex-end;
  }

}

/* 공통 - 정렬 */
.textCenter {
  text-align: center !important;
}

/* 공통 - 여백 */
.mt30 {
  margin-top: 30px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

/* 공통 - 버튼 */
.comBtn {
  min-width: 108px;
  padding: 18px 10px;
  background-color: #454C53;
  border-radius: 16px;
  text-align: center;
  color: #fff;
  font-weight: 700;
}

.comBtn.comBtnType02 {
  min-width: auto;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
}

.comBtn.garyBtnColor {
  background-color: #9EA4AA;
}

@media (max-width: 767px) {

  .comBtn {
    padding: 12px 10px;
    border-radius: 8px;
    font-size: 14px;
  }

}

@media (max-width: 480px) {

  .comBtn {
    font-size: 14px;
  }

}

/* 공통 - 그라데이션 텍스트 */
.gradientText {
  display: inline-block;
  background: linear-gradient(to right, #203c6b, #4d8fff, #203c6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 공통 - 그라데이션 배경색 */
.gradientBG {
  background: radial-gradient(ellipse 40% 48% at center, rgba(173, 203, 255, 0.5) 0%, rgba(173, 203, 255, 0.5) 60%, #F7F8F9 100%);
}

.gradientBG.sm-wrap {}
/* 공통 - 상단 영역 */
.subVisualBox {
  padding-bottom: 55px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(237, 244, 255, 1), rgba(255, 255, 255, 1));
}

.subVisualBox .visualBox {
  margin-bottom: 24px;
  position: relative;
  height: 164px;
  border-radius: 65px;
  overflow: hidden;
}

.subVisualBox .visualBox.active img {
  transform: scale(1);
}

.subVisualBox .visualBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5);
  transition: all 5.5s;
}

.subVisualBox .visualBox .title {
  padding: 0 40px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: #fff;
  font-family: 'Retrosans';
  z-index: 9;
  letter-spacing: 20px;
  text-align: center;
  word-break: keep-all;
}

.subVisualBox .visualBox .title em {
  display: inline-block;
}

.subVisualBox .visualBox .title em:nth-child(1) {
  animation-delay: .3s;
}

.subVisualBox .visualBox .title em:nth-child(2) {
  animation-delay: .35s;
}

.subVisualBox .visualBox .title em:nth-child(3) {
  animation-delay: .4s;
}

.subVisualBox .visualBox .title em:nth-child(4) {
  animation-delay: .45s;
}

.subVisualBox .visualBox .title em:nth-child(5) {
  animation-delay: .5s;
}

.subVisualBox .visualBox .title em:nth-child(6) {
  animation-delay: .55s;
}

.subVisualBox .visualBox .title em:nth-child(7) {
  animation-delay: .6s;
}

.subVisualBox .visualBox .title em:nth-child(8) {
  animation-delay: .65s;
}

.subVisualBox .visualBox .title em:nth-child(9) {
  animation-delay: .7s;
}

.subVisualBox .visualBox .title em:nth-child(10) {
  animation-delay: .75s;
}

.subVisualBox .visualBox .title em:nth-child(11) {
  animation-delay: .8s;
}

.subMenu-box {
  padding: var(--spacing-m);
  border-radius: var(--radius-ms);
  background: linear-gradient(180deg, var(--gray-50), var(--blue-50));
  position: relative;
}

.subMenu-box .subMenuList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:8px;
}

.subMenu-box .subMenuList li .subDepth-1 a {
  display: inline-flex;
  padding: 10px 16px;
  font-weight: 500;
  color: #454C53;
  border-radius: 50px;
  background-color: #fff;
  white-space: nowrap;
  transition: all .3s;
}

.subMenu-box .subMenuList li .subDepth-1 a:hover {
  background-color: #4D8FFF;
  font-weight: 700;
  color: #fff;
}
.subMenu-box .subMenuList li .subDepth-1 a.active {
  background-color: #4D8FFF;
  font-weight: 700;
  color: #fff;
}

.subDepthBox {
  width: 100%;
  max-width: 286px;
  position: sticky;
  top: 100px;
}

.subDepthBox .breadcrumbsList {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.subDepthBox .breadcrumbsList li a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.subDepthBox .breadcrumbsList li a::after {
  content: '';
  margin: 0 5px;
  width: 4px;
  height: 1px;
  background-color: #9EA4AA;
}

.subDepthBox .breadcrumbsList li:last-child a {
  color: #454C53;
  font-weight: 700;
}

.subDepthBox .breadcrumbsList li:last-child a::after {
  display: none;
}
.sub-page-menu-title-box {
  margin-bottom: var(--spacing-ms);
}

.subDepthBox .title01 {
  margin-bottom: 8px;
  font-weight: 400;
  font-family: 'Retrosans';
  font-size: 32px;
}

.subDepthBox .title02 {
  font-weight: 700;
  color: #9EA4AA;
  font-size: 24px;
}

.subDepthBox .shareBox {
  position: absolute;
  top: 0;
  right: 20px;
  display: flex;
  gap: 0 8px;
}

.subDepthBox .shareBox a {
  position: relative;
  display: block;
  width: 64px;
  height: 54px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .1);
  transition: all .3s;
}

.subDepthBox .shareBox a:hover {
  transform: translateY(-10px);
}

.subDepthBox .shareBox a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.subDepthBox .shareBox .shareBtn::after {
  width: 24px;
  height: 24px;
  background: url(../images/sub/share_icon.svg)no-repeat center;
}

.subDepthBox .shareBox .printerBtn::after {
  width: 22px;
  height: 21px;
  background: url(../images/sub/printer_icon.svg)no-repeat center;
}

.subDepthBox .subDepth {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;    
  padding: var(--spacing-s);
  background: var(--white);
  border-radius: var(--radius-ms);
  border: 2px solid var(--primary-color);
  box-shadow: 0px 0px 40px var(--blue-100);
  margin: 8px 0 16px;
  
}
.subDepthBox .subDepth li a:hover {
  color: #1B1D1F;
}

.subDepthBox .subDepth li a.active {
  color: #1B1D1F;
  font-weight: 700;
}

.subDepthBox .subDepth li a {
  display: block;
  color: #9EA4AA;
  font-weight: 500;
  font-size: 16px;
  transition: all .3s;
  white-space: nowrap;
  position: relative;
}
.subDepthBox .subDepth li a:before {
  content:'-';
}

@media (max-width: 1199px) {
  .subDepthBox {
    max-width: unset;
    position: unset;
  }
  .sub-page-menu-title-box {
    margin-bottom: var(--spacing-2xs);
  }
  .subDepthBox .title01 {
    display:none;
  }
  
  .subMenuList {
    justify-content: flex-start;
  }  
  .subMenu-box {
    display:none;
  }  
}

@media (max-width: 767px) {

  .subVisualBox .visualBox {
    margin-bottom: 16px;
  }

  .subVisualBox .visualBox .title {
    font-size: 20px;
  }

  .subDepthBox .shareBox {
    display: none;
  }

  .subDepthBox .subDepth li a {
    font-size: 16px;
  }

  .subMenuList li .subDepth-1 a {
    font-size: 14px;
  }

}

@media (max-width: 480px) {

  .subVisualBox {
    padding-bottom: 48px;
  }

  .subVisualBox .visualBox .title {
    font-size: 16px;
    letter-spacing: 10px;
  }

  .subDepthBox .title01 {
    margin: 0;
  }

  .subDepthBox .title02 {
    display: none;
  }

  .subDepthBox .subDepth {
    gap:0 24px;
  }
  .gradientBG.sm-wrap {
    background: var(--white);
  }
  .sm-wrap .comContentBox {
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
  }

}

/* 공통 - 상세 */
.detailBox .infoBox {
  margin: 0;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 23px;
  background-color: #F7F8F9;
  border-radius: 16px;
}

.detailBox .infoBox .box {
  display: flex;
  gap: 0 8px;
}

.detailBox .infoBox .box em {
  width: 33px;
  height: 21px;
  line-height: 21px;
  font-weight: 700;
  color: #fff;
  font-size: 14px;
  background-color: #454C53;
  border-radius: 4px;
  text-align: center;
}

.detailBox .infoBox .box span {
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

@media (max-width: 767px) {
  
  .detailBox .infoBox {
    border-radius: 10px;
  }

}

@media (max-width: 480px) {

  .detailBox .infoBox {
    padding: 20px;
  }

}

/* 인사말 */
.greetingsBox {
  position: relative;
}


.greetingsBox .layoutBox {
  display: flex;
  align-items: flex-start;
  gap: 0 64px;
  justify-content: space-between;
}

.greetingsBox .textBox .title {
  margin-bottom: 24px;
  color: #1B1D1F;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  word-break: keep-all;
}

.greetingsBox .textBox .text {
  margin-bottom: 20px;
  color: #454C53;
  font-size: 16px;
  word-break: keep-all;
  line-height: 1.7;
}

.greetingsBox .profile-img-box {}
.greetingsBox .profile-img-box .img-box {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--blue-900);
  display: flex;
  width: 100%;
  max-width: 304px;
}
.greetingsBox .profile-img-box .img-box img {
  width: 100%;
}
.greetingsBox .profile-img-box .profile-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--spacing-s);  
}
.greetingsBox .profile-img-box .profile-name span {}
.greetingsBox .profile-img-box .profile-name p {
  font-weight: 400;
  font-family: 'Retrosans';
  font-size: 32px;
  color: var(--gray-600);
}

@media (max-width: 1440px) {


}

@media (max-width: 1199px) {

  .greetingsBox .layoutBox {
    gap: 0 40px;
  }

}

@media (max-width: 1024px) {
  .greetingsBox .textBox .title {
   
  }

  .greetingsBox .textBox .text {
    margin-bottom: 28px;
    font-size: 16px;
  }

}

@media (max-width: 767px) {

  .greetingsBox .textBox .text br {
    display: none;
  }

  .greetingsBox .layoutBox {
    flex-direction: column;
    gap: 24px 0;
    align-items: center;
  }
}

@media (max-width: 480px) {


}

/* 로그인 */


.comContentBox {
  position: relative;
  padding: 40px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #E8EBED;
  border-radius: 40px;
  background-color: #fff;
}

.program-page-wrap .comContentBox {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 0;
  border-radius: var(--radius-ms);
  border: 1px solid var(--gray-200);
  box-shadow: 0px 0px 40px var(--blue-50);
  overflow: hidden;
}

.comContentBox .title {
  margin-bottom: 44px;
  font-size: 24px;
  font-weight: 500;
  color: #454C53;
  text-align: left;
}

.signinBox .box h4 {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #454C53;
}

.signinBox .box .snsLoginLink {
  margin-bottom: 26px;
}

.signinBox .box .snsLoginLink a {
  height: 72px;
  padding: 21px 10px 21px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  border-radius: 8px;
  border: 1px solid #E8EBED;
  color: #454C53;
}

.signinBox .box .snsLoginLink a:hover {
  border: 2px solid #454C53;
  font-weight: 700;
  color: #454C53;
}

.signinBox .box .snsLoginLink a::before {
  content: '';
  width: 28px;
  height: 28px;
}

.signinBox .box .snsLoginLink a.kakaoLogin:before {
  content: '';
  background: url(../images/sub/kakao_icon.svg)no-repeat center;
}

.signinBox .box .snsLoginLink a.naverLogin:before {
  content: '';
  background: url(../images/sub/naver_icon.svg)no-repeat center;
}

.signinBox .box .snsLoginLink a:last-child {
  margin-bottom: 0;
}

.signinBox .box .infoBox {
  display: flex;
  align-items: center;
  gap: 0 0;
  justify-content: space-between;
}

.signinBox .box .infoBox p {
  font-weight: 500;
  color: #9EA4AA;
  font-size: 14px;
  word-break: keep-all;
}

.signinBox .box .infoBox a {
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #454C53;
}

.signinBox .box .infoBox a::before {
  content: '';
  margin-top: -1px;
  width: 7px;
  height: 10px;
  background: url(../images/sub/arrow_icon01.svg)no-repeat center;
}

.signinBox .box .selectBox span {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.signinBox .box .selectBox .selectBtnBox {
  padding: 4px;
  display: flex;
  align-items: center;
  width: 142px;
  height: 44px;
  border-radius: 16px;
  background-color: #F7F8F9;
}

.signinBox .box .selectBox .selectBtnBox .selectBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 67px;
  height: 36px;
  border-radius: 16px;
  color: #9EA4AA;
  font-weight: 700;
}

.signinBox .box .selectBox .selectBtnBox .selectBtn.active {
  background-color: #4D8FFF;
  color: #fff;
}

.signinBox .box .selectBox {
  position: absolute;
  top: 64px;
  right: 64px;
}

.signinBox .box .inputTextBox {
  margin-bottom: 10px;
}

.signinBox .box .inputTextBox input {
  padding-left: 49px;
  width: 100%;
  border: 1px solid #E8EBED;
  height: 72px;
  background-color: #F7F8F9;
  border-radius: 8px;
  font-weight: 500;
}

.signinBox .box .inputTextBox input::placeholder {
  color: #9EA4AA;
}

.signinBox .box .inputTextBox input#username {
  background: url(../images/sub/id_icon.svg)no-repeat 21px center;
}

.signinBox .box .inputTextBox input#password {
  background: url(../images/sub/pw_icon.svg)no-repeat 21px center;
}

.signinBox .box .loginBtn {
  display: block;
  margin-bottom: 26px;
  width: 100%;
  height: 72px;
  font-size: 20px;
}

@media (max-width: 1199px) {

  .comContentBox .title {
    font-size: 24px;
  }

}

@media (max-width: 767px) {

  .comContentBox .title {
    font-size: 24px;
  }

  .comContentBox {
    padding: 55px 30px 40px;
    border-radius: 20px;
  }

  .signinBox .box .loginBtn,
  .signinBox .box .inputTextBox input,
  .signinBox .box .snsLoginLink a {
    height: 65px;
  }

  .signinBox .box .loginBtn {
    font-size: 18px;
  }

  .signinBox .box .inputTextBox input#id {
    background: url(../images/sub/id_icon.svg)no-repeat 17px center;
  }

  .signinBox .box .inputTextBox input#password {
    background: url(../images/sub/pw_icon.svg)no-repeat 17px center;
  }

}

@media (max-width: 480px) {

  .comContentBox .title {
    margin-bottom: 20px;
    text-align: center;
  }

  .comContentBox {
    padding: 45px 20px 40px;
  }

  .signinBox .box .selectBox {
    margin-bottom: 30px;
    position: static;
    text-align: center;
  }

  .signinBox .box .selectBox .selectBtnBox {
    margin: 0 auto;
  }

  .signinBox .box .infoBox {
    flex-direction: column;
    gap: 15px 0;
  }
  .signinBox .box .infoBox p {
    text-align: center;
  }

  .signinBox .box .snsLoginLink a {
    font-size: 14px;
  }
  

}

/* 회원가입 */
.signupBox h4 {
  margin-bottom: 16px;
  font-size: 18px;
}

.signupBox .label {
  display: block;
  margin-bottom: 14px;
  font-weight: 700;
  color: #454C53;
}

.signupBox .label .required {
  color: #FF8539;
}

.signupBox .phoneBox {
  display: flex;  
  align-items: center;
  gap: 8px;
}

.signupBox .phoneBox .inputTextBox {
  width: calc(100% - 98px);
}

.signupBox .phoneBox .comBtn {
  padding: 0;
  width: 90px;
  height: 48px;
  font-size: 14px;
  border-radius: 8px;
}

.signupBox .emailBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px .95%;
}

.signupBox .emailBox span {
  font-weight: 500;
  color: #454C53;
}

.signupBox .emailBox .customSelectBox {
  min-width: 108px;
  flex: 1;
}

.signupBox .btnBox {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.signupBox .btnBox .comBtn {
  width: 108px;
}

.signupBox .genderBox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signupBox .genderBox .inputRadioBox {
  flex: 1;
}

.signupBox .signupInfoBox {
  margin-top: 16px;
}

.signupBox .signupInfoBox .infoText01 {
  padding: 6px 0 6px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #203C6B;
  background-color: #EDF4FF;
  border-radius: 8px;
}

.signupBox .signupInfoBox .infoBox {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #FFF2E8;
  border-radius: 8px;
}

.signupBox .signupInfoBox .infoBox .infoText02 {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #6A340C;
}

.signupBox .signupInfoBox .infoBox .mailText {
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  color: #454C53;
  font-weight: 500;
}

.signupBox .signupInfoBox .infoBox .mailText::before {
  content: '';
  width: 20px;
  height: 20px;
}

.signupBox .signupInfoBox .infoBox .mailText.kakao::before {
  background: url(../images/sub/kakao_icon.svg)no-repeat center / contain;
}

.signupBox .signupInfoBox .infoBox .mailText.naver::before {
  background: url(../images/sub/naver_icon.svg)no-repeat center / contain;
}

.signupBox .signupInfoBox .infoBox .link {
  display: block;
  padding: 6px 8px;
  background-color: #fff;
  border-radius: 8px;
  font-size: 14px;
  color: #454C53;
  font-weight: 700;
}

.signupBox .agreeBox {
  padding: 24px;
  border: 2px solid #C8DCFF;
  border-radius: 16px;
}

.signupBox .agreeBox .agreeTitle {
  margin-bottom: 16px;
  padding-bottom: 16px;
  color: #454C53;
  font-size: 15px;
  border-bottom: 1px solid #E8EBED;
  text-align: left;
}

.signupBox .agreeBox .title01 {
  margin-bottom: 8px;
  color: #1B1D1F;
  font-size: 16px;
}

.signupBox .agreeBox .title02 {
  margin-bottom: 4px;
  color: #454C53;
  font-size: 14px;
}

.signupBox .agreeBox .list01 {
  margin-bottom: 8px;
}

.signupBox .agreeBox .list01 li {
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  color: #454C53;
}

.signupBox .agreeBox .list01 li::before {
  content: '';
  margin-top: -1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #D9D9D9;
}

.signupBox .agreeBox .agreeInputChkBox {
  margin-top: 16px;
  padding: 8px 16px 8px 8px;
  background-color: #F7F8F9;
  border-radius: 8px;
}

.signupBox .agreeBox .agreeInputChkBox label {
  display: flex;
  gap: 0 8px;
  font-size: 14px;
  color: #454C53;
  font-weight: 500;
  cursor: pointer;
  height: auto;
  padding: 0;
  border: none;
  word-break: keep-all;
}

.signupBox .birthDateBox {
  position: relative;
}

.signupBox .birthDateBox .calendarBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
}

.signupBox .birthDateBox .calendarBtn img {
  display: block;
}

.signupBox .birthDateBox input[type="text"] {
  padding: 0 54px 0 16px;
}

.signupBox .agreeBox .agreeInputChkBox input[type="checkbox"]:checked+label::before {}
.agreeInputChkBox:has(input[type="checkbox"]:checked) {
  background-color: var(--primary-color);  
}
.agreeInputChkBox:has(input[type="checkbox"]:checked) label {
  color:var(--white);
}
.signupBox form {
  margin-bottom: 64px;
}

.loginInfoBox {
  padding: 21px 20px 21px 16px;
  display: flex;
  align-items: center;
  gap: 0 16px;
  border: 1px solid #E8EBED;
  border-radius: 8px;
  flex-wrap: wrap;
}

.loginInfoBox span {
  width: 71px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  background-color: #EDF4FF;
  color: #203C6B;
  font-weight: 700;
  font-size: 12px;
}

.loginInfoBox em {
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-weight: 500;
  color: #454C53;
}

.loginInfoBox em::before {
  content: '';
  width: 28px;
  height: 28px;
}

.loginInfoBox em.kakao::before {
  background: url(../images/sub/kakao_icon.svg)no-repeat center;
}

.loginInfoBox em.naver::before {
  background: url(../images/sub/naver_icon.svg)no-repeat center;
}

@media (max-width: 767px) {

  .signupBox .emailBox {
    flex-direction: column;
    gap: 5px 0;
  }

  .signupBox .emailBox .customSelectBox,
  .signupBox .emailBox .inputTextBox {
    width: 100%;
  }

  .signupBox .phoneBox {
    flex-direction: column;
  }

  .signupBox .phoneBox .inputTextBox {
    width: 100%;
  }

  .signupBox .phoneBox .comBtn {
    width: 100%;
  }

  .signupBox .agreeBox {
    border-radius: 8px;
    padding:16px;
  }

  .signupBox .genderBox {
    /* flex-direction: column; */
  }

  .signupBox .btnBox {
    flex-direction: column;
  }

  .signupBox .btnBox .comBtn {
    width: 100%;
  }

  .signupBox form {
    margin-bottom: 40px;
  }

}

@media (max-width: 480px) {

  .loginInfoBox {
    /* flex-direction: column;
    gap: 8px 0; */
    padding: 15px 10px 15px 15px;
  }

}

/* 마이페이지 */
.mypageBox .mypageLayoutBox {
  display: flex;
  gap: 0 100px;
  justify-content: space-between;
}

.mypageBox .leftBox {
  position: relative;
  width: 400px;
}

.mypageBox .leftBox .topBox {
  margin-bottom: 56px;
}
.mypageBox .leftBox .topBox .mypage-tit-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.mypageBox .leftBox .topBox .text01 {  
  font-size: 32px;
  color: #454C53;
  font-weight: 500;
}

.mypageBox .leftBox .topBox .text02 {
  position: relative;
  padding: 6px 10px 6px 16px;
  font-size: 14px;
  color: #fff;
  border-radius: 8px;
  background-color: var(--gray-200);
  z-index: 1;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
}

.mypageBox .leftBox .topBox .text02 .percent {
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #4D8FFF, #72787F);
  z-index: -1;
  border-radius: 8px;
}

.mypageBox .leftBox .topBox .infoBox {
  position: absolute;
  top: 52px;
  right: 0;
  display: flex;
  gap: 0 4px;
}

.mypageBox .leftBox .loginInfoBox {
  margin-bottom: 19px;
  border: 0;
  padding: 0;
}

.mypageBox .leftBox .memberInfoBox {
  padding: 24px 10px 24px 24px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #E8EBED;
}

.mypageBox .leftBox .memberInfoBox .box {
  margin-bottom: 14px;
  display: flex;
  gap: 0 24px;
}

.mypageBox .leftBox .memberInfoBox .box:last-child {
  margin-bottom: 0;
}

.mypageBox .leftBox .memberInfoBox .box span {
  flex-shrink: 0;
  width: 56px;
  font-weight: 700;
  color: #9EA4AA;
  font-size: 14px;
}

.mypageBox .leftBox .memberInfoBox .box em {
  font-weight: 500;
  color: #454C53;
}

.mypageBox .rightBox {
  width: 840px;
}

@media (max-width: 1199px) {

  .mypageBox .rightBox,
  .mypageBox .leftBox {
    width: 100%;
  }

  .mypageBox .mypageLayoutBox {
    flex-direction: column;
    gap: 35px 0;
  }

  .mypageBox .leftBox .topBox .text01 {
    font-size: 28px;
  }

}

@media (max-width: 767px) {

  .mypageBox .leftBox .topBox .text01 {
    font-size: 24px;
  }

}

@media (max-width: 480px) {

  .mypageBox .mypageLayoutBox {
    gap: 25px 0;
  }

  .mypageBox .leftBox .memberInfoBox {
    border-radius: 10px;
  }

  .mypageBox .leftBox .memberInfoBox .box {
    gap: 0 10px;
  }

  .mypageBox .leftBox .topBox {
    margin-bottom: 45px;
  }

  .mypageBox .leftBox .topBox .text01 {
    font-size: 22px;
  }

  .mypageBox .leftBox .topBox .infoBox {
    margin: 20px 0;
    position: static;
    justify-content: center;
  }

  .mypageBox .leftBox .memberInfoBox .box em {
    font-size: 14px;
  }

}

/* 마이페이지 - 상세 */
.contentLayoutBox {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.contentLayoutBox .comContentBox {
  max-width: 848px;
  margin: 0;
  flex:1;
}

.contentLayoutBox aside {
  width: 220px;
  position: sticky;
  top: 114px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

@media (max-width: 767px) {

  .contentLayoutBox {
    flex-direction: column;
    /*  gap: 30px 0;*/
  } 

  .contentLayoutBox aside {
    width: 100%;
    max-width:unset !important;
    position: static;
  }

}

.sport-title-box {
  padding: 40px;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/site/basic/images/sub/program-tit-bg.jpg);
  background-size: cover;
  background-position: center;
}
.sport-contents-box {  
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lm);
  padding: 40px;
}



.viewBox .titleBox {
  margin-bottom: 8px;
}

.viewBox .topInfoBox {
  display: flex;
  align-items: center;
  padding: 9px 8px;
  border-radius: 16px;
}

.viewBox .topInfoBox .text {
  flex-shrink: 0;
  margin-right: 8px;
  padding: 3px 8px;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}

.viewBox .topInfoBox .date01 {
  margin-right: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4D8FFF;
}

.viewBox .topInfoBox .date02 {
  font-weight: 500;
  color: #454C53;
}

.viewBox .topInfoBox.recruiting {
  background-color: #EDF4FF;
}

.viewBox .topInfoBox.recruiting .text {
  color: #4D8FFF;
  border: 1px solid #4D8FFF;
}

.viewBox .topInfoBox.recruiting .date01 {
  color: #4D8FFF;
}

.viewBox .topInfoBox.waitingRecruitment {
  background-color: #FFF2E8;
}

.viewBox .topInfoBox.waitingRecruitment .text {
  color: #FC7C1D;
  border: 1px solid #FC7C1D;
}

.viewBox .topInfoBox.waitingRecruitment .date01 {
  color: #FC7C1D;
}

.viewBox .topInfoBox.deadline {
  background-color: #F7F8F9;
}

.viewBox .topInfoBox.deadline .text {
  color: #454C53;
  border: 1px solid #454C53;
}

.viewBox .topInfoBox.deadline .date01 {
  color: #454C53;
}

.viewBox .topInfoBox.expected {
  background-color: #F7F8F9;
}

.viewBox .topInfoBox.expected .text {
  color: #454C53;
  border: 1px solid #454C53;
}

.viewBox .topInfoBox.expected .date01 {
  color: #454C53;
}


.viewBox .sportBox {
  display: flex;
}

.viewBox .sportBox .sportInfoBox01 {
  width: 100%;
}

.viewBox .sportBox .sportInfoBox01 .topText {
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--white);
}

.viewBox .sportBox .sportInfoBox01 .sportTitle {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.viewBox .sportBox .sportInfoBox01 .sportTitle h4 {
  font-weight: 700;
  color: var(--white);
  font-size: 32px;
}

.viewBox .sportBox .sportInfoBox01 .sportTitle em {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #203C6B;
  background-color: #EDF4FF;
  border-radius: 4px;
}

.viewBox .sportBox .sportInfoBox01 .dateInfoBox {
  display: flex;
  align-items: center;
  gap: 0 16px;
  padding: 8px 20px 8px 8px;
  border-radius: 8px;
  background: linear-gradient(to right, #223D69, #25529b, #444B53);
  border: 1px solid var(--gray-500);
}

.viewBox .sportBox .sportInfoBox01 .dateInfoBox .text {
  flex-shrink: 0;
  padding: 3px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #454C53;
  border-radius: 4px;
  background-color: #fff;
}

.viewBox .sportBox .sportInfoBox01 .dateInfoBox .date {
  font-weight: 700;
  color: #fff;
}

.viewBox .sportBox .sportInfoBox02 {
  flex-shrink: 0;
  width: 100%;
}

.viewBox .sportBox .sportInfoBox02 h4 {
  margin-bottom: 8px;
  font-size: 18px;
  color: #454C53;
  font-weight: 700;
}
.program-apply {
  display:flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.viewBox .sportBox .sportInfoBox02 .recruitBox {
  margin-bottom: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  border: 1px solid #E8EBED;
  border-radius: 16px;
}
.viewBox .sportBox .sportInfoBox02 .recruitBox ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-ms);
  flex: 1;
}
.viewBox .sportBox .sportInfoBox02 .recruitBox ul .recruit-item {
  
}

.viewBox .sportBox .sportInfoBox02 .recruitBox h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-600);
}

.viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText01 {
  display: flex;
  align-items: center;
  gap: 0 10px;
}

.viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText01 strong {
  font-size: 20px;
  color: #1B1D1F;
}
.viewBox .sportBox .sportInfoBox02 .recruitBox ul .recruit-item:nth-child(1) .box .recruitText01 strong {
  color:var(--primary-color);
}
.viewBox .sportBox .sportInfoBox02 .recruitBox ul .recruit-item:nth-child(2) .box .recruitText01 strong {
  color:var(--secondary-color);
}
.viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText01 span {
  font-weight: 500;
  color: #9EA4AA;
}

.viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText02 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText02 em {
  padding: 3px;
  background-color: #E8EBED;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.viewBox .sportBox .sportInfoBox02 .infoText {
  position: relative;
  padding-left: 32px;
  font-size: 14px;
  color: #454C53;
}

.viewBox .sportBox .sportInfoBox02 .infoText::before {
  content: '';
  position: absolute;
  top: 0;
  left: 4px;
  width: 20px;
  height: 20px;
  background: url(../images/sub/icon03.svg)no-repeat center;
}

.viewBox .sportBox .sportInfoBox02 .infoText strong {
  background: linear-gradient(to right, #9EA4AA,
      #F6503B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.viewBox .programBox {
  
}

.viewBox .programBox h4 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #454C53;
}

.viewBox .programBox .programList {
  gap: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.viewBox .programBox .programList>li {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
  padding: 16px;
  border: 1px solid #E8EBED;
  border-radius: 16px;
}

.viewBox .programBox .programList li span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #9EA4AA;
}

.viewBox .programBox .programList li em {
  font-weight: 500;
  color: #454C53;
}

.viewBox .programBox .programList li em strong {
  font-weight: 500;
  color: #4D8FFF;
}

.viewBox .programBox .programList li .dayList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.viewBox .programBox .programList li .dayList li {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-weight: 700;
  font-size: 14px;
  color: #454C53;
  background-color: #E8EBED;
  border-radius: 8px;
  text-align: center;
}

.viewBox .operatingLocationBox h4 {
  font-size: 18px;
  font-weight: 700;
  color: #454C53;
}

.viewBox .operatingLocationBox .map {
  position: relative;
  margin-top: 8px;
  height: 284px;
  border: 8px solid #fff;
  border-radius: 40px;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  overflow: hidden;  
  background-color: var(--gray-100);
}

.viewBox .operatingLocationBox .map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.viewBox .operatingLocationBox .map .addressBox {
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 15px;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 8px;
  z-index:1;
}

.viewBox .operatingLocationBox .map .addressBox img {
  width: 28px;
  margin-right: 16px;
}

.viewBox .operatingLocationBox .map .addressBox .position01 {
  flex-shrink: 0;
  margin-right: 16px;
  font-weight: 700;
  color: #454C53;
}

.viewBox .operatingLocationBox .map .addressBox .position02 {
  font-size: 14px;
  color: #454C53;
}

.viewBox .operatingLocationBox .map .marker {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background-color: #4D8FFF;
  border-radius: 50%;
  z-index: 999;
}

.viewBox .operatingLocationBox .map .marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
}

.viewBox .operatingLocationBox .map .marker::before {
  content: '';
  width: 20px;
  height: 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  background: url(../images/sub/marker_arrow.svg)no-repeat center / contain;
}

.viewBox aside .attendanceBox {  
  padding: 16px;
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #E8EBED;
}

.viewBox aside .attendanceBox h4 {
  margin-bottom: 16px;
  color: #454C53;
  font-size: 18px;
  text-align: center;
}

.viewBox aside .attendanceBox .percentBox {
  margin-bottom: 16px;
}

.viewBox aside .attendanceBox .percentBox .box {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.viewBox aside .attendanceBox .percentBox .box span {
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.viewBox aside .attendanceBox .percentBox .box strong {
  font-weight: 700;
  color: #9EA4AA;
  font-size:14px;
}

.viewBox aside .attendanceBox .percentBox .percent {
  display: block;
  height: 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  overflow: hidden;
}

.viewBox aside .attendanceBox .percentBox .percent em {
  display: block;
  height: 100%;
  background: linear-gradient(to right, #4D8FFF, #72787F);
}

.viewBox aside .attendanceBox .attendanceInfoBox {
  display: flex;
  gap: 0 16px;
}

.viewBox aside .attendanceBox .attendanceInfoBox .textBox {
  display: flex;
  gap: 0 4px;
}

.viewBox aside .attendanceBox .attendanceInfoBox .textBox span {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.viewBox aside .attendanceBox .attendanceInfoBox .textBox em {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  background-color: #E8EBED;
  border-radius: 4px;
  text-align: center;
}

.viewBox aside .progressBox {
  background-color: #fff;
  border-radius: 16px;
  border: 1px solid #E8EBED;
  overflow: hidden;
}

.viewBox aside .progressBox .progressTopBox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 56px;
  text-align: center;
}

.viewBox aside .progressBox .progressTopBox span {
  color: #454C53;
  font-weight: 500;
}

.viewBox aside .progressBox .progressTopBox strong {
  color: #4D8FFF;
}

.viewBox aside .progressBox .progressList {
  max-height: 486px;  
  border-top: 1px solid #E8EBED;
  overflow-y: auto;
}

.viewBox aside .progressBox .progressList li {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E8EBED;
}
.viewBox aside .progressBox .progressList li:nth-last-child(1) {
  border-bottom:0;
}

.viewBox aside .progressBox .progressList li .box .text {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #454C53;
}

.viewBox aside .progressBox .progressList li .box .date {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.viewBox aside .progressBox .progressList li .state {
  width: 37px;
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  text-align: center;
}

.viewBox aside .progressBox .progressList li .state.attendance {
  border: 1px solid #4D8FFF;
  color: #4D8FFF;
}

.viewBox aside .progressBox .progressList li .state.canceled {
  background-color: #E8EBED;
  color: #454C53;
}

.viewBox aside .progressBox .progressList li .state.absence {
  background-color: #E8EBED;
  color: #454C53;
}

.viewBox aside .progressBox .progressList li .state.expected {
  border: 1px solid #9EA4AA;
  color: #9EA4AA;
}

@media (max-width: 1199px) {

  .viewBox .operatingLocationBox .map {
    border-radius: 30px;
    border: 5px solid #fff;
  }

  .viewBox .topInfoBox {

  }

  .viewBox .sportBox {
    flex-direction: column;
    gap: 30px 0;
  }

  .viewBox .sportBox .sportInfoBox02 {
    width: 100%;
  }

  .viewBox .sportBox .sportInfoBox01 .sportTitle {
    margin-bottom: 15px;
  }

  .viewBox .sportBox .sportInfoBox01 .sportTitle h4 {
    font-size: 28px;
  }

  .viewBox .programBox .programList {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .viewBox .programBox .programList>li {
    
  }
  
  
}
@media (max-width: 1024px) {
  .viewBox .programBox .programList {
    grid-template-columns: repeat(2, 1fr);
  }
  .contentLayoutBox aside {
    width:100%;
    max-width:200px;
  }
  .sport-title-box {
    padding: 32px;
  }
  .sport-contents-box {    
    padding: 32px;
  }
}

@media (max-width: 767px) {

  .sport-title-box {
    padding: 24px;
  }
  .sport-contents-box {    
    padding: 24px;
  }

  .viewBox aside .attendanceBox,
  .viewBox aside .progressBox {
    border-radius: 20px;
  }
  .viewBox .programBox .programList>li {
    gap: var(--spacing-2xs);
  }
  .viewBox .sportBox .sportInfoBox01 .sportTitle h4 {
    font-size: 24px;
  }
  .viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText01 {
    gap: var(--spacing-2xs);
  }
  .viewBox .sportBox .sportInfoBox02 .recruitBox {
    padding:16px;
  }
  .viewBox .sportBox .sportInfoBox02 .recruitBox .box .recruitText01 strong {
    font-size: 16px;
  }

  .viewBox .operatingLocationBox .map {
    border-radius: 20px;
  }

  .viewBox .operatingLocationBox .map .marker {
    width: 30px;
    height: 30px;
  }

  .viewBox .operatingLocationBox .map .marker::after {
    width: 18px;
    height: 18px;
  }

  .viewBox .operatingLocationBox .map .marker::before {
    width: 13px;
    height: 13px;
    bottom: -7px;
  }

  .viewBox .operatingLocationBox .map .addressBox {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

}

@media (max-width: 480px) {
  .sport-contents-box {
    padding:24px 16px;
  }
  .viewBox .topInfoBox {    
    gap: 3px 0;
    border-radius: 8px;
  }

  .viewBox .topInfoBox .date02 {
    font-size: 14px;
  }

  .viewBox .sportBox .sportInfoBox01 .dateInfoBox .date {
    font-size: 14px;
  }

  .viewBox .programBox .programList>li {
    flex: none;    
    border-radius: 10px;
  }

  .viewBox .programBox .programList li em {
    font-size: 14px;
  }

  .viewBox .operatingLocationBox .map {
    height: 335px;
  }

  .viewBox .operatingLocationBox .map .addressBox img {
    width: 22px;
    margin-right: 12px;
  }
  .viewBox .sportBox .sportInfoBox02 .recruitBox h4 {
    margin-bottom:0;
  }

  .viewBox .operatingLocationBox .map .addressBox .position01,
  .viewBox .operatingLocationBox .map .addressBox .position02 {
    font-size: 14px;
  }

}

@media (max-width: 414px) {

  .viewBox .operatingLocationBox .map .addressBox .position01,
  .viewBox .operatingLocationBox .map .addressBox .position02 {
    font-size: 12px;
  }

}

@media (max-width:320px) {

  .viewBox .programBox .programList>li {
    width: 100%;
  }

}

/* 프로그램 - 목록 */
.programListWrap {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 40px;
}

.programListWrap .programInfoText {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 98px;
  font-size: 14px;
  color: #454C53;
}

.programListWrap .programInfoText strong {
  background: linear-gradient(to right,
      #F6503B, #9EA4AA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.programListWrap .programInfoText::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url(../images/sub/icon03.svg)no-repeat center;
}

.programListWrap aside {
}

.programListWrap aside h4 {
  margin-bottom: 16px;
  font-size: 24px;
  color: #1B1D1F;
}

.programListWrap aside .sportBtnBox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.programListWrap aside .sportBtnBox .btn {
  position: relative;
  height: 48px;
  border-radius: 16px;
  border: 1px solid #E8EBED;
  font-size: 14px;
  color: #454C53;
  font-weight: 500;
  background-color: #fff;
  z-index: 9;
}

.programListWrap aside .sportBtnBox .btn.active {
  position: relative;
  font-weight: 700;
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%,
      #4d8fff 50%, #203c6b 100%);
  color: transparent;
  /* overflow: hidden; */
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
}

.programListWrap aside .sportBtnBox .btn.active::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  white-space: nowrap;
}

.programListWrap aside .sportBtnBox .btn.active em {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

.programListWrap aside .sportBtnBox .btn:hover {
  position: relative;
  font-weight: 700;
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%,
      #4d8fff 50%, #203c6b 100%);
  color: transparent;
  /* overflow: hidden; */
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  transition: all .3s;
  white-space: nowrap;
}

.programListWrap aside .sportBtnBox .btn:hover::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.programListWrap aside .sportBtnBox .btn:hover em {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

.programListWrap aside .sportBtnBox .btn:last-child {
  margin-bottom: 0;
}

.programListWrap aside .sportBtnBox .btn.totalBtn {
  /* width: 57px; */
  padding:8px 16px;
}

.programListWrap aside .sportBtnBox .btn.sportBtn {
  display: flex;
  align-items: center;
  gap: 0 8px;
  padding: 0 16px 0 47px;
}

.programListWrap aside .sportBtnBox .btn.sportBtn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 7px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  background-size: contain !important;
}

.programListWrap aside .sportBtnBox .btn.ballGame::after {
  background: url(../images/sub/ballgame_icon.svg)no-repeat center;
}

.programListWrap aside .sportBtnBox .btn.racket::after {
  background: url(../images/sub/racket_icon.svg)no-repeat center;
}

.programListWrap aside .sportBtnBox .btn.martialArts::after {
  background: url(../images/sub/martialarts_icon.svg)no-repeat center;
}

.programListWrap aside .sportBtnBox .btn.dance::after {
  background: url(../images/sub/dance_icon.svg)no-repeat center;
}

.programListWrap aside .sportBtnBox .btn.fitness::after {
  background: url(../images/sub/fitness_icon.svg)no-repeat center;
}

.programListWrap aside .sportBtnBox .btn.ice::after {
  background: url(../images/sub/ice_icon.svg)no-repeat center;
}

.programListWrap aside .sportBtnBox .btn.sportBtn .number {
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  font-size: 14px;
  color: #454C53;
  font-weight: 500;
}

.programListWrap aside .stateBtnBox {
  display: inline-flex;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

.programListWrap aside .stateBtnBox .btn {  
  display: flex;
  align-items: center;
  gap: 0 4px;
  color: #454C53;
  font-size: 14px;
  font-weight: 500;
}

.programListWrap aside .stateBtnBox .btn:last-child {
  margin-bottom: 0;
}

.programListWrap aside .stateBtnBox .btn::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url(../images/sub/chk_icon.svg)no-repeat center;
}

.programListWrap aside .stateBtnBox .btn.active {
  color: #4D8FFF;
  font-weight: 700;
}

.programListWrap aside .stateBtnBox .btn.active::before {
  content: '';
  background: url(../images/sub/chk_on_icon.svg)no-repeat center;
}

.programListWrap aside .stateBtnBox .btn:hover {
  color: #4D8FFF;
  font-weight: 700;
}

.programListWrap aside .stateBtnBox .btn:hover::before {
  content: '';
  background: url(../images/sub/chk_on_icon.svg)no-repeat center;
}

.programListWrap .programListBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs); 
}

.programListWrap .programList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-direction: column;
}

.programListWrap .programList li {
  width: 100%;
}

.programListWrap .programList li a {  
  position: relative;
  padding: 24px 20px;
  display: block;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  display: flex;
  justify-content: space-between;
  gap: 24px 48px;
  flex-wrap: wrap;
}
.programListWrap .programList li a:hover {
  outline: 2px solid var(--blue-900);
}
.programListWrap .program-title {
  flex: 1;
  min-width: 320px;
}
.programListWrap .program-operate {
  display: flex;
  align-items: center;
  gap: var(--spacing-ml);
  flex: 1;
  justify-content: space-between;
  min-width: 560px;
}

.programListWrap .programList li a .titleBox {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.programListWrap .programList li a .titleBox h4 {
  font-size: 18px;
  color: #1B1D1F;
}

.programListWrap .programList li a .titleBox span {
  padding: 4px 8px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 4px;
  line-height: 1;
}

.programListWrap .programList li a .topInfoBox {
  display: flex;
  align-items: center;
  border-radius: 16px;
}

.programListWrap .programList li a .topInfoBox .text {
  flex-shrink: 0;
  margin-right: 8px;
  padding: 3px 8px;
  background-color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
}

.programListWrap .programList li a .topInfoBox .date01 {
  flex-shrink: 0;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4D8FFF;
}

.programListWrap .programList li a .topInfoBox .date02 {
  font-weight: 500;
  font-size: 14px;
  color: #454C53;
}

/* .programListWrap .programList li a::after {
  content: '';
  position: absolute;
  top: 24px;
  right: 24px;
  width: 12px;
  height: 12px;
} */

/* 모집중 */
.programListWrap .programList li a.recruiting .topInfoBox {
  /* background-color: #EDF4FF; */
}

.programListWrap .programList li a.recruiting .topInfoBox .text {
  color: #4D8FFF;
  border: 1px solid #4D8FFF;
}

.programListWrap .programList li a.recruiting .topInfoBox .date01 {
  color: #4D8FFF;
}

.programListWrap .programList li a.recruiting .personnelBox .percentBox span {
  background: linear-gradient(to right, #4D8FFF, #72787F);
}

.programListWrap .programList li a.recruiting .titleBox span {
  background-color: #EDF4FF;
  color: #203C6B;
}

.programListWrap .programList li a.recruiting::after {
  background: url(../images/sub/icon01.svg)no-repeat center;
}

/* 대기모집 */
.programListWrap .programList li a.waitingRecruitment .topInfoBox {
  /* background-color: #FFF2E8; */
}

.programListWrap .programList li a.waitingRecruitment .topInfoBox .text {
  color: #FC7C1D;
  border: 1px solid #FC7C1D;
}

.programListWrap .programList li a.waitingRecruitment .topInfoBox .date01 {
  color: #FC7C1D;
}

.programListWrap .programList li a.waitingRecruitment .personnelBox .percentBox span {
  background: linear-gradient(to right, #FB7C1E, #72787F);
}

.programListWrap .programList li a.waitingRecruitment .titleBox span {
  background-color: #FFF2E8;
  color: #6A340C;
}

.programListWrap .programList li a.waitingRecruitment::after {
  background: url(../images/sub/icon02.svg)no-repeat center;
}

/* 마감 */
.programListWrap .programList li a.deadline {
  border: 0;
  cursor: auto;
  filter: grayscale(1);
  opacity: 0.7;
}

.programListWrap .programList li a.deadline .topInfoBox {
  /* background-color: #F7F8F9; */
}

.programListWrap .programList li a.deadline .topInfoBox .text {
  color: #454C53;
  border: 1px solid #454C53;
}

.programListWrap .programList li a.deadline .topInfoBox .date01 {
  color: #454C53;
}

.programListWrap .programList li a.deadline .personnelBox .percentBox span {
  background: linear-gradient(to right, #4D8FFF, #72787F);
}

.programListWrap .programList li a.deadline .titleBox span {
  background-color: #EDF4FF;
  color: #203C6B;
}

.programListWrap .programList li a.deadline::after {
  background: url(../images/sub/icon04.svg)no-repeat center;
}

/* 신청불가 */
.programListWrap .programList li a.notPossible {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #F6503B, #9EA4AA) border-box;
  border: 2px solid transparent;
  cursor: auto;
}

.programListWrap .programList li a.notPossible .topInfoBox {
  /* background-color: #F7F8F9; */
}

.programListWrap .programList li a.notPossible .topInfoBox .text {
  color: #F6503B;
  border: 1px solid #F6503B;
}

.programListWrap .programList li a.notPossible .topInfoBox .date01 {
  color: #454C53;
}

.programListWrap .programList li a.notPossible .titleBox span {
  background-color: #EDF4FF;
  color: #203C6B;
}

.programListWrap .programList li a.notPossible .personnelBox .percentBox span {
  background: linear-gradient(to right, #4D8FFF, #72787F);
}

.programListWrap .programList li a.notPossible::after {
  background: url(../images/sub/icon04.svg)no-repeat center;
}

/* 접수예정 */
.programListWrap .programList li a.expected .titleBox h4 {
  color: #9EA4AA;
}

.programListWrap .programList li a.expected .topInfoBox {
  /* background-color: #F3F3F3; */
}

.programListWrap .programList li a.expected .titleBox span {
  background-color: #F3F3F3;
  color: #9EA4AA;
}

.programListWrap .programList li a.expected .topInfoBox .text {
  color: #454C53;
  border: 1px solid #454C53;
}

.programListWrap .programList li a.expected .topInfoBox .date01 {
  color: #454C53;
}

.programListWrap .programList li a.expected .personnelBox .percentBox span {
  background: linear-gradient(to right, #4D8FFF, #72787F);
}

.programListWrap .programList li a.expected::after {
  background: url(../images/sub/icon04.svg)no-repeat center;
}

.programListWrap .programList li a .iconBox {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  width: 24px;
  height: 24px;
}

.programListWrap .programList li a .iconBox img {
  display: block;
  width: 100%;
}

.programListWrap .operateInfoBox {
  display: flex;
  align-items: flex-start;
  gap: 10px 20px;
  flex: 1;
}
.programListWrap .operateInfoBox .box {
  width: 100%;
  max-width:124px;
}

.programListWrap .operateInfoBox h5 {
  margin-bottom: 6px;
  font-size: 14px;
  color: #9EA4AA;
}

.programListWrap .operateInfoBox .time {
  font-weight: 500;
  color: #454C53;
}

.programListWrap .operateInfoBox .box .dayList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.programListWrap .operateInfoBox .box .dayList li {
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-weight: 700;
  font-size: 14px;
  color: #454C53;
  background-color: #E8EBED;
  border-radius: 8px;
  text-align: center;
}

.programListWrap .programList li a .personnelBox {
  min-width:220px;
  padding: 10px 20px 16px;
  border-radius: 16px;
  background: linear-gradient(to right, #1D1F21, #444B51);
}

.programListWrap .programList li a .personnelBox .box {
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3px 20px;
}

.programListWrap .programList li a .personnelBox .text01 {
  display: flex;
  gap: 0 4px;
  align-items: center;
  font-weight: 500;
  color: #9EA4AA;
  font-size: 14px;
}

.programListWrap .programList li a .personnelBox .text01 strong {
  color: #fff;
  font-size: 16px;
}

.programListWrap .programList li a .personnelBox .text02 {
  display: flex;
  align-items: center;
  gap: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.programListWrap .programList li a .personnelBox .text02 em {
  padding: 0 4px;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  border-radius: 4px;
  background-color: #E8EBED;
  text-align: center;
}

.programListWrap .programList li a .personnelBox .percentBox {
  position: relative;
  height: 4px;
  border-radius: 8px;
  background-color: #E8EBED;
  overflow: hidden;
}

.programListWrap .programList li a .personnelBox .percentBox span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 1480px) {

  .programListWrap aside {
    
  }

}

@media (max-width: 1199px) {

  .programListWrap {
    flex-direction: column;
    gap: 20px 0;
  }

  .programListWrap aside {
    width: 100%;
    position: static;
  }

  .programListWrap aside h4 {
    text-align: center;
  }

  /* .programListWrap aside .sportBtnBox {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
  } */

  .programListWrap aside .sportBtnBox {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    flex-direction: row;
    overflow-x: scroll;
    padding: 8px;
    background-color: var(--gray-100);
    border-radius: 8px;
  }
  .programListWrap aside .sportBtnBox .btn.sportBtn {
    order: 0;
  }
  .programListWrap aside .sportBtnBox .btn.sportBtn.active {
    order: -1;
  }

  .programListWrap aside .sportBtnBox .btn em {
      white-space: nowrap;
  }  

  .programListWrap aside .stateBtnBox {
    display: flex;    
    align-items: center;
    width: 100%;
    gap: 16px;
  }

  .programListWrap aside .sportBtnBox .btn,
  .programListWrap aside .stateBtnBox .btn {
    margin: 0;
  }

  .programListWrap .programList li a .titleBox h4 {
   
  }

  .programListWrap .programList {

  }

  .programListWrap .programList li {

  }

  .programListWrap .operateInfoBox {
    justify-content: flex-start;
  }


}
@media (max-width: 1024px) {
  .programListWrap .programList li a:hover {
    outline: 0;
  }
  .programListWrap .programList li a:active {
    outline: 2px solid var(--blue-900);
  }
}


@media (max-width: 767px) {

  .programListWrap aside .stateBtnBox {
    justify-content: flex-start;
  }

  .programListWrap aside .sportBtnBox .btn,
  .programListWrap aside .stateBtnBox {
    border-radius: 10px;
  }
  .programListWrap aside .stateBtnBox .btn::before {
    width:16px;
    height:16px;
    background-size: 16px;
  }
  .programListWrap aside .stateBtnBox .btn:hover::before {
    background-size: 16px;
  }
  .programListWrap aside .stateBtnBox .btn.active::before {
    background-size: 16px;
  }

  .programListWrap .programList li {
    width: 100%;
  }

  .programListWrap aside h4 {

  }

  .programListWrap .programList li a .titleBox h4 {
    font-size: 18px;
  }

  .programListWrap .programList li a {
    flex-direction: column;
    border-radius: 20px;
  }
  .programListWrap .program-title {
    min-width: unset;
  }
  .programListWrap .program-operate {
    min-width: unset;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-s);
  }
  .programListWrap .operateInfoBox {
    width:100%;
  }
  .programListWrap .programList li a .personnelBox {
    width:100%;
  }

}

@media (max-width: 480px) {

  .programListWrap aside h4 {
    font-size: 20px;
  }

  .programListWrap .programList li a {
    padding:16px;
    padding-top:24px;
  }

  .programListWrap aside .sportBtnBox .btn {
    height: 40px;
  }

  .programListWrap aside .sportBtnBox .btn.sportBtn {
    padding: 0 8px 0 40px;
  }

  .programListWrap aside .sportBtnBox .btn.sportBtn::before {
    
  }

  .programListWrap aside .sportBtnBox .btn.sportBtn::after {
    width: 26px;
    height: 26px;
  }

  .programListWrap .programList li a .personnelBox {
    padding: 10px 15px 16px;
  }

  .programListWrap .programList li a .personnelBox .box {
    margin-bottom: 4px;
  }

  .programListWrap .operateInfoBox {

  }

  .programListWrap .operateInfoBox .time {
    font-size: 14px;
  }

  .programListWrap .programList li a .topInfoBox {
 
  }

}

@media (max-width:414px) {

  .programListWrap .operateInfoBox {

  }

  .programListWrap .programList li a .topInfoBox {

  }

  .programListWrap .programList li a .topInfoBox .text,
  .programListWrap .programList li a .topInfoBox .date01 {

  }

}

/* 프로그램 상세 */
/* .applicationBtnBox .btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  border-radius: 16px;
  font-weight: 700;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .3);
} */
.applicationBtnBox {}

.applicationBtnBox .btn.application {
  background: linear-gradient(to bottom, #787775, #4D8FFF);
}

.applicationBtnBox .btn.notPossible {
  background: linear-gradient(to bottom, #787775, #F6503B);
}

.applicationBtnBox .btn.applicationDeadline {
  background: linear-gradient(to bottom, #7f7f7f, #95a2b2);
}

.btn-box.applicationBtn {
  gap: var(--radius-2xs);
  flex-direction: column;
}
.btn-box.applicationBtn .btn {
  flex:1;
}
.btn-box.applicationBtn .btn-name {
  width:100%;
  justify-content: center;
}

.btn-box.applicationBtn .btn-name:before {
  font-size: 14px;
  width: 100%;
  justify-content: center;
  font-weight:400;
}
.applicationBtnBox .btn.list-btn {
  min-width: unset;
  flex: unset;
}


.applicationInfoBox {
  position: relative;
  margin-bottom: 8px;
  padding: 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #9EA4AA, #F6503B) border-box;
  word-break: keep-all;
}

.applicationInfoBox p {
  position: relative;
  padding-top: 24px;
  font-size:14px;
  font-weight: 500;
  color: #454C53;
  text-align: center;
  line-height: 1.6;  
}

.applicationInfoBox p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: url(../images/sub/icon03.svg)no-repeat center;
}

.applicationInfoBox p strong {
  background: linear-gradient(to right, #9EA4AA, #F6503B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 767px) {

  .applicationBtnBox .btn {
    height: 55px;
    border-radius: 20px;
  }

  .applicationInfoBox {
    border-radius: 20px;
  }
  .btn-box.applicationBtn {
    flex-direction: unset;
  }
}

@media (max-width: 480px) {

  .applicationBtnBox .btn {
    border-radius: 10px;
  }

}

/* 신청 - 목록 */
.applicationListWrap {
  position: relative;
  min-height: 674px;
  padding: 40px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  border-radius: 40px;
}

.applicationListWrap .applicationStateList {
  position: absolute;
  top: 55px;
  right: 48px;
  display: flex;
  align-items: center;
  gap: 0 16px;
}

.applicationListWrap .applicationStateList li {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.applicationListWrap .applicationStateList li.active .stateBtn {
  font-weight: 700;
  color: #4D8FFF;
}

.applicationListWrap .applicationStateList li.active .number {
  background-color: #4D8FFF;
  color: #fff;
}

.applicationListWrap .applicationStateList li .stateBtn {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.applicationListWrap .applicationStateList li .number {
  min-width: 17px;
  color: #454C53;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background-color: #E8EBED;
  text-align: center;
}

.applicationListWrap h4 {
  margin-bottom: 16px;
  font-size: 24px;
  color: #454C53;
  font-weight: 700;
}

.applicationListWrap .applicationScrollBox {
  position: relative;
  max-height: 528px;
  overflow-y: auto;
  overflow-x: hidden;
}
/* 
.applicationListWrap .applicationScrollBox::after {
  content: '';
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 99px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 1) 100%);
  z-index: 9;
  transition: all .3s;
  pointer-events: none;
}

.applicationListWrap .applicationScrollBox.hasScroll::after {
  opacity: 1;
}

.applicationListWrap .applicationScrollBox.scrollEnd::after {
  opacity: 0;
} */

.applicationListWrap .applicationListBox .applicationList li {
  border-bottom: 1px solid #E8EBED;
}

.applicationListWrap .applicationListBox .applicationList li a {
  padding-left: 28px;
  position: relative;
  display: grid;
  grid-template-columns: 115px auto 125px 60px;
  align-items: center;
  min-height: 88px;
  z-index: 1;
  z-index: 1;
}

.applicationListWrap .applicationListBox .applicationList li a::after {
  content: '';
  width: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #FFFFFF 65%, #EDF4FF);
  z-index: -1;
  transition: all .3s;
}

.applicationListWrap .applicationListBox .applicationList li a:hover::after {
  width: 100%;
}

.applicationListWrap .applicationListBox .applicationList li a::before {
  content: '';
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.applicationListWrap .applicationListBox .applicationList .dateBox {
  display: flex;
  flex-direction: column;
  gap: 6px 0;
}

.applicationListWrap .applicationListBox .applicationList li a.waitingRecruitment::before {
  background: url(../images/sub/icon02.svg) no-repeat center;
}

.applicationListWrap .applicationListBox .applicationList li a.recruiting::before {
  background: url(../images/sub/icon01.svg) no-repeat center;
}

.applicationListWrap .applicationListBox .applicationList .dateBox .date {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.applicationListWrap .applicationListBox .applicationList .dateBox em {
  font-size: 14px;
  color: #9EA4AA;
  font-weight: 500;
}

.applicationListWrap .applicationListBox .applicationList .sportBox {
  display: flex;
  align-items: center;
}

.applicationListWrap .applicationListBox .applicationList .sportBox img {
  margin-right: 16px;
}

.applicationListWrap .applicationListBox .applicationList .sportBox .sport {
  margin-right: 8px;
  font-weight: 700;
  color: #454C53;
}

.applicationListWrap .applicationListBox .applicationList .sportBox .time {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #203C6B;
  border-radius: 4px;
  background-color: #EDF4FF;
}

.applicationListWrap .applicationListBox .applicationList .attendanceBox {
  display: flex;
  flex-direction: column;
  gap: 4px 0;
}

.applicationListWrap .applicationListBox .applicationList .attendanceBox span {
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.applicationListWrap .applicationListBox .applicationList .attendanceBox em {
  font-weight: 700;
  color: #9EA4AA;
  font-size: 14px;
}

.applicationListWrap .applicationListBox .applicationList .stateBox {
  text-align: center;
}

.applicationListWrap .applicationListBox .applicationList .stateBox .state {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
}

.applicationListWrap .applicationListBox .applicationList .stateBox .state.approval {
  border: 1px solid #4D8FFF;
  color: #4D8FFF;
}

.applicationListWrap .applicationListBox .applicationList .stateBox .state.atmosphere {
  background-color: #E8EBED;
  color: #454C53;
}

.applicationListWrap .applicationListBox .applicationListHead {
  position: sticky;
  display: grid;
  grid-template-columns: 144px auto 125px 60px;
  align-items: center;
  height: 32px;
  background-color: #F7F8F9;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #9EA4AA;
  top: 0;
  z-index: 9;
}

.applicationListWrap .applicationListBox .applicationListHead .col {
  display: flex;
  align-items: center;
}

.applicationListWrap .applicationListBox .applicationListHead .colDate {
  padding-left: 28px;
}

.applicationListWrap .applicationListBox .applicationListHead .colStatus {
  text-align: center;
  justify-content: center;
}

@media (max-width: 1199px) {
  .applicationListWrap {
    min-height: unset;
  }
  .applicationListWrap h4 {
    font-size: 22px;
  }

  .applicationListWrap .applicationScrollBox::after {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 1) 100%);
  }

}

@media (max-width: 767px) {

  .applicationListWrap {
    padding: 24px;
    border-radius: 20px;
  }

  .applicationListWrap h4 {
    font-size: 20px;
  }

  .applicationList {
    display:flex;
    flex-direction: column;
    gap: var(--spacing-xs);    
  }

  .applicationListWrap .applicationStateList {
    position: static;
    margin-bottom: 20px;
  }

  /* .applicationListWrap .applicationListBox .applicationList li a {
    grid-template-columns: 115px auto 80px 60px;
  }

  .applicationListWrap .applicationListBox .applicationListHead {
    grid-template-columns: 144px auto 80px 60px;
  } */

  .applicationListWrap .applicationListBox .applicationList li {
    border-radius: var(--radius-s);
    border: 1px solid var(--gray-200);
    padding: 16px;
  }

  .applicationListWrap .applicationListBox .applicationList li a {
    grid-template-columns: unset;
    padding-left: 8px;
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .applicationListWrap .applicationListBox .applicationListHead {
    display: none;
  }
  .applicationListWrap .applicationListBox .applicationList .dateBox {
    flex-direction: row;
    gap: 8px;
  }
  .applicationListWrap .applicationListBox .applicationList li a::before {
    top: 13px;
    left: -6px;
  }
  .applicationListWrap .applicationListBox .applicationList .stateBox {
    text-align: left;
    order: -1;
  }
  .applicationListWrap .applicationListBox .applicationList .sportBox .iconBox {
    display: flex;
  }

  .applicationListWrap .applicationListBox .applicationList .attendanceBox {
    display: flex;
    gap: 8px;
    flex-direction: row;
    padding: 4px 8px;
    background-color: var(--gray-50);
    width: 100%;
    border-radius: var(--radius-xs);
    justify-content: space-between;
    border: 1px solid var(--gray-100);
  }
  .applicationListWrap .applicationListBox .applicationList .sportBox {
    width:100%;
    border-top: 1px solid var(--gray-100);
    padding-top: 20px;
  }
  
  

}

@media (max-width: 576px) {
  .applicationListWrap {
    padding:16px;
  }
  /* .applicationListWrap .applicationListBox .applicationList li a {
    grid-template-columns: 100px auto 80px 60px;
  }

  .applicationListWrap .applicationListBox .applicationListHead {
    grid-template-columns: 130px auto 80px 60px;
  } */

  .applicationListWrap .applicationScrollBox {
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .applicationListWrap .applicationListBox {
    
  }

  .applicationListWrap .applicationScrollBox::after {
    display: none !important;
  }

}

@media (max-width: 480px) {

  .sm-wrap .applicationListWrap {
    border-radius: unset;
    padding: unset;
    border: unset;
  }

  .applicationListWrap h4 {
    font-size: 18px;
  }

  .applicationListWrap .applicationListBox .applicationList .sportBox .sport {
    font-size: 14px;
  }

  .applicationListWrap .applicationListBox .applicationList .sportBox img {
    margin-right: 12px;
    width: 30px;
  }

  .programListWrap .programList li a .personnelBox,
  .programListWrap .programList li a .topInfoBox {
    border-radius: 10px;
  }

}

@media (max-width: 414px) {

  .programListWrap .programList li a .topInfoBox {

  }

}

/* 공지사항 */
.noticeListBox {
  position: relative;
}

.noticeListBox .tit {
  margin-bottom: 20px;
  font-size: 32px;
  color: #1B1D1F;
  display:none;
}

.noticeListBox .topBox {
  position: relative;
}

.comSearchBox {
  position: relative;
  width: 368px;
  margin-bottom: 24px;
}

.comSearchBox .searchBtn {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 8px;
  background: url(../images/sub/search_icon.svg)no-repeat center;
  z-index: 9;
}

.comSearchBox .inputTextBox {
  height: 100%;
}

.comSearchBox .inputTextBox input {
  padding: 0 10px 0 46px;
  position: relative;
  height: 48px;
  border: 2px solid #C8DCFF;
  border-radius: 16px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  color: #9EA4AA;
}

.postInfoWrap {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 0;
}

.postInfoWrap .postInfoBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.postInfoWrap .postInfoBox span {
  padding: 3px 9px;
  background-color: #E8EBED;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.postInfoWrap .postInfoBox span strong {
  color: #454C53;
}

.postInfoWrap .postInfoBox span span {
  padding:0;
}
.postInfoWrap .postInfoBox p {
  color:var(--gray-500);
  font-weight: 500;
  font-size:14px;
}
.postInfoWrap .postInfoBox p strong {
  color: var(--blue-900);
  font-weight: 700;
}

.postInfoWrap .postInfoList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.postInfoWrap .postInfoList li .btn {
  display: flex;
  align-items: center;
  gap: 0 4px;
  font-size: 14px;
  color: #454C53;
  font-weight: 500;
  line-height: 1;
  transition: all .3s;
}

.postInfoWrap .postInfoList li .btn .number {
  padding: 3px 5px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  border-radius: 4px;
  background-color: #E8EBED;
  transition: all .3s;
}

.postInfoWrap .postInfoList li .btn:hover,
.postInfoWrap .postInfoList li .btn.active {
  font-weight: 700;
  color: #4D8FFF;
}

.postInfoWrap .postInfoList li .btn:hover .number,
.postInfoWrap .postInfoList li .btn.active .number {
  background-color: #4D8FFF;
  color: #fff;
}

.comTable tbody tr.notice {
  background: linear-gradient(to left, #FFFFFF 75%, var(--blue-50));
}

.comTable tbody tr.notice td .id {
  font-weight: 700;
  color: #203C6B;
}

.comTable tbody tr.notice td .category {
  background-color: var(--blue-900);
  color: #fff;
}

/* 공통 - 테이블 */
/* .comTableBox {
  margin-bottom: 64px;
} */

.comTable {
  width: 100%;
  table-layout: fixed;
}

.comTable colgroup .id {
  width: 72px;
}

.comTable colgroup .category {
  width: 108px;
}
.comTable.provision colgroup .category {
  width: 164px;
}


.comTable colgroup .title {
  width: auto;
}

.comTable colgroup .author {
  width: 180px;
}

.comTable colgroup .date {
  width: 108px;
}

.comTable thead tr th:first-child {
  border-radius: 8px 0 0 8px;
}

.comTable thead tr th:last-child {
  border-radius: 0 8px 8px 0;
}

.comTable thead tr th {
  padding-left: 8px;
  height: 32px;
  font-size: 12px;
  font-weight: 700;
  color: #9EA4AA;
  text-align: left;
  background-color: #F7F8F9;
}

/* .comTable tbody tr:hover{background-color: #EDF4FF;}
.comTable tbody tr:hover td .id{font-weight: 700; color: #203C6B;}
.comTable tbody tr:hover td .category{background-color: #4D8FFF; color: #fff;}  */
.comTable tbody tr {
  transition: all .3s;
}

.comTable tbody tr td {
  padding-left: 8px;
  border-bottom: 1px solid #E8EBED;
  transition: all .3s;
}

.comTable tbody tr td .id {
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
  transition: all .3s;
}

.comTable tbody tr td .category {
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #203C6B;
  background-color: #EDF4FF;
  border-radius: 4px;
  transition: all .3s;
}

.comTable tbody tr td .link {
  display: flex;
  align-items: center;
  gap: 0 8px;
  padding: 16px 8px 16px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comTable tbody tr td .link .file img {
  display: block;
}

.comTable tbody tr td .link .titleText {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 500;
  color: #454C53;
}

.comTable tbody tr td .authorBox {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.comTable tbody tr td .authorBox .logoBox {
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #E8EBED;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.comTable tbody tr td .authorBox .logoBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.comTable tbody tr td .authorBox .author {
  display: flex;
  align-items: center;
  gap: 0 4px;
  font-weight: 400;
  color: #454C53;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comTable tbody tr td .date {
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

@media (max-width: 1199px) {

  .comSearchBox {
    margin-bottom: 20px;
    width: 100%;
  }

  .noticeListBox .topBox .comBtn {
    margin-bottom: 20px;
    position: static;
  }

  .noticeListBox .tit {
    font-size: 28px;
  }

}

@media (max-width: 1024px) {

  .postInfoWrap {
    flex-direction: column;
    align-items: flex-start;    
  }

  .comSearchBox .inputTextBox input {
    border-radius: 10px;
  }

  .noticeListBox .tit {
    font-size: 24px;
  }

  .comTable tbody tr td .title {
    font-size: 16px;
  }

  .comTable tbody tr td .link {
    padding: 8px 0;
  }

  .comTable tbody tr td .link .titleText {
    font-size: 16px;
  }

  .comTable {
    border-top: 2px solid #000 !important;
  }

  .comTable thead {
    display: none;
  }

  .comTable,
  .comTable tbody,
  .comTable td {
    display: block;
  }

  .comTable tr {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 8px;
    border-bottom: 1px solid #E8EBED !important;
  }

  .comTable tbody tr td {
    padding: 0;
    border: 0;
  }

  .comTable tbody tr td.title {
    flex-basis: 100%;
    width: 100%;
  }

  .comTable tbody tr td .date,
  .comTable tbody tr td .category {
    margin-left: 10px;
  }

}

@media (max-width: 480px) {

  .noticeListBox .tit {
    margin-bottom: 15px;
    font-size: 22px;
  }

  .postInfoWrap .postInfoBox {
    gap: 8px;
  }

  .postInfoWrap .postInfoBox p {
    font-size: 14px;
  }

  .comSearchBox .inputTextBox input {
    font-size: 14px;
  }

  .postInfoWrap .postInfoList {
    padding: 8px;
    gap: 0;
    width: 100%;
    background-color: #fbfbfb;
    border-radius: 8px;
    border: 1px solid var(--gray-100);
  }

  .postInfoWrap .postInfoList li {
    width: 33.33%;
  }

  .postInfoWrap .postInfoList li .btn {
    padding: 4px;
    width: 100%;    
  }
  .postInfoWrap .postInfoList li .btn .number {
    font-size:12px;
  }
  .comTable tbody tr td .category {
    font-size:12px;
  }

  .comTable tbody tr td .authorBox .author,
  .comTable tbody tr td .link .titleText {
    font-size: 14px;
  }

}

/* 공지사항, 미디어갤러리 - 상세 */
.detailBox {
  position: relative;
}

.detailBox .topBox {
  position: relative;
  margin-bottom: 40px;
}

.detailBox .topBox .text01,
.detailBox .topBox .category {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 8px;
  background-color:var(--blue-900);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
}

.detailBox .topBox .tit {
  margin-bottom: 8px;
  color: #1B1D1F;
  font-size: 24px;
  font-weight: 700;
  word-break: keep-all;
}

.detailBox .topInfoBox {
  position: relative;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: 10px 24px;
}

.detailBox .topInfoBox .date {
  display: flex;
  align-items: center;
  gap: 0 7px;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.detailBox .topInfoBox .date::before {
  content: '';
  width: 24px;
  height: 24px;
  background: url(../images/sub/calendar_icon02.svg)no-repeat center;
}

.detailBox .topInfoBox span {
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.detailBox .topInfoBox .media {
  display: flex;
  align-items: center;
  gap: 0 5px;
}

.detailBox .topInfoBox .media::before {
  content: '';
  width: 25px;
  height: 25px;
  background: url(../images/sub/document_icon01.svg)no-repeat center / contain;
}

.detailBox .topInfoBox .view {
  display: flex;
  align-items: center;
  gap: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.detailBox .topInfoBox .view::before {
  content: '';
  width: 22px;
  height: 14px;
  background: url(../images/sub/view.svg)no-repeat center;
}

.detailBox .topInfoBox .authorBox {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.detailBox .topInfoBox .authorBox .logoBox {
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #E8EBED;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.detailBox .topInfoBox .authorBox .logoBox img {
  width:100%;
}

.detailBox .topInfoBox .authorBox .author {
  display: flex;
  align-items: center;
  gap: 0 4px;
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.detailBox .contentViewBox {
  padding: 24px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid var(--gray-500);
}

.detailBox .contentViewBox .imgBox {
  margin-bottom: 64px;
}

.detailBox .contentViewBox .imgBox img {
  display: block;
  margin: 0 auto 16px;
  max-width: 100%;
  border-radius: var(--radius-xs);
}

.detailBox .contentViewBox .imgBox img:last-child {
  margin-bottom: 0;
}

.detailBox .contentViewBox .textBox {
  padding-bottom: 24px;
}

.detailBox .contentViewBox .textBox p,
.detailBox .contentViewBox .textBox ul li {
  font-weight: 400;
  color: #454C53;
}

.detailBox .contentViewBox .fileBox {
  padding: 24px;
  background: var(--gray-50);
  border-radius: var(--radius-s);
}

.detailBox .contentViewBox .fileBox h5 {
  margin-bottom: 16px;
  color: #454C53;
  font-size: 16px;
}

.detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 5px 0;
}

.detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn:last-child {
  margin-bottom: 0;
}

.detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn .fileIcon {
  margin-right: 8px;
}

.detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn .fileName {
  margin-right: 4px;
  color: #454C53;
  font-size:14px;
  text-align: left;
  word-break: keep-all;
}

.detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn .fileSize {
  font-size: 14px;
  color: #9EA4AA;
  display:none;
}

@media (max-width: 1199px) {

  .detailBox .contentViewBox {
    
  }

}

@media (max-width: 767px) {
  .detailBox .topBox {
    margin-bottom:24px;
  }
  .detailBox .topBox .tit {
    font-size: 24px;
  }

  .detailBox .contentViewBox {
    padding: 16px;
    border-radius: 20px;
  }
  .detailBox .contentViewBox .fileBox {
    padding: 16px;   
  }

}

@media (max-width: 480px) {

  .detailBox .contentViewBox .imgBox img {
    margin-bottom: 10px;
  }

  .detailBox .contentViewBox .textBox {
    padding-bottom: 16px;
  }

  .detailBox .contentViewBox .imgBox {
    margin-bottom: 50px;
  }

  .detailBox .topBox .tit {
    font-size: 20px;
  }

  .detailBox .contentViewBox {
    border-radius: 10px;
  }

  .detailBox .contentViewBox .textBox p,
  .detailBox .contentViewBox .textBox ul li {
    font-size: 14px;
  }

  .detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn .fileIcon {
    width: 20px;
  }

  .detailBox .contentViewBox .fileBox .fileBtnBox .fileBtn .fileName {
    font-size: 14px;
  }

}

@media (max-width: 414px) {

  .detailBox .topInfoBox {
    margin: 0;
    align-items: flex-start;
    flex-wrap: wrap;
  }

}

/* 미디어갤러리 - 목록 */
.galleryListBox {
  position: relative;
}

.galleryListBox .galleryTopBox {
  margin-bottom: 64px;
  padding: 24px;
  border-radius: var(--radius-s);
  background: radial-gradient(ellipse 40% 48% at center, rgba(173, 203, 255, 0.5) 0%, rgba(173, 203, 255, 0.5) 60%, #F7F8F9 100%);
}

.galleryListBox .galleryTopBox h4 {
  margin-bottom: 16px;
  font-weight: 700;
  color: #1B1D1F;
  font-size: 24px;
}

.galleryListBox .galleryTopBox .imgBox {
  position: relative;
  height: 0;
  padding-top: 43.27%;
  margin-bottom: 40px;
  border-radius: 20px;
  overflow: hidden;
}

.galleryListBox .galleryTopBox .imgBox img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galleryList {  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 24px;
}

.galleryList li {
  width: 100%;
}

.galleryList li a {
  display: block;
}

.galleryList li a:hover .imgBox {
  box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
}

.galleryList li a:hover .imgBox img {
  transform: scale(1.2);
}

.galleryList li a:hover h4 {
  text-decoration: underline;
  font-weight: 700;
}

.galleryList li a .imgBox {
  height: 180px; 
  margin-bottom: 16px;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
}

.galleryList li a .imgBox img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.galleryList li a h4 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #1B1D1F;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}

.galleryListBox .infoBox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.galleryListBox .infoBox .box {
  display: flex;
  align-items: center;
  gap: 0 4px;
}

.galleryListBox .infoBox .box em {
  width: 29px;
  height: 18px;
  line-height: 18px;
  font-weight: 700;
  color: #9EA4AA;
  font-size: 12px;
  background-color: #E8EBED;
  border-radius: 4px;
  text-align: center;
}

.galleryListBox .infoBox .box span {
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.none-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e8eb;
}

.none-img img {
  width: 64px !important;
  height: auto !important;
}

.galleryListBtn {
  display:flex;
  gap: 8px;
  margin-top:8px;
}

@media (max-width: 1199px) {

  .galleryListBox .galleryTopBox h4 {
    font-size: 28px;
  }

  .galleryList {

  }

  .galleryList li {

  }


}
@media (max-width: 1024px) {
  .galleryList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {

  .galleryList li a .imgBox {
    margin-bottom: 20px;
    border-radius: 10px;
  }

  .galleryList li a h4 {
    margin-bottom: 15px;
    font-size: 16px;
  }

  .galleryListBox .galleryTopBox .imgBox {
    padding-top: 50%;
    border-radius: 10px;
    margin-bottom:20px;
  }

  .galleryListBox .galleryTopBox h4 {
    margin-bottom: 20px;
    font-size: 24px;
  }
}

@media (max-width: 620px) {
  .galleryListBox .galleryTopBox {
    padding:24px 16px;
  }
  .galleryList {
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }
}
@media (max-width: 480px) {

  .galleryList {

  }

  .galleryList li {
    width: 100%;
  }

  .galleryList li a .imgBox {
    margin-bottom: 15px;
  }

  .galleryList li a h4 {
    margin-bottom: 13px;
  }

  .galleryListBox .galleryTopBox .imgBox {
    padding-top: 63%;
    margin-bottom: 18px;
  }

  .galleryListBox .galleryTopBox h4 {
    margin-bottom: 15px;
    font-size: 22px;
  }

}

@media (max-width: 414px) {

  .galleryListBox .galleryTopBox .imgBox {
    padding-top: 71%;
  }

}

/* 글쓰기 */
.formWrap {
  /* padding: 64px;
  border: 1px solid #E8EBED;
  border-radius: 40px;
  background-color: #fff; */
}

.formWrap h4 {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
}

.formWrap .btnBox {
  display: flex;
  justify-content: center;
  gap: 0 8px;
}

.formWrap .noticeChkBox,
.formWrap .customSelectBox {
  max-width: 220px;
}

.formWrap .fileBox .fileUploadBox {
  margin-bottom: 32px;
}

.formWrap .fileBox .fileUploadBox .fileInputBox {
  margin-bottom: 16px;
  border: 1px solid #E8EBED;
  border-radius: 8px;
}

.formWrap .fileBox .fileUploadBox .fileInputBox img {
  width: 15px;
}

.formWrap .fileBox .fileUploadBox .fileInputBox .fileText {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.formWrap .fileBox .fileUploadBox .fileInputBox .fileInput {
  display: flex;
  align-items: center;
  padding-left: 16px;
  height: 48px;
  gap: 0 9px;
  cursor: pointer;
}

.formWrap .fileBox .fileInfoTextBox {
  margin-bottom: 8px;
}

.formWrap .fileBox .fileInfoTextBox .fileInfoList {
  background-color: #F7F8F9;
  padding: 16px;
  border: 1px solid #E8EBED;
  border-radius: 16px;
}

.formWrap .fileBox .fileInfoTextBox .fileInfoList li {
  position: relative;
  margin-bottom: 4px;
  padding-left: 18px;
  font-size: 14px;
  color: #454C53;
}

.formWrap .fileBox .fileInfoTextBox .fileInfoList li:last-child {
  margin-bottom: 0;
}

.formWrap .fileBox .fileInfoTextBox .fileInfoList li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #D9D9D9;
}

.formWrap .fileBox .fileListUploadBox {
  margin-bottom: 32px;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox {
  margin-bottom: 18px;
  padding: 28px 24px;
  border: 2px dashed #E8EBED;
  border-radius: 20px;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li.active .fileBtn {
  border: 2px solid #4D8FFF;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li.active .fileBtn .checkIcon {
  background: url(../images/sub/chk_on_icon.svg)no-repeat center;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li .fileBtn {
  position: relative;
  display: block;
  width: 92px;
  height: 92px;
  border: 2px solid #C9CDD2;
  border-radius: 8px;
  overflow: hidden;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li .fileBtn .mainImgText {
  position: absolute;
  top: 2px;
  left: 2px;
  padding: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #203C6B;
  background-color: #fff;
  border-radius: 4px;
  text-align: center;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li .fileBtn .checkIcon {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 2px;
  bottom: 2px;
  background: url(../images/sub/chk_icon.svg)no-repeat center / contain;
}

.formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li .fileBtn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.formWrap .fileBox .infoBox {
  display: flex;
  gap: 0 24px;
}

.formWrap .fileBox .infoBox span {
  font-weight: 500;
  color: #9EA4AA;
}

.formWrap .fileBox .infoBox strong {
  font-weight: 700;
  color: #454C53;
}

.formWrap .fileBox .selectAllBtnBox {
  display: flex;
  align-items: center;
  gap: 0 20px;
}

.formWrap .fileBox .selectAllBtnBox .checkAllBtn {
  display: flex;
  gap: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.formWrap .fileBox .selectAllBtnBox .checkAllBtn::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url(../images/sub/chk_icon.svg)no-repeat center;
}

.formWrap .fileBox .selectAllBtnBox .checkAllBtn.active::before {
  background: url(../images/sub/chk_on_icon.svg)no-repeat center;
}

.formWrap .fileBox .layoutBox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 0;
}

.formWrap .fileBox .fileDropArea {
  margin-bottom: 8px;
  padding: 34px 20px;
  border-radius: 12px;
  border: 2px dashed #E8EBED;
  background: #fff;
  text-align: center;
}

.formWrap .fileBox .fileDropArea .fileDropInner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.formWrap .fileBox .fileDropArea .fileDropIcon {
  margin-bottom: 24px;
}

.formWrap .fileBox .fileDropArea p {
  font-size: 14px;
  color: #9EA4AA;
  font-weight: 500;
}

.formWrap .fileBox .fileList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formWrap .fileBox .fileList .fileItem {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.formWrap .fileBox .fileList .fileItem:last-child {
  margin-bottom: 0;
}

.formWrap .fileBox .fileList .fileItem #fileNameText {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

@media (max-width: 1199px) {

  .formWrap {        
  }

  .formWrap h4 {
    font-size: 22px;
  }

  .formWrap .noticeChkBox,
  .formWrap .customSelectBox {
    max-width: none;
  }

}

@media (max-width: 767px) {

  .formWrap {

  }

  .formWrap .fileBox .fileInfoTextBox .fileInfoList {
    border-radius: 10px;
  }

  .formWrap .fileBox .fileListUploadBox .fileimgListBox {
    border-radius: 10px;
  }

  .formWrap h4 {    
    font-size: 20px;
  }

  .formWrap .fileBox .fileDropArea {
    border-radius: 10px;
  }

}

@media (max-width: 480px) {

  .formWrap .fileBox .fileInfoTextBox .fileInfoList {
    padding: 16px 16px 16px 10px;
  }

  .formWrap .fileBox .fileInfoTextBox .fileInfoList li::before {
    width: 5px;
    height: 5px;
  }

  .formWrap .fileBox .infoBox span {
    font-size: 14px;
  }

  .formWrap .fileBox .selectAllBtnBox {
    gap: 10px;
  }

  .formWrap .fileBox .layoutBox {
    flex-direction: column;
    align-items: flex-start;
  }

  .formWrap .fileBox .fileDropArea .fileDropIcon {
    width: 30px;
    height: 30px;
  }

  .formWrap .fileBox .fileListUploadBox .fileimgListBox {
    padding: 20px;
  }

  .formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li .fileBtn {
    width: 80px;
    height: 80px;
  }

  .formWrap .fileBox .fileListUploadBox .fileimgListBox .fileImgList li .fileBtn .checkIcon {
    width: 16px;
    height: 16px;
  }

}

/* 보도자료 - 목록 */
.pressReleaseListBox {
  position: relative;
}

.pressReleaseList li {
  margin-bottom: 24px;
}

.pressReleaseList li:last-child {
  margin-bottom: 0;
}

.pressReleaseList li a {
  display: flex;
  gap: 0 24px;
  border-radius: 20px;
}

.pressReleaseList li a .imgBox {
  flex-shrink: 0;
  width: 220px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
}

.pressReleaseList li a .imgBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.pressReleaseList li a:hover .imgBox img {
  transform: scale(1.2);
}

.pressReleaseList li a:hover .textBox h3 {
  text-decoration: underline;
}

.pressReleaseList li a .textBox {
  display: flex;
  flex-direction: column;
  padding: 8px 0 0 0;
  overflow: hidden;
}

.pressReleaseList li a .textBox h3 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 500;
  color: #1B1D1F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pressReleaseList li a .textBox p {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-500);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: keep-all;
}

.pressReleaseList li a .textBox .box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

.pressReleaseList li a .textBox .box .text {
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #203C6B;
  background-color: #EDF4FF;
  border-radius: 4px;
}

.pressReleaseList li a .textBox .box .date {
  font-size: 12px;
  font-weight: 700;
  color: #9EA4AA;
}

@media (max-width: 1199px) {



}

@media (max-width: 1024px) {


}

@media (max-width: 767px) {



  .pressReleaseList li a {
    flex-direction: column;
    gap: 16px 0;
  }

  .pressReleaseList li a .textBox {
    padding: 0;
  }

  .pressReleaseList li a .textBox p {
    margin-bottom: 8px;
  }

  .pressReleaseList li a .imgBox {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 46%;
  }

  .pressReleaseList li a .imgBox img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

}

@media (max-width: 480px) {

  .pressReleaseList li a {

  }

  .pressReleaseList li a .textBox h3 {
    font-size: 18px;
  }

  .pressReleaseList li a .imgBox {
    padding-top: 58%;
  }

}

/* 행사소식 */
.eventNewsListBox {
  position: relative;
}

.eventNewsListBox .calendarLeftBox {
  flex-shrink: 0;
  display: flex;
  gap: 0 66px;
  position: relative;
  padding: 64px;
  width: 626px;
  min-height: 493px;
  background: linear-gradient(to bottom, #E8EBED, #FFFFFF);
  border-radius: 40px;
  overflow: hidden;
}

.eventNewsListBox .calendarLeftBox::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 80%, #FFFFFF 100%);
  pointer-events: none;
  z-index: 1;
}

.eventNewsListBox .calendarLeftBox .leftBox {
  width: 72px;
}

.eventNewsListBox .calendarLeftBox .dateBox {
  margin-bottom: 12px;
  padding: 8px 0 0;
}

.eventNewsListBox .calendarLeftBox .dateBox span {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #1B1D1F;
}

.eventNewsListBox .calendarLeftBox .calendarBtnBox {
  display: flex;
  gap: 0 8px;
}

.eventNewsListBox .calendarLeftBox .calendarBtnBox .calendarBtn {
  width: 32px;
  height: 32px;
}

.eventNewsListBox .calendarLeftBox .calendarBtnBox .prevBtn {
  background: url(../images/sub/prev_icon.svg)no-repeat center;
}

.eventNewsListBox .calendarLeftBox .calendarBtnBox .nextBtn {
  background: url(../images/sub/next_icon.svg)no-repeat center;
}

.eventNewsListBox .calendarLeftBox .calendarBox {
  width: 100%;
}

.eventNewsListBox .calendarLeftBox .calendarBox .calWeekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.eventNewsListBox .calendarLeftBox .calendarBox .calWeekdays span {
  height: 48px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  color: #454C53;
}

.eventNewsListBox .calendarLeftBox .calendarBox .calWeekdays span.sun {
  color: #F65F52;
}

.eventNewsListBox .calendarLeftBox .calendarBox .calWeekdays span.sat {
  color: #3D9EFF;
}

.eventNewsListBox .calendarLeftBox .calendarBox .calGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 48px;
  gap: 4px;
}

.eventNewsListBox .calendarLeftBox .calendarBox .day {
  border-radius: 16px;
  font-weight: 500;
  color: #454C53;
}

.eventNewsListBox .calendarLeftBox .calendarBox .day.event {
  position: relative;
}

.eventNewsListBox .calendarLeftBox .calendarBox .day.event::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #203C6B;
}

.eventNewsListBox .calendarLeftBox .calendarBox .day.today {
  background-color: #3E7BFD;
  font-weight: 700;
  color: #fff;
  box-shadow:
    0 0 10px #C8DCFF, inset 0 0 10px rgba(255, 255, 255, 0.25);
}

.eventNewsListBox .calendarLeftBox .calendarBox .day.select {
  background-color: #FC7C1D;
  font-weight: 700;
  color: #fff;
  box-shadow:
    0 0 10px #FED6B9, inset 0 0 10px rgba(255, 255, 255, 0.25);
}

.eventNewsListBox .calendarLeftBox .calendarBox .prevMonth,
.eventNewsListBox .calendarLeftBox .calendarBox .nextMonth {
  color: #9EA4AA;
}

.eventNewsListBox .calendarLeftBox .calInfoBox {
  margin-top: 30px;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;
  gap: 10px 16px;
}

.eventNewsListBox .calendarLeftBox .calInfoBox span {
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.eventNewsListBox .calendarLeftBox .calInfoBox span::before {
  content: '';
}

.eventNewsListBox .calendarLeftBox .calInfoBox span.today::before {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background-color: #4D8FFF;
}

.eventNewsListBox .calendarLeftBox .calInfoBox span.select::before {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background-color: #FC7C1D;
}

.eventNewsListBox .calendarLeftBox .calInfoBox span.event::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #203C6B;
}

.eventNewsListBox .newsListBox {
  width: 44.4%;
}

.eventNewsListBox .newsListBox .dateBox {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 0 40px;
}

.eventNewsListBox .newsListBox .dateBox span {
  display: block;
  font-size: 32px;
  color: #1B1D1F;
  font-family: 'Retrosans';
  text-align: right;
}

.eventNewsListBox .newsListBox .dateBox em {
  font-size: 96px;
  color: #1B1D1F;
  font-family: 'Retrosans';
}

.eventNewsListBox .newsListBox .newsList li {
  margin-bottom: 4px;
}

.eventNewsListBox .newsListBox .newsList li:last-child {
  margin-bottom: 0;
}

.eventNewsListBox .newsListBox .newsList li a:hover {
  transform: translateX(10px);
}

.eventNewsListBox .newsListBox .newsList li a:hover .textBox h4 {
  text-decoration: underline;
}

.eventNewsListBox .newsListBox .newsList li a {
  padding: 24px;
  display: flex;
  gap: 0 76px;
  background-color: #F7F8F9;
  border-radius: 20px;
  transition: all .3s;
}

.eventNewsListBox .newsListBox .newsList li a .timeBox {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}

.eventNewsListBox .newsListBox .newsList li a .timeBox span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #4D8FFF;
}

.eventNewsListBox .newsListBox .newsList li a .textBox {
  flex: 1;
  min-width: 0;
}

.eventNewsListBox .newsListBox .newsList li a .textBox .text01 {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 9px;
  font-size: 14px;
  font-weight: 700;
  color: #203C6B;
  border-radius: 4px;
  background-color: #EDF4FF;
}

.eventNewsListBox .newsListBox .newsList li a .textBox h4 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #1B1D1F;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eventNewsListBox .newsListBox .newsList li a .textBox .text02 {
  font-size: 14px;
  font-weight: 700;
  color: #797979;
}

.eventNewsListBox .eventNewsLayoutBox {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}

.eventNewsListBox .noSchedule {
  margin-top: 4px;
  padding: 33px 10px;
  border-radius: 20px;
  background-color: #F7F8F9;
  text-align: center;
  font-weight: 700;
  color: #9EA4AA;
  font-size: 18px;
}

/* 캘린더 css */
#fcCal,
#fcCal * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#fcCal .fc-daygrid-day-events,
#fcCal .fc-daygrid-event-harness,
#fcCal .fc-event {
  display: none !important;
}

#fcCal .fc-daygrid-body table {
  border-collapse: separate !important;
  border-spacing: 4px 4px !important;
}

/* td 가운데정렬 */
.fc .fc-daygrid-day-top {
  justify-content: center;
}

/* FC 기본 테두리 제거 */
#fcCal .fc-scrollgrid,
#fcCal table,
#fcCal td,
#fcCal th {
  border: 0 !important;
}

/* 헤더 배경 */
#fcCal .fc-scrollgrid-section-sticky>* {
  background: 0;
}

#fcCal .fc-col-header-cell-cushion {
  padding: 0;
  height: 48px;
  line-height: 48px;
  font-weight: 700;
  text-align: center;
  color: #454C53;
}

/* td */
#fcCal td {
  cursor: pointer;
}

#fcCal td a {
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-weight: 500;
  color: #454C53;
}

/* 일정 있을 경우 */
#fcCal td.event a {
  position: relative;
}

#fcCal td.event a::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #203C6B;
}

/* 토, 일 */
#fcCal th .fc-day-sun a {
  color: #F65F52;
}

#fcCal th .fc-day-sat a {
  color: #3D9EFF;
}

/* 오늘 */
#fcCal td.today {
  background: 0;
  cursor: auto;
}

#fcCal td.today a {
  background-color: #3E7BFD;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 10px #C8DCFF, inset 0 0 10px rgba(255, 255, 255, 0.25);
}

/* 선택일자 */
#fcCal td.select a {
  background-color: #FC7C1D;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 0 10px #FED6B9, inset 0 0 10px rgba(255, 255, 255, 0.25);
}

/* 포커스 아웃라인 제거(버튼처럼) */
#fcCal a:focus,
#fcCal .fc-daygrid-day:focus {
  outline: none;
}

/* FullCalendar 날짜 셀 내부 before/after 제거 */
#fcCal .fc-daygrid-day-frame::before,
#fcCal .fc-daygrid-day-frame::after,
#fcCal .fc-scrollgrid-sync-inner::before,
#fcCal .fc-scrollgrid-sync-inner::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1280px) {

  .eventNewsListBox .calendarLeftBox {
    width: 580px;
  }

}

@media (max-width: 1199px) {

  .eventNewsListBox .eventNewsLayoutBox {
    margin-bottom: 30px;
  }

  .eventNewsListBox .calendarLeftBox .dateBox {
    text-align: center;
  }

  .eventNewsListBox .calendarLeftBox {
    padding: 64px 20px;
    flex-direction: column;
    align-items: center;
    gap: 30px 0;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .eventNewsListBox .calendarLeftBox::before {
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0) 90%, #FFFFFF 100%);
  }

  .eventNewsListBox .newsListBox {
    width: 100%;
  }

  .eventNewsListBox .newsListBox .dateBox {
    gap: 0 30px;
  }

  .eventNewsListBox .newsListBox .dateBox span {
    font-size: 26px;
  }

  .eventNewsListBox .newsListBox .dateBox em {
    font-size: 80px;
  }

  .eventNewsListBox .newsListBox .newsList li a {
    gap: 0 49px;
  }

}

@media (max-width: 767px) {

  .eventNewsListBox .calendarLeftBox .dateBox span {
    font-size: 20px;
  }

  .eventNewsListBox .newsListBox .dateBox {
    gap: 0 20px;
  }

  .eventNewsListBox .newsListBox .dateBox span {
    font-size: 22px;
  }

  .eventNewsListBox .newsListBox .dateBox em {
    font-size: 60px;
  }

  .eventNewsListBox .newsListBox .newsList li a {
    padding: 24px 20px;
    gap: 0 35px;
    border-radius: 10px;
  }

  .eventNewsListBox .noSchedule {
    padding: 20px 10px;
    border-radius: 10px;
    font-size: 16px;
  }

}

@media (max-width: 480px) {

  .eventNewsListBox .newsListBox .dateBox {
    gap: 0 16px;
    justify-content: center;
  }

  .eventNewsListBox .newsListBox .dateBox span {
    font-size: 16px;
  }

  .eventNewsListBox .newsListBox .dateBox em {
    font-size: 50px;
  }

  .eventNewsListBox .newsListBox .newsList li a {
    flex-direction: column;
    gap: 15px 20px;
  }

  .eventNewsListBox .newsListBox .newsList li a .textBox h4 {
    margin-bottom: 12px;
    font-size: 16px;
    text-align: center;
  }

  .eventNewsListBox .newsListBox .newsList li a .timeBox {
    gap: 4px 0;
    align-items: center;
  }

  .eventNewsListBox .newsListBox .newsList li a .timeBox span {
    font-size: 12px;
  }

  .eventNewsListBox .newsListBox .newsList li a .textBox {
    text-align: center;
  }

  .eventNewsListBox .newsListBox .newsList li a .textBox .text02 {
    display: block;
    text-align: center;
  }

  .eventNewsListBox .calendarLeftBox {
    gap: 14px 0;
  }

  .eventNewsListBox .calendarLeftBox .calInfoBox {
    margin-top: 20px;
  }

  .eventNewsListBox .calendarLeftBox .calendarBox .calWeekdays span,
  .eventNewsListBox .calendarLeftBox .calendarBox .day {
    font-size: 14px;
    border-radius: 10px;
  }

  .eventNewsListBox .noSchedule {
    font-size: 14px;
  }

  #fcCal th a,
  #fcCal td a {
    font-size: 14px;
    border-radius: 7px;
    width: 36px;
    height: 36px !important;
  }

}

/* 행사소식 - 상세 */
.eventNewsDetailBox {
  margin-bottom: 30px;
  padding: 64px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  border-radius: 64px;
}

.eventNewsDetailBox h5 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #454C53;
}

.eventNewsDetailBox .newsInfoBox {
  margin-bottom: 64px;
  padding: 24px 20px;
  background-color: #F7F8F9;
  border-radius: 16px;
}

.eventNewsDetailBox .newsInfoBox .list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 18px;
  display: flex;
  gap: 0 24px;
}

.eventNewsDetailBox .newsInfoBox .list li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #4D8FFF;
}

.eventNewsDetailBox .newsInfoBox .list li:last-child {
  margin-bottom: 0;
}

.eventNewsDetailBox .newsInfoBox .list li .text01 {
  flex-shrink: 0;
  width: 64px;
  font-weight: 700;
  color: #1B1D1F;
}

.eventNewsDetailBox .newsInfoBox .list li .text02 {
  font-weight: 500;
  color: #454C53;
}

.eventNewsDetailBox p {
  font-weight: 500;
  color: #454C53;
  line-height: 1.7;
}

@media (max-width: 767px) {

  .eventNewsDetailBox .newsInfoBox {
    margin-bottom: 42px;
    border-radius: 10px;
  }

  .eventNewsDetailBox {
    padding: 30px;
    border-radius: 20px;
  }

  .eventNewsDetailBox .newsInfoBox .list li {
    gap: 0;
  }

}

@media (max-width: 480px) {

  .eventNewsDetailBox {
    border-radius: 10px;
  }

  .eventNewsDetailBox h5 {
    font-size: 16px;
  }

  .eventNewsDetailBox .newsInfoBox .list li .text01,
  .eventNewsDetailBox .newsInfoBox .list li .text02,
  .eventNewsDetailBox p {
    font-size: 14px;
  }

  .eventNewsDetailBox .newsInfoBox .list li::before {
    width: 4px;
    height: 4px;
  }

  .eventNewsDetailBox .newsInfoBox .list li .text01 {
    width: 48px;
  }

}

/* 행사소식 - 작성 */
.formBox .scheduleBox {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.formBox .scheduleBox .inputTextBox {
  position: relative;
}

.formBox .scheduleBox .inputTextBox input {
  padding: 0 48px 0 16px;
  width: 220px;
}

.formBox .scheduleBox .inputTextBox input::placeholder {
  color: #454C53;
}

.formBox .scheduleBox .inputTextBox .calendarBtn {
  width: 19px;
  height: 18px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  background: url(../images/sub/calendar_icon.svg)no-repeat center;
}

.formBox .timeBox {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.formBox .timeBox .box {
  height: 48px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  background-color: #F7F8F9;
  border-radius: 8px;
  border: 1px solid #E8EBED;
}

.formBox .timeBox .box .inputTextBox input {
  padding: 0 3px;
  width: 56px;
  height: 32px;
  text-align: center;
  border-radius: 4px;
}

.formBox .timeBox .box .inputTextBox input::placeholder {
  color: #454C53;
}

@media (max-width: 1199px) {

  .formBox .timeBox,
  .formBox .scheduleBox {
    flex-direction: column;
  }

  .formBox .timeBox .box,
  .formBox .timeBox .box .inputTextBox,
  .formBox .scheduleBox .inputTextBox,
  .formBox .timeBox .box .inputTextBox input,
  .formBox .scheduleBox .inputTextBox input {
    width: 100%;
  }

}

/* 비전 */
.visionBox {}
.vision-section-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.vision-section {
  display: flex;
  gap: var(--spacing-lm);
}
.vision-section .vision-tit {
  width: 80px;
}
.vision-section .vision-tit span {
  padding: 4px 8px;
  border-radius: var(--radius-2xs);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-900);
  background-color: var(--blue-50);
}
.vision-section .vision-contents {
  flex:1;
}

.vision__slogan {
  border: 2px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  padding: 16px;
  border-radius: var(--radius-ms);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.vision__slogan p {
  font-size:20px;
  word-break: keep-all;
}
.vision__slogan p b {
  font-weight: 700;
  color: var(--primary-color);
}

.vision__direction {}
.vision__direction ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-ms);
}
.vision__direction-list {
  display: flex;
  gap: var(--spacing-m);
}
.vision__direction-tit-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  width: 200px;  
}
.vision__direction-tit-box .img-box {
  width:100%;
  max-width:56px;
}
.vision__direction-tit-box .img-box img {
  width:100%;
}
.vision__direction-tit-box .tit-box {
  
}
.vision__direction-tit-box .tit-box p {
  font-weight: 700;
}
.vision__direction-cont-box {
  flex:1;
}
.vision__direction-cont-box span {
  font-size: 14px;
  color: var(--gray-600);
}

.vision__core {
  padding: var(--spacing-m);
  border-radius: var(--radius-l);
  border: 2px dashed var(--blue-100);
  display: flex;
  gap: var(--spacing-m);
}
.vision__core-tit-box {
  min-width: 174px;
}
.vision__core-tit-box p {
  font-weight: 400;
  font-family: 'Retrosans';
  font-size: 24px;
  color: var(--primary-color);
}
.vision__core-tit-box span {
  font-size: 14px;
  color: var(--gray-600);
}
.vision__core-cont-box {}
.vision__core-cont-box ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}
.vision__core-list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  border-radius: var(--radius-ms);
  background-color: var(--blue-900);
}
.vision__core-list span {
  font-weight:700;
  color:var(--blue-50);
}

.vision__assignment {
  display:flex;
  flex-direction: column;
  gap:var(--spacing-m);
}
.vision__assignment article {
  border-top: 2px solid var(--gray-900);
  padding: var(--spacing-xs) 0;
}
.vision__assignment-list {
  display: flex;
  gap: var(--spacing-m);
}
.vision__assignment-tit-box {
  min-width: 120px;
}
.vision__assignment-tit-box .tit-box {
  
}
.vision__assignment-tit-box .tit-box p {
  font-weight: 700;
}
.vision__assignment-cont-box {}
.vision__assignment-cont-box ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.vision__assignment-cont-list {
  display: flex;
  gap: var(--spacing-2xs);
}
.vision__assignment-cont-list p {
  font-weight: 400;
  font-family: 'Retrosans';
  font-size: 16px;
  color: var(--primary-color);
  width: 20px;
  text-align: center;
}
.vision__assignment-cont-list span {
  font-size: 14px;
  color: var(--gray-600);
  padding-top: 2px;
}


@media (max-width: 1199px) {

}

@media (max-width: 1024px) {
  .vision-section {
    display: flex;
    gap: var(--spacing-s);
    flex-direction: column;
  }

  .vision__core {
    flex-direction: column;
  }

}

@media (max-width: 767px) {
  .vision__assignment { 
    gap: var(--spacing-s);
  }
  .vision__assignment-list {  
    gap: var(--spacing-xs);
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .vision__direction ul {
    gap: var(--spacing-ml);
  }
  .vision__direction-tit-box {
    gap: var(--spacing-xs);
    width: 120px;
    flex-direction: column;
  }
  .vision__direction-tit-box .tit-box p {
    text-align: center;
  }

}

@media (max-width: 414px) {


}

/* 찾아오시는 길 */
.locationBox .map {  
  position: relative;
  margin-top: 40px;
  height: 598px;
  border: 8px solid #fff;
  border-radius: 64px;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  overflow: hidden;
}

.locationBox .map .mapCanvas {
  width: 100%;
  height: 598px;
  z-index: 1;
}

.locationBox .map .addressBox {
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 15px;
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 8px;
}

.locationBox .map .addressBox img {
  width: 28px;
  margin-right: 16px;
}

.locationBox .map .addressBox .position01 {
  flex-shrink: 0;
  margin-right: 16px;
  font-weight: 700;
  color: #454C53;
}

.locationBox .map .addressBox .position02 {
  font-size: 14px;
  color: #454C53;
}

.locationBox .map .marker {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background-color: #4D8FFF;
  border-radius: 50%;
  z-index: 999;
}

.locationBox .map .marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  background-color: #fff;
  border-radius: 50%;
}

.locationBox .map .marker::before {
  content: '';
  width: 20px;
  height: 14px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  background: url(../images/sub/marker_arrow.svg)no-repeat center;
}

.locationBox .intoTextBox {
  display: flex;
  gap: var(--spacing-lm);
  flex-wrap: wrap;
}

.locationBox .intoTextBox p {
  font-size: 32px;
  font-weight: 700;
  color: #1B1D1F;
  flex: 1;
  min-width: 240px;
}

.locationBox .intoTextBox .infoBox .layoutBox {
  width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 0 8px;
}

.locationBox .intoTextBox .infoBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 560px;
  gap: 24px 0;
}

.locationBox .intoTextBox .infoBox .box em {
  display: block;
  margin-bottom: 12px;
  color: #454C53;
}

.locationBox .intoTextBox .infoBox .box em:last-child {
  margin-bottom: 0;
}

.locationBox .intoTextBox .infoBox span {
  display: flex;
  align-items: center;
  gap: 0 8px;
  flex-shrink: 0;
  width: 104px;
  font-size: 16px;
  color: #1B1D1F;
  font-weight: 700;
}

.locationBox .intoTextBox .infoBox span::before {
  content: '';
  width: 24px;
  height: 24px;
  opacity: 0.3;
}

.locationBox .intoTextBox .infoBox span.time::before {
  background: url(../images/sub/time_icon.svg)no-repeat center / contain;
}

.locationBox .intoTextBox .infoBox span.phone::before {
  background: url(../images/sub/phone_icon.svg)no-repeat center / contain;
}

.locationBox .intoTextBox .infoBox span.fax::before {
  background: url(../images/sub/fax_icon.svg)no-repeat center / contain;
}

.locationBox .intoTextBox .infoBox span.email::before {
  background: url(../images/sub/email_icon.svg)no-repeat center / contain;
}

@media (max-width: 1199px) {

  .locationBox .map {
    height: 500px;
    border-radius: 30px;
    border: 5px solid #fff;
  }

  .locationBox .intoTextBox p {
    font-size: 28px;
  }

  .locationBox .intoTextBox .infoBox span {
    font-size: 18px;
  }

}

@media (max-width: 1024px) {

  .locationBox .map {
    margin-bottom: 56px;
  }

  .locationBox .intoTextBox {
    flex-direction: column;
    gap: 30px 0;
  }

  .locationBox .intoTextBox p {
    margin-bottom: 25px;
    text-align: center;
  }

  .locationBox .intoTextBox .infoBox {
    padding-left: 54px;
    margin: 0 auto;
  }

}

@media (max-width: 767px) {

  .locationBox .map {
    height: 400px;
    border-radius: 20px;
  }

  .locationBox .map .marker {
    width: 30px;
    height: 30px;
  }

  .locationBox .map .marker::after {
    width: 18px;
    height: 18px;
  }

  .locationBox .map .marker::before {
    width: 13px;
    height: 13px;
    bottom: -7px;
  }

  .locationBox .map .addressBox {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .locationBox .intoTextBox p {
    margin-bottom: 20px;
    font-size: 24px;
  }

  .locationBox .intoTextBox .infoBox {
    width: 100%;
    padding: 0;
    gap: 50px 0;
  }

  .locationBox .intoTextBox .infoBox .layoutBox {
    flex-direction: column;
    gap: 10px 0;
    align-items: center;
  }

  .locationBox .intoTextBox .infoBox .box em {
    margin-bottom: 6px;
    text-align: center;
  }

  .locationBox .intoTextBox .infoBox span {
    flex-direction: column;
    justify-content: center;
    gap: 7px 0;
  }

}

@media (max-width: 480px) {

  .locationBox .map {
    height: 335px;
  }

  .locationBox .intoTextBox p {
    margin-bottom: 8px;
    font-size: 20px;
  }

  .locationBox .intoTextBox .infoBox {
    gap: 35px 0;
  }

  .locationBox .intoTextBox .infoBox span::before {
    width: 20px;
    height: 20px;
  }

  .locationBox .intoTextBox .infoBox .layoutBox {
    gap: 5px 0;
  }

  .locationBox .intoTextBox .infoBox span {
    gap: 5px 0;
    font-size: 16px;
  }

  .locationBox .intoTextBox .infoBox .box em {
    margin-bottom: 0;
    font-size: 14px;
  }

  .locationBox .map {
    height: 335px;
  }

  .locationBox .map .addressBox img {
    width: 22px;
    margin-right: 12px;
  }

  .locationBox .map .addressBox .position01,
  .locationBox .map .addressBox .position02 {
    font-size: 14px;
  }

}

@media (max-width: 414px) {

  .locationBox .map .addressBox .position01,
  .locationBox .map .addressBox .position02 {
    font-size: 12px;
  }

}

/* 시설현황 - 목록 */
.facilityStatusListBox {
  display: flex;
  align-items: flex-start;
  gap: 0 80px;
}

.facilityStatusListBox .categoryBox {
  position: sticky;
  top: 114px;
  width: 286px;
  flex-shrink: 0;
}

.facilityStatusListBox .categoryBox h4 {
  margin-bottom: 16px;
  font-size: 18px;
  color: #454C53;
  font-weight: 700;
}

.facilityStatusListBox .categoryBox .categoryList {
  width: 132px;
  padding: 24px 5px 24px 24px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  border-radius: 20px;
}

.facilityStatusListBox .categoryBox .categoryList li {
  margin-bottom: 16px;
}

.facilityStatusListBox .categoryBox .categoryList li:last-child {
  margin-bottom: 0;
}

.facilityStatusListBox .categoryBox .categoryList li .btn {
  display: flex;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.facilityStatusListBox .categoryBox .categoryList li .btn::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url(../images/sub/chk_icon.svg)no-repeat center;
}

.facilityStatusListBox .categoryBox .categoryList li .btn.active {
  font-weight: 700;
  color: #4D8FFF;
}

.facilityStatusListBox .categoryBox .categoryList li .btn.active::before {
  background: url(../images/sub/chk_on_icon.svg)no-repeat center;
}

.facilityStatusListBox .categoryBox .categoryList li .btn:hover {
  font-weight: 700;
  color: #4D8FFF;
}

.facilityStatusListBox .categoryBox .categoryList li .btn:hover::before {
  background: url(../images/sub/chk_on_icon.svg)no-repeat center;
}

.facilityStatusListBox .listBox {
  width: 100%;
}

.facilityStatusListBox .listBox .tabBtn {
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facilityStatusListBox .listBox .tabBtn .btn:hover {
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  color: transparent;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  transition: all .3s;
}

.facilityStatusListBox .listBox .tabBtn .btn:hover::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.facilityStatusListBox .listBox .tabBtn .btn:hover .text {
  display: none;
}

.facilityStatusListBox .listBox .tabBtn .btn {
  position: relative;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  font-size: 14px;
}

.facilityStatusListBox .listBox .tabBtn .btn .text {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.facilityStatusListBox .listBox .tabBtn .btn .number {
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.facilityStatusListBox .listBox .tabBtn .btn.active {
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  color: transparent;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
}

.facilityStatusListBox .listBox .tabBtn .btn.active::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.facilityStatusListBox .listBox .tabBtn .btn.active .text {
  display: none;
}

.facilityStatusListBox .listBox .facilityStatusList li {
  margin-bottom: -1px;
}

.facilityStatusListBox .listBox .facilityStatusList li a:hover .imgBox {
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}

.facilityStatusListBox .listBox .facilityStatusList li a:hover .textBox h4 {
  transform: translateX(10px);
  text-decoration: underline;
}

.facilityStatusListBox .listBox .facilityStatusList li a {
  padding: 24px 0 24px 24px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #E8EBED;
}

.facilityStatusListBox .listBox .facilityStatusList li a .imgBox {
  width: 132px;
  height: 132px;
  border-radius: 20px;
  overflow: hidden;
  transition: all .3s;
}

.facilityStatusListBox .listBox .facilityStatusList li a .imgBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox {
  width: calc(100% - 394px);
  padding: 8px 20px 0 48px;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox h4 {
  margin-bottom: 13px;
  font-size: 20px;
  color: #000;
  font-weight: 700;
  transition: all .3s;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox .functionText {
  margin-bottom: 27px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox .functionText dt {
  font-size: 14px;
  font-weight: 700;
  color: #9EA4AA;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox .functionText dd {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox .locationText {
  padding-left: 4px;
  display: flex;
  align-items: center;
  gap: 0 12px;
  font-weight: 500;
  color: #9EA4AA;
  font-size: 14px;
}

.facilityStatusListBox .listBox .facilityStatusList li a .textBox .locationText::before {
  content: '';
  width: 16px;
  height: 21px;
  background: url(../images/sub/position_icon.svg)no-repeat center;
}

.facilityStatusListBox .listBox .facilityStatusList li a .sportsBox {
  min-width: 261px;
  margin-left: auto;
  padding: 29px 52px 24px 24px;
  border-left: 1px solid #E8EBED;
}

.facilityStatusListBox .listBox .facilityStatusList li a .sportsBox h5 {
  margin-bottom: 16px;
  font-weight: 700;
  color: #9EA4AA;
  font-size: 14px;
}

.facilityStatusListBox .listBox .facilityStatusList li a .sportsBox .sportsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facilityStatusListBox .listBox .facilityStatusList li a .sportsBox .sportsList li {
  padding: 6px 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

@media (max-width: 1480px) {

  .facilityStatusListBox .categoryBox {
    width: auto;
  }

}

@media (max-width: 1199px) {

  .facilityStatusListBox {
    flex-direction: column;
    gap: 30px 0;
  }

  .facilityStatusListBox .categoryBox {
    position: static;
  }

  .facilityStatusListBox .categoryBox .categoryList {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 30px;
    width: 100%;
  }

  .facilityStatusListBox .categoryBox .categoryList li {
    margin: 0;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .imgBox {
    padding: 0;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a {
    padding: 24px 20px;
    gap: 0 30px
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox {
    padding: 10px 0 0 0;
    width: calc(100% - 162px);
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox h4 {
    font-size: 18px;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .sportsBox h5 {
    margin-bottom: 9px;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .sportsBox {
    min-width: auto;
    margin-top: 15px;
    padding: 0;
    width: 100%;
    border: 0;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox .locationText {
    padding: 0;
    gap: 0 9px;
  }

}

@media (max-width: 767px) {

  .facilityStatusListBox .listBox .tabBtn .btn,
  .facilityStatusListBox .categoryBox .categoryList {
    border-radius: 10px;
  }

  .facilityStatusListBox .listBox .tabBtn .btn {
    padding: 9px 12px;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox h4 {
    font-size: 16px;
  }

}

@media (max-width: 480px) {

  .facilityStatusListBox {
    gap: 20px 0;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox {
    width: 100%;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox .functionText {
    justify-content: center;
    margin-bottom: 11px;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox h4 {
    margin-bottom: 10px;
    text-align: center;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .imgBox {
    margin: 0 auto 10px;
    border-radius: 10px;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .textBox .locationText {
    justify-content: center;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .sportsBox h5 {
    text-align: center;
  }

  .facilityStatusListBox .listBox .facilityStatusList li a .sportsBox .sportsList {
    justify-content: center;
  }

  .facilityStatusListBox .categoryBox h4 {
    font-size: 16px;
  }

  .facilityStatusListBox .listBox .tabBtn {
    gap: 8px 2%;
  }

  .facilityStatusListBox .listBox .tabBtn .btn {
    padding: 6px;
    width: 32%;
    justify-content: center;
  }

  .facilityStatusListBox .listBox .tabBtn .btn .number {
    padding: 2px 6px;
    border-radius: 5px;
  }

}

@media (max-width: 414px) {

  .facilityStatusListBox .listBox .tabBtn .btn {
    width: 49%;
  }

}

/* 시설현황 - 상세 */
.facilityStatusViewBox {
  display: flex;
  gap: 0 146px;
}

.facilityStatusViewBox .imgBox {
  flex-shrink: 0;
  width: 586px;
  height: 405px;
  border-radius: 20px;
  overflow: hidden;
}

.facilityStatusViewBox .imgBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facilityStatusViewBox .textBox {
  width: 100%;
}

.facilityStatusViewBox .textBox h4 {
  margin-bottom: 40px;
  font-weight: 700;
  color: #000;
  font-size: 32px;
}

.facilityStatusViewBox .textBox dl {
  padding-bottom: 30px;
}

.facilityStatusViewBox .textBox dl .box {
  margin-bottom: 20px;
  display: flex;
  gap: 0 16px;
}

.facilityStatusViewBox .textBox dl .box:last-child {
  margin-bottom: 0;
}

.facilityStatusViewBox .textBox dl .box dt {
  flex-shrink: 0;
  font-weight: 700;
  color: #9EA4AA;
}

.facilityStatusViewBox .textBox dl .box dd {
  font-weight: 500;
  color: #454C53;
}

.facilityStatusViewBox .textBox .sportsBox {
  margin-bottom: 36px;
  padding-top: 20px;
  border-top: 1px solid #E8EBED;
}

.facilityStatusViewBox .textBox .sportsBox h5 {
  margin-bottom: 16px;
  font-weight: 700;
  color: #9EA4AA;
  font-size: 16px;
}

.facilityStatusViewBox .textBox .sportsBox .sportsList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.facilityStatusViewBox .textBox .sportsBox .sportsList li {
  padding: 6px 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.facilityStatusViewBox .locationText {
  margin-bottom: 64px;
  padding: 11px 10px 11px 16px;
  display: flex;
  gap: 0 12px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  background: linear-gradient(to right, #EDF4FF, #F7F8F9);
  border-radius: 8px;
}

.facilityStatusViewBox .locationText::before {
  content: '';
  width: 16px;
  height: 21px;
  background: url(../images/sub/position_icon.svg)no-repeat center;
}

.facilityStatusViewBox .tit {
  margin-bottom: 16px;
  font-size: 18px;
  color: #454C53;
}

.facilityStatusViewBox .list {
  padding: 20px;
  border: 1px solid #E8EBED;
  border-radius: 20px;
}

.facilityStatusViewBox .list li {
  color: #454C53;
}

@media (max-width: 1199px) {

  .facilityStatusViewBox {
    flex-direction: column;
    gap: 30px 0;
  }

  .facilityStatusViewBox .imgBox {
    width: 100%;
    height: 530px;
  }

  .facilityStatusViewBox .textBox h4 {
    font-size: 28px;
  }

  .facilityStatusViewBox .locationText {
    margin-bottom: 40px;
  }

}

@media (max-width: 767px) {

  .facilityStatusViewBox .list {
    border-radius: 10px;
  }

  .facilityStatusViewBox .imgBox {
    height: 430px;
    border-radius: 10px;
  }

  .facilityStatusViewBox .textBox h4 {
    margin-bottom: 28px;
    font-size: 24px;
  }

}

@media (max-width: 480px) {

  .facilityStatusViewBox .list {
    border-radius: 10px;
  }

  .facilityStatusViewBox .imgBox {
    height: 300px;
    border-radius: 10px;
  }

  .facilityStatusViewBox .textBox h4 {
    margin-bottom: 20px;
    font-size: 20px;
  }

  .facilityStatusViewBox .textBox dl .box {
    margin-bottom: 15px;
  }

  .facilityStatusViewBox .textBox .sportsBox h5 {
    margin-bottom: 12px;
  }

  .facilityStatusViewBox .textBox .sportsBox h5,
  .facilityStatusViewBox .textBox dl .box dd,
  .facilityStatusViewBox .textBox dl .box dt {
    font-size: 14px;
  }

  .facilityStatusViewBox .textBox .sportsBox {
    margin-bottom: 30px;
  }

  .facilityStatusViewBox .tit {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .facilityStatusViewBox .list {
    padding: 15px 20px;
  }

  .facilityStatusViewBox .list li {
    font-size: 14px;
  }

}

/* 연혁 */
.historyBox .topImgBox {
  margin-bottom: 140px;
  position: relative;
  height: 540px;
  z-index: 1;
  transform: scale(.9);
  border-radius: 120px;
  transition: all 3s;
  overflow: hidden;
  background: url(../images/sub/history_img.png)no-repeat center top;
  background-size: cover;
}

.historyBox .topImgBox::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 183px;
  background: linear-gradient(to bottom, #FEFEFB00 0%, #C9CDD2 100%);
}

.historyBox .topImgBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .25);
  z-index: -1;
}

.historyBox .topImgBox img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.historyBox .topImgBox .textBox .container {
  position: relative;
  height: 540px;
}

.historyBox .topImgBox .textBox p {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 20px;
  filter: blur(5px);
  text-align: center;
}

.historyBox .topImgBox .textBox span {
  display: inline-block;
  margin-right: 50px;
  line-height: 2;
}

.historyBox .topImgBox .textBox span:last-child {
  margin-right: 0;
}

.historyBox .topImgBox.active .textBox p {
  opacity: 1;
  filter: blur(0);
  letter-spacing: 15px;
  transition: all 3s;
}

.historyBox .topImgBox.active {
  transform: scale(1);
  border-radius: 0;
}

.historyBox .historyList>li {
  margin-bottom: 64px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.historyBox .historyList>li:last-child {
  margin-bottom: 0;
}

.historyBox .historyList li .yearBox {
  position: sticky;
  top: 114px;
  width: 100px;
  flex-shrink: 0;
}

.historyBox .historyList li .yearBox h4 {
  color: #1B1D1F;
  font-family: 'Retrosans';
  font-size: 24px;
  font-weight: 400;
}

.historyBox .historyList li .list {
  position: relative;
  padding-left: 24px;
}

.historyBox .historyList li .list::before {
  content: '';
  width: 2px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: url(../images/sub/border.svg)no-repeat center / cover;
}

.historyBox .historyList li .list li {
  margin-bottom: 24px;
}

.historyBox .historyList li .list li:last-child {
  margin-bottom: 0;
}

.historyBox .historyList li .list li .date {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  color: #9EA4AA;
}

.historyBox .historyList li .list li .text {
  font-size: 16px;
  color: #1B1D1F;
}



@media (max-width: 1199px) {

  .historyBox .topImgBox,
  .historyBox .topImgBox .textBox .container {
    height: 400px;
  }

  .historyBox .topImgBox .textBox p {
    font-size: 18px;
    text-align: center;
  }

  .historyBox .topImgBox .textBox span {
    margin-right: 13px;
  }

  .historyBox .topImgBox::after {
    height: 150px;
  }

  .historyBox .historyList li .yearBox h4 {
    font-size: 24px;
  }


}

@media (max-width: 767px) {

  .historyBox .topImgBox,
  .historyBox .topImgBox .textBox .container {
    height: 350px;
  }

  .historyBox .topImgBox .textBox p {
    font-size: 16px;
  }

  .historyBox .topImgBox .textBox span {
    margin-right: 0;
  }

  .historyBox .topImgBox {
    margin-bottom: 80px;
  }

  .historyBox .historyList>li {
    margin-bottom: 55px;
    flex-direction: column;
    gap: 16px 0;
  }

  .historyBox .historyList li .yearBox h4 {
    font-size: 24px;
  }

  .historyBox .historyList li .yearBox {
    position: static;
    width: 100%;
  }

  .historyBox .historyList li .list {
    padding-left: 16px;
  }

  .historyBox .historyList li .list li {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {

  .historyBox .topImgBox {
    margin-bottom: 65px;
  }

  .historyBox .topImgBox,
  .historyBox .topImgBox .textBox .container {
    height: 300px;
  }

  .historyBox .topImgBox .textBox p {
    font-size: 14px;
  }

  .historyBox .historyList li .yearBox h4 {
    font-size: 24px;
  }

  .historyBox .historyList li .list {
    padding-left: 16px;
  }

  .historyBox .historyList li .list li {
    margin-bottom: 24px;
  }

  .historyBox .historyList li .list li .date {
    font-size: 14px;
  }

  .historyBox .historyList li .list li .text {
    font-size: 16px;
  }

}

/* 역대회장 */
.presidentBox .presidentTopBox {
  position: relative;
  margin-bottom: 80px;
  display: flex;
  align-items: flex-end;
  height: 508px;
  background: linear-gradient(to right, #F7F8F9, #EDF4FF);
}

.presidentBox .presidentTopBox::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 164px;
  background: url(../images/sub/bg03.png) repeat-x center;
}

.presidentBox .presidentTopBox .layoutBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 103px;
}

.presidentBox .presidentTopBox .textBox .text {
  display: block;
  margin-bottom: 15px;
  font-weight: 400;
  color: #1B1D1F;
  font-size: 48px;
  font-family: 'Retrosans';
}

.presidentBox .presidentTopBox .textBox .name {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 32px;
  color: #454C53;
}

.presidentBox .presidentTopBox .textBox .info {
  margin-bottom: 12px;
  display: inline-block;
  padding: 4px 8px;
  background-color: #EDF4FF;
  font-size: 12px;
  font-weight: 700;
  color: #203C6B;
  border-radius: 4px;
}

.presidentBox .presidentTopBox .textBox .term {
  display: block;
  color: #474E55;
}

.presidentBox .presidentTopBox .imgBox img {
  display: block;
  max-width: 100%;
}

.presidentBox .presidentListBox .presidentList {
  display: flex;
  flex-wrap: wrap;
}

.presidentBox .presidentListBox .presidentList li {
  width: 25%;
  margin: 0 -1px -1px 0;
  padding: 40px 24px;
  border: 1px solid #E8EBED;
}

.presidentBox .presidentListBox .presidentList li .textBox {
  min-height: 140px;  
}

.presidentBox .presidentListBox .presidentList li .textBox .text {
  display: block;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 400;
  color: #1B1D1F;
  font-family: 'Retrosans';
}
.presidentBox .presidentListBox .presidentList li .textBox .name-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}
.presidentBox .presidentListBox .presidentList li .textBox .name {
  display: block;
  color: #454C53;
  font-size: 18px;
  font-weight: 700;
}

.presidentBox .presidentListBox .presidentList li .textBox .term {
  margin-top: 8px;
  display: block;
  font-size:14px;
  font-weight: 500;
  color: #454C53;
}

.presidentBox .presidentListBox .presidentList li .textBox .info {
  display: inline-block;
  padding: 4px 8px;
  background-color: #EDF4FF;
  font-size: 12px;
  font-weight: 700;
  color: #203C6B;
  border-radius: 4px;
}

.presidentBox .presidentListBox .presidentList li .imgBox {
  width: 100%;
  height: 100%;
  max-width: 120px;
  max-height: 145px;
  border-radius: 0 0 64px 0;
  overflow: hidden;
}

.presidentBox .presidentListBox .presidentList li .imgBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presidentBox .presidentListBox .presidentList li:nth-child(1n) {
  border-left: 0;
}


@media (min-width: 1481px) {
  .presidentBox .presidentListBox .presidentList li:nth-child(4n) {
    border-right: 0;
  }
}

@media (max-width: 1480px) {

  .presidentBox .presidentTopBox .textBox .text {
    margin-bottom: 10px;
    font-size: 40px;
  }

  .presidentBox .presidentTopBox .textBox .name {
    font-size: 26px;
  }

  .presidentBox .presidentListBox .presidentList li {
    width: 33.33%;
    padding: 32px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .presidentBox .presidentListBox .presidentList li:nth-child(1n) {
    border-left: 0;
  }

  
  .presidentBox .presidentListBox .presidentList li .textBox {
    min-height:130px;
    text-align: center;
  }

  .presidentBox .presidentListBox .presidentList li .textBox .text {
    margin-bottom: 8px;    
  }

  .presidentBox .presidentListBox .presidentList li .textBox .name {
    font-size: 18px;
  }

}

@media (min-width: 768px) and (max-width: 1480px) {
  .presidentBox .presidentListBox .presidentList li:nth-child(3n) {
    border-right: 0;
  }  
}

@media (max-width: 767px) {

  .presidentBox .presidentTopBox .textBox .text {
    font-size: 32px;
  }

  .presidentBox .presidentTopBox .textBox .name {
    font-size: 22px;
  }

  .presidentBox .presidentTopBox {
    height: auto;
    padding: 50px 0 0;
  }

  .presidentBox .presidentTopBox .layoutBox {
    flex-direction: column;
    gap: 15px 0;
  }

  .presidentBox .presidentTopBox .textBox {
    text-align: center;
  }

  .presidentBox .presidentListBox .presidentList li {
    width: 50%;
  }

  .presidentBox .presidentListBox .presidentList li .textBox .text {
    margin-bottom: 5px;
    font-size: 24px;
  }

  .presidentBox .presidentListBox .presidentList li .textBox .name {
    font-size: 16px;
  }

}
@media (min-width: 481px) and (max-width: 767px) {
  .presidentBox .presidentListBox .presidentList li:nth-child(2n) {
    border-right: 0;
  }  
}
@media (max-width: 480px) {

  .presidentBox .presidentTopBox .textBox .name {
    margin: 0;
  }

  .presidentBox .presidentTopBox .textBox .text {
    margin-bottom: 5px;
    font-size: 26px;
  }

  .presidentBox .presidentTopBox .textBox .info {
    margin-bottom: 8px;
  }

  .presidentBox .presidentListBox .presidentList li {
    width: 100%;
    border-width: 1px 0 !important;
  }

  .presidentBox .presidentListBox .presidentList li .textBox {
    height: auto;
    text-align: center;
  }

  .presidentBox .presidentListBox .presidentList li .imgBox {
    margin: 0 auto;
  }

}

/* 조직 및 기구 */
.organizationBox .organizationTopBox {
  margin-bottom: 40px;
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-ms);
}

.organizationBox .organizationTopBox .orgChartList01 {
  position: relative;
  width:100%;
  max-width:884px;
  padding:0 20px;
}

.organizationBox .organizationTopBox .orgChartList01::after {
  content: '';
  position: absolute;
  top: 84px;
  left: 50%;
  margin-left: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #203C6B;
}

.organizationBox .organizationTopBox .orgChartList01::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 248px;
  width: 1px;
  top: 86px;
  margin-left: -0.5px;
  background-color: #203C6B;
  z-index: -1;
}

.organizationBox .organizationTopBox .orgChartList01>li h4 {
  margin-bottom: 80px;
}

.organizationBox .organizationTopBox .orgChartList01>li h4 img {
  display: block;
  margin: 0 auto;
  width:100%;
  max-width:264px;
}

.organizationBox .organizationTopBox .orgChartList02 {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  gap: 0 65px;
}

.organizationBox .organizationTopBox .orgChartList02::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -0.5px;
  width: 10%;
  height: 1px;
  background-color: #203C6B;
  z-index: -1;
}

.organizationBox .organizationTopBox .orgChartList02 li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 283px;
  height: 56px;
  background: linear-gradient(to right, #1C2026, #203B69);
  text-align: center;
}

.organizationBox .organizationTopBox .orgChartList02 li a::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 4px;
  bottom: 8px;
  width: 8px;
  background-color: #FC7C1D;
}

.organizationBox .organizationTopBox .orgChartList02 li a span {
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}

.organizationBox .organizationTopBox .orgChartList03 {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0 65px;
}

.organizationBox .organizationTopBox .orgChartList03::before {
  content: '';
  position: absolute;
  top: 33px;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 1px;
  background-color: #203C6B;
  z-index: -1;
}

.organizationBox .organizationTopBox .orgChartList03 li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 251px;
  height: 56px;
  background: linear-gradient(to right, #1C2026, #203B69);
}

.organizationBox .organizationTopBox .orgChartList03>li>a::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 4px;
  bottom: 8px;
  width: 8px;
  background-color: #4D8FFF;
}

.organizationBox .organizationTopBox .orgChartList03>li>a.group::before {
  background-color: #FC7C1D;
}

.organizationBox .organizationTopBox .orgChartList03>li>a>span {
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}

.organizationBox .organizationTopBox .orgChartList03 li {
  margin-bottom: 8px;
  display: flex;
  gap: 0 65px;
}

.organizationBox .organizationTopBox .orgChartList03 li:last-child {
  margin-bottom: 0;
}

.organizationBox .organizationTopBox .orgChartList04 {
  position: relative;
}

.organizationBox .organizationTopBox .orgChartList04::before {
  content: '';
  position: absolute;
  top: 33px;
  left: -32px;
  bottom: 28px;
  width: 1px;
  background-color: #203C6B;
}

.organizationBox .organizationTopBox .orgChartList04 li a {
  background: linear-gradient(to right, #2B4E89, #454C53);
  text-align: center;
}

.organizationBox .organizationTopBox .orgChartList04 li a span {
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}

.organizationBox .organizationTopBox .orgChartList04 li {
  position: relative;
}

.organizationBox .organizationTopBox .orgChartList04 li:nth-child(1)::before {
  display: none;
}

.organizationBox .organizationTopBox .orgChartList04 li::before {
  content: '';
  left: -32px;
  position: absolute;
  top: 50%;
  margin-top: -0.5px;
  width: 32px;
  height: 1px;
  background-color: #203C6B;
}

.organizationBox .organizationTopBox .orgChartList04 li a::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 4px;
  bottom: 8px;
  width: 8px;
  background-color: #4D8FFF;
}

.organizationBox .organizationTopBox .infoText {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  color: #454C53;
  font-size: 14px;
}

.organizationBox .organizationTopBox .infoText::before {
  content: '';
  margin-right: 8px;
  width: 20px;
  height: 20px;
  background: url(../images/sub/icon03.svg)no-repeat center;
}
.orgChartListRespon-pc {}
.orgChartListRespon-m {
  display:none !important;
}
.organizationBox .layoutBox {
  display: flex;  
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}


.organizationBox .executiveStatusBox:nth-child(2) {
  margin-bottom:80px;
}

.organizationBox .leftBox {

}

.organizationBox .leftBox .link {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 46px;
  font-weight: 500;
  color: #9EA4AA;
  border-radius: 8px;
  background-color: #F7F8F9;
  word-break: keep-all;
}

.organizationBox .leftBox h4 {  
  font-weight: 400;
  color: #1B1D1F;
  font-size: 24px;
  font-family: 'Retrosans';
}

.organizationBox .leftBox .linkList li {
  margin-bottom: 8px;
}

.organizationBox .leftBox .linkList li:last-child {
  margin-bottom: 0;
}

.organizationBox .leftBox .linkList li a {
  padding: 3px 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  font-weight: 500;
  color: #454C53;
  font-size: 18px;
  word-break: keep-all;
}

.organizationBox .leftBox .linkList li a.active {
  padding: 5px 16px;
  background: linear-gradient(to right, #203B69, #1B1E22);
  font-weight: 700;
  color: #fff;
}

.organizationBox .rightBox {
  width: 100%;
}

.organizationBox .rightBox .box {
  margin-bottom: 24px;
  display: flex;
  gap: var(--spacing-m);
  border-top: 2px solid var(--gray-900);
}

.organizationBox .rightBox .box:last-child {
  margin-bottom: 0;
}
.organizationBox .rightBox .box .info-tit {
  width: 100%;
  max-width: 240px;
  padding: var(--spacing-s) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.organizationBox .rightBox .box .info-tit .work-box {
  padding: var(--spacing-s);
  background-color: var(--gray-50);
  border-radius: var(--radius-xs);
  border: 1px solid var(--gray-100);
}
.organizationBox .rightBox .box .info-tit .work-box ul {
  display:flex;
  flex-direction: column;
  gap:var(--radius-2xs);
}
.organizationBox .rightBox .box .info-tit .work-box .work-list {
  position: relative;
  font-size:14px;
  color:var(--gray-600);
  word-break: keep-all;
  text-indent: -9px;
  padding-left: 8px;
}
.organizationBox .rightBox .box .info-tit .work-box .work-list:before {
  content:'-';
}

.organizationBox .rightBox .box h5 {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1B1D1F;
}
.organizationBox .rightBox .box .info-cont {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  align-content: start;
}
.organizationBox .rightBox .box .infoBox {
  padding: 20px 0;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid var(--gray-100);
}

.organizationBox .rightBox .box .infoBox .nameBox {
  flex-shrink: 0;
  position: relative;
  padding-left: 24px;
  width: auto;
  display: flex;
  gap: var(--spacing-xs);
}

.organizationBox .rightBox .box .infoBox .nameBox::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 6px;
  width: 12px;
  height: 12px;
  background: url(../images/sub/icon01.svg)no-repeat center / contain;
}

.organizationBox .rightBox .box .infoBox .nameBox h6 {  
  font-size: 16px;
  color: #1B1D1F;
}
.organizationBox .rightBox .box .infoBox .nameBox span {
  color:var(--gray-600);
}

.organizationBox .rightBox .box .infoBox .titleList {
  padding-left: 40px;
  border-left: 1px solid #E8EBED;
}

.organizationBox .rightBox .box .infoBox .titleList>li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 25px;
  color: #454C53;
  word-break: keep-all;
}

.organizationBox .rightBox .box .infoBox .titleList>li:last-child {
  margin-bottom: 0;
}

.organizationBox .rightBox .box .infoBox .titleList>li::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 11px;
  width: 3px;
  height: 3px;
  background-color: #454C53;
  border-radius: 50%;
}

.organizationBox .rightBox .box .infoBox .list02 {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organizationBox .rightBox .box .infoBox .list02 li {
  padding: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  border-radius: 8px;
  background-color: #E8EBED;
}

@media (max-width: 1199px) {

  .organizationBox .layoutBox {
    gap: 0;
  }

  .organizationBox .layoutBox {
    gap: 0 50px
  }
}
@media (max-width: 1024px) {
  .organizationBox .organizationTopBox .orgChartList02 {
    gap: 0 40px;
    margin-bottom:40px;
  }
  .organizationBox .organizationTopBox .orgChartList02::before {
    width:100%;
  }
  .organizationBox .organizationTopBox .orgChartList02 li {
    width:100%;
  }
  .organizationBox .organizationTopBox .orgChartList02 li a {
    width:100%;
  }
  .organizationBox .organizationTopBox .orgChartList03 {
    gap: 0 40px;
  }
  .organizationBox .organizationTopBox .orgChartList03 li {
    width:100%;
    flex-wrap: wrap;
    gap: 40px;
  }
  .organizationBox .organizationTopBox .orgChartList03 li a {
    width:100%;
  }
  .organizationBox .organizationTopBox .orgChartList04 {
    margin-top:24px;
    width: calc(50% - 20px);
    margin-top: 0;
  }
  .orgChartListRespon-pc {
    display:none !important;
  }
  .orgChartListRespon-m {
    display:flex !important;
    width: calc(50% - 20px);
  }
  .orgChartListRespon-m:before {
    display:none !important;
  } 
  .organizationBox .organizationTopBox .orgChartList01::before {
    height:460px;
  }
  .organizationBox .organizationTopBox .orgChartList03::before {
    top: 139px;
  }
  .organizationBox .organizationTopBox .orgChartList04::before {    
    display:none;
  }
  .organizationBox .organizationTopBox .orgChartList04 li::before {
    left:-20px;
    width:20px;
  }
  .organizationBox .rightBox .box {
    flex-direction: column;
    gap: 0;
  }
  .organizationBox .rightBox .box .info-tit {
    max-width:unset;
  }
  
}
/* @media (max-width: 1024px) {

  .organizationBox .organizationTopBox {
    padding: 80px 20px;
  }

  .organizationBox .organizationTopBox .orgChartList02 {
    flex-direction: column;
    gap: 10px 0;
    margin: 0 auto 30px !important;
  }

  .organizationBox .organizationTopBox .orgChartList02 li,
  .organizationBox .organizationTopBox .orgChartList02 li a {
    width: 100%;
    border-radius: 8px;
  }

  .organizationBox .organizationTopBox .orgChartList02::before {
    display: none;
  }

  .organizationBox .organizationTopBox .orgChartList03 {
    flex-direction: column;
    margin: 10px auto 0 !important;
  }

  .organizationBox .organizationTopBox .orgChartList03 li {
    flex-direction: column;
    gap: 10px 0;
  }

  .organizationBox .organizationTopBox .orgChartList03 li a {
    border-radius: 8px;
  }

  .organizationBox .organizationTopBox .orgChartList03 li,
  .organizationBox .organizationTopBox .orgChartList03 li a {
    width: 100%;
  }

  .organizationBox .organizationTopBox .orgChartList02,
  .organizationBox .organizationTopBox .orgChartList03 {
    max-width: 500px;
    margin: 0 auto;
  }

  .organizationBox .organizationTopBox .orgChartList04 li::after {
    display: none;
  }

  .organizationBox .organizationTopBox .orgChartList04::before {
    display: none;
  }

  .organizationBox .organizationTopBox .orgChartList04 li::before {
    left: 50%;
    top: auto;
    bottom: -9px;
    margin-left: -0.5px;
    width: 1px;
    height: 10px;
  }

  .organizationBox .organizationTopBox .orgChartList04 li:last-child:before {
    display: none;
  }

  .organizationBox .organizationTopBox .orgChartList04 li:nth-child(1)::before {
    display: block;
  }

  .organizationBox .organizationTopBox .orgChartList04 li a {
    border-radius: 8px;
  }

} */

@media (max-width: 767px) {

  .organizationBox .organizationTopBox {
    margin-bottom: 40px;
  }

  .organizationBox .organizationTopBox .orgChartList04 li a span,
  .organizationBox .organizationTopBox .orgChartList03 li a span,
  .organizationBox .organizationTopBox .orgChartList02 li a span {
    font-size: 16px;
  }

  .organizationBox .organizationTopBox .orgChartList03>li>a::before,
  .organizationBox .organizationTopBox .orgChartList04>li>a::before,
  .organizationBox .organizationTopBox .orgChartList02 li a::before {
    width: 4px;
  }

  .organizationBox .organizationTopBox .orgChartList02 li a,
  .organizationBox .organizationTopBox .orgChartList03 li a,
  .organizationBox .organizationTopBox .orgChartList04 li a {
    height: 54px;
  }
  .organizationBox .organizationTopBox .orgChartList01::before {
    height: 450px;
  }
  .organizationBox .organizationTopBox .orgChartList03::before {
    width:100%;
    top: 121px;
  }
  .organizationBox .organizationTopBox .orgChartList04::before {
    top: 27px;
    bottom: 26px;
  }

  .organizationBox .layoutBox {
    gap: 0 50px
  }

  .organizationBox .leftBox .linkList li a.active {
    padding: 5px 10px;
  }

  .organizationBox .leftBox h4 {
    margin-bottom: 18px;
    font-size: 26px;
  }

  .organizationBox .leftBox {
    width: 130px;
  }

  .organizationBox .leftBox .linkList li a {
    font-size: 16px;
  }

  .organizationBox .rightBox .box h5 {
    font-size: 18px;
    border-radius: 10px 0 0 0;
  }

  .organizationBox .rightBox .box .infoBox .nameBox h6 {
    font-size: 16px;
  }

  .organizationBox .rightBox .box .infoBox .titleList {
    padding-left: 15px;
  }

  .organizationBox .leftBox .link {
    padding: 5px 8px;
    margin-top: 20px;
    font-size: 14px;
    border-radius: 3px;
  }
  .organizationBox .rightBox .box .infoBox {
    padding: 16px 0;
  }

}

@media (max-width: 576px) {

  .organizationBox .organizationTopBox .orgChartList01>li h4 {
    margin-bottom: 40px;
  }

  .organizationBox .organizationTopBox .orgChartList01>li h4 img {
    width: 250px;
  }

  .organizationBox .organizationTopBox .orgChartList01::before {
    top: 56px;
    height:406px;
  }

  .organizationBox .organizationTopBox .orgChartList01::after {
    top: 52px;
  }
  .organizationBox .organizationTopBox .orgChartList02 {
    margin-bottom: 24px;
  }
  .organizationBox .organizationTopBox .orgChartList03 li {
    gap: 24px 40px;
  }

  .organizationBox .organizationTopBox .orgChartList04 li a span,
  .organizationBox .organizationTopBox .orgChartList03>li>a>span,
  .organizationBox .organizationTopBox .orgChartList02 li a span {
    font-size: 14px;
  }

  .organizationBox .layoutBox {
    gap: 0 25px
  }

  .organizationBox .leftBox h4 {
    margin-bottom: 10px;
    font-size: 18px;
  }

  .organizationBox .leftBox {
    width: 100px;
  }

  .organizationBox .leftBox .linkList li {
    margin-bottom: 5px;
  }

  .organizationBox .leftBox .linkList li a {
    padding: 0;
    font-size: 13px;
  }

  .organizationBox .rightBox .box {
    margin-bottom: 20px;
  }

  .organizationBox .rightBox .box h5 {
    font-size: 16px;
  }
  .organizationBox .rightBox .box .info-cont {
    grid-template-columns: repeat(2, 1fr);
  }

  .organizationBox .rightBox .box .infoBox .nameBox h6 {
    font-size: 14px;
  }

  .organizationBox .rightBox .box .infoBox .titleList>li,
  .organizationBox .rightBox .box .infoBox .nameBox span {
    font-size: 14px;
  }

  .organizationBox .rightBox .box .infoBox .nameBox::before {
    width: 6px;
    height: 6px;
    top: 7px;
    transform: unset;
    
  }

  .organizationBox .rightBox .box .infoBox .titleList>li {
    padding-left: 20px;
  }

  .organizationBox .rightBox .box .infoBox .titleList>li::before {
    top: 9px;
    left: 7px;
  }

  .organizationBox .rightBox .box .infoBox .list02 li {
    padding: 4px;
    font-size: 13px;
    border-radius: 5px;
  }

  .organizationBox .leftBox .link {
    font-size: 13px;
  }

}

@media (max-width: 414px) {

  .organizationBox .organizationTopBox .orgChartList01::before {
    top: 50px;
    height: 401px;
  }

  .organizationBox .organizationTopBox .orgChartList01::after {
    top: 46px;
  }

  .organizationBox .organizationTopBox .orgChartList01>li h4 img {
    width: 200px;
  }

  .organizationBox .layoutBox {
    gap: 0 15px;
  }

  .organizationBox .rightBox .box .infoBox {
    padding: 15px 0;
    flex-direction: column;
    gap: 10px 0;
  }

  .organizationBox .rightBox .box .infoBox .nameBox {
    width: 100%;
    padding-left: 16px;
    flex-direction: column;
    gap: 0;
  }

  .organizationBox .rightBox .box .infoBox .titleList {
    padding: 12px 0 0 0;
    border-top: 1px solid #E8EBED;
    border-left: 0;
  }


}

/* 단체현황 */
.groupStatusBox .layoutBox {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.groupStatusBox .leftBox {
  width: 100%;
  /* position: sticky;
  top: 114px; */
}

.groupStatusBox .leftBox .tabBtn {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: 20px;
}

.groupStatusBox .leftBox .tabBtn .btn:hover {
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  color: transparent;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
  transition: all .3s;
}

.groupStatusBox .leftBox .tabBtn .btn:hover::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.groupStatusBox .leftBox .tabBtn .btn:hover .text {
  display: none;
}

.groupStatusBox .leftBox .tabBtn .btn {  
  position: relative;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 0 8px;
  border-radius: 16px;
  background-color: #fff;
  border: 1px solid #E8EBED;
  font-size: 14px;
}

.groupStatusBox .leftBox .tabBtn .btn:last-child {
  margin-bottom: 0;
}

.groupStatusBox .leftBox .tabBtn .btn .text {
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}

.groupStatusBox .leftBox .tabBtn .btn .number {
  padding: 4px 8px;
  border-radius: 8px;
  background-color: #E8EBED;
  font-weight: 500;
  color: #454C53;
  font-size: 14px;
}

.groupStatusBox .leftBox .tabBtn .btn.active {
  border: 1px solid transparent;
  background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  color: transparent;
  overflow: hidden;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
}

.groupStatusBox .leftBox .tabBtn .btn.active::before {
  content: attr(data-text);
  background: linear-gradient(to right, #203c6b 0%, #4d8fff 50%, #203c6b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
}

.groupStatusBox .leftBox .tabBtn .btn.active .text {
  display: none;
}

.groupStatusBox .leftBox .initialList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 136px;
}

.groupStatusBox .leftBox .initialList li .btn {
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 8px;
  font-size: 20px;
  color: #454C53;
  font-weight: 500;
  text-align: center;
}

.groupStatusBox .leftBox .initialList li .btn.active {
  background-color: #4D8FFF;
  color: #fff;
  font-weight: 700;
}

.groupStatusBox .rightBox {
  width: 100%;
}

.groupStatusBox .rightBox .listBox {
  display: flex;
  gap: 0 60px;
  width: 100%;
  margin-bottom: 40px;
  flex-direction: column;
  align-items: flex-start;
}

.groupStatusBox .rightBox .listBox:last-child {
  margin-bottom: 0;
}

.groupStatusBox .rightBox .listBox .initialText {
  display: block;
  font-weight: 700;
  color: #1B1D1F;
  font-size: 48px;
  line-height: 1;
}

.groupStatusBox .rightBox .listBox .list {
  width: 100%;
  border-top: 2px solid #454C53;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.groupStatusBox .rightBox .listBox .list li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--gray-100);
}
.groupStatusBox .rightBox .listBox .list li a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  width: 100%;
  border: 1px solid transparent;
  transition: 0.3s var(--ease1);
}


.groupStatusBox .rightBox .listBox .list li .logoBox {
  width: 36px;
  height: 36px;
}

.groupStatusBox .rightBox .listBox .list li .logoBox img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.groupStatusBox .rightBox .listBox .list li .textBox {
  width: 100%;
}

.groupStatusBox .rightBox .listBox .list li .textBox .text {
  padding: 3px 7px;
  display: inline-block;
  color: #203C6B;
  font-weight: 700;
  background-color: #EDF4FF;
  border-radius: 4px;
  font-size:12px;
}

.groupStatusBox .rightBox .listBox .list li .titleBox {
  display: flex;
  align-items: center;
  gap: 0 16px;
  margin-bottom:4px;
}

.groupStatusBox .rightBox .listBox .list li .titleBox h4 {
  font-size: 16px;
  color: var(--gray-900);
}

.groupStatusBox .rightBox .listBox .list li .titleBox .homepage {
  display: flex;
  align-items: center;
  gap: 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
}
.groupStatusBox .rightBox .listBox .list li a:hover {  
  border: 1px solid var(--blue-900);  
  border-radius: var(--radius-xs);
}
.groupStatusBox .rightBox .listBox .list li a:hover .titleBox h4 {  
  color: var(--primary-color);
}

.groupStatusBox .rightBox .listBox .list li .titleBox .homepage::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(../images/sub/link_icon.svg)no-repeat center;
}

.groupStatusBox .rightBox .listBox .list li .infoBox {
  width: 100%;
  padding: 8px;
  background-color: #F7F8F9;
  border-radius: 4px;
}

.groupStatusBox .rightBox .listBox .list li .infoBox dl {
  display: flex;
  gap: 0 40px;
}

.groupStatusBox .rightBox .listBox .list li .infoBox dl .box {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.groupStatusBox .rightBox .listBox .list li .infoBox dl .box dt {
  font-weight: 700;
  color: #9EA4AA;
  font-size: 14px;
}

.groupStatusBox .rightBox .listBox .list li .infoBox dl .box dd {
  font-weight: 500;
  color: #454C53;
}

/* 단체 상세 */
.groupStatus-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}
.groupStatus-info-box {
  display: flex;
  gap: var(--spacing-ml) var(--spacing-2xl);
  align-items: flex-start;
  padding-bottom: var(--spacing-lm);
  margin-bottom: var(--spacing-s);
  border-bottom: 2px solid var(--gray-900);
  flex-wrap: wrap;
}
.groupStatus-info-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}
.groupStatus-info-title .img-box {
  width:64px;
  height:64px;
}
.groupStatus-info-title .img-box img {
  width: 100%;
}
.groupStatus-info-title .name-box {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  align-items: flex-start;
}
.groupStatus-info-title .name-box p {
  font-size:24px;
  font-weight:700;
  color:var(--gray-900);
}
.groupStatus-info-title .name-box span {
  line-height: 1;
  padding:4px 8px;
  text-align: center;
  background-color: #EDF4FF;
  color: #203C6B;
  font-weight: 700;
  font-size: 14px;
  border-radius: 4px;
}
.groupStatus-info-group {}
.groupStatus-info-group ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}
.groupStatus-info-group-list {
  display: flex;
    gap: var(--spacing-s);
}
.groupStatus-info-group-list p {
  font-weight:700;
  color:var(--gray-400);
  width:64px;
}
.groupStatus-info-group-list span {
  color:var(--gray-600);
}
.groupStatus-intro-box {}
.groupStatus-intro-box p {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--gray-600);
}
.groupStatus-intro-box .groupStatus-intro-txt {
  border-radius: 20px;
    border: 1px solid var(--gray-100);
    padding: var(--spacing-ms);
}
.groupStatus-intro-box .groupStatus-intro-txt pre {
  margin: 0;
  font-family: 'Pretendard', sans-serif !important;
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6em;
}

@media (max-width: 1199px) {

  .groupStatusBox .rightBox .listBox .initialText {
    margin-bottom: 10px;
    font-size: 40px;
  }

  .groupStatusBox .rightBox .listBox {
    display: block;
  }

  .groupStatusBox .leftBox .initialList {
    width: 100%;
    justify-content: center;
  }

  .groupStatusBox .leftBox .initialList li .btn {
    font-size: 18px;
  }

  .groupStatusBox .layoutBox {
    flex-direction: column;
  }

  .groupStatusBox .leftBox {
    width: 100%;
    position: static;
  }

  .groupStatusBox .leftBox .tabBtn {
    margin-bottom: 23px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    justify-content: center;
  }

  .groupStatusBox .leftBox .tabBtn .btn {
    margin-bottom: 0;
  }

}
@media (max-width: 1024px) {
  .groupStatusBox .rightBox .listBox .list {
    grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {

  .groupStatusBox .leftBox .tabBtn .btn {
    padding: 5px 12px;
    border-radius: 10px;
  }

  .groupStatusBox .rightBox .listBox .initialText {
    font-size: 26px;
  }
  .groupStatusBox .rightBox .listBox .list li a {
    flex-direction: column;
  }
  .groupStatusBox .rightBox .listBox .list li .textBox {
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {


  .groupStatusBox .rightBox .listBox .list li {
    flex-direction: column;
    gap: 20px 0;
  }
  .groupStatusBox .rightBox .listBox .list li a {    
    gap: 8px;
}

  .groupStatusBox .rightBox .listBox .list li .logoBox {
    margin: 0 auto;
    width: 100%;
  }

  .groupStatusBox .rightBox .listBox .list li .textBox .text {
    margin-bottom: 10px;
    font-size: 14px;
  }


  .groupStatusBox .rightBox .listBox .list li .infoBox dl .box dd {
    font-size: 14px;
  }

  .groupStatusBox .rightBox .listBox .initialText {
    font-size: 22px;
  }

}

/* 육성현황 */
.trainingStatusBox .tabBtn {
  margin-bottom: 16px;
}

.trainingStatusBox .trainingStatusList {
  border-top: 2px solid #000;
}

.trainingStatusBox .trainingStatusList>li {
  padding: 20px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 1px solid #E8EBED;
  flex-direction: column;
}

.trainingStatusBox .trainingStatusList li .leftBox {
}

.trainingStatusBox .trainingStatusList li .leftBox .symbolBox {
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.trainingStatusBox .trainingStatusList li .leftBox .symbolBox .symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #E8EBED;
  border-radius: 16px;
}

.trainingStatusBox .trainingStatusList li .leftBox .symbolBox span {
  font-size: 20px;
  color: #454C53;
  font-weight: 700;
}

.trainingStatusBox .trainingStatusList li .list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.trainingStatusBox .type2 .trainingStatusList li .list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;  
}


.trainingStatusBox .trainingStatusList li .list li {  
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: linear-gradient(to right, #203C6B, #1B1D1F);
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 16px;
}
.trainingStatusBox .trainingStatusList li .list li .titBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.trainingStatusBox .trainingStatusList li .list li .titBox h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.trainingStatusBox .trainingStatusList li .list li .titBox .infoBox01 {
  display: flex;
  align-items: center;
  gap: 0 16px;
}

.trainingStatusBox .trainingStatusList li .list li .titBox .infoBox01 .infoText01 {
  padding: 2px 6px;
  font-size: 12px;
  color: #203C6B;
  font-weight: 700;
  background-color: #fff;
  border-radius: 4px;
}

.trainingStatusBox .trainingStatusList li .list li .titBox .infoBox01 .infoText02 {
  font-size: 14px;
  font-weight: 700;
  color: #9EA4AA;
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.trainingStatusBox .trainingStatusList li .list li .titBox .infoBox01 .infoText02 em {
  font-weight: 500;
  color: #FFF;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox {
  display: flex;
  align-items: center;
  align-items: flex-start;
  gap: 8px 16px;
  flex-direction: column;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox01 {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox01 span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #9EA4AA;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox01 em {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox02 {
  min-width: 301px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 0 16px;
  background-color: #454C53;
  border-radius: 8px;
  border: 1px solid var(--gray-500);
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox02 .box {
  display: flex;
  gap: 0 4px;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox02 .box span {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox02 .box em {
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: #454C53;
  background-color: #E8EBED;
  border-radius: 4px;
}

@media (max-width: 1199px) {


  .trainingStatusBox .trainingStatusList>li {
    padding: 20px 0;
  }
}
@media (max-width: 1024px) {
  .trainingStatusBox .trainingStatusList li .list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  
  .trainingStatusBox .trainingStatusList li .leftBox .symbolBox {
    gap: 0 10px;
  }

  .trainingStatusBox .trainingStatusList li .leftBox .symbolBox .symbol {
    width: 40px;
    height: 40px;
    border-radius: 3px;
  }

  .trainingStatusBox .trainingStatusList li .leftBox .symbolBox span {
    font-size: 18px;
  }
  .trainingStatusBox .trainingStatusList li .list {
    grid-template-columns: repeat(2, 1fr);
  }
  .trainingStatusBox .trainingStatusList li .list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .trainingStatusBox .trainingStatusList li .list li .infoBox {
    width:100%;
  }
  .trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox02 {
    min-width: auto;
    width: 100%;
    padding: 16px;
    flex-direction: column;
    gap: 10px 0;
    align-items: flex-start;
  }
  .trainingStatusBox .trainingStatusList li .list li .infoBox .personnelBox02 .box {
    width:100%;
    justify-content: space-between;
  }

}

@media (max-width: 480px) {

  .trainingStatusBox .trainingStatusList li .leftBox .symbolBox span {
    font-size: 16px;
  }

  .trainingStatusBox .trainingStatusList li .list {
    grid-template-columns: repeat(1, 1fr);
  }
  .trainingStatusBox .trainingStatusList li .list li {
    flex-direction: unset;
  }
  

}

/* 춘천스포츠클럽 */
.chuncheonSportsClubBox .title {
  color: #9EA4AA;
  margin-bottom: 32px;
  font-size: 48px;
  font-weight: 700;
}

.chuncheonSportsClubBox .title .color01 {
  color: #1B1D1F;
}

.chuncheonSportsClubBox .title .color02 {
  color: #4D8FFF;
}

.chuncheonSportsClubBox .imgListBox {
  position: relative;
}

.chuncheonSportsClubBox .imgListBox .imgList {
  margin-bottom: 93px;
  display: flex;
  flex-wrap: wrap;
}

.chuncheonSportsClubBox .imgListBox .imgList li {
  width: 50%;
  height: 265px;
  border-radius: 16px;
  overflow: hidden;
}

.chuncheonSportsClubBox .imgListBox .imgList li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chuncheonSportsClubBox .imgListBox .symbol {
  width: 190px;
  height: 206px;
  position: absolute;
  top: -93px;
  right: 64px;
  object-fit: contain;
}

.chuncheonSportsClubBox .infoBox01 {
  display: flex;
  margin-bottom: 80px;
}

.chuncheonSportsClubBox .infoBox01 .tit {
  flex-shrink: 0;
  margin-right: 80px;
  font-weight: 700;
  color: #1B1D1F;
  font-size: 32px;
}

.chuncheonSportsClubBox .infoBox01 .text01 {
  margin-right: 64px;
}

.chuncheonSportsClubBox .infoBox01 .text {
  font-weight: 500;
  color: #454C53;
}

.chuncheonSportsClubBox .infoBox02 {
  margin-left: 300px;
  display: flex;
  align-items: center;
  gap: 0 64px;
}

.chuncheonSportsClubBox .infoBox02 .contactBox {
  padding-left: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 505px;
  height: 136px;
  border-radius: 64px;
  background: radial-gradient(ellipse 40% 48% at center, rgba(173, 203, 255, 0.5) 0%, rgba(173, 203, 255, 0.5) 60%, #F7F8F9 100%);
}

.chuncheonSportsClubBox .infoBox02 .contactBox span {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #1B1D1F;
}

.chuncheonSportsClubBox .infoBox02 .contactBox p {
  font-weight: 500;
  color: #454C53;
  font-size: 24px;
}

.chuncheonSportsClubBox .infoBox02 .infoList li {
  margin-bottom: 18px;
}

.chuncheonSportsClubBox .infoBox02 .infoList li:last-child {
  margin-bottom: 0;
}

.chuncheonSportsClubBox .infoBox02 .infoList li a {
  display: flex;
  align-items: center;
  gap: 0 12px;
  font-weight: 500;
  color: #1B1D1F;
}

.chuncheonSportsClubBox .infoBox02 .infoList li a::after {
  content: '';
  width: 16px;
  height: 16px;
  background: url(../images/sub/link_icon.svg)no-repeat center;
}

.chuncheonSportsClubBox .infoBox02 .infoList li a.kakao::before {
  content: '';
  width: 28px;
  height: 28px;
  background: url(../images/sub/kakao_icon.svg)no-repeat center;
}

.chuncheonSportsClubBox .infoBox02 .infoList li a.homepage {
  margin-left: 8px;
}

.chuncheonSportsClubBox .infoBox02 .infoList li a.homepage::before {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../images/sub/homepage_icon.svg)no-repeat center;
}

.chuncheonSportsClubBox .infoBox02 .infoList li p {
  font-weight: 500;
  color: #454C53;
}

@media (max-width: 1199px) {

  .chuncheonSportsClubBox .title {
    font-size: 40px;
  }

  .chuncheonSportsClubBox .infoBox01 .tit {
    margin-right: 60px;
    font-size: 28px;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox p {
    font-size: 20px;
  }

}

@media (max-width: 1024px) {

  .chuncheonSportsClubBox .imgListBox .imgList {
    margin-bottom: 55px;
  }

  .chuncheonSportsClubBox .title {
    font-size: 36px;
  }

  .chuncheonSportsClubBox .infoBox01 {
    margin-bottom: 48px;
    flex-direction: column;
    gap: 30px 0;
    text-align: center;
  }

  .chuncheonSportsClubBox .infoBox01 .text {
    margin: 0;
  }

  .chuncheonSportsClubBox .infoBox01 .tit {
    margin-right: 0;
    font-size: 24px;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox {
    padding: 0;
    align-items: center;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox p {
    font-size: 20px;
  }

  .chuncheonSportsClubBox .infoBox02 {
    margin: 0;
    justify-content: center;
  }

  .chuncheonSportsClubBox .infoBox02 {
    flex-direction: column;
    gap: 30px 0;
  }

  .chuncheonSportsClubBox .infoBox02 .infoList {
    justify-content: center;
  }

  .chuncheonSportsClubBox .infoBox02 .infoList li a {
    justify-content: center;
  }

}

@media (max-width: 767px) {

  .chuncheonSportsClubBox .infoBox01 .tit {
    font-size: 22px;
  }

  .chuncheonSportsClubBox .title {
    margin-bottom: 30px;
    font-size: 24px;
  }

  .chuncheonSportsClubBox .imgListBox .imgList li {
    height: 202px;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox p {
    font-size: 18px;
  }

  .chuncheonSportsClubBox .imgListBox .symbol {
    height: auto;
    width: 120px;
  }

}

@media (max-width: 576px) {

  .chuncheonSportsClubBox .title {
    font-size: 22px;
  }

  .chuncheonSportsClubBox .imgListBox .symbol {
    width: 87px;
    top: -65px;
    right: 20px;
  }

  .chuncheonSportsClubBox .imgListBox .imgList li {
    width: 100%;
  }

  .chuncheonSportsClubBox .infoBox01 .text br {
    display: none;
  }

  .chuncheonSportsClubBox .infoBox02 .infoList li p,
  .chuncheonSportsClubBox .infoBox02 .infoList li a {
    font-size: 14px;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox {
    width: 380px;
    height: 106px;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox p {
    font-size: 16px;
  }

  .chuncheonSportsClubBox .infoBox02 .contactBox span {
    font-size: 14px;
  }

  .chuncheonSportsClubBox .infoBox01 .tit {
    font-size: 20px;
  }

}

@media (max-width: 480px) {

  .chuncheonSportsClubBox .title {
    font-size: 20px;
  }

  .chuncheonSportsClubBox .imgListBox .imgList {
    margin-bottom: 40px;
  }

  .chuncheonSportsClubBox .imgListBox .symbol {
    width: 65px;
    top: -36px;
  }

}

/* 통합검색 */
.searchBox .searchTopBox {
  margin-bottom: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.searchBox .searchTopBox .comSearchBox {
  margin: 0;
  max-width: 540px;
}

.searchBox .searchTopBox .serachResultText {
  color: #1B1D1F;
  font-weight: 700;
  font-size: 32px;
}

.searchBox .searchTopBox .serachResultText strong {
  color: #4D8FFF;
}

.searchBox .searchContentBox {
  padding: 40px;
  background-color: #fff;
  border-radius: 40px;
}

.searchBox .searchContentBox .comTabBtn {
  margin-bottom: 40px;
}

.searchBox .searchContentBox .searchResultBox {
  position: relative;
  margin-bottom: 80px;
}

.searchBox .searchContentBox .searchResultBox:last-of-type {
  margin-bottom: 0;
}

.searchBox .searchContentBox .searchResultBox .infoBox {
  padding-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  border-bottom: 2px solid #000;
}

.searchBox .searchContentBox .searchResultBox .infoBox .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9EA4AA;
}

.searchBox .searchContentBox .searchResultBox .infoBox h4 {
  font-size: 24px;
  font-weight: 700;
  color: #454C53;
}

.searchBox .searchContentBox .searchResultBox .infoBox .length {
  font-weight: 700;
  color: #4D8FFF;
  font-size: 24px;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li {
  border-bottom: 1px solid #E8EBED;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a {
  display: block;
  padding: 24px 0;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a .depth {
  padding: 4px 8px;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0 15px;
  background-color: #E8EBED;
  border-radius: 8px;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a .depth li {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: #9EA4AA;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a .depth li::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
  width: 5px;
  height: 2px;
  background-color: #9EA4AA;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a .depth li:last-child::after {
  display: none;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a .depth li:last-child {
  font-weight: 700;
  color: #454C53;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a h5 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
  color: #454C53;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchBox .searchContentBox .searchResultBox .searchResultList li a p {
  color: #9EA4AA;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.searchBox .searchContentBox .searchResultBox .view {
  position: absolute;
  top: 7px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0 7px;
  font-size: 14px;
  font-weight: 700;
  color: #9EA4AA;
}

.searchBox .searchContentBox .searchResultBox .view::after {
  content: '';
  width: 24px;
  height: 24px;
  background: url(../images/sub/view_icon.svg)no-repeat center;
}

.noResultBox {  
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
  padding: 40px 16px;
  border-radius: 16px;
}

.noResultBox::before {
  content: '';
  margin-bottom: 5px;
  width: 72px;
  height: 72px;
  background: url(../images/sub/document_icon01.svg)no-repeat center / contain;
}

.noResultBox span {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: #454C53;
  font-size: 16px;
  text-align: center;
}

.noResultBox em {
  display: block;
  font-size: 14px;
  color: #9EA4AA;
  text-align: center;
}

@media (max-width: 1199px) {

  .searchBox .searchTopBox {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px 0;
  }

  .searchBox .searchTopBox .serachResultText {
    font-size: 28px;
  }

  .searchBox .searchContentBox {
    padding: 40px;
  }

  .searchBox .searchContentBox .searchResultBox .infoBox h4,
  .searchBox .searchContentBox .searchResultBox .infoBox .length {
    font-size: 20px;
  }

  .searchBox .searchContentBox .searchResultBox .searchResultList li a h5 {
    font-size: 16px;
  }

}

@media (max-width: 767px) {

  .searchBox .searchContentBox {
    border-radius: 30px;
  }

  .searchBox .searchTopBox .serachResultText {
    font-size: 24px;
  }

  .searchBox .searchContentBox {
    padding: 28px;
  }

  .searchBox .searchContentBox .searchResultBox .infoBox {
    padding-bottom: 15px;
    gap: 0 6px;
  }

  .searchBox .searchContentBox .searchResultBox .infoBox .length {
    font-size: 18px;
  }

  .noResultBox span {
    font-size: 16px;
  }

}

@media (max-width: 480px) {
  .searchBox .searchTopBox {
   margin-bottom:24px; 
  }
  .searchBox .searchContentBox .comTabBtn {
    margin-bottom:32px;
  }
  .searchBox .searchContentBox .searchResultBox .infoBox .dot {
    width: 4px;
    height: 4px;
  }
  
  .searchBox .searchContentBox {
    border-radius: 20px;
  }

  .searchBox .searchTopBox .serachResultText {
    font-size: 22px;
  }

  .searchBox .searchContentBox .searchResultBox {
    margin-bottom: 60px;
  }

  .searchBox .searchContentBox .searchResultBox .searchResultList li a h5 {
    font-size: 14px;
  }

  .searchBox .searchContentBox {
    padding: 0;
  }

  .searchBox .searchContentBox .searchResultBox .infoBox h4,
  .searchBox .searchContentBox .searchResultBox .infoBox .length {
    font-size: 16px;
  }

  .searchBox .searchContentBox .searchResultBox .searchResultList li a {
    padding: 20px 0;
  }

  .searchBox .searchContentBox .searchResultBox .searchResultList li a .depth li {
    font-size: 12px;
  }

  .searchBox .searchContentBox .searchResultBox .searchResultList li a .depth {
    padding: 2px 8px;
    border-radius: 5px;
  }

}

/* 프로그램 신청 */
.programBox .programApplicationBox {
  max-width: 720px;
  margin: 0 auto;
}

.programBox .programApplicationBox .sportInfoBox {
  margin-bottom: 48px;
  padding: 24px;
  width: 100%;
  border-radius: 20px;
  border: 1px solid #E8EBED;
}

.programBox .programApplicationBox .sportInfoBox .topText {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #454C53;
}

.programBox .programApplicationBox .sportInfoBox .sportTitle {
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 0 8px;
}

.programBox .programApplicationBox .sportInfoBox .sportTitle h5 {
  font-weight: 700;
  color: #1B1D1F;
  font-size: 24px;
}

.programBox .programApplicationBox .sportInfoBox .sportTitle em {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #203C6B;
  background-color: #EDF4FF;
  border-radius: 4px;
}

.programBox .programApplicationBox .sportInfoBox .dateInfoBox {
  display: flex;
  align-items: center;
  gap: 0 16px;
  padding: 8px 20px 8px 8px;
  border-radius: 8px;
  background: linear-gradient(to right, #223D69, #444B53);
}

.programBox .programApplicationBox .sportInfoBox .dateInfoBox .text {
  flex-shrink: 0;
  padding: 3px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #454C53;
  border-radius: 4px;
  background-color: #fff;
}

.programBox .programApplicationBox .sportInfoBox .dateInfoBox .date {
  font-weight: 700;
  color: #fff;
}

.programBox .programApplicationBox .infoBox {
  margin-bottom: 48px;
  padding: 27px;
  background-color: #F7F8F9;
  border: 1px solid #E8EBED;
  border-radius: 20px;
}

.programBox .programApplicationBox .infoBox p {
  padding-left: 28px;
  position: relative;
  margin-bottom: 15px;
  font-size: 14px;
  color: #454C53;
}

.programBox .programApplicationBox .infoBox p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url(../images/sub/icon03.svg)no-repeat center;
}

.programBox .programApplicationBox .infoBox .link {
  display: inline-flex;
  align-items: center;
  gap: 0 10px;
  padding-left: 28px;
  font-size: 14px;
  color: #203C6B;
  font-weight: 700;
}

.programBox .programApplicationBox .infoBox .link::after {
  content: '';
  width: 7px;
  height: 10px;
  background: url(../images/sub/arrow_icon06.svg)no-repeat center;
}

.programBox .programApplicationBox .tit02 {
  margin-bottom: 16px;
  font-size: 18px;
}

.programBox .programApplicationBox .emailBox {
  display: flex;
  gap: 0 8px;
  align-items: center;
}

.programBox .programApplicationBox .emailBox .inputTextBox {
  width: 100%;
}

.programBox .programApplicationBox .noticeBox {
  margin: 42px 0 64px;
}

.programBox .programApplicationBox .noticeBox h5 {
  margin-bottom: 15px;
  color: #454C53;
  font-size: 18px;
}

.programBox .programApplicationBox .noticeBox .list li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 18px;
  font-size: 14px;
  color: #454C53;
}

.programBox .programApplicationBox .noticeBox .list li::before {
  width: 16px;
  height: 13px;
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  background: url(../images/sub/chk_icon02.svg)no-repeat center;
}

.programBox .programApplicationBox .noticeBox .list li:last-child {
  margin-bottom: 0;
}

.programBox .programApplicationBox .genderBox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.programBox .programApplicationBox .genderBox .inputRadioBox {
  flex: 1;
}

@media (max-width: 1199px) {

  .programBox .programApplicationBox .sportInfoBox .sportTitle h5 {
    font-size: 22px;
  }

}

@media (max-width: 767px) {

  .programBox .programApplicationBox .emailBox {
    flex-direction: column;
    gap: 5px 0;
  }

  .programBox .programApplicationBox .emailBox .customSelectBox,
  .programBox .programApplicationBox .emailBox .inputTextBox {
    width: 100%;
  }

  .programBox .programApplicationBox .genderBox {
    /* flex-direction: column; */
  }

  .programBox .programApplicationBox .noticeBox h5 {
    font-size: 16px;
  }

  .programBox .programApplicationBox .infoBox p br {
    display: none;
  }

  .programBox .programApplicationBox .infoBox,
  .programBox .programApplicationBox .sportInfoBox {
    padding: 20px;
  }

  .programBox .programApplicationBox .infoBox,
  .programBox .programApplicationBox .sportInfoBox {
    border-radius: 10px;
  }

  .programBox .programApplicationBox .sportInfoBox .sportTitle h5 {
    font-size: 20px;
  }

}

@media (max-width: 480px) {

  .programBox .programApplicationBox .infoBox {
    margin-bottom: 40px;
  }

  .programBox .programApplicationBox .sportInfoBox .sportTitle {
    margin-bottom: 20px;
  }

  .programBox .programApplicationBox .sportInfoBox {
    margin-bottom: 28px;
    padding: 16px;
  }

  .programBox .programApplicationBox .sportInfoBox .topText,
  .programBox .programApplicationBox .sportInfoBox .dateInfoBox .date {
    font-size: 14px;
  }

  .programBox .programApplicationBox .sportInfoBox .dateInfoBox {
    padding: 15px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px 0;
  }
  .programBox .programApplicationBox .noticeBox .list li {
    padding-left:24px;
    word-break: keep-all;
  }

}

/* 관련규정 모아보기 */
.rule-wrap {
  display:flex;
  flex-direction: column;
  gap: var(--spacing-s);
}
.rule-box{
  display:flex;
  border:1px solid #d7dbe6;
  border-top: 2px solid var(--gray-600);
  background:#fff;
}

.rule-left{
  width:150px;
  background:#f3f4f6;
  border-right:1px solid #d7dbe6;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 12px;
  box-sizing:border-box;
}

.rule-group{
  font-size:18px;
  font-weight:700;
  color:var(--gray-900);
  text-align:center;
  line-height:1.35;
  word-break:keep-all;
}

.rule-more{
  display:inline-block;
  padding:6px 12px;
  background:#0b66c3;
  color:#fff;
  font-size:12px;
  border-radius:4px;
  text-decoration:none;
}

.rule-more:hover{
  background:#094f97;
}

.rule-right{
  flex:1;
  overflow-x:auto;
}

.rule-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.rule-table thead th{
  background:#eceff4;
  border-bottom:1px solid #d7dbe6;
  padding:12px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--gray-900);
  text-align:center;
}

.rule-table tbody td{
  border-bottom:1px solid #e7eaf2;
  padding:11px 14px;
  font-size:14px;
  color:#2a2f3a;
}

.rule-table tbody tr:last-child td{
  border-bottom:none;
}

.rule-table tbody td:first-child{
  text-align:left;
}

.rule-table tbody td:first-child a{
  display:inline-block;
  max-width:100%;
  color:var(--gray-600);
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}

.rule-table tbody td:first-child a:hover{
  text-decoration:underline;
}

/* .rule-table thead th:last-child,
.rule-table tbody td:last-child{
  width:90px;
  text-align:center;
} */

@media (max-width: 768px){
  .rule-box{ flex-direction:column; }
  .rule-left{
      width:100%;
      flex-direction:row;
      justify-content:space-between;
      padding:12px 14px;
      border: 0;
      border-bottom: 1px solid #d7dbe6;
  }
  .rule-group{ text-align:left; }
}