@charset "UTF-8";

/* 서브비주얼 */
.sub-visual-box{position:relative;padding:19.8rem 2rem 8rem;width:100%;min-height:40rem;box-sizing:border-box;}
/* .sub-visual-box:before{content:'';display:block;position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--black25);} */
.sub-visual-box .sub-visual-img-box{position:absolute;top:0;left:0;z-index:-10;width:100%;height:100%;background:url(../img/common/img-sub-vi04.jpg) no-repeat center center / cover;}
.sub-visual-box .sub-visual-con{position:relative;z-index:10;margin:0 auto;max-width:152rem;width:100%;box-sizing:border-box;}
.sub-visual-box h2{padding:0 0 3.2rem;font-weight:var(--font-weight-bold);font-size:5.2rem;line-height:6.24rem;letter-spacing:-0.06em;color:var(--white100);}

/* 브레드크럼 */
.path-box{display:flex;justify-content:space-between;align-items:center;}
.path-box .path{display:flex;align-items:center;gap:0 1.4rem;}
.path-box .path-home{display:inline-flex;align-items:center;gap:0 1.4rem;}
.path-box .path-home span{display:block;width:2.4rem;height:2.4rem;background:url(../img/common/ico-home@2x.png) no-repeat center center / 100%;text-indent:-9999px;}
.path-box .path-home:after{content:'';display:block;width:4px;height:5px;border-radius:50%;background:var(--white100);}

.path-box .path > .path-depth-wrap > ul{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;}
.path-box .path > .path-depth-wrap > ul > li{display:inline-flex;align-items:center;gap:4px;position:relative;}
.path-box .path > .path-depth-wrap > ul > li:after{content:'';display:block;width:2.4rem;height:2.4rem;background:url(../img/common/ico-arrow-path@2x.png) no-repeat center center / 100%;transition:transform .3s;}
.path-box .path > .path-depth-wrap > ul > li.active:after{transform:rotate(180deg);}
.path-box .path > .path-depth-wrap > ul > li > a{font-size:2rem;line-height:2.8rem;color:var(--white100);letter-spacing:-0.02em;}

.path-depth{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:20;padding:1.6rem 1.2rem;min-width:24rem;border:1px solid var(--color52);border-radius:1.6rem;background:var(--white100);box-shadow:4px 4px 16px 0px var(--black10);box-sizing:border-box;}
.path-depth li + li{padding:8px 0 0;}
.path-depth li a{display:block;padding:6px 1.6rem;border-radius:4px;font-size:1.6rem;line-height:2.24rem;font-weight:var(--font-weight-medium);color:var(--black01);}
.path-depth li a.active{color:var(--color12);font-weight:var(--font-weight-bold);text-decoration:underline;text-underline-offset:4px;}
.path-depth li a:hover{background:var(--color54);}

.path-depth.is-reverse{left:auto !important;right:0;} /* 레이어가 화면 밖으로 넘어가는 문제 해결 / 스크립트와 동시 적용해야 함 */

@media screen and (max-width:1024.98px){
	/* 서브비주얼 */
	.sub-visual-box{padding:18rem 2rem 4rem;min-height:25rem;}
	.sub-visual-box .sub-visual-con{}
	.sub-visual-box h2{padding:0 0 1rem;font-size:3rem;line-height:4.5rem;}

	/* 브레드크럼 */
	.path-box .path-home{width:1.8rem;height:1.8rem;}

	.path-box{display:block;padding:0;border-width:3px;}
	.path-box .path{display:block;}
	.path-box .path-home{display:none;}

	.path-box .path > .path-depth-wrap > ul{gap:5px 8px;}
	.path-box .path > .path-depth-wrap > ul > li{gap:2px;}
	.path-box .path > .path-depth-wrap > ul > li:after{width:2rem;height:2rem;}
	.path-box .path > .path-depth-wrap > ul > li > a{font-size:1.5rem;line-height:2.1rem;}

	.path-depth{padding:1.2rem;min-width:15rem;}
	.path-depth li + li{padding:4px 0 0;}
	.path-depth li a{padding:5px;font-size:1.4rem;line-height:2rem;}
}