@charset "UTF-8";
html,
body{height: 100%;}

/* 가운데영역 */
.container{max-width: 1480px; margin: 0 auto; padding: 0 var(--spacing-ms);}

/* 공통 */
.dimmed{position: fixed; top:0; left:0; right:0; bottom: 0;background: rgba(30, 43, 55, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 999;}
#wrap{height: 100%;}
.blind{position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.mobileNonScroll{overflow: hidden;}

@media (min-width: 1281px){

  .mobileNonScroll{overflow: visible;}

}

/* 공통 - 상단으로 이동 */
#top{display: none; position: fixed; bottom: 30px; right:30px; z-index: 99;}
#top .topClickBtn{padding-top: var(--spacing-xs); display: flex; flex-direction: column; align-items: center; width: 56px; height: 56px; border-radius: var(--radius-s); border: 2px solid var(--primary-200); box-shadow: 10px 10px 40px rgba(0,0,0,.1); color: var(--primary-800); font-weight: var(--bold); font-size: var(--font-size-xs); text-align: center; background-color: var(--white);}
#top .topClickBtn::before{content: ''; width: 24px; height: 24px; background: url(../images/common/arrow.svg)no-repeat center;}

@media (max-width: 1440px){

  #top{display: none!important;}

}
 
/* 공통 - 애니메이션(드롭다운) */
.dropdown{opacity: 0; visibility: hidden; transform: translateY(-12px);
  pointer-events: none; transition: all .3s, transform .55s cubic-bezier(.18, 2, .32, 1), visibility 0s linear .55s;}
.active .dropdown{opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto; transition:all .3s,
    transform .55s cubic-bezier(.18, 2, .32, 1), visibility 0s linear 0s;}
.active .toggleBtn::after{transform: rotate(-180deg);}

/* 공통 - 버튼 */
.btn{display: inline-flex; align-items: center; justify-content: center; min-width: 108px ; height: 56px; padding: var(--spacing-xs); color: var(--white); border-radius: var(--radius-s); font-size: var(--font-size-l); transition: all .3s;}
.btn.btnPrimary{background-color: var(--gray-600);}
.btn:hover{background-color: var(--gray-400);} 
.btn.btnSecondary{background-color: var(--gray-400);}
.btn.btnNegative:hover{background-color: #F6503B;}
.btn.btnPositive:hover{background-color: #3E7BFD;}

/* 공통 - 버튼(정렬) */
.btnBox{margin: var(--spacing-ml) 0; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--spacing-xs);}
.btnBox.left {justify-content: flex-start;}
.btnBox.center {justify-content: center;}
.btnBox.right {justify-content: flex-end;}
.btnBox.between {justify-content: space-between; width: 100%;}
.btnLayoutBox{display: flex; flex-wrap: wrap; gap: var(--spacing-xs);}

@media (max-width: 1024px){

  .btn{min-width: 80px; height: 48px; font-size: var(--font-size-m);}

}

@media (max-width: 480px){

  .btn{min-width: 57px; height: 36px; font-size: var(--font-size-s);}

}   

/* 공통 - 닫기버튼 */
.closeBtn{position: relative; width: 40px; height: 40px; background: var(--gray-100); border-radius: var(--spacing-ms);}
.closeBtn::after{content: ''; width: 15px; height: 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(../images/common/close.svg)no-repeat center / contain;}
.closeBtn:hover{background: var(--gray-400);}

/* 공통 - 호버 시 텍스트 슬라이드 */
.slideText{position: relative; width: 100%; overflow: hidden; text-align: center;}
.slideText,
.slideTextItem{display: flex; align-items: center; justify-content: center; height: 100%;}
.slideTextItem{white-space: nowrap; transition: transform .45s cubic-bezier(.22, 1, .36, 1);}
.slideTextPrimary{transform: translateY(0);}
.slideTextClone{position: absolute; top: 0; left: 0; width: 100%;
  transform: translateY(-100%);}
.slideText:hover .slideTextPrimary{transform: translateY(100%);}
.slideText:hover .slideTextClone{transform: translateY(0);}

.hoverSlide:not(.active){padding: var(--spacing-xs); position: relative; line-height: 1.2; font-size: var(--font-size-s); color: var(--gray-600); font-weight: var(--medium); border-radius: var(--radius-xs); transition: background-color .3s; overflow: hidden;}
.hoverSlide:not(.active) span{display: block;}
.hoverSlide:not(.active)::before{content: attr(data-text); position: absolute; inset: 8px; transform: translateY(-150%); color: var(--gray-600); line-height: 1.2;}
.hoverSlide:not(.active):hover{background-color: var(--gray-100);}
.hoverSlide:not(.active):hover span{animation: textOutBounce .45s forwards;}
.hoverSlide:not(.active):hover::before{animation: textInBounce .45s forwards;}

@keyframes textOutBounce {
  0%   { transform: translateY(0); }
  70%  { transform: translateY(165%); }   
  100% { transform: translateY(150%); }
}

@keyframes textInBounce {
  0%   { transform: translateY(-150%); }
  70%  { transform: translateY(12%); }  
  100% { transform: translateY(0); }
}

/* 공통 - 버튼 */
.btnArrowBox{display: flex; gap: 0 var(--spacing-xs);}
.btnArrowBox .arrowBtn{width: 24px; height: 24px; transition: all .3s;}
.btnArrowBox .arrowBtn.prevArrowBtn{background: url(../images/main/arrow_icon01.svg)no-repeat center;}
.btnArrowBox .arrowBtn.nextArrowBtn{background: url(../images/main/arrow_icon02.svg)no-repeat center;}
.btnArrowBox .arrowBtn:hover.prevArrowBtn{background: url(../images/main/arrow_icon03.svg)no-repeat center;}
.btnArrowBox .arrowBtn:hover.nextArrowBtn{background: url(../images/main/arrow_icon04.svg)no-repeat center;}

/* 공통 - 더보기 */
.viewLinkBox{display: flex; align-items: center; gap: 0 var(--spacing-s);}
.viewLink{display: inline-flex; align-items: center; gap: 0 var(--spacing-xs); font-size: var(--font-size-s); font-weight: var(--medium); color: var(--gray-600);}
.viewLink::after{content: ''; margin-top: 1px; width: 24px; height: 24px; background: url(../images/main/plus_icon.svg)no-repeat center; transition: all .3s;}
.viewLink:hover{color: var(--gray-900);}
.viewLink:hover::after{transform: rotate(-90deg); background: url(../images/main/plus_icon02.svg)no-repeat center;}

/* 공통 - dots */
.slick-dots{min-width: 56px; padding: var(--radius-xs); display: flex; gap: 0 var(--spacing-2xs); align-items: center; background: rgba(255,255,255,0.25); border-radius: var(--radius-s); box-shadow: inset 0 0 8px rgba(255,255,255,.5); backdrop-filter: blur(8px); }
.slick-dots li.slick-active button{width: 16px; background: #FFD700; transition: all .3s;}
.slick-dots li button{display: block; width: 8px; height: 8px; text-indent: -9999px; border-radius: var(--radius-s); background-color:var(--white); cursor: pointer;}

/* 헤더 영역 */
#mobileMenuBox{display: none;}

/* 헤더 영역 - 상단 안내  */
#krds-masthead{position: relative; background-color: #EEF2F7; color: #1E2124; font-size: 15px; z-index: 9;}
#krds-masthead .inner{max-width: 1480px; margin: 0 auto; padding: 0 20px;}
#krds-masthead .nuri-txt{display: flex; align-items: center; gap: 0 8px; padding: 5px 0; font-size: 15px;}
#krds-masthead .nuri-txt::before{content: ''; width: 24px; height: 16px; background: url(../images/common/taegeukgi.jpg)no-repeat center;}

@media (max-width: 480px){

  #krds-masthead .nuri-txt{font-size: 12px;}

}

/* 헤더 영역 - sns  */
#headerWrap .headerCenterWrap{position: relative; z-index: 999;}
#headerWrap .headerCenterBox{display: flex; align-items: center; justify-content: space-between; gap: 0 var(--spacing-m); padding: var(--spacing-xs) 0;}
#headerWrap .headerCenterBox .leftBox .snsBox{display: flex; align-items: center; gap: 0 var(--spacing-2xs);}
#headerWrap .headerCenterBox .leftBox .linkList{display: flex;}
#headerWrap .headerCenterBox .leftBox .linkList > li{position: relative;}
#headerWrap .headerCenterBox .slideTextBtn{display: block; border-radius: var(--radius-xs); height: auto; min-width: auto; padding: 0; border: 0;}
#headerWrap .headerCenterBox .slideTextBtn::after{display: none;}
#headerWrap .headerCenterBox .slideTextBtn:hover{background-color: var(--gray-100);}
#headerWrap .headerCenterBox .slideTextBtn .slideTextItem{display: block; padding: var(--spacing-xs); line-height: 1.2; font-size: var(--font-size-s); color: var(--gray-600); font-weight: var(--medium); border-radius: var(--radius-xs);}
#headerWrap .headerCenterBox .leftBox .linkList > li.active .slideTextBtn{color: var(--gray-600); font-weight: var(--medium); background-color: var(--gray-100); font-size: var(--font-size-s); line-height: 1.2;}
#headerWrap .headerCenterBox .leftBox.authBox a{display: block; color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s);}
#headerWrap .headerCenterBox .rightBox,
#headerWrap .headerCenterBox .leftBox{display: flex; align-items: center; }
#headerWrap .headerCenterBox .leftBox{gap: 0 var(--spacing-s)}
#headerWrap .headerCenterBox .rightBox{gap: 0 var(--spacing-s);}
#headerWrap .rightBox .zoomControlBox{position: relative; display: flex; align-items: center;}
#headerWrap .rightBox .zoomControlBox .zoomTooltip {opacity: 0; visibility: hidden; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); padding: var(--spacing-s) var(--spacing-s); background-color: var(--white); color: var(--gray-600); font-size: var(--font-size-m); line-height: 1; border-radius: var(--radius-s); border: 1px solid var(--gray-300); z-index: 10; transition: all .3s; box-shadow: 5px 5px 10px rgba(0,0,0,.1); font-weight: var(--bold);}
#headerWrap .headerCenterBox .rightBox .zoomControlBox .zoomTooltip.show{opacity: 1; visibility: visible;}

/* 헤더 영역 - 메뉴 */
#headerWrap .headerBottomWrap{position: relative; margin-top: var(--spacing-2xs);  z-index: 99; background-color: var(--white);}
#headerWrap .headerBottomBox{position: relative;}
#headerWrap .headerBottomBox .menuBox{display: flex; justify-content: space-between;}
#headerWrap .headerBottomBox nav{flex: 1;}
#headerWrap .headerBottomBox nav .depth01{display: flex; box-shadow: 0 8px 40px rgba(30, 43, 55, 0.1); border-radius: var(--radius-l);}
#headerWrap .headerBottomBox nav .depth01 > li{ flex: 1;}
#headerWrap .headerBottomBox nav .depth01 li h2 a{display: flex; align-items: center; justify-content: center; height: 48px; color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-l); transition: color .3s; background-color: var(--white);} 
#headerWrap .headerBottomBox nav .depth01 li:first-child h2 a{border-radius: var(--radius-l);} 
#headerWrap .headerBottomBox nav .depth01 li:last-child h2 a{border-radius: var(--radius-l);}
#headerWrap .headerBottomBox nav .depth01 li.active h2{position: relative; z-index: 99999;}
#headerWrap .headerBottomBox nav .depth01 li.active h2 a{color: var(--primary-500); border-radius: var(--radius-s) var(--radius-s) 0 0; border: 1px solid var(--gray-600); border-width: 1px 1px 0 1px;}
#headerWrap .headerBottomBox .logoBox{max-width: 240px; width: 100%;}
#headerWrap .headerBottomBox .logoBox h1 a{display: block;}
#headerWrap .headerBottomBox .logoBox h1 a img.m{display: none;}
#headerWrap .headerBottomBox .logoBox h1 a img.pc{margin: -36px auto 0;}
#headerWrap .headerBottomBox .logoBox h1 a img{width: auto;}

/* 헤더 영역 - 서브메뉴 */
#headerWrap .headerBottomBox nav:nth-of-type(1) .depth01 li:first-child .subMenuBox{border-radius: 0 var(--radius-l) var(--radius-l) var(--radius-l);}
#headerWrap .headerBottomBox nav:nth-of-type(2) .depth01 li:last-child .subMenuBox{border-radius: var(--radius-l) 0 var(--radius-l) var(--radius-l);}
#headerWrap .subMenuBox{display: none; position: absolute; top: 47px; left: 0; right: 0;
  z-index: 10;padding-bottom: var(--spacing-lm); overflow: hidden; border: 1px solid var(--gray-600); border-radius: var(--radius-l); box-shadow: 0 8px 40px rgba(30, 43, 55, 0.1); background-color: var(--gray-50);}
#headerWrap .subMenuBox.active {display: flex;}
#headerWrap .subMenuBox .leftBox{display: flex; flex-direction: column; padding: var(--spacing-ms); flex-shrink: 0; width: 200px; border-right: 2px solid var(--gray-100); background-color: var(--white); }
#headerWrap .subMenuBox .leftBox .titlBox h2{margin-bottom: var(--spacing-xs); color: var(--primary-900); font-size: var(--font-size-xxxl); font-family: 'RiaSans';}
#headerWrap .subMenuBox .leftBox .titlBox p{color: var(--gray-400); font-size: var(--font-size-s);}
#headerWrap .subMenuBox .leftBox .linkBox{margin-top: auto;}
#headerWrap .subMenuBox .leftBox .linkBox a{position: relative; height: 32px; padding-left: 32px; display: flex; align-items: center; color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--medium);}
#headerWrap .subMenuBox .leftBox .linkBox a::before{content: ''; position: absolute; top:50%; left:0; transform: translateY(-50%); width: 32px; height: 32px;}
#headerWrap .subMenuBox .leftBox .linkBox a::after{content: ''; width: 24px; height: 24px; margin-left: var(--spacing-xs); background: url(../images/common/link_icon.svg)no-repeat center / contain; transition: all .3s;}
#headerWrap .subMenuBox .leftBox .linkBox a:hover::after{background: url(../images/common/link_icon04.svg)no-repeat center / contain; transform: rotate(-180deg);}
#headerWrap .subMenuBox .leftBox .linkBox a.link01::before{background: url(../images/common/link_icon01.svg)no-repeat center / contain;}
#headerWrap .subMenuBox .leftBox .linkBox a.link02::before{background: url(../images/common/link_icon02.svg)no-repeat center / contain;}
#headerWrap .subMenuBox .leftBox .linkBox a.link03::before{background: url(../images/common/link_icon03.svg)no-repeat center / contain;}
#headerWrap .subMenuBox .rightBox{width: 100%; padding: var(--spacing-xs) var(--spacing-ms); background-color: var(--white); }
#headerWrap .subMenuBox .rightBox .depth02 > li{padding: var(--spacing-m) 0; display: flex; align-items: flex-start; border-bottom: 1px solid var(--gray-100);}
#headerWrap .subMenuBox .rightBox .depth02 > li:last-child{border-bottom: 0;}
#headerWrap .subMenuBox .rightBox .depth02 li h3{flex-shrink: 0; width: 148px;}
#headerWrap .subMenuBox .rightBox .depth02 li h3 a{display: block; color: var(--gray-900); font-size: var(--font-size-xl); font-weight: var(--semi-bold); transition: all .3s;}
#headerWrap .subMenuBox .rightBox .depth02 li:hover h3 a{color: var(--primary-500);}
#headerWrap .subMenuBox .rightBox .depth03{padding-left: var(--spacing-lm); width: 100%; display: flex; flex-wrap: wrap; gap: var(--spacing-s) var(--spacing-ml)}
#headerWrap .subMenuBox .rightBox .depth03 li h4 a{display: block;}
#headerWrap .subMenuBox .rightBox .depth03 li h4 a span{display: block; font-weight: var(--medium); color: var(--gray-600); font-size: var(--font-size-m);}
#headerWrap .subMenuBox .rightBox .depth03 li h4 .hoverSlide:not(.active):hover::before{display: block; text-align: center; font-size: var(--font-size-m);}
#headerWrap #headerWrap  #mobileMenuBox{display: none;}

/* 헤더 영역 - 모달(의원누리집) */
#headerWrap .modalBox{min-width: 331px; padding: var(--spacing-ml) var(--spacing-m); position: absolute; top:26px; left:0; border-radius: var(--radius-l); border: 1px solid var(--gray-600); background-color: var(--white); z-index: 99;}
#headerWrap .modalBox .list{display: flex; flex-wrap: wrap; gap: var(--spacing-2xs);}
#headerWrap .modalBox .list li{width: 23.9%;}
#headerWrap .modalBox .list li a{display: block;}
#headerWrap .modalBox .list li a:hover .imgBox::after{border-color: var(--gray-600);}
#headerWrap .modalBox .list li a .imgBox{position: relative; margin-bottom: var(--spacing-2xs); width: 67px; height: 89px; border-radius: var(--radius-s); background-color: var(--gray-100); overflow: hidden; }
#headerWrap .modalBox .list li .imgBox::after{content: ''; position: absolute; top:0; left:0; right:0; bottom: 0; border: 2px solid transparent; border-radius: var(--radius-s); transition: all .3s;}
#headerWrap .modalBox .list li .imgBox img{height: 100%;}
#headerWrap .modalBox .list li .name{display: block; text-align: center; color: var(--gray-400); font-weight: var(--semi-bold); font-size: var(--font-size-s);} 
#headerWrap .modalBox h3{margin-bottom: var(--spacing-m); color: var(--gray-900); font-weight: var(--bold); font-size: var(--font-size-xxxl);}
#headerWrap .modalBox .closeBtn{width: 40px; height: 40px; position: absolute; top:var(--spacing-ml); right:var(--spacing-m); background: url(../images/common/close_btn01.svg)no-repeat center; transition: all .3s;}
#headerWrap .modalBox .closeBtn:hover{background: url(../images/common/close_btn02.svg)no-repeat center;}
#headerWrap .modalBox.active {opacity: 1; visibility: visible;}

@media (max-width: 1440px){

  #headerWrap .headerBottomBox .logoBox{max-width: 96px;}
  #headerWrap .headerBottomBox .logoBox h1 a img.pc{width: 72px; margin: -13px auto 0;}

}

@media (max-width: 1280px){

  #headerWrap .headerBottomBox nav,
  #headerWrap .headerCenterWrap{display: none;}
  #headerWrap .headerBottomBox .logoBox h1 a img.pc{display: none; margin: 0;}
  #headerWrap .headerBottomBox .logoBox h1 a img.m{display: block;}
  #headerWrap .headerBottomBox .logoBox{width: auto; max-width: none;}
  #headerWrap .headerBottomBox .menuBox{align-items: center; height: 80px;}
  #headerWrap .headerBottomWrap{margin: 0;}

  /* 헤더 영역 - 모바일메뉴 */
  .mobileMenuBtnBox{width: 48px; height: 48px; border-radius: var(--radius-xs); background-color: var(--white); border: 1px solid var(--gray-100); box-shadow: 0 8px 40px rgba(30, 43, 55, 0.1);}
  .mobileMenuBtnBox .mobileBtn{position: relative; width: 100%; height: 100%;}
  .mobileMenuBtnBox .mobileOpenBtn{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-2xs) 0;}
  .mobileMenuBtnBox .mobileOpenBtn span{width: 20px; height: 2px; background-color: var(--gray-600);}
  .mobileMenuBtnBox .mobileCloseBtn{display: none;}
  .mobileMenuBtnBox .mobileCloseBtn span { position: absolute; left: 50%; top: 50%; width: 16px; 
    height: 2px; background: var(--gray-600);}
  .mobileMenuBtnBox .mobileCloseBtn span:nth-child(1){transform: translate(-50%, -50%) rotate(45deg);}
  .mobileMenuBtnBox .mobileCloseBtn span:nth-child(2){transform: translate(-50%, -50%) rotate(-45deg);}
  #mobileMenuBox{opacity: 0; display: flex; flex-direction: column; position: fixed; top:113px; right:0; max-width: 500px; width: 100%; height: calc(100vh - 113px); background: var(--white); border-radius: 0 0 0 40px; overflow: hidden; z-index: 999;  clip-path: circle(0 at 100% 0); transition: clip-path 1.3s ease-out, opacity 0.7s ease-out; overflow-y: auto;}
  #mobileMenuBox.on{opacity: 1; clip-path: circle(180% at 100% 0);}

  /* 헤더 영역 - 모바일메뉴(상단) */
  #mobileMenuBox .mobileTopBox{padding: 12px var(--spacing-s); display: flex; align-items: center; justify-content: space-between; position: relative; display: flex; align-items: center; background: linear-gradient(120deg, #454C53 0%, #9AA9B9 50%, #454C53 100%); background-size: 200% 100%; z-index: 999999; animation: skeletonShimmer 9s infinite linear; }
    
  @keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
  }

  #mobileMenuBox .mobileModalBox{position: relative; max-width: 243px;width: 100%;}
  #mobileMenuBox .modalBox{top: 40px;}
  #mobileMenuBox .mobileTopBox .mobileModalBtn{width: 100%; padding: 0 0 0 var(--spacing-s); height: 40px; display: flex; align-items: center; font-weight: var(--bold); font-size: var(--font-size-m); color: var(--white); border-radius: var(--spacing-xs); background:  url("../images/common/person_img.png") no-repeat bottom right, linear-gradient(to right, #50BEEF, #FB8D3E); line-height: normal; border: 0;}
  #mobileMenuBox .mobileTopBox .mobileModalBtn::after{display: none;}
  #mobileMenuBox .mobileAothBox{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
  #mobileMenuBox .mobileAothBox p{font-size: var(--font-size-s); font-weight: var(--bold); color: var(--white);}
  #mobileMenuBox .mobileAothBox .btn{padding: var(--spacing-2xs) var(--spacing-xs); font-size: var(--font-size-s); font-weight: var(--bold); color: var(--gray-600); background-color: var(--white); border-radius: var(--radius-2xs);}

  /* 헤더 영역 - 모바일메뉴(메뉴) */
  #mobileMenuBox .mobileDepthLayoutBox{display: flex; flex: 1;}
  #mobileMenuBox .mobileDepth01{flex-shrink: 0; width: 204px; padding: var(--spacing-m) var(--spacing-s);}
  #mobileMenuBox .mobileDepth01 li h2 a{display: block; padding-left: var(--spacing-ml); display: flex; align-items: center; height: 64px; font-size: var(--font-size-xl); color: var(--gray-400); font-weight: var(--bold);}
  #mobileMenuBox .mobileDepth01 li h2 a.active{background: linear-gradient(to right, var(--primary-50), var(--primary-100)); color: var(--primary-900); border-radius: var(--radius-m);}
  #mobileMenuBox .mobileDepth01 li:first-child .mobileDepth02{display: block;}
  #mobileMenuBox .mobileDepthBox{width: 100%; background-color: var(--gray-50);}
  #mobileMenuBox .box{display: none; padding: var(--spacing-m) var(--spacing-ml) var(--spacing-m) var(--spacing-m);}
  #mobileMenuBox .mobileDepth02 > li{margin-bottom: var(--spacing-xs);}
  #mobileMenuBox .mobileDepth02 li:last-child{margin-bottom: 0;}
  #mobileMenuBox .mobileDepth02 li h3 a{position: relative; padding: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-2xs); display: block; font-weight: var(--semi-bold); font-size: var(--Subtitle-2); color: var(--gray-600); line-height: 1.5;}
  #mobileMenuBox .mobileDepth02 li h3.depth03.active a{position: relative; color: var(--primary-800);}
  #mobileMenuBox .mobileDepth02 li h3.depth03 a::after{content: ''; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); right:0; background: url(../images/common/arrow_icon02.svg)no-repeat center / contain; transition: all .3s;}
  #mobileMenuBox .mobileDepth02 li h3.active a::after{transform: translateY(-50%) rotate(-180deg);}
  #mobileMenuBox .mobileDepth03{display: none; padding: var(--spacing-xs) 0; background-color: var(--white); border-radius: var(--radius-s); border: 1px solid var(--gray-100);}
  #mobileMenuBox .mobileDepth03 li h4 a{display: block; padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 12px; color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s); line-height: 1.2;}

  /* 헤더 영역 - 모바일메뉴(링크) */
  #mobileMenuBox .mobileLinkBox{margin-top: auto; display: flex; justify-content: center; gap: 0 var(--spacing-ms); padding: var(--spacing-s) 0;}
  #mobileMenuBox .mobileLinkBox .link{flex-shrink: 0; display: flex; align-items: center; color: var(--gray-600); font-weight: var(--medium); font-size: var(--font-size-s);} 
  #mobileMenuBox .mobileLinkBox .link::before{content: ''; width: 32px; height: 32px;}
  #mobileMenuBox .mobileLinkBox .link01::before{background: url(../images/common/link_icon01.svg)no-repeat center / contain;}
  #mobileMenuBox .mobileLinkBox .link02::before{background: url(../images/common/link_icon02.svg)no-repeat center / contain;}
  #mobileMenuBox .mobileLinkBox .link03::before{background: url(../images/common/link_icon03.svg)no-repeat center / contain;}
  #mobileMenuBox .mobileLinkBox .link04{padding: 0 var(--spacing-xs); background-color: var(--gray-100); border-radius: var(--radius-2xs);}
  #mobileMenuBox .mobileLinkBox .link04::before{display: none;}
  .mobilebg{display: none; position: absolute; top:0; left:0; right:0; bottom: 0; z-index: 999; background-color: rgba(30, 43, 55, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);}
  .mobilebg.active{display: block;}

}

@media (max-width: 768px){

  #headerWrap .headerBottomBox .menuBox{height: 64px;}
  #headerWrap .headerBottomBox .logoBox h1 a img.m{width: 121px;}
  #headerWrap .mobileMenuBox{width: 40px; height: 40px;}
  
  #mobileMenuBox{top: 97px; height: calc(100vh - 97px);}

}

@media (max-width: 480px){

  #mobileMenuBox .mobileTopBox{flex-direction: column; gap: var(--spacing-s) 0;}
  #mobileMenuBox .mobileLinkBox{flex-wrap: wrap; gap: var(--spacing-xs) 0;}
  #mobileMenuBox .mobileLinkBox .link{width: 50%; justify-content: center;}
  #mobileMenuBox .mobileDepth01{width: 150px;}
  #mobileMenuBox .mobileDepth01 li h2 a{padding-left: var(--spacing-s); height: 50px; font-size: var(--font-size-m);}
  #mobileMenuBox .mobileDepth01 li h2 a.active{border-radius: var(--radius-xs);}
  #mobileMenuBox .mobileModalBox{max-width: none;}
  #mobileMenuBox .mobileTopBox .mobileModalBtn{max-width: 243px; margin: 0 auto;}
  #mobileMenuBox{top: 93px; height: calc(100vh - 93px); border-radius: 0;}

}

@media (max-width: 414px){

  #mobileMenuBox .mobileDepth01{width: 120px;}
  #mobileMenuBox .mobileDepth01 li h2 a{padding-left: var(--spacing-xs);}

}

/* 푸터 영역 */
#footerWrap{padding: var(--spacing-2xl) 0; border: 2px solid #DFDACF; border-radius: 80px 80px 0 0; border-width: 2px 0 0 0; background-color: var(--gray-50);}
.footerBox{display: flex; justify-content: space-between; gap:0;}
.footerBox .footerLeftBox{display: flex;}

/* 푸터 영역 - 로고 영역*/
#footerWrap .footerLogoBox{margin-right: var(--spacing-l);}
#footerWrap .footerLogoBox h1 img{width: 90px;}

/* 푸터 영역 - 안내 영역*/
#footerWrap .footerInfoBox .phoneBox{margin-bottom: var(--spacing-s); display: flex; align-items: center; gap: 0 var(--spacing-ml);}
#footerWrap .footerInfoBox .phoneBox dl{display: flex; align-items: flex-start; gap: 0 var(--spacing-xs);}
#footerWrap .footerInfoBox .phoneBox dl dt{font-weight: 800; font-family: 'RiaSans'; color: var(--gray-900); font-size: var(--font-size-s);}
#footerWrap .footerInfoBox .phoneBox dl dd{font-weight: var(--medium); color: var(--gray-600);}
#footerWrap .footerInfoBox .timeBox{margin-bottom: var(--spacing-lm); width: 175px; padding: var(--spacing-xs) var(--spacing-s); border-radius: var(--radius-xs); background-color:  var(--gray-100); background-color: var(--white);}
#footerWrap .footerInfoBox .timeBox dl{display: flex; align-items: center; gap: 0 var(--spacing-xs)}
#footerWrap .footerInfoBox .timeBox dl dt{width: 56px; flex-shrink: 0; color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
#footerWrap .footerInfoBox .timeBox dl dd{color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--medium);}
#footerWrap .footerInfoBox address{margin-bottom: var(--spacing-xs); font-style: normal; color: var(--gray-600); font-size: var(--font-size-s); font-weight: var(--medium);}
#footerWrap .footerInfoBox .copy{display: block; color: var(--gray-400); font-size: var(--font-size-xs); font-weight: var(--bold); letter-spacing: 0;}

/* 푸터 영역 - 링크 영역*/
#footerWrap .footerLinkBox{display: flex; flex-direction: column; width: 524px;}
#footerWrap .footerLinkBox .linkBox{display: flex; flex-wrap: wrap; gap:var(--spacing-m) 0; margin-bottom: var(--spacing-lm);}
#footerWrap .footerLinkBox .linkBox .link{display: block; width: 50%; color: var(--gray-400); font-weight: var(--bold);}
#footerWrap .footerLinkBox .linkBox .link.privacyPolicy{color: var(--secondary-800);}
#footerWrap .footerLinkBox .selectBox{position: relative; display: flex; gap: 0 var(--spacing-m);}
#footerWrap .footerLinkBox .selectBox .box{position: relative; width: 50%;}
#footerWrap .footerLinkBox .selectBox .selectBtn{position: relative;  padding: var(--spacing-s) var(--spacing-xl) var(--spacing-s) var(--spacing-ms); display: flex; align-items: center; width: 100%;  font-size: var(--font-size-s); font-weight: var(--medium); background-color: var(--gray-600); border-radius: var(--radius-m); color: var(--white); line-height: 1.2; transition: all .3s;}
#footerWrap .footerLinkBox .selectBox .selectBtn::after{content: ''; width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-50%); right:var(--spacing-xs);  background: url(../images/common/arrow_icon.svg)no-repeat center / contain; transition: all .3s;}
#footerWrap .footerLinkBox .selectBox .selectBtn.active{background-color: var(--gray-900);}
#footerWrap .footerLinkBox .selectBox .selectBtn.active::after{transform: translateY(-50%) rotate(180deg);}
#footerWrap .footerLinkBox .selectBox .selectBtn.active + .selectList{opacity: 1; visibility: visible;}
#footerWrap .footerLinkBox .selectBox .selectList{height: 170px; opacity: 0; visibility: hidden; padding: var(--spacing-xs) 0; position: absolute; bottom: 58px; left:0; right:0; border-radius: var(--radius-xs); background-color: var(--gray-600); overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,.1); transition: all .3s; overflow-y: auto;}
#footerWrap .footerLinkBox .selectBox .selectList li .link{display: block; padding: var(--spacing-xs) var(--spacing-ms); color: var(--gray-200);  font-weight: var(--medium); font-size: var(--font-size-s); transition: all .3s;}
#footerWrap .footerLinkBox .selectBox .selectList li .link:hover{color: var(--white);}

@media (max-width: 1280px){

  #footerWrap{padding: var(--spacing-lm) 0;}
  #footerWrap .footerLinkBox{width: 250px;}
  #footerWrap .footerLinkBox .selectBox{flex-direction: column; gap: var(--spacing-xs) 0;}
  #footerWrap .footerLinkBox .linkBox{gap: var(--font-size-m) 0;}
  #footerWrap .footerLinkBox .linkBox .link{font-size: var(--font-size-s);}
  #footerWrap .footerLinkBox .selectBox .box{width: 100%;}
  #footerWrap .footerInfoBox .phoneBox{flex-direction: column; align-items: flex-start; gap: var(--spacing-xs) 0}
  #footerWrap .footerInfoBox .phoneBox dl dd{font-size: var(--font-size-s);}

}

@media (max-width: 1024px){

  #footerWrap{border-radius: var(--radius-xl) var(--radius-xl) 0 0;}
  #footerWrap .footerLogoBox{margin-right: var(--spacing-m);}
  #footerWrap .footerLogoBox h1 img{width: 72px;}
  #footerWrap .footerLinkBox{width: 250px;}
  #footerWrap .footerLinkBox .selectBox{flex-direction: column; gap: var(--spacing-xs) 0;}
  #footerWrap .footerLinkBox .linkBox .link{font-size: var(--font-size-s);}
  #footerWrap .footerLinkBox .selectBox .box{width: 100%;}
  #footerWrap .footerInfoBox .phoneBox{flex-direction: column; align-items: flex-start; gap: var(--spacing-xs) 0}
  #footerWrap .footerInfoBox .phoneBox dl dd{font-size: var(--font-size-s);}

}

@media (max-width: 768px){

  #footerWrap{padding: var(--spacing-lm) 0 var(--spacing-ms);}
  #footerWrap .footerLogoBox{margin: 0;}
  #footerWrap .footerBox{flex-direction: column; gap: var(--spacing-2xl) 0;}
  #footerWrap .footerBox .footerLeftBox{flex-direction: column; align-items: center; gap: var(--spacing-m) 0;}
  #footerWrap .footerInfoBox .phoneBox{flex-direction: row; justify-content: center; gap: 0 var(--spacing-s);}
  #footerWrap .footerInfoBox .timeBox{margin: 0 auto var(--spacing-lm);}
  #footerWrap .footerInfoBox .copy{text-align: center;}
  #footerWrap .footerLinkBox{width: 100%;}
  #footerWrap .footerInfoBox address,
  #footerWrap .footerLinkBox .linkBox .link{text-align: center;}
  
}

/* 로그인모달 */
#loginModalWrap{position: fixed; top:50%; left: 50%; transform: translate(-50%, -50%); max-width: 640px; width: 90%; padding: var(--spacing-l) var(--spacing-2xl); border-radius: var(--radius-xl); background-color: var(--white); z-index: 999999999999;}
#loginModalWrap h2{margin: 0 auto var(--spacing-s); display: flex; align-items: center; justify-content: center; width: 53px; height: 25px; border-radius: var(--radius-xs); background-color: var(--gray-100); color: var(--gray-600); font-weight: var(--semi-bold); font-size: var(--font-size-s);}
#loginModalWrap .text01{margin-bottom: var(--spacing-m); text-align: center; color: var(--gray-600); font-weight: var(--bold); font-size: var(--H4);}
#loginModalWrap .loginModalBtnBox{margin-bottom: var(--spacing-m); display: flex; justify-content: center; gap: 0 var(--spacing-xs);}
#loginModalWrap .loginModalLink{position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-ms);}
#loginModalWrap .loginModalLinkBox{position: relative; max-width: 245px; width: 100%; height: 278px; text-align: center; border-radius: var(--radius-xl); overflow: hidden; z-index: 1;}
#loginModalWrap .loginModalLinkBox .loginModalTextBox,
#loginModalWrap .loginModalLinkBox .loginModalTextBox p,
#loginModalWrap .loginModalLinkBox .loginModalImgBox img{transition: all 1.3s;}
#loginModalWrap .loginModalLinkBox .loginModalTextBox{width: 100%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 99;}
#loginModalWrap .loginModalLinkBox .loginModalTextBox p{opacity: 0; margin-top: var(--spacing-xs); font-size: var(--body-2);color: rgba(255,255,255,.8);}
#loginModalWrap .loginModalLinkBox .loginModalTextBox h3{display: flex; flex-direction: column; align-items: center; font-family: 'RiaSans'; font-weight: var(--bold); font-size: var(--font-size-xxxl); color: var(--white);}
#loginModalWrap .loginModalLinkBox .loginModalImgBox img{width: 168px; margin: 0 auto; }
#loginModalWrap .loginModalLink::after{content: '';position: absolute; left:0; right:0; top:0; bottom: 0;}
#loginModalWrap .loginModalLinkBox01 .loginModalLink::after{background: url(../images/common/login_bg01.png)no-repeat center / cover;}
#loginModalWrap .loginModalLinkBox01{background-color: #56D9AB;}
#loginModalWrap .loginModalLinkBox02{background-color: #F5A56C;}
#loginModalWrap .loginModalLinkBox02 .loginModalLink::after{background: url(../images/common/login_bg02.png)no-repeat center / cover;}
#loginModalWrap .loginModalLinkBox:hover .loginModalImgBox img{transform: scale(1.1) translateY(-10px);}
#loginModalWrap .loginModalLinkBox:hover .loginModalTextBox{transform: translateX(-50%) translateY(-25px);}
#loginModalWrap .loginModalLinkBox:hover .loginModalTextBox p{opacity: 1;}
#loginModalWrap .text02{margin-bottom: var(--spacing-l); text-align: center; color: var(--gray-600); font-weight: var(--medium);}
#loginModalWrap .loginModalCloseBtn{display: block; margin: 0 auto; }

@media (max-width: 1024px){

  #loginModalWrap .text01{font-size: var(--H5);}
  #loginModalWrap .loginModalBtnBox .loginModalLinkBox{width: 200px; height: 240px;}
  #loginModalWrap .loginModalLinkBox .loginModalTextBox h3{font-size: var(--H6);}
  #loginModalWrap .loginModalLinkBox .loginModalImgBox img{width: 150px;}
  #loginModalWrap .loginModalBtnBox .loginModalLinkBox::after{top: 5px;}

}

@media (max-width: 576px){

  #loginModalWrap{padding: var(--spacing-l) var(--spacing-m);}

}

@media (max-width: 480px){

  #loginModalWrap{border-radius: var(--radius-l);}
  #loginModalWrap .loginModalBtnBox .loginModalLinkBox{border-radius: var(--radius-l);}
  #loginModalWrap .loginModalLinkBox .loginModalImgBox img{width: 130px;}

}

/* 로그인 */
#loginWrap{padding: 0 var(--spacing-s); position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; background: url(../images/common/login_bg.png)no-repeat center / cover; overflow: hidden;}
#loginWrap::after{content: ''; width: 629px; height: 637px; position: absolute; left: calc(50% - 42px); top: 50%; transform: translateY(-50%); background: url(../images/common/parliament_badge.svg)no-repeat center / contain; z-index: -1;}
#loginWrap .loginBox{padding: var(--spacing-l); max-width: 640px; width: 100%; border-radius: var(--radius-xl); background-color: var(--white);}
#loginWrap .loginBox .loginLogoBox{margin-bottom: 115px;}
#loginWrap .loginBox .loginLogoBox h1 a img{width: 137px;}
#loginWrap .loginInputBox{position: relative; padding-bottom: var(--spacing-2xl); border-bottom: 1px solid var(--gray-50); z-index: 1;}
#loginWrap .loginInputBox::after{content: ''; width: 120px; height: 120px; position: absolute; top:-58px; right:0; z-index: -1;}
#loginWrap .loginInputBox h2{margin-bottom: var(--spacing-m); color: var(--gray-900); font-size: var(--H4);}
#loginWrap .inputCheckBox input:checked + .checkLabel{box-shadow: 0 0 0 2px var(--gray-600); background: url(../images/common/chk_icon02.svg)no-repeat var(--spacing-s) center;}
#loginWrap .loginInputBox input:focus{outline: 0; box-shadow: 0 0 0 2px var(--gray-600);}
#loginWrap .loginInputBox .checkLabel{padding-left: 53px; display: flex; align-items: center; width: 100%; height: 72px; border: 1px solid var(--gray-50); border-radius: var(--radius-xs); background: url(../images/common/chk_icon.svg)no-repeat var(--spacing-s) center; cursor: pointer;}
#loginWrap .loginInputBox .checkLabel span{display: flex; align-items: center; gap: 0 var(--spacing-xs); font-weight: var(--medium); font-size: var(--font-size-m);}
#loginWrap .loginInputBox .checkLabel span::before{content: ''; width: 32px; height: 32px; background: url(../images/common/man_img.svg)no-repeat center / contain;}
#loginWrap .loginInputBox .inputTextBox{margin-bottom: var(--spacing-xs);}
#loginWrap .loginInputBox .inputCheckBox .chkBtn,
#loginWrap .loginInputBox  input{padding-left: 50px; width: 100%; height: 72px; border: 1px solid var(--gray-50); border-radius: var(--radius-xs); font-weight: var(--medium); font-size: var(--font-size-m);}
#loginWrap .loginInputBox  input::placeholder{color: var(--gray-400);}
#loginWrap .loginInputBox  input#id{background: url(../images/common/login_icon.svg)no-repeat var(--spacing-s) center;}
#loginWrap .loginInputBox  input#password{background: url(../images/common/lock.svg)no-repeat var(--spacing-s) center;}
#loginWrap .loginInputBox .loginBtn{display: block; margin-top: var(--spacing-s); width: 100%; height: 72px; font-weight: var(--bold); font-size: var(--font-size-l);}
#loginWrap .loginInfoBox{padding-top: var(--spacing-ms); display: flex; align-items: center; justify-content: space-between;}
#loginWrap .loginInfoBox p{font-weight: var(--medium); color: var(--gray-600);}
#loginWrap .loginInfoBox p strong{color: var(--primary-500); font-weight: var(--medium);}
#loginWrap .loginInfoBox .loginLinkBox{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
#loginWrap .loginInfoBox .loginLinkBox a{padding: var(--spacing-s);}
#loginWrap .loginInfoBox .loginLinkBox .loginLink01{color: var(--gray-600); font-weight: var(--bold); font-size: var(--body-1);}
#loginWrap .loginInfoBox .loginLinkBox .loginLink02{ color: var(--white); font-weight: var(--bold); font-size: var(--body-1); background-color: var(--primary-500); border-radius: var(--radius-s);}

/* 로그인 - 의원로그인 */
#loginWrap.loginMemberWrap .loginInputBox::after{background: url(../images/common/login_img01.png)no-repeat center / contain;}

/* 로그인 - 시민로그인 */
#loginWrap.loginCitizenWrap .loginInputBox::after{background: url(../images/common/login_img02.png)no-repeat center / contain;}
#loginWrap.loginCitizenWrap .loginInfoBox{justify-content: center;}

@media (max-width: 1024px){

  #loginWrap .loginInputBox{padding-bottom: var(--spacing-lm);}
  #loginWrap::after{width: 548px; height: 557px; left: calc(50% - -2px);}

  #loginWrap.loginCitizenWrap .loginInputBox{padding-bottom: var(--spacing-2xl);}

}

@media (max-width: 576px){

  #loginWrap .loginBox{padding: var(--spacing-l) var(--spacing-m);}
  #loginWrap .loginBox .loginLogoBox{margin-bottom: var(--spacing-lm);}
  #loginWrap .loginInputBox::after{display: none;}
  #loginWrap .loginInputBox h2{text-align: center; font-size: var(--H5);}
  #loginWrap .loginInputBox .checkLabel,
  #loginWrap .loginInputBox .loginBtn,
  #loginWrap .loginInputBox input{height: 64px;}
  #loginWrap .loginInfoBox{flex-direction: column; gap: var(--spacing-ms) 0;}
  #loginWrap .loginInputBox input,
  #loginWrap .loginInfoBox p{font-size: var(--font-size-s);}

  #loginWrap::after{top: auto; width: 286px; height: 291px; left: 54%; transform: translateX(-50%); bottom: -139px;}

  #loginWrap .loginInputBox{padding-bottom: var(--spacing-lm)!important;}

}

 /* 의원누리집 - 헤더 */ 
  #wrap.memberWrap .memberLogoInfoBox{display: flex; gap: 0 var(--spacing-s);}
  #wrap.memberWrap .memberLogoInfoBox img{width: 56px;}
  #wrap.memberWrap .memberLogoInfoBox .memberInfoBox{display: flex; align-items: center; gap: 0 var(--spacing-xs);}
  #wrap.memberWrap .memberLogoInfoBox .memberInfoBox .memberName{color: var(--gray-900); font-weight: var(--bold); font-size: var(--font-size-xxxl);}
  #wrap.memberWrap .memberLogoInfoBox .memberInfoBox .memberRole{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);}
  #wrap.memberWrap #headerWrap .headerBottomWrap{margin-top: 0;}
  #wrap.memberWrap #headerWrap .headerBottomBox{padding: var(--spacing-xs) 0; display: flex; align-items: center; justify-content: space-between;}
  #wrap.memberWrap #headerWrap .headerBottomBox nav .depth01{box-shadow: none; border-radius: 0; gap: 0 var(--spacing-ml)}
  #wrap.memberWrap #headerWrap .headerBottomBox nav .depth01 li h2 a{padding: var(--spacing-xs); border-radius: 0; height: auto; font-size: var(--Subtitle-1); font-weight: var(--semi-bold); color: var(--gray-600);}
  #wrap.memberWrap #headerWrap .headerBottomBox nav .depth01 > li{flex: none;}

  @media (max-width: 1280px){

      #wrap.memberWrap #mobileMenuBox{top: 129px;}
      #wrap.memberWrap #mobileMenuBox .mobileDepth01{width: 100%;}

  }

  @media (max-width: 768px){

    #wrap.memberWrap #mobileMenuBox{top: 115px;}    
    #wrap.memberWrap .memberLogoInfoBox .memberInfoBox .memberName{font-size: var(--font-size-xl);}
    
  }

  @media (max-width: 480px){

    #wrap.memberWrap #mobileMenuBox{top: 111px;}

  }

  /* 의원누리집 - 공통 */ 
.memberIntroImgBox{margin-bottom: -62px; display: flex; align-items: center; justify-content: center; width: 440px; height: 516px; border-radius: var(--radius-m); background: url(../images/main/bg.jpg) no-repeat center / cover; box-shadow: inset 0 4px 40px rgba(247, 248, 249, 1);} 
.memberIntroImgBox .imgBox{position: relative; max-width: 269px; height: 360px; background-color: var(--white); border-radius: var(--radius-m) var(--radius-m) var(--radius-l) var(--radius-m); overflow: hidden;} 
.memberIntroImgBox .imgBox img{height: 100%; object-fit: cover;}
.memberIntroImgBox .imgBox .politicalParty{position: absolute; bottom: 20px; right:20px;}
.memberIntroTextBox{position: relative; max-width: 316px; margin: 0 auto; padding: var(--spacing-ml) var(--spacing-m); height: 139px; background: linear-gradient(to bottom, var(--white) 70%, rgba(255,255,255,0) 100%);
   border-radius: var(--radius-l) var(--radius-l) 0 0; z-index: 99;}
.memberIntroTextBox .textBox{margin-bottom: var(--spacing-ml);}
.memberIntroTextBox .topBox h4{color: var(--gray-600); font-size: var(--font-size-s);  font-family: 'RiaSans'; font-weight: var(--regular); text-align: right;}
.memberIntroTextBox .topBox h4 em{display: block; margin-top: var(--radius-2xs); font-size: var(--font-size-xl); font-style: normal; font-weight: var(--bold);}
.memberIntroTextBox .topBox{display: flex; justify-content: space-between; align-items: flex-end;}
.memberIntroTextBox .topBox .bar{width: 28px; height: 36px; background: url(../images/main/bar_icon.svg)no-repeat center / contain;}
.memberIntroTextBox .topBox span{font-size: var(--font-size-s); font-weight: var(--medium); color: var(--gray-600); line-height: 1.5;}
.memberIntroTextBox .topBox span img{width: 18px; margin-bottom: var(--radius-s);}
.councilActivityListWrap{position: relative; overflow: hidden; border-radius: var(--radius-m); background-color: var(--white); border: 1px solid var(--gray-100); }
.councilActivityListWrap::after{content: ''; opacity: 0; height: 64px; position: absolute; left:-20px; right:-20px; bottom: 0;  background: url(../images/main/bg03.png)no-repeat center bottom / cover;}
.councilActivityListWrap.hasScroll:not(.scrollEnd)::after{opacity: 1;}
.councilActivityList{height: 914px; padding: var(--spacing-lm); overflow-y: auto; }
.councilActivityList li{margin-bottom: var(--spacing-2xl); display: flex; gap: 0 var(--spacing-lm);}
.councilActivityList li:last-child{margin-bottom: 0;}
.councilActivityList li .councilActivityImgBox{flex-shrink: 0; width: 90px; word-break: keep-all;}
.councilActivityList li .councilActivityImgBox .imgBox{margin-bottom:var(--spacing-xs); margin: 0 auto var(--spacing-xs); width: 48px; height: 48px; border-radius: var(--radius-m); background-color: var(--gray-100); overflow: hidden;}
.councilActivityList li .councilActivityImgBox .imgBox img{height: 100%; object-fit: cover;}
.councilActivityList li .councilActivityImgBox .name{display: block; margin-bottom: var(--spacing-s); text-align: center; color: var(--gray-600); font-weight: var(--bold); line-height: 1;}
.councilActivityList li .councilActivityImgBox .date{display: block; color: var(--gray-400); font-weight: var(--bold); font-size: var(--font-size-xs);}
.councilActivityList li .councilActivityTextBox{overflow: hidden;}
.councilActivityList li .councilActivityTextBox h4{margin-bottom: var(--spacing-xs); color: var(--gray-900); font-weight: var(--semi-bold); font-size: var(--font-size-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.councilActivityList li .councilActivityTextBox p{color: var(--gray-600); font-size: var(--font-size-s);  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.7;}
.councilActivityList li .councilActivityTextBox .activityInfoBox{margin-bottom: var(--spacing-s); display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-xs);}
.councilActivityList li .councilActivityTextBox .activityTitle{ padding: var(--spacing-xs); background-color: #EAEACB; color: #4E4E1D; border-radius: 0 0 var(--radius-s) 0; font-weight: var(--semi-bold); font-size: var(--font-size-xs);}
.councilActivityList li .councilActivityTextBox .activityType{color: var(--gray-600); font-weight: var(--bold); font-size: var(--font-size-s);}
.councilActivityList li .activityResultInfoBox{display: inline-flex; align-items: center; gap: 0 var(--spacing-xs); padding: var(--spacing-2xs) var(--spacing-xs); background-color: var(--gray-100); border-radius: var(--radius-xs);}
.councilActivityList li .activityResultInfoBox .activityResultLabel{flex-shrink: 0; display: flex; align-items: center; gap: 0 var(--spacing-2xs); font-size: var(--body-2); font-weight: var(--bold); color: var(--gray-600);}
.councilActivityList li .activityResultInfoBox .activityResultLabel::before{content: ''; width: 6px; height: 6px; background-color: var(--primary-500); border-radius: var(--radius-2xs);}
.councilActivityList li .activityResultInfoBox .activityResultStatus{font-size: var(--body-2); font-weight: var(--medium); color: var(--gray-600);}
.memberActivityImgList{margin-bottom: var(--spacing-2xl); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m);}
.memberActivityImgList li{text-align: right;}
.memberActivityImgList li .memberActivityImgBox{position: relative; height: 0; padding-top: 55%; border-radius: var(--radius-m); overflow: hidden; } 
.memberActivityImgList li .memberActivityImgBox::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; 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);}
.memberActivityImgList li .memberActivityImgBox video,
.memberActivityImgList li .memberActivityImgBox img{position: absolute; top:0; left:0; right:0; bottom: 0; width: 100% ;height: 100%; object-fit: cover;}
.memberActivityImgList li .memberActivityTextBox{position: absolute; left:32px; bottom: 32px; right: 32px; z-index: 9; text-align: left;}
.memberActivityImgList li .memberActivityTextBox .date{color: var(--white); font-weight: var(--bold); font-size: var(--font-size-s);}
.memberActivityImgList li .memberActivityTextBox .category{padding: var(--spacing-2xs) var(--spacing-xs); color: var(--primary-700); background-color: var(--primary-50); border: 1px solid var(--primary-200); border-radius: 0 0 0 var(--radius-xs); font-weight: var(--semi-bold); font-size: var(--font-size-xs);}
.memberActivityImgList li .memberActivityTextBox h4{font-size: var(--font-size-xxxl); font-weight: var(--bold); color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.memberActivityImgList li .activityTextTopBox{margin-bottom: var(--spacing-xs); display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs);} 

@media (max-width: 1280px){

  .memberIntroImgBox{width: auto;}

  .councilActivityList{padding: var(--spacing-lm) var(--spacing-m);}
  .councilActivityList li{gap: 0 var(--spacing-m);}

}

@media (max-width: 1024px){
 
  .memberIntroImgBox{margin-bottom: -27px; width: 100%; height: 440px;}

  .councilActivityList{height: 475px;}

  .memberActivityImgList li .memberActivityTextBox h4{font-size: var(--font-size-l);}
  .memberActivityImgList li .memberActivityImgBox{padding-top: 62.4%;}

}

@media (max-width: 768px){

  .memberActivityImgList{grid-template-columns: 1fr;}

}

@media (max-width: 480px){

  .memberIntroImgBox{height: 347px;}
  .memberIntroTextBox{max-width: none;}
  .memberIntroImgBox .imgBox{height: 267px;}

  .councilActivityList{padding: var(--spacing-lm) var(--spacing-s);}
  .councilActivityList li .councilActivityTextBox .activityInfoBox{flex-direction: column; gap: var(--spacing-xs) 0; align-items: flex-start;}
  .councilActivityList li .councilActivityTextBox h4{font-size: var(--font-size-s);}

  .memberActivityImgList li .memberActivityImgBox{padding-top: 68.4%;}
  .memberActivityImgList li{text-align: center;}
  .memberActivityImgList li .memberActivityTextBox{left: 24px; right: 24px; bottom: 24px;}

}

@media (max-width: 360px){

  .memberActivityImgList li .memberActivityImgBox{padding-top: 86.4%;}
  .memberActivityImgList li .memberActivityImgBox::after{height: 103px;}

}