@charset "utf-8";


/* 공통 */
.tit-box {display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%;}
.tit-box .sec-tit {line-height: 1.4; font-weight: 700; font-size: 34px;}
@media only screen and (max-width: 1023px) {
	.tit-box .sec-tit {font-size: 28px;}
}
@media only screen and (max-width: 767px) {
	.tit-box .sec-tit {font-size: 24px;}
}

.main section {position: relative; margin-top: 60px;}
@media only screen and (max-width: 1023px) {
	.main section {margin-top: 40px;}
}

.bd-hover {transition: all .3s;}
.bd-hover:hover {border: 2px solid var(--primary400) !important; box-shadow: 12px 6px 50px 0 var(--shadow200) !important;}

.more-btn {flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: 18px;}
.more-btn i {flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; font-size: 10px; border-radius: 100%;}
@media screen and (max-width: 1023px) {
	.more-btn {font-size: 16px;}
}

/* section1 */
#section1 {display: flex; gap: 20px;}

.vi-swiper {width: calc(100% - 220px); height: 540px; border-radius: 20px; box-shadow: 1px 2px 50px 0 var(--shadow100);}
.vi-swiper .swiper-slide {position: relative; height: 100%;}
.vi-swiper .swiper-slide > img {position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;}
.vi-swiper .swiper-slide .txt-wrap {}
.vi-swiper .swiper-slide .txt-wrap strong {line-height: 1.5; font-weight: 700; font-size: 36px;}
.vi-swiper .swiper-slide .txt-wrap p {line-height: 1.4; font-size: 20px;}
.vi-swiper .swiper-control-st1 {position: absolute; left: 60px; bottom: 40px; z-index: 10; width: calc(100% - 120px);}
.vi-swiper .swiper-pagination {position: static; width: fit-content; font-size: 2rem; word-break: keep-all; white-space: nowrap;}
.vi-swiper .swiper-pagination span {color: var(--gray-75);}
.vi-swiper .swiper-pagination .swiper-pagination-current {font-weight: 700; color: #222;}
.vi-swiper .autoplay-progress {position: relative; width: 100%; height: 4px; background-color: var(--black20); border-radius: 10px; overflow: hidden;} 
.vi-swiper .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; z-index: 10; width: 100%; stroke-width: 10px; stroke: var(--primary700); fill: none; stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100; stroke-linecap: round;} 

#section1 .rg {display: flex; flex-direction: column; gap: 10px; width: 240px; height: -webkit-fill-available;}
#section1 .rg a {display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: -webkit-fill-available; padding: 20px; border: 1px solid var(--gray-e5); border-radius: 20px; box-shadow: 1px 2px 50px 0 var(--shadow100); transition: all .3s;}
#section1 .rg a span {line-height: 1.4; font-weight: 500; font-size: 20px;}
#section1 .rg a img {width: 60px; height: 60px;}

/* section2 */
#section2 .top strong {width: 100%; max-width: 200px;}
#section2 .bottom a i {transition: transform .3s;}
#section2 .bottom a:hover i {transform: translateX(10px);}

/* section3 */
#section3 .full-box {position: relative; overflow: hidden;}
#section3 .full-box:after {content: ''; position: absolute; right: 0; top: 0; z-index: 1; width: 100px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%); pointer-events: none;}
#section3 .apply-swiper {overflow: visible;}
#section3 .apply-swiper .swiper-slide {display: flex; align-items: center; gap: 15px; height: -webkit-fill-available; padding: 25px 30px; border-radius: 20px;}
#section3 .apply-swiper .item-green  {background-color: var(--cate1);}
#section3 .apply-swiper .item-orange {background-color: var(--cate2);}
#section3 .apply-swiper .item-blue   {background-color: var(--cate3);}
#section3 .apply-swiper .item-pink   {background-color: var(--cate4);}
#section3 .apply-swiper .item-yellow {background-color: var(--cate5);}

/* section4 */
#section4 .item {}
#section4 .item .img-wrap {}
#section4 .item .img-wrap img {margin: 0 auto;}

/* section5 */
#section5 .inner {display: flex; gap: 20px;}
#section5 .lf {width: calc(100% - 320px); padding: 30px 40px;}
.notice-list li a {display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-e5);}
.notice-list li a p {width: 100%; transition: color 0.3s;}
.notice-list li a:hover p {color: var(--primary500);}
.notice-list li a > *:not(p) {flex-shrink: 0;}
#section5 .rg {display: flex; flex-direction: column; gap: 15px; width: 300px; height: -webkit-fill-available;}
#section5 .rg a {display: flex; align-items: center; gap: 10px; height: -webkit-fill-available; padding: 20px;}


@media screen and (max-width: 1340px) {
	#section3 .full-box:after {display: none;}
	#section3 .apply-swiper {overflow: hidden;}
}
@media screen and (max-width: 1023px) {
	#section1 {flex-flow: column wrap;}
	.vi-swiper {width: 100%; height: auto;}
	.vi-swiper .swiper-slide {height: 0; padding-bottom: 45%;}
	.vi-swiper .swiper-slide .txt-wrap strong {font-size: 32px;}
	.vi-swiper .swiper-slide .txt-wrap p {font-size: 18px;}
	.vi-swiper .swiper-control-st1 {left: 40px; width: calc(100% - 80px);}
	#section1 .rg {flex-flow: row nowrap; gap: 10px; width: 100%; height: auto;}
	#section1 .rg a {display: flex; flex-flow: column wrap; height: auto;}
	#section1 .rg a img {width: 50px; height: 50px;}

	#section3 .apply-swiper .txt-wrap strong {font-size: 18px;}

	#section5 .inner {flex-flow: column wrap;}
	#section5 .lf {width: 100%;}
	#section5 .rg {width: 100%; flex-direction: row;}
	#section5 .rg a {flex: 1; padding: 15px;}
	#section5 .rg a strong {font-size: 18px;}
	#section5 .rg a .img-wrap {width: 50px; height: 50px;}
	.notice-list li a span {font-size: 14px;}
}
@media screen and (max-width: 900px) {
	#section2 .conser-wrap {flex-flow: column wrap;}
	#section2 .conser-wrap .img-wrap {width: 80px; height: 80px;}
	#section2 .conser-wrap .bottom {flex-direction: row-reverse;}

	#section4 .program-wrap {flex-flow: column wrap;}
	#section4 .item {padding: 20px;}
	#section4 .item .top {display: flex; align-items: center; gap: 10px; margin-bottom: 20px;}
	#section4 .item .img-wrap {margin: 0 !important;}
	#section4 .item .img-wrap img {width: 50px; height: 50px;}
}
@media screen and (max-width:767px) {
	.vi-swiper .swiper-slide .txt-wrap strong {font-size: 26px;}
	.vi-swiper .swiper-slide .txt-wrap p {font-size: 16px;}
	.vi-swiper .swiper-control-st1 {left: 25px; bottom: 25px; gap: 20px; width: calc(100% - 50px);}
	#section1 .rg a {padding: 15px;}
	#section1 .rg a span {font-size: 16px;}

	#section2 .conser-wrap .item {padding: 20px;}

	#section3 .apply-swiper .swiper-slide {height: auto; padding: 15px 20px;}

	#section4 .item p {font-size: 16px;}

	#section5 .tit-box {margin-bottom: 20px !important;}
	#section5 .lf {padding: 20px;}
	.notice-list li a p {font-size: 16px;}
}
@media screen and (max-width: 600px) {
	.vi-swiper .swiper-control-st1 {bottom: 15px;}

	#section5 .rg {flex-direction: column; height: auto;}
	#section5 .rg a {flex: unset; height: auto; background: url(../images/main_new/icon_section6_arrow_active.png) no-repeat center right 20px / 25px;}
	#section5 .rg a strong {font-size: 16px;}
}
@media screen and (max-width: 480px) {
	.vi-swiper .swiper-control-st1 {justify-content: space-between;}
	.vi-swiper .autoplay-progress {display: none;}
	#section1 .rg {flex-flow: column wrap;}

	#section2 .item .top {flex-flow: column wrap; margin-bottom: 20px !important;}
	/* #section2 .item .bottom {margin-top: 20px;} */
}
@media screen and (max-width: 400px){
	#section2 .item .bottom .img-wrap {display: none;}
}