@charset 'utf-8';

.path-box{position:relative;z-index:30;margin:-3.2rem auto;padding:2px 6px;max-width:152rem;border-radius:3.2rem;border:2px solid var(--white50);box-sizing:border-box;box-shadow:0px 4px 20px 0px var(--black10);}
.path-box::before{content:'';position:absolute;z-index:-10;inset:0;background:var(--white20);backdrop-filter:blur(1rem);border-radius:3.2rem;}
.path-box .path{display:flex;align-items:center;}
.path-box .path .path-home{display:inline-block;position:relative;width:5.2rem;height:5.2rem;border-radius:50%;background:var(--color78);}
.path-box .path .path-home::before{content:'';position:absolute;top:50%;left:50%;width:2.8rem;height:2.8rem;background:url(/_res/yonsei_rc/creyon/img/common/ico-path-home@2x.png) no-repeat center center / 100%;transform:translate(-50%, -50%);}
.path-depth-wrap > ul{display:flex;}
.path-depth-wrap > ul > li.active .path-depth{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
.path-depth-wrap > ul > li.active .path-depth:not(:has(li)){display:none;}
.path-depth-wrap > ul > li{position:relative;width:34.5rem;border-right:1px solid var(--black20);}
.path-depth-wrap ul > li .path-selected{display:block;position:relative;z-index:30;padding:1.55rem 2rem;}
.path-depth-wrap ul > li .path-selected::after{content:'';position:absolute;top:50%;right:2rem;width:1.2rem;height:1.2rem;background:url(/_res/yonsei_rc/creyon/img/common/ico-path-arrow@2x.png) no-repeat center center / 100%;transform:translateY(-50%);}
.path-depth-wrap ul > li .path-selected > span{font-weight:var(--font-weight-medium);font-size:1.8rem;line-height:2.88rem;color:var(--color77);}
.path-depth-wrap .path-depth{display:block;position:absolute;top:calc(100% + 0.5rem);left:0;z-index:20;padding:1.6rem;width:100%;border:1px solid var(--color76);border-radius: 6px;box-sizing:border-box;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;}
.path-depth-wrap .path-depth::before{content:'';position:absolute;inset:0;z-index:-10;backdrop-filter:blur(1.2rem);-webkit-backdrop-filter:blur(1.2rem);background:rgba(255,255,255,0.6);border-radius:6px;}
.path-depth-wrap .path-depth > li > a{display:block;padding:1.85rem 2.4rem;border-radius:1.2rem;font-weight:var(--font-weight-semibold);font-size:1.6rem;line-height:2.2rem;color:var(--color93);transition:color 0.3s, background 0.3s;}
.path-depth-wrap .path-depth > li > a:hover{backdrop-filter: blur(1.5rem);background:var(--color94);color:var(--color78);}

@media screen and (max-width:1024.98px){
	.path-box{margin:0;padding:0;border:none;box-shadow:none;}
	.path-box .path{width:100%;}
	.path-box .path .path-home{display:none;}
	.path-box .path .path-home::before{display:none;}
	.path-depth-wrap{width:100%;}
	.path-depth-wrap > ul > li{width:100%;border-top:1px solid var(--black20);border-bottom:1px solid var(--black20);}
	.path-depth-wrap > ul > li:last-of-type{border-right:none;}
	.path-depth-wrap .path-depth{top:100%;padding:2rem 1rem;}
	.path-depth-wrap .path-depth > li > a{padding:1rem;font-size:1.3rem;line-height:2rem;}
}