/*heading*/
.heading-school {position: relative;border-radius: 5px;height: 370px;overflow: hidden;background: url(/_res/unist/unist/img/content/img-school01.png) no-repeat center;background-size: cover;}
.heading-school.bg02 {background: url(/_res/unist/unist/img/content/img-school02.png)no-repeat center;background-size: cover;}
.heading-school:before {width: 100%;height: 100%;content: "";position: absolute;background: #000000;opacity: 0.4;left: 0;top: 0;z-index	: 0;}
.heading-school .box-img {height: 370px;}
.heading-school .box-img img {width: 100%;height: 100%;object-fit: cover;}
.heading-school .content {padding: 30px;width: 100%;height: 100%;box-sizing: border-box;display: flex;justify-content: space-between;gap: 10px;}
.heading-school .content .item {text-align: center;flex: 0 0 calc(33.33% - 10px);display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 16px;position: relative;padding: 0 20px;box-sizing: border-box;}
.heading-school .content .item:after {content: "";position: absolute;width: 2px;height: 174px;top: 50%;right: -10px;transform: translateY(-50%);background: #ffffff;opacity: 0.3}
.heading-school .content .item:last-child:after  {display: none;}
.heading-school .content .item .num {font-family: Prompt;font-weight: 600;font-size: 80px;line-height: 100%;letter-spacing: 0;text-align: center;text-transform: uppercase;color: rgba(255, 255, 255, 1);position: relative;-webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.7);text-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);backdrop-filter: blur(4.55px);-webkit-mask: text;-webkit-mask-image: linear-gradient(#fff, #fff);}
.heading-school .content .item .txt {color: #FFFFFF;font-family: Pretendard;font-weight: 700;font-size: 24px;line-height: 110.00000000000001%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;display: -webkit-box;-webkit-line-clamp: unset;-webkit-box-orient: vertical;overflow: hidden;}


/*school*/
.school-wrap {max-width: 1056px;margin: 0 auto;width: 100%;}
.school-top {background: url(/_res/unist/unist/img/content/bg-school-txt.png)no-repeat;background-size: 100%;padding: 120px 20px 0;text-align: center;margin: 0 0 60px;background-position: center;}
.school-top .title {font-weight: 800;font-size: 40px;line-height: 110.00000000000001%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #001A54;padding: 0 0 30px;}
.school-top .txt {font-weight: 600;font-size: 20px;line-height: 32px;letter-spacing: -0.1px;text-align: center;vertical-align: middle;color: #333333;padding: 0 0 32px;}

.school-bot {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;padding: 0 92px;}
.school-bot .col > ul {display: flex;flex-direction: column;gap: 10px;}
.school-bot .col:nth-child(odd) {padding-top: 191px;}
.school-bot .col > ul > li {position: relative;max-width: unset;width: 100%;position: relative;border-radius: 5px;overflow: hidden;}
.school-bot .col > ul > li:hover .img-wrap img {transform: scale(1.1)}
.school-bot .col > ul > li:before {width: 100%;height: 100%;content: "";position: absolute;background: linear-gradient(0deg, #000000 0%, rgba(102, 102, 102, 0.3) 100%);opacity: 0.7;left: 0;top: 0;z-index: 1;}
.school-bot .col > ul > li.no-bg:before {display: none;}
.school-bot .col > ul > li .img-wrap {overflow: hidden;}
.school-bot .col > ul > li .img-wrap img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease}
.school-bot .col > ul > li .txt-wrap {position: absolute;top: 0;left: 0;display: flex;flex-direction: column;padding: 20px;width: 100%;height: 100%;box-sizing: border-box;align-items: center;justify-content: center;z-index: 10;}
.school-bot .col > ul > li .ico {padding: 0 0 20px;}
.school-bot .col > ul > li .txt {font-weight: 700;font-size: 20px;line-height: 20px;letter-spacing: -0.1px;text-align: center;vertical-align: middle;color: #fff;padding: 0 0 24px;}
.school-bot .col > ul > li .num {font-family: Prompt;font-weight: 700;font-size: 50px;line-height: 110.00000000000001%;letter-spacing: 0;text-align: center;vertical-align: middle;color: #fff;padding: 0 0 10px;}
.school-bot .col > ul > li .num > span {font-weight: 300;font-size: 20px;}
.school-bot .col > ul > li .num > span.txt02 {display: block;font-size: 16px;line-height: 20px;letter-spacing: -0.2px;padding: 0 0 8px;font-weight: 700;}
.school-bot .col > ul > li .desc {font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #fff;}
.school-bot .col > ul > li .mark{font-weight: 500;font-size: 13px;line-height: 110.00000000000001%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #fff;position: absolute;bottom: 20px;}
.school-bot-swiper{display: none;}
/*status*/
.status-head {border-radius: 5px;overflow: hidden;position: relative;}
.status-head:before {width: 100%;height: 100%;content: "";position: absolute;background: #004BAE;opacity: 0.65;inset:0;z-index: 1;}
.status-head:after {width: 100%;height: 100%;content: "";position: absolute;background: linear-gradient(360deg, #012554 0%, rgba(102, 102, 102, 0) 100%);left: 0;top: 0;z-index: 1;}

.status-head .content-wrap {padding: 0 80px;width: 100%;height: 100%;box-sizing: border-box;position: absolute;top: 50%;left: 0;transform: translateY(-50%);display: flex;justify-content: space-between;align-items: center;gap: 20px 40px;z-index: 10;}
.status-head .content-wrap .left > p{font-weight: 700;font-size: 32px;line-height: 110.00000000000001%;letter-spacing: 0;vertical-align: middle;color: #fff;}
.status-head .content-wrap .right > p {font-family: Prompt;font-weight: 700;font-size: 60px;line-height: 110.00000000000001%;letter-spacing: 0;text-align: right;vertical-align: middle;color: #fff;}
.status-head .content-wrap .right > p > span {font-weight: 300;font-size: 20px;}
.status-head .content-wrap .right > span {font-weight: 500;font-size: 20px;line-height: 20px;letter-spacing: -0.2px;text-align: right;vertical-align: middle;color: #fff;display: block;}

.status-head .img-wrap img {width:100%;height: 100%;object-fit: cover;}
.school-bot-progress {
	display: none;
}

@media (max-width: 1024px) {
	.school-bot {padding: 0 20px;}
	.school-top {padding: 50px 0 0;}
	.school-bot .col > ul > li .num {font-size: 40px;}
}
@media (max-width: 768px) {
	
	.school-top {margin: 0 0 30px;padding: 20px 0 0 0;background:transparent;}
	.school-top .title {font-size: 32px;padding: 0 0 20px;line-height: 42px;}
	.school-top .txt {font-size: 16px;line-height: 22px;padding: 0 0 40px;}

	.school-bot {grid-template-columns: repeat(1, 1fr);display: none;}
	.school-bot .col:nth-child(odd) {padding-top: 0;}

	.school-bot-swiper{display: block;border-radius: 5px;}
	.school-bot-swiper .swiper-slide {position: relative;max-width: unset;width: 100%;position: relative;overflow: hidden;height: 372px;}
	.school-bot-swiper .swiper-slide:hover .img-wrap img {transform: scale(1.1)}
	.school-bot-swiper .swiper-slide:before {width: 100%;height: 100%;content: "";position: absolute;background: linear-gradient(0deg, #000000 0%, rgba(102, 102, 102, 0.3) 100%);opacity: 0.7;left: 0;top: 0;z-index: 1;}
	.school-bot-swiper .swiper-slide.no-bg:before {display: none;}
	.school-bot-swiper .swiper-slide .img-wrap {height: 100%;}
	.school-bot-swiper .swiper-slide .img-wrap img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease}
	.school-bot-swiper .swiper-slide .txt-wrap {position: absolute;top: 0;left: 0;display: flex;flex-direction: column;padding: 20px;width: 100%;height: 100%;box-sizing: border-box;align-items: center;justify-content: center;z-index: 10;}
	.school-bot-swiper .swiper-slide .ico {padding: 0 0 20px;}
	.school-bot-swiper .swiper-slide .txt {font-weight: 700;font-size: 20px;line-height: 20px;letter-spacing: -0.1px;text-align: center;vertical-align: middle;color: #fff;padding: 0 0 24px;}
	.school-bot-swiper .swiper-slide .num {font-family: Prompt;font-weight: 700;font-size: 50px;line-height: 110.00000000000001%;letter-spacing: 0;text-align: center;vertical-align: middle;color: #fff;padding: 0 0 10px;}
	.school-bot-swiper .swiper-slide .num > span {font-weight: 300;font-size: 20px;}
	.school-bot-swiper .swiper-slide .num > span.txt02 {display: block;font-size: 16px;line-height: 20px;letter-spacing: -0.2px;padding: 0 0 8px;font-weight: 700;}
	.school-bot-swiper .swiper-slide .desc {font-weight: 500;font-size: 16px;line-height: 24px;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #fff;}
	.school-bot-swiper .swiper-slide .mark{font-weight: 500;font-size: 13px;line-height: 110.00000000000001%;letter-spacing: -0.2px;text-align: center;vertical-align: middle;color: #fff;position: absolute;bottom: 20px;}

	.status-head .content-wrap {padding: 20px;}
	.status-head .content-wrap .left > p {font-size: 22px;}
	.status-head .content-wrap .right > p {font-size: 50px;}
	.status-head .content-wrap .right > span {font-size: 18px;text-align: center;line-height: 20px;}

	.heading-school {background: url(/_res/unist/unist/img/content/img-school01-mo.png) no-repeat center left;background-size:cover;height: auto;}
	.heading-school:before {content:none;}
	.heading-school.bg02 {background: url(/_res/unist/unist/img/content/img-school02-mo.png)no-repeat center;background-size: cover;}
	.heading-school .content {flex-direction: column;gap:0;padding: 21.5px 30px;}
	.heading-school .content .item {gap: 0;padding: 10px 20px;flex-direction: row-reverse;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
	.heading-school .content .item:last-child {padding-bottom: 0;border-bottom:0;}
	.heading-school .content .item .num {font-size: 72px;line-height: 150%;}
	.heading-school .content .item .txt {font-size: 18px;}
	.heading-school .content .item .ico {display:none;}
	.heading-school .content .item:after {display: none;}

	.school-bot-progress {display: block;position: relative;margin-top: 12px;background: rgba(0, 0, 0, 0.1);border-radius: 5px;top: -3px;overflow: hidden;}
	.swiper-container-horizontal>.swiper-pagination-progressbar {top: -3px;height: 5px;}
	.school-bot-progress .swiper-pagination-progressbar-fill {border-radius: 5px;background: #001A54;}
}

@media (max-width: 500px) {
	.status-head .img-wrap {height: 100%;}
	.status-head {height: calc(266/400*100vw)}
	.status-head .content-wrap {flex-direction: column;gap: 28px;justify-content: center;}
}

@media (max-width: 400px) {
	.school-bot {padding: 0;}
	.status-head .content-wrap {flex-direction: column;justify-content: center;gap:20px;}

}