@charset 'utf-8';

.edu-component-box{display:flex;position:relative;margin:0 auto;max-width:91.8rem;height:84.9rem;overflow:hidden;}
.edu-component-box::before{content:'';position:absolute;top:50%;left:50%;z-index:-10;width:74rem;height:74rem;background:url(../img/intro/bg-edu-component.png) no-repeat center center / 100%;transform:translate(-50%,-50%);}
.edu-component-box ul{display:flex;align-items:center;gap:6rem;}
.edu-component-box ul > li{display:flex;justify-content:center;align-items:center;position:relative;width:25rem;height:25rem;border-radius:50%;border:4px solid var(--white100);box-shadow:0px 52px 56px -3px var(--color70);box-sizing:border-box;}
.edu-component-box ul > li::before{content:'';position:absolute;top:50%;width:3.2rem;height:3.2rem;border-radius:50%;border:4px solid var(--white100);transform:translate(-50%,-50%);box-sizing:border-box;}
.edu-component-box ul > li:nth-of-type(1){background:linear-gradient(142.26deg, var(--color108) 50%, var(--color109) 86.69%);}
.edu-component-box ul > li:nth-of-type(1)::before{right:-3.2rem;background:var(--color108);}
.edu-component-box ul > li:nth-of-type(2){width:30rem;height:30rem;background:linear-gradient(135.83deg, var(--color05) 50%, var(--color112) 84.51%);}
.edu-component-box ul > li:nth-of-type(2)::before{left:50%;top:50%;z-index:-10;width:35rem;height:35rem;border:none;background:url(/_res/yonsei_rc/yonseirc/img/intro/bg-edu-component-center.png);transform:translate(-50%,-50%);}
.edu-component-box ul > li:nth-of-type(3){background:linear-gradient(142.26deg, var(--color106) 50%, var(--color111) 86.69%);}
.edu-component-box ul > li:nth-of-type(3)::before{left:0;background:var(--color106);}
.edu-component-box ul > li > span{position:relative;font-weight:var(--font-weight-bold);font-size:2.4rem;line-height:3.36rem;letter-spacing:-0.02em;color:var(--white100);text-align:center;}
.edu-component-box ul > li > span::before{content:'';position:absolute;top:0;left:50%;background-repeat:no-repeat;background-size:100%;background-position:center;transform:translateX(-50%);}
.edu-component-box ul > li:nth-of-type(1) > span{padding:9.327rem 0 0;}
.edu-component-box ul > li:nth-of-type(1) > span::before{width:6rem;height:7rem;background-image:url(../img/intro/ico-component01.png)}
.edu-component-box ul > li:nth-of-type(2) > span{padding:9.149rem 0 0;}
.edu-component-box ul > li:nth-of-type(2) > span::before{width:7rem;height:6.8rem;background-image:url(../img/intro/ico-component02.png)}
.edu-component-box ul > li:nth-of-type(3) > span{padding:9.7rem 0 0;}
.edu-component-box ul > li:nth-of-type(3) > span::before{width:8.1rem;height:7.3rem;background-image:url(../img/intro/ico-component03.png)}

@media screen and (max-width:1024.98px){
	.edu-component-box{max-width:100%;height:auto;}
	.edu-component-box ul{flex-wrap:wrap;gap:3rem;width:100%;}
	.edu-component-box ul > li{width:100%;height:20rem;border-radius:1rem;}
	.edu-component-box ul > li:nth-of-type(1)::before{top:auto;bottom:-1.6rem;left:50%;width:1.6rem;height:1.6rem;border:2px solid var(--white100);}
	.edu-component-box ul > li:nth-of-type(2){width:100%;height:20rem;}
	.edu-component-box ul > li:nth-of-type(2)::before{display:none;}
	.edu-component-box ul > li:nth-of-type(3)::before{bottom:auto;top:0;left:50%;width:1.6rem;height:1.6rem;border:2px solid var(--white100);}
	.edu-component-box ul > li > span{font-size:1.8rem;line-height:2.76rem;}
	.edu-component-box ul > li:nth-of-type(1) > span{padding:5.327rem 0 0}
	.edu-component-box ul > li:nth-of-type(1) > span::before{width:3rem;height:3.5rem;}
	.edu-component-box ul > li:nth-of-type(2) > span::before{width:4.5rem;height:4.4rem;}
	.edu-component-box ul > li:nth-of-type(2) > span{padding:5.327rem 0 0}
	.edu-component-box ul > li:nth-of-type(3) > span{padding:5.85rem 0 0;}
	.edu-component-box ul > li:nth-of-type(3) > span::before{width:5.05rem;height:4.65rem;}

}