@charset "utf-8";

.top-footer-box{position:relative;width:100%;overflow:hidden;}
.top-footer-box.active{background:var(--color03) url(../../_share/img/sj-common/bg-top-footer.jpg) no-repeat top center/cover;}
.top-footer-box.active:before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--color01);}
.top-footer-box .inner-foot-box{margin:0 auto;padding:0;max-width:160rem;}

.related-wrap{display:flex;position:relative;}
.related-box{width:50%;box-sizing:border-box;}
.related-box .btn-related{display:block;position:relative;padding:3.2rem 9rem 3.2rem 2.4rem;background:var(--color01);font-size:2rem;line-height:2.6rem;font-weight:var(--font-weight-bold);color:var(--white100);}
.related-box .btn-related:first-of-type{border-right:1px solid var(--white25);}
:has(.related-box.active) .btn-related:first-of-type{border-right:0;}
.related-box .btn-related:before{content:'';position:absolute;top:0;right:100%;width:100vw;height:100%;background:var(--color01);}
.related-box .btn-related:after{content:'';display:block;position:absolute;top:50%;right:2.4rem;width:5.4rem;height:5.4rem;border:1px solid var(--white50);border-radius:50%;background:url(../../_share/img/sj-common/ico-arrow-related%402x.png) no-repeat center center / 1.8rem;transform:translateY(-50%);transition:all .3s;}
.related-box:nth-of-type(2) .btn-related:before{right:unset;left:100%;}
.related-box.active .btn-related{background:transparent;}
.related-box.active .btn-related:before{opacity:0;}
.related-box.active .btn-related:after{background:url(../../_share/img/sj-common/ico-footer-related%402x.png) no-repeat center center / 1.8rem;transform:translateY(-50%) rotate(180deg);}

.related-box .related-list-box{position:absolute;top:9rem;left:0;z-index:20;width:100%;box-sizing:border-box;opacity:0;visibility:hidden;transition:opacity 0.3s;}
.related-box .related-list-box .academic-list p{font-size:2rem;line-height:3rem;color:var(--white100);font-weight:var(--font-weight-bold);letter-spacing:-0.01em;}
.related-box .related-list-box .academic-list p > span{padding:0 1.9rem 0 0;font-size:6rem;line-height:7rem;color:var(--white100);font-weight:var(--font-weight-medium);letter-spacing:0;}
.related-box .related-list:not(.academic-list){display:none;margin:5.5rem 2.4rem 27rem;box-sizing:border-box;}
.related-box .academic-list{display:none;padding:5.5rem 2.4rem 18.9rem;box-sizing:border-box;}
.related-box .academic-list.footer-bread{padding:5.5rem 2.4rem 0;}
.related-box.active .related-list:not(.academic-list){display:flex;flex-wrap:wrap;position:relative;}
.related-box.active .academic-list{display:block;}
.related-box .academic-list > li:nth-of-type(n+2){padding-top:10.5rem;}
.related-box .academic-list > li > a{display:block;padding:0 0 6.2rem;}
.related-box .academic-list > li > a span{font-size:2rem;line-height:3rem;color:var(--white100);font-weight:var(--font-weight-bold);letter-spacing:-0.01em;}
.related-box .academic-list > li > a .eng{padding:0 1.9rem 0 0;font-size:6rem;line-height:7rem;color:var(--white100);font-weight:var(--font-weight-medium);letter-spacing:0;}
.related-box .academic-list > li > ul{display:flex;flex-wrap:wrap;position:relative;margin:0 -3rem;}

.related-box .related-list:not(.academic-list) > li > a,
.related-box .academic-list > li > ul > li > a{display:block;font-size:2rem;line-height:2.6rem;color:var(--color43);font-weight:var(--font-weight-bold);letter-spacing:-0.015em;}
.related-box .academic-list > li > ul > li > ul{padding:2.4rem 0 0;}
.related-box .academic-list > li > ul > li > ul > li{padding:0 0 1rem;}
.related-box .academic-list > li > ul > li > ul > li:last-of-type{padding:0;}
.related-box .academic-list > li > ul > li > ul > li > a{display:block;font-size:1.5rem;line-height:2.1rem;color:var(--white100);letter-spacing:-0.015em;}
.related-box .academic-list > li > ul > li > ul > li > a > span{position:relative;}
.related-box .academic-list > li > ul > li > ul > li > a > span::before{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--color01);transform:scaleX(0);transform-origin:left bottom;transition:transform .6s cubic-bezier(.52,.11,.16,1);}
.related-box .academic-list > li > ul > li > ul > li > a:hover > span::before{transform: scaleX(1);transition: transform .6s cubic-bezier(.52,.11,.16,1);}
 

/* 공통 너비, 구분선 */
.related-box .related-list:not(.academic-list):before,
.related-box .academic-list > li > ul:before{content:'';position:absolute;top:0;left:20%;width:1px;height:100%;background:var(--color10);opacity:.06;}
.related-box .related-list:not(.academic-list):after,
.related-box .academic-list > li > ul:after{content:'';position:absolute;top:0;left:80%;width:1px;height:100%;background:var(--color10);opacity:.06;}
.related-box .related-list:not(.academic-list) > li,
.related-box .academic-list > li > ul > li{padding:0 3rem;width:20%;box-sizing:border-box;}
.related-box .related-list:not(.academic-list) > li:nth-of-type(n+6),
.related-box .academic-list > li > ul > li:nth-of-type(n+6){padding-top:5.5rem;}
.related-box .related-list:not(.academic-list) > li:nth-of-type(1):before,
.related-box .academic-list > li > ul > li:nth-of-type(1):before{content:'';position:absolute;top:0;left:40%;width:1px;height:100%;background:var(--color10);opacity:.06;}
.related-box .related-list:not(.academic-list) > li:nth-of-type(1):after,
.related-box .academic-list > li > ul > li:nth-of-type(1):after{content:'';position:absolute;top:0;left:60%;width:1px;height:100%;background:var(--color10);opacity:.06;}

@media screen and (max-width: 1024.98px) {
	.related-box .btn-related{padding:3rem 7.5rem 3rem 2rem;font-size:1.8rem;line-height:2.4rem;}
	.related-box .btn-related:after{width:4.4rem;height:4.4rem;background-size:1.4rem;}
	.related-box .related-list-box{top:8.4rem;}
	.related-box .related-list:not(.academic-list){margin:3rem 5px 9rem;}
	.related-box .academic-list{padding:3rem 2rem 9rem;}
	.related-box .academic-list.footer-bread{padding:3rem 2rem 0;}
	.related-box .related-list li a{font-size:1.6rem;line-height:2.2rem;}	
	.related-box .academic-list > li:nth-of-type(n+2){padding-top:6.5rem;}
	.related-box .academic-list > li > a{padding:0 0 3rem;}
	.related-box .academic-list > li > a span{font-size:1.6rem;line-height:2.2rem;}
	.related-box .academic-list > li > a .eng{padding:0 1rem 0 0;font-size:3rem;line-height:4rem;}
	.related-box .academic-list > li > ul{margin:0 -1.5rem;}
	.related-box .related-list:not(.academic-list) > li > a,
	.related-box .academic-list > li > ul > li > a{font-size:1.8rem;line-height:2.2rem;font-weight:var(--font-weight-semibold)}
	.related-box .academic-list > li > ul > li > ul > li > a{font-size:1.4rem;line-height:2rem;}
	.related-box .related-list-box .academic-list p{font-size:1.6rem;line-height:2.2rem;}
	.related-box .related-list-box .academic-list p > span{padding:0 1rem 0 0;font-size:3rem;line-height:4rem;}
	/* 공통 너비, 구분선 */
	.related-box .related-list:not(.academic-list):before,
	.related-box .academic-list > li > ul:before{left:33.333%;}
	.related-box .related-list:not(.academic-list):after,
	.related-box .academic-list > li > ul:after{left:66.666%;}
	.related-box .related-list:not(.academic-list) > li,
	.related-box .academic-list > li > ul > li{padding:0 1.5rem;width:33.333%;}
	.related-box .related-list:not(.academic-list) > li:nth-of-type(n+4),
	.related-box .academic-list > li > ul > li:nth-of-type(n+4){padding-top:6rem;}
	.related-box .related-list:not(.academic-list) > li:nth-of-type(1):before,
	.related-box .related-list:not(.academic-list) > li:nth-of-type(1):after,
	.related-box .academic-list > li > ul > li:nth-of-type(1):before,
	.related-box .academic-list > li > ul > li:nth-of-type(1):after{display:none;}
}

@media screen and (max-width: 768px) {
	.related-wrap{flex-direction:column;height:auto!important;}
	.related-box{position:relative;width:100%;}
	.related-box:nth-of-type(1):after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--white25);}
	.related-box .btn-related:before{display:none;}
	.related-box .related-list-box{position:relative;top:unset;}
	.related-box.active .related-list-box{height:auto;}

	/* 공통 너비, 구분선 */
	.related-box .related-list:not(.academic-list):before,
	.related-box .academic-list > li > ul:before{left:50%;}
	.related-box .related-list:not(.academic-list):after,
	.related-box .academic-list > li > ul:after{display:none;}
	.related-box .related-list:not(.academic-list) > li,
	.related-box .academic-list > li > ul > li{width:50%;}
	.related-box .related-list:not(.academic-list) > li:nth-of-type(n+3),
	.related-box .academic-list > li > ul > li:nth-of-type(n+3){padding-top:5rem;}
}

/*
@media screen and (max-width: 480px) {
	.related-box .related-list:not(.academic-list) > li > a{position:relative;padding:0 0 1.5rem;}
	.related-box .academic-list > li > ul > li > ul{position:relative;padding:2rem 0 1.5rem;}
	.related-box .related-list:not(.academic-list) > li > a:after,
	.related-box .academic-list > li > ul > li > ul:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--color10);opacity:.06;}
	.related-box .related-list:not(.academic-list) > li:last-of-type > a,
	.related-box .academic-list > li > ul > li:last-of-type > ul{padding-bottom:0;}
	
	.related-box .related-list:not(.academic-list) > li:last-of-type > a:after,
	.related-box .academic-list > li > ul > li:last-of-type > ul:after{display:none;}
	* 공통 너비, 구분선 *
	.related-box .related-list:not(.academic-list):before,
	.related-box .academic-list > li > ul:before{display:none;}
	.related-box .related-list:not(.academic-list) > li,
	.related-box .academic-list > li > ul > li{width:100%;}
	.related-box .related-list:not(.academic-list) > li:nth-of-type(n+2),
	.related-box .academic-list > li > ul > li:nth-of-type(n+2){padding-top:1.5rem;}
}
*/