@charset "UTF-8";

/*-------------------------------------------------------------------
    @font-face
-------------------------------------------------------------------*/
@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('../font/TTTtangsbudaejjigaeL.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('../font/TTTtangsbudaejjigaeM.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'TtangsBudaeJjigae';
    src: url('../font/TTTtangsbudaejjigaeB.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

:root {
    --fm-budae : 'TtangsBudaeJjigae', 'Pretendard', 'Noto Sans KR', sans-serif;
}
.fm-budae {font-family: 'TtangsBudaeJjigae', 'Pretendard', 'Noto Sans KR', sans-serif;}

* {box-sizing: border-box;}
/* ------ form ------ */
input, textarea, select, button {border: 0; font-family: inherit;}
input[type=text], input[type=tel], input[type=password], input[type=file], input[type=number], input[type=email], input[type=date], input[type=search], select,
textarea {vertical-align:middle; -webkit-box-shadow: none; box-shadow: none; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {-webkit-box-shadow: 0 0 0 30px #ffffff inset !important; -webkit-text-fill-color: inherit; transition: background-color 5000s ease-in-out 0s;} /* 자동완성 */
input[type="text"]::-ms-clear {display: none;}
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {margin: 0; appearance: none; -webkit-appearance: none;}
button, input[type="button"], input[type="submit"] {cursor: pointer;}
/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {display: none;}


/*-------------------------------------------------------------------
	분류이름: visual
	분류그룹: 메인
-------------------------------------------------------------------*/
#main {position:relative; padding-top: 100px;}
#main .sc-inner {max-width: 1540px; margin: 0 auto; padding: 0 20px;}
section {position: relative;}

.sc-title h2 {padding-top: 0.2em; font-weight: 500; font-size: 35px; line-height: 1; font-family: var(--fm-budae);}
.sc-title .txt {display: block; font-size: 18px; font-weight: 500; color: #7E8790;}

.cnt-control {display: flex; gap: 10px;}
.cnt-control .btn-ctrl {display: flex; width: 50px; height: 50px; border-radius: 999px; background-color: #fff; background-repeat: no-repeat; background-position: center; box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.10);}
.btn-cnt-more {display: flex; width: 50px; height: 50px; border-radius: 999px; background: var(--color-primary-40) url(../images/main/more.svg) no-repeat center; box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.10);}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.cnt-control .btn-ctrl.prev {background-image: url(../images/main/arr_left.svg);}
.cnt-control .btn-ctrl.next {background-image: url(../images/main/arr_right.svg);}
.cnt-control .btn-ctrl.pause {background-image: url(../images/main/pause.svg);}
.cnt-control .btn-ctrl.play {background-color: var(--color-primary-40); background-image: url(../images/main/play.svg);}
.cnt-control .btn-ctrl.v3 {background-color: rgba(255, 255, 255, 0.3);}
.cnt-control .btn-ctrl.v3.prev {background-image: url(../images/main/arr_left_white.svg);}
.cnt-control .btn-ctrl.v3.next {background-image: url(../images/main/arr_right_white.svg);}
.cnt-control .btn-ctrl.v3.pause {background-image: url(../images/main/pause_white.svg);}

.btn-cnt-more.v2 {background-color: #6341CF;}

/* 슬라이드 플레이 불가능 상태 */
.cnt-control .btn-ctrl.swiper-button-lock + .btn-ctrl.pause {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.cnt-control .btn-ctrl {transition: all 0.3s;}
.cnt-control .btn-ctrl:focus-visible,
.cnt-control .btn-ctrl:hover {background-color: #0d3078;}
.cnt-control .btn-ctrl.v2:focus-visible,
.cnt-control .btn-ctrl.v2:hover {background-color: var(--color-secondary-70);}
.cnt-control .btn-ctrl.v2.play {background-color: #6341CF;}
.cnt-control .btn-ctrl.v3:focus-visible,
.cnt-control .btn-ctrl.v3:hover {background-color: #ffffff;}

.cnt-control .btn-ctrl.prev:focus-visible,
.cnt-control .btn-ctrl.prev:hover {background-image: url(../images/main/arr_left_white.svg);}
.cnt-control .btn-ctrl.next:focus-visible,
.cnt-control .btn-ctrl.next:hover {background-image: url(../images/main/arr_right_white.svg);}
.cnt-control .btn-ctrl.pause:focus-visible,
.cnt-control .btn-ctrl.pause:hover {background-image: url(../images/main/pause_white.svg);}
.cnt-control .btn-ctrl.v3.prev:focus-visible,
.cnt-control .btn-ctrl.v3.prev:hover {background-image: url(../images/main/arr_left.svg);}
.cnt-control .btn-ctrl.v3.next:focus-visible,
.cnt-control .btn-ctrl.v3.next:hover {background-image: url(../images/main/arr_right.svg);}
.cnt-control .btn-ctrl.v3.pause:focus-visible,
.cnt-control .btn-ctrl.v3.pause:hover {background-image: url(../images/main/pause.svg);}

.cnt-control .btn-ctrl.pause.play:focus-visible,
.cnt-control .btn-ctrl.pause.play:hover {background-image: url(../images/main/play.svg);}

.btn-cnt-more {transition: all 0.3s;}
.btn-cnt-more:focus-visible,
.btn-cnt-more:hover {background-color: #0d3078;}
.btn-cnt-more.v2:focus-visible,
.btn-cnt-more.v2:hover {background-color: var(--color-secondary-70);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#main {padding-top: 80px;}
	.sc-title h2 {font-size: 30px;}
	.sc-title .txt {font-size: 16px;}
}
@media screen and (max-width: 768px) {
	#main {padding-top: 68px;}
	.cnt-control .btn-ctrl {width: 40px; height: 40px;}
	.btn-cnt-more {width: 40px; height: 40px;}
}
@media screen and (max-width: 600px) {
	.sc-title h2 {font-size: 24px;}
	.sc-title .txt {font-size: 14px;}
}



/*-------------------------------------------------------------------
	분류이름: 비주얼영역
	분류그룹: section
-------------------------------------------------------------------*/
#sc01 {padding-top: 70px; padding-bottom: 90px; background: #F5F8FD url(../images/main/bg_sc01.jpg) no-repeat center bottom / cover;}
#sc01 .sc-inner {max-width: 1180px;}
#sc01 .sc-hd {display: block; margin-bottom: 40px; text-align: center;}
#sc01 .sc-hd .tit {display: block; margin-bottom: 10px; padding-top: 0.2em; font-weight: 300; font-size: 40px; line-height: 1; font-family: var(--fm-budae);}
#sc01 .sc-hd .tit em {font-weight: 700;}
#sc01 .sc-hd .txt {display: block; font-weight: 600; font-size: 20px; color: #7E8790;}
#sc01 .sc-hd .txt em {color: var(--color-primary-40);}

#sc01 .sc-bd {display: block; position: relative; padding: 10px; border-radius: 30px; background-color: #fff; box-shadow: 0 20px 40px 0 rgba(66, 78, 189, 0.10);}
#sc01 .sc-bd .control {display: flex; position: absolute; top: -30px; left: 50%; z-index: 2; min-width: 300px; height: 60px; padding: 13px 20px; border-radius: 999px; background-color: #fff; gap: 10px; transform: translateX(-50%); align-items: center; justify-content: center;}
#sc01 .sc-bd .control .fraction {display: flex; position: relative; width: 100px; margin-right: 10px; align-items: center; justify-content: space-between;}
#sc01 .sc-bd .control .fraction::before {content: ""; position: absolute; top: calc(50% - 0.5px); left: 0; width: 100%; height: 1px; background-color: #000;}
#sc01 .sc-bd .control .fraction span {display: block; position: relative; min-width: calc(1.4em + 10px); font-weight: 700; font-size: 16px; line-height: 1; color: #000; background-color: #fff;}
#sc01 .sc-bd .control .fraction span.current {padding-right: 10px;}
#sc01 .sc-bd .control .fraction span.total {padding-left: 10px;}
#sc01 .sc-bd .control .btn-autoplay {display: block; width: 18px; height: 18px; background: url(../images/main/sc01_pause.svg) no-repeat center;}
#sc01 .sc-bd .control .btn-popup {display: flex; width: 34px; height: 34px; border-radius: 999px; background: var(--color-primary-40) url(../images/main/sc01_more.svg) no-repeat center;}
#sc01 .sc-bd .slide-container {display: block; overflow: hidden; border-radius: 20px;}
#sc01 .sc-bd .slide-container .swiper-slide {display: block;}
#sc01 .sc-bd .slide-container .swiper-slide .item {display: block; position: relative;}
#sc01 .sc-bd .slide-container .swiper-slide .item::before {content:""; display: block; padding-top: 45%;}
#sc01 .sc-bd .slide-container .swiper-slide img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

#sc01 .sc-ft {display: flex; margin-top: 40px; align-items: center;}
#sc01 .sc-ft .tit {display: block; position: relative; margin-right: 60px; padding-right: 34px; font-weight: 700; font-size: 20px; font-family: var(--fm-budae); white-space: nowrap; flex-shrink: 0;}
#sc01 .sc-ft .tit::after {content:""; position: absolute; top: calc(50% - 12px); right: 0; width: 24px; height: 24px; background: url(../images/main/sc01_arr.svg) no-repeat center;}
#sc01 .sc-ft .tit em {margin: 0 10px; font-size: 30px; color: var(--color-primary-40);}
#sc01 .sc-ft .list {display: flex; padding: 0 40px; gap: 80px; justify-content: space-between;}
#sc01 .sc-ft .list .link {display: flex; font-weight: 700; font-size: 16px; color: #000; line-height: 1; align-items: center;}
#sc01 .sc-ft .list .link::before {content:""; display: flex; width: 86px; height: 86px; margin-right: 20px; border: 1px solid #E1E4EB; border-radius: 30px; background-color: rgba(255, 255, 255, 0.50); background-repeat: no-repeat; background-position: center; box-shadow: 5px 10px 10px 0 rgba(35, 36, 61, 0.10); backdrop-filter: blur(5px); justify-content: center; align-items: center; flex-shrink: 0;}

#sc01 .floating-popup {display: block; position: absolute; bottom: 50px; right: 50px; z-index: 10; background-color: transparent;}
#sc01 .floating-popup em {display: block; font-weight: 700; font-size: 16px; color: #000; text-align: center;}
#sc01 .floating-popup em::before {content:""; display: block; width: 50px; height: 50px; margin-bottom: 5px; background: var(--color-primary-40) url(../images/main/popup.svg) no-repeat center; border-radius: 50%;}
#sc01 .floating-popup .count {display: flex; position: absolute; top: 0; right: 0; min-width: 1.2em; height: 1.2em; border-radius: 999px; background-color: var(--color-point); line-height: 1; font-size: 14px; color: #fff; align-items: center; justify-content: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sc01 .sc-bd .control .btn-autoplay.play {background-image: url(../images/main/play_black.svg);}

#sc01 .sc-ft .list .link.link1::before {background-image: url(../images/main/sc01_ico_01.png)}
#sc01 .sc-ft .list .link.link2::before {background-image: url(../images/main/sc01_ico_02.png)}
#sc01 .sc-ft .list .link.link3::before {background-image: url(../images/main/sc01_ico_03.png)}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc01 .sc-ft .list .link,
#sc01 .sc-ft .list .link::before {transition: all 0.3s;}
#sc01 .sc-ft .list .link:focus-visible,
#sc01 .sc-ft .list .link:hover {color: var(--color-primary-40);}
#sc01 .sc-ft .list .link:focus-visible::before,
#sc01 .sc-ft .list .link:hover::before {border-color: var(--color-primary-40);}

#sc01 .floating-popup:focus-visible em::before,
#sc01 .floating-popup:hover em::before {animation: floating-pop 0.9s both;}
@keyframes floating-pop {
  0% {transform: scale3d(1, 1, 1);}
  30% {transform: scale3d(1.25, 0.75, 1);}
  40% {transform: scale3d(0.75, 1.25, 1);}
  50% {transform: scale3d(1.15, 0.85, 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: 1540px) {
	#sc01 .sc-hd .tit {font-size: 30px;}
	#sc01 .sc-hd .txt {font-size: 17px;}
	#sc01 .sc-ft .tit {margin-right: 0; font-size: 18px;}
	#sc01 .sc-ft .tit em {font-size: 28px;}
	#sc01 .sc-ft .list {margin-left: auto;}
	#sc01 .floating-popup {top: 20px; bottom: auto; right: 20px;}
}
@media screen and (max-width: 1024px) {
	#sc01 .sc-ft .tit {padding-right: 24px; font-size: 17px;}
	#sc01 .sc-ft .tit em {margin: 0 5px; font-size: 26px;}
	#sc01 .sc-ft .list {padding: 0 0 0 20px; gap: 10px; flex-grow: 1;}
	#sc01 .sc-ft .list .link::before {width: 72px; height: 72px; border-radius: 20px;}
}
@media screen and (max-width: 768px) {
	#sc01 {padding: 90px 0 60px;}
	#sc01 .sc-hd {margin-bottom: 20px;}
	#sc01 .sc-bd {padding: 0;}
	#sc01 .sc-bd .control {position: static; height: auto; padding: 5px 20px 10px; transform: translateX(0);}

	#sc01 .sc-ft {display: block;}
	#sc01 .sc-ft .tit {display: inline-block; margin-bottom: 10px;}
	#sc01 .sc-ft .list {padding: 0; gap: 10px; flex-grow: 1;}
	#sc01 .sc-ft .list .link br {display: none;}
}
@media screen and (max-width: 600px) {
	#sc01 .sc-ft .tit {margin-bottom: 10px; font-size: 16px;}
	#sc01 .sc-ft .tit em {margin: 0 5px; font-size: 24px;}
	#sc01 .sc-ft .list .link {display: block; font-size: 15px;}
	#sc01 .sc-ft .list .link::before {margin: 0 auto 10px;}

	#sc01 .floating-popup em {font-size: 14px;}
	#sc01 .floating-popup em::before {width: 40px; height: 40px;}
}


/*-------------------------------------------------------------------
	분류이름: 재능나눔 활동후기
	분류그룹: section
-------------------------------------------------------------------*/
#sc02 {display: block; padding: 100px 0 80px; background-color: #fff;}
#sc02 .sc-hd {display: flex; gap: 20px; align-items: flex-end;}
#sc02 .sc-hd .sc-title {flex-grow: 1;}
#sc02 .sc-hd .sc-title h2 {margin-bottom: 15px;}
#sc02 .sc-hd .cnt-control {flex-shrink: 0;}
#sc02 .sc-bd {display: block;}
#sc02 .sc-bd .slide-container {display: block; overflow: hidden; margin: 0 -20px;}
#sc02 .sc-bd .slide-container .swiper-slide {display: block; padding: 70px 20px 20px;}
#sc02 .sc-bd .slide-container .swiper-slide .item {display: block; border-radius: 20px; box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.05);}
#sc02 .sc-bd .slide-container .swiper-slide .item .img-box {display: block; overflow: hidden; position: relative; border-radius: 20px 20px 0 0;}
#sc02 .sc-bd .slide-container .swiper-slide .item .img-box::before {content:""; display: block; padding-top: 75.2161%;}
#sc02 .sc-bd .slide-container .swiper-slide .item .img-box img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box {display: block; padding: 30px; border-radius: 0 0 20px 20px; background-color: #fff;}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .tit {display: block; overflow: hidden; height: 2.4em; margin-bottom: 20px; font-weight: 700; font-size: 18px; line-height: 1.2; color: #000; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta {display: flex; align-items: center;}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .writer {display: block; overflow: hidden; font-weight: 500; color: var(--color-primary); line-height: 1; white-space: nowrap; text-overflow: ellipsis;}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .date {display: block;  overflow: hidden; position: relative; padding-left: 20px; font-weight: 500; line-height: 1; color: #7E8790; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0;}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .date::before {content: ""; position: absolute; top: calc(50% - 5px); left: 9.5px; width: 1px; height: 10px; background-color: #7E8790;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc02 .sc-bd .slide-container {opacity: 0;}
#sc02.finded .sc-bd .slide-container {animation: sc02 0.5s ease-in-out forwards;}

#sc02 .sc-bd .slide-container .swiper-slide .item {transition: all 0.3s;}
#sc02 .sc-bd .slide-container .swiper-slide .item:focus-visible,
#sc02 .sc-bd .slide-container .swiper-slide .item:hover {transform: translateY(-30px); box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.1);}
#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .tit {transition: all 0.3s;}
#sc02 .sc-bd .slide-container .swiper-slide .item:focus-visible .txt-box .tit,
#sc02 .sc-bd .slide-container .swiper-slide .item:hover .txt-box .tit {color: var(--color-primary-40);}

@keyframes sc02 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc02 .sc-bd .slide-container {margin: 0 -10px;}
	#sc02 .sc-bd .slide-container .swiper-slide {padding: 70px 10px 20px;}
}
@media screen and (max-width: 1024px) {
	#sc02 .sc-bd .slide-container .swiper-slide {padding: 50px 10px 20px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box {padding: 20px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .tit {font-size: 17px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .date {display: block; padding-left: 13px; font-size: 14px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .date::before {left: 6px;}
}
@media screen and (max-width: 768px) {
	#sc02 {padding: 60px 0 20px;}
	#sc02 .sc-hd {display: block;}
	#sc02 .sc-hd .sc-title {margin-bottom: 10px;}
	#sc02 .sc-hd .sc-title h2 {margin-bottom: 10px;}
	#sc02 .sc-hd .cnt-control {justify-content: flex-end;}
	#sc02 .sc-bd .slide-container .swiper-slide {padding: 20px 10px;}
	
	#sc02 .sc-bd .slide-container .swiper-slide .item:focus-visible,
	#sc02 .sc-bd .slide-container .swiper-slide .item:hover {transform: translateY(-10px);}
}
@media screen and (max-width: 600px) {
	#sc02 .sc-bd .slide-container .swiper-slide .item {border-radius: 10px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .img-box {border-radius: 10px 10px 0 0;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .img-box::before {padding-top: 180px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box {padding: 20px 10px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .tit {font-size: 16px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .writer {font-size: 14px;}
	#sc02 .sc-bd .slide-container .swiper-slide .item .txt-box .meta .date {font-size: 13px;}
}


/*-------------------------------------------------------------------
	분류이름: 재능나눔 활동 동영상
	분류그룹: section
-------------------------------------------------------------------*/
#sc03 {display: block; overflow: hidden; position: relative; padding: 100px 0 50px;}
#sc03::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 447px; border-radius: 200px 200px 0 0; background: linear-gradient(90deg, #F1FCFD 0%, #E4E8FB 100%);}
#sc03::after {content: ""; position: absolute; top: 220px; left: 0; width: 100%; height: 300px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 70%);}
#sc03 .sc-inner {position: relative; z-index: 1;}
#sc03 .sc-inner::before {content: "SMILE BANK"; position: absolute; top: -10px; left: 50%; font-size: 200px; font-weight: 900; line-height: 1; text-transform: uppercase; text-align: center; color: rgba(255, 255, 255, 0.50); white-space: nowrap; transform: translateX(-50%);}
#sc03 .sc-hd {position: relative; text-align: center;}
#sc03 .sc-hd h2 {margin-bottom: 15px;}
#sc03 .sc-bd {display: block;}
#sc03 .sc-bd .slide-content {overflow: hidden; position: relative; margin: 0 -20px; padding: 50px 0;}
#sc03 .sc-bd .swiper-slide {display: flex; align-items: center;}
#sc03 .sc-bd .swiper-slide .item {display: block; width: 100%;}
#sc03 .sc-bd .swiper-slide .item .img-box {display: block; overflow: hidden; position: relative; border-radius: 10px;}
#sc03 .sc-bd .swiper-slide .item .img-box::before {content:""; display: block; padding-top: 250px;}
#sc03 .sc-bd .swiper-slide .item .img-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#sc03 .sc-bd .swiper-slide .item .txt-box {display: block; margin-top: 20px; text-align: center;}
#sc03 .sc-bd .swiper-slide .item .txt-box .tit {display: block; overflow: hidden; font-weight: 700; font-size: 18px; line-height: 1; color: #000; white-space: nowrap; text-overflow: ellipsis;}
#sc03 .sc-bd .swiper-slide .item .txt-box .txt {display: block; height: 2.4em; margin-top: 15px; font-size: 16px; font-weight: 500; line-height: 1.2; color: #7E8790; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}


#sc03 .sc-bd .cnt-control {justify-content: center;}
#sc03 .sc-bd .cnt-control .box-wrap {display: flex; position: relative; gap: 10px; padding: 0 60px;}
#sc03 .sc-bd .cnt-control .box-wrap .fraction {display: flex; padding: 0 5px; line-height: 1; font-weight: 900; font-size: 20px; color: #7E8790; align-items: center;}
#sc03 .sc-bd .cnt-control .box-wrap .fraction span {display: block; min-width: 1.5em; text-align: center;}
#sc03 .sc-bd .cnt-control .box-wrap .fraction .current {color: #6341CF;}
#sc03 .sc-bd .cnt-control .box-wrap .btn-cnt-more {position: absolute; top: 0; right: 0;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sc03 .sc-bd .slide-container-1 {display: block; overflow: hidden; position: relative; z-index: 2; width: calc(40% - 40px); margin: 0 auto;}
#sc03 .sc-bd .slide-container-1 {border-radius: 30px; background-color: #fff; box-shadow: 5px 10px 40px 0 rgba(110, 139, 200, 0.30);}
#sc03 .sc-bd .slide-container-1 .swiper-slide {padding: 40px; }
#sc03 .sc-bd .slide-container-1 .swiper-slide .item {padding: 0;}
#sc03 .sc-bd .slide-container-1 .swiper-slide .item .img-box::before {padding-top: 280px;}

#sc03 .sc-bd .slide-container-2 {display: block; position: absolute; top: 0; left: 30%; width: 40%; height: 100%; margin: 0 auto;}
#sc03 .sc-bd .slide-container-2 .swiper-wrapper {align-items: center;}
#sc03 .sc-bd .slide-container-2 .swiper-slide .item {padding: 0 20px;}
#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-next .item {width: 75%; margin-left: 0; margin-right: auto;}
#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-prev .item {width: 75%; margin-left: auto; margin-right: 0;}
#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-active {opacity: 0;}
#sc03 .sc-bd .slide-container-2 .swiper-slide .item .txt-box .txt {display: none;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc03 .sc-hd {opacity: 0;}
#sc03.finded .sc-hd {animation: sc03 0.5s ease-in-out forwards;}
#sc03 .sc-bd {opacity: 0;}
#sc03.finded .sc-bd {animation: sc03 0.5s 0.1s ease-in-out forwards;}

#sc03 .sc-bd .swiper-slide .item .img-box img {transition: all 0.3s;}
#sc03 .sc-bd .swiper-slide .item:focus-visible .img-box img,
#sc03 .sc-bd .swiper-slide .item:hover .img-box img {transform: scale(1.05);}
#sc03 .sc-bd .swiper-slide .item .txt-box .tit {transition: all 0.3s;}
#sc03 .sc-bd .swiper-slide .item:focus-visible .txt-box .tit,
#sc03 .sc-bd .swiper-slide .item:hover .txt-box .tit {color: #6341CF;}

#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-prev .item {animation: sc03Item 0.6s forwards;}
#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-next .item {animation: sc03Item 0.6s forwards;}

@keyframes sc03 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes sc03Item {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1200px) {
	#sc03 .sc-inner::before {font-size: 150px;}

	#sc03 .sc-bd .swiper-slide .item .img-box::before,
	#sc03 .sc-bd .slide-container-1 .swiper-slide .item .img-box::before {padding-top: 56.4516%;}

	#sc03 .sc-bd .slide-container-1 {width: 40%;}
}
@media screen and (max-width: 1024px) {
	#sc03 {padding: 80px 0 50px;}
	#sc03::before {border-radius: 100px 100px 0 0;}
	#sc03 .sc-inner::before {font-size: 120px;}

	#sc03 .sc-hd h2 {margin-bottom: 10px;}
	#sc03 .sc-bd .slide-content {padding: 30px 0;}
	#sc03 .sc-bd .swiper-slide .item .txt-box .tit {font-size: 16px;}
	#sc03 .sc-bd .swiper-slide .item .txt-box .txt {font-size: 14px;}
	
	#sc03 .sc-bd .slide-container-1 {width: 46%; box-shadow: 5px 10px 20px 0 rgba(110, 139, 200, 0.30);}
	#sc03 .sc-bd .slide-container-1 .swiper-slide {padding: 30px 20px;}
	#sc03 .sc-bd .slide-container-1 .swiper-slide .item .txt-box .tit {font-size: 18px;}
	
	#sc03 .sc-bd .slide-container-2 {left: 27%; width: 46%;}
	#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-prev .item,
	#sc03 .sc-bd .slide-container-2 .swiper-slide.swiper-slide-next .item {width: 58.69565217391305%;}
	
}
@media screen and (max-width: 768px) {
	#sc03 {padding: 60px 0;}
	#sc03 .sc-inner {padding: 0;}
	#sc03 .sc-inner::before {font-size: 100px;}
	
	#sc03 .sc-bd .slide-content {margin: 0; padding: 30px 80px;}
	#sc03 .sc-bd .slide-container-1 {width: 100%;}
	#sc03 .sc-bd .slide-container-1 .swiper-slide {padding: 40px;}
	
	#sc03 .sc-bd .slide-container-2 {visibility: hidden; opacity: 0;}
}
@media screen and (max-width: 600px) {
	#sc03::before {border-radius: 60px 60px 0 0;}
	#sc03 .sc-inner::before {font-size: 80px;}
	#sc03 .sc-bd .slide-content {margin: 0; padding: 30px 20px;}
	#sc03 .sc-bd .slide-container-1 .swiper-slide {padding: 30px;}
}





/*-------------------------------------------------------------------
	분류이름: 찾기 퀵메뉴
	분류그룹: section
-------------------------------------------------------------------*/
#sc04 {display: block; padding: 50px 0 136px;}
#sc04 .sc-inner {display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px;}
#sc04 .item {display: block; position: relative; min-height: 250px; padding: 68px 60px 20px; border-radius: 30px; background-repeat: no-repeat; box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);}
#sc04 .item::before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 45%; height: 100%; border-radius: 30px 0 0 30px;}
#sc04 .item .tit {display: block; position: relative; z-index: 1; font-weight: 500; font-size: 26px; color: #fff; line-height: 1; font-family: var(--fm-budae);}
#sc04 .item .txt {display: block; position: relative; z-index: 1; font-weight: 500; font-size: 18px; color: rgba(255, 255, 255, 0.8);}
#sc04 .item .more {display: block; position: absolute; bottom: -36px; left: 60px; width: 72px; height: 72px; padding: 10px;}
#sc04 .item .more::before {content: ""; display: block; opacity: 0.3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #fff;}
#sc04 .item .more::after {content: ""; display: block; position: relative; width: 100%; height: 100%; border-radius: 50%; background-image: url(../images/main/arr2_right_white.svg); background-repeat: no-repeat; background-position: center;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sc04 .item.item-01 {background-color: #0036A7; background-position: bottom -10px right 100px; background-image: url(../images/main/sc04_bg01.png);}
#sc04 .item.item-02 {background-color: var(--color-sub); background-position: bottom -10px right -30px; background-image: url(../images/main/sc04_bg02.png);}

#sc04 .item.item-01 .more::after {background-color: #002B83;}
#sc04 .item.item-02 .more::after {background-color: #1277B1;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc04 {opacity: 0;}
#sc04.finded {animation: sc04 0.5s ease-in-out forwards;}
#sc04 .item:focus-visible .more::before,
#sc04 .item:hover .more::before {animation: sc04ItemBg 1.6s infinite;}
#sc04 .item:focus-visible .more::after,
#sc04 .item:hover .more::after {animation: sc04Item 1.2s ease-in-out both;}

@keyframes sc04 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes sc04Item {
	from {
		transform: scale(1);
		transform-origin: center center;
		animation-timing-function: ease-out;
	}
	10% {
		transform: scale(0.91);
		animation-timing-function: ease-in;
	}
	17% {
		transform: scale(0.98);
		animation-timing-function: ease-out;
	}
	33% {
		transform: scale(0.87);
		animation-timing-function: ease-in;
	}
	45% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}
@keyframes sc04ItemBg {
	0% {opacity: 0.3; transform: scale(1);}
	80% {opacity: 0; transform: scale(1.3);}
	100% {opacity: 0; transform: scale(1);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc04 .sc-inner {gap: 20px;}
	#sc04 .item.item-01 {background-position: bottom -10px right 0;}
	#sc04 .item.item-02 {background-position: bottom -10px right -30px;}
	#sc04 .item.item-01::after {background: linear-gradient(90deg, #0036A7 70%, rgba(0, 54, 167, 0) 100%);}
	#sc04 .item.item-02::after {background: linear-gradient(90deg, var(--color-sub) 70%, rgba(28, 152, 218, 0) 100%);}
}
@media screen and (max-width: 1200px) {
	#sc04 .item {padding: 40px 30px 10px 30px;}
	#sc04 .item.item-01 {background-size: 205.555px;}
	#sc04 .item.item-02 {background-size: 358.4549px;}
	#sc04 .item .more {left: 30px;}
}
@media screen and (max-width: 1024px) {
	#sc04 .item {min-height: 200px;}
	#sc04 .item::after {width: 60%;}
	#sc04 .item .tit {margin-bottom: 5px; font-size: 22px;}
	#sc04 .item .txt {font-size: 16px;}
}
@media screen and (max-width: 768px) {
	#sc04 {padding: 0 0 60px;}
	#sc04 .sc-inner {grid-template-columns: 1fr;}
	#sc04 .item {min-height: 180px;}
	#sc04 .item .more {position: relative; bottom: auto; left: auto; width: 45px; height: 45px; margin-top: 10px; padding: 5px;}
}


/*-------------------------------------------------------------------
	분류이름: 재능뱅크 소식
	분류그룹: section
-------------------------------------------------------------------*/
#sc05 {display: block; padding: 100px 0; background: url(../images/main/bg_sc05.jpg) no-repeat center / cover;}
#sc05 .sc-inner {display: block; position: relative;}
#sc05 .sc-inner::before {content:""; display: block;}
#sc05 .sc-hd {display: flex; position: absolute; top: 0; left: 20px; z-index: 2; width: calc(((100% - 40px) - 60px) / 3); height: calc(50% - 15px); padding: 30px 0 40px; color: #fff; flex-direction: column; justify-content: space-between;}
#sc05 .sc-hd::before {content: ""; position: absolute; top: -20px; left: 78px; width: 1em; height: 1.07365em; font-size: 258px; background: url(../images/main/bg_sc05_02.png) no-repeat center / contain;}
#sc05 .sc-hd .sc-title {position: relative;}
#sc05 .sc-hd .sc-title h2 {margin-bottom: 15px;}
#sc05 .sc-hd .sc-title .txt {color: #fff;}
#sc05 .sc-hd .cnt-control {position: relative; margin-top: auto;}

#sc05 .sc-bd {display: block;}
#sc05 .sc-bd .card-list {display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 30px;}
#sc05 .sc-bd .card-list .card-item {display: none;}
#sc05 .sc-bd .card-list .card-item .item {display: flex; overflow: hidden; position: relative; height: 100%; padding: 50px; border-radius: 20px; background: rgba(0, 0, 0, 0.30); color: #fff; backdrop-filter: blur(10px); flex-direction: column;}
#sc05 .sc-bd .card-list .card-item .item::before {content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 0 0 200px 0; background-color: #6341CF;}
#sc05 .sc-bd .card-list .card-item .item::after {content: ""; position: absolute; bottom: 20px; right: 20px; width: 24px; height: 24px; background: url(../images/main/arr2_right_white.svg) no-repeat center / contain;}
#sc05 .sc-bd .card-list .card-item .item .category {display: block; overflow: hidden; position: relative; margin-bottom: 20px; font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap; text-overflow: ellipsis;}
#sc05 .sc-bd .card-list .card-item .item .tit {display: block; position: relative; height: 2.8em; margin-bottom: 30px; line-height: 1.4; font-weight: 700; font-size: 20px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
#sc05 .sc-bd .card-list .card-item .item .ft {display: block; position: relative; margin-top: auto; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.3);}
#sc05 .sc-bd .card-list .card-item .item .date {display: flex; position: relative; font-weight: 500; font-size: 16px; align-items: center;}
#sc05 .sc-bd .card-list .card-item .item .date::before {content: ""; display: block; width: 30px; height: 30px; margin-right: 10px; border-radius: 50%; background: #6341CF url(../images/main/ico_date.svg) no-repeat center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc05 .sc-hd {opacity: 0;}
#sc05.finded .sc-hd {animation: sc05_01 0.5s ease-in-out forwards;}
#sc05 .sc-bd {opacity: 0;}
#sc05.finded .sc-bd {animation: sc05_02 0.5s 0.1s ease-in-out forwards;}

#sc05 .sc-bd .card-list .card-item .item::before {transform: translate(-100%, -100%); transition: all 0.6s;}
#sc05 .sc-bd .card-list .card-item .item:focus-visible::before,
#sc05 .sc-bd .card-list .card-item .item:hover::before {transform: translate(0, 0);}

#sc05 .sc-bd .card-list .card-item .item::after {opacity: 0; transform: translateX(-10px); transition: all 0.4s;}
#sc05 .sc-bd .card-list .card-item .item:focus-visible::after,
#sc05 .sc-bd .card-list .card-item .item:hover::after {opacity: 1; transform: translateX(0);}

#sc05 .sc-bd .card-list .card-item .item .date::before {transition: all 0.4s;}
#sc05 .sc-bd .card-list .card-item .item:focus-visible .date::before,
#sc05 .sc-bd .card-list .card-item .item:hover .date::before {background-color: #fff; background-image: url(../images/main/ico_date_active.svg);}

#sc05 .sc-bd .card-list .card-item.active {display: block;}
#sc05 .sc-bd .card-list .card-item.active.first {display: flex; grid-column: span 2;}
#sc05 .sc-bd .card-list .card-item.active.first::before {content: ""; display: block; width: calc(50% + 15px); flex-shrink: 0;}
#sc05 .sc-bd .card-list .card-item.active .item {animation: sc05item 0.6s forwards;}

@keyframes sc05_01 {
	0% {opacity: 0; transform: translateX(-50px);}
	100% {opacity: 1; transform: translateX(0);}
}
@keyframes sc05_02 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}
@keyframes sc05item {
	0% {opacity: 0; transform: translateY(20px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc05 .sc-hd {width: calc(((100% - 40px) - 40px) / 3); padding: 30px 0 0;}
	#sc05 .sc-bd .card-list {gap: 20px;}
	#sc05 .sc-bd .card-list .card-item .item {padding: 30px;}
}
@media screen and (max-width: 1024px) {
	#sc05 .sc-hd::before {left: 20px; font-size: 200px;}

	#sc05 .sc-bd .card-list .card-item .item {padding: 30px 20px;}
	#sc05 .sc-bd .card-list .card-item .item .category {margin-bottom: 15px;}
	#sc05 .sc-bd .card-list .card-item .item .tit {margin-bottom: 20px; font-size: 17px;}
	#sc05 .sc-bd .card-list .card-item .item .ft {padding-top: 20px;}
}
@media screen and (max-width: 768px) {
	#sc05 {padding: 60px 0;}
	#sc05 .sc-hd {position: relative; top: auto; left: auto; z-index: auto; width: 100%; margin-bottom: 20px; padding-top: 0;}
	#sc05 .sc-hd .sc-title {margin-bottom: 10px;}
	#sc05 .sc-hd .sc-title h2 {margin-bottom: 10px;}
	#sc05 .sc-hd .cnt-control {justify-content: flex-end;}
	
	#sc05 .sc-bd .card-list {min-height: 0; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr);}
	#sc05 .sc-bd .card-list .card-item.active.first {grid-column: auto;}
	#sc05 .sc-bd .card-list .card-item.active.first::before {display: none;}
	#sc05 .sc-bd .card-list .card-item .item {padding: 20px;}
	#sc05 .sc-bd .card-list .card-item .item .tit {margin-bottom: 15px; font-size: 16px;}
	#sc05 .sc-bd .card-list .card-item .item .ft {padding-top: 15px;}
}
@media screen and (max-width: 600px) {
	#sc05 .sc-hd::before {left: 10px; width: 160px;}
	#sc05 .sc-bd .card-list {grid-template-columns: 1fr;}
}


/*-------------------------------------------------------------------
	분류이름: 홍보활동 영상
	분류그룹: section
-------------------------------------------------------------------*/
#sc06 {display: block; overflow: hidden; padding: 100px 0;}
#sc06::before {content: ""; position: absolute; bottom: 0; left: 0; width: calc(((100% - 1500px) / 2) + (1500px * 0.78)); height: 378px; border-radius: 0 0 200px 0; background: linear-gradient(90deg, #F9EAFA 0%, #E3F8F2 100%);}
#sc06::after {content: ""; position: absolute; bottom: 160px; left: 0; width: 100%; height: 278px; background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, #FFF 50%);}
#sc06 .sc-inner {position: relative; z-index: 1;}
#sc06 .sc-hd {display: flex; position: absolute; top: 0; left: 48.6%; width: 51.4%; height: 100%; padding-left: 80px; flex-direction: column; justify-content: space-between;}
#sc06 .sc-hd .cnt-control {position: relative; z-index: 2; margin-top: auto;}
#sc06 .sc-bd {display: block;}
#sc06 .slide-container {display: block; overflow: hidden;}
#sc06 .slide-container .swiper-slide {display: flex;}
#sc06 .slide-container .swiper-slide .img-box {display: block; overflow: hidden; position: relative; width: 48.6%; border-radius: 30px; flex-shrink: 0;}
#sc06 .slide-container .swiper-slide .img-box::before {content:""; display: block; padding-top: 58.9041%;}
#sc06 .slide-container .swiper-slide .img-box img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#sc06 .slide-container .swiper-slide .info-box {display: block; overflow: hidden; padding: 100px 0 110px 80px; flex-grow: 1;}
#sc06 .slide-container .swiper-slide .info-box .link-box {display: block; color: #000;}
#sc06 .slide-container .swiper-slide .info-box .link-box .tit {display: block; overflow: hidden; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #D0DAE4; font-weight: 700; font-size: 26px; white-space: nowrap; text-overflow: ellipsis;}
#sc06 .slide-container .swiper-slide .info-box .link-box .txt {display: block; max-height: 2.8em; font-weight: 500; font-size: 18px; color: #7E8790; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc06 .sc-inner {opacity: 0;}
#sc06.finded .sc-inner {animation: sc06 0.5s ease-in-out forwards;}

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

#sc06 .slide-container .swiper-slide .img-box:focus-visible ~ .info-box .link-box,
#sc06 .slide-container .swiper-slide .img-box:hover ~ .info-box .link-box {color: var(--color-primary-40);}

#sc06 .slide-container .swiper-slide .info-box .link-box .tit {transition: all 0.3s;}
#sc06 .slide-container .swiper-slide .info-box .link-box:focus-visible .tit,
#sc06 .slide-container .swiper-slide .info-box .link-box:hover .tit {color: var(--color-primary-40);}

@keyframes sc06 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc06::before {width: calc(78% + 20px);}
	#sc06 .sc-hd {padding-left: 40px;}
	#sc06 .slide-container .swiper-slide .info-box {padding: 70px 0 70px 40px;}
	#sc06 .slide-container .swiper-slide .info-box .link-box .tit {margin-bottom: 20px; padding-bottom: 20px;}
}
@media screen and (max-width: 1024px) {
	#sc06 {padding: 100px 0 60px;}
	#sc06 .sc-hd {position: static; width: 100%; margin-bottom: 20px; padding-left: 0;}
	#sc06 .sc-hd .sc-title {position: relative; z-index: 2;}
	#sc06 .sc-hd .cnt-control {position: absolute; bottom: 0; left: 48.6%; padding-left: 20px;}
	#sc06 .slide-container .swiper-slide .info-box {padding: 0 0 70px 20px;}
	#sc06 .slide-container .swiper-slide .info-box .link-box .tit {margin-bottom: 15px; padding-bottom: 15px; font-size: 22px;}
}
@media screen and (max-width: 768px) {
	#sc06 {padding: 60px 0 0;}
	#sc06::before {width: calc(85% + 20px); border-radius: 0 0 140px 0;}
	#sc06::after {bottom: 105px;}
	#sc06 .sc-inner {padding-bottom: 80px;}
	#sc06 .sc-hd {display: block;}
	#sc06 .sc-hd .cnt-control {bottom: 20px; left: 0; width: 100%; padding-left: 0; justify-content: center;}
	#sc06 .slide-container .swiper-slide .img-box {border-radius: 20px;}
	#sc06 .slide-container .swiper-slide .info-box .link-box {padding-top: 20px;}
	#sc06 .slide-container .swiper-slide .info-box .link-box .tit {font-size: 18px;}
}
@media screen and (max-width: 600px) {
	#sc06 .slide-container .swiper-slide {display: block;}
	#sc06 .slide-container .swiper-slide .img-box {width: 100%;}
	#sc06 .slide-container .swiper-slide .img-box::before {padding-top: 180px;}
	#sc06 .slide-container .swiper-slide .info-box {padding-left: 0; padding-bottom: 0;}
	#sc06 .slide-container .swiper-slide .info-box .link-box .tit {font-size: 17px;}
	#sc06 .slide-container .swiper-slide .info-box .link-box .txt {font-size: 16px;}
}




/*-------------------------------------------------------------------
	분류이름: 홍보활동 영상
	분류그룹: section
-------------------------------------------------------------------*/
#sc07 {display: block; padding: 100px 20px 0;}
#sc07 .sc-inner {display: grid; padding: 50px; border-radius: 30px; background-color: #F5F8FD; grid-template-columns: 1fr 850px;}
#sc07 .sc-inner .sc-hd {display: block;}
#sc07 .sc-inner .sc-hd .sc-title {margin-bottom: 32px;}
#sc07 .sc-inner .sc-hd .sc-title h2 {margin-bottom: 15px;}
#sc07 .sc-inner .sc-bd {display: block; overflow: hidden;}
#sc07 .slide-container {display: block; overflow: hidden; margin: 0 -25px;}
#sc07 .slide-container .swiper-slide {display: block; padding: 0 25px;}
#sc07 .slide-container .swiper-slide .item {display: block;}
#sc07 .slide-container .swiper-slide .item .img-box {display: block; overflow: hidden; position: relative; border-radius: 20px;}
#sc07 .slide-container .swiper-slide .item .img-box::before {content:""; display: block; padding-top: 60%;}
#sc07 .slide-container .swiper-slide .item .img-box::after {content: ""; display: block; position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.30) url(../images/main/play.svg) no-repeat center; backdrop-filter: blur(5px);}
#sc07 .slide-container .swiper-slide .item .img-box img {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#sc07 .slide-container .swiper-slide .item .txt-box {display: block;}
#sc07 .slide-container .swiper-slide .item .txt-box .tit {display: block; overflow: hidden; margin-top: 20px; font-weight: 700; font-size: 18px; color: #000; white-space: nowrap; text-overflow: ellipsis;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc07 .sc-inner .sc-hd {opacity: 0;}
#sc07.finded .sc-inner .sc-hd {animation: sc07_01 0.5s ease-in-out forwards;}
#sc07 .sc-inner .sc-bd {opacity: 0;}
#sc07.finded .sc-inner .sc-bd {animation: sc07_02 0.5s 0.1s ease-in-out forwards;}

#sc07 .slide-container .swiper-slide .item .img-box img {transition: all 0.3s;}
#sc07 .slide-container .swiper-slide .item .img-box:focus-visible img,
#sc07 .slide-container .swiper-slide .item .img-box:hover img {transform: scale(1.05);}
#sc07 .slide-container .swiper-slide .item .txt-box .tit {transition: all 0.3s;}
#sc07 .slide-container .swiper-slide .item:focus-visible .txt-box .tit,
#sc07 .slide-container .swiper-slide .item:hover .txt-box .tit {color: #6341CF;}

@keyframes sc07_01 {
	0% {opacity: 0; transform: translateX(-50px);}
	100% {opacity: 1; transform: translateX(0);}
}
@keyframes sc07_02 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc07 .sc-inner {padding: 50px 30px; grid-template-columns: 1fr 650px;}
	#sc07 .slide-container {margin: 0 -10px;}
	#sc07 .slide-container .swiper-slide {padding: 0 10px;}
}
@media screen and (max-width: 1024px) {
	#sc07 .sc-inner {display: block; padding: 30px 20px;}
	#sc07 .sc-inner .sc-hd {display: flex; margin-bottom: 20px; gap: 20px; justify-content: space-between; align-items: flex-end;}
	#sc07 .sc-inner .sc-hd .sc-title {margin-bottom: 0;}
	#sc07 .sc-inner .sc-hd .sc-title .txt br {display: none;}
	#sc07 .sc-inner .sc-hd .cnt-control {flex-shrink: 0;}
}
@media screen and (max-width: 768px) {
	#sc07 {padding: 60px 20px 0;}
	#sc07 .sc-inner .sc-hd {display: block;}
	#sc07 .sc-inner .sc-hd .sc-title {margin-bottom: 10px;}
	#sc07 .sc-inner .sc-hd .sc-title h2  {margin-bottom: 10px;}
	#sc07 .sc-inner .sc-hd .cnt-control {justify-content: flex-end;}
	
}
@media screen and (max-width: 600px) {
	#sc07 {padding: 60px 0 0;}
	#sc07 .sc-inner {border-radius: 0;}
	#sc07 .slide-container .swiper-slide .item .img-box::before {padding-top: 180px;}
	#sc07 .slide-container .swiper-slide .item .txt-box .tit {font-size: 16px;}
}


/*-------------------------------------------------------------------
	분류이름: 맞춤 나눔인, 마을재능 요청
	분류그룹: section
-------------------------------------------------------------------*/
#sc08 {display: block; padding: 100px 0;}
#sc08 .sc-inner {display: flex; gap: 50px;}
#sc08 .sc-group {display: block; width: calc(50% - 25px);}
#sc08 .sc-group .sc-hd {display: flex; margin-bottom: 30px; gap: 20px; align-items: flex-end;}
#sc08 .sc-group .sc-hd .utils {display: flex; margin-left: auto; gap: 10px;}
#sc08 .sc-group .sc-hd .main-select {display: block; min-width: 200px; height: 50px; padding: 0 40px 0 20px; border-radius: 999px; background: #FFF url(../images/main/arr_down.svg) no-repeat center right 16px; font-weight: 600; font-size: 16px; box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.10); cursor: pointer;}
#sc08 .sc-group .sc-bd {display: block;}
#sc08 .sc-group .sc-bd .list {display: flex; gap: 10px; flex-direction: column;}
#sc08 .sc-group .sc-bd .list .item {display: flex; overflow: hidden; padding: 20px; border-radius: 10px; background-color: #F0F2F6; align-items: center;}
#sc08 .sc-group .sc-bd .list .item::after {content: ""; display: block; width: 24px; height: 24px; margin-left: auto; background: url(../images/main/arr2_right.svg) no-repeat center / contain; flex-shrink: 0;}
#sc08 .sc-group .sc-bd .list .item .loc {display: flex; min-width: 90px; height: 28px; margin-right: 10px; padding: 0 10px; border-radius: 5px; background-color: var(--color-primary-40); font-weight: 500; font-size: 14px; color: #fff; align-items: center; justify-content: center; flex-shrink: 0;}
#sc08 .sc-group .sc-bd .list .item .tit {display: block; overflow: hidden; font-weight: 700; font-size: 16px; line-height: 1; color: #000; white-space: nowrap; text-overflow: ellipsis; flex-grow: 1;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#sc08 .sc-group.group-01 .sc-bd .list .item .loc {background-color: var(--color-primary-40);}
#sc08 .sc-group.group-02 .sc-bd .list .item .loc {background-color: #6341CF;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc08 {opacity: 0;}
#sc08.finded {animation: sc08 0.5s ease-in-out forwards;}

#sc08 .sc-group .sc-bd .list .item {transition: all 0.3s;}
#sc08 .sc-group .sc-bd .list .item::after {opacity: 0; transform: translateX(-10px); transition: all 0.3s;}
#sc08 .sc-group .sc-bd .list .item:focus-visible::after,
#sc08 .sc-group .sc-bd .list .item:hover::after {opacity: 1; transform: translateX(0);}

@keyframes sc08 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px) {
	#sc08 .sc-inner {gap: 30px;}
	#sc08 .sc-group {width: calc(50% - 15px);}
	#sc08 .sc-group .sc-hd .main-select {min-width: 150px;}
}
@media screen and (max-width: 1024px) {
	#sc08 .sc-inner {gap: 60px; flex-wrap: wrap;}
	#sc08 .sc-group {width: 100%;}
	#sc08 .sc-group .sc-hd .main-select {min-width: ;}
}
@media screen and (max-width: 768px) {
	#sc08 {padding: 60px 0;}
	#sc08 .sc-group .sc-hd {margin-bottom: 20px;}
	#sc08 .sc-group .sc-hd .main-select {height: 40px;}
}
@media screen and (max-width: 600px) {
	#sc08 .sc-group .sc-hd {display: block;}
	#sc08 .sc-group .sc-hd .sc-title {margin-bottom: 15px;}
	#sc08 .sc-group .sc-hd .utils {width: 100%;}
	#sc08 .sc-group .sc-hd .main-select {min-width: 0; flex-grow: 1;}
	#sc08 .sc-group .sc-bd .list .item {padding: 15px;}
	#sc08 .sc-group .sc-bd .list .item .loc {min-width: 80px; font-size: 13px;}
	#sc08 .sc-group .sc-bd .list .item .tit {font-size: 14px;}
}


/*-------------------------------------------------------------------
	분류이름: 맞춤 나눔인, 마을재능 요청
	분류그룹: section
-------------------------------------------------------------------*/
#sc09 {display: block; padding: 70px 0; background-image: url(../images/main/bg_sc09.jpg); background-position: center; background-size: cover;}
#sc09 .sc-inner {display: flex; gap: 30px; align-items: center;}
#sc09 .sc-inner .sc-hd {display: block; flex-grow: 1;}
#sc09 .sc-inner .sc-hd .sc-title {color: #fff;}
#sc09 .sc-inner .sc-hd .sc-title h2 {margin-bottom: 25px;}
#sc09 .sc-inner .sc-hd .sc-title .txt {color: inherit;}
#sc09 .sc-inner .sc-bd {padding: 50px; border-radius: 30px; background: rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); flex-shrink: 0;}
#sc09 .sc-inner .sc-bd .contact-box {display: block; min-width: 500px;}
#sc09 .sc-inner .sc-bd .contact-box .tit-box {display: block; margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); color: #fff;}
#sc09 .sc-inner .sc-bd .contact-box .tit-box .txt {display: block; margin-bottom: 20px; font-weight: 700; font-size: 16px; line-height: 1; color: #FFF;}
#sc09 .sc-inner .sc-bd .contact-box .tit-box .tit {display: block; font-size: 40px; font-weight: 700; line-height: 1; color: #FFF;}
#sc09 .sc-inner .sc-bd .contact-box .info-box {display: block; position: relative; padding-left: 60px;}
#sc09 .sc-inner .sc-bd .contact-box .info-box::before {content:""; position: absolute; top: calc(50% - 21px); left: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--color-sub) url(../images/main/ico_time.svg) no-repeat center;}
#sc09 .sc-inner .sc-bd .contact-box .info-box .txt {display: block; font-weight: 700; font-size: 16px; line-height: 1.2; color: #FFF;}
#sc09 .sc-inner .sc-bd .contact-box .info-box .txt + .txt {margin-top: 20px;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#sc09 .sc-hd {opacity: 0;}
#sc09.finded .sc-hd {animation: sc09_01 0.5s ease-in-out forwards;}
#sc09 .sc-bd {opacity: 0;}
#sc09.finded .sc-bd {animation: sc09_02 0.5s 0.1s ease-in-out forwards;}

@keyframes sc09_01 {
	0% {opacity: 0; transform: translateX(-50px);}
	100% {opacity: 1; transform: translateX(0);}
}
@keyframes sc09_02 {
	0% {opacity: 0; transform: translateY(50px);}
	100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#sc09 .sc-inner {display: block;}
	#sc09 .sc-inner .sc-hd {margin-bottom: 20px;}
	#sc09 .sc-inner .sc-bd .contact-box {min-width: 0;}
}
@media screen and (max-width: 768px) {
	#sc09 {padding: 60px 0;}
	#sc09 .sc-inner .sc-hd .sc-title h2 {margin-bottom: 10px;}
	#sc09 .sc-inner .sc-bd {padding: 30px;}
	#sc09 .sc-inner .sc-bd .contact-box .info-box .txt {font-weight: 500;}
	#sc09 .sc-inner .sc-bd .contact-box .info-box .txt + .txt {margin-top: 10px;}
}
@media screen and (max-width: 600px) {
	#sc09 .sc-inner .sc-bd {padding: 30px 20px; border-radius: 20px;}
	#sc09 .sc-inner .sc-bd .contact-box .tit-box {padding-bottom: 15px;}
	#sc09 .sc-inner .sc-bd .contact-box .tit-box .tit {font-size: 34px;}
	#sc09 .sc-inner .sc-bd .contact-box .info-box {position: static; padding-left: 0;}
	#sc09 .sc-inner .sc-bd .contact-box .info-box::before {top: 20px; left: auto; right: 20px; width: 32px; height: 32px;}
}




/*-------------------------------------------------------------------
	분류이름: PC - SNS 버튼
	분류그룹: Floating
-------------------------------------------------------------------*/
.floating-sns {position: fixed; bottom: 50px; left: 50px; z-index: 99; padding-bottom: 6em; font-size: 16px;}
.floating-sns::after {content: ""; display: block; width: 1px; height: 80px; margin: 20px auto; background-color: #E2E2E2;}
.floating-sns .sns-list {display: block;}
.floating-sns .sns-list > li {display: block;}
.floating-sns .sns-list > li + li {margin-top: 10px;}
.floating-sns .sns-list > li .btn-sns {display: block; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center;}
.floating-sns .sns-list > li .btn-sns.facebook {background-image: url(../images/main/sns_facebook.svg);}
.floating-sns .sns-list > li .btn-sns.instagram {background-image: url(../images/main/sns_instagram.svg);}
.floating-sns .sns-list > li .btn-sns.youtube {background-image: url(../images/main/sns_youtube.svg);}
.floating-sns .mark {display: block; position: absolute; bottom: 0; left: 0; font-weight: 700;font-size: 16px; line-height: 100%; white-space: nowrap; color: #D6D8E8; transform: rotate(90deg) translate(-100%, -70%); transform-origin: bottom left;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.floating-sns.stop {position: absolute; bottom: 20px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1700px) {
	.floating-sns {display: none;}
}


/*-------------------------------------------------------------------
	분류이름: 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;}





/*-------------------------------------------------------------------
	분류이름: 모달 기본 스타일 1
	분류그룹: 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.285714em; font-size: 175px; background: url(../images/common/logo_white.svg) no-repeat top 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: auto; position: relative; max-width: 360px; width: 100%; max-height: 100%; margin: 0 auto;}
.popup-modal .modal-con .con-body .slide-container {display: block; overflow: hidden; padding: 6px; border-radius: 20px; background-color: #fff;}
.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; border-radius: 15px;}
.popup-modal .modal-con .con-body .cnt-control {position: absolute; top: 50%; left: 50%; right: 0; max-width: 540px; width: 100%; transform: translateX(-50%);}
.popup-modal .modal-con .con-body .cnt-control .btn-ctrl {position: absolute; top: 0; transform: translateY(-50%);}
.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: var(--color-sub); font-weight: 600; font-size: 16px; color: #fff; gap: 0.3em; align-items: center;}
.popup-modal .modal-con .con-foot .btn-ctrl-modal {display: flex; height: 42px; padding: 0 28px; border-radius: 999px; background-color: var(--color-primary-40); font-weight: 600; font-size: 16px; color: #fff; align-items: center;}
.popup-modal .modal-con .con-foot .btn-ctrl-modal::after {content: ""; display: block; width: 18px; height: 18px; margin-left: 10px; border-radius: 999px; background: transparent url(../images/main/modal_close.svg) no-repeat center / contain;}

/*-------------------------------------------------------------------
	@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 .cnt-control .btn-ctrl.prev {left: 0;}
.popup-modal .modal-con .con-body .cnt-control .btn-ctrl.next {right: 0;}

/*-------------------------------------------------------------------
	@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;}
}


/*-------------------------------------------------------------------
	분류이름: 모달 기본 스타일 1
	분류그룹: Overlay > Modal
-------------------------------------------------------------------*/
.visual-modal {display: flex; overflow-x: auto; overflow-y: hidden; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; padding: 20px;}
.visual-modal::before {content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0);}
.visual-modal .modal-con {display: flex; overflow: hidden; position: relative; max-width: 1500px; width: 100%; max-height: 100%; margin: auto; padding-top: 80px; border-radius: 20px; flex-direction: column;}
.visual-modal .modal-con .card-list {display: grid; overflow-x: hidden; overflow-y: auto; position: relative; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px; border-radius: 20px; background: #F5F5F5;}
.visual-modal .modal-con .card-list .item {display: block; overflow: hidden; position: relative; border-radius: 10px;}
.visual-modal .modal-con .card-list .item::before {content:""; display: block; padding-top: 45%;}
.visual-modal .modal-con .card-list .item img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.visual-modal .modal-con .btn-close {position: absolute; top: 28px; right: 0;}

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

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

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.visual-modal .modal-con {padding-top: 40px;}
	.visual-modal .modal-con .card-list {grid-template-columns: 1fr;}
	.visual-modal .modal-con .btn-close {top: 8px;}
}