@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); }
}

.main-visual { position: relative; width: 100%; height: 500rem;
     
	.mainSwiper {position: absolute;width: 100%;height: 100%;z-index: 0;}
	.swiper img { width: 100%; height: 100%; object-fit: cover; }
	.container {height: 100%;display: flex;align-items: center;}
	.thumbSwiper { margin: 0; }
	.thumbSwiper img { }
	.thumbSwiper .swiper-slide { width: 100% !important; max-width: 100rem; height: 60rem; border: 1rem solid #fff; cursor: pointer; }
	.thumbSwiper .swiper-slide.swiper-slide-thumb-active { border: 3rem solid #579ede; }
	.main-visual-info { display: flex; flex-direction: column; gap: 40rem; }
	.main-visual-info .txt { }
	.main-visual-info .txt img { width: 100%; }

}

.main-navigation { position: relative; padding: 30rem 0;

	.nav { display: flex; }
	.nav .list { width: 100%; padding: 20rem; border-right: 1rem solid #ddd; }
	.nav .list.direction {background: url(/assets/images/home/m_icon1.jpg) no-repeat;background-size: contain;background-position: right;}
	.nav .list.phone {border: none;background: url(/assets/images/home/m_icon2.jpg) no-repeat;background-size: contain;background-position: right;}
	.nav .list.phone b {font-size: 25rem;font-weight: bold;color: #365ec3;font-family: 'Pretendard';}
	.nav .list .btn {position: relative;font-size: 20rem;font-weight: 600;display: flex;margin-bottom: 20rem;align-items: center;gap: 20rem;}
	.nav .list .btn::after { position: relative; width: 10rem; height: 100%; aspect-ratio: 1; border: solid #777; border-width: 0 1px 1px 0; rotate: -45deg; content: ""; }
	.nav .list p { font-size: 12rem; color: #777; }
	.nav .list .announcement { display: flex; flex-direction: column; font-size: 11rem; color: #777; gap: 5rem; }
	.nav .list .announcement li a { display: flex; justify-content: space-between; }

	@media(max-width: 1023px){
		.nav { flex-direction: column; }
		.nav .list { border: 0; border-bottom: 1rem solid #ddd; }
	}
}