@charset "utf-8";
@font-face {
     font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
 @font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
:root{--color:#3751F5; --point:#DC2323; --color01:#00B7F1; --asideW:130px}
body {font-size:16px; font-family:'GmarketSans'; color:#333; font-weight:normal; letter-spacing:0px; line-height:1.5;}
select, textarea, input {font-family:'GmarketSans'; font-size:1rem}
a{color:currentColor}
.fontL{font-weight:300}

#wrap{padding-left:17.079%}
header{position:fixed; left:0px; /* width:18.2%;  */ width:17.079%; height:100%; padding-top:70px; 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%); z-index:900; }
header h1{position:relative; text-align:center; line-height:1.3;}
header h1 a{display:inline-block; font-size:1.875rem; font-weight:300; color:#fff; text-shadow:0px 0px 1px rgba(0,0,0,.2)}
header h1 a:before{display:block; content:''; margin:auto; width:51px; height:50px; background:url(/parking/img/inc/logo.png) no-repeat center top/contain}
header h1 a span{display:block; font-size:1.16em}
header h1:after{display:block; content:'***'; text-align:center; margin:30px auto 25px; color:#fff; font-size:25px; letter-spacing:3px; text-shadow:0px 0px 2px rgba(0,0,0,.2); font-weight:normal}
header nav{margin:auto; max-width:205px}
header nav>ul>li{position:relative; margin-bottom:28px; text-shadow:0px 0px 2px rgba(0,0,0,.2)}
header nav>ul>li>a{padding:5px 0px; padding-left:40px; background:url(/parking/img/inc/ic_lm01.png) no-repeat left 0px/30px; color:#fff; font-size:1.3em; /* font-size:1.43em; */ }
header nav a:hover{text-decoration:underline}
header nav>ul>li.menu02>a{background-image:url(/parking/img/inc/ic_lm02.png)}
header nav>ul>li.menu03>a{background-image:url(/parking/img/inc/ic_lm03.png)}
header nav>ul>li.menu04>a{background-image:url(/parking/img/inc/ic_lm04.png)}
header nav>ul>li.menu06>a{background-image:url(/parking/img/inc/ic_lm06.png)}
header nav>ul>li.menu07>a{background-image:url(/parking/img/inc/ic_lm06.png)}
header nav>ul>li.menu08>a{background-image:url(/parking/img/inc/ic_lm08.png)}
header nav>ul>li.menu09>a{background-image:url(/parking/img/inc/ic_lm09.png)}
header nav>ul ul{display:none; position:absolute; top:-100%; right:-250px; padding:30px 40px; width:255px; background:var(--color); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius:15px; box-shadow:0px 2px 6px rgba(0, 70, 152, 0.6), 0px 6px 15px rgba(0, 70, 152, 0.2); transition:top ease .2s; z-index:1;}
header nav>ul li.select ul{top:calc(-100% - 10px)}
header nav>ul ul>li{position:relative; margin:10px 0px; padding-left:15px; }
header nav>ul ul>li:before{display:block; content:''; position:absolute; top:10px; left:0px; width:7px; height:1px; background:#fff}
header nav>ul ul>li a{display:block; color:#fff}
header nav>ul ul>li a[target=_blank]{white-space:nowrap}
header nav>ul ul>li a[target=_blank]:after{}
header nav>ul ul>li a[target=_blank]:after{opacity:.7;  display:inline-block; content:''; position:relative; top:3px; vertical-align:middle; margin-left:5px; width:24px; height:24px; background:url(/parking/img/inc/new_win.svg) no-repeat left top/11px}
footer{clear:both;  text-align:center; margin:0px 30px; margin:0px max(7.5%, 30px); padding:40px 10px; border-top:1px solid rgba(0,0,0,.1); line-height:30px;}
#main footer{border-top-width:0px; padding-left:44%}

.open_aside{z-index:900}
.open_aside .txt_cl{display:none}
aside{z-index:901}
.aside{position:fixed; right:-200px; top:25px; bottom:25px; text-align:center; padding:35px 5px; width:var(--asideW); background:#fff; border-radius:15px; z-index:1; transition:right ease .2s; }
.aside ul li + li{margin-top:30px}
.aside ul li a{display:block;}
.aside ul li a:before{display:block; content:''; margin:0px auto 8px; width:70px; height:70px; border-radius:3px; background-repeat:no-repeat; background-position:center center; background-size:60px}
.aside ul li.login a:before{background-color:var(--point); background-image:url(/parking/img/inc/ic_login.png)}
.aside ul li.logout a:before{background-color:#333; background-image:url(/parking/img/inc/ic_logout.png)}
.aside ul li.mypage a:before{background-color:var(--color); background-image:url(/parking/img/inc/ic_mypage.png)}
.aside ul li.logo a:before{height:50px; background-image:url(/parking/img/inc/logo02.png); background-size:51px}
.aside ul li.logo{letter-spacing:-1px; line-height:1.2}
.aside ul li.logo span{display:block;}

.aside ul li.manual a:before{height:64px; background-image:url(/parking/img/inc/manual01.png); background-size:64px}
.aside ul li.manualSound a:before{height:64px; background-image:url(/parking/img/inc/manual02.png); background-size:64px}
.aside ul li.manualYoutube a:before{height:64px; background-image:url(/parking/img/inc/manual03.png); background-size:64px}


.aside .currentTime{position:absolute; bottom:40px; padding-top:52px; width:100%; background:url(/parking/img/inc/ic_time.png) no-repeat center top /40px; color:#484848}
#main .open_aside{display:none; }
#main .aside{right:25px;  }
.aside.open,
#main .aside.open{right:25px}

.container{position:relative; float:left; padding-right:calc(var(--asideW) + 25px); width:100%}
body:not(#main) .container{max-width:1800px}
.container:AFter{display:block; content:''; clear:both}

/* 실명인증_레이어 */
#loginForm {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:600;}
#loginForm>div {position:relative; width:90%; max-width:600px; margin:15% auto; padding:50px; background:#fff;}
#loginForm>div .close {position:absolute; right:0; top:-40px; display:block; padding-left:34px; color:#fff; font-weight:bold; font-size:20px; line-height:29px;}
#loginForm>div .close:before {display:block; content:""; position:absolute; left:0; top:0; width:30px; height:31px; border-radius:50%; border:2px solid #fff;}
#loginForm>div .close:after {display:block; content:"Ｘ"; position:absolute; left:5px; top:0px; font-weight:bold; font-size:20px; color:#fff;}
.realname{overflow:hidden;}
.realname li{margin:.5% auto; width:100%; border-top:3px solid #333}
.realname li button{text-align:left; width:100%; padding:8% 3%; padding-left:33%; border:1px solid #ccc; border-top:none; background-color:#fff; background-repeat:no-repeat; background-position:12% center; word-break:keep-all }
.realname li button:hover{border-color:#333}
.realname li.ic01 button{background-image:url(/share/images/program/ic_realname01.gif);}
.realname li.ic02 button{background-image:url(/share/images/program/ic_realname02.gif);}
.realname li button .tit{display:block; margin-bottom:15px; font-size:23px; color:#333}
.realname li button .txt{display:block; padding-left:2px; line-height:150%; color:#484848; letter-spacing:-1px}


/***************************************************************************************************************************/


@media all and (min-width:961px){
	#main header{box-shadow:none; padding-right:2%; background:transparent; z-index:1;}
	.open_aside{position:fixed; right:0px; top:50%; margin-top:-150px; width:40px}
	.open_aside a{display:flex; height:284px; align-items:center; justify-content:center; font-size:16px; line-height:1; font-family:'verdana'; background:url(/parking/img/inc/bg_open.svg) no-repeat left center }
	.open_aside a span{display:block; position:relative; text-align:center; margin-left:3px; padding-bottom:18px; width:15px}
	.open_aside a span:after,
	.open_aside a span:before{display:block; content:''; position:absolute; left:2px; bottom:0px; border-radius:20px; }
	.open_aside a span:before{width:13px; height:13px; background:#333}
	.open_aside a span:after{width:6px; height:6px; margin-left:4px; margin-bottom:4px; border:2px solid #fff; border-width:2px 2px 0px 0px; transform:rotate(-135deg)}
	.open_aside a.close{background-image:url(/parking/img/inc/bg_close.svg); color:#fff; font-size:.95em; line-height:.9}
	.open_aside a.close span:before{background:#eee}
	.open_aside a.close span:after{border-color:#333; margin-left:3px; transform:rotate(45deg)}
}

@media screen and (min-width:1921px){
	.open_aside{display:none;}
	.aside{right:25px}
}

@media screen and (max-width:1500px){
	#wrap{padding-left:30%}
	header{width:29%;}
	#main footer{border-top-width:1px; padding-left:0%}
	.open_aside{display:block !important}
	.aside, #main .aside{right:-200px}
}

@media screen and (max-width:960px){
	body {font-size:15px}
	#wrap{padding-left:0%}
	header{position:relative; width:100%; padding:0px; background:linear-gradient(90deg, #3851F5 0%, #147CF6 100%); border-radius:0px 0px 15px 15px; box-shadow:0px 2px 6px rgba(0, 70, 152, 0.6), 0px 6px 15px rgba(0, 70, 152, 0.2);}
	header h1{text-align:left; margin-left:25px; padding:30px 0px 25px}
	header h1:After{display:none;}
	header h1 a{ font-size:min(6vw, 25px)}
	header h1 a:before{display:inline-block; vertical-align:middle; margin-right:10px; width:35px; height:27px;}
	header h1 a span{display:inline; margin-left:5px; font-size:1em}
	header nav{max-width:100%; padding:20px 10px; border-top:1px solid rgba(0,0,0,.1)}
	header nav>ul{display:flex}
	header nav>ul>li{position:static; width:25%; margin:0px; text-align:center;}
	header nav>ul>li>a{display:flex; align-items: center; justify-content: center; padding:40px 0px 0px; height:76px; line-height:1.2; background-position:center top; font-size:15px; text-shadow:0px 0px 1px rgba(0,0,0,.1)}
	header nav>ul ul{text-align:left; top:100%; left:20px; width:calc(100% - 40px); overflow:hidden}
	header nav>ul li.select ul{top:calc(100% + 3px)}
	header nav>ul ul>li{float:left; margin:5px 0px; min-width:50%; font-size:1.05em}
	.open_aside{position:absolute; right:20px; top:25px}
	.open_aside a{display:block; width:40px; height:40px; padding-top:7px; text-indent:-50000px; font-size:0px}
	.open_aside a:before{display:block; content:''; width:76%; margin-left:12%; height:2px; background:#fff; box-shadow:0px 10px 0px #fff, 0px 20px 0px #fff; border-radius:1px}
	aside{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.7);}
	.close_aside{position:absolute; width:100%; height:100%}
	.close_aside a{display:block; position:relative; height:100%; text-indent:-5000px;}
	.close_aside a:after,
	.close_aside a:before{display:none; content:''; position:absolute; top:50px; right:180px; width:40px; height:1px; background:#fff; transform:rotate(45deg);}
	.close_aside a:after{transform:rotate(-45deg);}
	.container{padding:0px; width:100%;}
}

@media screen and (min-width:376px){
	.dp_mb_min {display:none;}
}

@media screen and (max-width:375px){
	nav .menu08 {display:none;}
}



audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 120px;
    height: 25px;
}