@charset "utf-8";

.hero { position:relative; width:100%; height: 100dvh; min-height: 600rem; background: radial-gradient(circle at 20% 0, #648de3 10%, #6768e3)  0 / cover no-repeat; color: #fff;
	&::before { content: '히어로 영역'; position: absolute; inset: 0; margin: auto; align-content: center; text-align: center; font: 200 var(--font-size-32) var(--font-sans); }
}

/* Section - Main Visual */
.main-visual {
	position: relative; width: 100%; height: calc(100vh - var(--header-height));

	.swiper { position: relative; height: 100%; }
	.swiper .swiper-wrapper { position: absolute; top: 0; z-index: -1; }
	.swiper .swiper-wrapper::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(45deg, rgb(0 0 0 / 50%), transparent); z-index: 1; }
	.swiper .swiper-slide { }
	.swiper .swiper-slide .slider-img { width: 100%; height: 100%; object-fit: cover; }
	.visual-wrap { position: relative; height: 100%; display: flex; align-items: center;flex-direction: column;justify-content: center; justify-content: flex-end; padding-bottom: var(--header-height); }
	.visual-wrap hgroup { display: flex; flex-direction: column; color: white; gap: 15rem; }
	.visual-wrap hgroup span,.visual-wrap hgroup p { font-size: var(--font-size-24); text-transform: uppercase; }
	.visual-wrap hgroup h2 { font-size: var(--font-size-48); }
	.visual-wrap .container { display: flex; flex-direction: column; gap: 30rem; }
	.visual-wrap .slide-nav { position: relative; display: flex; gap: 30rem; align-items: center; flex-wrap: wrap; }
	.visual-wrap .progress-bar { width: 220rem; height: 2rem; background: rgba(255,255,255,0.3); overflow: hidden; position: relative; }
	.visual-wrap .progress-fill { display: block; width: 0%; height: 100%; background: #fff; transition: width linear; }
	.visual-wrap .slide-nav .slide-nav-button { display: flex; width: fit-content; flex-direction: row-reverse; gap: 20rem; }
	.visual-wrap .slide-nav .slide-nav-button .swiper-button-next, .visual-wrap .slide-nav .slide-nav-button .swiper-button-prev { position: relative; inset: unset; margin: unset; height: auto; width: auto; }
	.visual-wrap .slide-nav .swiper-pagination { position: relative; inset: unset; margin: 0; width: fit-content; color: white; font-size: var(--font-size-20); font-weight: 500; }
	.visual-wrap .slide-nav .swiper-pagination span { }
	.visual-wrap .slide-nav .slide-nav-button svg { height: 20rem; width: auto; fill: white; }
	.visual-wrap .slide-nav .slide-nav-button svg path { fill: white; }
	.visual-wrap .scroll-right { position: absolute; top: 50%; right: -70rem; font-size: 18rem; text-transform: uppercase; color: white; display: flex; gap: 10rem; transform: rotate(-90deg); }
	.visual-wrap .scroll-right i { display: block; background: url(/assets/images/home/mouse-simple-light.svg) no-repeat; background-size: contain; width: 30rem; height: 30rem; transform: rotate(90deg); }
	.mv-navi { position: relative; margin-inline: auto; max-width: calc(var(--container) * 1rem); width: calc(var(--container-scale) * 100%); }
	.mv-navi .navi-wrap { display: flex; padding: 40rem; margin-top: 80rem; background: rgb(255 255 255 / 50%); border-radius: 20rem; gap: 30rem; justify-content: space-around; }
	.mv-navi .navi-wrap .sparator { width: 1rem; background: white; }
	.mv-navi .navi-wrap .navi { display: flex; gap: 30rem; }
	.mv-navi .navi-wrap .navi li { aspect-ratio: 1; display: block; background: white; display: flex; align-items: center; justify-content: center; width: 150rem; border-radius: 10rem;text-align: center; }
	.mv-navi .navi-wrap .navi li a { display: flex; flex-direction: column; gap: 15rem; align-items: center; }
	.mv-navi .navi-wrap .navi li a img { width: 100%; max-width: 50rem; aspect-ratio: 1; }
	.mv-navi .navi-wrap .navi.n02 li:nth-child(1) { background: #177da6; color: white; }
	.mv-navi .navi-wrap .navi.n02 li:nth-child(2) { background: #063f53; color: white; }

	@media(max-width: 1280px){
		.mv-navi .navi-wrap .navi li { width: 100%; min-width: 90rem; padding: 20rem; }
		.mv-navi .navi-wrap .navi { gap: 10rem; }
		    
	}
	@media(max-width: 1024px){
		.mv-navi .navi-wrap { gap: 10rem; padding: 10rem; }
		.mv-navi .navi-wrap .navi li { padding: 10rem; min-width: 10rem; }
		.mv-navi .navi-wrap .navi li a img { max-width: 30rem; }

	}
	@media(max-width: 767px){
		height: calc(80vh - var(--header-height));

		.visual-wrap .scroll-right { display: none; }
		.mv-navi .navi-wrap { flex-direction: column; margin-top: 40rem; }
		.mv-navi .navi-wrap .navi.n02 li a { flex-direction: row; }
		.mv-navi .navi-wrap .navi.n02 li { aspect-ratio: unset; }

	}
}

/* Section - Main Board */
.main-board {
    background: #F8FDFE;

	.main-board-wrap { position: relative; display: flex; gap: 50rem; padding: 125rem 0; }
	.main-board-wrap .board { width: 100%; display: flex; flex-direction: column; }
	.main-board-wrap .board .head-tit { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20rem; border-bottom: 1rem solid #ddd; }
	.main-board-wrap .board .head-tit .nav { display: flex; gap: 30rem; }
	.main-board-wrap .board .head-tit .nav .tab-category { display: flex; gap: 20rem; font-size: var(--font-size-16); color: #a0a0a0; }
	.main-board-wrap .board .head-tit h3 { font-size: var(--font-size-36); }
	.main-board-wrap .board .head-tit .nav .btn-more { display: block; width: 24rem; height: 100%; aspect-ratio: 1; }
	.main-board-wrap .board .board-list { }
	.main-board-wrap .board .board-list .list { display: flex; flex-direction: column; }
	.main-board-wrap .board .board-list .list li a { display: flex; justify-content: space-between; padding: 24rem 0; border-bottom: 1rem solid #ddd; color: #666; align-items: center; }
	.main-board-wrap .board .board-list .list li p {position: relative;font-size: var(--font-size-20);color: #a0a0a0;max-width: 500rem;word-wrap: normal;white-space: nowrap;text-overflow: ellipsis; overflow: hidden;padding-left: 20rem;}
	.main-board-wrap .board .board-list .list li p::before {content: '''';position: absolute;display: block;width: 7rem;height: 7rem;background: #177da6;border-radius: 50rem;top: 50%;left: 0;transform: translateY(-50%);}
	.main-board-wrap .board .board-list .list li .date { font-weight: 600; }

	@media(max-width: 1024px){
		.main-board-wrap .board .head-tit { flex-direction: column; align-items: flex-start; gap: 10rem; }
		.main-board-wrap .board .head-tit .nav { width: 100%; justify-content: space-between; }
		.main-board-wrap .board .board-list .list li p { max-width: 200rem; }
	}
	@media(max-width: 767px){
		.main-board-wrap { flex-direction: column; padding: 65rem 0; }
		.main-board-wrap .board .board-list .list li p { max-width: unset; }
	}
}

/* Section - Main Photo Gallery */
.main-gallery {
    position: relative; padding-block: clamp(30rem, calc(100 / var(--container) * 100vw), 100rem);

	.main-gallery-wrap { display: flex; flex-direction: column; }
	.main-gallery-wrap .head-tit { display: flex; justify-content: space-between; align-items: center; }
	.main-gallery-wrap .head-tit h3 { font-size: var(--font-size-36); }
	.main-gallery-wrap .head-tit .slide-nav { display: flex; gap: 10rem; }
	.main-gallery-wrap .head-tit .slide-nav .swiper-button-prev, .main-gallery-wrap .head-tit .slide-nav .swiper-button-next { position: relative; inset: 0; margin: 0; aspect-ratio: 1; background: #177da6; border-radius: 80rem; }
	.main-gallery-wrap .head-tit .slide-nav .swiper-navigation-icon { width: 15rem !important; height: auto; fill: white; aspect-ratio: 1; }
	.main-gallery-wrap .head-tit .slide-nav .swiper-navigation-icon path { fill: white; }
	.main-gallery-wrap .gallSwiper { width: 100%; margin-top: 40rem; }
	.main-gallery-wrap .gallSwiper .swiper-slide { position: relative; width: 100%; border-radius: 10rem; overflow: hidden; }
	.main-gallery-wrap .gallSwiper .swiper-slide a::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: linear-gradient(4deg, rgb(0 0 0 / 50%), transparent); background-size: cover; z-index: 1; top: 0; left: 0; }
	.main-gallery-wrap .gallSwiper .swiper-slide .slide-gallery { width: 100%;height: 350px; position: relative; z-index: 0; display: block;object-fit: cover; }
	.main-gallery-wrap .gallSwiper .swiper-slide .txt { position: absolute; z-index: 2; bottom: 20rem; left: 20rem; font-size: var(--font-size-22); color: white; }

}