@charset "UTF-8";

/*-------------------------------------------------------------------
    적용영역 : 전체영역
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    최종변경일 : 2025.11.21
-------------------------------------------------------------------*/
:root {
    --color-primary: #1B9E50;
    
    --color-text: #7E8790;
    --color-text-0: #FFFFFF;
    --color-text-90: #000000;

    --color-border : #D0D7DE;
	--color-text-bg : #F6F8FC;
}

/*-------------------------------------------------------------------
	분류이름 : 상단 텍스트 배너
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#header {top: 100px;}

#topBanner {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100px; background-color: #fff;}
#topBanner .slide-container {display: block; overflow: hidden; position: relative; max-width: 1700px; height: 100%; margin: 0 auto;}
#topBanner .slide-container .swiper-slide {display: block; position: relative;}
#topBanner .slide-container .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

#topBanner .slide-controls {display: block; position: absolute; top: 0; left: 50%; z-index: 2; width: 100%; max-width: 1700px; padding: 0 var(--r-48); transform: translateX(-50%);}
#topBanner .slide-controls .btn-ctrl {display: flex; position: absolute; top: 0; height: 100px; padding: 0 10px; align-items: center; justify-content: center;}
#topBanner .slide-controls .btn-ctrl::before {content: ""; display: flex; width: 34px; height: 34px; border-radius: 50%; background-color: #fff; font-family: 'remixicon'; font-weight: normal; font-size: 24px; color: #000; align-items: center; justify-content: center;}

#topBanner .btn-mb-close {display: none; position: absolute; top: 0; right: 0; z-index: 2; padding: 0 20px 0 10px; height: 100%; font-size: 16px; color: #fff;}
#topBanner .btn-mb-close::before {content: "\EB99"; display: flex; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-primary); font-family: 'remixicon'; font-weight: normal; font-size: inherit; color: inherit; align-items: center; justify-content: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#topBanner .slide-container .swiper-slide img.pc-img {display: block;}
#topBanner .slide-container .swiper-slide img.mb-img {display: none;}

#topBanner .slide-controls .btn-ctrl.btn-prev {left: 0;}
#topBanner .slide-controls .btn-ctrl.btn-prev::before {content: "\EA60";}
#topBanner .slide-controls .btn-ctrl.btn-next {right: 0;}
#topBanner .slide-controls .btn-ctrl.btn-next::before {content: "\EA6C";}
#topBanner .slide-controls .btn-ctrl.swiper-button-lock,
#topBanner .slide-controls .btn-ctrl.swiper-button-disabled {display: none !important;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* 배너 사용 | 미사용 */
body[data-top-banner="off"] #header {top: 0;}
body:not(.fixed-pop)[data-top-banner="on"][data-scrolled="start"] #header {top: 0;}

#topBanner {visibility: visible;}
.close-banner #topBanner {display: none !important;}

body[data-top-banner="off"] #topBanner {visibility: hidden;}
body:not(.fixed-pop)[data-top-banner="on"][data-scrolled="start"] #topBanner {transform: translateY(-101%);}

/* 컨트롤러 */
#topBanner .slide-controls .btn-ctrl {transition: background 0.3s;}
#topBanner .slide-controls .btn-ctrl:focus-visible,
#topBanner .slide-controls .btn-ctrl:hover {background-color: var(--color-primary-70);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#header {top: var(--mobile-banner-height);}

	#topBanner {height: var(--mobile-banner-height);}
	#topBanner .slide-controls {display: none;}
	#topBanner .btn-mb-close {display: flex; align-items: center; justify-content: center;}
	#topBanner .slide-container .swiper-slide img.pc-img {display: none;}
	#topBanner .slide-container .swiper-slide img.mb-img {display: block;}
}



/*-------------------------------------------------------------------
	분류이름: 공통
	분류그룹: section
-------------------------------------------------------------------*/
#main {display: block; width: 100%; max-width: 1540px; min-height: 100dvh; margin: 0 auto; padding: 80px 20px 0;}

.section {margin-bottom: 100px;}

/* 타이틀 */
.sc-title .tit {display: block; font-size: 35px; font-weight: 700; line-height: 1; color: var(--color-text-90);}
.sc-title .txt {display: block; font-size: 18px; font-weight: 500;line-height: 1.2; color: var(--color-text);}

/* 버튼 */
.btn-sc-more {display: flex; overflow: hidden; position: relative; width: 50px; height: 50px; border-radius: 50%; background-color: #000; font-size: 24px; align-items: center; justify-content: center;}
.btn-sc-more::after {content: "\EA12"; display: inline-block; position: relative; font-family: 'remixicon'; font-weight: normal; font-size: inherit; line-height: 1; color: var(--color-text-0);}

/* form */
.f-control {display: block; height: 50px; padding: 10px 30px; border: 1px solid var(--color-border); background: #FFF; color: var(--color-text-90); box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.2);}
.f-control::placeholder {color: var(--color-text);}
input.f-control {border-radius: 100px;}
select.f-control {padding-right: 55px; border-radius: 100px; background: url(../images/sub/select-bg.svg) no-repeat center right 30px; font-weight: 600; color: var(--color-text-90);}
.swiper-notification {position: absolute;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
body[data-top-banner="on"] #main {padding-top: 180px;}

/*-------------------------------------------------------------------
@interaction
-------------------------------------------------------------------*/
.btn-sc-more {transition: all 0.3s;}
.btn-sc-more:focus-visible,
.btn-sc-more:hover {background-color: var(--color-primary); animation: jello-horizontal 0.6s both;}

@keyframes jello-horizontal {
	0% {transform: scale3d(1, 1, 1);}
	30% {transform: scale3d(1.15, 0.85, 1);}
	40% {transform: scale3d(0.85, 1.15, 1);}
	50% {transform: scale3d(1.05, 0.95, 1);}
	65% {transform: scale3d(0.95, 1.05, 1);}
	75% {transform: scale3d(1.05, 0.95, 1);}
	100% {transform: scale3d(1, 1, 1);}
}

/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	.sc-title .tit {font-size: 30px;}
	.sc-title .txt {font-size: 17px;}
}
@media screen and (max-width: 1024px) {
	body[data-top-banner="on"] #main {padding-top: calc(80px + var(--mobile-banner-height));}

	.section {margin-bottom: 70px;}
	.sc-title .tit {font-size: 26px;}
	.sc-title .txt {font-size: 16px;}
	
	.btn-sc-more {width: 40px; height: 40px; font-size: 20px;}
	
	.f-control {height: 40px; padding: 10px 15px;}
	select.f-control {padding-right: 35px; background-position: center right 15px;}
}
@media screen and (max-width: 600px) {
	.sc-title .tit {font-size: 21px;}
	.sc-title .txt {font-size: 15px;}
}


/*-------------------------------------------------------------------
	분류이름: 공통 컨텐츠 스타일
	분류그룹: section > 컨텐츠
-------------------------------------------------------------------*/
.section-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px;}

.section .sc-content[data-sc-template="a"] {display: flex; flex-direction: column;}
.section .sc-content[data-sc-template="a"] .hd {display: flex; margin-bottom: 30px; justify-content: space-between; flex-wrap: wrap;}
.section .sc-content[data-sc-template="a"] .hd .tit {min-height: 50px; flex-basis: 0; flex-grow: 1;}
.section .sc-content[data-sc-template="a"] .hd .txt {width: 100%; margin-top: 10px;}
.section .sc-content[data-sc-template="a"] .hd .utils {display: flex; margin-left: auto; flex-shrink: 0; gap: 20px;}
.section .sc-content[data-sc-template="a"] .bd {flex-grow: 1;}

.section .card-content {display: grid; height: 100%; padding: 30px; border: 1px solid var(--color-border); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;}
.section .card-content .item {display: block; position: relative;}
.section .card-content .item .img-box {display: block; overflow: hidden; position: relative; aspect-ratio: 1 / 0.9375;}
.section .card-content .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.section .card-content .item .img-box .price-box {display: flex; position: absolute; bottom: 20px; left: 0; width: 100%; padding: 0 20px;}
.section .card-content .item .img-box .price-box .inner {display: flex; margin: 0 auto; padding: 12px 20px; border-radius: 5px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); gap: 5px 10px; justify-content: center; flex-wrap: wrap;}
.section .card-content .item .img-box .price-box .price {display: flex; font-weight: 700; color: var(--color-text-0); align-items: center;}
.section .card-content .item .txt-box {display: block; margin-top: 20px;}
.section .card-content .item .txt-box [class*="tit"] {display: block; overflow: hidden; font-weight: 700; font-size: 20px; line-height: 1.4; text-overflow: ellipsis;}
.section .card-content .item .txt-box .tit {height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.section .card-content .item .txt-box .tit-1 {white-space: nowrap;}
.section .card-content .item .txt-box .txt {display: block; overflow: hidden; margin-top: 20px; font-weight: 500; font-size: 16px; line-height: 28px; color: var(--color-text); white-space: nowrap; text-overflow: ellipsis;}
.section .card-content .item .txt-box .hashtags {display: flex; overflow: hidden; margin-top: 20px; gap: 5px; flex-wrap: wrap;}
.section .card-content .item .txt-box .hashtags .tag {display: flex; height: 28px; padding: 0 10px; border-radius: 5px; background-color: var(--color-text-bg); font-weight: 600; font-size: 14px; color: var(--color-text); flex-shrink: 0; align-items: center; justify-content: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.section .card-content .item .img-box .price-box .price:first-child:not(:last-child) {text-decoration-line: line-through;}
.section .card-content .item .img-box .price-box .price:last-child:not(:first-child)::before {content: "\EA6C"; display: block; margin-right: 10px; font-family: 'remixicon'; font-weight: normal; font-size: 20px; line-height: 1; color: #fff;}
.section .card-content .item .img-box .price-box .price.between:first-child:not(:last-child) {text-decoration-line: none;}
.section .card-content .item .img-box .price-box .price.between:last-child:not(:first-child)::before {content: "~"; display: block; margin-right: 10px; font-weight: normal; font-size: 16px; line-height: 1; color: #fff;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.section .sc-content[data-sc-template="a"] {opacity: 0; transform: translateY(-30px); transition: all 0.5s;}
.section .sc-content[data-sc-template="a"].finded {opacity: 1; transform: translateY(0);}

.section .card-content .item .img-box > img {transition: all 0.3s;}
.section .card-content .item:focus-visible .img-box > img,
.section .card-content .item:hover .img-box > img {transform: scale(1.05);}

.section .card-content .item .txt-box [class*="tit"] {transition: all 0.3s;}
.section .card-content .item:focus-visible .txt-box [class*="tit"],
.section .card-content .item:hover .txt-box [class*="tit"] {color: var(--color-primary);}

.section .card-content .item .img-box .price-box .inner {transition: all 0.3s;}
.section .card-content .item:focus-visible .img-box .price-box .inner,
.section .card-content .item:hover .img-box .price-box .inner {background-color: rgba(0, 0, 0, 0.8);}

.section .card-content .item .img-box .price-box .price {transition: all 0.3s;}
.section .card-content .item:focus-visible .img-box .price-box .price:last-child,
.section .card-content .item:hover .img-box .price-box .price:last-child {color: #08d45a;}

@keyframes jello-horizontal {
  0% {transform: scale3d(1, 1, 1);}
  30% {transform: scale3d(1.15, 0.85, 1);}
  40% {transform: scale3d(0.85, 1.15, 1);}
  50% {transform: scale3d(1.05, 0.95, 1);}
  65% {transform: scale3d(0.95, 1.05, 1);}
  75% {transform: scale3d(1.05, 0.95, 1);}
  100% {transform: scale3d(1, 1, 1);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	.section-grid {gap: 20px;}
	.section .card-content {padding: 20px;}
	.section .card-content .item .txt-box [class*="tit"] {font-size: 18px;}

	.section .card-content .item .txt-box .txt {line-height: 24px;}
	.section .card-content .item .txt-box .hashtags .tag {height: 24px; padding: 0 8px; font-size: 13px;}
	.section .card-content .item .img-box .price-box .inner {padding: 10px; gap: 5px;}
	.section .card-content .item .img-box .price-box .price:last-child:not(:first-child)::before {margin-right: 5px;}
}
@media screen and (max-width: 1024px) {
	.section-grid {grid-template-columns: minmax(0, 1fr); gap: 50px;}
	.section .sc-content[data-sc-template="a"] .hd {margin-bottom: 20px; align-items: center;}
	.section .sc-content[data-sc-template="a"] .hd .tit {min-height: 0;}
	.section .sc-content[data-sc-template="a"] .hd .utils {gap: 10px;}
	.section .card-content .item .txt-box [class*="tit"] {font-size: 17px;}
	
	.section .card-content {gap: 20px;}
	.section .card-content .item .txt-box .txt {line-height: 1.2;}
}
@media screen and (max-width: 600px) {
	.section .card-content {display: block; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--color-border); grid-template-columns: minmax(0, 1fr);}
	.section .card-content .item {margin-top: 20px; padding-top: 20px;}
	.section .card-content .item::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
		background-image: repeating-linear-gradient(90deg, var(--color-border), var(--color-border) 4px, transparent 4px, transparent 8px, var(--color-border) 8px);
		background-repeat: no-repeat;
	}
	.section .card-content > li:first-child .item {margin-top: 0; padding-top: 0; border-top: 0;}
	.section .card-content .item .img-box .price-box .price {font-size: 15px;}
	
	.section .card-content .item .txt-box {padding-left: 10px; padding-right: 10px;}
	.section .card-content .item .txt-box .tit {max-height: 2.8em; height: auto;}
	.section .card-content .item .txt-box .txt {margin-top: 10px; font-size: 16px;}
	.section .card-content .item .txt-box .hashtags {margin-top: 10px;}
	.section .card-content .item .txt-box .hashtags .tag {font-weight: 500; font-size: 16px;}
}
@media screen and (max-width: 375px) {
	.section .card-content .item .img-box {width: 100%; max-height: 260px;}
}



/*-------------------------------------------------------------------
	분류이름: visual section
	분류그룹: section > section01
-------------------------------------------------------------------*/
#sc01 {display: grid; position: relative; margin-bottom: 50px; grid-template-columns: 48% minmax(0, 1fr); gap: 40px;}

#visualContent {display: block;}
#visualContent .slide-area {position: relative; height: calc(100dvh - 80px); padding: 50px 0;}
#visualContent .slide-container {display: block; overflow: hidden; height: 100%;}
#visualContent .slide-container .swiper-slide {display: block;}
#visualContent .slide-container .swiper-slide .item {display: block; position: relative; height: 100%;}
#visualContent .slide-container .swiper-slide .item .img-box {display: block; overflow: hidden; position: relative; width: 100%; height: 100%;}
#visualContent .slide-container .swiper-slide .item .img-box::before {content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
#visualContent .slide-container .swiper-slide .item .img-box::after {content: ""; display: block; position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; height: 50%; background: linear-gradient(0, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);}
#visualContent .slide-container .swiper-slide .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#visualContent .slide-container .swiper-slide .item .txt-box {display: flex; position: absolute; bottom: 0; left: 0; z-index: 3; width: 100%; padding: 0 50px 160px; gap: 30px; flex-direction: column;}
#visualContent .slide-container .swiper-slide .item .txt-box .loc {display: flex; color: #FFF; font-size: 20px; font-weight: 700; line-height: 1; align-items: center; gap: 10px;}
#visualContent .slide-container .swiper-slide .item .txt-box .loc::before {content: "\EF0A"; display: flex; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(4px); font-family: 'remixicon'; font-weight: normal; font-size: 20px; align-items: center; justify-content: center;}
#visualContent .slide-container .swiper-slide .item .txt-box .tit {display: block; font-size: 45px; font-weight: 700; line-height: 1.2; color: #FFF;}
#visualContent .slide-container .swiper-slide .item .txt-box .txt {display: block; color: #FFF; font-size: 20px; font-weight: 600; line-height: 1.2;}
#visualContent .slide-controls {display: flex; position: absolute; bottom: 90px; left: 40px; z-index: 1; max-width: calc(100% - 80px); padding: 10px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.6); align-items: center; gap: 50px;}
#visualContent .slide-controls .btn-ctrl {display: flex; width: 24px; height: 24px; color: #fff; align-items: center; justify-content: center;}
#visualContent .slide-controls .btn-ctrl::before {content: ""; display: block; font-family: 'remixicon'; font-weight: normal; font-size: 24px;}
#visualContent .slide-controls .paging {display: flex; width: auto; align-items: center; gap: 10px;}
#visualContent .slide-controls .paging .bullet {display: block; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 10px; background-color: transparent;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#visualContent .slide-container .swiper-slide .item .img-box::after {opacity: 0; transition: all 0.6s;}
#visualContent .slide-container .swiper-slide .item:focus-visible .img-box::after,
#visualContent .slide-container .swiper-slide .item:hover .img-box::after {opacity: 1;}

#visualContent .slide-container .swiper-slide .item .img-box > img {transition: all 0.3s;}
#visualContent .slide-container .swiper-slide .item:focus-visible .img-box > img,
#visualContent .slide-container .swiper-slide .item:hover .img-box > img {transform: scale(1.025);}

#visualContent .slide-controls .btn-ctrl.prev::before {content: "\EA60";}
#visualContent .slide-controls .btn-ctrl.next::before {content: "\EA6C";}

#visualContent .slide-controls .paging .bullet {transition: all 0.3s;}
#visualContent .slide-controls .paging .bullet.active {width: 30px; background-color: #fff;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc01 {gap: 30px;}
	#visualContent .slide-container .swiper-slide .item .txt-box {padding: 0 20px 120px; gap: 20px;}

	#visualContent .slide-controls {left: 20px; max-width: calc(100% - 40px);}
}
@media screen and (max-width: 1200px) {
	#visualContent .slide-container .swiper-slide .item .txt-box .loc {font-size: 18px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .loc::before {width: 30px; height: 30px; font-size: 18px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 36px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .txt {font-size: 18px;}
}
@media screen and (max-width: 1024px) {
	#visualContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 28px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .txt {font-size: 17px;}
}
@media screen and (max-width: 768px) {
	#sc01 {display: block;}
	
	#visualContent .slide-area {padding-top: 0;}
}
@media screen and (max-width: 600px) {
	#visualContent {margin: 0 -20px}
	#visualContent .slide-container .swiper-slide .item .txt-box .loc {font-size: 14px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .loc::before {width: 24px; height: 24px; font-size: 14px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 24px;}
	#visualContent .slide-container .swiper-slide .item .txt-box .txt {font-size: 15px;}

	#visualContent .slide-controls {gap: 20px;}
	#visualContent .slide-controls .paging {gap: 8px;}
}




/*-------------------------------------------------------------------
	분류이름: 이달의 웰촌
	분류그룹: section > section01
-------------------------------------------------------------------*/
#recommendContent {display: grid; position: relative; padding: 50px 0; grid-template-rows: auto minmax(0, 1fr);}
#recommendContent .hd {display: block;}
#recommendContent .hd .sc-title {display: flex; gap: 10px 20px; align-items: baseline; flex-wrap: wrap;}
#recommendContent .bd {display: block;}
#recommendContent .bd .masonry-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; grid-auto-rows: 5px;}
#recommendContent .bd .masonry-grid .card {display: block; padding-top: 30px;}
#recommendContent .bd .masonry-grid .card .item {display: block;}
#recommendContent .bd .masonry-grid .card .item .img-box {display: block; overflow: hidden; aspect-ratio: 1 / 1.28571;}
#recommendContent .bd .masonry-grid .card .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#recommendContent .bd .masonry-grid .card .item .txt-box {display: block; margin-top: 30px;}
#recommendContent .bd .masonry-grid .card .item .txt-box .tit {display: block; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--color-text-90);}
#recommendContent .bd .masonry-grid .card .item .txt-box .tit::after {content: "\EA70"; display: inline-flex; margin-left: 10px; font-size: 24px; font-family: 'remixicon'; font-weight: normal; font-size: 20px; color: var(--color-text); align-items: center; justify-content: center;}
#recommendContent .bd .masonry-grid .card .item .txt-box .loc {display: block; margin-top: 20px; font-size: 16px; font-weight: 500; line-height: 1; color: var(--color-text);}
#recommendContent .bd .masonry-grid .card:nth-child(2) {padding-top: 130px;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#recommendContent .bd .masonry-grid .card {opacity: 0; transition: opacity 0.3s;}
#recommendContent .bd .masonry-grid .card.finded {opacity: 1;}

#recommendContent .bd .masonry-grid .card .item .img-box > img {transition: transform 0.3s;}
#recommendContent .bd .masonry-grid .card .item:focus-visible .img-box > img,
#recommendContent .bd .masonry-grid .card .item:hover .img-box > img {transform: scale(1.05);}

/* #recommendContent .bd .masonry-grid .card.loaded .item .img-box {aspect-ratio: unset;} */

#recommendContent .bd .masonry-grid .card .item .txt-box .tit {transition: all 0.3s;}
#recommendContent .bd .masonry-grid .card .item:focus-visible .txt-box .tit,
#recommendContent .bd .masonry-grid .card .item:hover .txt-box .tit {color: var(--color-primary);}

#recommendContent .bd .masonry-grid .card .item .txt-box .tit::after {transition: all 0.3s;}
#recommendContent .bd .masonry-grid .card .item:focus-visible .txt-box .tit::after,
#recommendContent .bd .masonry-grid .card .item:hover .txt-box .tit::after {transform: translate(3px, -3px);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#recommendContent .bd .masonry-grid {column-gap: 20px;}
	#recommendContent .bd .masonry-grid .card {padding-top: 20px;}
	#recommendContent .bd .masonry-grid .card:nth-child(2) {padding-top: 80px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box {margin-top: 20px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box .tit::after {margin-left: 5px; font-size: 20px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box .loc {margin-top: 15px;}
}
@media screen and (max-width: 1024px) {
	#recommendContent {padding: 20px 0;}
	#recommendContent .bd .masonry-grid .card .item .txt-box .tit {font-size: 18px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box .tit::after {font-size: inherit;}
}
@media screen and (max-width: 600px) {
	#recommendContent .bd .masonry-grid {column-gap: 10px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box {margin-top: 10px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box .tit {font-size: 16px;}
	#recommendContent .bd .masonry-grid .card .item .txt-box .loc {margin-top: 10px; font-size: 14px;}
}


/*-------------------------------------------------------------------
	분류이름: section02
	분류그룹: section
-------------------------------------------------------------------*/
#sc02 {display: block; border: 1px solid var(--color-border);}
#sc02 .sc-content {display: flex;}
#sc02 .sc-content .l-cnt {display: block; overflow: hidden; border-right: 1px solid var(--color-border); flex-grow: 1;}
#sc02 .sc-content .l-cnt .hd {display: block; position: relative; padding: 50px 290px 62px 50px;}
#sc02 .sc-content .l-cnt .hd::after {content: ""; position: absolute; top: 100px; right: 60px; width: 1em; height: 0.833333em; font-size: 186px; background: url(../images/main/2025/sc02_bg.svg) no-repeat center / contain;}
#sc02 .sc-content .l-cnt .hd .sc-title {display: block;}
#sc02 .sc-content .l-cnt .hd .sc-title .tit {margin-bottom: 20px;}
#sc02 .sc-content .l-cnt .hd .hash-area {display: flex; padding-top: 40px; gap: 12px 20px; align-items: center; flex-wrap: wrap;}
#sc02 .sc-content .l-cnt .hd .hash-area .btn {display: block; font-size: 18px; font-weight: 700; line-height: 1; color: var(--color-text); white-space: nowrap;}
#sc02 .sc-content .l-cnt .hd .hash-area .btn > span {display: block; position: relative; padding-bottom: 8px;}
#sc02 .sc-content .l-cnt .hd .hash-area .btn > span::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--color-text);}

#sc02 .sc-content .l-cnt .bd {display: block; padding: 50px; border-top: 1px solid var(--color-border);}
#sc02 .sc-content .l-cnt .bd .tit {display: block; margin-bottom: 20px; font-size: 30px; font-weight: 700; line-height: 1; color: var(--color-text-90);}
#sc02 .sc-content .l-cnt .bd .search-area {display: flex; gap: 10px;}
#sc02 .sc-content .l-cnt .bd .search-area .col {display: block; position: relative;}
#sc02 .sc-content .l-cnt .bd .search-area .col .f-control {min-width: 200px; width: 100%;}
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search {display: flex; position: absolute; top: 0; right: 0; height: 100%; border-radius: 50%; aspect-ratio: 1 / 1; background-color: transparent; align-items: center; justify-content: center;}
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search::before {content: "\F0D1"; display: block; font-family: 'remixicon'; font-weight: 400; font-size: 24px; line-height: 1; color: var(--color-text-90);}

#sc02 .sc-content .r-cnt {display: block; position: relative; width: 570px; background-color: #F6F8FC; flex-shrink: 0;}
#sc02 .sc-content .r-cnt .map-area {height: 100%;}
#sc02 .sc-content .r-cnt .btn-reset {display: flex; position: absolute; bottom: 0; right: 0; width: 40px; height: 40px; border-radius: 50%; background-color: #000; align-items: center; justify-content: center; margin: 20px;}
#sc02 .sc-content .r-cnt .btn-reset::after {content: "\F542"; display: inline-block; position: relative; font-family: 'remixicon'; font-weight: normal; font-size: 20px; line-height: 1; color: var(--color-text-0);}

#journeyMap {display: flex; width: 100%; height: 100%; align-items: center;}
#journeyMap svg {display: block; margin: auto; filter: drop-shadow(5px 10px 10px rgba(110, 139, 200, 0.20));}
#journeyMap svg .region path {stroke-width: 1px; stroke: #D0D7DE;}
#journeyMap svg .region.active path {fill: #1B9E50; stroke: #1B9E50;}
#journeyMap svg .title path.active {fill: #fff; filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sc02 .sc-content .l-cnt .bd .search-area .col.grow {flex-grow: 1; flex-basis: 0;}
#sc02 .sc-content .l-cnt .bd .search-area .col.grow .f-control {width: 100%;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc02 {opacity: 0; transform: translateY(-30px); transition: all 0.5s;}
#sc02.finded {opacity: 1; transform: translateY(0);}

#sc02 .sc-content .l-cnt .hash-area .btn {transition: all 0.3s;}
#sc02 .sc-content .l-cnt .hash-area .btn:focus-visible,
#sc02 .sc-content .l-cnt .hash-area .btn:hover {color: var(--color-primary);}
#sc02 .sc-content .l-cnt .hash-area .btn > span::before {transform: scaleX(0); transition: all 0.3s;}
#sc02 .sc-content .l-cnt .hash-area .btn:hover > span::before {transform: scaleX(1); background-color: var(--color-primary);}

#sc02 .sc-content .l-cnt .hash-area .btn.active {color: var(--color-text-90);}
#sc02 .sc-content .l-cnt .hash-area .btn.active > span::before {background-color: var(--color-text-90); transform: scaleX(1);}

#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search {transition: all 0.3s;}
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search:focus-visible,
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search:hover {background-color: var(--color-primary);}
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search::before {transition: all 0.3s;}
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search:focus-visible::before,
#sc02 .sc-content .l-cnt .bd .search-area .col .btn-search:hover:before {color: var(--color-text-0);}

#sc02 .sc-content .r-cnt .btn-reset {transition: background 0.3s;}
#sc02 .sc-content .r-cnt .btn-reset:focus-visible,
#sc02 .sc-content .r-cnt .btn-reset:hover {background-color: var(--color-primary); transform: rotate(-360deg); transition: background 0.3s, transform 0.6s;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#sc02 .sc-content .l-cnt .hd {padding: 30px 180px 30px 20px;}
	#sc02 .sc-content .l-cnt .hd::after {right: 20px; font-size: 140px;}
	#sc02 .sc-content .l-cnt .bd {padding: 30px 20px;}
	#sc02 .sc-content .l-cnt .bd .tit {font-size: 26px;}
	#sc02 .sc-content .l-cnt .bd .search-area .col .f-control {min-width: 0;}
	#sc02 .sc-content .r-cnt {width: 42%;}
}
@media screen and (max-width: 1200px) {
	#sc02 .sc-content .l-cnt .hd {padding: 30px 20px;}
	#sc02 .sc-content .l-cnt .hd::after {top: 30px; right: 10px; font-size: 100px;}
	#sc02 .sc-content .l-cnt .hd .sc-title {padding-right: 100px;}
	#sc02 .sc-content .l-cnt .hd .hash-area {gap: 12px 10px;}
}
@media screen and (max-width: 1024px) {
	#sc02 .sc-content .l-cnt .bd .tit {font-size: 24px;}
	#sc02 .sc-content .l-cnt .bd .search-area {flex-wrap: wrap;}
	#sc02 .sc-content .l-cnt .bd .search-area .col {flex-grow: 1;}
	#sc02 .sc-content .l-cnt .bd .search-area .col.grow {flex-basis: 100%;}
}
@media screen and (max-width: 768px) {
	#sc02 .sc-content {flex-direction: column;}
	#sc02 .sc-content .l-cnt {order: 2; border-right: 0; border-top: 1px solid var(--color-border);}
	#sc02 .sc-content .l-cnt .hd .hash-area {display: none;}
	#sc02 .sc-content .r-cnt {order: 1; width: 100%;}
	#sc02 .sc-content .r-cnt .map-area {height: 40dvh;}
}
@media screen and (max-width: 600px) {
	#sc02 {margin-left: -20px; margin-right: -20px; border-left: 0; border-right: 0;}
	#sc02 .sc-content .l-cnt .hd::after {top: 10px; font-size: 60px;}
	#sc02 .sc-content .l-cnt .hd .sc-title {padding-right: 0;}
	#sc02 .sc-content .l-cnt .hd .hash-area .btn {font-size: 17px;}
	#sc02 .sc-content .l-cnt .bd .tit {font-size: 19px;}
}


/*-------------------------------------------------------------------
	분류이름: section03
	분류그룹: section
-------------------------------------------------------------------*/
#sc03 .sc-content {display: flex;}
#sc03 .sc-content .slide-area {display: block; width: 50%; background-color: #F5F7FA;}
#sc03 .sc-content .slide-area .slide-container {display: block; overflow: hidden; height: 100%;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide {display: block;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item {display: block; position: relative; min-height: 400px; height: 100%;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item::after {content: "\EEBF"; display: flex; position: absolute; top: 20px; left: 20px; width: 45px; height: 45px; border-radius: 50%; background-color: #fff; font-family: 'remixicon'; font-weight: normal; font-size: 20px; color: var(--color-primary); align-items: center; justify-content: center;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .img-box {display: block; position: relative; width: 100%; height: 100%; flex-grow: 1;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .img-box::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2);}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box {display: flex; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding: 20px 50px 50px; gap: 30px; text-align: right; flex-direction: column;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc {display: flex; color: #FFF; font-size: 20px; font-weight: 700; line-height: 1; align-items: center; gap: 10px; justify-content: flex-end;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc::before {content: "\EF0A"; display: flex; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(4px); font-family: 'remixicon'; font-weight: normal; font-size: 20px; align-items: center; justify-content: center;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .tit {display: block; margin-top: auto; font-size: 45px; font-weight: 700; line-height: 1.1; color: #FFF;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .txt {display: block; color: #FFF; font-size: 20px; font-weight: 600; line-height: 1.1;}

#sc03 .sc-content .info-area {display: block; position: relative; width: 50%; padding: 50px; border: 1px solid var(--color-border);}
#sc03 .sc-content .info-area .hd {display: block; margin-bottom: 60px;}
#sc03 .sc-content .info-area .bd {display: block;}
#sc03 .sc-content .info-area .bd .list {display: grid; margin-bottom: 70px; grid-template-columns: repeat(3, minmax(0, 1fr));}
#sc03 .sc-content .info-area .bd .list > li {display: block;}
#sc03 .sc-content .info-area .bd .list > li .btn {display: block; position: relative; height: 100%; padding-left: 24px; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--color-text); text-align: left;}
#sc03 .sc-content .info-area .bd .list > li .btn::before {content: ""; display: block; opacity: 0.2; position: absolute; bottom: 0; left: 0; width: 3px; height: 100%; background-color: var(--color-text);}
#sc03 .sc-content .info-area .bd .list > li .btn::after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background-color: var(--color-primary);}
#sc03 .sc-content .info-area .bd .btn-more {display: inline-flex; padding: 9px 20px; border-radius: 5px; align-items: center; background-color: var(--color-text-90); font-weight: 700; font-size: 17px; color: var(--color-text-0);}
#sc03 .sc-content .info-area .bd .btn-more::after {content: "\EA12"; display: block; margin-left: 10px; font-family: 'remixicon'; font-weight: normal; font-size: 24px; line-height: 1; color: var(--color-text-0);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 4) {margin-top: 30px;}
#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 4) .btn::before {height: calc(100% + 30px);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc03 {opacity: 0; transform: translateY(-30px); transition: all 0.5s;}
#sc03.finded {opacity: 1; transform: translateY(0);}

#sc03 .sc-content .info-area .bd .list > li .btn {transition: all 0.3s;}
#sc03 .sc-content .info-area .bd .list > li .btn.active {color: var(--color-text-90);}

#sc03 .sc-content .info-area .bd .list > li .btn::after {opacity: 0; transform: scaleY(0); transition: all 0.3s;}
#sc03 .sc-content .info-area .bd .list > li .btn.active::after {opacity: 1; transform: scaleY(1); background-color: var(--color-text-90);}
@media screen and (min-width: 768px) {
	#sc03 .sc-content .info-area .bd .list > li .btn:focus-visible,
	#sc03 .sc-content .info-area .bd .list > li .btn:hover {color: var(--color-primary);}
	#sc03 .sc-content .info-area .bd .list > li .btn:focus-visible::after,
	#sc03 .sc-content .info-area .bd .list > li .btn:hover::after {opacity: 1; transform: scaleY(1);}
}

#sc03 .sc-content .info-area .bd .btn-more {transition: all 0.3s;}
#sc03 .sc-content .info-area .bd .btn-more:focus-visible,
#sc03 .sc-content .info-area .bd .btn-more:hover {background-color: var(--color-primary);}
#sc03 .sc-content .info-area .bd .btn-more:focus-visible::after,
#sc03 .sc-content .info-area .bd .btn-more:hover::after {transform: rotate(180deg); transition: all 0.3s;}

#sc03 .sc-content .slide-area .slide-container .swiper-slide .item::after {opacity: 0; transition: all 0.3s;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item:focus-visible::after,
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item:hover::after {opacity: 1; animation: jello-horizontal 0.6s both;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .img-box > img {transition: all 0.3s;}
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item:focus-visible .img-box > img,
#sc03 .sc-content .slide-area .slide-container .swiper-slide .item:hover .img-box > img {transform: scale(1.05);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box {padding: 20px 20px 30px; gap: 20px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc {font-size: 18px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc::before {width: 30px; height: 30px; font-size: 18px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .tit {font-size: 36px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .txt {font-size: 18px;}

	#sc03 .sc-content .info-area {padding: 30px;}
	#sc03 .sc-content .info-area .bd .list > li .btn {padding-left: 16px; font-size: 21px;}
}
@media screen and (max-width: 1200px) {
	#sc03 .sc-content .info-area .hd {margin-bottom: 40px;}
	#sc03 .sc-content .info-area .bd .list {margin-bottom: 40px;}
	#sc03 .sc-content .info-area .bd .list > li .btn {font-size: 17px;}

	#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 4) {margin-top: 20px;}
	#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 4) .btn::before {height: calc(100% + 20px);}
	
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item {min-height: 320px;}
}
@media screen and (max-width: 1024px) {
	#sc03 .sc-content {display: block;}
	#sc03 .sc-content .slide-area {width: 100%;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item {min-height: 0;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .img-box {aspect-ratio: 1 / 0.5333; max-height: 400px; min-height: 200px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc {font-size: 17px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .tit {font-size: 28px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .txt {font-size: 17px;}
	
	#sc03 .sc-content .info-area {width: 100%; padding: 30px 20px;}
	#sc03 .sc-content .info-area .hd {margin-bottom: 30px;}
	#sc03 .sc-content .info-area .hd .sc-title .tit {display: flex; min-height: 40px; align-items: center;}
	#sc03 .sc-content .info-area .bd {text-align: right;}
	#sc03 .sc-content .info-area .bd .list {margin-bottom: 0;}
	#sc03 .sc-content .info-area .bd .list > li .btn {font-size: 19px;}
	#sc03 .sc-content .info-area .bd .btn-more {position: absolute; top: 30px; right: 20px; padding: 8px 10px; font-size: 14px;}
	
}
@media screen and (max-width: 600px) {
	#sc03 {margin-left: -20px; margin-right: -20px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc {font-size: 14px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .loc::before {width: 24px; height: 24px; font-size: 14px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .tit {font-size: 24px;}
	#sc03 .sc-content .slide-area .slide-container .swiper-slide .item .txt-box .txt {font-size: 15px;}
	
	#sc03 .sc-content .info-area {padding: 20px; border-left: 0; border-right: 0;}
	#sc03 .sc-content .info-area .hd {margin-bottom: 20px;}
	#sc03 .sc-content .info-area .hd .sc-title .tit {min-height: 28px;}
	#sc03 .sc-content .info-area .bd .list {grid-template-columns: repeat(2, minmax(0, 1fr));}
	#sc03 .sc-content .info-area .bd .list > li .btn {padding-left: 10px; font-size: 16px;}
	#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 4) {margin-top: 0;}
	#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 4) .btn::before {height: 100%;}
	#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 3) {margin-top: 20px;}
	#sc03 .sc-content .info-area .bd .list > li:nth-child(n + 3) .btn::before {height: calc(100% + 20px);}

	#sc03 .sc-content .info-area .bd .btn-more {top: 20px; height: 28px; padding: 5px 8px; font-size: 13px; letter-spacing: -0.03em;}
	#sc03 .sc-content .info-area .bd .btn-more::after {font-size: 16px; margin-left: 5px;}
}


/*-------------------------------------------------------------------
	분류이름: section04
	분류그룹: section
-------------------------------------------------------------------*/
/* 공지사항 */
#noticeContent .notice-list {display: grid; height: 100%; border: 1px solid var(--color-border); grid-template-rows: repeat(5, minmax(0, 1fr));}
#noticeContent .notice-list > li {display: block; overflow: hidden;}
#noticeContent .notice-list .item {display: flex; position: relative; height: 100%; padding: 10px 30px; align-items: center; gap: 20px;}
#noticeContent .notice-list .item::before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: var(--color-border);}
#noticeContent .notice-list .item .cate {display: flex; height: 26px; padding: 0 10px; background-color: var(--color-text-90); font-size: 14px; font-weight: 600; color: var(--color-text-0); flex-shrink: 0; align-items: center; justify-content: center;}
#noticeContent .notice-list .item .title {display: flex; overflow: hidden; align-items: center;  flex-grow: 1; flex-basis: 0; gap: 10px;}
#noticeContent .notice-list .item .title .tit {display: block; overflow: hidden; position: relative; max-height: 2.4em; font-weight: 400; font-size: 16px; line-height: 1.2; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#noticeContent .notice-list .item .title .attach {display: flex; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); font-size: 18px; align-items: center; justify-content: center; flex-shrink: 0;}
#noticeContent .notice-list .item .title .attach::before {content: "\EEB8"; display: block; font-family: 'remixicon'; font-size: inherit; font-weight: normal; line-height: 1; color: var(--color-text-0);}
#noticeContent .notice-list .item .date {display: block; font-size: 16px; color: var(--color-text); flex-shrink: 0;}

/* 팝업존 */
#popContent {overflow: hidden; position: relative;}
#popContent .slide-container {display: block; overflow: hidden; border: 1px solid var(--color-border);}
#popContent .slide-container .swiper-slide {display: block;}
#popContent .slide-container .swiper-slide .item {display: block; position: relative;}
#popContent .slide-container .swiper-slide .item .img-box {display: block; overflow: hidden; position: relative; width: 100%; aspect-ratio: 1 / 0.47945;}
#popContent .slide-container .swiper-slide .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#popContent .slide-container .swiper-slide .item .txt-box {display: block; width: 100%; padding: 24px 210px 24px 30px;}
#popContent .slide-container .swiper-slide .item .txt-box .tit {display: block; overflow: hidden; height: 2.4em; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--color-text-90); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* #popContent .slide-container .swiper-slide .item .txt-box .txt {display: block; overflow: hidden; height: 2.8em; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--color-text); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} */

#popContent .slide-controls {display: flex; position: absolute; bottom: 30px; right: 30px; z-index: 1; align-items: center; gap: 15px;}
#popContent .slide-controls .btn-ctrl {display: flex; width: 50px; height: 50px; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--color-text-90); align-items: center; justify-content: center; box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.1);}
#popContent .slide-controls .btn-ctrl::before {display: block; font-family: 'remixicon'; font-size: 24px; font-weight: 400; line-height: 1;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#noticeContent .notice-list > li:first-child .item::before {display: none;}

#popContent .slide-controls .btn-ctrl.prev::before {content: '\EA64';}
#popContent .slide-controls .btn-ctrl.next::before {content: '\EA6E';}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
/* 공지사항 */
#noticeContent {opacity: 0; transform: translateY(-30px); transition: all 0.5s;}
#noticeContent.finded {opacity: 1; transform: translateY(0);}

#noticeContent .notice-list .item {transition: all 0.3s;}
#noticeContent .notice-list .item:focus-visible,
#noticeContent .notice-list .item:hover {background-color: var(--color-text-bg);}

/* 팝업존 */
#popContent {opacity: 0; transform: translateY(-30px); transition: all 0.5s;}
#popContent.finded {opacity: 1; transform: translateY(0);}
#popContent .slide-container {height: 100%;}
#popContent .slide-container .swiper-slide .item .img-box > img {transition: all 0.3s;}
#popContent .slide-container .swiper-slide .item:focus-visible .img-box > img,
#popContent .slide-container .swiper-slide .item:hover .img-box > img {transform: scale(1.05);}

#popContent .slide-controls .btn-ctrl {transition: all 0.3s;}
#popContent .slide-controls .btn-ctrl:focus-visible,
#popContent .slide-controls .btn-ctrl:hover {border-color: var(--color-primary); color: var(--color-primary);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#noticeContent .notice-list .item {padding: 10px 20px; gap: 10px;}
	#noticeContent .notice-list .item .title .attach {width: 28px; height: 28px; font-size: 16px;}
	#noticeContent .notice-list .item .date {font-size: 14px;}

	#popContent .slide-container .swiper-slide .item .txt-box {padding: 20px 130px 20px 20px;}
	#popContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 18px;}
	#popContent .slide-controls {right: 20px; bottom: 20px; gap: 10px;}
	#popContent .slide-controls .btn-ctrl {width: 40px; height: 40px;}
}
@media screen and (max-width: 1024px) {
	#noticeContent .notice-list .item {padding: 30px 20px;}
	#noticeContent .notice-list .item .cate {padding: 0 8px; font-size: 13px;}

	#popContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 16px;}
}
@media screen and (max-width: 600px) {
	#noticeContent .notice-list .item {padding: 20px; gap: 10px 20px; flex-wrap: wrap; justify-content: space-between;}
	#noticeContent .notice-list .item .cate {order: 1;}
	#noticeContent .notice-list .item .title {flex-basis: 100%; order: 3;}
	#noticeContent .notice-list .item .title .tit {font-size: 15px;}
	#noticeContent .notice-list .item .title .attach {width: 24px; height: 24px; font-size: 14px;}
	#noticeContent .notice-list .item .date {order: 2;}
	
	#popContent {margin-left: -20px; margin-right: -20px;}
	#popContent .slide-container {border-width: 0 0 1px 0;}
	#popContent .slide-container .swiper-slide .item .img-box {min-height: 200px;}
	#popContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 17px;}
	/* #popContent .slide-container .swiper-slide .item .txt-box .txt {font-size: 14px;} */
}


/*-------------------------------------------------------------------
	분류이름: section05
	분류그룹: section
-------------------------------------------------------------------*/
#sc05 .sc-content .hd .utils .f-control {min-width: 180px;}

/*-------------------------------------------------------------------
@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#sc05 .sc-content .hd .utils .f-control {min-width: 120px;}
}
@media screen and (max-width: 600px) {
	#sc05 .sc-content .hd .utils .f-control {min-width: 0;}
}


/*-------------------------------------------------------------------
	분류이름: section06
	분류그룹: section
-------------------------------------------------------------------*/
#videoContent .bd {overflow: hidden; position: relative; padding: 30px; border: 1px solid var(--color-border);}
#videoContent .slide-container {display: block; overflow: hidden; height: 100%;}
#videoContent .slide-container .swiper-slide {display: block;}
#videoContent .slide-container .swiper-slide .item {display: block; position: relative; height: 100%;}
#videoContent .slide-container .swiper-slide .item .img-box {display: block; overflow: hidden; position: relative; width: 100%; aspect-ratio: 1 / 0.51169;}
#videoContent .slide-container .swiper-slide .item .img-box > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}
#videoContent .slide-container .swiper-slide .item .txt-box {display: block; width: 100%; padding-top: 20px;}
#videoContent .slide-container .swiper-slide .item .txt-box .tit {display: block; overflow: hidden; max-height: 2.8em; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--color-text-90); text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

#videoContent .slide-controls {position: absolute; top: 30px; left: 30px; z-index: 1; width: calc(100% - 60px); margin-top: calc(100% * 0.255845);}
#videoContent .slide-controls .btn-ctrl {display: flex; position: absolute; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.30); color: var(--color-text-0); backdrop-filter: blur(10px); transform: translateY(-50%); align-items: center; justify-content: center;}
#videoContent .slide-controls .btn-ctrl::before {display: block; font-family: 'remixicon'; font-size: 24px; font-weight: 400; line-height: 1;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#videoContent .slide-controls .btn-ctrl.prev {left: 20px;}
#videoContent .slide-controls .btn-ctrl.prev::before {content: '\EA64';}
#videoContent .slide-controls .btn-ctrl.next {right: 20px;}
#videoContent .slide-controls .btn-ctrl.next::before {content: '\EA6E';}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#videoContent .slide-container .swiper-slide .item .img-box > img {transition: all 0.3s;}
#videoContent .slide-container .swiper-slide .item:focus-visible .img-box > img,
#videoContent .slide-container .swiper-slide .item:hover .img-box > img {transform: scale(1.05);}

#videoContent .slide-container .swiper-slide .item .txt-box .tit {transition: all 0.3s;}
#videoContent .slide-container .swiper-slide .item:focus-visible .txt-box .tit,
#videoContent .slide-container .swiper-slide .item:hover .txt-box .tit {color: var(--color-primary);}

#videoContent .slide-controls .btn-ctrl {transition: all 0.3s;}
#videoContent .slide-controls .btn-ctrl:focus-visible,
#videoContent .slide-controls .btn-ctrl:hover {background: rgba(255, 255, 255, 0.70); color: var(--color-primary);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1500px) {
	#videoContent .bd {padding: 20px;}
	#videoContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 18px;}
}
@media screen and (max-width: 1024px) {
	#videoContent .slide-controls {top: 20px; left: 20px; width: calc(100% - 40px); margin-top: calc(100% * (0.255845 / 2));}
	#videoContent .slide-controls .btn-ctrl {width: 40px; height: 40px;}
}
@media screen and (max-width: 768px) {
	#videoContent .slide-controls {margin-top: calc(100% * 0.255845);}
}
@media screen and (max-width: 600px) {
	#videoContent .bd {margin-left: -20px; margin-right: -20px; padding: 0; border: 0;}
	#videoContent .slide-container .swiper-slide .item .img-box {min-height: 200px;}
	#videoContent .slide-container .swiper-slide .item .txt-box {padding: 20px;}
	#videoContent .slide-container .swiper-slide .item .txt-box .tit {font-size: 17px;}
	#videoContent .slide-controls {top: 0; left: 0; width: 100%; margin-top: 100px;}
}




/*-------------------------------------------------------------------
	분류이름: section07 (공지시항 모바일)
	분류그룹: section
-------------------------------------------------------------------*/
#sc07 {display: none;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#sc07 {display: grid;}
}



/*-------------------------------------------------------------------
	분류이름: Modal
	분류그룹: Overlay
-------------------------------------------------------------------*/
[data-modal] {visibility: hidden; position: fixed;}
[data-modal-open],
[data-modal-close] {cursor: pointer;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
[data-modal] {transition: visibility 0s 0.4s;}
[data-modal].active {visibility: visible; transition: visibility 0s 0s;}

/*-------------------------------------------------------------------
	분류이름: 모달 기본 스타일
	분류그룹: Overlay > Modal
-------------------------------------------------------------------*/
.popup-modal {display: flex; overflow-x: auto; overflow-y: hidden; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; padding: 20px; flex-direction: column;}
.popup-modal::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0);}
.popup-modal .modal-con {display: flex; overflow: hidden; position: relative; max-width: 850px; width: 100%; max-height: 100%; margin: auto; border-radius: 12px; flex-direction: column;}
.popup-modal .modal-con .con-head {display:flex; overflow: hidden; padding-bottom: 60px; align-items: center; justify-content: center; flex-shrink: 0;}
.popup-modal .modal-con .con-head .logo {display: block; width: 1em; padding-top: 0.416666em; font-size: 120px; background: url(../images/common/logo_white.svg) no-repeat center / 1em;}
.popup-modal .modal-con .con-head > .tit {display: block; font-weight: 700; font-size: 24px; color: inherit;}
.popup-modal .modal-con .con-body {display: block; overflow: hidden; position: relative; padding: 0 80px; background-color: transparent; flex-grow: 1;}
.popup-modal .modal-con .con-body .slide-box {display: block; overflow-x: hidden; overflow-y: scroll; position: relative; max-width: 360px; width: 100%; max-height: 100%; margin: 0 auto; padding: 8px 0 8px 8px; border-radius: 8px; background-color: #fff;}
.popup-modal .modal-con .con-body .slide-container {display: block; overflow: hidden; border-radius: 10px;}
.popup-modal .modal-con .con-body .slide-container .swiper-slide .item {display: block; overflow: hidden;}
.popup-modal .modal-con .con-body .slide-container .swiper-slide .item img {display: block;}
.popup-modal .modal-con .con-body .slide-controls {display: flex; position: absolute; top: 50%; left: 50%; right: 0; max-width: 540px; width: 100%; gap: 10px; transform: translateX(-50%);}
.popup-modal .modal-con .con-body .slide-controls .btn-ctrl {display: flex; position: absolute; top: 0; width: 50px; height: 50px; border-radius: 999px; background-color: #fff; align-items: center; justify-content: center; box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.10);}
.popup-modal .modal-con .con-body .slide-controls .btn-ctrl::before {content: ""; display: flex; font-family: 'remixicon'; font-weight: normal; font-size: 24px; color: #000;}
.popup-modal .modal-con .con-foot {display: flex; padding-top: 80px; gap: 10px; flex-shrink: 0; justify-content: center; align-items: center; flex-wrap: wrap;}
.popup-modal .modal-con .con-foot .count {display: flex; height: 42px; padding: 0 28px; border-radius: 999px; background-color: #fff; font-weight: 600; font-size: 16px; color: var(--color-text-90); gap: 0.3em; align-items: center;}
.popup-modal .modal-con .con-foot .count .num {color: var(--color-primary);}
.popup-modal .modal-con .con-foot .btn-ctrl-modal {display: flex; height: 42px; padding: 0 28px; border-radius: 999px; background-color: var(--color-primary); font-weight: 600; font-size: 16px; color: #fff; align-items: center;}
.popup-modal .modal-con .con-foot .btn-ctrl-modal::after {content: "\EB96"; display: block; margin-left: 10px; font-family: 'remixicon'; font-weight: normal; font-size: 18px; border-radius: 999px;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.popup-modal::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2);}

.popup-modal .modal-con .con-body .slide-controls .btn-ctrl.prev {left: 0;}
.popup-modal .modal-con .con-body .slide-controls .btn-ctrl.prev::before {content: "\EA60";}
.popup-modal .modal-con .con-body .slide-controls .btn-ctrl.next {right: 0;}
.popup-modal .modal-con .con-body .slide-controls .btn-ctrl.next::before {content: "\EA6C";}

@media (hover: hover) and (pointer: fine) {
	.popup-modal .modal-con .con-body .slide-box::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;}
	.popup-modal .modal-con .con-body .slide-box::-webkit-scrollbar-thumb {border-radius: 8px; background: #8E8E8E;}
	.popup-modal .modal-con .con-body .slide-box::-webkit-scrollbar-track {padding: 0 8px; border-radius: 10px; background: #fff;}
}


/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.popup-modal::before {background-color: rgba(0,0,0,0); transition: background 0.4s;}
.popup-modal.active::before {background-color: rgba(0,0,0,0.9);}
.popup-modal .modal-con {opacity: 0; transition: opacity 0.4s;}
.popup-modal.active .modal-con {opacity: 1;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.popup-modal .modal-con .con-head {padding-bottom: 40px;}
	.popup-modal .modal-con .con-body {padding: 0 60px;}
	.popup-modal .modal-con .con-body .cnt-control {max-width: 480px;}
	.popup-modal .modal-con .con-foot {padding-top: 40px;}
	.popup-modal .modal-con .con-foot .count {padding: 0 15px; font-size: 15px;}
	.popup-modal .modal-con .con-foot .btn-ctrl-modal {padding: 0 15px; font-size: 15px;}
}
@media screen and (max-width: 768px) {
	.popup-modal .modal-con .con-head {padding-bottom: 20px;}
	.popup-modal .modal-con .con-foot {padding-top: 20px;}
}