@charset "UTF-8";

/* 공통 */
#wrap{display: flex; flex-direction: column;}
main{flex: 1;}
.borderBar{display: block; height: 3px; border: 1px solid #BF9F17; background-color: #F9F7F1;}

@media (max-width: 1024px){

  .borderBarRow{display: none!important;}

}

@media (max-width: 576px){

  #headerWrap{position: relative; z-index: 9999;}

}

/* 공통 - 선택 */
.toggleBtnBox{position: relative;}
.toggleBtn{display: flex; align-items: center; justify-content: space-between; gap: 0 var(--spacing-xs); padding: 0 var(--spacing-xs) 0 var(--spacing-s); height: 40px; background-color: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-s); background-color: var(--white);}
.toggleBtn span{font-weight: var(--bold); font-size: var(--font-size-s); color: var(--gray-600);}
.toggleBtn::after{content: ''; width: 24px; height: 24px; background: url(../images/common/arrow_icon02.svg)no-repeat center / contain; border: 1px solid var(--gray-100); border-radius: var(--radius-l); transition: all .3s;}
.toggleBtn:hover:after{background-color: var(--gray-100);}

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

/* 공통 - 탭 */
.tabList{margin: var(--spacing-xs) 0; display: flex; flex-wrap: wrap; gap: var(--spacing-2xs);}
.tabList li .tabBtn{padding: var(--spacing-xs) var(--spacing-s); background-color: var(--gray-100); border-radius: var(--radius-s); font-size: var(--Subtitle-2); background-color: var(--gray-100); font-weight: var(--bold); transition: all .3s;}
.tabList li .tabBtn:hover{background-color: var(--gray-400); color: var(--white);}
.tabList li .tabBtn.active{background-color: var(--primary-500); color: var(--white);}
.tabList.tabListType02{gap: var(--spacing-m);}
.tabList.tabListType02 li .tabBtn{padding: 0; font-size: var(--H4); color: var(--gray-400); background:0; transition: all .3s;}
.tabList.tabListType02 li .tabBtn:hover{color: var(--primary-500);}
.tabList.tabListType02 li .tabBtn.active{color: var(--gray-900);}

@media (max-width: 1024px){

  .tabList.tabListType02 li .tabBtn{font-size: var(--font-size-xxxl);}

}

/* 공통 - 제목 */
.tit{font-size: var(--H4); font-weight: var(--bold); color: var(--gray-900);}
.text{font-size: var(--font-size-xl); color: var(--gray-600);}

@media (max-width: 768px){

  .tit{font-size: var(--H5);}
  .text{font-size: var(--font-size-m);}
  .text br{display: none;}

}

/* 공통 - 여백 */
.mt10{margin-top: 10px;}
.mt20{margin-top: 20px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb40{margin-bottom: 40px;}

/* 공통 - 불릿 */
.bulletDot > li{position: relative; padding-left: var(--spacing-ms);}
.bulletDot > li::before{content: ''; position: absolute; top:11px; left:9px; width: 3px; height: 3px; border-radius: 16px; background-color: var(--gray-600);}
.bulletIcon > li{margin-bottom: var(--spacing-xs); position: relative; padding-left: var(--spacing-s); color: var(--gray-600);} 
.bulletIcon > li:last-child{margin-bottom: 0;}
.bulletIcon > li::before{content: ''; width: 12px; height: 24px; position: absolute; top:-1px; left:0; background: url(../images/sub/bullet_icon02.svg)no-repeat center;}
.bulletTitle{position: relative; padding-left: var(--spacing-ms); color: var(--gray-900); font-size: var(--H5); font-weight: var(--bold);}
.bulletTitle::before{content: ''; width: 12px; height: 17px; position: absolute; top:5px; left:0; background: url(../images/sub/bullet_icon01.svg)no-repeat center / contain;}
.bulletBar > li{position: relative; padding-left: var(--spacing-xs); color: var(--gray-600);}
.bulletBar > li::before{content: ''; width: 4px; height: 1px; position: absolute; top:13px; left:0; background-color: var(--gray-600);}

@media (max-width: 576px){

  .bulletTitle{font-size: var(--H6);}
  .bulletTitle::before{top: 3px;}

}

@media (max-width: 480px){

  .bulletBar > li::before{top: 10px;}
  .bulletDot > li::before{top: 9px;}
  .bulletIcon > li::before{top: -3px;}
  .bulletBar > li,
  .bulletDot > li,
  .bulletIcon > li{font-size: var(--body-2);}

}

/* 서브 상단 비주얼 영역 */
#subVisualWrap{display: flex; align-items: center; justify-content: center; position: relative; height: 356px;}
#subVisualWrap .visualBox{ position: absolute; inset: 0 20px; border-radius: var(--radius-l); overflow: hidden;}
#subVisualWrap .visualBox img{height: 100%; object-fit: cover; transform: scale(1.3);}
#subVisualWrap.active .visualBox img{transform: scale(1); transition: all 7s;}
#subVisualWrap .titleBox{position: relative; padding: 0 var(--spacing-ms);}
#subVisualWrap .titleBox h3{height: 40px; overflow: hidden;}
#subVisualWrap .titleBox h3 .rollingText{position: relative;}
#subVisualWrap .titleBox h3 .rollingText span{display: block; height: 40px; line-height: 40px;
    font-weight: var(--semi-bold);  font-size: var(--font-size-xxxl); color: var(--white); letter-spacing: 3px;
    text-align: center;}

/* 브레드크럼 */
#subVisualWrap .breadcrumbBox{background-color: var(--white); position: absolute; left:20px; bottom: 0; border-radius: 0 var(--radius-l) 0 0;}
#subVisualWrap .breadcrumbBox .breadcrumbList{padding: 0 var(--spacing-lm) 0 var(--spacing-ms); height: 64px; display: flex; align-items: center; gap: 0 0;}
#subVisualWrap .breadcrumbBox .breadcrumbList li{position: relative; display: flex; align-items: center; overflow: hidden;} 
#subVisualWrap .breadcrumbBox .breadcrumbList li span{display: block; font-weight: var(--bold); font-size: var(--font-size-s); color: var(--gray-400); overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
#subVisualWrap .breadcrumbBox .breadcrumbList li::before{content: ''; flex-shrink: 0;  margin: 0 var(--spacing-xs); width: 5px; height: 2px; background-color: var(--gray-400);}
#subVisualWrap .breadcrumbBox .breadcrumbList li:last-child{overflow: visible;}
#subVisualWrap .breadcrumbBox .breadcrumbList li:first-child{flex-shrink: 0;}
#subVisualWrap .breadcrumbBox .breadcrumbList li:first-child::before{display: none;}
#subVisualWrap .breadcrumbBox .breadcrumbList li:last-child span{color: var(--gray-900);}
#subVisualWrap .breadcrumbBox .breadcrumbList li .home{display: block;}
#subVisualWrap .breadcrumbBox .breadcrumbList li .home img{width: 24px;}

@media (max-width: 1024px){

  #subVisualWrap{height: 240px;}
  #subVisualWrap .breadcrumbBox{border-radius: 0 var(--radius-m) 0 0;}
  #subVisualWrap .breadcrumbBox .breadcrumbList{padding: 0 var(--spacing-s) 0 var(--spacing-s); height: 48px;}

}

@media (max-width: 768px){

  #subVisualWrap .titleBox h3 .rollingText span{font-size: var(--font-size-l);}

}

/* 오른쪽 콘텐츠 영역 */
#contentWrap{max-width: 1920px; margin: 0 auto;  display: flex; align-items:stretch; gap: 0 60px; padding: var(--spacing-3xl) 0 ;}

/* 왼쪽 메뉴 영역 */
#contentWrap aside{position: sticky; top:30px; flex-shrink: 0; min-width: 140px; border-right: 1px solid var(--gray-100);} 
#contentWrap aside .depth01{padding: var(--spacing-2xs) 0;}
#contentWrap aside .depth01 li{margin-bottom: var(--spacing-m);}
#contentWrap aside .depth01 li:last-child{margin-bottom: 0;}
#contentWrap aside .depth01 li h2 a{padding: 0  var(--spacing-ml) 0 var(--spacing-ms); display: block; color: var(--gray-400); font-weight: var(--bold); font-size: var(--font-size-xl); word-break: keep-all; text-shadow: 0 0 4px rgba(30, 43, 55, 0.1); transition: all .3s;}
#contentWrap aside .depth01 li h2 a:hover{color: var(--gray-900); text-shadow: 0 0 4px rgba(30, 43, 55, 0.1);}
#contentWrap aside .depth01 li h2 a.active{color: var(--gray-900);}

/* 오른쪽 콘텐츠 영역 */
#contentWrap .contentRightBox{width: 100%;}
#contentWrap .contentRightBox .contentBox{padding-top: var(--spacing-3xl);}
#contentWrap .contentRightBox .container{margin: 0;}

/* 콘텐츠 상단 제목 영역 */
#contentWrap .contentTopBox .layoutBox{display: flex; align-items: center; justify-content: space-between;}
#contentWrap .contentTopBox .titleBox{display: flex; align-items: center; gap: 0 var(--spacing-s);}
#contentWrap .contentTopBox .titleBox h3{color: var(--gray-900); font-size: var(--H1); font-family: 'RiaSans'; font-weight: var(--regular);}
#contentWrap .contentTopBox .subMenuBox{position: relative;}
#contentWrap .contentTopBox .subMenuBox .subMenuBtn{position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--spacing-xs); background-color: var(--gray-100);}
#contentWrap .contentTopBox .subMenuBox .subMenuBtn::after{content: ''; width: 24px; height: 24px; border-radius: var(--radius-s);   background-color: var(--white);}
#contentWrap .contentTopBox .subMenuBox .subMenuBtn::before{content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 10px; height: 7px; background: url(../images/sub/arrow_icon01.svg) no-repeat center; transition: transform .3s;}
#contentWrap .contentTopBox .subMenuBox .subMenuList{padding: var(--spacing-s) 0; position: absolute; top: 56px; right: 0;
    min-width: 160px; width: max-content; max-width: 300px; max-height: 240px; border: 1px solid var(--gray-600); border-radius: var(--radius-m); box-shadow: 10px 10px 40px rgba(0,0,0,.1); z-index: 9999; background-color: var(--white); overflow-y: auto; overflow-x: hidden; opacity: 0; visibility: hidden; transform: translateY(-16px); transform-origin: top center;}
#contentWrap .contentTopBox .subMenuBox.active .subMenuList{opacity: 1; visibility: visible; animation: dropBounceMotion .35s forwards;}
@keyframes dropBounceMotion{ 0%{ opacity: 0; transform: translateY(-12px); } 70%{ opacity: 1; transform: translateY(2px); } 100%{ opacity: 1; transform: translateY(0); } }
#contentWrap .contentTopBox .subMenuBox.active .subMenuBtn::before{transform: translate(-50%, -50%) rotate(-180deg);}
#contentWrap .contentTopBox .subMenuBox .subMenuList li h4 a{padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs) var(--spacing-ms); display: block; color: var(--gray-600); font-weight: var(--medium);} 
#contentWrap .contentTopBox .utilBox{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
#contentWrap .contentTopBox .subMenuBox .subMenuList li h4 a.active{display: flex; align-items: center; color: var(--gray-900);}
#contentWrap .contentTopBox .subMenuBox .subMenuList li h4 a.active::before{content: ''; width: 24px; height: 24px; background: url(../images/sub/arrow_icon02.svg)no-repeat center / contain;}
#contentWrap .contentTopBox .utilBox button{width: 40px; height: 40px; border-radius: var(--radius-xs); transition: all .3s;}
#contentWrap .contentTopBox .utilBox button:hover{background-color: var(--gray-50);}
#contentWrap .contentTopBox .utilBox .shareBtn{background: url(../images/sub/share_icon.svg)no-repeat center;}
#contentWrap .contentTopBox .utilBox .printBtn{background: url(../images/sub/print_icon.svg)no-repeat center;}

@media (max-width: 1280px){

  #contentWrap{padding: var(--spacing-2xl) 0;}
  #contentWrap aside{display: none;}
  #contentWrap .contentTopBox .titleBox h3{font-size: var(--H3);}
  #contentWrap .contentRightBox .contentBox{padding-top: var(--spacing-2xl);}
  
}

@media (max-width: 1024px){

  #contentWrap .contentTopBox .titleBox h3{font-size: var(--H5);}
  #contentWrap .contentTopBox .subMenuBox.active .subMenuList{right: auto; left:0;}

}

@media (max-width: 768px){

  #contentWrap .contentRightBox .contentBox{padding-top: var(--spacing-lm);}
  #subVisualWrap .breadcrumbBox{right: 20px; border-radius: var(--radius-m) var(--radius-m) 0 0;}

}

@media (max-width: 576px){

  #contentWrap .contentTopBox .layoutBox{align-items: flex-start;}
  #contentWrap .contentTopBox .titleBox{flex-direction: column; align-items: flex-start; gap: var(--spacing-s) 0;}
  #contentWrap .contentTopBox .utilBox{flex-direction: column; gap: var(--spacing-xs) 0;}

}

/* 인사말 */
#contentWrap .greetingBox .greetingTopText{margin-bottom: var(--spacing-lm); color: var(--gray-600); line-height: 1.8; font-size: var(--H5);}
#contentWrap .greetingBox .greetingImgBox{position: relative; height: 670px; margin-bottom: var(--spacing-2xl); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-m) var(--radius-m); overflow: hidden;}
#contentWrap .greetingBox .greetingImgBox::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 262px; background: linear-gradient(to top, #1E2B37 0%, rgba(30, 43, 55, 0) 100%);}
#contentWrap .greetingBox .greetingImgBox .imgBox{height: 100%;}
#contentWrap .greetingBox .greetingImgBox .imgBox img{height: 100%; object-fit: cover;}
#contentWrap .greetingBox .chairmanInfoBox{position: absolute; right:var(--spacing-3xl); bottom: var(--spacing-2xl); display: flex; align-items: center; justify-content: space-between; gap: 0 var(--spacing-ml); z-index: 999;}
#contentWrap .greetingBox .chairmanInfoBox span{flex-shrink: 0; font-weight: var(--medium); color: var(--white); }
#contentWrap .greetingBox .chairmanInfoBox .layoutBox{ flex-shrink: 0; display: flex; align-items: flex-start; gap: 0 var(--spacing-xs);}
#contentWrap .greetingBox .chairmanInfoBox  p{font-weight: var(--bold); font-size: var(--font-size-xxxl); color: var(--white);}
#contentWrap .greetingBox .greetingInfoBox{display: flex; justify-content: space-between;}
#contentWrap .greetingBox .greetingInfoBox .leftBox span{margin-bottom: var(--spacing-m); display: block; font-family: 'RiaSans'; color: var(--gray-500); font-weight: var(--regular); font-size: var(--font-size-xl); letter-spacing: 13px;}
#contentWrap .greetingBox .greetingInfoBox .leftBox p{color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-xl);}
#contentWrap .greetingBox .greetingInfoBox .rightBox p em{margin-bottom: var(--spacing-ml); display: block; font-weight: var(--medium); font-size: var(--font-size-xl); color: var(--gray-600); font-style: normal;}
#contentWrap .greetingBox .greetingInfoBox .rightBox p span{display: block; color: var(--gray-900); font-weight: var(--bold); font-size: var(--font-size-xl);}
#contentWrap .greetingBox .greetingInfoBox .rightBox strong{display: block; margin-bottom: var(--spacing-m); color: var(--gray-900); font-size: var(--H4); line-height: 1.6; word-break: keep-all;}
#contentWrap .greetingBox .greetingInfoBox .rightBox .strongBox span{padding: var(--spacing-xs) var(--spacing-s); background-color: var(--primary-500); border-radius: var(--radius-s); color: var(--white); font-weight: var(--medium); font-family: 'RiaSans';}
#contentWrap .greetingBox .greetingInfoBox .rightBox .strongBox{margin-bottom: var(--spacing-ml); display: flex; flex-wrap: wrap; gap: var(--spacing-xs);}

@media (max-width: 1280px){

  #contentWrap .greetingBox .greetingInfoBox .leftBox p{font-size: var(--font-size-m);}
  #contentWrap .greetingBox .greetingInfoBox .rightBox p span,
  #contentWrap .greetingBox .greetingInfoBox .rightBox p em{font-size: var(--spacing-s);}
  #contentWrap .greetingBox .greetingInfoBox .rightBox strong{font-size: var(--font-size-xxxl);}
  #contentWrap .greetingBox .greetingImgBox{height: 500px;}
  #contentWrap .greetingBox .greetingImgBox::after{height: 140px;}
  #contentWrap .greetingBox .chairmanInfoBox{right: var(--spacing-2xl); bottom: var(--spacing-lm);}
  

}

@media (max-width: 1024px){

  #contentWrap .greetingBox .greetingImgBox{height: 400px;}
  #contentWrap .greetingBox .greetingTopText{font-size: var(--H6);}
  #contentWrap .greetingBox .greetingInfoBox{flex-direction: column; align-items: center; gap: var(--spacing-l) 0; text-align: center;}
  #contentWrap .greetingBox .greetingInfoBox .rightBox strong br{display: none;}
  #contentWrap .greetingBox .greetingInfoBox .rightBox .strongBox{margin-bottom: var(--spacing-m);}

}

@media (max-width: 768px){

  #contentWrap .greetingBox .greetingTopText{margin-bottom: var(--spacing-m); font-size: var(--Subtitle-2);}
  #contentWrap .greetingBox .chairmanInfoBox{left: var(--spacing-m); right:var(--spacing-m); bottom: var(--spacing-ml);}
  #contentWrap .greetingBox .greetingImgBox .imgBox img{width: calc(100% + 80px); transform: translateX(-80px);}
  #contentWrap .greetingBox .greetingInfoBox .rightBox .strongBox{justify-content: center;}

}

@media (max-width: 480px){

  #contentWrap .greetingBox .greetingInfoBox .leftBox p,
  #contentWrap .greetingBox .greetingInfoBox .rightBox p{text-align: left;}
  #contentWrap .greetingBox .greetingInfoBox .leftBox p br,
  #contentWrap .greetingBox .greetingInfoBox .rightBox p br{display: none;}
  #contentWrap .greetingBox .greetingImgBox{border-radius: var(--spacing-lm) var(--spacing-lm) var(--radius-m) var(--radius-m);}
  #contentWrap .greetingBox .greetingImgBox .imgBox img{width: calc(100% + 120px); transform: translateX(-120px);}
  #contentWrap .greetingBox .chairmanInfoBox{left:var(--spacing-s); right: var(--spacing-s);}
  #contentWrap .greetingBox .chairmanInfoBox p{font-size: var(--font-size-l);}


}

@media (max-width: 414px){

  #contentWrap .greetingBox .greetingImgBox .imgBox img{width: calc(100% + 280px); transform: translateX(-280px);}

}

/* 프로필 */
#contentWrap .profileBox .profileTopBox{margin-bottom: var(--spacing-lm); display: flex; align-items: center; justify-content: space-between;}
#contentWrap .profileBox .profileTopBox .box span{display: block; margin-bottom: var(--spacing-xs); font-weight: var(--bold); color: var(--primary-500); font-size: var(--font-size-s);}
#contentWrap .profileBox .profileTopBox .box p{font-size: var(--font-size-xl); color: var(--gray-600); line-height: 1.6;}
#contentWrap .profileBox .profileInfoBox{display: flex; align-items: flex-start; justify-content: space-between;}
#contentWrap .profileBox .profileImgBox{position: relative; height: 0; padding-top: 53.5%; margin-bottom: var(--spacing-3xl); border-radius: var(--radius-l); overflow: hidden; }
#contentWrap .profileBox .profileImgBox::after{content: ''; width: 26vw; position: absolute; top:0; right:0; bottom: 0; background: linear-gradient(to left, #1E2B37 0%, rgba(30, 43, 55, 0) 100%);}
#contentWrap .profileBox .profileImgBox img{position: absolute; top:0; left:0; right:0; bottom: 0; height: 100%; object-fit: cover; object-position: center -14vw;}
#contentWrap .profileBox .profileImgBox .profileTextBox{position: absolute; top: 50%; transform: translateY(-50%); right:64px; z-index: 9;}
#contentWrap .profileBox .profileImgBox .profileTextBox p span{display: block; margin-bottom: var(--spacing-s); color: var(--white); font-weight: var(--bold); font-size: var(--font-size-xxxl);}
#contentWrap .profileBox .profileImgBox .profileTextBox p em{font-size: 64px; color: var(--gray-400); font-family: 'RiaSans'; font-style: normal;}
#contentWrap .profileBox .profileImgBox .profileTextBox p em strong{color: var(--white); font-weight: var(--regular);}
#contentWrap .profileBox .profileImgList{display: flex; gap: var(--spacing-2xs);}
#contentWrap .profileBox .profileImgList li img{height: 100%; object-fit: cover;}
#contentWrap .profileBox .profileHistoryBox{padding-left: var(--spacing-ms); border-left: 2px solid var(--gray-600);}
#contentWrap .profileBox .profileHistoryBox .box{margin-bottom: var(--spacing-2xl);}
#contentWrap .profileBox .profileHistoryBox .box:last-child{margin-bottom: 0;}
#contentWrap .profileBox .profileHistoryBox .box h5{margin-bottom: var(--spacing-xs); color: var(--gray-900); font-size: var(--font-size-xl);}
#contentWrap .profileBox .profileHistoryBox .box .profileHistoryList li{color: var(--gray-600);}

@media (max-width: 1280px){

  #contentWrap .profileBox .profileImgList li{max-width: 164px;}
  #contentWrap .profileBox .profileImgBox img{object-position: center -19vw;}
  #contentWrap .profileBox .profileImgBox .profileTextBox p em{font-size: var(--H2);}
  
}

@media (max-width: 1024px){

  #contentWrap .profileBox .profileTopBox .box p{font-size: var(--font-size-l);}
  #contentWrap .profileBox .profileInfoBox{justify-content: flex-start; gap: 0 var(--spacing-lm);}
  #contentWrap .profileBox .profileImgList{flex-direction: column; }
  #contentWrap .profileBox .profileImgBox .profileTextBox{top: auto; bottom: 40px; right: 40px; transform: none;}
  #contentWrap .profileBox .profileImgBox .profileTextBox p span{margin-bottom: var(--spacing-xs); font-size: var(--font-size-l);}
  #contentWrap .profileBox .profileImgBox::after{top: auto; left:0; right:0; width: auto; height: 20vh; background: linear-gradient(to top, #1E2B37 0%, rgba(30, 43, 55, 0) 100%);}
  
}

@media (max-width: 768px){

  #contentWrap .profileBox .profileTopBox{flex-direction: column; gap: var(--spacing-s) 0; text-align: center;}
  #contentWrap .profileBox .profileTopBox .box p br{display: none;}
  #contentWrap .profileBox .profileImgBox .profileTextBox{bottom: 24px; right: 24px;}
  #contentWrap .profileBox .profileImgBox .profileTextBox p em{font-size: var(--H4);}
  #contentWrap .profileBox .profileHistoryBox .box h5{font-size: var(--font-size-l);}
  #contentWrap .profileBox .profileImgBox::after{height: 17vh;}

}

@media (max-width: 576px){

  #contentWrap .profileBox .profileImgBox{padding-top: 61.3%;}

}

@media (max-width: 480px){

  #contentWrap .profileBox .profileImgBox{padding-top: 80%; margin-bottom: var(--spacing-2xl);}
  #contentWrap .profileBox .profileTopBox{text-align: left;}
  #contentWrap .profileBox .profileTopBox .box{width: 100%;}
  #contentWrap .profileBox .profileImgBox .profileTextBox{bottom: 24px; left: 50%; transform: translateX(-50%); width: 100%; right: auto; text-align: center;}
  #contentWrap .profileBox .profileImgBox .profileTextBox p span{font-size: var(--font-size-s);}
  #contentWrap .profileBox .profileImgBox .profileTextBox p em{font-size: var(--H5);}
  #contentWrap .profileBox .profileInfoBox{flex-direction: column;}
  #contentWrap .profileBox .profileImgList{margin-bottom: var(--spacing-lm); flex-direction: row;}
  #contentWrap .profileBox .profileHistoryBox .box{margin-bottom: var(--spacing-lm);}
  #contentWrap .profileBox .profileHistoryBox .box .profileHistoryList li{font-size: var(--body-2);}
  #contentWrap .profileBox .profileImgBox img{object-position: center -5vw;}
  #contentWrap .profileBox .profileImgBox{padding-top: 116%;}

}

@media (max-width: 360px){

    #contentWrap .profileBox .profileImgBox::after{height: 15vh;}

}

/* 연혁 */
#contentWrap .historyBox .historyLayoutBox{display: flex; gap: 0 var(--spacing-6xl);}
#contentWrap .historyBox .historyClockBox{position: sticky; top: 30px; width: 254px;
    height: 241px; background: url(../images/sub/clock01.svg) no-repeat center / contain;}
#contentWrap .historyBox .historyClockBox::after{ content: ''; width: 20px; height: 19px;
    position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); background: url(../images/sub/clock04.svg) no-repeat center / contain; z-index: 3;}
#contentWrap .historyBox .historyClockBox .clockHand{position: absolute; top: 56%; left: 50%;
    transform: translate(-50%, -50%); z-index: 2;}
#contentWrap .historyBox .historyClockBox .clockHand.hour{width: 52px; height: 10px;
   }
#contentWrap .historyBox .historyClockBox .clockHand.hour .clockIcon01{position: absolute;
    top: 50%; left: -32px; transform: translateY(-50%); display: block; width: 52px; height: 10px;
    background: url(../images/sub/clock02.svg) no-repeat center / contain;}
#contentWrap .historyBox .historyClockBox .clockHand.minute{width: 10px; height: 69px;
   }
#contentWrap .historyBox .historyClockBox .clockHand.minute .clockIcon02{ position: absolute;
    top: -38px; left: 50%; transform: translateX(-50%); display: block; width: 10px;
    height: 69px; background: url(../images/sub/clock03.svg) no-repeat center / contain;}

@keyframes hourRotate{
    from{transform: translate(-50%, -50%) rotate(0deg);}
    to{transform: translate(-50%, -50%) rotate(360deg);}
}

@keyframes minuteRotate{
    from{transform: translate(-50%, -50%) rotate(0deg);}
    to{transform: translate(-50%, -50%) rotate(360deg);}
}
#contentWrap .historyBox .historyClockBox.sticky .clockHand.hour{animation: hourRotate 15s linear infinite;}
#contentWrap .historyBox .historyClockBox.sticky .clockHand.minute{animation: minuteRotate 3s linear infinite;}
#contentWrap .historyBox .historyList > li{margin-bottom: var(--spacing-5xl); display: flex; gap: 0 var(--spacing-3xl);}
#contentWrap .historyBox .historyList > li:last-child{margin-bottom: 0;}
#contentWrap .historyBox .historyList li h4{margin-bottom: var(--spacing-lm); font-size: var(--H4); color: var(--gray-900);}
#contentWrap .historyBox .historyList li:nth-child(odd) .historyPeriodBox{background: linear-gradient(to bottom, #F0F9F1, #F7F8F9);}
#contentWrap .historyBox .historyList li:nth-child(even) .historyPeriodBox{background: linear-gradient(to bottom, #FFF9F4, #F7F8F9);}
#contentWrap .historyBox .historyList li .historyPeriodBox{padding-top: var(--spacing-ms); width: 72px; flex-shrink: 0; text-align: center; border-radius: var(--radius-xs);}
#contentWrap .historyBox .historyList li .historyPeriodBox span{color: var(--gray-400); writing-mode: vertical-rl; font-family: 'RiaSans'; font-size: var(--font-size-l);}
#contentWrap .historyBox .listBox > li{margin-bottom: var(--spacing-lm); display: flex; align-items: flex-start; gap: 0 var(--spacing-ms); border-left: 2px solid var(--gray-200);}
#contentWrap .historyBox .listBox li:last-child{margin-bottom: 0;}
#contentWrap .historyBox .listBox li .date{padding-left: var(--spacing-s); display: flex; flex-direction: column; justify-content: center; width: 72px; flex-shrink: 0; line-height: 1.5;}
#contentWrap .historyBox .listBox li span{display: block; color: var(--gray-900); font-size: var(--font-size-s); font-weight: var(--bold);}
#contentWrap .historyBox .listBox li .list li,
#contentWrap .historyBox .listBox li p{color: var(--gray-600); font-size: var(--font-size-xl); word-break: keep-all;}
#contentWrap .historyBox .listBox li .list li{margin-bottom: var(--spacing-s); }
#contentWrap .historyBox .listBox li .list li:last-child{margin-bottom: 0;}

@media (max-width: 1280px){

  #contentWrap .historyBox .historyClockBox{width: 186px; height: 176px;}
  #contentWrap .historyBox .historyClockBox .clockHand.hour .clockIcon01{left: -11px; width: 38px; height: 7px;}
  #contentWrap .historyBox .historyClockBox::after{width: 15px; height: 14px;}
  #contentWrap .historyBox .historyClockBox .clockHand.minute .clockIcon02{top:-13px; height: 50px; width: 7px;}
  #contentWrap .historyBox .historyLayoutBox{gap: 0 var(--spacing-3xl);}
  #contentWrap .historyBox .historyList > li{gap: 0 var(--spacing-2xl);}

}

@media (max-width: 1024px){

  #contentWrap .historyBox .historyClockBox{position: relative; top:0;}
  #contentWrap .historyBox .historyLayoutBox{flex-direction: column; align-items: center; gap: var(--spacing-3xl) 0;}
  #contentWrap .historyBox .historyList{width: 100%;}
  #contentWrap .historyBox .historyList li .historyPeriodBox span{font-size: var(--font-size-l);}
  #contentWrap .historyBox .historyList li h4{font-size: var(--font-size-xxxl);}
  #contentWrap .historyBox .historyClockBox .clockHand.hour,
  #contentWrap .historyBox .historyClockBox .clockHand.minute{animation: none;}

}

@media (max-width: 768px){

  #contentWrap .historyBox .historyList > li{gap: 0 var(--spacing-lm);}
  #contentWrap .historyBox .listBox li .list li,
  #contentWrap .historyBox .listBox li p{font-size: var(--font-size-m);}

}

@media (max-width: 576px){

  #contentWrap .historyBox .historyList > li{flex-direction: column; gap: var(--spacing-lm) 0;}
  #contentWrap .historyBox .historyList li h4{margin-bottom: var(--spacing-m);}
  #contentWrap .historyBox .historyList li .historyPeriodBox{display: flex; align-items: center; justify-content: center; height: 66px; padding-top: 0; width: 100%;}
  #contentWrap .historyBox .historyList li .historyPeriodBox span{writing-mode:initial}
  #contentWrap .historyBox .historyClockBox{width: 164px; height: 156px;}

}

/* 조직 및 직원현황 */
.orgchartBox .orgchartTopBox{margin-bottom: var(--spacing-3xl); padding: var(--spacing-3xl) var(--spacing-ms); background-color: var(--gray-50); border-radius: var(--radius-l);}
.orgchartBox .orgChartList01{max-width: 965px; margin: 0 auto;}
.orgchartBox .orgChartList01 > li{position: relative;}
.orgchartBox .orgChartList01 li span{margin: 0 auto; display: flex; align-items: center;justify-content: center; width: 100%; max-width: 240px; min-height: 80px; border-radius: var(--radius-m); font-weight: var(--bold); font-size: var(--font-size-xl); color: var(--white); text-align: center; word-break: keep-all;}
.orgchartBox .orgChartList01 li span br{display: none;}
.orgchartBox .orgChartList01 li .chairman{ position: relative; margin-bottom: 125px; background-color: var(--primary-900); letter-spacing: 5px;}
.orgchartBox .orgChartList01 li .chairman::after{ content: ''; position: absolute; left: 50%; bottom: -56px; width: 1px; height: 56px; margin-left: -0.5px; background-color: var(--gray-600);}
.orgchartBox .orgChartGroup{ position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0 var(--spacing-m);}
.orgchartBox .orgChartList02 > li{position: relative; margin-bottom: 28px;}
.orgchartBox .orgChartList02 > li:last-child{margin-bottom: 0;}
.orgchartBox .orgChartList02 > li::before{content: ''; position: absolute;left: 50%;top: -69px; width: 1px; height: 69px;
    background-color: var(--gray-600);}
.orgchartBox .orgChartList02 > li::after{content: ''; position: absolute; left: 50%; top: 80px; width: 1px; height: 28px; margin-left: 0.5px; background-color: var(--gray-600);}
.orgchartBox .orgChartList02.type01 li span{background-color: var(--primary-500);}
.orgchartBox .orgChartList02 li .manager{ margin-bottom: 28px;}
.orgchartBox .orgChartList02.type02{ margin-top: -109px; width: 100%; max-width: 240px;}
.orgchartBox .orgChartList02.type02 li .committee{background-color: var(--primary-700);}
.orgchartBox .orgChartList02.type02 li span{background-color: var(--secondary-800);}
.orgchartBox .orgChartList02.type02 > li::before{display: none;}
.orgchartBox .orgChartList02.type02 > li:nth-child(2){margin-bottom: var(--spacing-xl);}
.orgchartBox .orgChartList02.type02 > li:nth-child(2)::after{height: 56px;}
.orgchartBox .orgChartList02.type02 > li:last-child::after{display: none;}
.orgchartBox .orgChartList03{ position: relative; padding-top: 28px; display: flex; gap: 0 var(--spacing-ms);}
.orgchartBox .orgChartList03::after{content: ''; position: absolute;
  top: 0; left: calc((100% - var(--spacing-ms)) / 4); width: calc(((100% - var(--spacing-ms)) / 2) + var(--spacing-ms)); height: 1px; background-color: var(--gray-600);}
.orgchartBox .orgChartList03 li{position: relative; flex: 1 1 0; max-width: 240px;}
.orgchartBox .orgChartList03 li::after{content: ''; position: absolute; top: -28px; left: 50%; width: 1px; height: 28px; margin-left: -0.5px; background-color: var(--gray-600);}
.orgchartBox .orgChartGroup{position: relative; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 0 var(--spacing-m);}
.orgchartBox .orgChartList01 > li::after{content: ''; position: absolute;
  top: 135px; left: min(249px, calc((100% - 240px - var(--spacing-m)) / 2));
  right: 240px; height: 1px; background-color: var(--gray-600);}
.orgchartBox .orgChartList02.type01{flex: 1 1 auto; min-width: 0;
  max-width: 498px; width: 100%;}
.orgchartBox .orgChartList02.type02{flex: 0 0 240px; width: 240px; max-width: 240px;
  margin-top: -109px;}
.orgchartBox .staffBox h4::before{content: ''; margin-top: -2px; width: 24px; height: 24px; background: url(../images/sub/badge.svg)no-repeat center;}
.orgchartBox .staffBox h4{display: flex; align-items: center; gap: 0 var(--spacing-xs); margin-bottom: var(--spacing-m); font-size: var(--font-size-xxxl); font-weight: var(--bold);}
.orgchartBox .staffBox .staffTable .colPosition{width: 200px;}
.orgchartBox .staffBox .staffTable{width: 100%; padding: var(--spacing-m); border: 1px solid var(--gray-600); border-radius: var(--radius-m);}
.orgchartBox .staffBox .staffTable thead th{color: var(--gray-400); font-size: var(--font-size-s); font-weight: var(--bold); text-align: left;}
.orgchartBox .staffBox .staffTable tbody th{color: var(--gray-900); font-weight: var(--bold);}
.orgchartBox .staffBox .staffTable thead th{padding-bottom: var(--spacing-xs);}
.orgchartBox .staffBox .staffTable tbody th{padding: var(--spacing-m) 0; border-bottom: 1px solid var(--gray-100); vertical-align: top; text-align: left;}
.orgchartBox .staffBox .staffTable tbody th h5{font-size: var(--font-size-m);}
.orgchartBox .staffBox .staffTable tbody td{padding: var(--spacing-m) 0; border-bottom: 1px solid var(--gray-100);}
.orgchartBox .staffBox .staffTable tbody th .phone::before{content: ''; width: 16px; height: 16px; background: url(../images/sub/phone.svg)no-repeat center / contain;}
.orgchartBox .staffBox .staffTable tbody th .phone{min-width: 121px; margin-top: var(--spacing-xs); padding: var(--spacing-2xs) var(--spacing-xs);  display: inline-flex; align-items: center; gap: 0 var(--spacing-2xs); color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s ); background-color: var(--gray-100); border-radius: var(--radius-xs);}
.orgchartBox .staffBox .staffTable tbody td .workList li{position: relative; padding-left: var(--spacing-ms); margin-bottom: var(--spacing-xs); color: var(--gray-600);}
.orgchartBox .staffBox .staffTable tbody td .workList li::before{content: ''; position: absolute; top:10px; left:10px; width: 3px; height: 3px; background-color: var(--gray-600); border-radius: var(--radius-s);}
.orgchartBox .staffBox .staffTable tbody td .workList li:last-child{margin-bottom: 0;}
.orgchartBox .staffBox .staffTable tbody tr:last-child th,
.orgchartBox .staffBox .staffTable tbody tr:last-child td{border-bottom: 0;}
.orgchartBox .staffLayoutBox{display: flex; justify-content: space-between; gap: 0 var(--spacing-3xl)}
.orgchartBox .staffBox{flex: 1;}

@media (max-width: 1280px){

  .orgchartBox .staffLayoutBox{flex-direction: column; gap: var(--spacing-3xl ) 0;}

}

@media (max-width: 1024px){

  .orgchartBox .orgChartList01 li .chairman{margin-bottom: 125px; max-width: none;}
  .orgchartBox .orgChartList01 li .chairman::after{height: 62px; bottom: -62px;}

  .orgchartBox .orgChartList01 li span{min-height: 72px;}
  .orgchartBox .orgChartList01 > li::after{top: 133px;}
  .orgchartBox .orgChartList02 > li::after{top: 72px;}
  .orgchartBox .orgChartList02 > li::before{top: -63px; height: 63px;}
  .orgchartBox .orgChartList02.type02{margin-top: -100px;}
  .orgchartBox .orgChartList03{gap: 0 var(--spacing-xs);}
  .orgchartBox .orgChartList03::after{
    left: calc((100% - var(--spacing-xs)) / 4);
    width: calc(((100% - var(--spacing-xs)) / 2) + var(--spacing-xs));
  }
  
}

@media (max-width: 768px){

  .orgchartBox .orgchartTopBox{margin-bottom: var(--spacing-2xl); padding: var(--spacing-lm) var(--spacing-ms);}
  .orgchartBox .orgChartList01 li .chairman{margin-bottom: 113px;}
  .orgchartBox .orgChartList02.type02{margin-top: -88px;}
  .orgchartBox .orgChartList02 > li::before{height: 50px; top: -50px;}
  .orgchartBox .orgChartList02 > li{margin-bottom: var(--spacing-s);}
  .orgchartBox .orgChartList02.type02 > li:nth-child(2){margin-bottom: var(--spacing-ml);}
  .orgchartBox .orgChartList02 li .manager{margin-bottom: var(--spacing-s);}
  .orgchartBox .orgChartList03{padding-top: var(--spacing-s);}
  .orgchartBox .orgChartList02 > li::after{height: 16px;}
  .orgchartBox .orgChartList03 li::after{top: -16px; height: 16px;}
  .orgchartBox .orgChartGroup{gap: 0 var(--spacing-lm);}
  .orgchartBox .orgChartList01 li span{max-width: none;}
  .orgchartBox .orgChartList02.type01,
  .orgchartBox .orgChartList02.type02{flex: none; max-width: none; width: calc((100% - 40px) / 2);}
  .orgchartBox .orgChartList01 > li::after{content: ''; position: absolute; top: 134px;
    left: calc((100% - var(--spacing-lm)) / 4); width: calc(((100% - var(--spacing-lm)) / 4) + var(--spacing-lm)); height: 1px; background-color: var(--gray-600); }
}

@media (max-width: 576px){

  .orgchartBox .orgChartList01 li span{font-size: var(--font-size-m);}
  .orgchartBox .orgChartList01 li .chairman{font-size: var(--font-size-xl);}
  .orgchartBox .staffBox .staffTable thead th{display: none;}
  .orgchartBox .staffBox .staffTable .colPosition{width: 164px;}

}

@media (max-width: 480px){

  .orgchartBox .orgChartGroup{gap: 0 var(--spacing-ms);}
  .orgchartBox .staffBox .staffTable{padding: var(--spacing-s);}
  .orgchartBox .staffBox .staffTable tbody th{padding: var(--spacing-m) 0 0; border-bottom: 0;}
  .orgchartBox .staffBox .staffTable tbody th,
  .orgchartBox .staffBox .staffTable tbody td{display: block;}
  .orgchartBox .staffBox .staffTable tbody td{padding: var(--spacing-s) 0 var(--spacing-m);}
  .orgchartBox .orgChartList02.type01,
  .orgchartBox .orgChartList02.type02{flex: none; max-width: none;
    width: calc((100% - var(--spacing-ms)) / 2);}
  .orgchartBox .orgChartList01 > li::after{left: calc((100% - var(--spacing-ms)) / 4);
    width: calc(((100% - var(--spacing-ms)) / 4) + var(--spacing-ms));}

}

/* 청사안내도 */ 
.buildingMapBox h4{margin-bottom: var(--spacing-m);}
.buildingMapBox .buildingMapTopBox{margin-bottom: var(--spacing-3xl); padding: var(--spacing-2xl) var(--spacing-ms) var( --spacing-lm ); border: 1px solid var(--gray-600); border-radius: var(--radius-m);}
.buildingMapBox .buildingMapTopBox img{width: auto; max-width: 100%; margin: 0 auto var(--spacing-lm );}
.buildingMapBox .buildingMapInfoBox{margin-bottom: var(--spacing-lm); display: flex; flex-wrap: wrap; gap: var(--spacing-m); justify-content: center;} 
.buildingMapBox .buildingMapInfoBox .buildingMapInfo{display: flex; align-items: center; gap: var(--spacing-xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--body-2);}
.buildingMapBox .buildingMapInfoBox .buildingMapInfo::before{content: '';}
 .buildingMapBox .buildingMapInfoBox .buildingMapInfo.toilet::before{width: 86px; height: 28px; background: url(../images/sub/toilet.svg)no-repeat center;}
.buildingMapBox .buildingMapInfoBox .buildingMapInfo.elevator::before{width: 28px; height: 28px; background: url(../images/sub/elevator.svg)no-repeat center;}
.buildingMapBox .buildingMapInfoBox .buildingMapInfo.entrance::before{width: 24px; height: 12px; background: url(../images/sub/entrance.svg)no-repeat center;}
.buildingMapBox .buildingMapTopBox .buildingMapInfoTextBox{text-align: center;}
.buildingMapBox .buildingMapTopBox .buildingMapInfoText{display: inline-flex; gap: 0 var(--spacing-2xs); padding: var(--spacing-xs); color: var(--gray-900); font-size: var(--font-size-s); border-radius: var(--radius-s); border: 1px solid var(--gray-100); color: var(--gray-900); box-shadow: 0 4px 40px rgba(30, 43, 55, 0.1); font-family: 'RiaSans';}
.buildingMapBox .buildingMapTopBox .buildingMapInfoText::before{content: ''; flex-shrink: 0; width: 20px; height: 20px; background: url(../images/sub/accent_icon.svg)no-repeat center;}
.buildingMapBox .facilityInfoBox{padding-top: var(--spacing-s); border-top: 2px solid var(--gray-600);}
.buildingMapBox .facilityInfoBox dl{margin-bottom: var(--spacing-m); padding: var(--spacing-s) 0; display: flex; gap: 0 var(--spacing-ms);}
.buildingMapBox .facilityInfoBox dl dt{flex-shrink: 0; width: 148px; color: var(--gray-600); font-weight: var(--bold); font-size: var(--H6 );}
.buildingMapBox .facilityInfoBox dl dd{position: relative; padding-left: var(--spacing-s); /*display: flex; gap: 0 6px;*/ color: var(--gray-600); font-size: var(--body-1);}
.buildingMapBox .facilityInfoBox dl dd::before{content: ''; position: absolute; top:0; left:0; width: 12px; height: 24px; background: url(../images/sub/bullet_icon02.svg) no-repeat center;}
.buildingMapBox .tabList{margin-bottom: var(--spacing-m);}
.buildingMapBox .btnBox{justify-content: flex-start; margin: var(--spacing-xs) 0 0;}
.buildingMapBox .btn{padding: var(--spacing-xs) var(--spacing-s); height: 36px; line-height: 36px; font-size: var(--font-size-s);}
.buildingMapBox .facilityInfoText{display: inline-block; margin: var(--spacing-xs) 0 0; padding: var(--spacing-2xs) var(--spacing-xs); font-weight: var(--semi-bold); color: var(--gray-600); font-size: var(--font-size-s ); background-color: var(--gray-100); border-radius: var(--radius-xs);}
.buildingMapBox .buildingMapZoomArea{overflow: hidden;}
.buildingMapBox .buildingMapImg{cursor: grab;}

@media (max-width: 1024px){

  .buildingMapBox h4{margin-bottom: var(--spacing-s);}
  .buildingMapBox .buildingMapTopBox img{margin: 0 auto var(--spacing-m);}
  .buildingMapBox .buildingMapInfoBox{margin-bottom: var(--spacing-m);}

}

@media (max-width: 768px){

  .buildingMapBox .buildingMapTopBox{margin-bottom: var(--spacing-2xl); padding: var(--spacing-lm) var(--spacing-ms);}
  .buildingMapBox .facilityInfoBox dl{flex-direction: column; align-items: flex-start;}
  .buildingMapBox .facilityInfoBox dl dt{width: 100%; margin-bottom: var(--spacing-xs); font-size: var(--Subtitle-1);}

}

@media (max-width: 480px){

  .buildingMapBox .buildingMapTopBox{padding: var(--spacing-m) var(--spacing-ms);}
  .buildingMapBox .buildingMapTopBox .buildingMapInfoText,
  .buildingMapBox .buildingMapInfoBox .buildingMapInfo{font-size: var(--font-size-xs);}
  .buildingMapBox .facilityInfoBox dl dd{font-size: var(--body-2);}
  .buildingMapBox .facilityInfoBox dl dd::before{margin-top: -3px;}

}

/* 찾아오시는 길 */
.locationBox .locationMapWrap{margin-bottom: var(--spacing-xl); position: relative; height: 564px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--gray-600); box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.locationBox .mapImg{height: 100%; object-fit: cover;}
.locationBox .positionImg{position: absolute; top:0; left:0; width: auto;}
.locationBox .mapInfoBox{padding: var(--spacing-m); display: flex; align-items: center; justify-content: space-between; position: absolute; bottom: 32px; left:32px; right:32px; border-radius: var(--radius-l); z-index: 999; background: rgba(30, 43, 55, 0.75); } 
.locationBox .mapInfoBox dl{display: flex;}
.locationBox .mapInfoBox dl dt::before{content:''; margin-right: var(--spacing-3xs); width: 28px; height: 25px; background: url(../images/sub/map_icon.svg)no-repeat center;}
.locationBox .mapInfoBox dl dt{width: 95px; display: flex; align-items: center; gap: 0 var(--spacing-xs); flex-shrink: 0; color: var(--white); font-size: var(--H6); font-weight: var(--bold);}
.locationBox .mapInfoBox dl dd{color: var(--white);}
.locationBox .mapInfoBox .naverViewLink::before{content: ''; width: 32px; height: 32px; background: url(../images/sub/naver_icon.svg)no-repeat center;}
.locationBox .mapInfoBox .naverViewLink{padding:0 var(--spacing-s) 0 var(--spacing-xs); display: flex; align-items: center; gap: 0 0; height: 40px; font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white); border-radius: 50px; background-color: var(--naver_color);}
.locationBox .locationInfoBox span{position: relative; display: inline-block; margin-bottom: var(--spacing-m); padding: var(--spacing-2xs) var(--spacing-s); border-radius: var(--radius-s); background-color: var(--primary-900); color: var(--stat-point);}
.locationBox .locationInfoBox span::after{content: ''; width: 26px; height: 14px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -14px; background: url(../images/sub/arrow_icon04.svg)no-repeat center;}
.locationBox .locationInfoBox strong, .locationBox .locationInfoBox .phone{display: block; margin-bottom: var(--spacing-m); font-size: var(--H4); font-weight: var(--bold); color: var(--gray-600);}
.locationBox .locationInfoBox dl{margin-bottom: var(--spacing-xs); position: relative; padding-left:var(--spacing-xs); display: flex; align-items: center; gap: 0 var(--spacing-3xs )}
.locationBox .locationInfoBox dl::before{content: '';position: absolute; top:10px; left:0; width: var(--spacing-3xs); height: var(--spacing-3xs); background-color: var(--gray-600);;}
.locationBox .locationInfoBox dl dt{font-weight: var(--bold); color: var(--gray-600);}
.locationBox .locationInfoBox dl dd{ color: var(--gray-600);}
.locationBox .locationLink{display: inline-block; padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-s); background-color: var(--gray-600); font-size: 14px; color: var(--white); font-weight: var(--bold);}
.locationBox .locationInfoWrap{display: flex; margin-bottom: var(--spacing-3xl);}
.locationBox .locationInfoBox{flex: 1;}
.locationBox .locationGuideWrap{margin-bottom: var(--spacing-3xl);}
.locationBox h4::before{content: ''; width: 12px; height: 17px; background: url(../images/sub/bullet_icon01.svg)no-repeat center;}
.locationBox h4{display: flex; align-items: center; gap: 0 var(--spacing-xs); margin-bottom: var(--spacing-s); font-size: var(--H5); color: var(--gray-900);}
.locationBox .locationGuideWrap .locationGuideBox{ position: relative; padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-2xl) 300px; border-radius: var(--radius-xl); background-color: var(--gray-100);}
.locationBox .locationGuideWrap .locationGuideBox::before{content: ''; position: absolute; top:64px; left:64px; width: 157px; height: 182px; background: url(../images/sub/bus.svg)no-repeat center / contain;}
.locationBox .locationGuideBox h5{margin-bottom: var(--spacing-s); color: var(--gray-600); font-size:var(--H5);}
.locationBox .locationGuideBox .locationGuideList{ display: flex; gap: 0 var(--spacing-s);}
.locationBox .locationGuideBox .locationGuideList .box{flex: 1; padding: var(--spacing-m); background-color: var(--white); border-radius: var(--radius-m);}
.locationBox .locationGuideBox .locationGuideList .box h6{margin-bottom: var(--spacing-2xs); color: var(--gray-600); font-size: var(--body-1);}
.locationBox .locationGuideBox .locationGuideList .box span{margin-bottom: var(--spacing-s); padding: 0 var(--spacing-xs); display: inline-block; background-color: var(--gray-100); border-radius: var(--radius-s);}
.locationBox .locationGuideBox .locationGuideList .box p{margin-bottom: var(--spacing-m);}
.locationBox .locationGuideBox .locationGuideList .box p strong{color: var(--naver_color);}
.locationBox .parkingWrap .parkingBox{padding-top: var(--spacing-s); border-top: 2px solid var(--gray-600);}
.locationBox .parkingWrap dl{margin-bottom: var(--spacing-m); padding: var(--spacing-s) 0; display: flex; gap: 0 var(--spacing-ms);}
.locationBox .parkingWrap dl dt{flex-shrink: 0; width: 148px; color: var(--gray-600); font-size: var(--H6); font-weight: var(--bold);}
.locationBox .parkingWrap dl dd::before{content: '';position: absolute; top:0; left:0;  width: 12px; height: 24px; background: url(../images/sub/bullet_icon02.svg)no-repeat center;}
.locationBox .parkingWrap dl dd{padding-left: var(--spacing-s); position: relative; gap: 0 var(--spacing-2xs); color: var(--gray-600);}
.locationBox .parkingWrap dl dd span{ display: inline-block; margin-top: var(--spacing-xs); padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--gray-100); font-weight: var(--semi-bold); font-size: var(--font-size-s); color: var(--gray-600); border-radius: var(--radius-xs); line-height: 1.5;}

@media (max-width: 1280px){

   .locationBox .locationMapWrap{border-radius: var(--spacing-lm);}
   .locationBox .mapInfoBox{padding: var(--spacing-s) var(--spacing-m);}

}

@media (max-width: 1024px){

   .locationBox .locationMapWrap{border-radius: var(--spacing-lm);}
   .locationBox .mapInfoBox{padding: var(--spacing-s) var(--spacing-m);}
   .locationBox .mapInfoBox{flex-direction: column; align-items: flex-start; gap: var(--spacing-ms) 0;} 
   .locationBox .locationGuideWrap .locationGuideBox{border-radius:var(--radius-l);}
   .locationBox .locationGuideWrap .locationGuideBox{padding: var(--spacing-lm) var(--spacing-lm) var(--spacing-lm) 277px;}
   .locationBox .locationGuideBox .locationGuideList{flex-direction: column; gap: var(--spacing-s) 0;}
   .locationBox .locationGuideWrap .locationGuideBox::before{left: 40px; top: 40px;}

}

@media (max-width: 768px){

  .locationBox h4{font-size: var(--H6);}
  .locationBox .mapInfoBox{border-radius: var(--radius-m);}
  .locationBox .locationGuideWrap .locationGuideBox{padding: 246px var(--spacing-lm) var(--spacing-lm);}
  .locationBox .locationGuideBox h5{text-align: center;}
  .locationBox .locationGuideWrap .locationGuideBox::before{top:var(--spacing-lm); left: 50%; transform: translateX(-50%);}
  .locationBox .parkingWrap dl{flex-direction: column; gap: var(--spacing-xs) 0; }
  .locationBox .parkingWrap dl dt{font-size: var(--Subtitle-1);}
  .locationBox .mapInfoBox{left: 20px; right:20px; bottom: 20px;}
 
}

@media (max-width: 576px){

  .locationBox .mapInfoBox dl{flex-direction: column; align-items: flex-start; gap: var(--spacing-xs) 0;}
  .locationBox .mapInfoBox dl dt{width: auto; font-size: var(--Subtitle-1);}
  .locationBox .locationInfoBox strong, .locationBox .locationInfoBox .phone{margin-bottom: var(--spacing-s); font-size: var(--H5);}
  .locationBox .locationGuideWrap .locationGuideBox{padding: 185px var(--spacing-m) var(--spacing-m);}
  .locationBox .locationGuideWrap .locationGuideBox::before{width: 117px; height: 142px; top: var(--spacing-m);}

}

@media (max-width: 480px){

  .locationBox .locationInfoWrap{flex-direction: column; gap: var(--spacing-lm) 0;}
  .locationBox .locationInfoBox strong, .locationBox .locationInfoBox .phone{font-size: var(--H6);}
  .locationBox .locationGuideBox .locationGuideList .box{padding: var(--spacing-s);}
  .locationBox .locationGuideBox .locationGuideList .box p{margin-bottom: var(--spacing-s);}
  .locationBox .locationGuideWrap .locationGuideBox{padding: 177px var(--spacing-s) var(--spacing-s);}
  .locationBox .locationGuideWrap .locationGuideBox::before{top: var(--spacing-s);}
    
}

/* 운영 및 권한 */
.accessBox .accessTopBox{margin-bottom: var(--spacing-3xl);}
.accessBox .operationBox{margin-bottom: var(--spacing-5xl);}
.accessBox .operationBox .questionText::before{position: absolute; top: -4px; left:0; content: 'Q.'; width: 40px; height: 40px; line-height: 40px; border-radius: var(--radius-xs); background-color: var(--primary-500);  color: var(--white); text-align: center;}  
.accessBox .operationBox .questionText{padding-left: var(--spacing-xl); position: relative; margin-bottom: var(--spacing-lm); color: var(--gray-400); font-size: var(--H5); font-weight: var(--bold); }
.accessBox .operationBox .questionText span{color: var(--gray-900);}
.accessBox .operationBox .questionText strong{color: var(--primary-500);}
.accessBox .operationBox dl{flex: 1; display: flex; gap: 0 var(--radius-xl);}
.accessBox .operationBox dl dt{flex-shrink: 0;}
.accessBox .operationBox dl dt h5{display: flex; align-items: center; gap: 0 var(--spacing-s); font-family: 'RiaSans'; font-size: var(--H5); color: var(--gray-900); font-weight: var(--regular);}
.accessBox .operationBox dl dt h5::before{content: ''; width: 48px; height: 48px;}
.accessBox .operationBox dl dt h5.meetingIcon01::before{background: url(../images/sub/icon01.svg)no-repeat center / contain;}
.accessBox .operationBox dl dt h5.meetingIcon02::before{background: url(../images/sub/icon02.svg)no-repeat center / contain;}
.accessBox .operationBox dl dd{width: 100%;}
.accessBox .operationBox dl dd p{margin-bottom: var(--spacing-s); color: var(--gray-600);}
.accessBox .operationBox dl dd .list01{padding: var(--spacing-s); border-radius: var(--radius-xs); background-color: var(--gray-50);}
.accessBox .operationBox dl dd .list01 > li{margin-bottom: var(--spacing-s);}
.accessBox .operationBox dl dd .list01 > li:last-child{margin-bottom: 0;}
.accessBox .operationBox dl dd .list01 li h6{margin-bottom: var(--spacing-2xs); color: var(--gray-600); font-weight: var(--semi-bold); font-size: var(--font-size-m);}
.accessBox .operationBox dl dd .list02 li{margin-bottom: var(--spacing-xs); font-size: var(--body-2);}
.accessBox .operationBox dl dd .list02 li:last-child{margin-bottom: 0;}
.accessBox .operationBox .operationInfoList > li{margin-bottom: var(--spacing-2xl); display: flex; align-items: flex-start; gap: 0 var(--spacing-2xl);}
.accessBox .operationBox .operationInfoList > li:last-child{margin-bottom: 0;}
.accessBox .operationBox .operationList > li{padding: var(--spacing-ml) var(--spacing-m) var(--spacing-m);  margin-bottom: var(--spacing-s); border-radius: var(--radius-m); border: 1px solid var(--gray-600); box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.accessBox .operationBox .operationList li h5{margin-bottom: var(--spacing-m); font-family: 'RiaSans'; font-size: var(--H5); color: var(--gray-900); font-weight: var(--regular);}
.accessBox .operationBox .operationList li p{margin-bottom: var(--spacing-s); color: var(--gray-600); word-break: keep-all;}
.accessBox .operationBox .operationList li .tagList{display: flex; flex-wrap: wrap; gap: var(--spacing-xs);}
.accessBox .operationBox .operationList li .tagList .tag{ padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--primary-50); border: 1px solid var(--primary-200); color: var(--primary-700); font-weight: var(--semi-bold); border-radius: 0 0 0 var(--spacing-xs); font-size: var(--font-size-xs);}
.accessBox .councilAuthorityWrap{margin-bottom: var(--spacing-5xl);}
.accessBox .councilAuthorityBox{padding: var(--spacing-2xl) var(--spacing-lm); display: flex; gap: 0 var(--spacing-5xl); border-radius: var(--radius-l); background-color: var(--gray-50);} 
.accessBox .councilAuthorityBox .title{display: flex; flex-direction: column; flex-shrink: 0; font-size: var(--H4); color: var(--gray-900); font-family: 'RiaSans';}
.accessBox .councilAuthorityBox .title::after{content: '';margin: 0 auto; width: 265px; height: 223px; margin-top: auto; background: url(../images/sub/building_img.png)no-repeat center / contain;}
.accessBox .councilAuthorityBox .bulletTitle{margin-bottom: var(--spacing-s);}
.accessBox .councilAuthorityBox .authorityList li{margin-bottom: var(--spacing-lm);}
.accessBox .councilAuthorityBox .authorityList li:last-child{margin-bottom: 0;}
.accessBox .councilAuthorityBox .authorityList li p{ color: var(--gray-600);}
.accessBox .councilAuthorityBox .authorityList li p strong{display: block; margin-bottom: var(--spacing-xs);}
.accessBox .localAuthorityWrap{display: flex; }
.accessBox .localAuthorityBox h4{flex-shrink: 0;}
.accessBox .localAuthorityBox{width: 50%; display: flex; gap: 0 var(--spacing-2xl);}
.accessBox .localAuthorityBox .localAuthorityList > li{margin-bottom: var(--spacing-ml);}
.accessBox .localAuthorityBox .localAuthorityList li:last-child{margin-bottom: 0;}
.accessBox .localAuthorityBox .localAuthorityList li h5{padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs) var(--spacing-xs); display: inline-flex; align-items: center; gap: 0 var(--spacing-xs); margin-bottom: var(--spacing-s); color: var(--gray-900); font-weight: var(--semi-bold); font-size: var(--font-size-l); border: 1px solid var(--gray-600); border-radius: var(--radius-xs);}
.accessBox .localAuthorityBox .localAuthorityList li h5::before{content: ''; width: 32px; height: 32px; background: url(../images/sub/icon.svg)no-repeat center / contain; }

@media (max-width: 1280px){

  .accessBox .operationBox,
  .accessBox .councilAuthorityWrap{margin-bottom: var(--spacing-3xl);}

}

@media (max-width: 1024px){

  .accessBox .councilAuthorityBox{flex-direction: column; align-items: center; gap: var(--spacing-5xl) 0;}
  .accessBox .councilAuthorityBox .title{gap: var(--spacing-lm) 0; text-align: center;}

  .accessBox .localAuthorityWrap{flex-direction: column; gap: var(--spacing-2xl) 0;}
  .accessBox .localAuthorityBox{width: 100%;}

}

@media (max-width: 768px){
  .accessBox .accessTopBox .tit{margin-bottom: 10px;}
  .accessBox .operationBox dl dt h5{gap: 0 var(--spacing-xs);}
  .accessBox .operationBox .operationList li h5,
  .accessBox .operationBox dl dt h5,
  .accessBox .operationBox .questionText{font-size: var(--H6);}
  .accessBox .operationBox dl{flex-direction: column; gap: var(--spacing-s) 0;}
  .accessBox .operationBox .operationInfoList > li{margin-bottom: var(--spacing-lm);}
  .accessBox .operationBox, .accessBox .councilAuthorityWrap{margin-bottom: var(--spacing-2xl);}
  .accessBox .operationBox .operationList li h5{margin-bottom: var(--spacing-s);}
  .accessBox .councilAuthorityBox{padding: var(--spacing-lm) var(--spacing-ms); gap: var(--spacing-3xl) 0;}
  .accessBox .localAuthorityBox .localAuthorityList li h5{font-size: var(--font-size-m);}
  .accessBox .localAuthorityBox .localAuthorityList li h5::before{width: 28px; height: 25px;}
  .accessBox .operationBox dl dt h5::before{width: 36px; height: 36px;}

}

@media (max-width: 576px){

  .accessBox .operationBox .questionText{margin-bottom: var(--spacing-m);}

}

@media (max-width: 480px){

  .accessBox .councilAuthorityBox .title{font-size: var(--H5);}
  .accessBox .councilAuthorityBox .title::after{width: 248px; height: 209px;}
  .accessBox .localAuthorityBox{flex-direction: column;}
  .accessBox .localAuthorityBox h4 br{display: none;}

}

/* 의안처리 */
.billBox .billTopBox{margin-bottom: var(--spacing-2xl); display: flex; justify-content: center; align-items: flex-start; gap: 0 var(--spacing-2xl);}
.billBox .caseLayoutBox{padding-top: 50px; display: flex; gap: 0 var(--spacing-lm); border-top: 2px solid var(--gray-900);}
.billBox .caseBox{position: relative; width: 50%;}
.billBox .caseBox::before{width: 28px; height: 28px; content: ''; position: absolute; top:-37px; left: 50%; transform: translateX(-50%); background: url(../images/sub/arrow_icon.svg)no-repeat center / contain;}
.billBox .caseBox .caseTitleBox{margin-bottom: var(--spacing-xs); height: 60px; display: flex; align-items: center; justify-content: center; gap: 0 var(--spacing-xs); border-radius: var(--radius-m);}
.billBox .caseBox .caseTitleBox .case{ font-size: var(--body-2);}
.billBox .caseBox .caseTitleBox h5{color: var(--white); font-size: var(--H6);}
.billBox .caseBox .caseList > li{margin-bottom: var(--spacing-xs); padding: var(--spacing-m) var(--spacing-s); border-radius: var(--radius-m); }
.billBox .caseBox .caseList > li:last-child{margin-bottom: 0;}
.billBox .caseBox .caseList li .stepBox{min-height: 42px; padding: var(--spacing-xs) var(--spacing-s); display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; gap: var(--spacing-xs); border-radius: var(--radius-s);}
.billBox .caseBox .caseList li .stepBox .step{font-size: var(--body-2); font-weight: var(--bold);}
.billBox .caseBox .caseList li .stepBox h6{color: var(--white); font-size: var(--body-1);}
.billBox .caseBox .caseList li .bulletIcon{margin-top: var(--spacing-s); }
.billBox .caseBox.caseBoxType01 .caseList > li{border: 2px solid var(--primary-700);}
.billBox .caseBox.caseBoxType01 .caseTitleBox{background-color: var(--primary-900);}
.billBox .caseBox.caseBoxType01 .caseTitleBox .case{color: var(--primary-200);}
.billBox .caseBox.caseBoxType01 .caseList li .stepBox{background-color: var(--primary-700);}
.billBox .caseBox.caseBoxType01 .caseList li .stepBox .step{color: var( --primary-200);}
.billBox .caseBox.caseBoxType02 .caseList > li{border: 2px solid var(--secondary-700);}
.billBox .caseBox.caseBoxType02 .caseTitleBox{background-color: var(--secondary-900);}
.billBox .caseBox.caseBoxType02 .caseTitleBox .case{color: var(--secondary-200);}
.billBox .caseBox.caseBoxType02 .caseList li .stepBox{background-color: var(--secondary-700);}
.billBox .caseBox.caseBoxType02 .caseList li .stepBox .step{color: var(--secondary-200);}
.billBox .caseBox.caseBoxType02 .caseList > li.stepList05{margin-top: 44px; padding: 0; display: flex; align-items: flex-start; gap: 0 var(--spacing-xs); border: 0;}
.billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box{position: relative; padding: var(--spacing-m) var(--spacing-s); flex: 1; border: 2px solid var(--secondary-700); border-radius: var(--radius-m);}
.billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box::before{content: ''; width: 28px; height: 28px; position: absolute; top:-37px; left: 50%; transform: translateX(-50%); background: url(../images/sub/arrow_icon.svg)no-repeat center / contain;}
.billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box .stepBox{background-color: var(--secondary-900);}
.billBox .processList li .step.step01::after{background: url(../images/sub/step_icon01.svg)no-repeat center / contain;}
.billBox .processList li .step.step02::after{background: url(../images/sub/step_icon02.svg)no-repeat center / contain;}
.billBox .processList li .step.step03::after{background: url(../images/sub/step_icon03.svg)no-repeat center / contain;}
.billBox .processList li .step.step04::after{background: url(../images/sub/step_icon04.svg)no-repeat center / contain;}
.billBox .processList li .step.step05::after{background: url(../images/sub/step_icon05.svg)no-repeat center / contain;}
.billBox .processList li .step.step06::after{background: url(../images/sub/step_icon06.svg)no-repeat center / contain;}
.billBox .processList li .step.step07::after{background: url(../images/sub/step_icon07.svg)no-repeat center / contain;}

@media (max-width: 1024px){

  .billBox .billTopBox{flex-direction: column; gap: var(--spacing-m) 0;}
  .billBox .caseLayoutBox{flex-direction: column; gap: var(--spacing-lm) 0;}
  .billBox .caseBox{width: 100%;}
  .billBox .caseBox::before{top:0; left:0; transform: none;}
  .billBox .caseLayoutBox{padding: var(--spacing-s) 0 0 var(--spacing-ml);}
  .billBox .caseBox::before{top: 13px; left:-31px; transform: rotate(-90deg);}

}

@media (max-width: 768px){

  .billBox .caseBox.caseBoxType02 .caseList > li.stepList05{margin: 0 0 0 36px; flex-direction: column; gap: var(--spacing-xs) 0;}
  .billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box::before{top: 0; left:-38px; transform: rotate(-90deg)}
  .billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box{width: 100%;}

}

@media (max-width: 576px){

  .billBox .caseBox .caseTitleBox h5{font-size: var(--Subtitle-1);}

}

@media (max-width: 480px){

  .billBox .caseLayoutBox{padding: var(--spacing-s) 0 0 var(--spacing-m);}
  .billBox .caseBox::before{top: 17px; left: -24px; width: 20px; height: 20px;}
  .billBox .caseBox .caseList > li{padding: var(--spacing-s);}
  .billBox .caseBox.caseBoxType02 .caseList > li.stepList05{margin: 0 0 0 28px;}
  .billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box::before{left: -30px; width: 20px; height: 20px;}
  .billBox .caseBox.caseBoxType02 .caseList > li.stepList05 .box{padding: var(--spacing-s);}

}

/* 공통 - 절차 */
.processList > li{min-height: 107px; position: relative; margin-bottom: var(--spacing-2xl); display: flex; align-items: flex-start; gap: 0 var(--spacing-m);}
.processList > li::after{content: ''; position: absolute; top:100px; left:37px; bottom: -58px; width: 4px; background-color: var(--gray-100);}
.processList > li:last-child:after{display: none;}
.processList > li:last-child{margin-bottom: 0;}
.processList li .step{flex-direction: column; display: flex; align-items: center; gap: var(--spacing-xs) 0 ; width: 80px; flex-shrink: 0; color: var(--primary-800); font-weight: var(--semi-bold);}
.processList li .step::after{content: ''; width: 72px; height: 72px;}
.processList li .processContentBox h4{margin-bottom: var(--spacing-s); font-size: var(--H6); font-weight: var(--bold); color: var(--gray-900);}
.processList li .processContentBox .processList02{margin-top: var(--spacing-m);}
.processList li .processContentBox .processList02 > li{margin-bottom: var(--spacing-s); }
.processList li .processContentBox .processList02.arrowIcon > li{position: relative; margin-left: var(--spacing-lm);}
.processList li .processContentBox .processList02.arrowIcon > li::before{content: ''; width: 40px; height: 19px; position: absolute; top:6px; left:-40px; background: url(../images/sub/arrow_icon.svg)no-repeat center / contain; transform: rotate(-90deg);}
.processList li .processContentBox .processList02 li em{font-style: normal;}
.processList li .processContentBox .processList02 li em,
.processList li .processContentBox .processList02 li h5{display: inline-block; padding: var(--spacing-xs); color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--semi-bold); background-color: var(--gray-100); border-radius: var(--radius-xs);}
.processList li .processContentBox .processListBox{justify-self: flex-start; margin: var(--spacing-s) 0; padding: var(--spacing-m); border-radius: var(--spacing-ms); }
.processList li .processContentBox .processListBox .list{margin: var(--spacing-xs) 0;}
.processList li .processContentBox .processListBox .list li{color: var(--gray-600); font-size: var(--font-size-s);}
.processList li .processContentBox .processListBox h6{color: var(--gray-900); font-size: var(--Subtitle-1);}
.processList li .processContentBox .processListBox.listType01{border: 1px solid var(--gray-600); box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.processList li .processContentBox .processListBox.listType01 h6{margin-bottom: var(--spacing-s);}
.processList li .processContentBox .processListBox.listType02{background-color: var(--primary-50); border: 2px solid var(--primary-700);}
.processList li .processContentBox .processListBox.listType02 h6{margin-bottom: var(--spacing-xs);}

@media (max-width: 768px){

  .processList li .processContentBox h4{font-size: var(--Subtitle-1);}
  .processList li .processContentBox .processListBox h6{font-size: var(--Subtitle-2);}
  .processList li .processContentBox .processList02{margin-top: var(--spacing-s)}
  .processList li .processContentBox .processListBox{padding: var(--spacing-s);}

}

@media (max-width: 480px){

  .processList > li{min-height: 96px; gap: 0 var(--spacing-s);}
  .processList li .step::after{width: 56px; height: 56px;}
  .processList li .bulletIcon li br{display: none;}

}

/* 청원/진정 */
.petitionBox .arrowList{max-width: 860px; margin-bottom: var(--spacing-s); display: flex; flex-wrap: wrap; gap: var(--spacing-xs) 0;}
.petitionBox .arrowList li{position: relative; display: flex; gap: var(--spacing-xs) 0; flex-wrap: wrap; align-items: center;}
.petitionBox .arrowList li span{padding: var(--spacing-2xs) var(--spacing-xs);  display: block; background-color: var(--gray-100); border-radius: var(--radius-xs); font-weight: var(--medium); color: var(--gray-900);}
.petitionBox .arrowList li::after{content: ''; flex-shrink: 0; margin: 0 var(--spacing-xs); width: 12px; height: 11px; background: url(../images/sub/arrow_icon03.svg)no-repeat center / contain;}
.petitionBox .arrowList li:last-child:after{display: none;}
.petitionBox .arrowList li.decision span{background-color: var(--primary-500); color: var(--white);}
.petitionBox .petitionTopBox{margin-bottom: var(--spacing-3xl);}
.petitionBox .processList > li{margin-bottom: var(--spacing-3xl);}
.petitionBox .processList li .petitionList > li{margin-bottom: var(--spacing-m); position: relative; padding-left: var(--spacing-m);}
.petitionBox .processList li .petitionList > li:last-child{margin-bottom: 0;}
.petitionBox .processList li .petitionList > li::before{content: ''; width: 16px; height: 16px; position: absolute; top:8px; left:0; background: url(../images/sub/arrow_icon.svg)no-repeat center / contain; transform: rotate(-90deg);}
.petitionBox .bulletDot li{margin-bottom: var(--spacing-xs);}
.petitionBox .bulletDot li:last-child{margin-bottom: 0;}
.petitionBox .petitionInfoText{display: inline-flex; align-items: center; gap: 0 var(--spacing-2xs); padding: var(--spacing-xs); border-radius: var(--radius-s); border: 1px solid var(--gray-100); color: var(--gray-900); font-size: var(--font-size-s); font-family: 'RiaSans'; box-shadow: 0 4px 40px rgba(0,0,0,.1);}
.petitionBox .petitionInfoText::before{content: ''; width: 20px; height: 20px; background: url(../images/sub/accent_icon.svg)no-repeat center / contain;}
.petitionBox .processList li:nth-child(1) .step::after{background: url(../images/sub/step_icon08.svg)no-repeat center / contain;}
.petitionBox .processList li:nth-child(2) .step::after{background: url(../images/sub/step_icon02.svg)no-repeat center / contain;}
.petitionBox .processList li:nth-child(3) .step::after{background: url(../images/sub/step_icon09.svg)no-repeat center / contain;}
.petitionBox .processList li:nth-child(4) .step::after{background: url(../images/sub/step_icon10.svg)no-repeat center / contain;}
.petitionBox .processList li:nth-child(5) .step::after{background: url(../images/sub/step_icon11.svg)no-repeat center / contain;}
.petitionBox .processList li:nth-child(6) .step::after{background: url(../images/sub/step_icon12.svg)no-repeat center / contain;}
.petitionBox .bulletIcon li .primaryColor{color: var(--primary-500);}

@media (max-width: 768px){

  .petitionBox .petitionTopBox .tit{margin-bottom: 10px;}
  .petitionBox .petitionTopBox{margin-bottom: var(--spacing-2xl);}

}

@media (max-width: 480px){

  .petitionBox .arrowList li span{font-size: var(--font-size-s);}

}

/* 예산심의 */
.budgetBox .budgetTopBox{position: relative; margin-bottom: 94px; height: 278px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(
  90deg,#FEFEFE 0%,#FAFAFA 50%,#FEFEFE 100%);}
.budgetBox .budgetTopBox .logoBox{margin-bottom: var(--spacing-m);}
.budgetBox .budgetTopBox h3{margin-bottom: var(--spacing-xs); color: var(--gray-900); font-size: var(--H6);}
.budgetBox .budgetTopBox span{color: var(--gray-600);}
.budgetBox .budgetTopBox::after{content: ''; width: 28px; height: 28px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -62px; background: url(../images/sub/arrow_icon.svg)no-repeat center / contain;}
.budgetBox .processLayoutBox{position: relative; max-width: 800px; margin: 0 auto 94px; padding: var(--spacing-lm); display: flex; gap: 0 var(--spacing-2xl); border: 1px solid var(--gray-600); border-radius: var(--radius-m); box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.budgetBox .processLayoutBox::after{content: ''; width: 28px; height: 28px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -62px; background: url(../images/sub/arrow_icon.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(1) span::after{background: url(../images/sub/step_icon08.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(2) span::after{background: url(../images/sub/step_icon02.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(3) span::after{background: url(../images/sub/step_icon10.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(4) span::after{background: url(../images/sub/step_icon11.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(5) span::after{background: url(../images/sub/step_icon04.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(6) span::after{background: url(../images/sub/step_icon12.svg)no-repeat center / contain;}
.budgetBox .processList li:nth-child(7) span::after{background: url(../images/sub/step_icon07.svg)no-repeat center / contain;}
.budgetBox .noticeBox{max-width: 800px; margin: 0 auto; text-align: center;}
.budgetBox .noticeBox h5{margin-bottom: var(--spacing-m); display: flex; align-items: center; justify-content: center; height: 60px; border-radius: var(--radius-m); background-color: var(--primary-900); color: var(--white); font-size: var(--H6);}
.budgetBox .noticeBox .box{display: inline-block; padding-left: 96px; position: relative;}
.budgetBox .noticeBox .box h6{margin-bottom: var(--spacing-s); color: var(--gray-900); font-size: var(--H6); text-align: left;}
.budgetBox .noticeBox .box::before{content: ''; left:0; position: absolute; top: 50%; transform: translateY(-50%); width: 72px; height: 72px; background: url(../images/sub/icon01.svg)no-repeat center / contain;}
.budgetBox .noticeBox .box .bulletIcon li{text-align: left;}

@media (max-width: 1024px){

  .budgetBox .processLayoutBox{flex-direction: column; gap: var(--spacing-m) 0;}

}

@media (max-width: 768px){

  .budgetBox .budgetTopBox{height: 230px;}
  .budgetBox .processLayoutBox{padding: var(--spacing-ms);}

}

@media (max-width: 576px){

  .budgetBox .noticeBox .box h6{font-size: var(--body-1);}

}

@media (max-width: 480px){

  .budgetBox .budgetTopBox{height: 215px;}
  .budgetBox .budgetTopBox .logoBox img{width: 160px;}
  .budgetBox .processLayoutBox{padding: 0; border: 0; box-shadow: none;}
  .budgetBox .noticeBox h5{font-size: var(--font-size-l);}
  .budgetBox .processLayoutBox::after{bottom: -56px;}

}

/* 행정사무감사 */
.administrationBox .tit{margin-bottom: var(--spacing-xs);}
.administrationBox .processLayoutBox{margin-top: var(--spacing-3xl); display: flex; gap: 0 var(--spacing-2xl);}
.administrationBox .processList li:nth-child(1) .step::after{background: url(../images/sub/step_icon13.svg)no-repeat center / contain;}
.administrationBox .processList li:nth-child(2) .step::after{background: url(../images/sub/step_icon11.svg)no-repeat center / contain;}
.administrationBox .processList li:nth-child(3) .step::after{background: url(../images/sub/step_icon12.svg)no-repeat center / contain;}

@media (max-width: 1024px){

  .administrationBox .tit br{display: none;}
  .administrationBox .processLayoutBox{flex-direction: column; gap: var(--spacing-m) 0;}

}

@media (max-width: 480px){

 .administrationBox .processList > li{gap: 0 var(--spacing-s);}

}

/* 회기/소집 */
.convocationBox .assemblyBox{margin-bottom: var(--spacing-3xl); position: relative; display: flex; align-items: center; gap: 0 var(--spacing-lm);}
.convocationBox .assemblyBox::after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); right:0; width: 149px; height: 168px; background: url(../images/sub/model.png)no-repeat center / contain;}
.convocationBox .assemblyBox h4{display: flex; align-items: center; justify-content: center; width: 248px; height: 248px; border-radius: var(--radius-xl); font-size: var(--H1); font-family: 'RiaSans'; box-shadow: 10px 10px 40px rgba(0,0,0,.1); color: var(--white); font-weight: var(--regular); background: radial-gradient(circle at 50% 50%, #5EAE68 0%, #61B26B 22%,
  #66BE72 48%, #69C374 72%, #6DC878 100%);} 
.convocationBox .assemblyBox .text01{margin-bottom: var(--spacing-s); color: var(--gray-600); font-size: var(--font-size-xxxl); font-weight: var(--semi-bold); line-height: 1.6;}
.convocationBox .assemblyBox .text02{color: var(--gray-600);}
.convocationBox .sessionBox01 .sessionMeetingBox{max-width: 664px; margin: 0 auto;}
.convocationBox .sessionBox01{margin-bottom: var(--spacing-2xl); padding: var(--spacing-2xl) var(--spacing-ms); border: 1px solid var(--gray-600); border-radius: var(--radius-m); box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.convocationBox .sessionBox01 .meetingInfoBox01{margin-bottom: var(--spacing-s); display: flex; gap: 0 var(--spacing-s); align-items: flex-end;}
.convocationBox .sessionBox01 .meetingInfoBox01 strong{font-size: var(--H4); color: var(--gray-900);}
.convocationBox .sessionBox01 .meetingInfoBox01 p{color: var(--gray-600); font-weight: var(--medium);}
.convocationBox .sessionBox01 .meetingInfoBox01 p span{color: var(--primary-500);}
.convocationBox .sessionBox01 .meetingInfoBox02{display: flex; gap: 0 var(--spacing-xs);}
.convocationBox .sessionBox01 .meetingInfoBox02 .meeting01{max-width: 492px; width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; font-weight: var(--bold); color: var(--white); border-radius: var(--radius-m); background: linear-gradient(to right, var(--primary-500), var(--gray-600));}
.convocationBox .sessionBox01 .meetingInfoBox02 .meeting02{max-width: 164px; width: 100%; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: var(--medium); color: var(--gray-600); border-radius: var(--radius-m); background: var(--gray-100);}
.convocationBox .sessionBox01 .meetingInfoBox02 .meeting02 strong{display: block;}
.convocationBox .sessionBox01 .sessionPeriodBox{max-width: 664px; margin: 0 auto var(--spacing-2xl); padding-bottom: var(--spacing-lm); border-bottom: 1px solid var(--gray-100);}
.convocationBox .sessionBox01 .sessionPeriodBox h4{font-size: var(--H4); color: var(--gray-900); text-align: center;}
.convocationBox .sessionBox01 .sessionPeriodBox p{text-align: center; color: var(--gray-600); font-size: var(--font-size-xxxl); font-weight: var(--semi-bold); line-height: 1.6;}
.convocationBox .sessionBox01 .sessionPeriodBox p span{display: block; margin-top: var(--spacing-s); font-size: var(--body-1); font-weight: var(--regular);}
.convocationBox .sessionBox01 .sessionPeriodBox img{ max-width: 100%; margin: var(--spacing-m) auto var(--spacing-lm);}
.convocationBox .sessionBox01 .sessionPeriodBox img.pc{display: block;}
.convocationBox .sessionBox01 .sessionPeriodBox img.tablet{display: none;}
.convocationBox .sessionBox01 .sessionPeriodBox img.mobile{display: none;}
.convocationBox .sessionBox02{margin-bottom: var(--spacing-3xl);}
.convocationBox .sessionBox02 h4{margin-bottom: var(--spacing-m); font-size: var(--font-size-xxxl); font-weight: var(--semi-bold); text-align: center;}
.convocationBox .sessionBox02 .sessionCompare {display: grid; grid-template-columns: 132px 1fr 132px; align-items: stretch; max-width: 1200px; margin: 0 auto;}
.convocationBox .sessionBox02 .sideLabel{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-s) 0; font-family: 'RiaSans';
  font-size: var(--H4); color: var(--gray-900);}
.convocationBox .sessionBox02 .sideLabel::before{content: ''; width:48px; height: 48px;}
.convocationBox .sessionBox02 .sideLabel.leftLabel::before{background: url(../images/sub/icon02.svg)no-repeat center / contain;}
.convocationBox .sessionBox02 .sideLabel.rightLabel::before{background: url(../images/sub/icon03.svg)no-repeat center / contain;}
.convocationBox .sessionBox02 .centerTable{max-width: 814px; margin: 0 auto; display: grid; grid-template-rows: repeat(2, auto); background: var(--white);}
.convocationBox .sessionBox02 .tableRow{margin-bottom: -1px; display: grid; grid-template-columns: 1fr 66px 1fr; align-items: center; border: 1px dashed var(--gray-200); border-width: 1px 0;}
.convocationBox .sessionBox02 .leftValue,
.convocationBox .sessionBox02 .middleLabel,
.convocationBox .sessionBox02 .rightValue {display: flex; align-items: center}
.convocationBox .sessionBox02 .middleLabel{padding: var(--spacing-2xs) var(--spacing-xs); background: var(--gray-100); border-radius: var(--radius-xs); font-weight: var(--semi-bold); color: var(--gray-600); font-size: var(--font-size-s);}
.convocationBox .sessionBox02 .leftValue{display: flex; gap: 0 var(--spacing-xs); justify-content: flex-end; padding: var(--spacing-ms) var(--spacing-lm);}
.convocationBox .sessionBox02 .rightValue{display: flex; gap: 0 var(--spacing-xs); justify-content: flex-start; padding: var(--spacing-ms) var(--spacing-lm);}
.convocationBox .sessionBox02 .leftValue,
.convocationBox .sessionBox02 .rightValue{font-size: var(--Subtitle-1);}
.convocationBox .sessionBox02 .middleLabel{min-height: 32px; justify-content: center; line-height: 1.4;}
.convocationBox .sessionBox02 .middleLabel br{display: none;}
.convocationBox .sessionBox02 .leftValue::after{content: ''; margin-top: 1px; width: 8px; height: 8px;  border-radius: var(--radius-s); background-color: var(--primary-500);}
.convocationBox .sessionBox02 .rightValue::before{content: ''; margin-top: 1px; width: 8px; height: 8px;  border-radius: var(--radius-s); background-color: var(--secondary-500);}
.convocationBox .convocationMeetingBox{margin-bottom: var(--spacing-3xl);}
.convocationBox .convocationMeetingBox .meetingLayoutBox{margin-bottom: var(--spacing-m); padding: var(--spacing-2xl) var(--spacing-m); display: flex; justify-content: center; gap: 0 var(--spacing-3xl); background: linear-gradient(90deg, #FEFEFE 0%, #FAFAFA 50%, #FEFEFE 100%);}
.convocationBox .convocationMeetingBox .arrow{width: 28px; height: 28px; background: url(../images/sub/arrow_icon.svg) no-repeat center / contain; transform: rotate(-90deg);}
.convocationBox .convocationMeetingBox h5{margin-bottom: var(--spacing-m); font-size: var(--H4); color: var(--gray-900); text-align: center;}
.convocationBox .convocationMeetingBox .meetingContentList{display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacing-2xs);}
.convocationBox .convocationMeetingBox .meetingContentList li{display: flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--spacing-xs); border-radius: var(--spacing-xs); font-weight: var(--semi-bold); color: var(--white); background-color: var(--primary-500);}
.convocationBox .convocationMeetingBox p{text-align: center; font-size: var(--font-size-xl); color: var(--gray-600);}
.convocationBox .flowSection{margin-bottom: var(--spacing-3xl);}
.convocationBox .flowSection:nth-last-of-type(2){margin-bottom: var(--spacing-lm);}
.convocationBox .flowSection .bulletTitle{margin-bottom: var(--spacing-m);}
.convocationBox .flowSection .flowList{display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-s);}
.convocationBox .flowSection .flowList > li{padding: var(--spacing-m); border: 1px solid var(--gray-600); border-radius: var(--radius-m); box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.convocationBox .flowSection .flowList li h5{margin-bottom: var(--spacing-s); font-size: var(--Subtitle-1); color: var(--gray-900);}
.convocationBox .supplementBox .bulletIcon li{margin: 0; padding: var(--spacing-ms) var(--spacing-ms) var(--spacing-ms) var(--spacing-s); border-bottom: 1px dashed var(--gray-200);}
.convocationBox .supplementBox .bulletIcon li:last-child{border-bottom: 0;}
.convocationBox .supplementBox .bulletIcon > li::before{top: 19px;}

@media (max-width: 1280px){

  .convocationBox .assemblyBox h4{width: 200px; height: 200px;}

}

@media (max-width: 1024px){

  .convocationBox .assemblyBox::after{width: 112px; height: 126px;}
  .convocationBox .sessionBox01{padding: var(--spacing-lm) var(--spacing-ms);}
  .convocationBox .sessionBox02 .sessionCompare { grid-template-columns: 1fr 1fr;
    grid-template-areas: "leftLabel rightLabel"  "centerTable centerTable";
   gap: var(--spacing-lm) 0;}
  .convocationBox .sessionBox02 .leftLabel{grid-area: leftLabel;}
  .convocationBox .sessionBox02 .rightLabel{grid-area: rightLabel;}
  .convocationBox .sessionBox02 .centerTable {grid-area: centerTable; max-width: 100%;}
  .convocationBox .sessionBox02 .sideLabel{ justify-content: center;}
  .convocationBox .sessionBox02 .leftValue::after,
  .convocationBox .sessionBox02 .rightValue::before{display: none;}
  .convocationBox .sessionBox02 .leftValue,
  .convocationBox .sessionBox02 .rightValue{display: block; padding: var(--spacing-ms); text-align: center;}
  .convocationBox .sessionBox02 .centerTable{width: 100%;}

  .convocationBox .convocationMeetingBox .meetingContentList li{min-height: 34px;}

}

@media (max-width: 768px){

  .convocationBox .assemblyBox{padding-bottom: 166px; flex-direction: column; text-align: center;}
  .convocationBox .assemblyBox h4{margin-bottom: var(--spacing-m); width: 140px; height: 140px; border-radius: var(--radius-xl); font-size: var(--H4);}
  .convocationBox .assemblyBox .text01{font-size: var(--font-size-xl);}
  .convocationBox .assemblyBox::after{right: auto; top: auto; bottom: 0; left: 50%; transform: translateX(-50%);}

  .convocationBox .sessionBox01 .sessionPeriodBox{margin: 0 auto var(--spacing-lm);}
  .convocationBox .sessionBox01 .sessionPeriodBox img{margin: var(--spacing-m) auto;}
  .convocationBox .sessionBox01 .sessionPeriodBox img.pc{display: none;}
  .convocationBox .sessionBox01 .sessionPeriodBox img.tablet{display: block;}

  .convocationBox .sessionBox01 .sessionPeriodBox h4{font-size: var(--H5);}
  .convocationBox .sessionBox01 .sessionPeriodBox p{font-size: var(--font-size-xl);}
  .convocationBox .sessionBox01 .meetingInfoBox01 strong{font-size: var(--font-size-xxxl);}
  .convocationBox .sessionBox01 .meetingInfoBox02{flex-direction: column; gap: var(--spacing-xs ) 0;}
  .convocationBox .sessionBox01 .meetingInfoBox02 .meeting01{max-width: none;}

  .convocationBox .sessionBox02 h4{font-size: var(--font-size-xl);}
  .convocationBox .sessionBox02 .sideLabel{font-size: var(--H5);}

  .convocationBox .convocationMeetingBox .meetingLayoutBox{flex-direction: column; align-items: center; gap: var(--spacing-m) 0;}
  .convocationBox .convocationMeetingBox .arrow{transform: none;}
  .convocationBox .convocationMeetingBox h5{font-size: var(--H5);}
  .convocationBox .convocationMeetingBox p{font-size: var(--font-size-m);}
  .convocationBox .convocationMeetingBox p br{display: none;}

  .convocationBox .flowSection .flowList{grid-template-columns: repeat(2, 1fr)}
  .convocationBox .flowSection .flowList > li{padding: var(--spacing-s);}
  
}

@media (max-width: 576px){

  .convocationBox .sessionBox01 .meetingInfoBox01{flex-direction: column; gap: var(--spacing-s) 0; align-items: center;}
  .convocationBox .sessionBox01 .meetingInfoBox01{margin-bottom: var(--spacing-xs);}

}

@media (max-width: 480px){

  .convocationBox .assemblyBox .text01{font-size: var(--font-size-l);}
  .convocationBox .sessionBox01{padding: var(--spacing-m) var(--spacing-ms);}
  .convocationBox .sessionBox01 .sessionPeriodBox p{font-size: var(--font-size-l);}
  .convocationBox .sessionBox01 .sessionPeriodBox img.tablet{display: none;}
  .convocationBox .sessionBox01 .sessionPeriodBox img.mobile{display: block;}
  .convocationBox .sessionBox01 .meetingInfoBox01 p{font-size: var(--font-size-s);}
  .convocationBox .sessionBox02 .leftValue,
  .convocationBox .sessionBox02 .rightValue{font-size: var(--body-2);}
  .convocationBox .sessionBox02 .tableRow{grid-template-columns: 1fr 40px 1fr;}
  .convocationBox .sessionBox02 .middleLabel br{display: block;}

  .convocationBox .convocationMeetingBox .meetingLayoutBox{padding: var(--spacing-m);}

  .convocationBox .flowSection .flowList{grid-template-columns: 1fr; gap: var(--spacing-xs);}
  .convocationBox .flowSection .flowList > li{padding: var(--spacing-s);}
  .convocationBox .flowSection .flowList li h5{font-size: var(--Subtitle-2);}
  .convocationBox .supplementBox .bulletIcon > li::before{top: 17px;}

}

/* 만화로 보는 화천군의회 */
.comicsBox .comicsContentBox{position: relative; flex-shrink: 1; max-width: 774px; width: 100%; background-color: var(--gray-50); }
.comicsBox .comicsContentBox::before,
.comicsBox .comicsContentBox::after {content: ''; position: absolute; left: 0;
  right: 0; bottom: 0;}
.comicsBox .comicsContentBox::before {left: 0; right: 0; bottom: 0; height: 132px;
  z-index: 9; background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 20%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0.18) 68%,
    rgba(255, 255, 255, 0.34) 100%
  );
  box-shadow:
    inset 0 -34px 48px rgba(255, 255, 255, 0.24),
    inset 0 -14px 24px rgba(255, 255, 255, 0.18);}
.comicsBox .comicsContentBox::after {left: 0; right: 0; bottom: 0; height: 110px;
  z-index: 3; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 22%,
    rgba(0, 0, 0, 0.34) 55%,
    rgba(0, 0, 0, 0.75) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.12) 22%,
    rgba(0, 0, 0, 0.34) 55%,
    rgba(0, 0, 0, 0.75) 100%
  );}
.comicsBox .comicsContentBox.isEnd::before,
.comicsBox .comicsContentBox.isEnd::after {display: none;}
.comicsBox .comicsContentBox .comicsList{padding: var(--spacing-2xl); height: 1076px; overflow-y:auto;}
.comicsBox .comicsContentBox .comicsList li{position: relative; box-shadow: 10px 10px 40px rgba(0,0,0,.1);}
.comicsBox .comicsContentBox .comicsList li .number{min-width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; position: absolute; top:0; right:0; border-radius: var(--radius-2xs); border: 1px solid var(--gray-600); font-size: var(--Caption); background-color: var(--white); font-weight: var(--semi-bold);}
.comicsBox .comicsLayoutBox{display: flex; gap: 0 var(--spacing-3xl)}
.comicsBox .comicsTextBox{flex: 1;}
.comicsBox .comicsTextBox h3{padding: var(--spacing-2xs) var(--spacing-xs); display: inline-block; margin-bottom: var(--spacing-xs); font-weight: var(--semi-bold); font-size: var(--font-size-xs); color: var(--primary-700); border: 1px solid var(--primary-200); border-radius: 0 0 0 var(--radius-xs); background-color: var(--primary-50);}
.comicsBox .comicsTextBox .text01{margin-bottom: var(--spacing-m); font-weight: var(--bold); font-size: var(--font-size-xxxl); color: var(--gray-900); line-height: 1.5;}
.comicsBox .comicsTextBox .text02{padding: var(--spacing-s); margin-bottom: var(--spacing-2xl); border: 1px solid var(--gray-600); box-shadow: 10px 10px 40px rgba(0,0,0,.1); border-radius: var(--radius-m); font-size: var(--body-2); color: var(--gray-600);}
.comicsBox .comicsTextBox .charactersList{  display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--spacing-s) var(--spacing-m);}
.comicsBox .comicsTextBox h4{margin-bottom: var(--spacing-m); font-size: var(--Subtitle-1); font-weight: var(--semi-bold); color: var(--gray-900);}
.comicsBox .comicsTextBox .charactersList li{text-align: center;}
.comicsBox .comicsTextBox .charactersList li .imgBox{height: 208px; margin-bottom: var(--spacing-xs);}
.comicsBox .comicsTextBox .charactersList li .imgBox img{width: auto; margin: 0 auto;}
.comicsBox .comicsTextBox .charactersList li em{display: inline-flex; padding: var(--spacing-2xs) var(--spacing-xs); font-style: normal; border-radius: var(--radius-xs); background-color: var(--gray-100); color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--semi-bold); word-break: keep-all; line-height: 1.5;}  

@media (max-width: 1280px){

  .comicsBox .comicsContentBox .comicsList{padding: var(--spacing-2xl) var(--spacing-ms);}

}

@media (max-width: 1024px){

  .comicsBox .comicsTextBox{margin-bottom: var(--spacing-3xl);}
  .comicsBox .comicsLayoutBox{flex-direction: column-reverse;}
  .comicsBox .comicsContentBox{max-width: none; background: 0;}
  .comicsBox .comicsContentBox .comicsList{padding: 0;}

}

@media (max-width: 480px){

  .comicsBox .comicsTextBox .charactersList li .imgBox{height: 156px;}
  .comicsBox .comicsTextBox .charactersList li .imgBox img{max-width: 100%; height: 100%; object-fit: contain;}

}

/* 의원윤리강령 */
.ethicsCodeBox .text{margin-bottom: var(--spacing-3xl);}
.ethicsCodeBox .ethicsCodeLayoutBox{display: flex; align-items: flex-start; gap: 0 var(--spacing-5xl);}
.ethicsCodeBox .ethicsCodeTitBox{position: sticky; top:30px;}
.ethicsCodeBox .ethicsCodeTitBox h4{margin-bottom: var(--spacing-lm); color: var(--gray-900); font-size: var(--H1); font-weight: var(--bold);}
.ethicsCodeBox .ethicsCodeList{margin-top: 156px; flex: 1;}
.ethicsCodeBox .ethicsCodeList li dl{margin-bottom: -1px; display: flex; align-items: center; gap: 0 var(--spacing-xs); padding: var(--spacing-m) var(--spacing-s); border: 1px solid var(--gray-200); border-width: 1px 0;}
.ethicsCodeBox .ethicsCodeList li dl dt{width: 160px; flex-shrink: 0;}
.ethicsCodeBox .ethicsCodeList li dl dt span{display: block; margin-bottom: var(--spacing-s); color: var(--gray-400); font-weight: var(--bold); font-size: var(--font-size-s);}
.ethicsCodeBox .ethicsCodeList li dl dt p{line-height: 1.6; font-size: var(--font-size-xl); color: var(--gray-900);}
.ethicsCodeBox .ethicsCodeList li dl:last-child{border-bottom: 0;}
.ethicsCodeBox .ethicsCodeList li dl dd{color: var(--gray-600);}

@media (max-width: 1024px){

  .ethicsCodeBox .ethicsCodeLayoutBox{gap: 0 var(--spacing-3xl);}
  .ethicsCodeBox .ethicsCodeTitBox h4{font-size: var(--H4);}
  .ethicsCodeBox .ethicsCodeTitBox .ethicsCodeImgBox{width: 240px;}
  .ethicsCodeBox .ethicsCodeList{margin-top: 116px;}

}

@media (max-width: 768px){

  .ethicsCodeBox .ethicsCodeLayoutBox{gap: 0 var(--spacing-lm);}
  .ethicsCodeBox .ethicsCodeTitBox .ethicsCodeImgBox{width: 160px;}

}

@media (max-width: 576px){

  .ethicsCodeBox .ethicsCodeList li dl{flex-direction: column; align-items: flex-start;}
  .ethicsCodeBox .ethicsCodeList li dl dt p{margin-bottom: var(--spacing-xs); font-size: var(--font-size-l);}
  .ethicsCodeBox .ethicsCodeTitBox .ethicsCodeImgBox{width: 120px;}

}

@media (max-width: 480px){

  .ethicsCodeBox .ethicsCodeTitBox{width: 100%; position: static;}
  .ethicsCodeBox .ethicsCodeLayoutBox{flex-direction: column; gap: var(--spacing-lm) 0;}
  .ethicsCodeBox .ethicsCodeList li dl{padding: var(--spacing-m) var(--spacing-s) var(--spacing-m) 0;}
  .ethicsCodeBox .ethicsCodeList{margin-top: 0;}
  .ethicsCodeBox .ethicsCodeList li dl dt{width: 100%;}

}

/* 현역의원 */
.currentMemberBox .currentMemberTopTit{margin-bottom: var(--spacing-lm); display: flex; align-items: flex-end; gap: 0 var(--spacing-s);}
.currentMemberBox .currentMemberTopTit h4{flex-shrink: 0; color: var(--gray-900); font-size: var(--H1);}
.currentMemberBox .currentMemberTopTit .termBox{justify-content: center; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spacing-xs); padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--success-50); border-radius: 0 0 0 var(--radius-xs);}
.currentMemberBox .currentMemberTopTit .termBox .term{flex-shrink: 0; font-weight: var(--semi-bold); font-size: var(--font-size-s); color: var(--success-500); font-style: normal;}
.currentMemberBox .currentMemberTopTit .termBox .date{color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--medium); text-align: center;}
.currentMemberBox .currentMemberTab{padding: var(--spacing-xs) var(--spacing-s); display: inline-flex; gap: 0 var(--spacing-m); border: 1px solid var(--gray-100); border-radius: var(--spacing-s)}
.currentMemberBox .currentMemberTab li .tabBtn{font-weight: var(--bold); color: var(--gray-400); font-size: var(--Subtitle-2); transition: all .3s;}
.currentMemberBox .currentMemberTab li .tabBtn:hover{color: var(--primary-500);}
.currentMemberBox .currentMemberTab li .tabBtn.active{color: var(--gray-900);}
.currentMemberBox .currentMemberList{margin-top: var(--spacing-m); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m);}
.currentMemberBox .currentMemberList li{flex-wrap: wrap; display: flex; align-items: flex-start; justify-content: space-between; gap: 0 var(--spacing-lm); min-height: 488px; padding: var(--spacing-m); border-radius: var(--radius-m); border: 1px solid var(--gray-100);}
.currentMemberBox .currentMemberList li .currentMemberImgBox{position: relative; width: 269px; height: 360px; border-radius:var(--radius-m) var(--radius-m) var(--radius-l) var(--radius-m); background-color: var(--gray-100); overflow: hidden;}
.currentMemberBox .currentMemberList li .currentMemberImgBox img.person{height: 100%; object-fit: cover;}
.currentMemberBox .currentMemberList li .currentMemberImgBox .politicalParty{position: absolute; bottom: 20px; right:20px;}
.currentMemberBox .currentMemberTextBox{width: calc(100% - 331px); height: 360px; display: flex; flex-direction: column;}
.currentMemberBox .currentMemberTextBox .currentMemberNameBox{margin-bottom: var(--spacing-lm);}
.currentMemberBox .currentMemberTextBox .currentMemberNameBox .name01{display: block; margin-bottom: var(--spacing-xs); color: var(--gray-900); font-size: var(--H4); font-weight: var(--bold); font-family: 'RiaSans';} 
.currentMemberBox .currentMemberTextBox .currentMemberNameBox .name02{color: var(--gray-400); font-size: var(--font-size-s); font-weight: var(--bold); font-style: normal;}
.currentMemberBox .currentMemberTextBox .currentMemberInfoBox span{display: block; margin-bottom: var(--spacing-xs); font-size: var(--H6); font-weight: var(--bold); color: var(--gray-600);}
.currentMemberBox .currentMemberTextBox .currentMemberInfoBox em{padding: var(--spacing-2xs) var(--spacing-xs); font-style: normal; background-color: var(--gray-100); border-radius: var(--radius-xs); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.currentMemberBox .currentMemberTextBox .currentMemberAttendanceBox{margin-top: auto;}
.currentMemberBox .currentMemberTextBox .currentMemberAttendanceBox .layoutBox{display: flex;  align-items: center; justify-content: space-between;}
.currentMemberBox .currentMemberTextBox .currentMemberAttendanceBox .attendanceRateTitle{display: block; font-weight: var(--bold); color: var(--gray-900);}
.currentMemberBox .currentMemberTextBox .attendanceRateBox{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
.currentMemberBox .currentMemberTextBox .attendanceRateBox .box{color: var(--gray-400); font-weight: var(--bold);}
.currentMemberBox .currentMemberTextBox .attendanceRateBox .box strong{color: var(--gray-900);}
.currentMemberBox .currentMemberTextBox .attendanceRateBox .percent{padding: var(--spacing-2xs) var(--spacing-xs); font-style: normal; background-color: var(--stat-percent-bg); color: var(--white); border-radius: var(--radius-xs); font-size: var(--font-size-s);}
.currentMemberBox .currentMemberTextBox .percentBox{margin-top: var(--spacing-xs); position: relative; height: 6px; border-radius: var(--radius-s); background-color: var(--gray-50); overflow: hidden;}
.currentMemberBox .currentMemberTextBox .percentBox span{position: absolute; top:0; left:0; right:0; bottom: 0; border-radius: var(--radius-s); background-color: var(--primary-500); box-shadow: 8px 0 20px #FFBB3D;}
.currentMemberBox .currentMemberList li .memberInfoModalBox{margin-top: var(--spacing-m); width: 100%; padding: var(--spacing-xs); display: flex; gap: 0 0; border: 1px solid var(--gray-200); border-radius: var(--radius-s);}
.currentMemberBox .currentMemberList li .memberInfoModalBox .memberBtn{height: 40px; flex: 1; color: var(--gray-600); font-weight: var(--bold); text-align: center; border-radius: var(--spacing-xs);}

@media (max-width: 1280px){

  .currentMemberBox .currentMemberTextBox{width: calc(100% - 220px); height: 240px;}
  .currentMemberBox .currentMemberList li{min-height: auto;}
  .currentMemberBox .currentMemberList li .currentMemberImgBox{width: 180px; height: 240px;}

}

@media (max-width: 1024px){

  .currentMemberBox .currentMemberList{grid-template-columns: 1fr;}
  .currentMemberBox .currentMemberTextBox .currentMemberNameBox .name01{font-size: var(--H5);}

}

@media (max-width: 768px){

  .currentMemberBox .currentMemberTextBox .currentMemberInfoBox span{font-size: var(--font-size-l);}
  .currentMemberBox .currentMemberTopTit h4{font-size: var(--H4);}

}

@media (max-width: 480px){

  .currentMemberBox .currentMemberTextBox{margin-bottom: var(--spacing-m); display: flex; flex-wrap: wrap; width: 100%; height: auto; flex-direction: row; gap: var(--spacing-lm) 0;}
  .currentMemberBox .currentMemberTextBox .currentMemberAttendanceBox{width: 100%;}
  .currentMemberBox .currentMemberList li{padding: var(--spacing-m) var(--spacing-s) var(--spacing-s); flex-direction: column;}
  .currentMemberBox .currentMemberTextBox .currentMemberNameBox{margin: 0;}
  .currentMemberBox .currentMemberTextBox .currentMemberNameBox,
  .currentMemberBox .currentMemberTextBox .currentMemberInfoBox{width: 50%;}
  .currentMemberBox .currentMemberList li .currentMemberImgBox{width: 100%; height: auto;}
  .currentMemberBox .currentMemberList li .memberInfoModalBox{margin-top: var(--spacing-s);}
  .currentMemberBox .currentMemberList{gap: var(--spacing-lm);}
  
  .currentMemberBox .currentMemberTab li .tabBtn{font-size: var(--body-2);}

}

/* 역대의원 */
.formerMemberBox .formerMemberLayoutBox{margin: var(--spacing-lm) 0 var(--spacing-3xl); display: flex; align-items: flex-start; gap: 0 var(--spacing-m);}
.formerMemberBox .formerMemberInfoBox{position: sticky; top: 30px; width: 220px; flex-shrink: 0;} 
.formerMemberBox .formerMemberInfoBox h4{margin-bottom: var(--spacing-s); color: var(--gray-900); font-size: var(--H1);}
.formerMemberBox .formerMemberInfoBox .personnel{display: block; margin-bottom: var(--spacing-xs); color: var(--gray-900); font-weight: var(--bold);}
.formerMemberBox .formerMemberInfoBox .termBox{justify-self: flex-start; padding: var(--spacing-2xs) var(--spacing-xs); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; background-color: var(--success-50); border-radius: 0 0 0 var(--spacing-xs);}
.formerMemberBox .formerMemberInfoBox .termBox .term{font-weight: var(--semi-bold); font-size: var(--font-size-s); color: var(--success-500);}
.formerMemberBox .formerMemberInfoBox .termBox .date{font-size: var(--font-size-s); font-weight: var(--medium); color: var(--gray-600);}
.formerMemberBox .formerMemberList{flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--gray-900);}
.formerMemberBox .formerMemberList li{padding: var(--spacing-m) var(--spacing-m) var(--spacing-lm); border: 1px solid var(--gray-100);}
.formerMemberBox .formerMemberList li .name{margin-bottom: var(--spacing-s); display: block; color: var(--gray-900); font-size: var(--font-size-xxxl); font-weight: var(--bold); font-family: 'RiaSans';}
.formerMemberBox .formerMemberList li .info{margin-bottom: var(--spacing-m); display: block; color: var(--gray-600); font-weight: var(--medium);}
.formerMemberBox .formerMemberList li .imgBox{max-width: 180px; height: 217px; overflow: hidden; border-radius: 0 0 var(--spacing-2xl) 0; background-color: var(--gray-100);}
.formerMemberBox .formerMemberList li .imgBox img{height: 100%; object-fit: cover;}

@media (max-width: 1280px){
  
  .formerMemberBox .formerMemberList{grid-template-columns: repeat(3, 1fr)}
  

}

@media (max-width: 1024px){

  .formerMemberBox .formerMemberLayoutBox{flex-direction: column; gap: 0 0;}
  .formerMemberBox .formerMemberInfoBox{margin-bottom: var(--spacing-s); display: flex; justify-content: space-between; flex-wrap: wrap; position: static; width: 100%;}
  .formerMemberBox .formerMemberInfoBox h4{flex-shrink: 0; margin: 0; font-size: var(--H4);}
  .formerMemberBox .formerMemberInfoBox .infoBox{display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs);}
  .formerMemberBox .formerMemberInfoBox .personnel{margin: 0;}
  .formerMemberBox .formerMemberList{width: 100%;}
  .formerMemberBox .formerMemberList li:nth-child(4n){border-right:1px solid var(--gray-100);}
  .formerMemberBox .formerMemberList li{padding: var(--spacing-s) var(--spacing-s) var(--spacing-ml);}
  .formerMemberBox .formerMemberList li .name{margin-bottom: var(--spacing-xs);font-size: var(--font-size-l);}
  .formerMemberBox .formerMemberList li .info{margin-bottom: var(--spacing-s);}

}

@media (max-width: 768px){

  .formerMemberBox .formerMemberList li .imgBox{border-radius: 0 0 var(--radius-l) 0;}

}

@media (max-width: 576px){

  .formerMemberBox .formerMemberList li .imgBox{height: 170px;}

}

@media (max-width: 480px){

  .formerMemberBox .formerMemberList li .imgBox{height: 250px;}
  .formerMemberBox .formerMemberInfoBox h4{font-size: var(--H5);}
  .formerMemberBox .formerMemberList{grid-template-columns: repeat(2, 1fr);}
  .formerMemberBox .formerMemberList li{padding: var(--spacing-s) var(--spacing-s) var(--spacing-ml) var(--spacing-xs);}
  .formerMemberBox .formerMemberList li .info{font-size: var(--font-size-s);}

}

@media (max-width: 414px){

    .formerMemberBox .formerMemberList li .imgBox{height: 200px;}

}

@media (max-width: 360px){

    .formerMemberBox .formerMemberList li .imgBox{height: 180px;}

}

@media (max-width: 320px){

    .formerMemberBox .formerMemberList li .imgBox{height: 160px;}

}

/* 모달 */
/* #memberModalWrap{max-width: 560px; width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--white); border-radius: var(--spacing-lm); z-index: 9999; overflow: hidden;} */
#memberModalWrap {display: none;position: fixed;inset: 0;z-index: 9999;background: rgba(30, 43, 55, 0.5);backdrop-filter: blur(3px);}
#memberModalWrap .memberModalBox {max-width: 560px;width: 90%;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: var(--white);border-radius: var(--spacing-lm);overflow: hidden;}
.memberModalBox .memberTermList{position: relative; padding: var(--spacing-s) var(--spacing-ms); display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--spacing-xs); background: linear-gradient(to right, #FFFEFD, #E1D8CD, #FFFFFF);}
.memberModalBox .memberTermList li .memberTermBtn{padding: var(--spacing-xs); border-radius: var(--radius-xs); background-color: var(--white); color: var(--gray-400); font-weight: var(--bold); font-size: var(--font-size-s);}
.memberModalBox .memberTermList li .memberTermBtn:hover{background-color: var(--gray-300); color: var(--gray-600);}
.memberModalBox .memberTermList li .memberTermBtn.active{background-color: var(--secondary-900); color: var(--white);}
.memberModalBox .profileLayoutBox{padding: var(--spacing-ml) var(--spacing-m); display: flex; gap: 0 var(--spacing-lm);}
.memberModalBox .memberProfileBox .memberImgBox{flex-shrink: 0; width: 210px; height: 293px; border-radius: 160px; overflow: hidden; box-shadow: 10px 10px 40px rgba(0,0,0,.1); background: linear-gradient(to bottom, #E8EBED, #F7F8F9);}
.memberModalBox .memberProfileBox .memberImgBox img{height: 100%; object-fit: cover;}
.memberModalBox .memberProfileBox .memberInfoBox{flex: 1;}
.memberModalBox .memberProfileBox .memberInfoBox .infoText01{display: inline-block; margin-bottom: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-s); color: var(--secondary-200); font-weight: var(--bold); background-color: var(--gray-600);}
.memberModalBox .memberProfileBox .memberInfoBox .nameBox{margin-bottom: var(--spacing-m); display: flex; align-items: center; gap: 0 var(--radius-xs);}
.memberModalBox .memberProfileBox .memberInfoBox .nameBox .name01{color: var(--gray-900); font-size: var(--H4); font-weight: var(--bold);}
.memberModalBox .memberProfileBox .memberInfoBox .nameBox .name02{color: var(--gray-400); font-weight: var(--medium); font-size: var(--body-2);}
.memberModalBox .memberProfileBox dl{padding-left: 14px; position: relative; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: 0 var(--spacing-xs);}
.memberModalBox .memberProfileBox dl::before{content: ''; position: absolute; top:8px; left:0; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary-500);}
.memberModalBox .memberProfileBox dl:last-child{margin-bottom: 0;}
.memberModalBox .memberProfileBox dl dt{width: 80px; flex-shrink: 0; color: var(--gray-600); font-size: var(--body-2); font-weight: var(--bold);}
.memberModalBox .memberProfileBox dl dd{color: var(--gray-600); font-weight: var(--medium); font-size: var(--body-2);}
.memberModalBox .memberProfileBox .infoBox{ margin: var(--spacing-ms) 0;}
.memberModalBox .memberProfileBox .infoBox span{position: relative; padding-left: var(--spacing-ml); display: block; margin-bottom: var(--spacing-xs); font-size: var(--body-2); font-weight: var(--medium); color: var(--gray-600);}
.memberModalBox .memberProfileBox .infoBox span::before{content: ''; position: absolute; top:0; left:0; width: 24px; height: 24px;}
.memberModalBox .memberProfileBox .infoBox span.phone::before{background: url(../images/sub/phone02.svg)no-repeat center / cover;}
.memberModalBox .memberProfileBox .infoBox span.email::before{background: url(../images/sub/email.svg)no-repeat center / cover;}
.memberModalBox .memberProfileBox .infoBox span a{font-size: var(--body-2); font-weight: var(--medium); color: var(--gray-600);}
.memberModalBox .memberProfileBox .infoBox span:last-child{margin-bottom: 0;}
.memberModalBox .memberProfileBox .attendanceRateBox{padding: var(--spacing-s); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--spacing-s); border-radius: var(--radius-s); background-color: var(--primary-900);}
.memberModalBox .memberProfileBox .attendanceRateBox span{color: var(--secondary-200); font-weight: var(--bold); font-size: var(--font-size-s);}
.memberModalBox .memberProfileBox .attendanceRateBox em{font-style: normal; color: var(--white); font-weight: var(--bold); font-size: var(--H6);}
.memberModalBox .line{display: block; height: 4px; border: 1px solid #BF9F17; background-color: var(#F9F7F1);}
.memberModalBox .backgroundBox{padding: var(--spacing-m);}
.memberModalBox .backgroundBox h3{margin-bottom: var(--spacing-s);}
.memberModalBox .backgroundBox .historyBox{display: flex; gap: 0 var(--spacing-xs);}
.memberModalBox .backgroundBox .historyBox h4{width: 56px; flex-shrink: 0; font-weight: var(--bold); font-size: var(--body-1); color: var(--gray-900);}
.memberModalBox .backgroundBox .historyBox .historyList{flex: 1; height: 152px; overflow-y: auto;}
.memberModalBox .backgroundBox .historyBox .historyList li{margin-bottom: var(--spacing-xs); color: var(--gray-600); font-size: var(--body-2); font-weight: var(--medium);} 
.memberModalBox .backgroundBox .historyBox .historyList li:last-child{margin-bottom: 0;}


.memberModalBox .modalFooterBox{padding: 12px var(--spacing-ms); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap:var(--spacing-xs); background-color: #C7CACD;}
.memberModalBox .modalFooterBox .modalBtn{min-width: 96px; min-height: 32px; line-height: 32px; padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--gray-600); border-radius: var(--radius-s); text-align: center;}
.memberModalBox .modalFooterBox .modalBtn span{ font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white); border-radius: var(--radius-xs);}
.memberModalBox .modalFooterBox .modalBtn:hover span{background-color: var(--gray-500);}





@media (max-width: 576px){

  #memberModalWrap{max-width: none; width: 100%; top:97px; left:0; bottom: 0; transform: none; right:0; border-radius: 0; z-index: 99999; overflow-y: auto;}
  .memberModalBox .profileLayoutBox{flex-direction: column; gap: 0 0; align-items: center;}
  .memberModalBox .memberProfileBox .memberImgBox{margin-bottom: var(--spacing-m); width: 144px; height: 201px;}
  .memberModalBox .memberProfileBox .memberInfoBox{width: 100%;}
  .memberModalBox .memberProfileBox .memberInfoBox .nameBox{flex-direction: column;}
  .memberModalBox .memberProfileBox .memberInfoBox .nameBox .name01{margin-bottom: var(--spacing-xs);}
  .memberModalBox .memberProfileBox .memberInfoBox .infoText01{display: block; width: 57px; margin: 0 auto var(--spacing-xs); font-size: var(--font-size-s);}
  .memberModalBox .memberProfileBox .attendanceRateBox{min-height: 48px; padding: var(--spacing-xs) var(--spacing-s);}
 
}

@media (max-width: 480px){

  #memberModalWrap{top: 93px;}

}

/* 공통 - 검색 */
.searchWrap{margin-bottom: var(--spacing-lm); padding: var(--spacing-m) var(--spacing-ms); border-radius: var(--radius-m); background: linear-gradient(to right, var(--gray-100), var(--primary-50)), var(--gray-100);}
.searchBox{position: relative; display: flex; align-items: center; gap: 0 var(--spacing-s); max-width: 540px; margin: 0 auto; height: 72px; overflow: hidden; background-color: var(--white); border: 2px solid var(--gray-200); border-radius: var(--radius-s); }
.searchBox:focus-within{border-color: var(--gray-600);}
.searchBox .searchBtn{width: 40px; height: 100%; position: absolute; top: 50%; transform: translateY(-50%); right:16px; background: url(../images/sub/search_icon.svg)no-repeat center / contain;}
.searchBox .searchSelectBox{height: 100%;}
.searchBox .searchSelectBox #searchSelect{flex-shrink: 0; padding-left: var(--spacing-m); width: 98px; height: 100%; color: var(--gray-900); font-weight: var(--medium); font-size: var(--font-size-m);  cursor: pointer; border: 0; background-color: var(--white);}
.searchBox .inputBox{flex: 1; height: 100%;}
.searchBox #search{padding-right:  var(--spacing-2xl); width: 100%; height: 100%; font-size: var(--font-size-s); font-weight: var(--medium); color: var(--gray-400); border: 0;}
.searchBox #search::placeholder{color: var(--gray-400);}
.searchBox .bar{display: block; width: 1px; height: 15px; background-color: var(--gray-200);}
.searchBox .searchSelectBox #searchSelect,
.searchBox #search,
.searchBox .searchBtn{outline: 0;}

/* 공통 - 게시판목록 */
.boardListBox{margin-bottom: 64px;}
.boardListTable{width: 100%; table-layout: fixed; border-spacing: 0;}

.boardListTable colgroup .id{width: 100px;}
.boardListTable colgroup .category{width: 100px;}
.boardListTable colgroup .title{ width: auto;}
.boardListTable colgroup .author{width: 176px;}
.boardListTable colgroup .date{width: 144px;}
.boardListTable thead tr th.title{padding-left: var(--spacing-m);}
.boardListTable thead tr th:first-child{border-radius: var(--radius-xs) 0 0 0;}
.boardListTable thead tr th:last-child{border-radius: 0 var(--radius-xs) 0 0;}
.boardListTable thead tr th{height: 35px; font-size: var(--font-size-m); font-weight: var(--bold); background-color: var(--gray-600); color: var(--white);}
.boardListTable tbody tr{transition: all .3s; background-color: var(--white);}
.boardListTable tbody tr td{border-bottom: 1px solid var(--gray-100); transition: all .3s; text-align: center; font-weight: var(--medium); font-size: var(--font-size-m); color: var(--gray-900);}
.boardListTable tbody tr td .id{display: inline-block; padding: var(--spacing-2xs) var(--spacing-s); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--gray-400); transition: all .3s; border-radius: var(--radius-xs); background-color: var(--gray-100);}
.boardListTable tbody tr td .category{min-width: 80px; padding: var(--spacing-xs) var(--spacing-s); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white); transition: all .3s; border-radius: var(--radius-xs); background-color: var(--primary-500);}
.boardListTable tbody tr td .link{display: flex; align-items: center; gap: 0 var(--spacing-xs); padding: var(--spacing-ml) var(--spacing-m) var(--spacing-ml) var(--spacing-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.boardListTable tbody tr:hover{background-color: var(--gray-50);}
.boardListTable tbody tr:hover .link .titleText{text-shadow: 0.25px 0 0 currentColor, -0.25px 0 0 currentColor;}
.boardListTable tbody tr td .link .file{flex-shrink: 0;}
.boardListTable tbody tr td .link .file img{display: block;}
.boardListTable tbody tr td .link .titleText{min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--H6); font-weight: var(--medium); color: var(--gray-900); transition: all .3s;}
.boardListTable tbody tr td .date{font-size: var(--font-size-s); font-weight: var(--medium); color: var(--gray-400);}
.boardCountWrap{margin-bottom: var(--spacing-m);}
.boardCountWrap .boardCountBox{display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-s); }
.boardCountWrap .boardCountBox span{padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--gray-100); border-radius: var(--radius-xs); font-size: var(--font-size-s); font-weight: var(--medium); color: var(--gray-400);}
.boardCountWrap .boardCountBox span strong{color: var(--gray-600);}
.boardCountWrap .boardCountBox p{color: var(--gray-600); font-weight: var(--medium);}
.boardCountWrap .boardCountBox p strong{color: var(--primary-500);}

@media (max-width: 1024px){

  .searchBox{height: 64px;}

  .boardCountWrap{margin-bottom: var(--spacing-s);}

  .boardListTable tr{padding: var(--spacing-s) 0;  display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--gray-100)!important;}
  .boardListTable tbody tr td .date{margin-left: var(--spacing-xs);}
  .boardListTable tbody tr td .category{padding: var(--spacing-2xs) var(--spacing-xs);}
  .boardListTable tbody tr td .link{padding: var(--spacing-s) var(--spacing-ms) var(--spacing-s) 0;}
  .boardListTable tbody tr td .link .titleText{font-size: var(--Subtitle-1);}
  .boardListTable tbody tr td{font-size: var(--body-2);}
  .boardListTable{border-top: 2px solid #000!important;}
  .boardListTable thead{display: none;}
  .boardListTable,
  .boardListTable tbody,
  .boardListTable td{display: block;}
  .boardListTable tbody tr td{border: 0;}
  .boardListTable tbody tr td.title{flex-basis: 100%; width: 100%;}


}

@media (max-width: 576px){

  .searchWrap{padding: 0; background: 0;}
  .searchBox{width: 100%; box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1);}

}

@media (max-width: 480px){

  .searchWrap{padding: 0; background: 0;}
  .searchBox{width: 100%; box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1); gap: 0 var(--spacing-xs);}
  .searchBox #search{padding-right: var(--spacing-l);}
  .searchBox .searchBtn{right: 5px;}

  .boardListTable tbody tr td .link .titleText{font-size: var(--font-size-m);}

}

/* 공통 - 페이지네이션 */
.paginationBox{margin: 60px 0 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap:var(--spacing-2xs);}
.paginationBox .pageLink{position: relative; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: var(--spacing-xs); background-color: var( --gray-50); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--gray-600); border-radius: var(--radius-xs); transition: all .3s;}
.paginationBox .pageLink:hover{background-color: var(--gray-100);}
.paginationBox .pageLink.active{color: var(--white); background-color: var(--primary-800);}

.paginationBox .pageLinkFirst,
.paginationBox .pageLinkLast{z-index: 1; background:0;}

.paginationBox .pageLinkFirst::after,
.paginationBox .pageLinkLast::after{content: ''; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background-color: var(--gray-500); border-radius: var(--radius-l); z-index: -1; transition: all 3.s;}
.paginationBox .pageLinkFirst::before,
.paginationBox .pageLinkLast::before{content: ''; width: 7px; height: 10px; position: absolute; top: 51%; left: 50%; transform: translate(-50%, -50%);}
.paginationBox .pageLinkFirst::before{left: 49%; background: url(../images/sub/arrow02.svg)no-repeat center / contain;}
.paginationBox .pageLinkLast::before{left: 51%; background: url(../images/sub/arrow03.svg)no-repeat center / contain;}

.paginationBox .pageLinkFirst:hover:after,
.paginationBox .pageLinkLast:hover:after{background-color: var(--gray-600);}


.paginationBox .pageLinkPrev{background: url(../images/sub/arrow.svg)no-repeat center / contain; background-size: 7px 10px;}
.paginationBox .pageLinkNext{transform: rotate(180deg); background: url(../images/sub/arrow.svg)no-repeat center / contain; background-size: 7px 10px;}

@media (max-width: 576px ){

  .paginationBox .pageLink{min-width: 32px; min-height: 32px; border-radius:var(--radius-xs );}

}
        
/* 공통 - 게시판상세 */
.boardViewBox{padding-top: var(--spacing-s); margin-bottom: var(--spacing-lm); position: relative;}
.boardViewBox::after{content: ''; position: absolute; top:0; left:0; right:0; height: 16px; background: linear-gradient(to right, var(--gray-100), var(--primary-50), var(--gray-100));}
.boardViewBox .boardViewTopBox{padding: var(--spacing-lm) var(--spacing-ms); border-bottom: 2px solid var(--gray-100); text-align: center;}
.boardViewBox .boardViewTopBox .category{display: inline-block; margin-bottom: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-xs); background-color: var(--primary-500); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white);}
.boardViewBox .boardViewTopBox h4{margin-bottom: var(--spacing-s); color: var(--gray-900); font-size: var(--H1); font-weight: var(--bold); word-break: keep-all;}
.boardViewBox .boardViewTopBox .boardViewInfoBox{display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap:var(--spacing-xs) var(--spacing-m);}
.boardViewBox .boardViewTopBox .boardViewInfoBox .boardViewAuthor{font-weight: var(--bold); color: var(--gray-600);}
.boardViewBox .boardViewTopBox .boardViewInfoBox .boardViewDate{display: flex; align-items: center; gap: 0 var(--spacing-xs); color: var(--gray-400); font-weight: var(--bold);}
.boardViewBox .boardViewTopBox .boardViewInfoBox .boardViewDate::before{content: ''; width: 24px; height: 24px; background: url(../images/sub/date_icon.svg)no-repeat center / contain;}
.boardViewBox .boardViewTopBox .boardViewInfoBox .boardViewCount{display: flex; align-items: center; gap: 0 var(--spacing-xs); color: var(--gray-400); font-weight: var(--bold);}
.boardViewBox .boardViewTopBox .boardViewInfoBox .boardViewCount::before{content: ''; width: 24px; height: 24px; background: url(../images/sub/view_icon.svg)no-repeat center / contain;}
.boardViewBox .boardViewContentBox{padding: var(--spacing-l) 0;}
.boardViewBox .boardViewContentBox .viewContentBox ,
.boardViewBox .boardViewContentBox .viewContentBox p, 
.boardViewBox .boardViewContentBox .viewContentBox span{color: var(--gray-600);}
/* .boardViewBox .boardViewContentBox .viewContentBox p, 
.boardViewBox .boardViewContentBox .viewContentBox span{margin-top: var(--spacing-lm); } */
.boardViewBox .boardViewContentBox .viewContentBox img{width: auto; max-width: 720px; width: 100%; margin: 0 auto var(--spacing-s);}
.boardViewFileBox{display: flex; align-items: flex-start; gap: 0 var(--spacing-m); padding: var(--spacing-lm) var(--spacing-m); background-color: var(--gray-50); border-radius: var(--radius-m);}
.boardViewFileTitle{color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-m);}
.boardViewFileList li{margin-bottom: var(--spacing-s);}
.boardViewFileList li:last-child{margin-bottom: 0;}
.boardViewFileList li a{display: flex; flex-wrap: wrap; align-items: center;}
.boardViewFileList li a:hover .boardViewFileName{text-shadow: 0.25px 0 0 currentColor, -0.25px 0 0 currentColor;}
.boardViewFileList li a .boardViewFileIcon{width: 24px; height: 28px; margin-right: var(--spacing-xs);}
.boardViewFileList li a.fileHwp .boardViewFileIcon{background: url(../images/sub/hwp_icon.svg)no-repeat center / contain;}
.boardViewFileList li a.filePdf .boardViewFileIcon{background: url(../images/sub/pdf_icon.svg)no-repeat center / contain;}
.boardViewFileList li a.fileXlsx .boardViewFileIcon{background: url(../images/sub/xlsx_icon.svg)no-repeat center / contain;}
.boardViewFileList li a.fileJpg .boardViewFileIcon{background: url(../images/sub/jpg_icon.svg)no-repeat center / contain;}
.boardViewFileList li a.filePpt .boardViewFileIcon{background: url(../images/sub/ppt_icon.svg)no-repeat center / contain;}
.boardViewFileList li a.fileDoc .boardViewFileIcon{background: url(../images/sub/docx_icon.svg)no-repeat center / contain;}
.boardViewFileList li a.fileZip .boardViewFileIcon{background: url(../images/sub/zip_icon.svg)no-repeat center / contain;}
.boardViewFileList li a .boardViewFileName{margin-right: var(--spacing-2xs); color: var(--gray-600); transition: all .3s;}
.boardViewFileList li a .boardViewFileSize{color: var(--gray-400);}
.boardViewBox .boardViewLayoutBox{padding: 0 var(--spacing-m); display: flex; align-items: flex-start; justify-content: space-between; gap: 0 var(--spacing-xl);}
.boardViewBox .viewContentInfoBox dl{margin-bottom: var(--spacing-m); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs) 0;}
.boardViewBox .viewContentInfoBox dl dt{ padding: var(--spacing-2xs) var(--spacing-xs); color: var(--gray-600); font-weight: var(--semi-bold); font-size: var(--font-size-s); background-color: var(--gray-100); border-radius: var(--radius-xs);}
.boardViewBox .viewContentInfoBox dl dd{color: var(--gray-600); font-size: var(--Subtitle-1); font-weight: var(--medium);}
.boardViewBox .viewParticipationBox{max-width: 200px; width: 100%; padding: var(--spacing-m) var(--spacing-ms); border-radius: var(--radius-m); border: 1px solid var(--gray-100);}
.boardViewBox .viewParticipationBox p{margin-bottom: var(--spacing-s); line-height: 1.7; color: var(--gray-600); font-weight: var(--medium);}
.boardViewBox .viewParticipationList{display: flex; flex-wrap: wrap; gap: var(--spacing-xs);}
.boardViewBox .viewParticipationList li .imgBox{margin: 0 auto var(--spacing-2xs); width: 32px; height: 32px; border-radius: var(--radius-m); overflow: hidden; background-color: var(--gray-100);}
.boardViewBox .viewParticipationList li .imgBox img{height: 100%; object-fit: cover;}
.boardViewBox .viewParticipationList li .name{display: block; color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-xs); text-align: center;}
.textareaBox { display: none; }
.textareaBox.active { display: block; }


@media (max-width: 1024px){

  .boardViewBox{margin-bottom: var(--spacing-m);}
  .boardViewBox .boardViewTopBox h4{font-size: var(--H4);}
  .boardViewFileBox{padding: var(--spacing-ml) var(--spacing-m);}

  .boardViewBox .viewContentInfoBox{width: 100%; display: flex; justify-content: center; gap: 0 var(--spacing-ml);}
  .boardViewBox .boardViewLayoutBox{padding: 0; flex-direction: column; gap: var(--spacing-lm) 0;}
  .boardViewBox .viewContentInfoBox dl{margin: 0; align-items: center;}
  .boardViewBox .boardViewContentBox .viewContentBox img{max-width: none;}
  .boardViewBox .viewParticipationBox{max-width: none;}

}

@media (max-width: 768px){

  .boardViewFileBox{padding: var(--spacing-m) var(--spacing-s); flex-direction: column; gap: var(--spacing-ms) 0;}
  .boardViewFileList li a .boardViewFileSize{font-size: var(--body-2);}
  .boardViewBox .viewContentInfoBox dl dd{font-size: var(--font-size-m);}

}

@media (max-width: 480px){

  .boardViewBox .boardViewContentBox{padding: var(--spacing-lm) 0;}
  .boardViewBox .boardViewTopBox h4{font-size: var(--H5);}
  .boardViewBox .boardViewTopBox .boardViewInfoBox .boardViewAuthor{width: 100%;}
  .boardViewBox .boardViewTopBox .boardViewInfoBox span{font-size: var(--font-size-s);}

}

@media (max-width: 320px){

  .boardViewBox .viewContentInfoBox{flex-direction: column; gap: var(--spacing-lm) 0;}

}

/* 공통 - 이전글, 다음글 */
.boardViewNavBox{padding-top: 3px; position: relative; margin:var(--spacing-3xl) 0 var(--spacing-lm); border-bottom: 1px solid var(--gray-100);}
.boardViewNavBox::after{content: ''; position: absolute; top:0; left:0; right:0; height: 1px; border: 1px solid #BF9F17; background-color: #F9F7F1;}
.boardViewNavBox .boardViewNavItem{padding: var(--spacing-s) 0; display: flex; align-items: center; min-height: 54px; }
.boardViewNavBox .boardViewNavItem:hover .boardViewNavTitle{text-shadow: 0.25px 0 0 currentColor, -0.25px 0 0 currentColor;}
.boardViewNavBox .boardViewNavIcon{margin-right:var(--spacing-xs); width: 24px; height: 24px;}
.boardViewNavBox .boardViewNavItem.prev .boardViewNavIcon{background: url(../images/sub/arrow_icon07.svg)no-repeat center;}
.boardViewNavBox .boardViewNavItem.next .boardViewNavIcon{transform: rotate(180deg); background: url(../images/sub/arrow_icon07.svg)no-repeat center;}
.boardViewNavBox .boardViewNavLabel{flex-shrink: 0; margin-right: 30px; color: var(--gray-400); font-size: var(--font-size-s); font-weight: var(--bold);}
.boardViewNavBox .boardViewNavTitle{flex: 1 1 auto; min-width: 0; color: var(--gray-600); font-weight: var(--medium); font-size: var(--Subtitle-2); transition: all .3s;}
.boardViewNavBox .boardViewNavDate{flex: 0 0 auto; color: var(--gray-500); font-weight: var(--medium); font-size: var(--body-2);} 
.boardViewNavBox .boardViewNavContent{width: 100%; display: flex; align-items: center; justify-content: space-between;}

@media (max-width: 1024px){

  .boardViewNavBox{margin: var(--spacing-2xl) 0 var(--spacing-lm);}
  .boardViewNavBox .boardViewNav{margin: var(--spacing-2xl) 0 var(--spacing-lm);}

}

@media (max-width: 480px){

  .boardViewNavBox .boardViewNavTitle{font-size: var(--font-size-s);}
  .boardViewNavBox .boardViewNavContent{flex-direction: column; align-items:flex-start; gap: var(--spacing-xs) 0;}

}

/* 공통 - 글쓰기 */
.boardWriteBox{margin-bottom: var(--spacing-2xl);}
.boardWriteBox h4{margin-bottom: var(--spacing-s); color: var(--gray-600); font-size: var(--H5); font-weight: var(--bold);}

@media (max-width: 768px){

  .boardWriteBox h4{font-size: var(--H6);}

}

@media (max-width: 480px){

  .boardWriteBox h4{font-size: var(--Subtitle-1);}

}


/* 폼 - 레이아웃 */
.boardWriteField{padding-bottom: var(--spacing-m); display: flex; flex-direction: column; gap: var(--spacing-xs);}
.boardWriteField.row{padding: var(--spacing-ml) 0; flex-direction: row; align-items: center; border-top: 1px solid var(--gray-100);}
.boardWriteField.row.start{align-items: flex-start;}
.boardWriteContent{flex: 1 1 auto; min-width: 0; width: 100%;}
.boardWriteField:last-child{margin-bottom: 0;}
.boardWriteForm{padding: var(--spacing-ml); background-color: var(--gray-50); border-radius: var(--radius-m);}
.boardWriteEditor{display: flex; align-items: center; justify-content: center; height: 407px; border-radius: var(--radius-s); border: 1px solid var(--gray-100); background-color: var(--white); font-weight: var(--medium);}

/* 폼 - 제목 */
.boardWriteLabel{padding: var(--spacing-s) 0; width: 120px; flex-shrink: 0; font-size: var(--Subtitle-2); font-weight: var(--bold); color: var(--gray-600);}
.boardWriteLabel .required{color: var(--warning-500);}

@media (max-width: 480px){

  .boardWriteLabel{padding: 0;}

}

/* 폼 - 파일 */
.boardWriteFileBox .boardWriteFile{margin-bottom: var(--spacing-s);}
.boardWriteFileBox .boardWriteFile:last-child{margin-bottom: 0;}
.boardWriteFileBox .boardWriteFileBtn{display: flex; align-items: center; gap: 0 var(--spacing-xs); max-width: 699px; height: 48px; padding:0 var(--spacing-s); border: 1px solid var(--gray-100); border-radius: var(--radius-xs); color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s); background-color: var(--white); cursor: pointer;}
.boardWriteFileBox .boardWriteFileBtn.active {border-color: var(--primary-800); font-weight: var(--bold);}
.boardWriteFileBox:first-child .boardWriteFileBtn{max-width: none; width: 100%;}
.boardWriteFileBox .boardWriteFileBtn::before{content: ''; margin-top: 2px; width: 16px; height: 16px; background: url(../images/sub/file_icon.svg)no-repeat center / contain;}
.boardWriteFileBox .boardWriteFileItem{margin-top: var(--spacing-xs); display: flex; align-items: center; gap: 0 var(--spacing-xs);}
.boardWriteFileBox .boardWriteFileItem .boardWriteFileDel{display: flex; align-items: center; justify-content: center; width: 48px; height: 28px; border-radius: var(--radius-xs); background-color: var(--gray-600); color: var(--white); font-size: var(--font-size-s); font-weight: var(--semi-bold);}
.boardWriteFileBox .boardWriteFileItem .boardWriteFileName{color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--medium);}

/* 폼 - 체크, 라디오 */
.chkBtn{display: inline-flex; align-items: center;  gap: 0 var(--spacing-xs);
    padding: 0 var(--spacing-s); max-width: 220px; width: 100%; height: 48px; background-color: var(--white);
    border: 1px solid var(--gray-100); border-radius: var(--radius-xs); color: var(--gray-600);
    font-weight: var(--medium); font-size: var(--font-size-s); cursor: pointer; white-space: nowrap;}
.chkBtn::before {content: ''; width: 22px; height: 22px; background: url(../images/common/chk_icon.svg) no-repeat center / contain;}

input[type="radio"]:checked + .chkBtn,
input[type="checkBox"]:checked + .chkBtn
{background-color: var(--primary-500); color: var(--white); border: 1px solid var(--primary-500);}
input[type="radio"]:checked + .chkBtn::before,
input[type="checkBox"]:checked + .chkBtn::before
 {background: url(../images/sub/chk_on_icon.svg) no-repeat center / contain;}
.boardWriteRadioWrap,
.boardWriteChkWrap{display: flex; gap: var(--spacing-xs);}
.boardWriteRadioWrap .inputRadioBox,
.boardWriteChkWrap .inputChkBox{max-width: 220px; width: 100%;}

@media (max-width: 480px){

  .boardWriteRadioWrap,
  .boardWriteChkWrap{flex-direction: column; gap: var(--spacing-2xs) 0;}
  .boardWriteRadioWrap .inputRadioBox,
  .boardWriteChkWrap .inputChkBox{max-width: none;}
  .chkBtn{max-width: none;}

}

/* 폼 - 입력 */
textarea{width: 100%; height: 180px; padding: var(--spacing-s); border: 1px solid var(--gray-100); border-radius: var(--radius-xs); background-color: var(--white); color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s); font-family: 'Pretendard';}

/* 폼 - 선택 */
#select{padding: 0 var(--spacing-s); max-width: 220px; width: 100%; height: 48px;
    border: 1px solid var(--gray-100); border-radius: var(--radius-xs); color: var(--gray-600);
    font-weight: var(--medium); font-size: var(--font-size-s); cursor: pointer; background: #fff url(../images/sub/arrow_icon01.svg) right 16px center no-repeat;}
#select{appearance: none;-webkit-appearance: none; -moz-appearance: none;}
.memberSelectBox{position: relative;}
.memberSelectBox.active .memberSelectBtn{border: 1px solid var(--gray-600);}
.memberSelectBox .memberSelectBtn{display: flex; align-items: center; gap: 0 var(--spacing-s); padding: 0 var(--spacing-xs); width: 160px; height: 64px; background-color: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-s);}
.memberSelectBox .memberSelectBtn span{flex-shrink: 0; display: flex; align-items: center; gap: 0 var(--spacing-xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
.memberSelectBox .memberSelectBtn span::before{content: ''; width: 48px; height: 48px; background: url(../images/sub/parliament.svg)no-repeat center / contain;}
.memberSelectBox .memberSelectBtn::after{content: ''; width: 24px; height: 24px; background: url(../images/sub/arrow_icon08.svg)no-repeat center / contain; border: 0;}
.memberSelectBox .memberSelectBox{padding: var(--spacing-m); position: absolute; top:76px; left:0; max-width: 714px; width: 100%; border-radius: var(--radius-l); box-shadow: 0 0  40px rgba(0,0,0, .2); background-color: var(--gray-50);}
.memberSelectBox .memberSelectBox strong{display: block; margin-bottom: var(--spacing-m); font-size: var(--Subtitle-1);}
.memberSelectBox .memberSelectBox .memberSelectList{display: flex; flex-wrap: wrap; gap: var(--spacing-2xs);}
.memberSelectBox .memberSelectBox .memberSelectList li{max-width: 160px; width: 100%;}
.memberSelectBox .memberSelectBox .memberSelectList li .button{display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--spacing-xs); padding: var(--spacing-xs ); width: 100%; border-radius: var(--radius-s); background-color: var(--white); box-shadow: 0 0 40px rgba(0, 0, 0, .15); border: 1px solid transparent; transition: all .3s;}
.memberSelectBox .memberSelectBox .memberSelectList li .button.active{border-color: var(--gray-600);}
.memberSelectBox .memberSelectBox .memberSelectList li .button.active .selectImgBox{background-color: var(--primary-500);}
.memberSelectBox .memberSelectBox .memberSelectList li .button .selectImgBox{width: 36px; height: 36px; border-radius: var(--radius-m); background-color: var(--gray-100); overflow: hidden;}
.memberSelectBox .memberSelectBox .memberSelectList li .button .selectImgBox img{height: 100%; object-fit: cover;}
.memberSelectBox .memberSelectBox .memberSelectList li .button .name{color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
.memberSelectBox .btnBox{margin: var(--spacing-m) 0 0;}
.memberSelectBox .btnBox .btn{padding: 0 var(--spacing-s); min-width: auto; height: 36px; font-size: var(--font-size-s);}
.memberSelectBox .selectCloseBtn{position: absolute; top:24px; right:24px; width: 32px; height: 32px; background: var(--gray-100) url(../images/sub/close.svg)no-repeat center; border-radius: var(--radius-m);}
.memberSelectBox .selectCloseBtn:hover{background-color: var(--gray-400);}
.memberList{margin-top: var(--spacing-ms); display: flex; flex-wrap: wrap; gap: var(--spacing-2xs);}
.memberList li{padding: var(--spacing-2xs) var(--spacing-xs); color: var(--gray-600); background-color: var(--gray-100); border-radius: var(--radius-xs); font-weight: var(--medium);}

@media (max-width: 768px){

  .memberSelectBox .memberSelectBox strong{font-size: var(--spacing-s);}
  .memberSelectBox .memberSelectBox{border-radius: var(--radius-s);}

}

@media (max-width: 576px){

  .memberSelectBox .memberSelectBox .memberSelectList li{width: 100%; max-width: none;}

}

@media (max-width: 480px){

  #select{max-width: none;}

}

/* 공통 - 폼 */
select:focus,
input:focus,
textarea:focus{outline: 0; border: 1px solid var(--primary-800)!important;}
.boardWriteFileBtn:focus,
textarea,
select:focus,
input:focus::placeholder{font-weight: var(--bold)!important;}

input{padding: var(--spacing-ms) var(--spacing-s); width: 100%; border: 1px solid var(--gray-100); border-radius: var(--radius-xs);  color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--medium);}
input::placeholder{color: var(--gray-600);}
#boardTitle{font-size: var(--font-size-xl); border-radius:var(--radius-s);}

@media (max-width: 1024px){

  .boardWriteBox{margin-bottom: var(--spacing-lm);}
  .boardWriteForm{padding: var(--spacing-s);}
  .boardWriteField.row{padding: var(--spacing-ms) 0;}

}

@media (max-width: 768px){

  #boardTitle{font-size: var(--font-size-l)!important;}

}

@media (max-width: 480px){

  .boardWriteField{padding-bottom: var(--spacing-s);}
  .boardWriteField.row{padding: var(--spacing-s) 0;}
  .boardWriteLabel{font-size: var(--font-size-s);}
  .boardWriteField.row{flex-direction: column; align-items: flex-start; gap: var(--spacing-xs) 0;}

  input{font-size: var(--font-size-s)!important;}

}

/* 공통 - 게시판(텍스트) */
.textBoardList{position: relative; padding-top: 3px;}
.textBoardList::before{content: ''; position: absolute; top:0; left:0; right:0; height: 1px; border: 1px solid #BF9F17;}
.textBoardList li{border-bottom: 1px solid var(--gray-100);}
.textBoardList li a{padding: var(--spacing-m) 0; display: flex; align-items: center; justify-content: space-between; gap: 0 var(--spacing-xl)}
.textBoardList li a .textBox h4{margin-bottom: var(--spacing-xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
.textBoardList li a .textBox h5{margin-bottom:var(--spacing-s); color: var(--gray-900); font-size: var(--H5);}
.textBoardList li a .textBox .date{margin-bottom: var(--spacing-m ); display: block; color: var(--gray-400); font-size: var(--font-size-s); font-weight: var(--medium);}
.textBoardList li a .imgBox{width: 376px; height: 199px; border-radius: var(--radius-m); overflow: hidden;}
.textBoardList li a .imgBox img{height: 100%; object-fit: cover;}
.textBoardList li a .participationBox{display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-s);}
.textBoardList li a .participationBox strong{flex-shrink: 0; color: var(--gray-600);}
.textBoardList li a .participationBox .participationList{display: flex; flex-wrap: wrap; gap: var(--spacing-2xs);}
.textBoardList li a .participationBox .participationList li{flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-m); overflow: hidden; background-color: var(--gray-100);}
.textBoardList li a .participationBox .participationList li img{height: 100%; object-fit: cover;}

@media (max-width: 1024px){

  .textBoardList li a .textBox h5{font-size: var(--H6);}

}

@media (max-width: 768px){

  .textBoardList li a .textBox{width: 100%;}
  .textBoardList li a .textBox h5{margin-bottom: var(--spacing-xs);}
  .textBoardList li a{flex-direction: column; gap: var(--spacing-ml) 0; text-align: center;}
  .textBoardList li a .imgBox{position: relative; width: 100%; height: 0; padding-top: 50%; border-radius: var(--radius-s);}
  .textBoardList li a .imgBox img{position: absolute; top:0; left:0; right:0; bottom: 0;}
  .textBoardList li a .participationBox{flex-direction: column; gap: var(--spacing-xs) 0;}

}

@media (max-width: 480px){

  .textBoardList li a .participationBox strong{font-size: var(--font-size-s);}
 
}

/* 공통 - 게시판(이미지) */
.photoBoardList{position: relative; padding-top: 43px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2xl) var(--spacing-s)}
.photoBoardList::before{content: ''; position: absolute; top:0; left:0; right:0; height: 1px; border: 1px solid #BF9F17; background-color: #F9F7F1;}
.photoBoardList li a{display: block;}
.photoBoardList li a .photoBoardImgBox{padding-top: 65%; margin-bottom: var(--spacing-m); position: relative; border-radius: var(--radius-m); overflow: hidden;}
.photoBoardList li a .photoBoardImgBox::after{content: ''; position: absolute;
    left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(
        to bottom,rgba(0, 0, 0, 0) 0%,rgba(30, 43, 55, 0.70) 40%,rgba(30, 43, 55, 0.96) 100%
    ); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);}
.photoBoardList li a .photoBoardImgBox .img{height: 100%; position: absolute; top:0; left:0; right:0; bottom: 0; object-fit: cover; transition: all 1.3s;}
.photoBoardList li a .photoBoardImgBox .participationBox{position: absolute; right: 0; left:24px; bottom: 26px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-s); z-index: 99;}
.photoBoardList li a .photoBoardImgBox .participationBox strong{flex-shrink: 0; color: var(--white);}
.photoBoardList li a .photoBoardImgBox .participationListBox{width: calc(100% - 63px); overflow-x: auto;}
.photoBoardList li a .photoBoardImgBox .participationListBox::-webkit-scrollbar-thumb{background-color: var(--gray-300);}
.photoBoardList li a .photoBoardImgBox .participationBox .participationList{display: flex; gap: var(--spacing-2xs);}
.photoBoardList li a .photoBoardImgBox .participationBox .participationList li{flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--radius-m); overflow: hidden; background-color: var(--gray-100);}
.photoBoardList li a .photoBoardImgBox .participationBox .participationList li img{height: 100%; object-fit: cover;}
.photoBoardList li a .photoBoardTextBox h4{margin-bottom: var(--spacing-xs); color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--bold);}
.photoBoardList li a .photoBoardTextBox h5{margin-bottom: var(--spacing-s); color: var( --gray-900); font-size: var(--H5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} 
.photoBoardList li a .photoBoardTextBox .date{display: block; color: var(--gray-400); font-size: var(--font-size-s); font-weight: var(--medium);}
/* .photoBoardList li a:hover .photoBoardImgBox .img{transform: scale(1.3);} */

@media (max-width: 1024px){

  .photoBoardList li a .photoBoardTextBox h5{font-size: var(--H6);}
  .photoBoardList li a .photoBoardImgBox::after{height: 80px;}
  .photoBoardList li a .photoBoardImgBox .participationListBox::-webkit-scrollbar-thumb{
    border: 5px solid transparent;}
  .photoBoardList li a .photoBoardImgBox .participationBox{left: 20px;}

}

@media (max-width: 768px){

  .photoBoardList li a .photoBoardImgBox{margin-bottom: var(--spacing-s); border-radius: var(--radius-s);}
  .photoBoardList li a .photoBoardTextBox h5{margin-bottom: var(--spacing-xs);}
  .photoBoardList{grid-template-columns: 1fr; gap: var(--spacing-xl) 0;}

}

@media (max-width: 576px){

  .photoBoardList li a .photoBoardImgBox .participationBox{bottom: 10px;}

}

@media (max-width: 480px){

  .photoBoardList{gap: var(--spacing-lm) 0;}
  .photoBoardList li a .photoBoardImgBox .participationBox strong{font-size: var(--font-size-s);}

}

@media (max-width: 360px){

  .photoBoardList li a .photoBoardImgBox::after{height: 55px;}

}

/* 폼 - 일정, 시간 */
.boardWriteTimeWrap,
.boardWriteDateWrap{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
.boardWriteDateWrap .boardWriteDateBox{max-width: 220px;}
.boardWriteDateBox{max-width: 188px; width: 100%; position: relative;}
.boardWriteDateBox .calendarBtn{width: 24px; height: 24px; position: absolute; top:50%; transform: translateY(-50%); right:16px; background: url(../images/sub/calendar_icon.svg)no-repeat center;}

/* 달력 */
#ui-datepicker-div {max-width: 280px; width: 100%; padding: var(--spacing-s); border: 1px solid var(--gray-100);
  border-radius: var(--radius-m); background: #EFF1F3; box-shadow: 10px 10px 40px rgba(0,0,0,.1); z-index: 9999 !important;}
#ui-datepicker-div .ui-datepicker-year,
#ui-datepicker-div .ui-datepicker-month {width: 72px; height: 32px; padding: 0 var(--spacing-xs);
  border-radius: var(--radius-xs); border: 0; background-color: var(--white); font-size: var(--body-2); font-weight: var(--bold); color: var(--gray-900); cursor: pointer;}
#ui-datepicker-div .ui-datepicker-header {position: relative; padding: 0 0 var(--spacing-s); border: 0; background: transparent;}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {position: absolute; top: 0; width: 32px; height: 32px;
  border-radius: 50%; background-color: var(--white); cursor: pointer;}
#ui-datepicker-div .ui-datepicker-prev {left: 0;}
#ui-datepicker-div .ui-datepicker-next {right: 0;}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {display: none;}
#ui-datepicker-div .ui-corner-all:hover{border: 0;}
#ui-datepicker-div .ui-corner-all::before{content: '';}
#ui-datepicker-div .ui-datepicker-prev::before {background: url(../images/sub/arrow.svg)no-repeat center;}
#ui-datepicker-div .ui-datepicker-next::before {transform: rotate(180deg);
  background: url(../images/sub/arrow.svg)no-repeat center;}
.ui-datepicker .ui-datepicker-title{display: flex; align-items: center; justify-content: center; gap: 0 var(--spacing-2xs); margin: 0!important; line-height: 1!important;}
#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: 24px; color: var(--gray-900);}
#ui-datepicker-div .ui-datepicker-calendar {width: 100%; border-collapse: collapse;}
#ui-datepicker-div .ui-datepicker-calendar th {padding: var(--spacing-xs) 0; font-weight: var(--bold); font-size: var(--font-size-s); color: var(--gray-600);}
#ui-datepicker-div .ui-datepicker-calendar td {padding: var(--spacing-3xs); text-align: center;}
#ui-datepicker-div .ui-datepicker-calendar td a {display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; color: var(--gray-600); border-radius: 50%; font-weight: var(--medium);
  background-color: var(--white); text-decoration: none; border-radius: var(--radius-2xs); border: 0;}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {background: var(--gray-100);}
#ui-datepicker-div .ui-datepicker-today a {background-color: var(--primary-500)!important; color: var(--white)!important;
  font-weight: var(--bold)!important;}
#ui-datepicker-div .ui-datepicker-current-day a,
#ui-datepicker-div .ui-state-active {background: var(--primary-800) !important; color: #fff !important; font-weight: var(--bold)!important;}
#ui-datepicker-div .ui-state-disabled span {padding: 0; text-align: center; border: 0;
  font-weight: var(--medium); font-size: var(--body-2); color: var(--gray-400);}
#ui-datepicker-div .ui-datepicker-buttonpane {margin: var(--spacing-s) 0 0; padding: var(--spacing-xs) 0 0;
  border-top: 1px solid var(--gray-100); background: transparent;}
#ui-datepicker-div .ui-datepicker-close {margin: 0; width: 64px; height: 28px;
  padding: 0 var(--spacing-xs); border-radius: var(--radius-xs); background: #fff; font-weight: var(--bold);
  font-size: var(--font-size-s); color: var(--gray-600); cursor: pointer; text-align: center; border: 0;}
#ui-datepicker-div .ui-datepicker-current {display: none;}

.boardWriteTimeBox{max-width: 165px; width: 100%; padding: var(--spacing-xs) var(--spacing-s); display: flex; align-items: center; gap: 0 var(--spacing-xs); background-color: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-xs);}
.boardWriteTimeBox input{height: 32px; padding: 0!important; font-size: var(--font-size-s); text-align: center; border-radius: var(--radius-2xs);}

@media (max-width: 480px){

  .boardWriteTimeWrap,
  .boardWriteDateWrap{flex-direction: column; gap: 0;}
  .boardWriteTimeWrap .boardWriteTimeBox,
  .boardWriteDateWrap .boardWriteDateBox{max-width: none; width: 100%;}

}

/* 의회에바란다 - 목록 */
.hopeListBox .hopeInfoTextBox{margin-bottom: var(--spacing-m);}
.hopeListBox .hopeInfoTextBox .hopeInfoText{padding: var(--spacing-m); border: 1px solid var(--gray-600); border-radius: var(--radius-m); background-color: var(--white); box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1);}
.hopeListBox .myPost{padding: var(--spacing-s); color: var(--white); border-radius: var(--radius-s); color: #fff; font-weight: var(--bold); background: linear-gradient(to right, var(--primary-500), var(--secondary-500));}
.hopeListBox .boardCountWrap{display: flex; align-items: flex-end; justify-content: space-between;}
.boardListTable .state{display: inline-block; padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-xs); font-weight: var(--bold); font-size: var(--font-size-s);}
.boardListTable .state.review{background-color: #F96A6A; color: var(--white);}
.boardListTable .state.complete{background-color: #41B75B; color: var(--white);}
.boardListTable .state.receipt{color: var(--gray-600); border: 1px solid var(--gray-100);}

@media (max-width: 1024px){

  .boardListTable .state{margin-top: var(--spacing-ms);}
  .boardListTable tbody tr td.category{flex-basis:100%; text-align: left;}

}

@media (max-width: 768px){

  .hopeListBox .hopeInfoTextBox .hopeInfoText{padding: var(--spacing-s);}
  .hopeListBox .hopeInfoTextBox .hopeInfoText br{display: none;}
  
}

@media (max-width: 480px){

  .hopeListBox .myPost{ border-radius: var(--radius-xs);}
  .hopeListBox .boardCountWrap{flex-direction: column; flex-direction: column-reverse; align-items: flex-start; gap: var(--spacing-s) 0;}

}

/* 의회에바란다 - 상세 */
.hopeViewBox .boardViewBox{padding: var(--spacing-lm) var(--spacing-ml); border: 2px solid var(--gray-100); border-radius: var(--radius-l);}
.hopeViewBox .boardViewBox::after{display: none;}
.hopeViewBox .boardViewTopBox{padding:0 0 var(--spacing-lm);}
.hopeViewBox .boardViewTopBox h4{text-align: left; font-size: var(--H4);}
.hopeViewBox .boardViewTopBox .boardViewInfoBox{ justify-content: flex-start;}
.hopeViewBox .boardViewStateBox em{display: inline-block; padding: var(--spacing-2xs) var(--spacing-xs); border-radius: var(--radius-xs); font-weight: var(--bold); font-size: var(--font-size-s); font-style: normal;}
.hopeViewBox .boardViewStateBox .opinion{background-color: var(--gray-100); color: var(--gray-600);}
.hopeViewBox .boardViewStateBox .answer{background-color: #41B75B; color: var(--white);}
.hopeViewBox .boardViewStateBox{margin-bottom: var(--spacing-lm); display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-s);}
.hopeViewBox .boardViewStateBox p{display: flex; align-items: center; gap: 0 var(--spacing-2xs); color: var(--gray-600); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.hopeViewBox .boardViewStateBox p::before{content:''; width: 6px; height: 6px; border-radius: var(--radius-2xs);}
.hopeViewBox .boardViewStateBox p.receipt::before{ background-color: var(--gray-200);}
.hopeViewBox .boardViewStateBox p.review::before{ background-color: #F96A6A;}
.hopeViewBox .boardViewStateBox p.complete::before{ background-color: #41B75B;}
.hopeViewBox .answerBox .answerManagerBox{position: relative; display: flex; align-items: center; gap: 0 0; padding: var(--spacing-m); border: 1px solid var(--gray-600); border-radius: var(--radius-m); box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1);}
.hopeViewBox .answerBox .answerManagerBox .answerBtn{min-height: 56px; padding: var(--spacing-xs) var(--spacing-s); position: absolute; top: 50%; transform: translateY(-50%); right:24px; border-radius: var(--radius-s); background-color: var(--primary-500); color: var(--white);}
.hopeViewBox .answerBox .managerLabel{width: 120px; flex-shrink: 0; font-size: var(--Subtitle-2); font-weight: var(--bold); color: var(--gray-600);}
.hopeViewBox .answerBox .managerLabel .required{color: var(--warning-500);}
.hopeViewBox .answerBox .managerBox{display: flex; flex-direction: column; gap: var(--spacing-s) 0;}
.hopeViewBox .answerBox .managerSelectWrap{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
.hopeViewBox .answerBox .managerSelectWrap .managerSelect{min-width: 57px; height: 36px; display: inline-block; padding: var(--spacing-xs); border-radius: var(--radius-s); font-size: var(--font-size-s); font-weight: var(--bold); text-align: center;}
.hopeViewBox .answerBox .managerSelectBox{position: relative;}
.hopeViewBox .answerBox .managerSelectBox .managerSelectBtn{padding: var(--spacing-xs) var(--spacing-s); display: flex; align-items: center; gap: 0 var(--spacing-xs); border: 1px solid var(--gray-100); border-radius: var(--radius-s); color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--bold);}
.hopeViewBox .answerBox .managerSelectBox .managerSelectBtn::after{content: ''; width: 24px; height: 24px; background: url(../images/sub/arrow_icon08.svg)no-repeat center;}
.hopeViewBox .answerBox .managerSelectBox .managerSelectList{padding: var(--spacing-xs) 0;
    position: absolute; top: 56px; left: 0; right: 0; border: 1px solid var(--gray-100);   border-radius: var(--radius-xs); box-shadow: 10px 10px 40px rgba(0, 0, 0, .1);
    z-index: 9999; background-color: var(--white); color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--bold);}
.hopeViewBox .answerBox .managerSelectBox .managerSelectList li .managerListBtn{display: block; padding: var(--spacing-xs) var(--spacing-s);}
.hopeViewBox .answerBox .managerBox p{color: var(--gray-400); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.hopeViewBox .answerBox .managerBox p strong{color: var(--gray-600); font-weight: var(--semi-bold);}
.hopeViewBox .answerBox .boardViewBox{border: 1px solid var(--gray-600); box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1);}

@media (max-width: 1024px){

  .hopeViewBox .boardViewBox{padding: var(--spacing-ml) var(--spacing-ms); border-radius: var(--radius-m); border: 1px solid var(--gray-100)}
  .hopeViewBox .boardViewTopBox h4{font-size: var(--H5);}

}

@media (max-width: 768px){

  .hopeViewBox .answerBox .answerManagerBox{flex-direction: column; gap: 20px; align-items: center;}
  .hopeViewBox .answerBox .answerManagerBox .answerBtn{position: static; transform: none;}

}

@media (max-width: 480px){

  .hopeViewBox .boardViewStateBox{margin-bottom: var(--spacing-ml);}
  .hopeViewBox .boardViewTopBox{padding: 0 0 var(--spacing-m);}
  .hopeViewBox .boardViewTopBox .boardViewInfoBox{justify-content: center;}
  .hopeViewBox .boardViewTopBox h4{text-align: center;}
  .hopeViewBox .answerBox .managerSelectWrap{flex-direction: column; gap: var(--spacing-xs) 0;}
  .hopeViewBox .answerBox .managerBox,
  .hopeViewBox .answerBox .managerLabel{width: 100%; text-align: center;}

}
/* 방청/견학안내 */
.visitGuideBox .visitGuideTitle{margin-bottom: var(--spacing-m); font-weight: var(--medium); line-height: 1.6; color: var(--gray-900); font-size: var(--font-size-xxxl);}
.visitGuideBox .visitGuideTopWrap{margin-bottom: var(--spacing-3xl); padding: var(--spacing-lm) var(--spacing-m); display: flex; gap: 0 var(--spacing-lm); border-radius: var(--radius-m); background-color: var(--gray-50);}
.visitGuideBox .visitGuideTopBox{flex: 1;}
.visitGuideBox .visitGuideTopBox h4{margin-bottom: var(--spacing-s);}
.visitGuideBox .visitGuideTopBox .visitGuideInfoText{margin-bottom: var(--spacing-3xl); display: inline-flex; gap: 0 var(--spacing-2xs); margin-bottom: var(--spacing-m); padding: var(--spacing-xs); font-size: var(--font-size-s); color: var(--gray-900); border-radius: var(--radius-s);  background-color: var(--white); border: 1px solid var(--gray-100); font-family: 'RiaSans'; box-shadow: 0 4px 40px rgba(30, 43, 55, 0.1);}
.visitGuideBox .visitGuideTopBox .visitGuideInfoText::before{content: ''; flex-shrink: 0; width: 20px; height: 20px; background: url(../images/sub/accent_icon.svg)no-repeat center;}
.visitGuideBox .visitGuideApplicationBox{margin-bottom: var(--spacing-m);}
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox{position: relative; padding-left: 224px;}
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox::before{content: ''; width: 160px; height: 160px; position: absolute; top:0; left:0; background: url(../images/sub/visit_guide_img.svg)no-repeat center / contain;}
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl{padding: var(--spacing-ms) 0; display: flex; gap: 0 var(--spacing-m); border-bottom: 1px dashed var(--gray-600);} 
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl:last-child{border-bottom: 0;}
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl dt{flex-shrink: 0;  color: var(--gray-900); font-weight: var(--bold); font-size: var(--H5);}
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl dd{color: var(--gray-600); font-size: var(--body-1);}
.visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox .downloadBtn{display: inline-block; margin-top: var( --spacing-s); padding: var(--spacing-xs) var(--spacing-s); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white); background-color: var(--gray-600); border-radius: var(--radius-s);}
.visitGuideBox .visitGuideInquiryWrap{display: flex; align-items: flex-start; padding: var(--spacing-m); border-radius: var(--radius-m); border: 2px solid var(--primary-500);}
.visitGuideBox .visitGuideInquiryWrap span{margin-right: var(--spacing-s); width: 60px; height: 34px; display: flex; align-items: center; justify-content: center; background-color: var(--primary-900); color: var(--stat-point); border-radius: var(--radius-s);}
.visitGuideBox .visitGuideInquiryWrap h5{padding-top: var(--spacing-2xs); margin-right: var(--spacing-lm); color: var(--gray-600); font-size: var(--H6); font-weight: var(--bold);}
.visitGuideBox .visitGuideInquiryBox dl::before{content: ''; position: absolute; top:10px; left:0; width: 3px; height: 3px; border-radius: 16px; background-color: var(--gray-600);}
.visitGuideBox .visitGuideInquiryBox dl{padding-left: var(--spacing-xs); position: relative; margin-bottom: var(--spacing-s); display: flex; align-items: center; gap: 0 var(--spacing-2xs);}
.visitGuideBox .visitGuideInquiryBox dl:last-child{margin-bottom: 0;}
.visitGuideBox .visitGuideInquiryBox dl dt{color: var(--gray-600); font-weight: var(--bold);}
.visitGuideBox .visitGuideInquiryBox dl dd{color: var(--gray-600);}

@media (max-width: 1024px){

  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl dt,
  .visitGuideBox .visitGuideTitle{font-size: var(--font-size-xxl);}

}

@media (max-width: 768px){

  .visitGuideBox .visitGuideTopWrap{flex-direction: column; gap: var(--spacing-lm) 0;}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox::before{width: 140px; height: 140px;}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox{padding-left: 180px;}
  .visitGuideBox .visitGuideInquiryWrap{flex-direction: column; align-items: center; gap: var(--spacing-s) 0;}
  .visitGuideBox .visitGuideInquiryWrap span{margin: 0;}
  .visitGuideBox .visitGuideInquiryBox dl{margin-bottom: var(--spacing-xs);}
  .visitGuideBox .visitGuideInquiryWrap h5{margin: 0; padding: 0; font-size: var(--font-size-l);}
  
}

@media (max-width: 576px){

  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox{padding: 0;}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox::before{left: 50%; transform: translateX(-50%);}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl{flex-direction: column; align-items: flex-start; gap: var(--spacing-s) 0;}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl dt{width: 100%; text-align: center;}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox::before{display: none; width: 125px; height: 125px;}

}

@media (max-width: 480px){

  .visitGuideBox .visitGuideTopWrap{margin-bottom: var(--spacing-xl);}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl dt,
  .visitGuideBox .visitGuideTitle{font-size: var(--font-size-l);}
  .visitGuideBox .visitGuideTopBox .visitGuideInfoText{margin-bottom: var(--spacing-ms);}
  .visitGuideBox .visitGuideApplicationBox .visitGuideInfoBox dl{gap: var(--spacing-xs) 0;}
  .visitGuideBox .visitGuideInquiryWrap span{font-size: var(--font-size-s);}
  .visitGuideBox .visitGuideInquiryWrap h5{font-size: var(--font-size-m);}
  

}

/* 공통 - 질문텍스트 */
.questionText{padding-left: var(--spacing-xl); position: relative; margin-bottom: var(--spacing-m); font-size: var(--H5); font-weight: var(--bold); color: var(--gray-400);}
.questionText::before{content: ''; margin-top: -2px; position: absolute; top:0; left:0; width: 40px; height: 40px; background: url(../images/sub/question.svg)no-repeat center / contain;}
.questionText .color01{color: var(--gray-900);}
.questionText .color02{color: var(--primary-500);}

@media (max-width: 1024px){

  .questionText{padding-left: var(--spacing-l); font-size: var(--font-size-xxl);}
  .questionText::before{width: 35px; height: 35px; }

}

@media (max-width: 480px){

  .questionText{padding-left: var(--spacing-lm); font-size: var(--font-size-l);}
  .questionText::before{width: 30px; height: 30px;}

}

/* 공통 - 게시판 안내 텍스트 */
.boardInfoTextBox{margin: var(--spacing-s) 0 var(--spacing-m); padding: var(--spacing-m); border-radius: var(--radius-m); border: 1px solid var(--gray-600); background-color: var(--white); box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1);}
.boardInfoTextBox .boardInfoText{color: var(--gray-600);} 
.boardInfoTextBox{margin-bottom: var(--spacing-2xl);}
.boardInfoTextBox .boardInfoText{margin-bottom: var(--spacing-s); padding-bottom: var(--spacing-s); border-bottom: 1px solid var(--gray-100);}
.boardInfoTextBox h5{margin-bottom:var(--spacing-xs); color: var(--gray-900); font-size: var(--Subtitle-2);}
.boardInfoTextBox .bulletIcon{margin-bottom: var(--spacing-s);}
.boardInfoTextBox .chkBtn{max-width: none; background-color: var(--gray-50);}
.boardInfoTextBox .link{margin: var(--spacing-xs) 0; display: inline-block; padding: var(--spacing-xs) var(--spacing-s); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white); border-radius: var(--radius-s); background-color: var(--gray-600);}

@media (max-width: 480px){

  .boardInfoTextBox{padding: var(--spacing-ms) var(--spacing-s); border-radius: var(--spacing-s);}
  .boardInfoTextBox .boardInfoText br{display: none;}

}

/* 주민조례청구 */
.residentOrdinanceBox .residentOrdinanceTopBox{margin-bottom: var(--spacing-lm); position: relative; display: flex; align-items: center; justify-content: center; height: 351px; background: url(../images/sub/residen_ordinance_img.png)no-repeat center / cover; border-radius: var(--radius-m); overflow: hidden; z-index: 1;}
.residentOrdinanceBox .residentOrdinanceTopBox::after{content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(30, 43, 55, 0) 0%, rgba(30, 43, 55, 1) 100%); z-index: -1;}
.residentOrdinanceBox .residentOrdinanceTopBox p{gap: var(--spacing-s) 0; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: var(--bold); font-size: var(--H1); color: var(--white);}
.residentOrdinanceBox .residentOrdinanceTopBox p::before{content: ''; width: 93px; height: 83px; background: url(../images/sub/residen_ordinance_icon.svg)no-repeat center / contain;}
.residentOrdinanceBox .questionBox{margin-bottom: var(--spacing-2xl);}
.residentOrdinanceBox .questionBox .questionDescription{color: var(--gray-600);}
.residentOrdinanceBox .residentOrdinanceMethodBox{display: flex; gap: 0 var(--spacing-3xl); margin: var(--spacing-5xl) 0 var(--spacing-3xl);}
.residentOrdinanceBox .residentOrdinanceMethodBox .methodText{font-size: var(--H1); font-weight: var(--bold); color: var(--gray-400); line-height: 1.6;}
.residentOrdinanceBox .residentOrdinanceMethodBox .methodText .color01{color: var(--gray-900);}
.residentOrdinanceBox .residentOrdinanceMethodBox .methodText .color02{color: var(--primary-500);}
.residentOrdinanceBox .methodDescriptionBox{flex: 1;}
.residentOrdinanceBox .methodDescriptionBox .methodDescriptionListBox{margin-bottom: var(--spacing-lm); padding: var(--spacing-lm); background-color: var(--gray-50); border-radius: var(--radius-m );}
.residentOrdinanceBox .methodDescriptionBox .box{margin-bottom: var(--spacing-lm);}
.residentOrdinanceBox .methodDescriptionBox .box:last-child{margin-bottom: 0;}
.residentOrdinanceBox .methodDescriptionBox .box .tit{display: flex; gap: 0 var(--spacing-s); margin-bottom: var(--spacing-m); color: var(--gray-600); font-size: var(--H6); font-weight: var(--bold);}
.residentOrdinanceBox .methodDescriptionBox .box .tit::before{content: ''; margin-top: 3px; width: 22px; height: 17px; background: url(../images/sub/chk_icon02.svg)no-repeat center / contain;}
.residentOrdinanceBox .methodDescriptionBox .processLayoutBox{padding: var(--spacing-lm); border-radius: var(--radius-m); border: 1px solid var(--gray-600); box-shadow: 8px 8px 40px rgba(30, 43, 55, 0.1);}
.residentOrdinanceBox .methodDescriptionBox .processLayoutBox .tit{margin-bottom: var(--spacing-lm);}
.residentOrdinanceBox .methodDescriptionBox .processList{margin-bottom: var(--spacing-lm);}
.residentOrdinanceBox .methodDescriptionBox .processList li:nth-child(1) .step::after{background: url(../images/sub/step_icon14.svg)no-repeat center / contain;}
.residentOrdinanceBox .methodDescriptionBox .processList li:nth-child(2) .step::after{background: url(../images/sub/step_icon15.svg)no-repeat center / contain;}
.residentOrdinanceBox .methodDescriptionBox .processList li:nth-child(3) .step::after{background: url(../images/sub/step_icon14.svg)no-repeat center / contain;}
.residentOrdinanceBox .methodDescriptionBox .processList li:nth-child(4) .step::after{background: url(../images/sub/step_icon15.svg)no-repeat center / contain;}
.residentOrdinanceBox .chairmanMessageBox{border-top: 1px dashed var(--gray-600); display: flex; align-items: center; gap: 0 var(--spacing-lm);}
.residentOrdinanceBox .chairmanMessageBox .chairmanImgBox img{width: 186px;}
.residentOrdinanceBox .chairmanMessageBox .chairmanTextBox .name{display: block; margin-bottom: var(--spacing-s); color: var(--gray-900); font-weight: var(--semi-bold);}
.residentOrdinanceBox .chairmanMessageBox .chairmanTextBox p{color: var(--gray-600); font-weight: var(--medium); font-size: var(--H6);}

@media (max-width: 1024px){


  .residentOrdinanceBox .residentOrdinanceTopBox p::before{width: 73px; height: 63px;}
  .residentOrdinanceBox .residentOrdinanceTopBox p{font-size: var(--H4);}
  .residentOrdinanceBox .residentOrdinanceMethodBox{flex-direction: column; gap: var(--spacing-ml) 0;}
  .residentOrdinanceBox .residentOrdinanceMethodBox .methodText{font-size: var(--H4); line-height: 1.5;}
  .residentOrdinanceBox .chairmanMessageBox .chairmanTextBox p{font-size: var(--font-size-l);}

}

@media (max-width: 768px){

  .residentOrdinanceBox .residentOrdinanceTopBox{height: 290px;}
  .residentOrdinanceBox .residentOrdinanceTopBox p::before{width: 63px; height: 53px;}
  .residentOrdinanceBox .residentOrdinanceTopBox p{gap: var(--spacing-xs) 0; font-size: var(--H5);}

  .residentOrdinanceBox .residentOrdinanceMethodBox{gap: var(--spacing-m) 0;}
  .residentOrdinanceBox .residentOrdinanceMethodBox .methodText{font-size: var(--H5);}
  .residentOrdinanceBox .methodDescriptionBox .methodDescriptionListBox{padding: var(--spacing-lm) var(--spacing-m);}
  .residentOrdinanceBox .methodDescriptionBox .box .tit::before{width: 18px; height: 13px;}
  .residentOrdinanceBox .methodDescriptionBox .box .tit{font-size: var(--font-size-l);}

  .residentOrdinanceBox .chairmanMessageBox{gap: var(--spacing-ms) 0;  flex-direction: column; text-align: center;}

}

@media (max-width: 480px){

  .residentOrdinanceBox .methodDescriptionBox .processLayoutBox{padding:0; box-shadow: none; background-color: 0; border: 0;}
  .residentOrdinanceBox .questionBox .questionDescription br{display: none;}
  .residentOrdinanceBox .residentOrdinanceMethodBox{margin: var(--spacing-3xl) 0;}
  .residentOrdinanceBox .chairmanMessageBox .chairmanTextBox p{font-size: var(--font-size-m);}

}

/* 의정활동 정보공개 */
.activityBox .activityInfoBox{margin-bottom: var(--spacing-2xl);}
.activityBox .activityInfoBox h4{margin-bottom: var(--spacing-s);}
.activityBox .activityInfoBox .activityList{margin-top: var(--spacing-xs);}
.activityBox .activityInfoBox .activityList li{margin-bottom: var(--spacing-xs);}
.activityBox .activityInfoBox .activityList li:last-child{margin-bottom: 0;}
.activityBox .activityInfoBox .activityList li span{display: inline-block; padding: var(--spacing-xs); color: var(--gray-600); font-weight: var(--semi-bold); font-size: var(--font-size-s); border-radius: var(--radius-xs); background-color: var(--gray-100);}
.activityBox .activityTitle{display: flex; align-items: center; gap: 0 var(--spacing-xs); margin-bottom: var(--spacing-m); color: var(--gray-900); font-size:var(--H5);}
.activityBox .activityTitle::before{content: ''; width: 24px; height: 24px; background: url(../images/sub/badge.svg)no-repeat center;}
.activityBox .publicItemWrap{display: flex; gap: var(--spacing-m);}
.activityBox .publicItemBox{flex: 1; padding: var(--spacing-ml) var(--spacing-m); border-radius: var(--radius-m); border: 1px solid var(--gray-600);}
.activityBox .publicItemBox h5{margin-bottom: var(--spacing-s); color: var(--gray-900); font-size: var(--font-size-m);}
.activityBox .publicItemBox .bulletDot li{margin-bottom: var(--spacing-xs);} 
.activityBox .publicItemBox .bulletDot li a{display: inline-block; text-decoration: underline;} 
.activityBox .publicItemBox .bulletDot li:last-child{margin-bottom: 0;}

@media (max-width: 1024px){

  .activityBox .publicItemWrap{gap: var(--spacing-s);}

}

@media (max-width: 768px){

  .activityBox .publicItemWrap{flex-direction: column;}

}

@media (max-width: 576px){

  .activityBox .activityTitle{font-size: var(--H6);}

}

/* 의원별 회의 출석율 현황 */
.attendanceRateTopBox{display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs); margin-bottom: var(--spacing-ml);}
.attendanceRateTopBox .btn{min-width: 69px; height: 36px; font-size: var(--font-size-s);}
.attendanceRateTopBox .selectLayoutBox{display: flex; align-items: center; gap: 0 26px;}
.attendanceRateTopBox .termSelectBtn{min-width: auto; width: auto; padding: 0; gap: 0 var(--spacing-xs); justify-content: flex-start; border: 0;}
.attendanceRateTopBox .memberSelectBtn{position: relative;}
.attendanceRateTopBox .memberSelectBtn::before{content: ''; position: absolute; top:16px; left:-17px; width: 5px; height: 5px; border-radius: var(--radius-s); background-color: var(--gray-400); border: 0;}
.attendanceRateTopBox .termSelectBtn span{font-size: var(--font-size-xxxl); color: var(--gray-600); font-weight: var(--bold);}
.attendanceRateStatusList > li{margin-bottom: var(--spacing-m); padding: var(--spacing-ml); border: 1px solid var(--gray-100); border-radius: var(--radius-m);}
.attendanceRateStatusList > li:last-child{margin-bottom: 0;}
.attendanceRateStatusList li .memberInfoWrap{margin-bottom: var(--spacing-m); display: flex; align-items: center; justify-content: space-between;}
.attendanceRateStatusList li .memberInfoBox{ display: flex; align-items: center; gap: 0 var(--spacing-s);}
.attendanceRateStatusList li .memberInfoBox .imgBox{width: 64px; height: 64px; border-radius: var(--radius-m); background-color: var(--gray-100); overflow: hidden;}
.attendanceRateStatusList li .memberInfoBox .imgBox img{height: 100%; object-fit: cover;}
.attendanceRateStatusList li .memberInfoBox .textBox .name{display: block; margin-bottom: var(--spacing-2xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--H6);}
.attendanceRateStatusList li .memberInfoBox .textBox em{font-style: normal; color: var(--gray-600); font-weight: var(--medium); font-size: var(--body-2);}
.attendanceRateStatusList li .memberInfoBtnBox{padding: 0 var(--spacing-xs); display: flex; align-items: center; max-width: 238px; width: 100%; border: 1px solid var(--gray-200); border-radius: var(--radius-s);}
.attendanceRateStatusList li .memberInfoBtnBox .memberInfoBtn{ flex: 1; height: 48px; color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--bold); text-align: center;}
.attendanceRateStatusList li .attendanceRateInfoBox{position: relative; margin-bottom: var(--spacing-lm); background-color: var(--gray-100); border-radius: var(--radius-xs); overflow: hidden;}
.attendanceRateStatusList li .attendanceRateInfoBox .attendanceRateInfoBar{position: absolute; top:0; left:0; bottom: 0; border-radius: var(--radius-xs); background: linear-gradient(to right, var(--gray-600), var(--gray-500));}
.attendanceRateStatusList li .attendanceRateInfoText{position: relative; padding: var(--spacing-xs) var(--spacing-s); font-size: var(--body-2); color: var(--white); line-height: 1.2;}
.attendanceRateList{display: flex; gap: var(--spacing-ml);}
.attendanceRateList li{flex: 1;}
.attendanceRateList li .category{margin-bottom: var(--spacing-s); display: inline-flex; align-items: center; gap: 0 var(--spacing-2xs); padding: var(--spacing-xs); background-color: var(--gray-100); border-radius: var(--radius-xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
.attendanceRateList li .category::before{content: ''; width: 8px; height: 8px; border-radius: 50%;} 
.attendanceRateList li .attendanceRatePercentBox01{margin-bottom: var(--spacing-xs); display: flex; align-items: center; justify-content: space-between;}
.attendanceRateList li .attendanceRatePercentBox01 span{color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s);}
.attendanceRateList li .attendanceRatePercentBox01 .percent{color: var(--gray-400); font-weight: var(--bold); font-size: var(--font-size-s); font-style: normal;}
.attendanceRateList li .attendanceRatePercentBox02{margin-bottom: var(--spacing-xs); height: 4px; background-color: var(--gray-100); border-radius: var(--radius-2xs);}
.attendanceRateList li .attendanceRateStatus{display: flex; flex-wrap: wrap; gap: var(--spacing-2xs);}
.attendanceRateList li .attendanceRateStatus .attendanceRateStatusItem{padding: var(--spacing-2xs) var(--spacing-xs); border: 1px solid var(--gray-100); border-radius: var(--radius-xs); font-size: var(--font-size-xs);}
.attendanceRateList li .attendanceRatePercent{display: block; height: 100%;     border-radius: var(--radius-2xs);}
.attendanceRateList li.plenary .category::before,
.attendanceRateList li.plenary .attendanceRatePercent{background-color: #FF8539;} 
.attendanceRateList li.budgetSpecial .category::before,
.attendanceRateList li.budgetSpecial .attendanceRatePercent{background-color: #61ACF6;}
.attendanceRateList li.ordinanceSpecial .category::before,
.attendanceRateList li.ordinanceSpecial .attendanceRatePercent{background-color: #5D3FD3;}
.attendanceRateList li.auditSpecial .category::before,
.attendanceRateList li.auditSpecial .attendanceRatePercent{background-color: #C77654;}

@media (max-width: 1024px){

  .attendanceRateList{flex-wrap: wrap;}
  .attendanceRateList li{flex: 1 1 calc(50% - 16px);}

}

@media (max-width: 768px){

  .attendanceRateStatusList > li{padding: var(--spacing-ml) var(--spacing-s);}
  .attendanceRateList li{flex: 100%;}
  .attendanceRateStatusList li .memberInfoBox .textBox .name{font-size: var(--font-size-l);}
  .attendanceRateTopBox .termSelectBtn span{font-size: var(--font-size-xxl);}

}

@media (max-width: 576px){

  .attendanceRateStatusList li .attendanceRateInfoBox{margin-bottom: var(--spacing-ml);}
  .attendanceRateStatusList li .memberInfoWrap{flex-direction: column; gap: var(--spacing-ms) 0;}

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

}

/* 의회용어 */
.councilTermsBox .councilTermsList{position: relative; padding-top: 3px;}
.councilTermsBox .councilTermsList .termItem{padding: var(--spacing-lm) 0; display: flex; border-bottom: 1px solid var(--gray-100);}
.councilTermsBox .councilTermsList .termItem dt{width: 184px; flex-shrink: 0; font-size: var(--font-size-xl); font-weight: var(--bold);}
.councilTermsBox .councilTermsList .termItem dd{color: var(--gray-600); font-size: var(--body-1); line-height: 1.6;}
.councilTermsBox .initialFilter{margin-bottom: var(--spacing-lm); display: flex; flex-wrap: wrap; gap: var(--spacing-xs)}
.councilTermsBox .initialFilter .initialFilterBtn{display: flex; align-items: center; justify-content: center; width: 32px; height: 37px; border-radius: var(--radius-s); color: var(--gray-400); font-weight: var(--bold); font-size: var(--Subtitle-1);}
.councilTermsBox .initialFilter .initialFilterBtn.active{background-color: var(--primary-800); color: var(--white);}
.councilTermsBox .initialResult{margin-bottom: var(--spacing-s);}
.councilTermsBox .initialResult .initialResultTitle{color: var(--gray-600); font-weight: var(--bold); font-size: var(--H6);}
.councilTermsBox .initialResult .initialResultTitle strong{color: var(--primary-500); font-size: var(--H4);}

@media (max-width: 1024px){

  .councilTermsBox .councilTermsList .termItem dt{width: 130px;}

}

@media (max-width: 768px){

  .councilTermsBox .councilTermsList .termItem dt{width: auto; font-size: var(--font-size-l);}
  .councilTermsBox .councilTermsList .termItem{flex-direction: column; align-items: center; gap: var(--spacing-ms) 0;}
  .councilTermsBox .initialResult .initialResultTitle strong{font-size: var(--H5);}

}

@media (max-width: 480px){

  .councilTermsBox .councilTermsList .termItem{padding: var(--spacing-ml) 0;}

}

/* 행사일정 */
.calendarWrap{display: flex; min-height: 658px; border-radius: var(--radius-l); border: 4px solid var(--gray-100); border-radius: var(--radius-l); overflow: hidden;  background-color: var(--gray-50);} 
.calendarScheduleBox{display: flex; flex-direction: column; padding: var(--spacing-ml) var(--spacing-m); width: 360px; flex-shrink: 0; border-radius: var(--radius-m); background-color: var(--white);} 
.calendarScheduleBox .date{display: block; margin-bottom: var(--spacing-xs); color: #9AAF4E; font-weight: var(--bold); font-size: var(--H5);} 
.calendarScheduleBox h4{margin-bottom: var(--spacing-ml); color: var(--gray-900); font-weight: var(--medium); font-size: var(--font-size-xl);} 
.calendarScheduleBox .calendarScheduleList{margin-bottom: var(--spacing-ms); height: 417px; overflow-y: auto;}
.calendarScheduleBox .calendarScheduleList li{position: relative; padding: var(--spacing-s); margin-bottom: var(--spacing-s); background-color: var(--gray-50); border-radius: var(--radius-xs);}
.calendarScheduleBox .calendarScheduleList li::after{content: ''; position: absolute; left:16px; bottom: -16px; width: 1px; height: 16px; background-color: var(--gray-100);}
.calendarScheduleBox .calendarScheduleList li:last-child:after{display: none;}
.calendarScheduleBox .calendarScheduleList li .time{display: flex; align-items: center; gap: 0 var(--spacing-xs); margin-bottom: var(--spacing-xs);color: var(--gray-600); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.calendarScheduleBox .calendarScheduleList li .time::before{content: ''; width: 4px; height: 4px; background-color: var(--gray-600); border-radius: 50%;}
.calendarScheduleBox .calendarScheduleList li p{padding: var(--spacing-xs); background-color: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-xs); color: var(--gray-900); font-size: var(--Subtitle-1); font-weight: var(--medium);}
.calendarScheduleBox .btn{margin-top: auto; width: 100%;}
.calendarScheduleBox .scheduleEmptyBox{padding: var(--spacing-ml);}
.calendarScheduleBox .scheduleEmptyContentBox{position: relative; padding-top: var(--spacing-3xl);}
.calendarScheduleBox .scheduleEmptyContentBox::after{content: ''; width: 72px; height: 72px; position: absolute; left: 50%; transform: translateX(-50%); top:0; background: url(../images/sub/document_icon.svg) no-repeat center / contain;}
.calendarScheduleBox .scheduleEmptyTitle{margin-bottom: var(--spacing-2xs);font-weight: var(--bold); font-size: var(--Subtitle-1); text-align: center;
  color: var(--gray-600);}
.calendarScheduleBox .scheduleEmptyText{font-size: var(--body-2); text-align: center;
    color: var(--gray-400);}
.calendarBox{width: 100%; padding: var(--spacing-ml);}
.calendarBox .calendarHeader{margin-bottom: var(--spacing-m); display: flex; align-items: center; justify-content: center; gap: 0 var(--spacing-m);}
.calendarBox .calendarHeader h4{color: var(--gray-900); font-weight: var(--T-black); font-size: var(--H1); line-height: 1.3;}
.calendarBox .calendarHeader .calendarBtn{position: relative; width: 32px; height: 32px; border-radius: var(--radius-l); background-color: var(--white); transition: all .3s;}
.calendarBox .calendarHeader .calendarBtn::after{content: ''; width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.calendarBox .calendarHeader .calendarBtn.calendarPrev::after{background: url(../images/sub/arrow_icon09.svg)no-repeat center;}
.calendarBox .calendarHeader .calendarBtn.calendarNext::after{ transform: translate(-50%, -50%) rotate(180deg); background: url(../images/sub/arrow_icon09.svg)no-repeat center;}
.calendarBox .calendarHeader .calendarBtn:hover{background: var(--gray-200);}
.calendarBox .calendarWeek {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-bottom: var(--spacing-xs); overflow: hidden;}
.calendarBox .calendarWeek .week {display: flex; align-items: center; justify-content: center;
    height: 37px; background-color: var(--gray-600); color: var(--gray-200); text-align: center;
    font-size: var(--Subtitle-2); font-weight: var(--bold);}
.calendarBox .calendarWeek .week:first-child{border-radius: var(--radius-m) 0 0 var(--radius-xs);}
.calendarBox .calendarWeek .week:last-child{border-radius: 0 var(--radius-m) var(--radius-xs) 0;}
.calendarBox .calendarWeek .week.sun {color: #FC6259;}
.calendarBox .calendarWeek .week.sat {color: #4C93FD;}
.calendarBox .calendarGrid{display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--spacing-2xs);
}
.calendarBox .calendarGrid .calendarCell {min-width: 0; min-height: 88px;}
.calendarBox .calendarGrid .calendarCell .dateBtn{ -webkit-appearance: none; appearance: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; padding: var(--spacing-xs); border-radius: var(--spacing-xs); background-color: #fff; text-align: left; font-size: var(--body-2); font-weight: var(--medium); color: var(--gray-600); line-height: 1.2;  cursor: pointer;}
.calendarBox .calendarGrid .calendarCell .dateBtn.sun,
.calendarBox .calendarGrid .calendarCell .dateBtn.sat,
.calendarBox .calendarGrid .calendarCell .dateBtn.disabled {background-color: var(--gray-100);}
.calendarBox .calendarGrid .calendarCell .dateBtn.sun{color: #FC6259;}
.calendarBox .calendarGrid .calendarCell .dateBtn.sat {color: #4C93FD;}
.calendarBox .calendarGrid .calendarCell .dateBtn.disabled {color: var(--gray-300); cursor: default;}
.calendarBox .calendarGrid .calendarCell .date {display: inline-block;}
.calendarBox .calendarGrid .calendarCell .scheduleDots{margin-top:var(--spacing-2xs); padding: var(--spacing-2xs);
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3xs);  background-color: var(--white); border-radius: var(--spacing-xs);}
.calendarBox .calendarGrid .calendarCell .scheduleDot{width: 6px; height: 6px;
    border-radius: 50%; background-color: var(--primary-900);}
.calendarBox .calendarGrid .calendarCell .dateBtn.hasSchedule .date{color: var(--primary-800); font-weight: var(--bold);}
.calendarBox .calendarGrid .calendarCell .dateBtn.hasSchedule{background-color: var(--primary-100);}
.calendarBox .calendarGrid .calendarCell .dateBtn.disabled .scheduleDots{background-color: var(--gray-400);}
.calendarBox .calendarGrid .calendarCell .dateBtn.disabled .scheduleDot{background-color: var(--white);}
.calendarBox .calendarGrid .calendarCell .dateBtn.selected{background-color: var(--primary-500);}
.calendarBox .calendarGrid .calendarCell .dateBtn.selected .date{color: var(--white);}
.eventStatusViewBox .boardViewBox .boardViewLayoutBox .viewContentInfoBox{width: 320px; flex-shrink: 0;}
.eventStatusViewBox .boardViewBox .boardViewLayoutBox{gap: var(--spacing-lm) var(--spacing-2xl);}
.eventStatusViewBox .boardViewBox .viewContentInfoBox dl dd .time{display: inline-block; margin-top: var(--spacing-s); padding: var(--spacing-xs); font-weight: var(--semi-bold); border-radius: var(--radius-xs); border: 1px solid var(--gray-100); font-size: var(--font-size-m);}

@media (max-width: 1024px){

  .calendarWrap{flex-direction: column-reverse; height: auto;}
  .calendarScheduleBox{width: auto;}
  .calendarScheduleBox .calendarScheduleList{height: 355px;}
  .calendarBox .calendarHeader h4{font-size: var(--H2);}

  .eventStatusViewBox .boardViewBox .boardViewLayoutBox .viewContentInfoBox{width: 100%;}
  .eventStatusViewBox .boardViewBox .viewContentInfoBox dl dd{text-align: center;}

}

@media (max-width: 768px){

  .calendarBox{padding: var(--spacing-ml) var(--spacing-m);}
  .calendarBox .calendarHeader h4{font-size: var(--H3);}
  .calendarScheduleBox .calendarScheduleList li p{font-size: var(--font-size-m);}
  .calendarScheduleBox .date{font-size: var(--font-size-xxl);}
  .calendarScheduleBox h4{font-size: var(--font-size-l);}

}

@media (max-width: 576px){

  .calendarBox{padding: var(--spacing-ml) var(--spacing-s);}
  .calendarBox .calendarHeader h4{font-size: var(--H4);}
  .calendarBox .calendarGrid .calendarCell{min-height: 66px;}
  .calendarScheduleBox{padding: var(--spacing-ml) var(--spacing-ms);}
  .calendarScheduleBox h4{margin-bottom: var(--spacing-m);}
  .calendarBox .calendarGrid .calendarCell .scheduleDot{width: 4px; height: 4px;}
  .calendarScheduleBox .scheduleEmptyTitle{font-size: var(--font-size-m);}

}

@media (max-width: 414px){

  .calendarBox .calendarGrid .calendarCell{min-height: 50px;}
  .calendarBox .calendarGrid .calendarCell .scheduleDots{padding: var(--spacing-3xs); margin-top: var(--spacing-3xs);border-radius: var(--spacing-2xs);}
  .calendarBox .calendarGrid .calendarCell .scheduleDot{width: 3px; height: 3px;}

}

 /* 의원누리집 - 서브 */ 
 #wrap.memberWrap .memberAttendanceRateWrap{padding: var(--spacing-lm) var(--spacing-lm) 0 var(--spacing-ms); margin: 0 auto var(--spacing-2xl);}
#wrap.memberWrap .memberAttendanceRateWrap .memberHeader{margin-bottom: var(--spacing-m); display: flex; justify-content: center; align-items: center; gap: 0 var(--spacing-s);}
#wrap.memberWrap .memberAttendanceRateWrap .memberImgBox{width: 64px; height: 64px; border-radius: var(--radius-m); background: var(--gray-100); overflow: hidden;}
#wrap.memberWrap .memberAttendanceRateWrap .memberImgBox img{height: 100%; object-fit: cover;}
#wrap.memberWrap .memberAttendanceRateWrap .memberText .memberName{display: block; margin-bottom: var(--spacing-2xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-l);}
#wrap.memberWrap .memberAttendanceRateWrap .memberMeta{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
#wrap.memberWrap .memberAttendanceRateWrap .memberRole{font-size: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
#wrap.memberWrap .memberAttendanceRateWrap .memberDistrict{display: flex; align-items: center; min-height: 30px; padding: var(--spacing-2xs) var(--spacing-xs); font-weight: var(--semi-bold); color: var(--gray-600); background: var(--gray-100); border-radius: var(--radius-xs); font-size: var(--font-size-s);}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceBox{flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between;}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceInfo{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceLabel{color: var(--gray-900); font-weight: var(--bold); font-size: var(--font-size-s);}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceCount{font-weight: var(--bold); color: var(--gray400); font-size: var(--font-size-s);}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceCount strong{color: var(--gray-900);}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceRate{min-width: 48px; min-height: 25px; padding: var(--spacing-xs); border-radius: var(--radius-xs); background-color: var(--stat-percent-bg); font-weight: var(--bold); font-size: var(--font-size-s); color: var(--white); text-align: center;}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceProgress{margin-top: var(--spacing-xs); width: 100%; position: relative; height: 6px; border-radius: var(--radius-s); background-color: var(--gray-100); overflow: hidden;}
#wrap.memberWrap .memberAttendanceRateWrap .attendanceProgressBar{position: absolute; top:0; left:0; bottom: 0;  background-color: var(--primary-500); border-radius: var(--radius-s);}
#wrap.memberWrap #contentWrap .contentRightBox .contentBox{padding-top: var(--spacing-2xl);}
#wrap.memberWrap #contentWrap .contentRightBox .container{padding: 0;}
#wrap.memberWrap #contentWrap aside{min-width: 240px; border: 0;}
#wrap.memberWrap #contentWrap{position: relative; padding: var(--spacing-lm) 0 var(--spacing-5xl); gap:0; background: url(../images/sub/bg02.png)no-repeat center top;}
#wrap.memberWrap #contentWrap aside .depth01 li{margin-bottom: var(--spacing-ml);}
#wrap.memberWrap #contentWrap aside .depth01 li h2 a{font-size: var(--Subtitle-1); font-weight: var(--medium); text-shadow: none!important; color: var(--gray-600);}
#wrap.memberWrap #contentWrap aside .depth01 li h2 a.active{color: var(--gray-900); font-weight: var(--bold);}
#wrap.memberWrap #contentWrap .contentRightBox{max-width: 1440px; padding: var(--spacing-2xl) var(--spacing-lm); background-color:var(--white); border-radius: var(--radius-l)}

@media (max-width: 1280px){

  #wrap.memberWrap #contentWrap{padding: var(--spacing-lm) 0 var(--spacing-3xl);}
  /* #wrap.memberWrap #contentWrap .contentRightBox{margin: 0 20px;} */
  #wrap.memberWrap #contentWrap .contentRightBox .contentBox{padding-top: var(--spacing-lm);}

  #wrap.memberWrap #contentWrap aside{position: static; display: block;}
  #wrap.memberWrap #contentWrap aside .depth01{display: none;}
  #wrap.memberWrap #contentWrap{flex-direction: column; gap: 0 0;}

  #wrap.memberWrap .memberAttendanceRateWrap{padding: 0 var(--spacing-ms); margin-bottom: var(--spacing-lm); max-width: none; display: flex; justify-content: center; gap: 0 var(--spacing-m);}
  #wrap.memberWrap .memberAttendanceRateWrap .memberHeader{flex-shrink: 0; margin: 0;}
  #wrap.memberWrap .memberAttendanceRateWrap .attendanceBox{max-width: 256px; width: 100%;}

}

@media (max-width: 1024px){

  #wrap.memberWrap #contentWrap .contentRightBox{padding: var(--spacing-lm) var(--spacing-m);}

}

@media (max-width: 768px){

  #wrap.memberWrap #contentWrap .contentRightBox{padding: var(--spacing-lm) var(--spacing-ms);}

}

@media (max-width: 480px){

  #wrap.memberWrap #contentWrap .contentRightBox{padding: var(--spacing-m) var(--spacing-s);}
  #wrap.memberWrap .memberAttendanceRateWrap{flex-direction: column; align-items: flex-start; gap: var(--spacing-s) 0;}
  #wrap.memberWrap .memberAttendanceRateWrap .attendanceBox{max-width: none;}

}

 /* 의원누리집 - 인사말 */ 
#wrap.memberWrap .memberGreetingBox p{color: var(--gray-600); font-size: var(--font-size-xl); line-height: 1.6;}
#wrap.memberWrap .memberGreetingBox p strong{color: var(--gray-900); font-size: var(--font-size-xxxl);}
#wrap.memberWrap .memberGreetingBox .memberIntroDetailBox{flex-shrink: 0; width: 440px;}
#wrap.memberWrap .memberGreetingBox .memberGreetingLayoutBox{display: flex; gap: 0 352px; justify-content: space-between;}

@media (max-width: 1440px){

  #wrap.memberWrap .memberGreetingBox .memberGreetingLayoutBox{gap: 0 var(--spacing-2xl);}

}

@media (max-width: 1024px){

  #wrap.memberWrap .memberGreetingBox .memberGreetingLayoutBox{flex-direction: column; align-items: center; gap: var(--spacing-2xl) 0;}
  #wrap.memberWrap .memberGreetingBox .memberIntroDetailBox{width: 100%;}
  #wrap.memberWrap .memberGreetingBox .memberIntroImgBox{margin-bottom: -62px; height: 516px;}

}

@media (max-width: 480px){
  
  #wrap.memberWrap .memberGreetingBox p{font-size: var(--font-size-m);}
  #wrap.memberWrap .memberGreetingBox .memberIntroImgBox{margin: 0; height: 315px;}

}

 /* 의원누리집 - 프로필 */
#wrap.memberWrap .memberProfileBox .memberProfileTopBox{display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-ms); background: linear-gradient(to right, #FFFEFD, #E1D8CD, #FFFFFF);}
.memberCouncilTabs{display: flex; gap: var(--spacing-xs); }
.memberCouncilTabs .councilTab{display: flex; align-items: center; justify-content: center; width: 38px; height: 32px; border-radius: var(--radius-xs); background-color: var(--white); font-weight: var(--bold); font-size: var(--font-size-s); color: var(--gray-400);}
.memberCouncilTabs .councilTab:hover{background-color: var(--gray-300); color: var(--gray-600);}
.memberCouncilTabs .councilTab.active{background-color: var(--secondary-900); color: var(--white);}
#wrap.memberWrap .memberProfileBox .memberCareerBox{margin-bottom: var(--spacing-lm); padding: var(--spacing-lm) var(--spacing-m); border-radius: 0 0 var(--radius-l) var(--radius-l); background-color: var(--gray-50);}
#wrap.memberWrap .memberProfileBox .memberCareerBox h5{width: 56px; flex-shrink: 0; color: var(--gray-900); font-weight: var(--bold); font-size: var(--body-1);}
#wrap.memberWrap .memberProfileBox .memberCareerBox h4{margin-bottom: var(--spacing-s);}
#wrap.memberWrap .memberProfileBox .memberCareerContent{display: flex; gap: var(--spacing-xs);}
#wrap.memberWrap .memberProfileBox .memberCareerList li{margin-bottom: var(--spacing-xs); color: var(--gray-600); font-weight: var(--medium); font-size: var(--body-2);}
#wrap.memberWrap .memberProfileBox .memberCareerList li:last-child{margin-bottom: 0;}
#wrap.memberWrap .memberProfileBox .memberProfileDetailBox{padding: var(--spacing-ml) var(--spacing-ms); display: flex; justify-content: center; align-items: center; gap: 0 var(--spacing-lm)}
#wrap.memberWrap .memberProfileBox .memberProfileImgBox{flex-shrink: 0; width: 210px; height: 293px; border-radius: 160px; overflow: hidden; box-shadow: 10px 10px 40px rgba(0,0,0, .1); background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));}
#wrap.memberWrap .memberProfileBox .memberProfileImgBox img{height: 100%; object-fit: cover;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox{width: 240px;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileRole{margin-bottom: var(--spacing-xs); padding: var(--spacing-xs); display: inline-flex; align-items: center; justify-content: center; min-width: 57px; height: 33px; background-color: var(--gray-600); border-radius: var(--radius-s); color: var(--secondary-200); font-weight: var(--bold); font-size: var(--font-size-s);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileNameBox{margin-bottom: var(--spacing-m); display: flex; align-items: center; gap: 0 var(--spacing-xs)}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileNameBox .name01{color: var(--gray-900); font-weight: var(--bold); font-size: var(--H4);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileNameBox .name02{color: var(--gray-400); font-weight: var(--medium); font-size: var(--body-2); font-style: normal;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox dl{padding-left: 14px; position: relative; margin-bottom: var(--spacing-xs); display: flex; gap: var(--spacing-xs); align-items: center;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox dl::before{content: ''; position: absolute; top:7px; left:0; width: 6px; height: 6px; border-radius: var(--radius-2xs); background-color: var(--primary-500);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox dl dt{width: 80px; flex-shrink: 0; color: var(--gray-600); font-weight: var(--bold); font-size: var(--body-2); text-align: left;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox dl dd{color: var(--gray-600); font-weight: var(--medium); font-size: var(--body-2);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox{ margin: var(--spacing-ms) 0 var(--spacing-s);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox span{position: relative; padding-left: var(--spacing-ml); display: block; margin-bottom: var(--spacing-xs); font-size: var(--body-2); font-weight: var(--medium); color: var(--gray-600); text-align: left;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox span::before{content: ''; position: absolute; left:0; width: 24px; height: 24px;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox span.memberProfilePhone::before{ top:-2px; background: url(../images/sub/phone02.svg)no-repeat center / cover;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox span.memberProfileEmail::before{ top:0; background: url(../images/sub/email.svg)no-repeat center / cover;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox span a{font-size: var(--body-2); font-weight: var(--medium); color: var(--gray-600);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileInfoBox span:last-child{margin-bottom: 0;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .attendanceRateBox{padding: var(--spacing-s); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--spacing-s); border-radius: var(--radius-s); background-color: var(--primary-900); line-height: 1;}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .attendanceRateBox span{color: var(--secondary-200); font-weight: var(--bold); font-size: var(--font-size-s);}
#wrap.memberWrap .memberProfileBox .memberProfileTextBox .attendanceRateBox em{font-style: normal; color: var(--white); font-weight: var(--bold); font-size: var(--H6);}

@media (max-width: 1024px){

  #wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileNameBox .name01{font-size: var(--H5);}

}

@media (max-width: 768px){

  #wrap.memberWrap .memberProfileBox .memberProfileDetailBox{padding: var(--spacing-ml) 0; flex-direction: column; gap: var(--spacing-m) 0;}
  #wrap.memberWrap .memberProfileBox .memberProfileTextBox .memberProfileNameBox{justify-content: center;}
  #wrap.memberWrap .memberProfileBox .memberProfileTextBox{width: 100%; text-align: center;}
  #wrap.memberWrap .memberProfileBox .memberProfileTextBox dl dt{width: 50px;}

}

@media (max-width: 480px){

  #wrap.memberWrap .memberProfileBox .memberProfileTopBox{flex-direction: column; gap: var(--spacing-s) 0;}

}

 /* 의원누리집 - 발의의안 */
#wrap.memberWrap .councilActivityList{padding: 0; height: auto;}

/* 의원누리집 - 전자회의록 */
#wrap.memberWrap .meetingVideoListBox .memberActivityImgList{gap: var(--spacing-lm) var(--spacing-s);}
#wrap.memberWrap .meetingVideoListBox .memberActivityImgList li .btnBox{margin: var(--spacing-xs) 0 0; gap: var(--spacing-2xs);}
#wrap.memberWrap .meetingVideoListBox .memberActivityImgList li .btnBox .btn{min-width: 57px; height: 36px; font-size: var(--font-size-s);}

/* 회기별 일정 */
.scheduleListBox .calendarScheduleBox .date{color: var(--primary-800);}
.scheduleListBox .calendarScheduleBox .calendarScheduleList li{display: flex; flex-wrap: wrap; justify-content: space-between; gap:var(--spacing-xs); background: 0; border: 1px solid #E6E6E6;}
.scheduleListBox .calendarScheduleBox .calendarScheduleList li .time{margin: 0;}
.scheduleListBox .calendarScheduleBox .calendarScheduleList li .category{min-width: 53px; min-height: 25px; padding: var(--spacing-2xs) var(--spacing-xs); border-radius: var(--radius-xs); color: var(--white); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.scheduleListBox .calendarBox .calendarGrid .plenary,
.scheduleListBox .calendarScheduleBox .calendarScheduleList li .plenary,
.scheduleListBox .scheduleInfoList li.plenary::before
{background-color: #FF8539!important;}
.scheduleListBox .calendarBox .calendarGrid .budgetSpecial,
.scheduleListBox .calendarScheduleBox .calendarScheduleList li .budgetSpecial,
.scheduleListBox .scheduleInfoList li.budgetSpecial::before
{background-color: #61ACF6!important;}
.scheduleListBox .calendarBox .calendarGrid .ordinanceSpecial,
.scheduleListBox .calendarScheduleBox .calendarScheduleList li .ordinanceSpecial,
.scheduleListBox .scheduleInfoList li.ordinanceSpecial::before
{background-color: #5D3FD3!important;}
.scheduleListBox .calendarBox .calendarGrid .auditSpecial,
.scheduleListBox .calendarScheduleBox .calendarScheduleList li .auditSpecial,
.scheduleListBox .scheduleInfoList li.auditSpecial::before
{background-color: #C77654!important;}
.scheduleListBox .calendarScheduleBox .btnBox{margin: auto 0 0;}
.scheduleListBox .calendarScheduleBox .btn{width: auto; flex: 1 1 auto;}
.scheduleListBox .calendarScheduleBox{width: 304px;}
.scheduleListBox .calendarGrid .calendarCell .scheduleInfoText{margin: var(--spacing-2xs) 0; padding: var(--spacing-2xs); background-color: #2F3F61; color: var(--white); border-radius: var(--radius-2xs); font-size: var(--font-size-xs); font-weight: var(--bold);}
.scheduleListBox .calendarGrid .calendarCell .dateBtn.disabled .scheduleInfoText{background-color: var(--gray-400);}
.scheduleListBox .scheduleInfoList{margin: var(--spacing-s) 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--spacing-2xs);}
.scheduleListBox .scheduleInfoList li{display: flex; align-items: center; gap: 0 var(--spacing-2xs); padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--white); border-radius: var(--radius-xs); font-weight: var(--bold); font-size: var(--font-size-xs); color: var(--gray-600);}
.scheduleListBox .scheduleInfoList li::before{content: ''; width: 8px; height: 8px; border-radius: 50%;}
.scheduleListBox .scheduleTabList{margin-bottom: var(--spacing-m); display:inline-flex; padding: var(--spacing-2xs); background: var(--gray-100); border-radius: var(--radius-m);}
.scheduleListBox .scheduleTabList li .tabBtn{display: flex; align-items: center; gap: 0 var(--spacing-2xs); width: 79px; height: 34px; border-radius: var(--radius-m); color: var(--gray-400); font-size: var(--body-2); background-color: var(--white);}
.scheduleListBox .scheduleTabList li .tabBtn:hover{background-color: var(--gray-50); color: var(--gray-600);}
.scheduleListBox .scheduleTabList li .tabBtn.active{background-color: var(--gray-600); color: var(--white);}
.scheduleListBox .scheduleTabList li .tabBtn.calendarBtn.active::before{background: url(../images/sub/calendar_icon03.svg)no-repeat center / contain;}
.scheduleListBox .scheduleTabList li .tabBtn.listBtn.active::before{background: url(../images/sub/list_icon02.svg)no-repeat center / contain;}
.scheduleListBox .scheduleTabList li .tabBtn::before{content: ''; width: 18px; height: 18px;}
.scheduleListBox .scheduleTabList li .tabBtn.calendarBtn::before{background: url(../images/sub/calendar_icon02.svg)no-repeat center / contain;}
.scheduleListBox .scheduleTabList li .tabBtn.listBtn::before{background: url(../images/sub/list_icon.svg)no-repeat center / contain;}
.scheduleListBox .scheduleTabBox{display: flex; align-items: center; justify-content: space-between;}
.scheduleListBox .viewLinkBox{display: flex; flex-wrap: wrap; gap: 0 var(--spacing-s);}
.scheduleListBox .viewLinkBox .viewLink::before{content: ''; width: 32px; height: 32px;}
.scheduleListBox .viewLinkBox .viewLink.electronic::before{background: url(../images/common/link_icon02.svg) no-repeat center / contain;}
.scheduleListBox .viewLinkBox .viewLink.video::before{background: url(../images/common/link_icon01.svg) no-repeat center / contain;}
.scheduleListBox .viewLinkBox .viewLink.broadcast::before{background: url(../images/common/link_icon03.svg) no-repeat center / contain;}
.scheduleListBox .scheduleList > li{border-bottom: 1px solid var(--gray-100);}
.scheduleListBox .scheduleList li a{padding: var(--spacing-m) 0; display: flex; align-items: flex-start; gap: 0 var(--spacing-ml);}
.scheduleListBox .scheduleList li a .scheduleNumber{flex-shrink: 0; padding: var(--spacing-2xs) var(--spacing-xs); border-radius: var(--radius-xs); font-weight: var(--bold); color: var(--white); font-size: var(--H6); background-color: var(--gray-600);}
.scheduleListBox .scheduleList li a .scheduleNumber.active{background-color: var(--primary-500);}
.scheduleListBox .scheduleList li a h4{margin-bottom: var(--spacing-s); font-size: var(--H6); color:var(--gray-600);}
.scheduleListBox .scheduleList li a .date{margin-bottom: var(--spacing-m); display: block; color: var(--gray-400); font-size: var(--body-2); font-weight: var(--bold);}
.scheduleListBox .scheduleList li a .scheduleInfo{width: 100%;}
.scheduleListBox .scheduleList li a .scheduleInfoList{margin: 0; justify-content: flex-start; padding: var(--spacing-s); background-color: var(--gray-50); border-radius: var(--radius-s);}
.scheduleListBox .searchWrap{background: linear-gradient(
    to right,var(--gray-100) 0%, var(--primary-100) 50%, var(--gray-100) 100%);}

@media (max-width: 1024px) {

  .scheduleListBox .calendarScheduleBox{width: 100%;}
    
}

@media (max-width: 768px){

  .scheduleListBox .scheduleTabList{margin: 0;}
  .scheduleListBox .scheduleTabBox{margin-bottom: var(--spacing-m); align-items: flex-end;}
  .scheduleListBox .viewLinkBox{flex-direction: column;}

  .scheduleListBox .scheduleList li a .scheduleNumber,
  .scheduleListBox .scheduleList li a h4{font-size: var(--font-size-l);}

  .scheduleListBox .scheduleInfoList{justify-content: flex-start;}

}

@media (max-width: 576px){

  .scheduleListBox .calendarGrid .calendarCell .scheduleInfoText{display: none;}
  .scheduleListBox .scheduleList li a{flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-s) 0;}
  .scheduleListBox .scheduleList li a .scheduleNumber,
  .scheduleListBox .scheduleList li a h4{font-size: var(--font-size-m);}

}

@media (max-width: 360px){
  
  .scheduleListBox .scheduleTabBox{margin-bottom: var(--spacing-ms); flex-direction: column-reverse; align-items: center; gap: var(--spacing-s) 0;}
  .scheduleListBox .calendarScheduleBox .calendarScheduleList li{flex-direction: column; align-items: flex-start;}

}

/* 회기별 일정 -상세 */
.scheduleViewBox .scheduleViewContentBox{ padding: 0 var(--spacing-m);}
.scheduleViewBox .scheduleViewTop{padding: var(--spacing-l) 0 var(--spacing-lm); display: flex; gap: 0 var(--spacing-xl);}
.scheduleViewBox .scheduleViewTop h4{flex-shrink: 0; color: var(--gray-900); font-weight: var(--bold); font-size: var(--font-size-xl);}
.scheduleViewBox .scheduleViewTop .scheduleViewInfo span{display: inline-block; margin-bottom: var(--spacing-s); padding: var(--spacing-2xs) var(--spacing-xs); border-radius: 0 0 0 var(--radius-xs); color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s); background-color: var(--success-50);}
.scheduleViewBox .scheduleViewTop .scheduleViewInfo span strong{margin-right: 10px; color: var(--success-500); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.scheduleViewBox .scheduleViewTop .scheduleViewInfo p{color: var(--gray-600); font-size: var(--font-size-s);}
.scheduleViewBox .scheduleViewDate{margin-bottom: var(--spacing-lm); padding: var(--spacing-xs);
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0 var(--spacing-m); background-color: var(--gray-900); border-radius: var(--radius-s); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.scheduleViewBox .scheduleViewDate::-webkit-scrollbar {display: none;}
.scheduleViewBox .scheduleViewDate .dateBtn{flex-shrink: 0; padding: var(--spacing-xs); font-weight: var(--bold);
  font-size: var(--font-size-xl); color: var(--gray-400); border-radius: var(--spacing-xs);  white-space: nowrap;}
.scheduleViewBox .scheduleViewDate .allDateBtn.active,
.scheduleViewBox .scheduleViewDate .dateBtn.active {background-color: var(--primary-500);color: var(--white);}
.scheduleViewBox .scheduleBox{display: flex; align-items: flex-start; gap: 0 var(--spacing-lm);}
.scheduleViewBox .scheduleViewDateBox{display: flex; align-items: center;}
.scheduleViewBox .scheduleViewDateBox .date{position: relative; margin-right: 26px; font-weight: var(--bold); font-size: var(--H4); color: var(--gray-600);}
.scheduleViewBox .scheduleViewDateBox .date::after{content: ''; position: absolute; top:17px; right:-17px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--gray-400);}
.scheduleViewBox .scheduleViewDateBox .day{font-weight: var(--bold); font-size: var(--H4); color: var(--primary-500); font-style: normal;}
.scheduleViewBox .scheduleViewContentBox{margin-bottom: var(--spacing-5xl);}
.scheduleViewBox .scheduleViewContentBox .scheduleViewContent{display: flex; align-items: flex-start; gap: 0 var(--spacing-m);}
.scheduleViewBox .scheduleViewContentBox .scheduleViewContent:last-child::before{display: none;}
.scheduleViewBox .scheduleViewContentBox .scheduleTimeBox{min-width: 89px; display: flex; align-items: center; gap: 0 var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-s); border: 1px solid var(--gray-100); border-radius: var(--radius-xs); font-weight: var(--semi-bold); font-size: var(--font-size-xl); color: var(--gray-600); background-color: var(--white);}
.scheduleViewBox .scheduleViewContentBox .scheduleTimeBox.noTime::before{display: none;}
.scheduleViewBox .scheduleViewContentBox .scheduleTimeBox::before{content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: var(--gray-600);}
.scheduleViewBox .scheduleViewContentBox .scheduleListBox{padding-top: var(--spacing-xs);}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingCategory{display: flex; gap: 0 var(--spacing-xs); color: var(--gray-600); font-weight: var(--bold); font-size: var(--H6);}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingCategory::before{content: ''; margin-top: 7px; width: 8px; height: 8px; border-radius: 50%;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.plenary .scheduleMeetingCategory::before{background-color: #FF8539;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.plenary .scheduleMeetingRound{background-color: #FF8539;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.budgetSpecial .scheduleMeetingCategory::before{background-color: #61ACF6;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.budgetSpecial .scheduleMeetingRound{background-color: #61ACF6;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.ordinanceSpecial .scheduleMeetingCategory::before{background-color: #5D3FD3;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.ordinanceSpecial .scheduleMeetingRound{background-color: #5D3FD3;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.auditSpecial .scheduleMeetingCategory::before{background-color: #C77654;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta.auditSpecial .scheduleMeetingRound{background-color: #C77654;}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta{margin-bottom: var(--spacing-s); display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs);}
.scheduleViewBox .scheduleViewContentBox .scheduleMeetingMeta .scheduleMeetingRound{padding: var(--spacing-2xs) var(--spacing-xs); font-weight: var(--bold); color: var(--white); border-radius: var(--radius-xs);}
.scheduleViewBox .scheduleViewContent{position: relative; padding-bottom: var(--spacing-2xl);}
.scheduleViewBox .scheduleViewContent::before{content: ''; position: absolute; top:0; left:16px; bottom: 0; width: 1px; background-color: var(--gray-100); z-index: -1;}
.scheduleViewBox .scheduleViewContent .bulletIcon > li{display: flex; align-items: center; flex-wrap: wrap; gap:var(--spacing-s); padding:var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-ml); background-color: var(--gray-50); border-radius: var(--radius-s); font-weight: var(--bold);}
.scheduleViewBox .scheduleViewContent .bulletIcon > li::before{left: 15px; top: 13px;}
.scheduleViewBox .scheduleViewContent .bulletIcon > li .infoText{padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--gray-400); font-weight: var(--semi-bold); font-size: var(--body-2); color: var(--white); border-radius: var(--radius-xs);}
.scheduleViewBox .scheduleViewContent .bulletIcon .bulletBar{width: 100%;}
.scheduleViewBox .scheduleViewContent .bulletIcon .bulletBar li{font-weight: var(--regular);}

@media (max-width: 1024px){

  .scheduleViewBox .scheduleViewContentBox{padding: 0;}
  .scheduleViewBox .scheduleViewDateBox .day,
  .scheduleViewBox .scheduleViewDateBox .date{font-size: var(--H5);}
  .scheduleViewBox .scheduleViewDateBox .date::after{top: 12px;}
  .scheduleViewBox .scheduleViewContentBox .scheduleTimeBox{font-size: var(--font-size-l);}
  .scheduleViewBox{gap: 0 var(--spacing-m);}
  .scheduleViewBox .scheduleViewContentBox .scheduleMeetingCategory::before{width: 6px; height: 6px;}
  .scheduleViewBox .scheduleViewContentBox .scheduleMeetingCategory{font-size: var(--Subtitle-1);}

}

@media (max-width: 768px){

  .scheduleViewBox .scheduleBox{flex-direction: column; gap: var(--spacing-s) 0}

}

@media (max-width: 480px){

  .scheduleViewBox .scheduleViewTop{flex-direction: column; align-items: center; gap: var(--spacing-s) 0; text-align: center;}

  .scheduleViewBox .scheduleViewDateBox .day,
  .scheduleViewBox .scheduleViewDateBox .date{font-size: var(--H6);}
  .scheduleViewBox .scheduleViewDateBox .date::after{top: 10px;}
  .scheduleViewBox .scheduleViewContentBox .scheduleTimeBox{font-size: var(--font-size-m);}
  .scheduleViewBox .scheduleViewContentBox .scheduleMeetingCategory::before{width: 6px; height: 6px;}
  .scheduleViewBox .scheduleViewContentBox .scheduleMeetingCategory{font-size: var(--Subtitle-1);}
  .scheduleViewBox .scheduleViewContentBox .scheduleViewContent{gap:0 var(--spacing-ms);}

}

/* 회기별일정 - 등록 */
.scheduleWriteBox .scheduleFormWriteBox{margin-bottom: var(--spacing-s); padding: var(--spacing-m); background-color: var(--gray-50); border-radius: var(--radius-m);}
.scheduleWriteBox .scheduleWriteTopBox{margin-bottom: var(--spacing-2xl);}
.scheduleWriteBox .scheduleWriteTopBox .scheduleWriteSession{position: relative; margin-bottom: var(--spacing-s); display: flex; align-items: center; gap: 0 var(--spacing-ml);}
.scheduleWriteBox .scheduleWriteTopBox .scheduleWriteSession::before{content: ''; position: absolute; top:17px; left:162px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--gray-400);}
.scheduleWriteBox .scheduleWriteTopBox .sessionNumBox{position: relative;}
.scheduleWriteBox .scheduleWriteTopBox .sessionNum{gap: 0 var(--spacing-xs); padding: 0; border: 0; font-weight: var(--bold); font-size: var(--H4); color:var(--gray-900);}
.scheduleWriteBox .scheduleWriteTopBox .sessionNumList{position: absolute; left:0; top:50px; right:0;}
.scheduleWriteBox .scheduleWriteTopBox .sessionType{color: var(--gray-600); font-weight: var(--medium); font-size: var(--H5);} 
.scheduleWriteBox .scheduleWriteTopBox .sessionPeriod{display: inline-block; margin-bottom: var(--spacing-s); padding: var(--spacing-2xs) var(--spacing-xs);   border-radius: 0 0 0 var(--radius-xs); color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s); background-color: var(--success-50);}
.scheduleWriteBox .scheduleWriteTopBox .sessionPeriod strong{margin-right: 10px; color: var(--success-500); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
.scheduleWriteBox .formStepTit{margin-bottom: var(--radius-s); display: flex; align-items: center ; gap: 0 var(--spacing-xs);}
.scheduleWriteBox .formStepTit .step{display: flex; align-items: center; justify-content: center; width: 64px; height: 24px; border-radius: var(--spacing-xs); background-color: var(--primary-900); color: var(--white); font-weight: var(--bold); font-size: var(--font-size-s);}
.scheduleWriteBox .formStepTit .tit{color: var(--gray-900); font-weight: var(--bold); font-size: var(--H5);}
.scheduleWriteBox .boardWriteField{padding: var(--spacing-ms) 0; background-color: var(--gray-50); border: 0; border-radius: var(--radius-m);}
.scheduleWriteBox .scheduleFormBox{margin-bottom: var(--spacing-lm );}
.scheduleWriteBox .boardWriteFieldBox{display: flex; align-items: center; border-bottom: 1px solid var(--gray-100);}
.scheduleWriteBox .boardWriteFieldBox .boardWriteField{flex: 1;}
.scheduleWriteBox .scheduleInfoList{margin-bottom: var(--spacing-ms); display: flex; flex-wrap: wrap; align-items: center;  gap: var(--spacing-2xs);}
.scheduleWriteBox .scheduleInfoList li{display: flex; align-items: center; gap: 0 var(--spacing-2xs); padding: var(--spacing-xs); background-color: var(--white); border-radius: var(--radius-xs); font-weight: var(--medium); font-size: var(--body-1); color: var(--gray-600);}
.scheduleWriteBox .scheduleInfoList li::before{content: ''; width: 8px; height: 8px; border-radius: 50%;}
.scheduleWriteBox .scheduleInfoList li.plenary.active{background-color: #FF8539!important; color: var(--white);}
.scheduleWriteBox .scheduleInfoList li.plenary.active::before{background-color: var(--white)!important;}
.scheduleWriteBox .scheduleInfoList li.plenary::before{background-color: #FF8539!important;}
.scheduleWriteBox .scheduleInfoList li.budgetSpecial.active::before{background-color: var(--white)!important;}
.scheduleWriteBox .scheduleInfoList li.budgetSpecial.active{background-color: #61ACF6!important; color: var(--white);}
.scheduleWriteBox .scheduleInfoList li.budgetSpecial::before{background-color: #61ACF6!important;}
.scheduleWriteBox .scheduleInfoList li.ordinanceSpecial.active::before{background-color: var(--white)!important;}
.scheduleWriteBox .scheduleInfoList li.ordinanceSpecial.active{background-color: #5D3FD3!important; color: var(--white);}
.scheduleWriteBox .scheduleInfoList li.ordinanceSpecial::before{background-color: #5D3FD3!important;}
.scheduleWriteBox .scheduleInfoList li.auditSpecial.active::before{background-color: var(--white)!important;}
.scheduleWriteBox .scheduleInfoList li.auditSpecial.active{background-color: #C77654!important; color: var(--white);}
.scheduleWriteBox .scheduleInfoList li.auditSpecial::before
{background-color: #C77654!important;}
.scheduleWriteBox .sortFormBox{margin-bottom: var(--spacing-m); padding: var(--spacing-m); background-color: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-m);}
.scheduleWriteBox input{height: 48px; padding: 0 var(--spacing-s);}
.scheduleWriteBox .sortFormBox .sortFormList{margin-top: var(--spacing-s); border-top: 2px solid var(--gray-900);}
.scheduleWriteBox .sortFormBox .sortFormItemWrap{padding:var(--spacing-ms) 0; border-bottom: 1px solid var(--gray-100);}
.scheduleWriteBox .sortFormBox .sortFormItem{ gap: 0 var(--spacing-xs); display: flex; align-items: center; font-size: 0;}
.scheduleWriteBox .sortFormBox .sortFormItemWrap .textareaBox.active{display: block;}
.scheduleWriteBox .sortFormBox .sortFormItemWrap .textareaBox{display: none; margin: 8px 0 0 135px;}
.scheduleWriteBox .sortFormBox .sortFormItemWrap textarea{font-weight: var(--medium)!important;}
.scheduleWriteBox .sortFormBox .sortFormItemWrap:last-child{border-bottom: 0;}
.scheduleWriteBox .sortFormBox .sortFormItem .sortFormDragBtn{display: block; width: 32px; height: 48px; background: url(../images/sub/drag_icon.svg)no-repeat center;}
.scheduleWriteBox .sortFormBox .sortFormItem .sortFormDeleteBtn{width: 32px; height: 48px; background: url(../images/sub/delete_icon.svg)no-repeat center;}
.scheduleWriteBox .sortFormBox .sortFormItem .sortFormTitleCell{flex: 1;}
.scheduleWriteBox .sortFormBox .sortFormItem .sortFormDeptCell{width: 185px;}
.scheduleWriteBox .sortFormBox .sortFormItem .chkBtn{max-width: 87px;}
.scheduleWriteBox .scheduleFormWriteBox .btnBox{gap: 0 var(--spacing-2xs); margin: 0;}
.scheduleWriteBox .scheduleFormWriteBox .btnBox .btn{padding: 0 var(--spacing-s); min-width: auto; height: 36px; font-size: var(--font-size-s);}

@media (max-width: 1024px){

  .scheduleWriteBox .sortFormBox .sortFormItemWrap .textareaBox{margin: 8px 0 0;}
  .scheduleWriteBox .scheduleFormWriteBox{padding: var(--spacing-m) var(--spacing-s);}
  .scheduleWriteBox .boardWriteFieldBox{flex-direction: column; align-items: flex-start;}
  .scheduleWriteBox .boardWriteFieldBox .boardWriteField{width: 100%;}

  .scheduleWriteBox .scheduleWriteTopBox .sessionNum{font-size: var(--H5);}
  .scheduleWriteBox .scheduleWriteTopBox .sessionType{font-size: var(--H6);}
  .scheduleWriteBox .scheduleWriteTopBox .scheduleWriteSession::before{left: 134px}
  .scheduleWriteBox .scheduleWriteTopBox{margin-bottom: var(--spacing-xl);}
  .scheduleWriteBox .formStepTit .tit{font-size: var(--H6);}

}

@media  (max-width: 768px) {

  .scheduleWriteBox .sortFormBox {padding: var(--spacing-s);}
  .scheduleWriteBox .sortFormBox .sortFormItemWrap{ padding: var(--spacing-s) 0;}
  .scheduleWriteBox .sortFormBox .sortFormItem {display: grid; grid-template-columns: 32px 1fr 32px; gap: var(--spacing-xs); align-items: center;}
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormDragCell {grid-column: 1; grid-row: 1;}
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormCheckCell {grid-column: 2; grid-row: 1;}
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormDeleteCell {grid-column: 3; grid-row: 1;}
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormTitleCell {grid-column: 1 / -1; grid-row: 2; flex: none; width: 100%; }
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormDeptCell {grid-column: 1 / -1; grid-row: 3; width: 100%;}
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormDragBtn,
  .scheduleWriteBox .sortFormBox .sortFormItem .sortFormDeleteBtn{width: 32px; height: 40px;}
  .scheduleWriteBox .scheduleInfoList li{font-size: var(--font-size-s);}
  .scheduleWriteBox .scheduleInfoList{margin-bottom: var(--spacing-s);}

}

@media (max-width: 480px){

  .scheduleWriteBox .scheduleWriteTopBox{margin-bottom: var(--spacing-s);}
  .scheduleWriteBox .scheduleWriteTopBox .sessionNum{font-size: var(--H6);}
  .scheduleWriteBox .scheduleWriteTopBox .sessionType{font-size: var(--Subtitle-1);}
  .scheduleWriteBox .scheduleWriteTopBox .scheduleWriteSession{margin-bottom: var(--spacing-xs); gap: 0 var(--spacing-m);}
  .scheduleWriteBox .scheduleWriteTopBox .scheduleWriteSession::before{left: 111px; top: 18px;}
  .scheduleWriteBox .scheduleWriteTopBox .sessionNum{min-width: auto; gap: 0 var(--spacing-2xs)}
  .scheduleWriteBox .formStepTit .tit{font-size: var(--Subtitle-1);}

}

/* 연간일정 - 목록 */
.annualScheduleListBox .annualScheduleInfoTopBox{margin-bottom: var(--spacing-xs); display: flex; align-items: flex-end; justify-content: space-between;}
.annualScheduleListBox .annualScheduleDateBox{position: relative;}
.annualScheduleListBox .annualScheduleDateBox .annualScheduleDateBtn{padding: 0; color: var(--gray-900); font-size: var(--H4); font-weight: var(--bold); border: 0;}
.annualScheduleListBox .annualScheduleDateBox .annualScheduleDateList{position: absolute; top:50px; left:0; right: 0;}
.annualScheduleListBox .annualScheduleInfoTopBox .scheduleStatusInfo{display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs) var(--spacing-m);}
.annualScheduleListBox .annualScheduleInfoTopBox .scheduleStatusDate{color: var(--gray-400); font-weight: var(--bold); font-size: var(--body-2);} 
.annualScheduleListBox .annualScheduleInfoTopBox  .scheduleStatusLabel{display: flex; align-items: center; gap: 0 4px; color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);} 
.annualScheduleListBox .annualScheduleInfoTopBox  .scheduleStatusLabel::before{content: ''; width: 8px; height: 8px; border-radius: 50%; }
.annualScheduleListBox .annualScheduleInfoTopBox  .scheduleStatusDays::before{background-color: #61ACF6;}
.annualScheduleListBox .annualScheduleInfoTopBox  .scheduleStatusAttend::before{background-color: #F86C41;}
.annualScheduleListBox .annualScheduleInfo{margin-bottom: var(--spacing-m); color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s);}
.annualScheduleListBox .annualScheduleInfoBox{display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-lm); padding: var(--spacing-s); border-radius: var(--radius-s); background-color: var( --gray-50); }
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoText{color: var(--gray-600); font-weight: var(--medium); font-size: var(--Subtitle-1);}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoText span{margin-right:var(--spacing-xs) ; display: inline-block; padding: var(--spacing-2xs) var(--spacing-xs); border-radius: var(--radius-xs); border: 1px solid var(--gray-100); background-color: var(--white); font-size: var(--H6); font-weight: var(--medium); color: var(--gray-600);} 
.annualScheduleListBox em{font-style: normal;}
.annualScheduleListBox .accent01{color: #61ACF6;}
.annualScheduleListBox .accent02{color: #F86C41;}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList{display: flex; gap: var(--spacing-m);}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList li{display: flex; align-items: center; gap: var(--spacing-xs)}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList li::before{content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: var(--gray-400);}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList li .scheduleType{color: var(--gray-600); font-weight: var(--bold); font-size: var(--body-1);}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList li .scheduleCount{padding: var(--spacing-2xs); font-weight:var(--bold); font-size: var(--body-1); color: var(--white); border-radius: var(--radius-xs); background-color: var(--gray-400);}
.annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList li .scheduleDays{color: var(--gray-600); font-weight: var(--medium); font-size: var(--body-1);}
.annualScheduleListBox .scheduleList li a .scheduleDay{display: inline-block; margin-bottom: var(--spacing-m); padding: var(--spacing-2xs) var(--spacing-xs); border-radius: var(--radius-xs); border: 1px solid var(--gray-100); color: var(--gray-600); font-weight: var(--medium); font-size: var(--body-1);}
.annualScheduleListBox .scheduleList li a .date{margin-bottom: var(--spacing-xs);}
.annualScheduleListBox .scheduleList li a .annualScheduleListInfoBox{padding: var(--spacing-ms) var(--spacing-s);  background-color: var(--gray-50); border-radius: var(--radius-s); text-align: left;}
.annualScheduleListBox .scheduleList li a .annualScheduleListInfoBox h5{margin-bottom: var(--spacing-s); color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-m );}
.annualScheduleListBox .scheduleList li a .annualScheduleListInfoBox .bulletBar li{color: var(--gray-600);}

@media (max-width: 1024px){

  .annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoText span{margin-right: 0; font-size:var(--body-1)}
  .annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoText{font-size: var(--font-size-m);}
  .annualScheduleListBox .annualScheduleDateBox .annualScheduleDateBtn{font-size: var(--H5);}
  /* .annualScheduleListBox .annualScheduleInfoTopBox{flex-direction: column; align-items: flex-start; gap: var(--spacing-m) 0;} */

}

@media (max-width: 768px){
  
  .annualScheduleListBox .annualScheduleInfoBox{flex-direction: column; gap: var(--spacing-ms) 0;}
  
}

@media (max-width: 480px){

  .annualScheduleListBox .annualScheduleInfoBox .annualScheduleInfoList{flex-direction: column; gap: var(--spacing-s) 0;}
  .annualScheduleListBox .annualScheduleInfoTopBox .scheduleStatusInfo{flex-direction: column; align-items: flex-end;}
  .annualScheduleListBox .annualScheduleDateBox .annualScheduleDateBtn{font-size: var(--H6);}

}

/* 의원선택박스 */
.memberSelectDropdownBox.active .toggleBtn span{color: var(--primary-500);}
.memberSelectDropdownListBox{display: flex; flex-direction: column; width: 180px; padding: var(--spacing-ml) 0 0; max-height: 364px; position: absolute; top:57px; left:0; right:0; box-shadow: 0 0 40px rgba(0,0,0,.2); border-radius: var(--radius-l); border: 1px solid var(--white); background-color: var(--white); z-index: 999; } 
.memberSelectDropdownListBox .councilTermBox{margin-bottom: -30px; padding: 0 var(--spacing-m) var(--spacing-xs); display: flex; align-items: center; justify-content: space-between; background-color: var(--white); z-index: 999;}
.memberSelectDropdownListBox .councilTermBox .councilTermLabel{display: block; color: var(--gray-600); font-weight: var(--bold); font-size: var(--Subtitle-1);}
.memberSelectDropdownListBox .councilTermBox .closeBtn{width: 32px; height: 32px;}
.memberSelectDropdownListBox .councilTermBox .closeBtn::after{width: 13px; height: 13px;}
.memberSelectDropdownList{height: 100%; padding: var(--spacing-l) var(--spacing-m) var(--spacing-m); overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none;}
.memberSelectDropdownList::-webkit-scrollbar{width: 0; height: 0;}
.memberSelectDropdownList li{ margin-bottom: var(--spacing-2xs); }
.memberSelectDropdownList li:last-child{margin-bottom: 0;}
.memberSelectDropdownList li .selectBtn{width: 100%; padding: var(--spacing-xs); background-color: var(--white); display: flex; align-items: center; gap: 0 var(--spacing-xs); border: 1px solid transparent; border-radius: var(--radius-s); box-shadow: 0 0 20px rgba(0,0,0,.2); transition: all .3s;}
.memberSelectDropdownList li .selectBtn:hover,
.memberSelectDropdownList li .selectBtn.active{border-color: var(--gray-600);}
.memberSelectDropdownList li .selectBtn:hover .memberImgBox,
.memberSelectDropdownList li .selectBtn.active .memberImgBox{background-color: var(--primary-500);}
.memberSelectDropdownList li .memberImgBox{width: 48px; height: 48px; border-radius: var(--radius-m); background-color: var(--gray-100); overflow: hidden;}
.memberSelectDropdownList li .memberImgBox img{height: 100%; object-fit: cover;}
.memberSelectDropdownList li .memberTextBox .memberName{color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}

/* 공통 - 드롭다운 선택 */
.selectDropdownBtnBox{padding: var(--spacing-s) 0; position: absolute; top: 56px; left: 0;  width: max-content; border: 1px solid var(--gray-600);
    border-radius: var(--radius-m); box-shadow: 10px 10px 40px rgba(0, 0, 0, .1); z-index: 9999;
    background-color: var(--white); overflow-y: auto; overflow-x: hidden;}
.selectDropdownBtnBox .selectBtn{padding: var(--spacing-xs) var(--spacing-m); display: block; font-size: var(--font-size-l); color: var(--gray-600); font-weight: var(--semi-bold);}
.selectDropdownBtnBox .selectBtn:hover{color: var(--gray-900);}