@charset "utf-8";
@import url('/share/css/swiper.min.css');

body {font-size: 1.6rem; line-height: 1.5;}

.top-con {background: linear-gradient(180deg, #D6E9F6 0%, rgba(255, 255, 255, 0.00) 100%);}
.top-con .inner {display: flex; gap: 8rem;}
.top-con #visual {position: relative; z-index: 1; margin-top: 5rem;}
.top-con #visual .visual-swiper {width: 83rem; height: 60rem; overflow: hidden; border-radius: 30rem 30rem 3rem 30rem;}
.top-con #visual .control {display: flex; justify-content: flex-end; align-items: center; padding-right: 10rem; height: 5.6rem;}
.top-con #visual .control .swiper-pagination {position: static; width: 5.7rem; line-height: 1.3; color: #666;}
.top-con #visual .control .swiper-pagination .swiper-pagination-current {font-weight: 700; color: #222;}
.top-con #visual .control button {width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-size: 100%; background-position: center; border-radius: 50%;}
.top-con #visual .control button.prev-btn {background-image: url(../img/main/ico_vs_prev.svg);}
.top-con #visual .control button.next-btn {background-image: url(../img/main/ico_vs_next.svg);}
.top-con #visual .control button.play-btn {margin-left: 1rem; background-color: #232355;}
.top-con #visual .control button.play-btn.pause {background-image: url(../img/main/ico_vs_pause.svg);}
.top-con #visual .control button.play-btn.play {background-image: url(../img/main/ico_vs_play.svg);}
.top-con .info-box {position: relative; flex-grow: 1; color: #fff; padding: 14rem 0;}
.top-con .info-box::before {content: ''; position: absolute; z-index: 0; left: -16rem; top: 0; width: calc(100% + 37rem); height: 100%; border-radius: 30rem 0 20rem 3rem; background: url(../img/main/bg_main_info.svg) no-repeat right -2rem bottom -1rem, linear-gradient(128deg, #263381 40.02%, #443279 93.39%);}
.top-con .info-box .info-inner {position: relative; z-index: 1;}
.top-con .info-box .info-slogan {margin-bottom: 2.4rem; font-size: 4.8rem; line-height: 1.36; font-weight: 700;}
.top-con .info-box .info-txt dl {display: flex; align-items: center; gap: 1.2rem; font-size: 1.8rem;}
.top-con .info-box .info-txt dl + dl {margin-top: 0.6rem;}
.top-con .info-box .info-txt dl dt {padding-left: 3rem; background-size: 2.4rem; background-repeat: no-repeat;}
.top-con .info-box .info-txt dl.tel dt {background-image: url(../img/main/ico_info_tel.svg);}
.top-con .info-box .info-txt dl.tel dd {color: #EFFD33; font-size: 2.4rem;}
.top-con .info-box .info-txt dl.time dt {background-image: url(../img/main/ico_info_time.svg);}
.top-con .info-box .info-txt dl.time dd {font-weight: 700;}
.top-con .info-box .info-link {display: flex; gap: 1.2rem; margin-top: 6.4rem;}
.top-con .info-box .info-link li {flex: 1;}
.top-con .info-box .info-link li a {display: block; text-align: center; padding-top: 9.6rem; color: var(--krds-light-color-text-basic); font-weight: 700; height: 14rem; border-radius: 3rem; background-color: rgba(255,255,255,0.8); background-repeat: no-repeat; background-position: center 2rem;}
.top-con .info-box .info-link li a.info-link01-ic {background-image: url(../img/main/ico_info01.svg);}
.top-con .info-box .info-link li a.info-link02-ic {background-image: url(../img/main/ico_info02.svg);}
.top-con .info-box .info-link li a.info-link03-ic {background-image: url(../img/main/ico_info03.svg);}
.top-con .info-box .info-link li a.info-link04-ic {background-image: url(../img/main/ico_info04.svg);}

.more-btn {position: absolute; z-index: 1; right: 0; top: 0.5rem; width: 4rem; height: 4rem; border-radius: 50%; background: var(--main-primary-80) url(../img/main/ico_more.svg) no-repeat center;}
.main-tit {margin-bottom: 1.6rem; font-size: 3rem; font-weight: 700;}

.board-wrap {padding: 8rem 0 3rem;}
.board-wrap .inner {display: flex; gap: 4rem;}
.board-wrap .inner > div {position: relative; flex: 1; min-width: 0;}
#news-board .tablist {display: flex; gap: 4.7rem; margin-bottom: 1.6rem;}
#news-board .tablist button {position: relative; font-size: 3rem; font-weight: 700; color: #868686;}
#news-board .tablist button + button::before {content: ''; position: absolute; z-index: 1; left: -2.7rem; top: 50%; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #d9d9d9; transform: translateY(-50%);}
#news-board .tablist button.select {color: var(--krds-light-color-text-basic);}
#news-board .dong-news {display: flex; flex-direction: column; padding: 3rem; gap: 1.6rem; border-radius: 2.6rem; box-shadow: var(--krds-shadow3);}
#news-board .dong-news li a {display: flex; justify-content: space-between;}
#news-board .dong-news li a .tit {position: relative; padding-left: 1rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#news-board .dong-news li a .tit::before {content: ''; position: absolute; z-index: 1; left: 0; top: 50%; width: 0.4rem; height: 0.4rem; border-radius: 1px; background: #5B5959; transform: translateY(-50%);}
#news-board .dong-news li a .date {color: var(--krds-light-color-text-disabled);}
#news-board .dong-news li:first-of-type {margin-bottom: 1rem; border-bottom: 1px solid #dedede;}
#news-board .dong-news li:first-of-type a {align-items: center; gap: 2.4rem; padding-bottom: 2.6rem; justify-content: flex-start;}
#news-board .dong-news li:first-of-type a .tit {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-left: 0; font-size: 2rem; font-weight: 700; padding-right: 7rem; white-space: wrap;}
#news-board .dong-news li:first-of-type a .tit::before {display: none;}
#news-board .dong-news li:first-of-type a .date {display: flex; flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; width: 9.6rem; height: 9.6rem; color: var(--krds-light-color-text-basic); border-radius: 50%; background: #ECEEF5;}
#news-board .dong-news li:first-of-type a .date strong {color: var(--main-primary-60); font-size: 2.8rem; line-height: 1.36;}

#gallery ul {display: flex; gap: 1.6rem;}
#gallery ul li {flex: 1; min-width: 0;}
#gallery ul li a {display: block;}
#gallery ul li a .pic {height: 28rem; border-radius: 2.4rem; overflow: hidden;}
#gallery ul li a .pic img {display: block; width: 100%; height: 100%; object-fit: cover;}
#gallery ul li a .txt {margin-top: 1.6rem;}
#gallery ul li a .txt strong {display: block; margin-bottom: 0.8rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#gallery ul li a .txt p {padding-left: 3rem; color: #555; background: url(/share/images/krds/ico_time.svg) no-repeat left center;}

#program {max-width: 186.8rem; margin: 8rem auto 10rem; padding: 8rem 0; border-radius: 50rem; background: url(../img/main/bg_program.png) no-repeat center/cover;}
#program .inner {position: relative;}
#program .main-tit {margin-bottom: 1rem;}
#program .program-list {display: flex; gap: 1.6rem;}
#program .program-list li {flex: 1; min-width: 0;}
#program .program-list li a {display: block; padding: 3rem; border-radius: 2.6rem; box-shadow: var(--krds-shadow2); background: #fff;}
#program .program-list li a .tag {display: flex; gap: 0.8rem; margin-bottom: 1.6rem;}
#program .program-list li a .tag i {padding: 0.4rem 1.4rem; border-radius: 3rem; color: #fff; background: #000;}
#program .program-list li a .tag i.add {background: #0C5BC3;}
#program .program-list li a .tag i.ing {background: #407D0A;}
#program .program-list li a .tag i.end {color: #1D2137; background: #D7DAE3;}
#program .program-list li a .tit {width: 100%; padding-bottom: 2.6rem; margin-bottom: 2.6rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 2rem; font-weight: 700; background: url(../img/main/ico_program_dash.svg) repeat-x left bottom;}
#program .program-list li a .info {display: flex; flex-direction: column; gap: 0.8rem;}
#program .program-list li a .info li {display: flex; gap: 1.2rem;}
#program .program-list li a .info li strong {font-weight: 400;}
#program .program-list li a .more {display: block; padding: 1rem 0; text-align: center; margin-top: 3.8rem; font-weight: 700; color: #fff; border-radius: 0.6rem; background: #444652;}
#program .more-btn {right: 2.4rem;}



/********************************************************************************** 반응형*********************************************************************/
@media (max-width: 1547px) {
	.top-con .inner {gap: 4rem;}
	.top-con #visual {width: 60%;}
	.top-con #visual .visual-swiper {width: 100%; height: auto;}
}

@media (max-width: 1199px) {
	.top-con .info-box {padding: 10rem 0; margin: 0;}
	.top-con .info-box .info-link {flex-wrap: wrap; margin-top: 4rem;}
	.top-con .info-box .info-link li {flex: 1 0 calc(50% - 0.6rem);}
}

@media (max-width: 1023px) {
	.top-con .inner {flex-direction: column; gap: 3rem;}
	.top-con #visual {width: 100%; margin-top: 3rem;}
	.top-con #visual .control {padding-right: 0;}
	.top-con .info-box::before {left: -1.6rem; width: calc(100% + 3.2rem); height: 100%; border-radius: 6rem 0 6rem 0.6rem;}
	.top-con .info-box .info-slogan {text-align: center;}
	.top-con .info-box .info-txt {display: flex; flex-direction: column; align-items: center;}

	.board-wrap .inner {flex-direction: column; gap: 6rem;}

	#program {margin: 6rem auto 7.5rem; padding: 3rem 0 5rem; border-radius: 0; background-image: url(../img/main/bg_program_m.png);}
	#program .program-list {flex-direction: column;}
}


@media (max-width: 767px) {
	.top-con .info-box {padding: 4rem 0;}
	.top-con .info-box::before {background-size: 50rem, 100%; background-position: right -10rem bottom -1rem, left top;}
	.top-con .info-box .info-link {gap: 0.8rem;}
	.top-con .info-box .info-link li a {height: 13rem; padding-top: 8.6rem; border-radius: 1.6rem; background-size: 6.2rem;}

	.more-btn {top: -2px; background-size: 2.4rem;}
	#news-board .tablist {gap: 3rem;}
	#news-board .tablist button + button::before {left: -1.6rem; width: 0.4rem; height: 0.4rem;}

	#news-board .dong-news {padding: 2rem;}
	#news-board .dong-news li:first-of-type {margin-bottom: 0;}
	#news-board .dong-news li:first-of-type a {gap: 1rem; padding-bottom: 2rem; flex-direction: column; align-items: flex-start;}
	#news-board .dong-news li:first-of-type a .date {width: auto; height: auto; padding: 0.4rem 1.8rem; flex-direction: row; border-radius: 5rem;}
	#news-board .dong-news li:first-of-type a .date strong {order: 2;}
	#news-board .dong-news li:first-of-type a .tit {padding-right: 0;}
	#news-board .dong-news li a {flex-direction: column;}

	#gallery ul li {display: none;}
	#gallery ul li:first-of-type {display: block;}
	#gallery ul li a .pic {height: auto;}

	#program .program-list li a {padding: 2rem;}
	#program .program-list li a .tag {margin-bottom: 1rem;}
	#program .program-list li a .tit {margin-bottom: 1.4rem; padding-bottom: 1.4rem;}
	#program .program-list li a .info {gap: 0.5rem;}
	#program .program-list li a .more {margin-top: 3rem;}

}


@media (max-width: 359px){
}