@charset "UTF-8";

.main-banner__wrap{
	width:100%;
	overflow: hidden
}

.main-banner{
	position: relative;
	max-width: var(--width-default);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.main-banner__area{
	position: relative;
}

.main-banner__item{
	position: relative;
	width:100%;
	height: 0;
	overflow: hidden;
	padding-bottom: 40%;
	margin: 20px auto 0;
	border-radius: 12px;
	background-color: var(--color-gray-05)
}

.main-banner__item a{
	display: block;
}

.main-banner__item a img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main-banner.swiper{
	overflow: visible;
}

.main-banner .swiper-slide{
	transition: opacity 0.3s, filter 0.3s;
}

.main-banner .swiper-slide:not(.swiper-slide-active){
	opacity: 0.4
}

.swiper-btn__hidden{
	overflow: hidden;
	display: inline-block;
	position: absolute;
	z-index: -1;
	border: 0;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.swiper-btn__wrap{
	position: relative;
}

.swiper-btn{
	position: absolute;
	right: 4%;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:12px;
	margin-bottom: 4%;
	padding:0 24px;
	height: 44px;
	box-sizing: border-box;
	color: var(--color-gray-00);
	background-color: rgba(0,0,0,0.5);
	backdrop-filter:blur(8px);
	border-radius: 100px;
	z-index: 10;
	user-select: none;
	transition: 0.3s
}

.swiper-btn__count{
	display: flex;
	gap:4px;
	align-items: center
}

.swiper-count__line, .swiper-count__all-num{
	color: var(--color-gray-40)
}

.swiper-btn__play{
	display: flex;
	gap:4px
}

.swiper-button-prev, .swiper-button-next{
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.swiper-button-prev{
	background:url(../img/ico-banner-prev.svg) no-repeat center
}

.swiper-button-next{
	background:url(../img/ico-banner-next.svg) no-repeat center
}

.swiper-button-disabled{
	opacity: 0.4
}

.swiper-btn__play-pause{
	width: 24px;
	height: 24px;
	background:url(../img/ico-banner-pause.svg) no-repeat center
}

.swiper-btn__play-play{
	width: 24px;
	height: 24px;
	background:url(../img/ico-banner-play.svg) no-repeat center
}

.swiper-notification{
	display: none
}


/**/
.main-program__wrap,
.main-ad__wrap,
.main-board__bg,
.main-activity__wrap,
.main-group__wrap{
	margin-top: 160px
}

.main-program__title{
	margin-bottom: 12px;
	text-align: center
}

.main-program__txt{
	margin-bottom: 32px;
	text-align: center;
	color: var(--color-gray-60)
}

.main-program__tab{
	overflow: hidden
}

.main-program__tab-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:20px;
	margin-bottom: 20px
}

.main-program__tab-btn-li{
	cursor: pointer
}

.main-program__tab-btn-li.tab-on{
	background-color: var(--color-primary-70);
	color: var(--color-gray-00);
	box-shadow: none
}

.main-program__tab-link{
	display: flex;
	justify-content: center;
	align-items: center
}

.main-ad{
	position: relative;
	max-width: var(--width-default);
	width: calc(100% - 40px);
	height: 0;
	margin:0 auto;
	padding-bottom: 15%;
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--color-gray-05)
}

.main-ad img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main-board__bg{
	width: 100%;
	padding:64px 0;
	background-color: var(--color-primary-05);
	overflow: hidden;
}

.main-board__tab-btn-wrap{
	display: flex;
	justify-content: space-between;
	gap:20px;
	margin:20px 0 32px;
}

.main-board__tab-btn{
	display: flex;
	gap:12px
}

.main-board__tab-btn-li{
	cursor: pointer;
}

.main-board__tab-btn-li.tab-on2{
	background-color: var(--color-primary-70);
	color: var(--color-gray-00);
	box-shadow: none
}

.main-activity__title{
	margin-bottom: 32px;
	text-align: center;
}

.main-group__wrap{
	margin-bottom: 120px;
	overflow: hidden;
}

.main-group__title{
	margin-bottom: 32px;
	text-align: center;
}

.main-group__slide .swiper-slide{
	width: 20%;
	height: 64px;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--color-gray-10)
}

.main-group__slide a{
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.클래스{
	opacity: 0;
	transform:translateY(80px);
	transition:0.5s ease
}

@media all and (max-width:1520px) {
	.swiper-btn{
		right: 10%
	}
}

@media all and (max-width:1280px) {

}

@media all and (max-width:1180px) {
	
	.swiper-btn{
	}

	.main-group__slide .swiper-slide{
		width: 200px
	}

}

@media all and (max-width:1024px) {
	.main-program__wrap,
	.main-ad__wrap,
	.main-board__bg,
	.main-activity__wrap,
	.main-group__wrap{
		margin-top: 64px
	}

	.main-ad{
		width: 100%;
		border-radius: 0
	}
}

@media all and (max-width:768px) {
	.main-banner .swiper-button-next, .main-banner .swiper-button-prev{
		display: none;
	}

	.main-board__tab-btn-scroll{
		overflow:auto
	}

	.main-board__tab-btn-wrap{
		display: block
	}

	.main-board__tab-btn{
		width: 500px
	}

	.main-board__tab-link{
		display: none
	}

	.main-board__tab-btn-scroll::-webkit-scrollbar {
		display: none
	}

}

@media all and (max-width:572px) {

	
}

@media all and (max-width:500px) {


}

@media all and (max-width:482px) {

	.main-program__tab-btn-wrap{
		overflow:auto
	}
	
	.main-program__tab-btn{
		justify-content: flex-start;
		width: 500px;
		margin:0 auto 20px;
		white-space: nowrap
	}

	.main-program__tab-btn::-webkit-scrollbar {
		display: none
	}

	.main-program__tab-btn{
		gap:12px
	}

}