@charset "utf-8";

/* 캠퍼스맵 공통 및 레이아웃 */
.campus-header-wrap .campus-header-box{display:flex;align-items:center;position:relative;z-index:900;background:var(--white100);}
.map-wrap{display:flex;flex-wrap:wrap;position:relative;height:calc(100vh - 8.5rem);}
.map-wrap .map-info-wrap{position:relative;left:0;z-index:40;width:33.9rem;height:100%;border-right:1px solid var(--color56);box-sizing:border-box;}
.map-wrap .map-view-wrap{position:absolute;left:0;width:100%;height:100%;}
.map-wrap .map-view-wrap:only-child{left:0;width:100%;}
.map-wrap.info-close .map-info-wrap{left:0;width:33.9rem;height:100%;}
.map-wrap.info-close .map-view-wrap{left:0;width:100%;height:100%;}

/* 캠퍼스맵 헤더 */
.campus-header-box{display:flex;justify-content:space-between;align-items:center;position:relative;margin:0 auto;padding:1.2rem 2rem;border-bottom:1px solid var(--color56);width:100%;box-sizing:border-box;}
.campus-header-box .logo-wrap a{display:flex;align-items:center;}
.campus-header-box .logo-wrap a h1{max-width:19.5rem;}
.campus-header-box .logo-wrap a p{display:inline-flex;align-items:center;position:relative;font-size:2.6rem;line-height:3.6rem;color:var(--color52);font-weight:var(--font-weight-bold);letter-spacing:-0.025em;}
.campus-header-box .logo-wrap a p:before{content:'';display:inline-flex;margin:0 1.6rem;width:1px;height:2rem;background:var(--black20);}
.campus-header-box > p{font-size:5rem;line-height:6rem;color:var(--color52);font-weight:var(--font-weight-medium);text-transform:uppercase;}

/* 캠퍼스맵 인포 */
.map-info-box, 
.map-info-box fieldset{height:100%;background-color:var(--white100);}
.map-info-box .map-srch-wrap .map-srch-box{padding:2rem;width:100%;box-sizing:border-box;}
.map-info-box .map-srch-wrap .map-srch-box > div{display:flex;align-items:center;padding:1.2rem 1.4rem;border:1px solid var(--black100);border-radius:3px;width:100%;background-color:var(--white100);font-size:0;box-sizing:border-box;}
.map-info-box .map-srch-wrap .map-srch-box .b-input{padding:0;width:calc(100% - 2.4rem);border:0;font-size:1.4rem;line-height:2rem;color:var(--black100);vertical-align:middle;}
.map-info-box .map-srch-wrap .map-srch-box .b-input::placeholder{color:var(--black03);}
.map-info-box .map-srch-wrap .map-srch-box .btn-map-srch{width:2.4rem;height:2.4rem;background:url(../img/sj-campus-map/ico-cam-srch01%402x.png) no-repeat 50% 50%/100%;border:0;cursor:pointer;}

.map-info-box .campus-tab-box > ul{display:flex;border-bottom:1px solid var(--border-color08);}
.map-info-box .campus-tab-box > ul > li{flex:1;}
.map-info-box .campus-tab-box > ul > li .campus-tab{display:flex;justify-content:center;align-items:center;padding:1.3rem 8px;height:100%;background:var(--color27);box-sizing:border-box;}
.map-info-box .campus-tab-box > ul > li .campus-tab::before{content:'';display:inline-flex;margin:0 8px 0 0;width:1.8rem;height:1.8rem;background-color:var(--color04);-webkit-mask-image:url(../img/sj-campus-map/ico-cam-facility%402x.png);mask-image:url(../img/sj-campus-map/ico-cam-facility%402x.png);-webkit-mask-repeat:no-repeat;-webkit-mask-size:100%;-webkit-mask-position:0 0;mask-repeat:no-repeat;mask-size:100%;mask-position:0 0;}
.map-info-box .campus-tab-box > ul > li.building .campus-tab::before{-webkit-mask-image:url(../img/sj-campus-map/ico-cam-building%402x.png);mask-image:url(../img/sj-campus-map/ico-cam-building%402x.png);}
.map-info-box .campus-tab-box > ul > li.welfare .campus-tab::before{-webkit-mask-image:url(../img/sj-campus-map/ico-cam-facility%402x.png);mask-image:url(../img/sj-campus-map/ico-cam-facility%402x.png);}
.map-info-box .campus-tab-box > ul > li.active .campus-tab::before{background-color:var(--color22);}
.map-info-box .campus-tab-box > ul > li .campus-tab span{font-size:1.6rem;line-height:2.2rem;color:var(--color04);font-weight:var(--font-weight-bold);}
.map-info-box .campus-tab-box > ul > li.active .campus-tab{background-color:var(--color52);}
.map-info-box .campus-tab-box > ul > li.active .campus-tab::before{background:var(--white100);}
.map-info-box .campus-tab-box > ul > li.active .campus-tab span{color:var(--white100);}

.map-info-box .campus-tab-box > ul > li .map-info-list{display:none;position:absolute;top:13.8rem;left:0;padding:2.5rem 2rem 0;width:100%;height:calc(100% - 13.8rem);box-sizing:border-box;}
.map-info-box .campus-tab-box > ul > li.active .map-info-list{display:block;}
.map-info-box .campus-tab-box > ul > li .map-info-list > h2{padding:0 0 2.5rem;border-bottom:3px solid var(--color08);font-size:2.4rem;line-height:3.4rem;color:var(--black03);font-weight:var(--font-weight-bold);}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul{overflow-y:auto;box-sizing:border-box;}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li{border-bottom:1px solid var(--color10);}
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul{counter-reset:number 0;}
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li{position:relative;padding:1.8rem 0 1.8rem 3.2rem;border-bottom:1px solid var(--color17);}
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li:before{content:counter(number);counter-increment:number 1;position:absolute;top:50%;left:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--color78);font-family:'ivyora-display', serif;font-size:1.4rem;line-height:2.4rem;color:var(--white100);font-weight:var(--font-weight-semibold);text-align:center;transform:translateY(-50%);}
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li a{display:block;font-size:2rem;line-height:3rem;color:var(--black03);font-weight:var(--font-weight-bold);}
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li:hover a,
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li.active a{color:var(--color01);}
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li:hover:before,
.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li.active:before{background:var(--color01);}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li > a{display:block;position:relative;padding:1.8rem 2.4rem 1.8rem 0;background-color:var(--white100);text-align:left;}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li > a > span{display:inline-block;position:relative;padding:0 0 0 8px;font-size:2rem;line-height:3rem;color:var(--black03);font-weight:var(--font-weight-bold);vertical-align:middle;box-sizing:border-box;}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li.active > a span{color:var(--color01);}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li > a:before{content:'';display:inline-block;width:1.7rem;height:2.2rem;background:var(--color78);-webkist-mask:url(../img/sj-campus-map/ico-cam-info-pin%402x.png) no-repeat center center/100%;mask: url(../img/sj-campus-map/ico-cam-info-pin%402x.png) no-repeat center center/100%;vertical-align:middle;}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li.active > a:before{background:var(--color01);}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li > a::after{content:'';position:absolute;top:50%;right:1rem;width:1.2rem;height:7px;background:url(../img/sj-campus-map/ico-cam-info-arr%402x.png) no-repeat 0 0/100%;vertical-align:middle;transform:translateY(-50%) rotate(180deg);transition:transform 0.2s;}
.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li.active > a::after{transform:translateY(-50%);}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul{display:none;padding:1.9rem 1rem;border-top:1px solid var(--color17);}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li{position:relative;margin:0 0 1rem;padding:0 0 0 3.4rem;font-size:1.6rem;line-height:2.4rem;color:var(--black06);font-weight:var(--font-weight-semibold);}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li:last-of-type{margin-bottom:0;}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li:before{content:attr(data-num);position:absolute;top:1px;left:0;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--color78);font-family:'ivyora-display', serif;font-size:1.4rem;line-height:2.4rem;color:var(--white100);font-weight:var(--font-weight-semibold);text-align:center;}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li:hover,
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li.active{color:var(--color01);}
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li:hover:before,
.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li.active:before{background:var(--color01);}

/* 캠퍼스맵 뷰 */
.cm-popup-wrap > div{top:50%;right:2%;transform:translateY(-50%);}

.map-view-box{position:relative;height:100%;}
.map-view-box .map-box{width:100%;height:100%;}
.map-view-box .map-box img{width:100%;height:100%;object-fit:cover;}

@media screen and (min-width:1025px){
	.map-info-wrap .btn-info{display:none;}
}
@media screen and (max-width:1024.98px){
	/* 캠퍼스맵 공통 및 레이아웃 */
	.map-wrap{height:calc(100vh - 7.6rem);}
	.map-wrap .map-info-wrap{position:absolute;top:0;width:100%;height:100%;max-height:calc(100vh - 70%);border-right:none;}
	.map-wrap .map-view-wrap{left:0;width:100%;}
	.map-wrap.info-close .map-info-wrap{left:0;width:100%;height:auto;}
	.map-wrap.info-close .map-info-wrap .map-info-box{display:none;}
	.map-wrap.info-close .map-view-wrap{width:100%;}

	/* 캠퍼스맵 헤더 */
	.campus-header-box{align-items:flex-start;min-height:7.6rem;}
	.campus-header-box .logo-wrap a h1{max-width:15rem;}
	.campus-header-box .logo-wrap a p{font-size:1.6rem;line-height:2.2rem;}
	.campus-header-box .logo-wrap a p:before{margin:0 8px;}
	.campus-header-box > p{display:none;}

	/* 캠퍼스맵 인포 */
	.map-info-box .map-srch-wrap .map-srch-box{padding:1.5rem 1rem;}
	.map-info-box .map-srch-wrap .map-srch-box > div{padding:5px;}
	.map-info-box .map-srch-wrap .map-srch-box .b-input{width:calc(100% - 2rem);}
	.map-info-box .map-srch-wrap .map-srch-box .btn-map-srch{width:2rem;height:2rem;}
	.map-info-box .campus-tab-box > ul{padding:0 1rem 1.5rem;}
	.map-info-box .campus-tab-box > ul > li .campus-tab{padding:5px;}
	.map-info-box .campus-tab-box > ul > li .campus-tab::before{width:1.6rem;height:1.6rem;}
	.map-info-box .campus-tab-box > ul > li .campus-tab span{font-size:1.4rem;}
	.map-info-box .campus-tab-box > ul > li .map-info-list{top:10.9rem;left:0;padding:0 1rem;height:calc(100% - 10.9rem);}
	.map-info-box .campus-tab-box > ul > li .map-info-list > h2{padding:0 0 1rem;font-size:1.8rem;line-height:2.4rem;}
	.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li{padding:1rem 0 1rem 2.4rem;}
	.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li:before{width:2rem;height:2rem;font-size:1.2rem;line-height:2rem;}
	.map-info-box .campus-tab-box > ul > li.building .map-info-list > ul > li a{font-size:1.6rem;line-height:2.2rem;}
	.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li > a{padding:1rem 2rem 1rem 0;}
	.map-info-box .campus-tab-box > ul > li.welfare .map-info-list > ul > li > a > span{font-size:1.6rem;line-height:2.2rem;}
	.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul{padding:1rem 5px;}
	.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li{margin:0 0 7px;font-size:1.4rem;line-height:2rem;}
	.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > ul > li:before{width:2rem;height:2rem;font-size:1.2rem;line-height:2rem;}
	.map-info-box .campus-tab-box > ul > li .map-info-list > ul > li > a > span{padding:0 0 0 6px;width:calc(100% - 40px);font-size:1.4rem;line-height:2rem;}

	.map-info-wrap .btn-info{display:block;position:absolute;top:100%;left:50%;width:5rem;height:5rem;z-index:-1;border-radius:50%;background-color:var(--white100);border:1px solid var(--black10);cursor:pointer;transform:translate(-50%, -50%);box-sizing:border-box;}
	.map-info-wrap .btn-info:after{content:'';position:absolute;left:50%;bottom:9px;width:1.2rem;height:7px;background:url(../img/sj-campus-map/ico-cam-info-arr%402x.png) no-repeat 0 0/100%;transform:translateX(-50%);}
	.map-info-wrap .btn-info.open:after{transform:translateX(-50%) rotate(180deg);}
}