@charset "utf-8";

.main-invi-box{flex:1;}
.main-invi-box > ul{display:flex;gap:2rem;}
.main-invi-box > ul > li{width:calc(25% - 1.5rem);border:1px solid var(--white100);border-radius:8px;box-sizing:border-box;}
.main-invi-box > ul > li:hover{border:1px solid var(--color86);transition:border 0.3s ease;}
.main-invi-box > ul > li > a{display:flex;justify-content:space-between;flex-direction:column;gap:6rem;height:100%;position:relative;padding:2.8rem 1.8rem;border:1px solid var(--color94);border-radius:8px;background:var(--color95) url(/_res/sejong/recruit/img/main/bg-main-invi.png) no-repeat 0 0/cover;box-sizing:border-box;transition:border 0.3s ease;}
.main-invi-box > ul > li > a:hover{border:1px solid var(--color86);}
.main-invi-box > ul > li > a:hover::before{content:'';position:absolute;top:0;left:50%;width:4.3rem;height:4.3rem;border-radius:50%;background:var(--color86) url(/_res/sejong/recruit/img/main/icon-main-invi-bell@2x.png) no-repeat center center/1.7rem 1.8rem;transform:translate(-50%,-50%);}

.main-invi-box .invi-day-box{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;align-items:center;}
.main-invi-box .invi-day-box .day{font-size:2rem;font-weight:var(--font-weight-bold);color:var(--black01);line-height:2.6rem;letter-spacing:-0.01em;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;transition:color 0.3s ease;}
.main-invi-box a:hover .invi-day-box .day{color:var(--color86);}
.main-invi-box .invi-day-box .noti-day{font-size:1.4rem;font-weight:var(--font-weight-semibold);color:var(--black08);line-height:2rem;}

.main-invi-box .invi-con-box .status-box ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 0 2.6rem;}
.main-invi-box .invi-con-box .status-box ul li{padding:6.5px 2rem;border-radius:3.5rem;background-color:var(--color85);font-size:1.4rem;font-weight:var(--font-weight-bold);color:var(--white100);line-height:2rem;letter-spacing:-0.02em;box-sizing:border-box;}
.main-invi-box .invi-con-box .status-box ul li.teacher{background-color:var(--color85);}
.main-invi-box .invi-con-box .status-box ul li.status01{background-color:var(--color86);}
.main-invi-box .invi-con-box .status-box ul li.status02{background-color:var(--color83);}
.main-invi-box .invi-con-box .status-box ul li.status03{background-color:var(--color96);}
.main-invi-box .invi-con-box .invi-txt{font-size:2.8rem;font-weight:var(--font-weight-bold);color:var(--color85);line-height:3.8rem;text-align:center;letter-spacing:-0.01em;}

.main-invi-box .invi-date-box{display:flex;flex-direction:column;gap:3.3rem;}
.main-invi-box .invi-date-box .date-title{display:flex;justify-content:center;align-items:center;gap:8px;position:relative;font-size:1.6rem;font-weight:var(--font-weight-bold);color:var(--black03);line-height1;letter-spacing:-0.01em;text-align:center;}
.main-invi-box .invi-date-box .date-title::before{content:'';width:2.4rem;height:1.7rem;background:url(/_res/sejong/recruit/img/main/img-invi-application-period@2x.png) no-repeat 0 0/100%;}
.main-invi-box .invi-date-box .date-title::after{content:'';bottom:-1.6rem;left:50%;position:absolute;width:2.8rem;height:1px;background-color:var(--color97);transform:translateX(-50%);}
.main-invi-box .invi-date-box .date-txt{display:flex;justify-content:center;flex-wrap:wrap;gap:0 3px;font-size:1.4rem;font-weight:var(--font-weight-semibold);color:var(--black06);line-height:2rem;letter-spacing:-0.02em;text-align:center;word-break:keep-all;}

@media screen and (max-width:1500px){
	.main-invi-box > ul{gap:1rem;}
	.main-invi-box > ul > li{width:calc(25% - 7.5px);}
	.main-invi-box > ul > li > a{padding:2rem 1.5rem;}
}

@media screen and (max-width:1280px){
	.main-invi-box > ul{flex-wrap:wrap;}
	.main-invi-box > ul > li{width:calc(50% - 5px);}
}

@media screen and (max-width:1024.98px){
	.main-invi-box{width:100%;}
}

@media screen and (max-width:768px){
	.main-invi-box > ul > li{width:100%;}
	.main-invi-box > ul > li > a{gap:3.4rem;padding:2.8rem 2.5rem;}
	.main-invi-box .invi-day-box .day{font-size:1.5rem;line-height:2.1rem;text-underline-offset:5px;}
	.main-invi-box .invi-con-box .status-box ul{padding:0 0 2rem;}
	.main-invi-box .invi-con-box .invi-txt{font-size:2.5rem;line-height:3.5rem;}
	.main-invi-box .invi-date-box{gap:2.1rem;}
	.main-invi-box .invi-date-box .date-title::after{bottom:-1.2rem;}
}