@charset "utf-8";
body{background:#F2F5FA}
body:before{display:block; content:''; position:fixed; width:44.271%; height:100%; border-radius:0px 15px 15px 0px; box-shadow:0px 2px 6px rgba(0, 70, 152, 0.6), 0px 6px 15px rgba(0, 70, 152, 0.2); background:linear-gradient(180deg, #3851F5 0%, #147CF6 50%); overflow:hidden; z-index:-1}

.conR{float:right; width:56%; padding:0px 50px; padding:0px max(20px, 5.6%)}
.slogan{margin-top:50px; text-align:center;}
.slogan:before{display:block; content:''; margin:25px auto; width:153px; height:75px; background:url(/parking/img/main/ic_car.png) no-repeat center top/cover}
.slogan .tel{color:#222; font-size:2.18rem; font-weight:300; }
.slogan .tel:before{display:inline-block; content:''; vertical-align:middle; width:55px; height:55px; background:url(/parking/img/main/ic_tell.png) no-repeat left top/100%}
.slogan .txt{margin-top:7%; color:#222; font-size:2.375em; letter-spacing:-3px; line-height:1.3;}
.slogan .txt p{font-size:1.105em; }
.slogan .txt span{font-weight:bold; color:var(--point)}
.notice{margin-top:10%; display:flex; text-align:center; justify-content:space-between}
.notice>li{width:49.2%; background: linear-gradient(180deg, #00BB36 0%, #00C643 100%); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); border-radius: 10px;}
.notice>li:last-child{background: linear-gradient(180deg, #00A8EE 0%, #00BFFB 100%);}
.notice>li a{display:block; padding:47px 20px; --pdn:max(47px, 2.6vw); padding:var(--pdn) max(10%, 10px) calc(var(--pdn) - 8px)}
.notice>li .tit{display:flex; align-items: center; justify-content:center; height:60px; font-size:1.37rem; color:#fff; text-shadow:0px 0px 3px rgba(0, 0, 0, 0.1); line-height:1.3}
.notice>li .date{margin-top:20px; font-size:1.12rem; color:rgba(255,255,255,.7); text-shadow:0px 0px 3px rgba(0, 0, 0, 0.1)}
.banr{display:flex; justify-content:space-between; margin-top:20px}
.banr>li{width:24%; text-align:center}
.banr>li a{display:block; padding:20px 5px; padding:max(1.35vw, 20px) 10px; background:#fff; border-radius:10px; font-size:1.125em; transition:all ease .2s}
/* .banr>li a:before{display:block; content:''; margin:auto; ;width:68px; height:68px; background:url(/parking/img/main/ic_banr01.svg) no-repeat center center; transition:all ease .2s}
.banr>li:nth-child(2) a:before{background:url(/parking/img/main/ic_banr02.svg)}
.banr>li:nth-child(3) a:before{background:url(/parking/img/main/ic_banr03.svg)}
.banr>li:nth-child(4) a:before{background:url(/parking/img/main/ic_banr04.svg)}*/
.banr>li a span{display:block; margin-top:7px}
.banr>li a:hover img{filter:invert(100%) sepia(100%) saturate(0%) brightness(100%) contrast(100%);; transition:all ease .2s}
.banr>li a:hover{background:var(--color); color:#fff}
.banr>li a:hover:before{fill:#fff}

.parking{position:fixed; top:0px; bottom:0px; margin:auto; padding:20px; /* width:43.675%; padding:max(20px, 3.3%) max(20px, 4.5%); padding-right:max(20px, 3.5%); */  width:32.188%; padding:max(20px, 2.7%) max(20px, 3.3%); padding-right:max(20px, 2.5%); min-height:600px; height:calc(100vh - 140px); --parkingH:calc(100% - 80px); background:#fff; box-shadow:0px 2px 6px rgba(0, 0, 0, 0.25), 0px 6px 15px rgba(0, 70, 152, 0.2); border-radius:15px}
.parking:after{display:block; content:''; position:absolute; width:160px; height:160px; left:-60px; bottom:-30px; background:url(/parking/img/main/ic_bg.png);}
.parking .tit{margin-bottom:30px; font-size:1.875rem; color:#222; letter-spacing:-1.5px;}
.parking .tab{float:left; display:flex; flex-direction:column; justify-content:space-around; width:22% ;width:max(22.7%, 65px); height:var(--parkingH)}
.parking .tab li{height:100%; /* max-height:65px;  */margin-bottom:5px}
.parking .tab li a{display:flex; align-items:center; justify-content:center; height:100%; background:#eee; border-radius:5px; font-size:1.12em}
.parking .tab li.select a{position:relative; background:var(--point); color:#fff}
.parking .tab li.select a:after{display:block; content:''; position: absolute; right:-20px; top:0px; width:30px; height:100%; background:url(/parking/img/main/tabon.png) no-repeat left center/100% 100%}
.parking .con{float:right; width:70%; width:min(calc(100% - 75px), calc(100% - 32%));  height:calc(var(--parkingH) - 5px); overflow-y:auto; overflow-x: hidden;}
.parking .con>div{display:none;}
.parking .con>div:first-child{display:block;}
/* 도로명만들어갈때  .parking .con div div.list{display:table; border-collapse:collapse; width:97%}
.parking .con div div.list dl{display:table-row}
.parking .con div div.list dl+dl{border-top:1px dashed #ddd}
.parking .con div div.list dl dt,
.parking .con div div.list dl dd{display:table-cell; vertical-align:middle; padding:11px 0px 7px; }
.parking .con div div.list dl dd .place{padding-left:25px; background:url(/parking/img/main/ic_addr.svg) no-repeat left 0px/22px}
.parking .con div div.list dl dd:last-child{width:80px} */
.parking .con div div.list dl dt{color:var(--point)}
.parking .con div div.list dl dd a{display:inline-block; }
.parking .con div div.list dl dd .state{display:inline-block; text-align:center; min-width:65px; padding:5px 5px 3px; line-height:1em; font-size:15px; color:#666; border:2px solid #ddd; border-radius:100px; font-size:.95em}
.parking .con div div.list dl dd .state.ing{color:var(--point); border-color:#DB4141}
/* 주소가 전부 들어갈때  */
.parking .con{width:min(calc(100% - 75px), calc(100% - 30%))}
.parking .con div div.list{position:relative; width:95%}
.parking .con div div.list dl{position:relative; padding:15px 5px 12px}
.parking .con div div.list dl+dl{border-top:1px dashed #ddd}
.parking .con div div.list dl dt{font-size:1.1em; margin-bottom:2px}
.parking .con div div.list dl dd .place{font-size:.85em}
.parking .con div div.list dl dd:last-child{position:absolute; right:0px; top:10px;}
.parking .txt{clear:both; padding-top:2.7vw; margin-left:50px; letter-spacing:-.5px;}

/** popup **/
.layer_popup {position:fixed; top:20px; z-index:9999; display:flex; gap:10px;}
.m_popup img {border:1px solid #444; width:100%;}
.m_popup .m_popup_tit{display:none;}
/* .m_popup .m_popup_tit{display:block; padding:5px 10px; color:#fff; background: #444; font-size:14px;} */
.m_popup .m_popup_close{display:block; overflow:hidden; margin-top:-10px; padding:7px 10px; background:#444; color:#fff; text-align:left; font-size:14px;}
.m_popup .m_popup_close>p{float:left; text-align:right; color:#fff;}
.m_popup .m_popup_close>a{float:right; color:#fff;}
@media all and (min-width:961px){
	/* .layer_popup {left:50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);} */
	.layer_popup {left:20px;}
}
@media all and (max-width:961px){
	.layer_popup {flex-direction: column;}
	.m_popup {width:100%;}
	.m_popup img {width:100%;}
}



@media screen and (min-width:1921px){
	.container {position:static;}
	.parking {bottom:150px; height:calc(85vh - 140px);}
	#main footer {position:absolute; bottom:40px; padding:40px; margin:0; width:calc(80% - 190px); background:rgba(255,255,255,.98); border-radius:15px; box-shadow:0px 2px 6px rgb(0 0 0 / 25%), 0px 6px 15px rgb(0 70 152 / 20%);}
}


@media screen and (max-width:1500px){
	body:before{width:29%;}
	.conR{float:none; width:100%;}
	.parking{position:static; margin-top:5vw; margin-top:max(50px, 5vw); padding:0px 20px; padding:0px max(20px, 5.6%); width:100%; background:transparent; box-shadow:none}
	.parking:after{display:none}
	.parking .tab li a{background:#fff}
	.parking .txt{margin-left:0px}
}

@media screen and (max-width:960px){
	body:before{display:none;}
	.slogan .tel{font-size:1.9em}
	.slogan .tel:before{width:42px; height:42px;}
	.slogan .txt{margin-bottom:10px; font-size:min(7vw, 3em)}
	.slogan .txt span{font-size:1em}
	.notice>li .tit{font-size:1.2rem}
	.notice>li .date{font-size:1rem}
	.banr>li a img{width:80%; max-width:68px;}
	.banr>li a span{display:flex; align-items:center; height:42px; line-height:1.3; }

	.parking .tab li.select a:after{right:-10px; width:15px; }
	.parking .con div div.list dl dd:last-child{width:20px;}
	.parking .con div div.list dl dd .state{vertical-align:middle; min-width:20px; width:20px; height:20px; padding:0px; font-size:0px; border-width:5px;}
	.parking .con div div.list dl dd .state.ing{border-width:5px;}

}