/* main */
.main-wrap { display: flex; flex-direction: column; align-items: center; width: 100vw; min-height: 100vh; }

.main-wrap h4 { font-family: var(--font-default); font-size: 17px; font-weight: 700; color: var(--color-theme); }
.main-wrap h2 { margin-bottom: 10px; font-family: var(--font-default); font-size: 35px; font-weight: 700; color: var(--color-lightblack); }
.main-wrap h3 { margin-bottom: 35px; font-family: var(--font-default); font-size: 20px; color: var(--color-black); }

/* main - visual */
.main-wrap .visual { width: 100%; padding-top: 120px; }

.main-wrap .visual .swiper { width: 100%; height: 800px; position: relative; }
.main-wrap .visual .swiper .swiper-wrapper { }
.main-wrap .visual .swiper .swiper-wrapper .swiper-slide { display: flex; justify-content: center; align-items: center; padding-bottom: 130px; }

.main-wrap .visual .swiper .swiper-wrapper .swiper-slide.s01 { background: url("/images/main/visual_01.jpg") no-repeat 50% 50%; background-size: cover; }
.main-wrap .visual .swiper .swiper-wrapper .swiper-slide.s02 { background: url("/images/main/visual_02.jpg") no-repeat 50% 50%; background-size: cover; }
.main-wrap .visual .swiper .swiper-wrapper .swiper-slide.s03 { background: url("/images/main/visual_03.jpg") no-repeat 50% 50%; background-size: cover; }
.main-wrap .visual .swiper .swiper-wrapper .swiper-slide.s04 { background: url("/images/main/visual_04.jpg") no-repeat 50% 50%; background-size: cover; }

.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner { max-width: 1200px; }
.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner h2 { margin-bottom: 14px; font-family: 'Pretendard', sans-serif; font-size: 50px; font-weight: 600; color: var(--color-white); text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75); }
.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner p { font-family: "Pretendard", sans-serif; font-size: 20px; font-weight: 300; color: var(--color-white); text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); }

.main-wrap .visual .swiper .swiper-pagination { display: flex; justify-content: center; gap: 20px; width: 1200px; position: absolute; left: 50%; bottom: 186px; transform: translateX(-50%); }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet { width: 130px; height: 130px; background: rgba(255, 255, 255, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); border-radius: 50%; position: relative; z-index: 999; opacity: 1; transition: all 0.2s ease-in-out; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: rgba(0, 170, 190, 0.4); transform: translateY(-10px); }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet::after { display: block; width: 100%; padding-top: 8px; font-family: 'Pretendard', sans-serif; font-size: 17px; font-weight: 600; color: var(--color-white); text-align: center; position: absolute; left: 50%; top: 60%; transform: translateX(-50%); }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet::before { content: ""; display: block; width: 52px; height: 52px; position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(1)::before { background: url("/images/main/pagination_icon01.svg") no-repeat 50% 50%; background-size: 52px; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(1)::after { content: "URSAS®"; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(2)::before { background: url("/images/main/pagination_icon02.svg") no-repeat 50% 50%; background-size: 52px; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(2)::after { content: "DiHPAE ®"; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(3)::before { background: url("/images/main/pagination_icon03.svg") no-repeat 50% 50%; background-size: 52px; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(3)::after { content: "VF 구독"; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(4)::before { background: url("/images/main/pagination_icon04.svg") no-repeat 50% 50%; background-size: 52px; }
.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(4)::after { content: "VF 방문"; }

.main-wrap .visual .swiper .swiper-button-box { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; }
.main-wrap .visual .swiper .swiper-button-box .swiper-button-prev { width: 26px; height: 40px; background: url("/images/main/swiper_button_prev.png") no-repeat 50% 50%; }
.main-wrap .visual .swiper .swiper-button-box .swiper-button-next { width: 26px; height: 40px; background: url("/images/main/swiper_button_next.png") no-repeat 50% 50%; }
.main-wrap .visual .swiper .swiper-button-box .swiper-button-prev::after, .main-wrap .visual .swiper .swiper-button-box .swiper-button-next::after { display: none; }

.main-wrap .visual .swiper .swiper-scrolldown { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 400; color: var(--color-white); text-align: center; text-transform: uppercase; position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 9999; }

.main-wrap .visual .swiper .swiper-slidetxt { display: none; }


/* main - c01 */
.main-wrap .c01 { display: flex; flex-direction: column; width: 100%; max-width: 1200px; padding: 100px 0; }
.main-wrap .c01 p { margin-top: 14px; font-family: var(--font-default); font-size: 15px; color: var(--color-fontgray); line-height: 1.35em; }


/* main - c02 */
.main-wrap .c02 { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 60px 0 100px; background: url("/images/main/main_c02_bg.png") no-repeat 50% 50%; background-size: cover; }

.main-wrap .c02 .txt-box { display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin-bottom: 20px; }

.main-wrap .c02 .flex-box { display: flex; width: 100%; max-width: 1200px; }
.main-wrap .c02 .flex-box .youtube { display: flex; align-items: center; width: 50%; background: var(--color-black); }
.main-wrap .c02 .flex-box .youtube > div { width: 100%; }

.main-wrap .c02 .flex-box .board { display: flex; flex-direction: column; gap: 20px; width: 50%; padding: 20px; background: var(--color-white); }
.main-wrap .c02 .flex-box .board ul.tab-menu { display: flex; gap: 24px; width: 100%; }
.main-wrap .c02 .flex-box .board ul.tab-menu li { height: 100%; padding: 10px; font-family: var(--font-default); font-size: 20px; color: var(--color-fontlightgray); font-weight: 600; position: relative; cursor: pointer; }
.main-wrap .c02 .flex-box .board ul.tab-menu li.active { font-weight: 700; color: var(--color-lightblack); }
.main-wrap .c02 .flex-box .board ul.tab-menu li.active::before { content: ""; display: block; width: calc(100% - 20px); height: 2px; background: var(--color-black); position: absolute; left: 50%; top: 50%; transform: translate(-50%, 10px); }

.main-wrap .c02 .flex-box .board .content-wrap { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; }
.main-wrap .c02 .flex-box .board .content-wrap .content { display: none; height: 100%; }
.main-wrap .c02 .flex-box .board .content-wrap .content ul { display: flex; flex-direction: column; /* justify-content: space-between; */ width: 100%; height: 100%; }
.main-wrap .c02 .flex-box .board .content-wrap .content ul li { width: 100%; padding: 12px 10px; border-bottom: 1px solid var(--color-linegray); }
	.main-wrap .c02 .flex-box .board .content-wrap .content ul li a { display: flex; align-items: center; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; }


/* main - c03 */
.main-wrap .c03 { width: 100%; max-width: 1200px; padding: 50px 0; }
.main-wrap .c03 ul { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.main-wrap .c03 ul li { width: calc(20% - 8px); height: 100px; border: 1px solid var(--color-linegray); }
.main-wrap .c03 ul li img { width: 100%; height: 100%; object-fit: contain; }

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

@media screen and (max-width: 1279px) {
/* main */
.main-wrap h4 { font-size: 14px; }
.main-wrap h2 { font-size: 28px; }
.main-wrap h3 { font-size: 16px; }

/* main - visual */
	.main-wrap .visual { padding-top: 0; }
	.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner h2 { font-size: 40px; }
	.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner p { font-size: 18px; }

.main-wrap .c01 { padding: 50px 30px; }
.main-wrap .c02 { padding: 50px 30px; }
.main-wrap .c03 { padding: 50px 30px; }

}

@media screen and (max-width: 1000px) {
	.main-wrap .under1000 { display: none; }
}

@media screen and (max-width: 767px) {
	.main-wrap .mo { display: block; }
	.main-wrap .pc { display: none; }

	.main-wrap h4 { font-size: 12px; }
	.main-wrap h2 { font-size: 20px; }
	.main-wrap h3 { margin: 8px 0; font-size: 12px; color: var(--color-fontgray); }

	.main-wrap .visual .swiper { width: 100%; height: 350px; position: relative; }
	.main-wrap .visual .swiper .swiper-wrapper .swiper-slide { padding: 0 2% 70px; }
	.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner h2 { margin-bottom: 0; font-size: 26px; }
	.main-wrap .visual .swiper .swiper-wrapper .swiper-slide .inner p { font-size: 16px; }
	
	.main-wrap .visual .swiper .swiper-pagination { width: 100%; gap: 0; bottom: 60px; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet { width: 85px; height: 85px; margin: 0; margin-left: -14px; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:first-child { margin-left: 0; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet::after { padding-top: 5px; font-size: 12px; top: 50%; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet::before { width: 20px; height: 20px; bottom: 50%; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(1)::before { background: url("/images/main/pagination_icon01.svg") no-repeat 50% 50%; background-size: 25px; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(2)::before { background: url("/images/main/pagination_icon02.svg") no-repeat 50% 50%; background-size: 25px; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(3)::before { background: url("/images/main/pagination_icon03.svg") no-repeat 50% 50%; background-size: 25px; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet:nth-child(4)::before { background: url("/images/main/pagination_icon04.svg") no-repeat 50% 50%; background-size: 25px; }
	.main-wrap .visual .swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { transform: translateY(0); }

	.main-wrap .visual .swiper .swiper-button-box,
	.main-wrap .visual .swiper .swiper-scrolldown { display: none; }

.main-wrap .visual .swiper .swiper-slidetxt { display: flex; justify-content: center; align-items: center; gap: 5px; min-width: 170px; padding: 7px 0; background: rgba(0, 0, 0, 0.1); border-radius: 999px; font-family: 'Pretendard', sans-serif; font-size: 12px; font-weight: 200; color: var(--color-white); text-align: center; text-transform: uppercase; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 9999; }

.main-wrap .visual .swiper .swiper-slidetxt span { font-size: 12px; font-weight: 800; }

	.main-wrap .c01 p { margin-top: 0; font-size: 12px; }
	.main-wrap .c01 { padding: 50px 10px;}

	.main-wrap .c02 { padding: 0 10px; background: none; }
	.main-wrap .c02 .txt-box { margin-bottom: 10px; }
	.main-wrap .c02 .flex-box { flex-direction: column; gap: 20px; }
	.main-wrap .c02 .flex-box .youtube { width: 100%; }
	.main-wrap .c02 .flex-box .board { width: 100%; padding: 0; }
	.main-wrap .c02 .flex-box .board ul.tab-menu { align-items: center; gap: 15px; }
	.main-wrap .c02 .flex-box .board ul.tab-menu li { padding: 10px 0; font-size: 12px; font-weight: 300; color: var(--color-lightblack); }
	.main-wrap .c02 .flex-box .board ul.tab-menu li.active { color: var(--color-theme); font-size: 16px; }
	.main-wrap .c02 .flex-box .board ul.tab-menu li.active::before { width: 100%; height: 3px; background: var(--color-theme); }

	.main-wrap .c02 .flex-box .board .content-wrap .content ul li { padding: 10px 0; }
	.main-wrap .c02 .flex-box .board .content-wrap .content ul li a { font-size: 14px; color: var(--color-lightblack); }

	.main-wrap .c03 { width: auto; padding: 20px 10px;  }
	.main-wrap .c03 ul { justify-content: space-between; gap: 0; }
	.main-wrap .c03 ul li { width: 32%; height: auto; aspect-ratio: 230/98; }
	
	.slider-container { width: 100% !important; max-width: 767px; margin: 0 auto;  padding: 20px 0;}
}

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