@charset "utf-8";

/* info
   ========================================================================== */
/**
 * 1. Writer: Yeji Yu. (Weaverloft Corp.)
 * 2. Production Date: 2022-01-20
 * 3. Client: 노무현재단
 */

/* color
   ========================================================================== */
/**
 * 1. Primary Color: #a37c13 #4b2e02 #ffcb08
 * 2. Text Color: #111 #333 #666 #999 #a37c13 #4b2e02 #f16100
 * 3. Line Color: #111 #333 #666 #999 #aaa #ddd #fff #64686b #ffcb08 #a37c13 #4b2e02 #f16100
 */


/* import
   ========================================================================== */
@import url("main.css?ver=20231017");
@import url("program.css?ver=20250529");
@import url("enrollment.css?ver=20241213");
@import url("list.css?ver=20240516");
@import url("space.css?ver=20240612");
@import url("competition.css?ver=20240612");
@import url("information.css?ver=20230904_v1");
@import url("greet.css");
@import url("map.css?ver=20230425");
@import url("bi.css");
@import url("floor.css?ver=20230411");

/* badge
   ========================================================================== */
/* common */
.ct-badge {
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0.500em; left: 0.500em;
   z-index: 3;
   width: 4.000em;
   height: 4.000em;
   box-sizing: border-box;
   border-radius: 50%;
   font-size: 0.625rem;
   font-weight: 800;
   box-shadow: 0.100em 0.100em 0 rgba(0,0,0,0.3);
   letter-spacing: 0;
   line-height: 1.1;
}
.ct-badge span {
	transform: translateY(1px);
}
/* 20240227 추가 공통 : 공지글 고정 */
.ct-badge.fix {
   display: none;
   top: 1em;
   left: auto;
   right: 1em;
   width: 2.50em;
   height: 2.50em;
   background-color: transparent;
   box-shadow: none;
}
.ct-badge.fix::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url("../../img/common/icon-fix.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: auto 100%;
   transform: rotate(45deg);
}
.ct-list-li.fix .ct-badge.fix {
   display: block;
}

/* typeA 센터프로그램에 사용되는 배지 */
.ct-badge.typeA {
   border: 0.200em solid #111;
   background-color: #f5f5f5;
}
.ct-badge.typeA.a-1 {
   border-color: #2677ed;
   color: #2677ed;
}
.ct-badge.typeA.a-2 {
   border-color: #00aa44;
   color: #00aa44;
}
.ct-badge.typeA.a-3 {
   border-color: #8655d2;
   color: #8655d2;
}
.ct-badge.typeA.a-4 {
   border-color: #ff3e3b;
   color: #ff3e3b;
}
.ct-badge.typeA.a-5 {
   border-color: #ff6315;
   color: #ff6315;
}
.ct-badge.typeA.a-6 {
   border-color: #666;
   color: #666;
}

/* typeB 시민프로그램에 사용되는 배지 */
.ct-badge.typeB {
   padding: 0 1em;
   color: #fff;
   word-break: break-all;
   text-align: center;
   line-height: 1.1;
}
.ct-badge.typeB.b-1 {
   background-color: #e63d99;
}
.ct-badge.typeB.b-2 {
   background-color: #4434bc;
}
.ct-badge.typeB.b-3 {
   background-color: #5499C7;
}

/* typeC 지역프로그램에 사용되는 배지 */
.ct-badge.typeC {
   border-radius: 0;
   color: #fff;
}
.ct-badge.typeC.c-1 {
   background-color: #2f26ed;
}
.ct-badge.typeC.c-2 {
   background-color: #ed266c;
}
.ct-badge.typeC.c-3 {
   background-color: #bc26ed;
}
.ct-badge.typeC.c-4 {
   background-color: #00a8df;
}
.ct-badge.typeC.c-5 {
   background-color: #ed6c26;
}
.ct-badge.typeC.c-6 {
   background-color: #2fbb13;
}
.ct-badge.typeC.c-7 {
   background-color: #8826ed;
}
.ct-badge.typeC.c-8 {
   background-color: #2677ed;
}
.ct-badge.typeC.c-9 {
   background-color: #df9800;
}
.ct-badge.typeC.c-10 {
   background-color: #5608d8;
}
.ct-badge.typeC.c-11 {
   background-color: #279102;
}

/* typeD 공용 배지 */
.ct-badge.typeD {
   left: 4.300em;
   z-index: 2;
}
.ct-badge.typeD.d-1 {
   background-color: #ffcb08;
   color: #111;
}
.ct-badge.typeD.d-2 {
   background-color: #4b2e02;
   color: #fff;
}
.ct-badge.typeD.d-3 {
   background-color: #a37c13;
   color: #fff;
}
.ct-list-badge.typeD.d-3 {
   background-color: #a37c13;
   color: #fff;
}

/* typeE 공용 배지 */
.ct-badge.typeE {
   position: relative;
   top: 0; left: 0;
   width: 3.100em;
   height: 3.100em;
   border-radius: 0;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   font-weight: 600;
   color: #fff;
   box-shadow: 0 0 0 rgba(0,0,0,0);
   line-height: 1;
}
.ct-badge.typeE.e-1 {
   background-image: url("../../img/center/ct-badge-typeE-1.svg");
}
.ct-badge.typeE.e-2 {
   width: 2.600em;
   background-image: url("../../img/center/ct-badge-typeE-2.svg");
}
.ct-badge.typeE.e-3 {
   background-image: url("../../img/center/ct-badge-typeE-3.svg");
   color: #4b2e02;
}

@media screen and (min-width: 48.000em) {
   /* common */
   .ct-badge {
      font-size: 1.302vw;
   }
}

@media screen and (min-width: 68.750em) {
   /* common */
   .ct-badge {
      top: 0.714em; left: 0.714em;
      width: 3.786em;
      height: 3.786em;
      font-size: 0.875rem;
   }
    .ct-badge.fix {
      top: 1.07em;
      right: 1.07em;
   }

   /* typeA 센터프로그램에 사용되는 배지 */
   .ct-badge.typeA {
      border-width: 0.214em;
   }

   /* typeD 공용 배지 */
   .ct-badge.typeD {
      left: 4.143em;
   }

   /* typeE 공용 배지 */
   .ct-badge.typeE {
      width: 3.154em;
      height: 3.154em;
      font-size: 0.813rem;
   }
   .ct-badge.typeE.e-2 {
      width: 2.692em;
   }
}

/* button
   ========================================================================== */
/* btn */
.ct-btn-wrap {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 2.000em;
   font-size: 0.938rem;
   text-align: center;
}
.ct-btn-wrap a {
   display: block;
   width: auto;
   height: 2.867em;
   padding: 0 2.100em;
   box-sizing: border-box;
   border-radius: 0.200em;
   border: 1px solid #666;
   background-color: transparent;
   color: #666;
   line-height: 2.867em;
   transition: 300ms;
}
.ct-btn-wrap a:hover {
   background-color: #f5f5f5;
}
.ct-btn-wrap a span {
   padding-right: 1.600em;
   background-image: url("../../img/center/ct-main-btn-arrow-gray.svg");
   background-repeat: no-repeat;
   background-position: right center;
   background-size: 1.067em auto;
}
.ct-btn-wrap a.white {
   border-color: #fff;
   color: #fff;
}
.ct-btn-wrap a.white:hover {
   background-color: rgba(0,0,0,0.2)
}
.ct-btn-wrap a.white span {
   background-image: url("../../img/center/ct-main-btn-arrow-white.svg");
}

@media screen and (min-width: 48.000em) {
   /* btn */
   .ct-btn-wrap {
      font-size: 1.953vw;
   }
}

@media screen and (min-width: 68.750em) {
   /* btn */
   .ct-btn-wrap {
      margin-top: 3.750em;
      font-size: 1rem;
   }
   .ct-btn-wrap a {
      height: 3.125em;
      padding: 0 2.455em;
      border-radius: 0.313em;
      line-height: 3.125em;
   }
   .ct-btn-wrap a span {
      padding-right: 2.000em;
      background-size: 1.313em 0.563em;
   }
}

/* list + slide
   ========================================================================== */
/* slide */
.ct-common-slide-cont {
   width: calc(100% + 1.875em);
   margin: 0 -0.938em;
}
.ct-common-slide-cont .swiper {
   width: 100%;
   height: 100%;
   padding-right: 0.938em;
   box-sizing: border-box;
}
.ct-common-slide-cont .swiper-slide {
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
   justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
   align-items: center;
   width: 8em;
   padding-left: 0.938em;
}

/* list */
.ct-list-li {
   float: left;
   width: 47.5%;
   min-height: 17.563em;margin: 0 5% 1.500em 0;
}
.new-ct-list .ct-list-li {
	min-height: 18.563em;
}
.ct-list-li:nth-child(even) {
   margin-right: 0;
}
/* .ct-list-li:nth-child(n+5) {
   display: none;
} */

/* 20240227 추가 공통 : 공지글 고정 */
.ct-list-li.fix figure::before {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, transparent 77%, rgba(0,0,0,0.26) 100%, rgba(0,0,0,1) 100%);
}

.ct-list-item {
   display: block;
   width: 100%;
   height: 100%;
}
.ct-list-item figure {
   position: relative;
   overflow: hidden;
   /* min-height: 60.833vw; */
   min-height: 11.313em;
   margin-bottom: 0.938em;
   border-radius: 0.313em;
   box-sizing: border-box;
   border: 1px solid #ddd;
   background-color: #f5f5f5;
}
.ct-list-item figure::after {
   content: '';
   opacity: 0;
   visibility: hidden;
   display: block;
   position: absolute;
   top: 50%; left: 50%;
   z-index: 3;
   width: 100%;
   height: 100%;
   background-color: rgba(163,124,19,0.8);
   background-image: url("../../img/center/ct-main-list-hover.svg");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 50% 50%;
   transform: translate(-50%, -50%);
   transition: 300ms;
}
.ct-list-item:hover figure::after {
   opacity: 1;
   visibility: visible;
}
.ct-list-item figure img {
	width: 101%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* list cont */
.ct-list-item-tit {
   display: -webkit-box; 
   overflow: hidden; 
   text-overflow: ellipsis; 
   height: auto;
   line-height: 1.3;
   /* max-height: 1.3em;  */
   word-wrap: break-word; 
   word-break: keep-all;
   -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical; 
   font-size: 0.875rem;
   color: #333;
}
.ct-list-item-period {
   display: -webkit-box; 
   overflow: hidden; 
   text-overflow: ellipsis; 
   height: auto;
   max-height: 1.3em; 
   word-wrap: break-word; 
   word-break: keep-all;
   -webkit-line-clamp: 1; 
   -webkit-box-orient: vertical; 
   margin-top: 0.500em;
   font-size: 0.750rem;
   color: #666;
}
/* @media screen and (min-width: 27.500em) {
	.ct-list-item figure {
		min-height: 61.667vw;
	}
} */
@media screen and (min-width: 48.000em) {
   /* slide */
   .ct-common-slide-cont,
   .ct-common-slide-cont .swiper,
   .ct-common-slide-cont .swiper-slide {
      font-size: 2.083vw;
   }
   .ct-common-slide-cont {
      width: 100%;
      margin: 0;
   }
   .ct-common-slide-cont .swiper {
      padding-right: 0;
   }
   .ct-common-slide-cont .swiper-wrapper {
      /* justify-content: space-between; */
   }
   .ct-common-slide-cont .swiper-slide {
      width: 10.375em;
	  margin-right: 1.26em;
      padding-left: 0;
   }
   .ct-common-slide-cont .swiper-slide:last-child {
	  margin-right: 0;
   }

   /* list */
   .ct-list-li {
      float: left;
      width: 22.6%;
      min-height: 19.438em;margin: 0 3.2% 1.500em 0;
      font-size: 2.083vw;
   }
   .new-ct-list .ct-list-li {
		min-height: 21.650em;
	}
   .ct-list-li:nth-child(even) {
      margin: 0 1.438em 1.500em 0;
   }
   .ct-list-li:nth-child(4n) {
      margin-right: 0;
   }
   /* .ct-list-li:nth-child(n+5) {
      display: block;
   }
   .ct-list-li:nth-child(n+9) {
      display: none;
   } */
   .ct-list-item figure {
      font-size: 2.083vw;
	   min-height: 30.208vw;
   }

   /* list cont */
   .ct-list-item-tit {
      font-size: 1.823vw;
   }
   .ct-list-item-period {
      font-size: 1.563vw;
   }
}

@media screen and (min-width: 68.750em) {
   /* slide */
   .ct-common-slide-cont,
   .ct-common-slide-cont .swiper,
   .ct-common-slide-cont .swiper-slide {
      font-size: 1rem;
   }
   .ct-common-slide-cont .swiper-slide {
      width: 16.000em;
	  margin-right: 1.56em;
   }
   .ct-common-slide-cont .swiper-slide:last-child {
	  margin-right: 0;
   }
   .ct-list-item figure {
      margin-bottom: 1.500em;
      border-radius: 0.313em;
      background-color: #f5f5f5;
   }
   .ct-list-item figure::after {
      background-size: 5.750em 5.750em;
   }

   /* list */
   .ct-list-li {
      width: 23.35%;
      /* width: 16.000em; */
      min-height: 29.188em;margin: 0 1.500em 2.500em 0;
      font-size: 1rem;
   }
    .new-ct-list .ct-list-li {
		min-height: 32.650em;
	}
   .ct-list-li:nth-child(even) {
      margin: 0 1.500em 2.500em 0;
   }
   .ct-list-li:nth-child(4n) {
      margin-right: 0;
   }
   /* .ct-list-li:nth-child(n+9) {
      display: block;
   } */
   .ct-list-item figure {
      font-size: 1rem;
	  min-height: 22.375em; 
   }

   /* slide cont */
   .ct-list-item-tit {
      font-size: 1.250rem;
   }
   .ct-list-item-period {
      margin-top: 0.625em;
      font-size: 1rem;
   }
}

/* 프로젝트
   ========================================================================== */
.ct-common-prj-list {
   position: relative;
}
.ct-common-prj-list * {
   font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}
.ct-common-prj-list li {
   display: inline-block;
   overflow: hidden;
   width: calc(50% - 0.313em);
   margin-bottom: 0.625em;
   word-break: keep-all;
   line-height: 1.3;
   box-shadow: 0 0.625em 0.625em rgb(0, 0, 0, 0);
/*   transition: 300ms;*/
}
.ct-common-prj-list li .ct-common-prj-list-cont {
   box-sizing: border-box;
   border-radius: 0.188em;
   border: 1px solid #ddd;
   cursor: pointer;
}
.ct-common-prj-list li:hover {
   box-shadow: 0 0.625em 0.625em rgb(0, 0, 0, 0.05);
}
/* .ct-common-prj-list li:nth-child(n+5) {
   display: none;
} */
.ct-common-prj-list li .ct-common-prj-list-cont {
   display: block;
   padding: 1.250em 0.938em 0.938em;
   box-sizing: border-box;
   background-color: #fff;
   transition: 300ms;
}
.ct-common-prj-list li.yellow {
   border-color: #fff9d8;
}
.ct-common-prj-list li.yellow .ct-common-prj-list-cont {
   background-color: #fff9d8;
}
.ct-common-prj-badge-wrap {
   display: flex;
   margin-bottom: 0.625em;
   transform: translateX(-0.125em);
}
.ct-common-prj-badge-wrap .ct-badge {
   position: relative;
   top: 0; left: 0;
}
.ct-common-prj-badge-wrap .ct-badge.typeD {
   left: -0.125em;
}
.ct-common-prj-tit {
   display: -webkit-box; 
   overflow: hidden; 
   text-overflow: ellipsis; 
   height: auto;
   max-height: 2.6em; 
   word-wrap: break-word; 
   word-break: keep-all;
   -webkit-line-clamp: 2; 
   -webkit-box-orient: vertical; 
   font-size: 0.938rem;
   font-weight: 700;
   color: #333;
}
.ct-common-prj-txt {
   display: -webkit-box; 
   position: relative;
   overflow: hidden; 
   text-overflow: ellipsis; 
   height: auto;
   max-height: 6.5em; 
   word-wrap: break-word; 
   word-break: keep-all;
   -webkit-line-clamp: 5; 
   -webkit-box-orient: vertical; 
   margin-top: 0.308em;
   font-size: 0.813rem;
   color: #333;
}
.ct-common-prj-txt span {
   background-color: transparent !important;
}
.ct-common-prj-txt::after {
   content: '';
   display: block;
   position: absolute;
   left: 0; bottom: 0;
   width: 100%;
   height: 30%;
   background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}
.ct-common-prj-list li.yellow .ct-common-prj-txt::after {
   background: linear-gradient(180deg, rgba(255,249,216,0) 0%, rgba(255,249,216,1) 100%);
}
.ct-common-prj-txt *:not(.ct-common-prj-txt img) {
   display: -webkit-box; 
   overflow: hidden; 
   text-overflow: ellipsis; 
   height: auto;
   max-height: 6.5em; 
   word-wrap: break-word; 
   word-break: keep-all;
   -webkit-line-clamp: 4; 
   -webkit-box-orient: vertical; 
   margin-top: 0.308em;
   font-size: 0.813rem !important;
}
.ct-common-prj-txt *:first-child {
   margin-top: 0 !important;
}
.ct-common-prj-txt img {
   width: 100%;
}
.ct-common-prj-mem-wrap {
   display: flex;
   align-items: center;
   position: relative;
   height: 2.385em;
   margin-top: 0.615em;
   box-sizing: border-box;
   font-size: 0.813rem;
   color: #666;
   line-height: 1;
}
/* 230925 시민활동 css 추가 */
.new-ct-list .ct-common-prj-mem-wrap + .ct-list-item-tit {
   margin-top: 0.615em;
}
.ct-common-prj-mem-name {
   padding-left: 0.308em;
}
.ct-common-prj .ct-btn-wrap {
   margin-top: 1.333em;
}

@media screen and (min-width: 48.000em) {
   .ct-common-prj-list li {
      width: calc(25% - 0.469em);
      font-size: 2.083vw;
   }
   /* .ct-common-prj-list li:nth-child(n+5) {
      display: inline-block;
   }
   .ct-common-prj-list li:nth-child(n+9) {
      display: none;
   } */
   .ct-common-prj-list li .ct-common-prj-list-cont {
      font-size: 2.083vw;
   }
   .ct-common-prj-badge-wrap {
      font-size: 2.083vw;
   }
   .ct-common-prj-tit {
      font-size: 1.953vw;
   }
   .ct-common-prj-txt {
      font-size: 1.693vw;
   }
   .ct-common-prj-txt *:not(.ct-common-prj-txt img) {
      font-size: 1.693vw !important;
   }
   .ct-common-prj-mem-wrap {
      font-size: 1.693vw;
   }
}

@media screen and (min-width: 68.750em) {
   .ct-common-prj-list li {
      width: 16.000em;
      /* width: calc(25% - 1.172em); */ /* calc(25% - 1.159em) */
      margin-bottom: 1.563em;
      font-size: 1rem;
   }
   .ct-common-prj-list li .ct-common-prj-list-cont {
      border-radius: 0.313em;
   }
   /* .ct-common-prj-list li:nth-child(n+9) {
      display: inline-block;
   }
   .ct-common-prj-list li:nth-child(n+13) {
      display: none;
   } */
   .ct-common-prj-list li .ct-common-prj-list-cont {
      padding: 1.875em 1.250em 1.250em;
      font-size: 1rem;
   }
   .ct-common-prj-badge-wrap {
      margin-bottom: 0.750em;
      font-size: 1rem;
      transform: translateX(-0.25em);
   }
   .ct-common-prj-badge-wrap .ct-badge.typeD {
      left: -0.250em;
   }
   .ct-common-prj-tit {
      font-size: 1.125rem;
   }
   .ct-common-prj-txt {
      margin-top: 0.750em;
      font-size: 1rem;
   }
   .ct-common-prj-txt *:not(.ct-common-prj-txt img) {
      font-size: 1rem !important;
   }
   .ct-common-prj-mem-wrap {
      margin-top: 0.750em;
      font-size: 1rem;
   }
    /* 230925 시민활동 css 추가 */
   .new-ct-list .ct-common-prj-mem-wrap + .ct-list-item-tit {
      margin-top: 0.750em;
   }
   .ct-common-prj .ct-btn-wrap {
      margin-top: 2.188em;
   }
}

/* 오시는 길
   ========================================================================== */
.center-map-tit {
   position: relative;
   padding-left: 1.444em;
   margin-bottom: 0.6em;
   font-size: 1.125em;
   font-weight: 600;
   color: #a37c13;
}
.center-map-tit::before {
   content: '';
   position: absolute;
   top: -1px;
   left: 0;
   width: 1.222em;
   height: 1.222em;
   background-image: url('../../img/bongha/bh-townmap-train-on.svg');
   background-repeat: no-repeat;
   background-position: center left;
   background-size: 100% auto;
}
.center-map-tit.bus::before {
   top: -3px;
   background-image: url('../../img/bongha/bh-townmap-bus-on.svg');
}
.center-map-tit.car::before {
   top: -4px;
   background-image: url('../../img/bongha/bh-townmap-car-on.svg');
}

@media screen and (min-width: 68.750em) {
   .center-map .town-map-parking {
      margin-top: 4.5em;
   }
   .center-map-tit {
      padding-left: 1.778em;
      width: 6em;
      margin-bottom: 0;
      margin-right: 2.5em;
      line-height: 1.3;
      font-size: 1.375rem;
   }
   .center-map-tit.bus {
      margin-bottom: 0;
   }
   .center-map-tit::before {
      width: 1.444em;
      height: 1.444em;
   }
   .center-map .town-map-tab-con .town-map-txt {
      width: 48em;
   }
}