/*********common***************/
 /** web Font **/
/*
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
*/

:root {
  --logo-blue:#1c2d57;
  --logo-green:#007d79;
  --logo-sky:#419ebb;
  --logo-yellow:#f5ac4d;
  --logo-orange:#f26c4c;
  --logo-blue-rgb: 28, 45, 87;
  --logo-green-rgb: 0, 125, 121;
  --logo-yellow-rgb: 245, 172, 77;
  --logo-orange-rgb: 208, 104, 66;


  --topbar-height:36px;
  --header-height:100px;
  --tablet-header-height:80px;
  --mobile-header-height:60px;

  --content-topspace:136px; /* --topbar-height + --header-height */
  --tablet-content-topspace:116px; /* --topbar-height + --tablet-header-height */
  --mobile-content-topspace:96px; /* --topbar-height + --mobile-header-height */

  --subgnb-top:150px;
  --theme-color:var(--logo-orange);
  --theme-color-rgb:var(--logo-orange-rgb);

  --darkgreen: #1c5352;
  --darkgreen-border:#336564;



  --inprogress-color:var(--logo-yellow);
  --applying-color:var(--logo-blue);
  --applyclosed-color:var(--logo-blue);
  --closed-color:#bcbcbc;
  --primary-color:var(--logo-blue);

}

.skip-nav { position: fixed; width:100%; left:0; top:0; z-index: 9999; transform: translate(0%, -100%); transition: all 0.5s; color: #fff; background: #333; font-size: 16px; padding: 15px; font-weight: 400; line-height: 1.3; text-align:center; vertical-align: middle; }
.skip-nav:focus { transform: translate(0%, 0%); }


.pager {
  --bs-pagination-color: var(--logo-orange);
  --pagination-color:#fff;
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--logo-orange-rgb), 0.25);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
}

.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--logo-orange);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--logo-orange-rgb), 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--logo-orange);
  --bs-pagination-active-border-color: #0d6efd;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--logo-blue);
  --bs-btn-border-color: var(--logo-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #1f47b1;
  --bs-btn-hover-border-color: #1d42a2;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #1d42a2;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--logo-blue);
  --bs-btn-disabled-border-color: var(--logo-blue);
}

a {
  color: #222;
  text-decoration: none;
}

a.over-orange:hover {
  color: var(--logo-orange);
}


.pagination-wrap { margin-top:30px; }

#gotoTop {
  display: none;
  z-index: 299;
  position: fixed;
  padding:15px 20px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  top: auto;
  left: auto;
  right: 30px;
  bottom: 50px;
  cursor: pointer;
  border-radius: 0px;
  border: 1px solid var(--logo-orange);
  background-color:rgba(var(--logo-orange-rgb), 0.5);
}
#gotoTop i { color:#fff; }


#gotoTop:hover {
  border: 1px solid #027c4b;
  background-color:rgba(var(--logo-orange-rgb), 1);
}

/* Top */
.top-bar {
  height:36px;
  padding: 7px 0px;
  background: var(--logo-blue) !important;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:10;
}

.top-bar .top-link-wrap { height:100%; display:flex; justify-content: flex-end !important; align-items: center !important; gap:20px;}
.top-bar .top-link-wrap a { color:#fff; text-decoration:none;font-size:0.9em;}


@media screen and (max-width: 578px) {
  .top-bar .top-link-wrap.fs-sm a { font-size:0.8em; padding-left:0px; }
}

.gnb-wrap { display:flex;justify-content: space-between !important; align-items: center !important;}



.gnb-sub-inner { display:flex; align-items: center !important;justify-content: space-between !important;}
.gnb-sub-inner .desktop-gnb-sub {
  display:flex;justify-content: space-between !important; align-items: flex-start !important;
}

.desktop-gnb-sub { margin:0; padding:0; }
.desktop-gnb-sub li { margin:0; padding:0; list-style:none; }
.desktop-gnb-sub li a { color:#000; text-decoration:none; }
.desktop-gnb-sub li a:hover { color:var(--theme-color); }
.desktop-gnb-sub .gnb-depth2-wrap {padding: 0 1.5em; }


.content-wrap { margin-top:var(--content-topspace); transition: all 0.3s; }

@media screen and (max-width: 992px) {
  .content-wrap { margin-top:var(--tablet-content-topspace); }
}

@media screen and (max-width: 768px) {
  .content-wrap { margin-top:var(--mobile-content-topspace); }
}


.gnb-sub-overlay { background-color:#fff; width:100%; height:0px;
  transition: all 0.5s;
  opacity:0;
  overflow:hidden;
  position:relative;
  display:flex;
}
.gnb-sub-overlay:after {content:''; position:absolute; top:0; left:0; width:0; height:1px; background-color:var(--theme-color); transition: all 0.8s; }

.gnb-sub-overlay .probono-text { opacity:0.9; margin-bottom:30px; }
.gnb-sub-overlay .probono-text .law-logo img { width: 60px; }
.gnb-sub-overlay .probono-text .platform-text img { width: 200px; }



.header.hover .gnb-sub-overlay { height:250px; opacity:1; }
.header.hover .gnb-sub-overlay:after { width:100%; }


.gnb-sub-overlay .probono { display:inline-block; margin-top:30px;}
.gnb-sub-overlay .probono img { height:130px; opacity:0.5;}



.page-title-wrap { margin-bottom:20px; }
.page-title-wrap .page-title { display:flex; justify-content: space-between !important; align-items: center !important; }
.page-title-wrap .page-title h2 { font-size:clamp(1.5rem, 2.5vw, 2.5rem); font-weight:600; }



/* 메인 */
#popupModal .modal-footer { position:relative; }
#popupModal .carousel-indicators [data-bs-target] { background-color:var(--logo-orange); width:20px; height:20px; margin-top:0px; border-radius:50%;border-top: 0;  border-bottom: 0;}
#popupModal .carousel-indicators {position: relative; right: auto; bottom: auto; left: auto; z-index: 2; margin-right: 10px; margin-bottom: 0; margin-left: 10px; align-items: center !important; }
#popupModal .carousel-control-next,
#popupModal .carousel-control-prev { border-radius:50%; position:relative; }
#popupModal .carousel-control-next:hover,
#popupModal .carousel-control-prev:hover { color: #000; opacity: .4; }
#popupModal .carousel-control-next-icon,
#popupModal .carousel-control-prev-icon { background-size:50%; filter: invert(1) grayscale(100); }
#popupModal .carousel-control-next, #popupModal .carousel-control-prev { width: 30px; height: 30px; }
#popupModal .popup-modal h3.poptitle { text-align:center; margin-top:0; margin-bottom:20px; padding:5px; font-size:25px; color: var(--logo-orange); font-family: 'Nanum Myeongjo', serif;}
#popupModal .popup-modal .carousel-control-next, #popupModal .carousel-control-prev { width: auto; }
#popupModal .carousel-control-prev:hover, #popupModal .carousel-control-next:hover { background-color:rgba(0, 0, 0, .2); }
#popupModal .modal-title img { height:30px; }



.page-main .renewal-alarm {
  width:100%;
  position:fixed;
  z-index:100;
  top:0;
  background: var(--logo-blue) !important;
  color:#fff;
  padding:30px 0px;
  text-align:center;
}

.page-main .renewal-alarm.show {
  animation: slidedown 0.5s normal forwards;
}

.page-main .renewal-alarm.hide {
  animation: slideup 0.2s normal forwards;
}

@keyframes slidedown {
  from {
    transform: translate(0%, -100%);
  }
  to {
    transform: translate(0%, 0%);
  }
}

@keyframes slideup {
  from {
    transform: translate(0%, 0%);
  }
  to {
    transform: translate(0%, -100%);
  }
}

.page-main .renewal-alarm .col-12 { position:relative; }
.page-main .renewal-alarm h4 { position:relative; display:inline-block; font-size:2em; margin-bottom:20px;}
.page-main .renewal-alarm h4:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:10px; background-color:rgba(var(--logo-yellow-rgb), 0.5); }
.page-main .renewal-alarm p { color:#ffc107; font-size:clamp(1.0em, 2.5vw, 1.2em); }
.page-main .renewal-alarm p i { font-size:clamp(1.5em, 2.5vw, 1.8em); }
.page-main .renewal-alarm a.no-more-rewnewal-alarm-show { position:absolute; right:0; bottom:0; color:#fff; }
.page-main .renewal-alarm a.no-more-rewnewal-alarm-show:hover { color:#ffc107;}

.page-main .rotate-minus-180:before { transform: rotate(-180deg); }
.page-main .rotate-plus-90:before { transform: rotate(90deg); }



.main-visual { min-height:400px; margin-bottom:30px; }
.page-main .swiper {
  width: 100%;
  height: 400px;
}

.page-main .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size:cover;
  position:relative;
}
.page-main .swiper-slide:after {
  position:absolute;
  content:'';
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color:rgba(0, 0, 0, 0.3);
  z-index:1;
}

.page-main .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-main .autoplay-progress {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 10;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  opacity:0.5;
  font-size:0.8em;
}

.page-main .autoplay-progress svg {
  --progress: 0;
  position: absolute;
  left: 0;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
  stroke-width: 4px;
  stroke: var(--theme-color);
  fill: none;
  stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
  stroke-dasharray: 125.6;
  transform: rotate(-90deg);
}

.page-main .swiper-slide .container { z-index:2; }
.page-main .swiper-slide .container,
.page-main .swiper-slide .row { height:100%; }

.page-main .swiper-slide .mv-item-wrap { display:flex;align-items: center !important; }
.page-main .swiper-slide .mv-item { border-left:5px solid var(--theme-color);background-color:rgba(255, 255, 255, 0.8); width:100%; height:0%; display:flex;justify-content: center !important;align-items: center !important; transition: all 0.5s;}
.page-main .swiper-slide.active-animation .mv-item { height:100%; padding:30px; }

.page-main .swiper-slide .mv-item .probono-text {width: 80%; margin-bottom:30px; transform: translate(0%, -200%);transition: all 1s;opacity:0; }
.page-main .swiper-slide.active-animation .mv-item .probono-text { transform: translate(0%, 0%);transition: all 0.5s;opacity:1; }

.page-main .swiper-slide .mv-item .probono-text .law-logo img { width: 50px; }
.page-main .swiper-slide .mv-item .probono-text .program-info img { width: 120px; }
.page-main .swiper-slide .mv-item p { margin-bottom:0; font-size:0.85em;}

.page-main .swiper-slide .mv-item .service-item { margin:50px 0 20px 0; text-align:left; transform: translate(20%, 0%);transition: all 1s;opacity:0; }
.page-main .swiper-slide.active-animation .mv-item .service-item {transform: translate(0%, 0%);transition: all 0.5s;opacity:1; }

.page-main .swiper-slide .mv-item h2 { display:inline; font-size:40px; color:#555; font-weight:700; position:relative; }
.page-main .swiper-slide .mv-item h2:after { content:''; position:absolute; left:0; bottom:-5px; width:100%; height:4px; background-color:rgba(var(--theme-color-rgb), 1); }

.page-main .swiper-slide .mv-item .service-desc { transform: translate(0%, 200%);transition: all 1s;opacity:0; }
.page-main .swiper-slide.active-animation .mv-item .service-desc { transform: translate(0%, 0%);transition: all 0.5s;opacity:1; }


.page-main .main-visual .swiper-pagination-bullet { width:15px; height:15px; margin:0 10px !important; transition: all 0.5s; background-color:rgba(255, 255, 255, 0.9);}
.page-main .main-visual .swiper-pagination-bullet-active { width:50px; border-radius:15px; background-color:rgba(var(--theme-color-rgb), 1);}

.page-main .msg-alert { background-color:var(--logo-yellow); padding:5px; text-align:center;}



.page-main section .section-title {font-size:clamp(1.5rem, 2.5vw, 1.75rem); font-weight:600; margin-bottom:25px;}

.page-main .program-list .row.prg-list >* { margin-bottom:30px; }
.page-main .program-list a {
  padding-top: 180px;
  display: block;
  position: relative;
  overflow:hidden;
  border-radius: 10px;
  border:1px solid #eee;
  height:100%;
}
.page-main .program-list a.no-photo { padding-top: 0px; }
.page-main .program-list a.no-photo:after {content:''; position:absolute; z-index:1; left:0; top:0; width:100%; height:0; transition: all 0.5s; background-color:rgba(0, 0, 0, 0.8); }
.page-main .program-list.active a.no-photo:hover:after { height:100%;  }
.page-main .program-list.closed a:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }

.page-main .program-list a .program-thumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 180px;
  transition: all 0.5s;
  z-index:1;
}

.page-main .program-list a .program-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-main .program-list a .program-thumb::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: all 0.5s;
}


.page-main .program-list a .status {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 64px;
  height: 64px;
  padding: 0 5px;
  border-radius: 0px 0px 0px 10px;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  font-size: 13px;
  z-index:2;
}

.page-main .program-list a .program-info { position:relative; z-index:2; padding:30px 30px 10px 30px; transition: all 0.5s;}
.page-main .program-list a .program-info h3 { background-color:var(--theme-color); padding:2px 10px; border-radius:10px; display:inline-block; font-size:1em; font-weight:300; color:#fff; letter-spacing: -1px; transition: all 0.5s;}
.page-main .program-list a .program-info h4 { position:relative; font-size:1.3em; letter-spacing: -1px; padding-bottom:5px; border-bottom:1px solid #eee; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }

.page-main .program-list.closed a .program-info h4:after { content:''; position:absolute; left:0; bottom:0; width:0%; height:1px; background-color:var(--theme-color);transition: all 0.5s; }
.page-main .program-list.closed a:hover .program-info h4:after { width:100%; }

.page-main .program-list a .program-info h5 { font-weight:300; font-size:0.9em; padding-bottom:5px; border-bottom:1px solid #eee; line-height:1.6;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.page-main .program-list a .program-info .program-extra { font-size:0.9em;}
.page-main .program-list a .program-info .program-extra dl { margin-bottom:0; }
.page-main .program-list a .program-info .program-extra dl dd { color:var(--primary-color); transition: all 0.5s;}

@media (min-width: 768px) {
  .page-main .program-list.active a:hover .program-thumb{height:100%;}
  .page-main .program-list.active a:hover .program-thumb::after{opacity:1;}
  .page-main .program-list.active a:hover .program-info { color:#fff;}
  .page-main .program-list.active a:hover .program-info h3 {background-color:var(--logo-yellow); }
  .page-main .program-list.active a:hover .program-info h4 {border-bottom:1px solid #999; }
  .page-main .program-list.active a:hover .program-info h5 {border-bottom:1px solid #999;}
  .page-main .program-list.active a:hover .program-info .program-extra dl dd { color:var(--logo-yellow); }
}


.page-main .program-list a .status.applying {background: var(--applying-color);}
.page-main .program-list a .status.inprogress {background: var(--inprogress-color);}
.page-main .program-list a .status.applyclosed {background: var(--applyclosed-color);}



.page-main .program-list > div { margin-bottom:30px; }

section.notice { }
section.notice .section-title { border-bottom:1px solid #eee; display:flex;justify-content: space-between !important; align-items: center !important;}
section.notice .section-title span { position:relative; }
section.notice .section-title span:after { content:''; position:absolute; left:0; bottom:-6px; width:100%; height:5px; background-color:#000; }
section.notice .section-title a.more { font-size:1rem; font-weight:300; }

.banner-counsel {
  position: relative;
  border-radius: 15px;
  background: #f8f6f4;
  padding: 40px;
  margin-top:15px;
  margin-bottom:50px;
}

@media (min-width: 992px) and (max-width: 1200px) {
  .banner-counsel { padding: 32px; }
}

.banner-counsel::before {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  right: 0px;
  width: 120px;
  height: 149px;
  background: no-repeat 100% 0;
  transition: 0.3s;
  background-image: url('../images/site/counsel_banner_bg.png');
  background-size:cover;
  transform: rotate(-10deg);
  transition: all 0.5s;
}

.banner-counsel dl { margin-bottom:20px; }
.banner-counsel dl dt { position:relative; font-size:1.3em; padding-left:15px; margin-bottom:30px; }
.banner-counsel dl dt:before { content:''; position:absolute; left:0; top:5px; width:5px; height:1em; background-color:#000; }
.banner-counsel dl dd a { border-radius:20px; padding-left:30px; padding-right:30px; letter-spacing:0px;}
.banner-counsel .desc { font-size:0.9em; transition: all 0.7s;}

@media (min-width: 768px) {
  .banner-counsel dl dd a { width:50%; max-width:140px; transition: all 0.7s;}
  .banner-counsel:hover dl dd a { width:100%; max-width:100%; transform: translate(0%, 80px); }
  .banner-counsel:hover .desc { transform: translate(0%, -40px); }
  .banner-counsel:hover::before { width: 100px; height: 124px; }
}

@media (min-width: 992px) and (max-width: 1200px) {
  .banner-counsel dl dd a { min-width:140px;}
  .banner-counsel:hover dl dd a { width:100%; max-width:100%; transform: translate(0%, 100px); }
  .banner-counsel:hover .desc { transform: translate(0%, -40px); }
  .banner-counsel:hover::before { width: 80px; height: 99px; }
}

@media (min-width: 768px) and (max-width: 992px) {
  .banner-counsel:hover dl dd a { width:100%; max-width:100%; transform: translate(0%, 80px); }
}


.page-main .notice-wrap { padding:0; margin:0; border:1px solid #ddd; position:relative; }
.page-main .notice-wrap > li { list-style:none; }
.page-main .notice-wrap .btn-notice-tab {
  display: block;
  width: 125px;
  background-color: #fff;
  border: none;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px 20px;
  white-space: nowrap;
  height: 48px;
  text-align:center;
}
.page-main .notice-wrap li:last-child .btn-notice-tab { border-bottom:none; }

.page-main .notice-wrap .btn-notice-tab.active {
  background-color: var(--theme-color);
  color: #fff;
  border-color: var(--theme-color);
}

.page-main .notice-wrap li ul { position:absolute; top:0; left:130px;; margin:0; padding:0; margin-top:10px; width:calc(100% - 130px);}

.page-main .notice-wrap li ul li {
  font-size:0.9rem;
  padding: 6px 6px;
  margin-right:10px;
  list-style:none;
}

.page-main .notice-wrap .btn-notice-tab + ul { display:none; }
.page-main .notice-wrap .btn-notice-tab.active + ul { display:block; }

.page-main .notice-wrap li ul li a {
  display: grid;
  grid-template-columns: minmax(310px, 1fr) 100px;
  gap: 10px;
}
.page-main .notice-wrap li ul li a > div:nth-child(1) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor:pointer;
}

.page-main .notice-wrap li ul li a > div:nth-child(1) span.category {
  background-color:var(--primary-color);
  display:inline-block;
  border-radius:10px;
  padding:1px 5px;
  font-size:0.85em;
  color:#fff;
  font-weight: normal;
  margin-right: 8px;
}

.page-main .notice-wrap li ul li a .date {
  text-align: right;
}

@media (max-width: 768px) {
  .notice-wrap { margin-bottom:30px !important; display:flex; height:240px;}
  .notice-wrap > li { width:100%; }
  .page-main .notice-wrap .btn-notice-tab { display:block; width:100%;  }
  .page-main .notice-wrap li:last-child .btn-notice-tab { border-bottom:1px solid #ddd; border-right:0; }
  .page-main .notice-wrap li ul {top:45px; left:10px; width:100%; }
  .page-main .notice-wrap li ul li a {
    display: grid;
    grid-template-columns: 1fr 0px;
    gap: 10px;
  }
  .page-main .notice-wrap li ul li a .date { display:none; }
}

/* 서브페이지:공통 */
.page-path-wrap {
  background-color: rgba(0, 0, 0, 0.05) !important;
  margin-bottom:50px;
  padding: 10px 0px;
}

.page-path-wrap .page-path { padding:5px 0; font-size:0.9em; text-align:right; }


/* 서브페이지: 프로보노/공익법무실습 */
.search_form {
  position: relative;
  width: 100%;
  padding: 15px;
  margin-bottom: 30px;
  border-radius: 10px;
  background: #0b3cb3;
  transition: border-radius 0.3s;
  display:flex;
  align-items: center !important;
  justify-content: center !important;
  gap:20px;
}

.search_form dl { display:flex; align-items: center !important; gap:20px; margin-bottom:0; color:#fff; }
.search_form dl dd { margin-bottom:0; }

.search_form select.form-control {
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 10px;
  border-bottom: 2px solid #fff;
  color: #fff;
  padding:0 30px;
}

.search_form select.form-control option {
  color: #333;
}

.search_form button { border-radius:20px; padding-top:3px; padding-bottom:3px; }


.page-sub .program-view ul.the-list,
.page-sub .program-list ul.the-list { margin:0; padding:0; }
.page-sub .program-view ul.the-list li,
.page-sub .program-list ul.the-list li { list-style:none;}
.page-sub .program-view ul.the-list li,
.page-sub .program-list ul.the-list li a { display:flex; border:1px solid #eee; border-radius:10px; padding:20px; margin-bottom:20px; display: grid; grid-template-columns: 1fr 2fr; gap: 30px;}
.page-sub .program-view ul.the-list li .program-thumb,
.page-sub .program-list ul.the-list li .program-thumb { text-align:center; border-radius:10px; overflow:hidden; position:relative;}
.page-sub .program-view ul.the-list li .program-thumb img,
.page-sub .program-list ul.the-list li .program-thumb img { border-radius:10px; width:100%; transition: all 0.5s; }
.page-sub .program-list ul.the-list li a:hover img { transform: scale(1.2); }
.page-sub .program-view ul.the-list li .program-thumb h3,
.page-sub .program-list ul.the-list li .program-thumb h3 { background-color:var(--theme-color); margin-top:0; position:absolute; right:0; top:0; border-radius: 0px 0px 0px 10px; padding:10px; display:inline-block; font-size:1em; font-weight:300; color:#fff; letter-spacing: -1px; }
.page-sub .program-list ul.the-list li .program-thumb::before {
  content: '';
  position: absolute;
  z-index:10;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    rgba(255, 255, 255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.page-sub .program-list ul.the-list li .program-thumb:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(150%);
}

.page-sub .program-list ul.the-list li .arrow-box {
  float:right;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.page-sub .program-list ul.the-list li .half-right-arrow::before {
  transition: all 0.6s;
}

.page-sub .program-list ul.the-list li:hover .arrow-box {
  opacity:1;
  width:80px;
}

.page-sub .program-list ul.the-list li:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


.page-sub .program-view ul li .program-info .status,
.page-sub .program-list ul.the-list li .program-info .status { display:flex; gap:10px; margin-bottom:10px; }
.page-sub .program-view ul li .program-info .status span,
.page-sub .program-list ul.the-list li .program-info .status span { display:inline-block; border-radius:30px; padding:5px 20px; font-size:0.9em; letter-spacing:1px; }
.page-sub .program-view ul li .program-info .status.inprogress span.status-txt,
.page-sub .program-list ul.the-list li .program-info .status.inprogress span.status-txt { border:2px solid var(--inprogress-color); background-color:var(--inprogress-color); color:#fff; }
.page-sub .program-view ul li .program-info .status.inprogress span.status-due,
.page-sub .program-list ul.the-list li .program-info .status.inprogress span.status-due { border:2px solid var(--inprogress-color); color:var(--inprogress-color); }
.page-sub .program-view ul li .program-info .status.applying span.status-txt,
.page-sub .program-list ul.the-list li .program-info .status.applying span.status-txt { border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; }
.page-sub .program-view ul li .program-info .status.applying span.status-due,
.page-sub .program-list ul.the-list li .program-info .status.applying span.status-due { border:2px solid var(--applying-color); color:var(--applying-color); }
.page-sub .program-view ul li .program-info .status.applyclosed span.status-txt,
.page-sub .program-list ul.the-list li .program-info .status.applyclosed span.status-txt {background-color:var(--applyclosed-color); color:#fff; }
.page-sub .program-view ul li .program-info .status.closed span.status-txt,
.page-sub .program-list ul.the-list li .program-info .status.closed span.status-txt { border:2px solid var(--closed-color); background-color:var(--closed-color); color:#fff; }
.page-sub .program-view ul li .program-info .program-title,
.page-sub .program-list ul.the-list li .program-info .program-title { display:block; position:relative; margin-bottom:0.2em; font-size:1.5em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; }
@media (min-width: 992px) {
  .page-sub .program-view ul li .program-info .program-title,
  .page-sub .program-list ul.the-list li .program-info .program-title { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
}
.page-sub .program-list ul.the-list li a:hover .program-info .program-title { color:var(--logo-orange); }
/*
.page-sub .program-list ul.the-list li .program-info .program-title:after {
  content:''; position:absolute; left:0; bottom:5px; background-color:rgba(var(--theme-color-rgb), 0.5); width:0%; height:5px; transition: all 0.3s; border-radius:10px;
}
.page-sub .program-list ul.the-list li a:hover .program-info .program-title:after { width:100%; }
*/
.page-sub .program-view ul li .program-info h5,
.page-sub .program-list ul.the-list li .program-info h5 { font-weight:300; font-size:0.9em; padding-bottom:5px; line-height:1.6;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.page-sub .program-view ul li .program-info h5 {-webkit-line-clamp: 2;}

.page-sub .program-view ul li .program-info .program-extra,
.page-sub .program-list ul.the-list li .program-info .program-extra { font-size:0.9em; display:flex; gap:30px;}
.page-sub .program-view ul li .program-info .program-extra dl,
.page-sub .program-list ul.the-list li .program-info .program-extra dl { margin-bottom:0; }
.page-sub .program-view ul li .program-info .program-extra dl dd,
.page-sub .program-list ul.the-list li .program-info .program-extra dl dd { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }
.page-sub .program-view ul li .program-info .btn-wrap,
.page-sub .program-list ul.the-list li .program-info .btn-wrap { margin-top:20px; }

@media (min-width: 992px) and (max-width: 1200px) {
  .page-sub .program-list ul.the-list li .program-info h5 {
    -webkit-line-clamp: 2;
  }
}

@media (max-width: 992px) {
  .page-sub .program-view ul.the-list li,
  .page-sub .program-list ul.the-list li a { display:block; }
  .page-sub .program-view ul li .program-info,
  .page-sub .program-list ul.the-list li .program-info { margin-top:30px; }
  .page-sub .program-view ul li .program-thumb,
  .page-sub .program-list ul.the-list li .program-thumb { max-height:200px !important; position:relative;}
  .page-sub .program-list ul.the-list li .program-thumb img {  transform: translateY(-25%); }
  .page-sub .program-list ul.the-list li .program-thumb:hover img { transform: scale(1.2) translateY(-22%); }
}

@media (max-width: 768px) {
  .page-sub .program-view ul li .program-extra,
  .page-sub .program-list ul.the-list li .program-extra { display:block !important; }
  .page-sub .program-view ul li .program-extra dl,
  .page-sub .program-list ul.the-list li .program-extra dl { display:flex; margin-bottom:5px !important; }
  .page-sub .program-view ul li .program-extra dl dt,
  .page-sub .program-list ul.the-list li .program-extra dl dt { width:80px; }
  .page-sub .program-list ul.the-list li .program-thumb img {  transform: translateY(-20%); }
  .page-sub .program-list ul.the-list li .program-thumb:hover img { transform: scale(1.2) translateY(-17%); }

}

@media (max-width: 578px) {
  .page-sub .program-list ul.the-list li .program-thumb img {  transform: translateY(-15%); }
  .page-sub .program-list ul.the-list li .program-thumb:hover img { transform: scale(1.2) translateY(-12%); }
}

.program-view .program-content { background-color:rgba(0, 0, 0, 0.02); padding:30px;border-top: 3px solid var(--theme-color); overflow:hidden;}
.program-view .bottom-box { text-align:center; margin-top:30px; }



/* 법률상담 안내 */
.counsel-guide .summary { margin-bottom:30px; background-color:rgba(0, 0, 0, 0.05); padding:20px; margin:20px 0; border-top:3px solid var(--theme-color);}
.counsel-guide h2 { letter-spacing:-1px; }

.counsel-target { display:inline-block; background-color:#3dd5f3; color:#000; padding:3px 20px; border-radius:20px; margin-bottom:10px;}

ul.dashed { margin:0; padding:0; }
ul.dashed li { position:relative; list-style:none; padding-left:15px;}
ul.dashed li:before { content:'-'; position:absolute; left:0; }

.counsel-guide .guide-image { margin-bottom:30px; }
.counsel-guide .guide-image img { width:100%; }
.counsel-guide li { margin-bottom:5px; }
.counsel-btn-wrap { margin-top:30px; }
.counsel-btn-wrap a.btn { border-radius:30px; width:100%; }

.counsel-guide h2 {
  position: relative;
  background: var(--logo-yellow);
  border-radius: .2em;
  color:#fff;
  font-size:1.3em;
  padding:5px 10px;
  display:inline-block;
  margin-bottom:20px;
}

.counsel-guide h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-top-color: var(--logo-yellow);
  border-bottom: 0;
  border-right: 0;
  margin-left: -9.5px;
  margin-bottom: -11px;
}


.counsel-guide .step {
  display: flex;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}


.counsel-guide .step li {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px !important;
  margin-right: 50px !important;
  position: relative;
  font-size:1.2em;
}

.counsel-guide .step li > div {
  overflow: hidden;
  position: relative;
  display: flex;
  width: 100%;
  height: 150px;
  border: 1px solid #ccc;
  padding: 0px 20px 20px 20px;
  border-radius: 10px;
  align-items: center !important;
  text-align: center;
}
.counsel-guide .step li > div:after {
  width: 100%;
  height: 35px;
  line-height: 35px;
  position: absolute;
  left: 0;
  bottom: 0;
  content: attr(data-step);
  font-size: 0.8em;
  background-color: rgba(var(--logo-orange-rgb), 1);
  color: #fff;
}
.counsel-guide .step li:not(:last-child):after {
  content: "\f27b";
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #ccc;
  font-size: 40px;
  position: absolute;
  right: -45px;
  top: 50%;
  -ms-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.counsel-guide .step li span { display:block; font-size:0.7em; color:#999; }

.counsel-guide .step li br { display:none; }

@media screen and (max-width: 992px) {
  .counsel-guide .step li {
      display: inline-block;
      margin-right: 40px !important;
  }
  .counsel-guide .step li > div { padding: 0px 10px 20px 10px; font-size:clamp(0.8em, 2.5vw, 0.9em); }
  .counsel-guide .step li br { display:block; }
}

@media screen and (max-width: 768px) {
  .counsel-guide .step { display:block; }
  .counsel-guide .step li { display:block;
    margin-bottom: 50px !important;
    margin-right: 0px !important;
  }
  .counsel-guide .step li > div { display:block; height:auto; padding:20px 0 50px 0; font-size:1.1em;}
  .counsel-guide .step li br { display:none; }
  .counsel-guide .step li span { font-size:0.9em; }

  .counsel-guide .step li:not(:last-child):after {
    content: "\f279";
    display: block;
    right: 47%;
    top: 115%;
  }
}




.search-box { border: 1px solid #eee; border-radius: 10px; padding: 10px; margin-bottom: 20px; }
.search-box .search-item { display:flex; justify-content: center !important; gap:10px; }

.search-box .search-item .item-box { display:flex; justify-content: center !important; gap:10px; align-items: center !important;}
.search-box .search-item .btn-box { display:flex; justify-content: center !important; gap:10px; }
@media (max-width: 768px) {
  .search-box .search-item { display:block; }
  .search-box .search-item .item-box { margin-bottom:10px; }
  .search-box .search-item .btn-box div { width:50%; }
  .search-box .search-item .btn-box div button,
  .search-box .search-item .btn-box div a { width:100%; }
}

/* 마이페이지:공통 */
.mypage-lnb {
  height: 100%;
  background: #fff;
  box-shadow: 1px 1px 10px 1px rgba(22, 52, 80, 0.1);
  border-radius: 20px;
  padding: 20px 20px 30px 20px;
  margin-right:40px;
}

.mypage-lnb a span {
  display:inline-block;
  background-color:var(--logo-yellow);
  color:#000;
  border-radius: 10px;
  padding: .5rem !important;
  font-size:0.7em;
  font-weight:300;
  text-align:center;
  position:absolute;
  height:20px;
  line-height:5px;
  right:0;
  top:12px;
}

@media screen and (max-width: 1200px) {
  .mypage-lnb { margin-right:0px; }
}

@media screen and (max-width: 992px) {
  .mypage-lnb { height:auto; margin-bottom:30px; }
  .mypage-lnb { display:none; border-radius:0; }
}

.mypage-lnb ul { margin:0; padding:0; }
.mypage-lnb ul li { list-style:none; }
.mypage-lnb ul li a {padding: 10px 20px 10px 0;}
.mypage-lnb ul li.active a,
.mypage-lnb ul li a:hover {
  color: var(--theme-color);
  border-top: none;
  border-bottom: 1px solid var(--theme-color);
}

.mypage-lnb ul li a {
  display: block;
  font-size: 0.95em;
  cursor: pointer;
  border-bottom: 1px solid #d8d8d8;
  position: relative;
  font-weight: 500;
  word-break: break-word;
}

h3.mypagetitle { margin-bottom:50px; font-weight:600; position:relative; font-size:clamp(1.5rem, 2.5vw, 2rem);}
h3.mypagetitle:after { content:''; z-index:1; position:absolute; bottom:-8px; left:0; width:100%; height:1px; background-color:#ccc; }
h3.mypagetitle span { position:relative; }
h3.mypagetitle span:after { content:''; z-index:2; position:absolute; bottom:-8px; left:0; width:100%; height:5px; background-color:#000;}


.zresponse-table { margin-top:10px; margin-bottom:30px; }
.zresponse-table .header {
  position: relative;
  width: 100%;
  font-size:1em;
  padding: 15px 8px;
  background: #f7f7fa;
  border-top: 1px solid #000;
  border-bottom:1px solid #ddd;
  font-weight:500;
  align-items: center !important;
  text-align:center;
}


.zresponse-table .data-list { margin:0; padding:0;}

.zresponse-table .data-list a {
  list-style:none;
  position: relative;
  width: 100%;
  font-size:1em;
  font-weight:300;
  padding: 15px 8px;
  border-bottom:1px solid #ddd;
  text-align:center;
}

.zresponse-table .data-list .nodata { text-align:center; padding: 15px 8px; border-bottom:1px solid #ddd;}

/* mypage : profile */
.sign-box { text-align:center; border:1px solid #ddd; padding:10px; display: flex;
  justify-content: center;
  align-items: center;}

.sign-box img { width:200px; height:70px; }

.signtypecheck { margin-top:10px; display: flex; gap:20px;
  justify-content: center;
  align-items: center;}

.sign_drawbox { display:none; }
.sign_draw_bottom { text-align:center; }


#sign-canvas {
  border: 1px dotted #ccc;
  cursor: crosshair;
}

/* 마이페이지:법률상담 */
.zresponse-table.legalaid .header,
.zresponse-table.legalaid .data-list a {
  display: grid;
  grid-template-columns: 50px minmax(310px, 1fr) 80px 100px;
  gap: 10px;
}

@media (max-width: 768px) {
  .zresponse-table.legalaid .header > div:last-child,
  .zresponse-table.legalaid .data-list a > div:last-child { display:none; }

  .zresponse-table.legalaid .header,
  .zresponse-table.legalaid .data-list a {
    grid-template-columns: 50px minmax(310px, 1fr) 80px 0px;
  }
}

.zresponse-table.legalaid .data-list a > div:nth-child(2) {
  text-align:left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/********* 법률상담 */

/* 마이페이지:프로그램 모집 지원내역 */
.zresponse-table.proposal .header,
.zresponse-table.proposal .proposal-list .item {
  display: grid;
  grid-template-columns: 50px 100px minmax(310px, 1fr) 80px 100px;
  gap: 10px;
  list-style: none;
  position: relative;
  width: 100%;
  font-size: 1em;
  font-weight: 300;
  padding: 15px 8px;
  border-bottom: 1px solid #ddd;
  text-align: center;
}


@media (max-width: 768px) {
  .zresponse-table.proposal .header > div:last-child,
  .zresponse-table.proposal .proposal-list .item > div:last-child { display:none; }

  .zresponse-table.proposal .header,
  .zresponse-table.proposal .proposal-list .item {
    grid-template-columns: 50px 100px minmax(210px, 1fr) 80px 0px;
  }
}

.zresponse-table.proposal .proposal-list .item > div:nth-child(3) {
  text-align:left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/********* 프로그램 모집 지원내역 */

/* 마이페이지:1:1문의 */
.zresponse-table.inquiry .header,
.zresponse-table.inquiry .data-list a {
  display: grid;
  grid-template-columns: 50px minmax(310px, 1fr) 80px 100px;
  gap: 10px;
}

@media (max-width: 768px) {
  .zresponse-table.inquiry .header > div:last-child,
  .zresponse-table.inquiry .data-list a > div:last-child { display:none; }

  .zresponse-table.inquiry .header,
  .zresponse-table.inquiry .data-list a {
    grid-template-columns: 50px minmax(310px, 1fr) 80px 0px;
  }
}

.zresponse-table.inquiry .data-list a > div:nth-child(2) {
  text-align:left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inquiry-view .header {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.inquiry-view .header .category-status { display:flex; gap:10px; margin-bottom:5px; }
.inquiry-view .header .category-status span { display:inline-block; border-radius:30px; padding:0px 10px; font-size:0.8em; letter-spacing:1px;}
.inquiry-view .header .category-status span.category { border:2px solid var(--inprogress-color); background-color:var(--inprogress-color); color:#fff; }
.inquiry-view .header .category-status span.status  { border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; }
.inquiry-view .header .title { display:block; margin-bottom:0.2em; font-size:1.5em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.inquiry-view .header .extra { font-size:0.9em;}
.inquiry-view .header .extra dl { margin-bottom:5px; }
.inquiry-view .header .extra dl dd { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }

.inquiry-view .content {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 30px;
  border-top: 3px solid var(--theme-color);
}

/********* 1:1문의 */


/* 게시판 */

.zresponse-table.board-list .header,
.zresponse-table.board-list .data-list a {
  display: grid;
  gap: 10px;
  align-items: center !important;
}

.zresponse-table.board-list .header,
.zresponse-table.board-list .data-list a {
  grid-template-columns: 5% minmax(50%, 1fr) 10% 7%;
}

.zresponse-table.board-list.has-category.has-writer .header,
.zresponse-table.board-list.has-category.has-writer .data-list a {
  grid-template-columns: 5% 8% minmax(50%, 1fr) 8% 10% 7%;
}

.zresponse-table.board-list.has-category .header,
.zresponse-table.board-list.has-category .data-list a {
  grid-template-columns: 5% 8% minmax(50%, 1fr) 10% 7%;
}

.zresponse-table.board-list.has-writer:not(.has-category) .header,
.zresponse-table.board-list.has-writer:not(.has-category) .data-list a {
  grid-template-columns: 5% minmax(50%, 1fr) 8% 10% 7%;
}

.zresponse-table.board-list .header > div,
.zresponse-table.board-list .data-list a > div:not(:first-child) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zresponse-table.board-list .data-list .title-box {
  display: flex;
  align-items: center !important;
}

.zresponse-table.board-list .data-list .title-box > div:first-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zresponse-table.board-list:not(.has-category) .data-list a > div:nth-child(2) {
  text-align:left;
}

.zresponse-table.board-list.has-category .data-list a > div:nth-child(3) {
  text-align:left;
}

@media (max-width: 768px) {
  .zresponse-table.board-list .header > div:last-child,
  .zresponse-table.board-list .data-list a > div:last-child { display:none; }

  .zresponse-table.board-list.has-category .header > div:nth-child(4),
  .zresponse-table.board-list.has-category .data-list a > div:nth-child(4) { display:none; }

  .zresponse-table.board-list.has-category.has-writer .header > div:nth-child(5),
  .zresponse-table.board-list.has-category.has-writer .data-list a > div:nth-child(5) { display:none; }

  .zresponse-table.board-list .header,
  .zresponse-table.board-list .data-list a {
    grid-template-columns: 7% minmax(50%, 1fr) 20% 0px;
  }
  .zresponse-table.board-list.has-category .header,
  .zresponse-table.board-list.has-category .data-list a {
    grid-template-columns: 7% 20% minmax(65%, 1fr) 0px 0px 0px;
  }

  .zresponse-table.board-list.has-writer:not(.has-category) .header,
  .zresponse-table.board-list.has-writer:not(.has-category) .data-list a {
    grid-template-columns: 7% minmax(50%, 1fr) 20% 0% 0%;
  }

  .zresponse-table.board-list.has-category.has-writer .header,
  .zresponse-table.board-list.has-category.has-writer .data-list a {
    grid-template-columns: 7% 20% minmax(65%, 1fr) 0px 0px 0px;
  }

}

@media (max-width: 768px) {
}

.zresponse-table.board-list span.notice { transform: translate(0%, -20%); text-align:center; text-transform: uppercase; background-color:#d55140; border-radius:8px; color:#fff; font-size:0.5em; letter-spacing:1px; display:inline-block; padding:2px 5px;}
.zresponse-table.board-list span.cmtcount { display:inline-block; margin-left:3px; padding:0px 2px;color:#d55140; font-size:0.9em;}
.zresponse-table.board-list span.attach { display:inline-block; margin-left:3px; padding:0px 2px;color:#d55140;}
.zresponse-table.board-list span.new {transform: translate(0%, -20%); text-align:center; text-transform: uppercase; background-color:#d55140; border-radius:2px; color:#fff; font-size:0.5em; letter-spacing:1px; display:inline-block; margin-left:3px; padding:0px 2px;}


.zresponse-table.board-list span.attach:after {
  content: "\f4b3";
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.board-view {

}
.board-view .header {
  padding: 20px 20px;
  background-color: #f8f8f8;
  border-bottom: solid 1px #e2e2e2;
  border-top: solid 1px #222;
}
.board-view .header .category span.category {
  display: inline-block;
  border-radius: 30px;
  padding: 0px 10px;
  font-size: 0.8em;
  letter-spacing: 1px;
  border: 2px solid var(--inprogress-color);
  background-color: var(--inprogress-color);
  color: #fff;
}

.board-view .header .title { font-size:clamp(1.1rem, 2.5vw, 1.5rem); font-weight:500; }
.board-view .header .extra dl { display:flex; margin-bottom:0; font-size:0.9em; }
.board-view .header .extra dl dt { margin-right:20px; font-weight:300; margin-left:20px; }
.board-view .header .extra dl dt:first-child { margin-left:0; margin-right:20px; font-weight:300; }
.board-view .header .extra dl dd { margin-bottom:0; }

.board-view .content-box { border-bottom: 1px solid #ddd; }
.board-view .content-box .content {
  padding:20px;
}
.board-view .content-box .filelist { background-color:#fdfdfd; margin:30px 0 0 0; padding:0; padding:20px; border-top:1px solid #eee; }
.board-view .content-box .filelist li { list-style:none; font-size:0.9em; }

.board-view .footer-box { background-color:#fafafa; }
.board-view .footer-box { padding:20px; font-size:0.9em; border-top:1px solid #eee;border-bottom: solid 1px #e2e2e2;}
.board-view .footer-box .related-post dl { display:flex; margin-bottom:0; }
.board-view .footer-box .related-post dl dt { margin-right:20px; margin-bottom:0; white-space: nowrap;}
.board-view .footer-box .related-post dl dd { margin-bottom:0; }

.board-view .btn-box { margin-top:30px; text-align:center; }

/********* 게시판 */


/* 푸터 */
#footer { background-color:rgba(0, 0, 0, 0.5); padding:30px 0px; margin-top:100px;}
#footer .flogo img { max-width:200px; }
/*#footer .flogo img { filter: brightness(0) invert(1); } */
.address { font-size:0.9em; color:#eee; margin:20px 0;}
.link-privacy { color:#ffc107; text-decoration:none; }
.copyright { margin-top:20px; text-align:center; color:#eee;}

.related-site { position:relative; text-align:right; }
.related-site .site-list { display:none; position:absolute; right:0; bottom:2em; text-align:left; width:100%; background-color:#fff; border:1px solid var(--theme-color);}
.related-site .site-list a { display:block; padding:7px 10px; border-bottom:1px solid #ddd; font-weight:300; font-size:0.9em; }
.related-site .site-list a:hover { background-color:var(--logo-yellow); }
.related-site .site-list a:last-child { border-bottom:0; }
.related-site button { background-color:transparent; border:none; color:#fff; }




/* menu icon */
.hamburger {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 20px 10px;
  position: relative;
  user-select: none;
  display:none;
}

@media screen and (max-width: 992px) {
  .hamburger { display:block; }
}

.hamburger .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 25px;
}


.hamburger .navicon:before,
.hamburger .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

header .hamburger .navicon,
header .hamburger .navicon:before,
header .hamburger .navicon:after { background-color:var(--theme-color);}


.hamburger .navicon:before {
  top: 8px;
}

.hamburger .navicon:after {
  top: -8px;
}

/* menu btn */
.hamburger .hamburger-btn {
  display: none;
}
.hamburger .hamburger-btn:checked + .navicon {
  background: transparent;
}

.hamburger .hamburger-btn:checked + .navicon:before {
  transform: rotate(-45deg);
}

.hamburger .hamburger-btn:checked + .navicon:after {
  transform: rotate(45deg);
}

.hamburger .hamburger-btn:checked + .navicon:before,
.hamburger .hamburger-btn:checked + .navicon:after {
  top: 0;
}


/* 로그인 */
.login_tab { margin-bottom:0px; }
.login_tab ul {
  list-style: none;
  display: flex;
  padding:0;
  margin:0;
}
.login_tab ul li {
  width: 50%;
}

.login_tab ul li a {display: block;text-align: center; border:1px solid #0e2c72; border-bottom:none; background: #0e2c72;color: #fff;font-size: 17px;font-weight:500; padding: 18px 0;}

.login_tab ul li:first-child { border-right:1px solid #0e2c72; }
.login_tab ul li:first-child a { border-right:none !important; }
.login_tab ul li:last-child a { border-left:none !important; }

.login_tab ul li.active a,
.login_tab ul li a:hover { border:1px solid #0e2c72; border-bottom:none; background:#fff;color:#1b3b86;}


.login_tab_inner { display:none; }

.login_tab_inner .login_form {
  border: 3px solid #222F83;
  padding: 50px 0;
  position: relative;
}


/* tab */
.tab_wrap { margin-bottom:35px; }
.tab_wrap .btn-toggle-tab { display:none; font-size: 16px; font-weight: 500; background-color:#fff;width: 100%; height: 50px; padding-left: 20px; padding-right: 50px; border: 1px solid #a9a9a9; text-align: left; position:relative;}
.tab_wrap .btn-toggle-tab:before { content: ''; position: absolute; right:20px; top:22px; width: 15px; height: 1px; position: absolute; background-color: #000; transition: transform .2s ease-in-out; }
.tab_wrap .btn-toggle-tab:after { content: ''; position: absolute; right:20px; top:27px; width: 15px; height: 1px; background-color: #000; transition: transform .2s ease-in-out; }
.tab_wrap.active .btn-toggle-tab:before { transform: rotate(-45deg); }
.tab_wrap.active .btn-toggle-tab:after { top:22px; transform: rotate(45deg); }

.mobile-menu-open .tab_wrap{ display: none; }


.tab { margin-bottom:5px; }
.tab ul { margin:0; padding:0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; }
.tab ul:before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background-color: #000; }
.tab li { margin:0; padding:0;list-style: none; position: relative; border: 1px solid #ddd; border-bottom: 1px solid #000; background-color: #fff; }
.tab li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;}
.tab li + li { border-left: 0; }
.tab li > a { display: block; padding: 12px 25px; text-align:center; text-decoration:none; white-space: nowrap; color:#000;}
.tab li > a:hover { text-decoration:none; color:#000;}
.tab li.active { border-color: #000; border-bottom: 1px solid #fff; border-left: 1px solid #000; font-weight: 500; }



.tab.tab-blue li { border: 1px solid var(--logo-blue); border-bottom: 1px solid var(--logo-blue); border-right:1px solid rgba(255, 255, 255, 0.2); background-color: #fff; }
.tab.tab-blue li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-color:var(--logo-blue);}
.tab.tab-blue li > a { display: block; padding: 12px 25px; text-align:center; text-decoration:none; white-space: nowrap; color:#fff;}
.tab.tab-blue li.active { border-color: var(--logo-blue); border-bottom: 1px solid #fff; border-left: 1px solid #000; font-weight: 500; background-color:#fff; }
.tab.tab-blue li.active a { color:#000; }
.tab.tab-blue li:not(.active):hover { background-color:rgba(var(--logo-blue-rgb), 0.8); }

@media (max-width: 1200px) {
  .tab_wrap.tab-sm { position: relative; margin-bottom:20px; }
  .tab_wrap.tab-sm .btn-toggle-tab { display: block; }
  .tab_wrap.tab-sm .tab { display: none; overflow: hidden; position: absolute; top: 50px; left: 0; z-index: 100; width: 100%; padding: 0px 0px; background-color: #fff; border: 1px solid #a9a9a9; border-top: 0;}
  .tab_wrap.tab-sm .tab > .tit { display: block; padding-bottom: 15px; line-height: 1; font-weight: 500; font-size: 18px; border-bottom: 1px solid #000; }
  .tab_wrap.tab-sm .tab ul { margin:0; padding:0; overflow: auto; max-height: 205px; display:block;}
  .tab_wrap.tab-sm .tab li { margin:0; padding:0; list-style:none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .tab_wrap.tab-sm .tab li:last-child { border-bottom:none; }

  .tab_wrap.tab-sm.active .tab { display: block; }
}


.link-box { margin-top:10px; }
.login-box { display:flex; align-items: center !important; gap:10px; justify-content: center !important; }
.login-box button { padding-top:25px; padding-bottom:25px; border-radius:0; }

@media (max-width: 578px) {
  .login-box { display:block; }
  .login-box button { margin-top:10px; padding-top:10px; padding-bottom:10px; width:100%;}
}

.login-inner { padding-top:50px; border:1px solid #0e2c72;border-top:none;}
.login-form {display:flex; justify-content: center !important;}
.btn-mysnulogin { display:flex; align-items: center !important; gap:5px; justify-content: center !important; border-radius:0; padding-left:30px; padding-right:30px;}
.btn-mysnulogin .snulogo { -webkit-mask: url('../images/common/snulogo.svg'); mask: url('../images/common/snulogo.svg'); background-color: #fff; mask-repeat: no-repeat; width: 22px !important; height: 22px !important;transform: translateY(1px); }

.login-inner .notice { background-color:var(--bs-light); margin-top:30px; padding:20px; }


/* button color */
.btn-darkblue {color: #fff;background-color: #173473;border-color: #173473;}
.btn-darkblue:hover {color: #fff;background-color: #012573;border-color: #012168;}
.btn-darkblue:focus, .btn-darkblue.focus {box-shadow: 0 0 0 0.2rem rgba(23, 52, 115, 0.5);}
.btn-darkblue:not([disabled]):not(.disabled):active, .btn-darkblue:not([disabled]):not(.disabled).active, .show > .btn-darkblue.dropdown-toggle {color: #fff;background-color: #012573;border-color: #012168;box-shadow: 0 0 0 0.2rem rgba(23, 52, 115, 0.5);}

.btn-darkred {color: #fff;background-color: #b71540;border-color: #b71540;}
.btn-darkred:hover {color: #fff;background-color: #b70131;border-color: #aa002d;}
.btn-darkred:focus, .btn-darkred.focus {box-shadow: 0 0 0 0.2rem rgba(197, 0, 52, 0.5);}
.btn-darkred:not([disabled]):not(.disabled):active, .btn-darkred:not([disabled]):not(.disabled).active, .show > .btn-darkred.dropdown-toggle {color: #fff;background-color: #b70131;border-color: #aa002d;box-shadow: 0 0 0 0.2rem rgba(197, 0, 52, 0.5);}

.btn-darkgreen {color: #fff;background-color: #008d54;border-color: #008d54;}
.btn-darkgreen:hover {color: #fff;background-color: #007344;border-color: #01653d;}
.btn-darkgreen:focus, .btn-darkgreen.focus {box-shadow: 0 0 0 0.2rem rgba(0, 101, 61, 0.5);}
.btn-darkgreen:not([disabled]):not(.disabled):active, .btn-darkgreen:not([disabled]):not(.disabled).active, .show > .btn-darkgreen.dropdown-toggle {color: #fff;background-color: #007344;border-color: 01653d;box-shadow: 0 0 0 0.2rem rgba(0, 101, 61, 0.5);}

.btn-indigo {color: #fff;background-color: #6610f2;border-color: #6610f2;}
.btn-indigo:hover {color: #fff;background-color: #e0a800;border-color: #d39e00;}
.btn-indigo:focus, .btn-indigo.focus {box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);}
.btn-indigo:not([disabled]):not(.disabled):active, .btn-indigo:not([disabled]):not(.disabled).active, .show > .btn-indigo.dropdown-toggle {color: #fff;background-color: #0062cc;border-color: #005cbf;box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);}

.btn-purple {color: #fff;background-color: #6f42c1;border-color: #6f42c1;}
.btn-purple:hover {color: #fff;background-color: #4b1ba2;border-color: #411099;}
.btn-purple:focus, .btn-purple.focus {box-shadow: 0 0 0 0.2rem rgba(114, 73, 188, 0.5);}
.btn-purple:not([disabled]):not(.disabled):active, .btn-purple:not([disabled]):not(.disabled).active, .show > .btn-purple.dropdown-toggle {color: #fff;background-color: #4b1ba2;border-color: #411099;box-shadow: 0 0 0 0.2rem rgba(114, 73, 188, 0.5);}


/* 프로그램 모집 */
.proposal-view .proposal-content { background-color:rgba(0, 0, 0, 0.02); padding:30px;border-top: 3px solid var(--theme-color); overflow:hidden; }
.proposal-view .bottom-box { text-align:center; margin-top:30px; }
.proposal-view h3.text-header { position:relative; letter-spacing:-1px; font-size:1.5em; font-weight:600; padding-left:20px; }
.proposal-view h3.text-header:before { content:''; position:absolute; top:0.5em; left:0px; width:0.7em; height:5px; background-color:var(--primary-color);transform: rotate(-45deg) }
.proposal-view .filelist { background-color:#fdfdfd; padding:0; padding:20px; border-top:solid 1px #e2e2e2; border-bottom:solid 1px #e2e2e2; }
.proposal-view .filelist li { list-style:none; font-size:0.9em; }


.proposal-view ul.the-list,
.proposal-list ul.the-list { margin:0; padding:0; }
.proposal-view ul.the-list li,
.proposal-list ul.the-list li { background-color:#fff; list-style:none; border:1px solid #eee; border-radius:10px; padding:20px; margin-bottom:20px;}
.page-main .proposal-list ul.the-list li { border-color:#ffcca3; }
.proposal-list ul.the-list li:last-child { margin-bottom:0px; }
.proposal-view ul.the-list li .status,
.proposal-list ul.the-list li .status { border-radius:30px; padding:0px 20px; font-size:0.9em; letter-spacing:1px; font-size:0.6em; line-height:2.2;text-align:center; }
.proposal-view ul.the-list li .status.applying,
.proposal-list ul.the-list li .status.applying { border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; }
.proposal-view ul.the-list li .status.closed,
.proposal-list ul.the-list li .status.closed { border:2px solid var(--closed-color); background-color:var(--closed-color); color:#fff; }
.proposal-view ul.the-list li .proposal-title,
.proposal-list ul.the-list li .proposal-title { display:flex; gap:10px; margin-bottom:0.2em; font-size:1.5em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.proposal-list ul.the-list li a:hover .proposal-title { color:var(--theme-color); }

.proposal-list ul.the-list li h5 { font-weight:300; font-size:1em; padding-bottom:5px; line-height:1.7;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.proposal-view ul.the-list li .proposal-extra,
.proposal-list ul.the-list li .proposal-extra { font-size:0.9em;}
.proposal-view ul.the-list li .proposal-extra .period,
.proposal-list ul.the-list li .proposal-extra .period { display:flex; gap:20px; margin-bottom:0; }
.proposal-view ul.the-list li .proposal-extra .period .date,
.proposal-list ul.the-list li .proposal-extra .period .date { display:flex; gap:20px; margin-bottom:0; width: 100% !important;}
.proposal-view ul.the-list li .proposal-extra .period .date > div:nth-child(2),
.proposal-list ul.the-list li .proposal-extra .period .date > div:nth-child(2) { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }
.proposal-view ul.the-list li .btn-wrap { margin-top:20px; }

@media (max-width: 992px) {
  .proposal-view ul li,
  .proposal-list ul.the-list li { display:block; }
  .proposal-view ul li .proposal-info,
  .proposal-list ul.the-list li .proposal-info { margin-top:30px; }
  .proposal-view ul li .proposal-thumb,
  .proposal-list ul.the-list li .proposal-thumb { max-height:200px !important; }
}

@media (max-width: 768px) {
  .proposal-view ul li .proposal-extra,
  .proposal-list ul.the-list li .proposal-extra { display:block !important; }
  .proposal-view ul li .proposal-extra dl,
  .proposal-list ul.the-list li .proposal-extra dl { display:flex; margin-bottom:5px !important; }
  .proposal-view ul li .proposal-extra dl dt,
  .proposal-list ul.the-list li .proposal-extra dl dt { width:80px; }

  .proposal-list ul.the-list li .proposal-title .status { display:inline-block; line-height:2;}
  .proposal-list ul.the-list li .proposal-title { display:block; }
  .proposal-list ul.the-list li .proposal-title .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
}

.page-sub .proposal-list ul.the-list li:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }
.page-main .proposal-list ul.the-list li:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(255, 204, 163, 1); }


.half-right-arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 1px;
  margin-top: 15px;
  border-radius: 9999px;
  background-color: var(--theme-color);
}

.half-right-arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 0px;
  height: 1px;
  border-radius: 9999px;
  background-color: var(--theme-color);
  transform: rotate(45deg);
  transform-origin: calc(100% - 2px) 50%;
}


.page-main section.proposal {
  background:url('../images/main/bg_proposal_main.png') no-repeat left top / cover;
  background-size:cover;
  padding:50px 0;
  margin-bottom:50px;
  min-height:300px;
}

.proposal-list ul.the-list li .arrow-box {
  flex-shrink: 1 !important;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.proposal-list ul.the-list li .half-right-arrow::before {
  transition: all 0.6s;
}

.proposal-list ul.the-list li:hover .arrow-box {
  opacity:1;
  width:80px;
}

.proposal-list ul.the-list li:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}

@media (max-width: 991.98px) {
  .tb-br {
      display: none;
  }
}


/* 활동후기 */
.testimonial .quote-icon {
  display: block;
  position: absolute;
  bottom: -70px;
  right: 0px;
  font-size: 210px;
  color: rgba(0, 0, 0, 0.1);
  opacity: 0.4 !important;
}

.modal-body .testimonial .quote-icon {
  bottom:auto;
  top:00px;
  font-size:300px;
}

.testimonial-list .testimonial {
  position:relative;
  padding:20px;
  margin-bottom:20px;
  display:block;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  border-radius: 0.6rem !important;
  border: 1px solid rgba(0, 0, 0, 0.175);
  overflow:hidden;
}

.testimonial-list .testimonial:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }
.testimonial-list .testimonial:hover h5 { color:var(--theme-color); }

.testimonial-list .testimonial h5,
.modal-body .testimonial h5 { font-size:1.5em;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position:relative; }

.modal-body .testimonial h5:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  background-color: rgba(var(--theme-color-rgb), 0.5);
  width: 100%;
  height: 10px;
  transition: all 0.3s;
  border-radius: 10px;
}

.testimonial-list .testimonial .content {
font-size:0.95em;
color:#666;
line-height:1.7;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

.testimonial .name-box{ margin-top:10px; display:flex; gap:20px; margin-bottom:0; }
.testimonial .name-box .name { width: 100% !important; font-size:0.9em; }

.testimonial-list .testimonial .arrow-box {
  flex-shrink: 1 !important;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.testimonial-list .testimonial .half-right-arrow::before {
  transition: all 0.6s;
}

.testimonial-list .testimonial:hover .arrow-box {
  opacity:1;
  width:80px;
}

.testimonial-list .testimonial:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


.form-explain {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
  position: relative;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid transparent;
  border-radius: .25rem;
  font-size: 0.9em;
}

.agreement-box { border:1px solid #ddd; padding:10px; }



/* mypage */
.myprogram .search-wrap { border: 1px solid #eee; border-radius: 10px; padding: 10px; margin-bottom: 20px; }
.myprogram .search-wrap .search-item { display:flex; justify-content: center !important; gap:10px; }
.myprogram .search-wrap .search-item .item-box { display:flex; justify-content: center !important; gap:10px; }
.myprogram .search-wrap .search-item .btn-box { display:flex; justify-content: center !important; gap:10px; }

.myprogram-list { margin:0; padding:0; margin-top:10px;}
.myprogram-list li { background-color:#fff; list-style:none; border:1px solid #ccc; border-radius:10px; padding:10px; margin-bottom:20px;}
.myprogram-list li:last-child { margin-bottom:0px; }
.myprogram-list li a { display:block; transition: all 0.5s; position:relative;}
.myprogram-list li .program-title { display:flex; gap:10px; margin-bottom:0.2em; font-size:1.2em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.myprogram-list li a:hover .program-title { color:var(--theme-color); }
.myprogram-list li:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }

.myprogram-list li .category {display:inline-block; border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; border-radius:30px; padding:0px 20px; letter-spacing:1px; font-size:0.7em; line-height:1.8;text-align:center; }

.myprogram-list li .program-extra { font-size:0.9em; display:flex; gap:20px; margin-bottom:0;}
.myprogram-list li .program-extra .item-wrap { display:flex; gap:20px; width: 100% !important; }
.myprogram-list li .program-extra .item-wrap .item { display:flex; gap:20px; margin-bottom:0;}
.myprogram-list li .program-extra .item-wrap .item > div:nth-child(2) { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }


.myprogram-list li .arrow-box {
  flex-shrink: 1 !important;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.myprogram-list li .half-right-arrow::before {
  transition: all 0.6s;
}

.myprogram-list li:hover .arrow-box {
  opacity:1;
  width:80px;
}

.myprogram-list li:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


@media (max-width: 768px) {
  .myprogram-list li .program-extra { display:block !important; }
  .myprogram-list li .program-title .status { display:inline-block; line-height:2;}
  .myprogram-list li .program-title { display:block; }
  .myprogram-list li .program-title .title {margin-top:5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

  .myprogram-list li .arrow-box { position:absolute; top:0;right:0; }
}

@media (max-width: 578px) {
  .myprogram-list li .program-extra .item-wrap { display:block; }
}

.myprogram-view .program-extra .status,
.myprogram-list li .program-extra .status { display:inline-block; border-radius:30px; margin-left:10px; padding:1px 20px; font-size:0.9em; letter-spacing:1px; }

.myprogram-view .program-extra .status.inprogress,
.myprogram-list li .program-extra .status.inprogress { border:2px solid var(--inprogress-color); background-color:var(--inprogress-color); color:#fff; }

.myprogram-view .program-extra .status.applying,
.myprogram-list li .program-extra .status.applying { border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; }

.myprogram-view .program-extra .status.applyclosed,
.myprogram-list li .program-extra .status.applyclosed {background-color:var(--applyclosed-color); color:#fff; }

.myprogram-view .program-extra .status.closed,
.myprogram-list li .program-extra .status.closed { border:2px solid var(--closed-color); background-color:var(--closed-color); color:#fff; }



.myprogram-list { margin:0; padding:0; margin-top:10px;}
.myprogram-view { background-color:#fff; list-style:none; border:1px solid #ccc; border-radius:10px; padding:10px; margin-bottom:20px;}
.myprogram-view:last-child { margin-bottom:0px; }
.myprogram-view .program-title { display:flex; gap:10px; margin-bottom:0.2em; font-size:1.2em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }

.myprogram-view .category {display:inline-block; border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; border-radius:30px; padding:0px 20px; letter-spacing:1px; font-size:0.7em; line-height:1.8;text-align:center; }

.myprogram-view .program-extra { font-size:0.9em; display:flex; gap:20px; margin-bottom:0;}
.myprogram-view .program-extra .item-wrap { display:flex; gap:20px; width: 100% !important; }
.myprogram-view .program-extra .item-wrap .item { display:flex; gap:20px; margin-bottom:0;}
.myprogram-view .program-extra .item-wrap .item > div:nth-child(2) { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }

.myprogram-view  .program-summary { font-weight:300; font-size:0.9em; padding-bottom:5px; line-height:1.7;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.myprogram-view .arrow-box {
  flex-shrink: 1 !important;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.myprogram-view .half-right-arrow::before {
  transition: all 0.6s;
}

.myprogram-view:hover .arrow-box {
  opacity:1;
  width:80px;
}

.myprogram-view:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


@media (max-width: 768px) {
  .myprogram-view .program-extra { display:block !important; }
  .myprogram-view .program-title .status { display:inline-block; line-height:2;}
  .myprogram-view .program-title { display:block; }
  .myprogram-view .program-title .title {margin-top:5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

  .myprogram-view .arrow-box { position:absolute; top:0;right:0; }
}

@media (max-width: 578px) {
  .myprogram-view .program-extra .item-wrap { display:block; }
}

.programtab li a span.counter { position:absolute; right:7px; top:7px; height:18px; font-size:0.7em; font-weight:normal; }

@media (max-width: 768px) {
  .programtab li a span.counter {right:10px; top:10px }
}

.help-box {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: 20px;
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);

  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);

}

.help-box h3 { text-align:center; }
.help-box ol { margin:0; padding-left:20px;}


/* timesheet */
.timesheet h2 { font-size:20px; text-align:center; border:2px solid #000; margin-bottom:20px; padding:5px;}
.timesheet .summary { padding:15px 0; text-align:center; font-size:0.9em;}
.sheetform .row { margin-left:0; margin-right:0; }

/* report */
.report-list { margin:0; padding:0; margin-top:10px;}
.report-list li { background-color:#fff; list-style:none; border:1px solid #ccc; border-radius:10px; padding:10px; margin-bottom:20px;}
.report-list li:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }
.report-list li:last-child { margin-bottom:0px; }
.report-list li .report-title { display:flex; gap:10px; margin-bottom:0.2em; font-size:1.2em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.report-list li a:hover .report-title { color:var(--theme-color); }

.report-list li .category {display:inline-block; border:2px solid var(--applying-color); background-color:var(--applying-color); color:#fff; border-radius:30px; padding:0px 20px; letter-spacing:1px; font-size:0.7em; line-height:1.8;text-align:center; }

.report-list li .report-extra { font-size:0.9em; display:flex; gap:20px; margin-bottom:0;}
.report-list li .report-extra .item-wrap { display:flex; gap:20px; width: 100% !important; }
.report-list li .report-extra .item-wrap .item { display:flex; gap:20px; margin-bottom:0;}
.report-list li .report-extra .item-wrap .item > div:nth-child(2) { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }

.report-list li  .report-summary { font-weight:300; font-size:0.9em; padding-bottom:5px; line-height:1.7;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.report-list li .arrow-box {
  flex-shrink: 1 !important;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.report-list li .half-right-arrow::before {
  transition: all 0.6s;
}

.report-list li:hover .arrow-box {
  opacity:1;
  width:80px;
}

.report-list li:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


.myreport .filelist { background-color:#fdfdfd; padding:0; padding:20px; border-bottom:solid 1px #e2e2e2; }
.myreport .filelist li { list-style:none; font-size:0.9em; }

@media (max-width: 768px) {
  .report-list li .report-extra { display:block !important; }
  .report-list li .report-title .status { display:inline-block; line-height:2;}
  .report-list li .report-title { display:block; }
  .report-list li .report-title .title {margin-top:5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

  .report-list li .arrow-box { position:absolute; top:0;right:0; }
}

@media (max-width: 578px) {
  .report-list li .report-extra .item-wrap { display:block; }
}



.survey-box { background-color:#fff; list-style:none; border:1px solid #ccc; border-radius:10px; padding:10px; margin-bottom:20px;}
.survey-box:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }
.survey-box .survey-title { display:flex; gap:10px; margin-bottom:0.2em; font-size:1.2em; font-weight:500; letter-spacing: -1px; padding-bottom:5px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; }
.survey-box a:hover .survey-title { color:var(--theme-color); }
.survey-box .survey-extra { font-size:0.9em; display:flex; gap:20px; margin-bottom:0;}
.survey-box .survey-extra .item-wrap { display:flex; gap:20px; width: 100% !important; }
.survey-box .survey-extra .item-wrap .item { display:flex; gap:20px; margin-bottom:0;}
.survey-box .survey-extra .item-wrap .item > div:nth-child(2) { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }

.survey-box .survey-summary { font-weight:300; font-size:0.9em; padding-bottom:5px; line-height:1.7;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.survey-box .arrow-box {
  flex-shrink: 1 !important;
  width:0px;
  transition: all 0.5s;
  opacity:0;
}

.survey-box .half-right-arrow::before {
  transition: all 0.6s;
}

.survey-box:hover .arrow-box {
  opacity:1;
  width:80px;
}

.survey-box:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


@media (max-width: 768px) {
  .survey-box.survey-extra { display:block !important; }
  .survey-box.survey-title { display:block; }
  .survey-box.survey-title .title {margin-top:5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}

  .survey-box.arrow-box { position:absolute; top:0;right:0; }
}

@media (max-width: 578px) {
  .survey-box.survey-extra .item-wrap { display:block; }
}


.survey-view .header {
  padding: 20px 20px;
  background-color: #f8f8f8;
  border-bottom: solid 1px #e2e2e2;
  border-top: solid 1px #222;
}
.survey-view .header .title { font-size:clamp(1.1rem, 2.5vw, 1.5rem); font-weight:500; }
.survey-view .header .extra dl { display:flex; margin-bottom:0; font-size:0.9em; }
.survey-view .header .extra dl dt { margin-right:20px; font-weight:300; margin-left:20px; }
.survey-view .header .extra dl dt:first-child { margin-left:0; margin-right:20px; font-weight:300; }
.survey-view .header .extra dl dd { margin-bottom:0; }

.survey-view .guide { border-bottom: 1px solid #ddd; padding:20px;}

.survey-question { margin:20px 0; padding:0; padding-left:15px; }
.survey-question li { margin-bottom:20px; }
.survey-question .question { font-weight:500; font-size:1.2em;}
.survey-question .caselist label.checked { color:var(--theme-color); }

.survey-question .text-answer { border:1px solid #eee; padding:10px; margin-top:10px; border-radius:10px; }



/* 댓글 */
.comment-wrap {}
.comment-wrap h5 { font-size:1em; }
.comment-wrap h5 span { color:#f00; }
.comment-wrap .comment-input-box { border:1px solid #ddd; padding:10px; }
.comment-wrap .comment-input-box fieldset { display:flex; gap:10px; align-items: center !important;}
.comment-wrap .comment-input-box fieldset textarea { flex-grow: 1 !important; }
.comment-wrap .comment-input-box fieldset button { white-space: nowrap; height:62px; }

@media (max-width: 768px) {
  .comment-wrap .comment-input-box fieldset { display:block; text-align:center;}
  .comment-wrap .comment-input-box fieldset button { margin-top:10px; height:auto;}
}

.comment-list { margin:0; padding:0; margin-top:10px; }
.comment-list li { list-style:none; padding:10px; position:relative; }
.comment-list li:nth-child(odd) { background-color:#f9f9f9; }
.comment-list li .comment-info { margin-bottom:10px; font-weight:500; }
.comment-list li .comment-info span { display:inline-block; margin-left:20px; font-size:0.9em; font-weight:300;}
.comment-list li .comment-del-link { position:absolute; color:#f00; display:none; right:10px; top:10px;}
.comment-list li:hover .comment-del-link { display:block; }


/* 법률상담 */
.counsel-list { margin:0; padding:0; }
.counsel-list li { list-style:none; margin:10px 0; }
.counsel-list li a { display:flex; border:1px solid #ddd; padding:20px; gap:10px; border-radius:10px; position:relative;}
.counsel-list li a:hover { transition: all 0.5s; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }

.counsel-list li a .summary { font-weight:300; font-size:0.9em; padding:5px 0; line-height:1.7;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.counsel-list li a .counsel-info { width:100%; }
.counsel-list li a .title { display:block; gap:10px; font-weight:500; }
.counsel-list li a:hover .title { color:var(--theme-color);}
.counsel-list li a .title span { border-radius:20px; display:inline-block; padding:1px 10px; margin-right:10px; color:#fff; font-size:0.9em;}
.counsel-list li a .title span.inside { background-color:var(--logo-blue); }
.counsel-list li a .title span.outside { background-color:var(--theme-color);}
.counsel-list li a .orgtitle { color:red;text-decoration:line-through; font-size:0.9em; font-weight:300; }

.counsel-list li a .iteminfo { border:1px solid #ddd; padding:2px 10px; border-radius:20px; font-size:0.9em;}
.counsel-extra { display:flex; gap:10px; align-items: center !important;}

.counsel-extra > div { display:flex; gap:10px; align-items: center !important; }
@media (max-width: 768px) {
  .counsel-extra { display:block;}
  .counsel-extra > div { margin-bottom:5px; }
}

.counsel-list li a .arrow-box {
  position:absolute;
  right:10px;
  bottom:10px;
  width:0px;
  transition: all 0.5s;
  opacity: 0;
}

.counsel-list li a .half-right-arrow::before {
  transition: all 0.6s;
}

.counsel-list li a:hover .arrow-box {
  opacity:1;
  width:80px;
}

.counsel-list li a:hover .arrow-box .half-right-arrow::before {
  opacity:1;
  width: 15px !important;
}


@media (max-width: 768px) {
  .counsel-list li a .arrow-box { display:none; }
}

@media (max-width: 578px) {
}


.counsel-view .counsel-header { border:1px solid #eee; border-radius:10px; padding:20px; margin-bottom:20px;}
.counsel-view .counsel-header .counsel-title { display:flex;align-items: flex-start !important; margin-bottom:0; gap:10px; font-size:1.5em; font-weight:500; letter-spacing: -1px; padding-bottom:0px; }
.counsel-view .counsel-header .counsel-title span.apptype { border-radius:20px; display:inline-block; padding:1px 10px; color:#fff; font-size:0.7em;}
.counsel-view .counsel-header .counsel-title span.inside { background-color:var(--logo-blue); }
.counsel-view .counsel-header .counsel-title span.outside { background-color:var(--theme-color);}

.counsel-view .counsel-header .counsel-orgtitle { color:red;text-decoration:line-through; font-size:0.9em; font-weight:300;}
.counsel-view .counsel-header .counsel-extra {  margin-top:0.2em; padding-top:5px; font-size:0.9em; display:flex; gap:30px;}
.counsel-view .counsel-header .counsel-extra dl { margin-bottom:0; display:flex; margin-bottom:5px !important; }
.counsel-view .counsel-header .counsel-extra dl dt { width:80px; }
.counsel-view .counsel-header .counsel-extra dl dd { margin-left:1.2em; margin-bottom:0;color:var(--primary-color); }

.counsel-view h6 { position:relative; padding-left:14px; font-weight:300; margin-bottom:0.25em; color:#333; }

.counsel-view h6:before {
  background-color: var(--theme-color);
}
.counsel-view h6:before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 8px;
  height: 8px;
  background-color: var(--theme-color);
}

.counsel-view h6:after {
  background-color: rgba(var(--theme-color-rgb), 0.5);
}
.counsel-view h6:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background-color: rgba(var(--theme-color-rgb), 0.5);
}

.counsel-view .text-content { margin-bottom:30px; background-color:rgba(0, 0, 0, 0.02); border-top: 2px solid var(--logo-blue); padding:10px; font-size:0.9em; }

.counsel-view .filelist { margin: 0;padding:0;border-radius:10px;}
.counsel-view .filelist li { list-style:none; margin:0; padding:2px 0px; font-size:0.9em;}


.faq-list .item-icon { display:inline-block; margin-right:10px; color:var(--logo-orange); font-size:1.3em;}
.faq-list .accordion-button:not(.collapsed) {background-color:rgba(var(--logo-yellow-rgb), 0.2); box-shadow:0 0 0 0.1rem rgba(var(--logo-yellow-rgb), 0.25);}
.faq-list .accordion-button:focus { box-shadow: 0 0 0 0.1rem rgba(var(--logo-yellow-rgb), 0.25); }
.faq-list .accordion-button .question { margin-right:10px;}



.message-wrap .header {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 16px minmax(310px, 1fr) 100px 100px;
  gap: 10px;
  font-size:0.9rem;
  padding: 5px 8px;
  background-color: #f0f0f0;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  font-weight:500;
}



.message-wrap .header div.date,
.message-wrap .header div.sender,
.message-wrap ul.msglist li div.date,
.message-wrap ul.msglist li div.sender { text-align:center; }


.message-wrap ul.msglist { margin:0; padding:0;}

.message-wrap ul.msglist li {
  list-style:none;
  position: relative;
  width: 100%;
  font-size:0.9rem;
  padding: 8px 8px;
  border-bottom:1px solid #ddd;
}

.message-wrap ul.msglist li:not(.nomsg) {
  display: grid;
  grid-template-columns: 16px  minmax(310px, 1fr) 100px 100px;
  gap: 10px;
}

@media (max-width: 768px) {
  .message-wrap .header .sender,
  .message-wrap ul.msglist li .sender { display:none; }
  .message-wrap .header,
  .message-wrap ul.msglist li:not(.nomsg) {
    grid-template-columns: 16px  minmax(310px, 1fr) 100px 0px;
  }
}

@media (max-width: 578px) {
  .message-wrap .header .date,
  .message-wrap .header .sender,
  .message-wrap ul.msglist li .sender,
  .message-wrap ul.msglist li .date { display:none; }

  .message-wrap ul.msglist li:not(.nomsg) {
    grid-template-columns: 16px  minmax(280px, 1fr) 0px 0px;
  }
}


.message-wrap ul.msglist li.nomsg { text-align:center; }

.message-wrap ul.msglist li.unread { font-weight:500; }

.message-wrap ul.msglist li > div:nth-child(2) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor:pointer;
}

.message-wrap ul.msglist li > div:nth-child(2) span {
  color: rgb(119, 119, 119);
  font-weight: normal;
  margin-left: 8px;
}

.message-wrap ul.msglist li .envelope:before {
  content: "\f32f";
  display: inline-block;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.message-wrap ul.msglist li.unread .envelope:before {content: "\f32c";}

.message-box .head { border:2px solid #f5f5f5; background-color:#f5f5f5; padding:10px; }
.message-box .head .title { font-weight:500; margin-bottom:5px; font-size:1.2em;}
.message-box .head .sender  { font-size:0.9rem; position:relative; }
.message-box .head .sender span { display:inline-block; padding-left:20px; }
.message-box .head .sender button { position:absolute; right:0px; bottom:0px; }
.message-box .msgbody { margin-top:2px; border:2px solid #f5f5f5; padding:2px; min-height:450px;}
.message-box .msgbody .msginner { padding:10px; }

@media (max-width: 500px) {
  .message-box .head { font-size:0.8em;}
  .message-box .msgbody {min-height:350px;}
}


.btn-rounded { border-radius:20px; }