/* main */
.main-wrap { display: flex; flex-direction: column; align-items: center; width: 100vw; min-height: 100vh; }
.main-wrap .inner { display: flex; flex-direction: column; width: 96%; max-width: 1200px; margin: 0 auto; }

.main-wrap h2 { font-size: 35px; font-weight: 700; color: var(--color-black); }

/* main - visual */
.main-wrap .visual { width: 100%; height: 816px; background: url("/images/main/visual.jpg") no-repeat 50% 50%; background-size: cover; /* background-color: rgba(0, 0, 0, 0.5); background-blend-mode: multiply; */ }
.main-wrap .visual .inner { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 96%; max-width: 1200px; height: 100%; margin: 0 auto; padding-top: 166px; }
.main-wrap .visual .inner p { font-size: 20px; font-weight: 200; color: var(--color-white); text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
.main-wrap .visual .inner p strong { font-weight: 600; }
.main-wrap .visual .inner h1 { font-size: 75px; font-weight: 200; color: var(--color-white); line-height: 1em; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); }
.main-wrap .visual .inner h1 strong { font-weight: 600; }


/* main - c01 */
.main-wrap .c01 { display: flex; flex-direction: column; align-items: center; gap: 100px; width: 100%; max-width: 1200px; padding: 100px 0 150px; }
.main-wrap .c01 .youtube-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 30px 15px; }
.main-wrap .c01 .youtube-wrap .youtube-box { display: flex; flex-direction: column; gap: 15px; width: calc((100% - 15px)/2); }
.main-wrap .c01 .youtube-wrap .youtube-box .txt-box { display: flex; justify-content: center; align-items: center; gap: 5px; height: 40px; }
.main-wrap .c01 .youtube-wrap .youtube-box .txt-box .category { font-size: 15px; color: #666; }
.main-wrap .c01 .youtube-wrap .youtube-box .txt-box .title { font-size: 20px; font-weight: 600; color: #000; }


/* main - c02 */

.main-wrap .c02 { display: flex; flex-direction: column; align-items: center; gap: 100px; width: 100%; max-width: 1200px; padding: 100px 0 200px; position: relative; }
.main-wrap .c02::before { content: ""; width: 100vw; height: 100%; background: #F9F9F9; position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -1; }
.main-wrap .c02 h2 { display: flex; flex-direction: column; align-items: center; }
.main-wrap .c02 .swiper { width: 100%; position: relative; }
.main-wrap .c02 .swiper .swiper-wrapper { display: flex; width: 100%; }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; width: 100%; box-sizing: border-box; }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: calc((100% - 100px)/6); }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item img { width: 100%; aspect-ratio: 185/62; background: var(--color-white); border: 1px solid #E0E0E0; }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item p { color: #888; text-align: center; }
.main-wrap .c02 .swiper-button-prev { width: 70px; height: 70px; margin: 0; background: url("/board/images/slidegallery_prev.png") no-repeat 50% 50%; background-size: 70px 70px; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); }
.main-wrap .c02 .swiper-button-next { width: 70px; height: 70px; margin: 0; background: url("/board/images/slidegallery_next.png") no-repeat 50% 50%; background-size: 70px 70px; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); }
.main-wrap .c02 .swiper-button-prev::after, .main-wrap .c02 .swiper-button-next::after { display: none; }
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.5; }

.main-wrap .mo { display: none; }

@media screen and (max-width: 1279px) {
.main-wrap h2 { font-size: 28px; }

/* main - visual */
.main-wrap .visual { height: 650px; }
.main-wrap .visual .inner { padding-top: 140px; }
.main-wrap .visual .inner p { font-size: 18px; }
.main-wrap .visual .inner h1 { font-size: 55px; }

/* main - c01 */
.main-wrap .c01 { gap: 80px; padding: 80px 0 130px; }
.main-wrap .c01 .youtube-wrap .youtube-box .txt-box .category { font-size: 14px; }
.main-wrap .c01 .youtube-wrap .youtube-box .txt-box .title { font-size: 18px; }

/* main - c02 */
.main-wrap .c02 { gap: 80px; padding: 80px 0 150px; }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide { gap: 15px; }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item { width: calc((100% - 45px)/4); }
.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item p { font-size: 14px; }
}
	
@media screen and (max-width: 767px) {
	/* main */
	.main-wrap .inner { width: 100%; }
	.main-wrap h2 { font-size: 20px; }

	/* main - visual */
	.main-wrap .visual { height: 415px; background: url("/images/main/visual_mo.png") no-repeat 50% 50%; background-size: cover; }
	.main-wrap .visual .inner { gap: 8px; width: 100%; padding: 65px 16px 0; }
	.main-wrap .visual .inner p { font-size: 14px; }
	.main-wrap .visual .inner h1 { font-size: 35px; }

	/* main - c01 */
	.main-wrap .c01 { gap: 50px; padding: 50px 0 100px; }
	.main-wrap .c01 .youtube-wrap { padding: 0 32px; }
	.main-wrap .c01 .youtube-wrap .youtube-box { gap: 10px; width: 100%; }
	.main-wrap .c01 .youtube-wrap .youtube-box .txt-box { flex-direction: column; height: auto; }
	.main-wrap .c01 .youtube-wrap .youtube-box .txt-box .category { font-size: 13px; }
	.main-wrap .c01 .youtube-wrap .youtube-box .txt-box .title { font-size: 15px; }

	/* main - c02 */
	.main-wrap .c02 { gap: 30px; padding: 50px 16px 100px; }
	.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide { gap: 10px; }
	.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item { width: calc((100% - 20px)/3); }
	.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item img { aspect-ratio: 102/45; object-fit: contain; }
	.main-wrap .c02 .swiper .swiper-wrapper .swiper-slide .item p { display: none; }
}

/* @media screen and (max-width: 374px) {
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet { width: 65px; height: 65px; margin: 0; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet::after { padding-top: 5px; font-size: 12px; top: 45%; }
	} */