@charset "UTF-8";
body{height:100vh;background:#f8f8f8;}

/* COMMON MARGIN */
.mg_t0{margin-top:0 !important;}
.mg_t5{margin-top:5px !important;}
.mg_t10{margin-top:10px !important;}
.mg_t15{margin-top:15px !important;}
.mg_t20{margin-top:20px !important;}
.mg_t25{margin-top:25px !important;}
.mg_t30{margin-top:30px !important;}
.mg_t35{margin-top:35px !important;}
.mg_t40{margin-top:40px !important;}
.mg_t45{margin-top:45px !important;}
.mg_t50{margin-top:50px !important;}
.mg_t60{margin-top:60px !important;}
.mg_t70{margin-top:70px !important;}
.mg_t80{margin-top:80px !important;}
.mg_t90{margin-top:90px !important;}
.mg_t100{margin-top:100px !important;}

.mg_b0{margin-bottom:0 !important;}
.mg_b5{margin-bottom:5px !important;}
.mg_b10{margin-bottom:10px !important;}
.mg_b15{margin-bottom:15px !important;}
.mg_b20{margin-bottom:20px !important;}
.mg_b25{margin-bottom:25px !important;}
.mg_b30{margin-bottom:30px !important;}
.mg_b40{margin-bottom:40px !important;}
.mg_b45{margin-bottom:45px !important;}
.mg_b50{margin-bottom:50px !important;}
.mg_b60{margin-bottom:50px !important;}
.mg_b70{margin-bottom:70px !important;}
.mg_b80{margin-bottom:80px !important;}

.mg_r0{margin-right:0 !important;}
.mg_r5{margin-right:5px !important;}
.mg_r10{margin-right:10px !important;}
.mg_r20{margin-right:20px !important;}
.mg_r30{margin-right:30px !important;}
.mg_r40{margin-right:40px !important;}

.mg_l0{margin-left:0 !important;}
.mg_l10{margin-left:10px !important;}
.mg_l20{margin-left:20px !important;}
.mg_l30{margin-left:30px !important;}
.mg_l40{margin-left:40px !important;}

/* COMMON PADDING */
.pd_none{padding: 0;}
.pd_a20{padding:20px !important;}

.pd_t10{padding-top:10px !important;}
.pd_t15{padding-top:15px !important;}
.pd_t20{padding-top:20px !important;}
.pd_t30{padding-top:30px !important;}
.pd_t40{padding-top:40px !important;}
.pd_t45{padding-top:45px !important;}
.pd_t50{padding-top:50px !important;}
.pd_t150{padding-top:150px !important;}

.pd_b10{padding-bottom:10px !important;}
.pd_b15{padding-bottom:15px !important;}
.pd_b20{padding-bottom:20px !important;}
.pd_b30{padding-bottom:30px !important;}
.pd_b40{padding-bottom:40px !important;}
.pd_b45{padding-bottom:45px !important;}
.pd_b50{padding-bottom:50px !important;}
.pd_b150{padding-bottom:150px !important;}

.pd_l10{padding-left:10px !important;}
.pd_l20{padding-left:20px !important;}
.pd_l30{padding-left:30px !important;}
.pd_l40{padding-left:40px !important;}
.pd_l45{padding-left:45px !important;}
.pd_l50{padding-left:50px !important;}

.pd_r10{padding-right:10px !important;}
.pd_r20{padding-right:20px !important;}
.pd_r30{padding-right:30px !important;}
.pd_r40{padding-right:40px !important;}
.pd_r45{padding-right:45px !important;}
.pd_r50{padding-right:50px !important;}

/* width */
.w5{width:5% !important;}
.w10{width:10% !important;}
.w15{width:15% !important;}
.w20{width:20% !important;}
.w25{width:25% !important;}
.w30{width:30% !important;}
.w35{width:35% !important;}
.w40{width:40% !important;}
.w45{width:45% !important;}
.w50{width:50% !important;}
.w55{width:55% !important;}
.w60{width:60% !important;}
.w65{width:65% !important;}
.w70{width:70% !important;}
.w75{width:75% !important;}
.w80{width:80% !important;}
.w85{width:85% !important;}
.w90{width:90% !important;}
.w95{width:95% !important;}
.w100{width:100% !important;}

/* text-align */
.ta_c{text-align: center !important;}
.ta_l{text-align: left !important;}
.ta_r{text-align: right !important;}

/* text-align */
.fl_l{float: left !important;}
.fl_r{float: right !important;}
.fl_c{float: none;}

/* font-color */
.font-blue{color:#428eff !important;}
.font-red{color:#ff0000 !important;}
.font-orange{color:#ff8f34 !important;}


/* font-weight */
.bold{font-weight:bold;}

/* button-color */
.btn-green{background:#009688 !important;}
.btn-orange{background:#ff8f34 !important;}
.btn-blue {background: #0f7cff !important;}
.btn-grey {background: #a9a9a9 !important;}

/* tb-type01 */
.tb-type01{border-top: 2px solid #000000;width:100%;border-collapse:collapse;}
.tb-type01 th, .tb-type01 td{color:#464646;text-align:center;border-right:1px solid #d7d7d7;padding: 10px;font-size:1.3em;line-height:1.5;}
.tb-type01 th{background:#f3f3f3;font-weight:500;color:#333;border-bottom:1px solid #d7d7d7;}
.tb-type01 th a, .tb-type01 td a{color:#007ded;font-size:1em;}
.tb-type01 th a:hover, .tb-type01 th a:focus{color:#0099da;}
.tb-type01 td a.tb-blue:hover{text-decoration:none;color:#1c75c9;background:transparent;cursor:pointer;}
.tb-type01 td:last-child, .tb-type01 th:last-child{border-right:none;}
.tb-type01 td.tdbg_gray{background:#f8f8f8;}
.tb-type01 td{background:transparent;color:#464646;font-weight: 300;text-align:center;border-bottom:1px solid #d7d7d7;border-right:1px solid #d7d7d7;}
.tb-type01 td.bd_r{border-right:1px solid #d7d7d7;}
.tb-type01 th.thbd_r{border-right:1px solid #d7d7d7 !important;}
.tb-type01 td .dl_01 dt{font-weight:700;margin-bottom:5px;}
.tb-type01 td .dl_01 dd{padding-left:20px}
.tb-type01 p, .tb-type01 strong, .tb-type01 span{font-size:15px;}
.tb-type01 tfoot td{background:#fbfbfb;}

/* tb-type02 */
.tb-type02{border-top: 2px solid #3f7aff;width:100%;border-collapse:collapse;}
.tb-type02 th, .tb-type02 td{color:#464646;text-align:center;border-right:1px solid #d7d7d7;padding: 10px;font-size:1.2em;}
.tb-type02 th{background:#f0f6ff;font-weight:500;color:#333;border-bottom:1px solid #d7d7d7;}
.tb-type02 th a, .tb-type02 td a{color:#007ded;font-size:1em;}
.tb-type02 th a:hover, .tb-type02 th a:focus{color:#0099da;}
.tb-type02 td a.tb-blue:hover{text-decoration:none;color:#1c75c9;background:transparent;cursor:pointer;}
.tb-type02 td:last-child, .tb-type02 th:last-child{border-right:none;}
.tb-type02 td.tdbg_gray{background:#f8f8f8;}
.tb-type02 td{background:transparent;color:#464646;font-weight: 300;text-align:center;border-bottom:1px solid #d7d7d7;border-right:1px solid #d7d7d7;}
.tb-type02 td.bd_r{border-right:1px solid #d7d7d7;}
.tb-type02 th.thbd_r{border-right:1px solid #d7d7d7 !important;}
.tb-type02 td .dl_01 dt{font-weight:700;margin-bottom:5px;}
.tb-type02 td .dl_01 dd{padding-left:20px}
.tb-type02 p, .tb-type02 strong, .tb-type02 span{font-size:15px;}
.tb-type02 tfoot td{background:#fbfbfb;}

.page-wrap {
	margin: 0 auto;
	text-align: center;
}

.container .logo {
    margin-top: 15%;
    margin-bottom: 40px;
}

.container .title h2 {
	font-size: 30px;
	font-weight: 400;
}

/******* 공통 css *******/
.contentsWrap{position:relative;display: inline-block;width:100%;}
.contents{margin:10px;}
.contents-box{width:100%;background:#fff;display:inline-block;border: 1px solid #ddd;margin-bottom: 10px;border-radius: 10px;}
.txt-box {padding: 10px;}
.top-box{height: 250px;background: url('/img/publicPark.png')no-repeat 50%  80%;background-size: 20%;}
.top-box h1{font-size:2.5em;}
.top-box h2{font-size:2em;}
.top-title{padding: 0;padding: 10px 0;background: linear-gradient(264deg, #586acc, #2586b4);}
.top-title p{padding:5px;text-align: center;width:100%;font-size:1.5em !important;}
.box{background: #fff;border-radius: 5px;margin-bottom:20px;border:1px solid #ddd;}
.ticket-box {position: absolute;width: 95%;top: 65%;left: 9px;}
.box-top .title{font-size: 1.4em;font-weight:600;background:#e4e4e4;padding: 13px 10px;border-radius:3px 3px 0 0;}
.box-top .txt{padding:10px;}
.box-top .txt p{font-size: 2em;font-weight: 600;padding: 10px 0;text-align:center;}
.box-btn {border-radius:0 0 3px 3px;display:block;background: #225bbe;padding:15px;font-size:1.5em;color:#fff;font-weight:600;text-align:center;}
.buy, .send{background: #225bbe;}
.buy span, .send span{display:inline-block;margin-top:4px;}
.buy img, .send img{width:30px;}

.header{padding:15px;background: #274ea7;}
.header div{display:inline-block;color:#fff;}
.header .left img{width: 20px;margin-top: 2px;}
.header p{font-size:1.7em;font-weight:500;display: inline-block;margin-left:10px;}
.back{float:left;}

.main-header{text-align: center;background:none;}
.main-header div{color:#000;}

.box-contents{margin-bottom:5px;background:#fff;padding: 15px;border-radius: 5px;box-shadow: 1px 1px 10px rgba(0,0,0,.1);}

/********** 반응형 메뉴 ***********/
.back a{display: block;text-indent: -9999px;width: 18px;height: 18px;background: url('/img/back.png') no-repeat 50%;background-size: 18px;padding: 12px;}
.mbtn a {display: block;text-indent: -9999px;width: 20px;height: 20px;background: url('/img/menu.png') no-repeat 50%;background-size: 20px;padding: 12px;}
.main-btn {background: url(/img/main-menu.png)no-repeat 50%!important;background-size: 20px !important;}
.mbtn{float:right;}
.responsive {display:block; z-index: 2; position: fixed; background: #f2f2f2; top: 0; right: -100%; width: 100%; height: 100%; transition: all 0.5s; }
.responsive.on {right: 0; }
.bg-shadow { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 1; background: rgba(0, 0, 0, 0.7); display: none; cursor: pointer;}
.closeBtn { position: absolute; top: 0; right: 0; display: block; }
.closeBtn a {display: block;text-indent: -9999px;width: 20px;height: 20px;background: url('/img/menu-close.png') no-repeat;margin-top: 19px;margin-right: 10px;background-size: 16px;}
.alrim {position: absolute;top: 0;right: 35px;display: block;}
.alrim a {display: block;text-indent: -9999px;width: 25px;height: 25px;background: url('/img/alrim.png') no-repeat;margin-top: 15px;margin-right: 10px;background-size: 25px;}
.mobile-login .login-btns li{float:left;width: 33%;text-align: center;padding: 10px 5px;}
.mobile-login .login-btns li:nth-child(1), .mobile-login .login-btns li:nth-child(2){border-right:1px solid #ddd;} 
.mobile-login .login-btns li a {font-size:1em;color:#000;}
.login-btns{display:inline-block;width: 100%;border-top:1px solid #ddd;background:#fff;}
.mobile-nonlogin .login-btns li{float:left;width: 50%;text-align: center;padding: 10px 5px;border-right:1px solid #ddd;}
.mobile-nonlogin .login-btns li:nth-child(1),.mobile-nonlogin .login-btns li:nth-child(2){border-bottom:1px solid #ddd;} 
.mobile-nonlogin .login-btns li:nth-child(2), .mobile-nonlogin .login-btns li:nth-child(4){border-right:none;} 
.mobile-nonlogin .login-btns li a {font-size:1em;color:#000;}
.login-list {background: #f0f0f0;border-bottom:1px solid #ddd;}
.login-btn {padding:20px;font-size: 1.3em;}
.login-btn a{font-size:1em;color:#000;text-decoration:underline;}
ul.login-btns li img{width:15px;}
.rsp {font-size: 1.3em;color: #333;display: block;padding: 15px 10px;}
.rsp img{float:right;width: 20px;transition: .3s;}
ul.dep{display:none;border-top:1px solid #ddd;}
ul.dep li a {display: block;font-size: 1.1em;color: #555;padding: 15px;background: #f8f8f8;}
.rotate{transform:rotate(90deg);}

/******* front *******/
/* .front-bg{position: relative;background:#f4f8ff;height:100vh;}
.front-box{position: absolute;top: 30%;width: 100%;text-align: center;}
.front-bg img{width: 110px;}
.front-bg .box-01 img{width: 165px;} */

.front-bg{background: #f4f8ff url('/img/front.png') no-repeat 50% 45%;background-size: 35%;height:100%;}

/******* login(로그인) *******/
.login-bg{background: linear-gradient( to top, #005fab, #36acff );height: 100vh;background: #f4f8ff;}
.login {display: inline-block;margin: 3px 1%;border-bottom: 1px solid #ddd;width: 100%;}
.top-box p{font-size: 1.5em;color: #000;}
.top-box p:first-child{font-size: 1.8em;font-weight: 500;}
.login-contents-box{width: 280px;margin: 0 auto;height: 490px;border-radius: 60px 0 0 0;}
.login-box {margin: 10px 0;}
.login-txt{padding:10px !important;}
.login-input-box{width: 83%;padding: 10px;font-size: 1.2em;background: none;}
.login-img{width: 6%;float: left;margin: 15px;}
.login-input-box::placeholder{color:#777;font-size:1em;}
.btn{float:left;width:48%;margin:1%;padding:10px 20px;}
.text-contents {position:relative;margin-bottom: 15px;}
p.text-title {font-size: 1.2em;font-weight: 500;margin-bottom: 10px;padding-bottom: 7px;color: #999;border-bottom: 1px dotted #ddd;}
.box-contents img {width: 22px;margin: 6px;}
.next-btn {display: inline-block;background: #2450b3;padding: 17px;margin-top:10px;font-size: 1.3em;color: #fff;width: 100%;border-radius: 5px;font-weight:500;}

.chk-box {padding: 10px 5px;}
#loginChk{margin-right:3px;}
.joinchk {margin-top: 1px;margin-right: 3px;width: 17px;height: 17px;}
.join-chk-box span, .show{font-size: 1.3em;color: #333;}
.show{float:right;text-decoration:underline;color:#777;}
.forget-btn {float:right;font-size:1.1em;}

.or{padding:10px;color:#ccc;font-size: 1.1em;}
.join{color:#000;text-align: center;text-decoration: underline;font-size:1.1em;}

.alert-danger {background: rgb(255 0 0 / 10%);padding: 10px;border-radius: 5px;margin-bottom: 10px;color: #f00;}

/******* 메인 *******/
.tab-contents{display: none;}
.tab-contents.active{display: block;}
.buy-list{display:none;}

.txt-item{margin-bottom:5px;}
.search-input{width: 84%;}
.tel-input{width:58%;}
.search{width: 14%;height: 40px;border-radius: 5px;background: #54cdff url('/img/search.png') no-repeat 50%;background-size: 40%;vertical-align: inherit;}

.buy-list ul {background: #ecf6ff;margin:5px;padding: 0 10px;}
.buy-list ul li a{display:block;padding: 20px;font-size:1.3em;color:#005cce;font-weight:600;border-bottom: 1px dashed #b2d5ff;}
.buy-list ul li:last-child a{border-bottom:none;}

.sub-menu ul{text-align:center;}
.sub-menu ul li:first-child{margin-right:2%;}
.sub-menu ul li {display: inline-block;width: 48.5%;background: rgb(255 255 255 / 20%);border-radius: 5px;}
.sub-menu ul li a {display: block;font-size: 1.3em;padding: 15px;color: #fff;text-align:left;}
.sub-menu ul li a img{float:right;width:15px;margin-top:2px;}

p.contents-title {font-size: 1.4em;font-weight: 600;padding: 10px;background: #efefef;border-radius: 10px 10px 0 0;}

.btns ul li{display:inline-block;width:49%;}
.btns button{width:100%;font-size:1.2em;padding:10px;border-radius:5px;color:#fff;}
.btns button.parking-calcurate{background:#FF9800;}
.btns button.minab-calcurate{background:#253a66;}

.info-contents {background: #fff;padding: 10px;border-radius: 10px;margin-bottom: 10px;box-shadow: 1px 1px 10px rgb(0 0 0 / 20%);}
.info-contents p{font-weight:bold;font-size:1.2em;}
.info-contents ul li{font-size:1.1em;padding-left: 10px;text-indent: -12px;margin: 5px 0;}

.index-box{margin-bottom:0;border-radius:5px 5px 0 0;}
p.free-txt {background: #efefef;margin-top: 10px;font-size: 1.3em !important;padding: 15px !important; color: blue;}
.warning-txt {padding: 15px;font-size: 1.2em;text-align: center;background: #e1efff;color: #0061d9;border-radius: 10px;font-weight: 600;}
.warning-import {color: #0451b0;}

/* 선납권 배포 팝업 */
#msgPopup{display:none;}
#carList, #noneCar, #msgPopup{position: fixed;z-index: 9999;left: 3%;top: 30%;width: 94%;background:#fff;box-shadow: 1px 1px 10px 10px rgba(0,0,0,.3);}
#carList{height:300px;}
#noneCar, #msgPopup{height:auto;}
#carList .popup-content{height: 220px;overflow: scroll;}
#carList .popup-content ul li{margin: 10px 15px;border-radius:5px;}
#carList .popup-content ul li a{display:block;padding:15px;font-size:1.3em;color: #005eaf;border: 1px solid #ddd;font-weight: 500;}
#carList .popup-content ul li a:active{background:#005eaf;color:#fff;}
#noneCar .popup-header, #carList .popup-header, #msgPopup .popup-header{position:relative;background:#f8f8f8;padding:5px 10px;}
#noneCar .popup-header p, #carList .popup-header p, #msgPopup .popup-header p{font-size:1.5em;text-align:left;}
#carList .popup-content{padding:10px;height: 220px;overflow: scroll;}
#noneCar .popup-content, #msgPopup .popup-content{padding:10px;}
#noneCar .popup-content p, #carList .popup-content p{font-size: 1.5em;padding: 15px;margin-bottom:10px;text-align: center;border-radius: 5px;}
#carList .popup-content p{background: rgb(0 137 255 / 10%);color: #1f74dd;}
#noneCar .popup-header button, #carList .popup-header button, #msgPopup .popup-header button{position:absolute;top: 2px;right: 5px;text-indent:-9999px;padding: 15px;background:url('/img/close.png')no-repeat 50%;background-size: 50%;}
#noneCar .popup-content{background: url('/img/warning.png') no-repeat 50% 40%;padding-top: 90px;background-size: 15%;}
#noneCar .popup-content p{padding:0;}
.popup .popup-footer{padding: 0 10px 10px 10px;}
.popup .popup-footer button, #msgPopup .popup-footer button{font-size: 1.3em;width: 100%;font-weight: 600;color: #555;padding: 10px;border-radius: 10px;height: 50px;}

#msgPopup .popup-header p{font-weight: 600;padding: 10px 0;}
#msgPopup .popup-content, #messageChk .popup-footer{padding:10px;}
#msgPopup .popup-content p{font-size:1.5em;font-weight:600;margin-bottom:5px;}
#msgPopup .modal-content{padding:10px;text-align: center;}
#msgPopup input[type="text"]{border:1px solid #ddd;font-size:1.3em;padding:10px;border-radius:5px;width: 90%;}


/* 주차요금 계산 */
.message-btn{display: inline-block;background: #575757 url(/img/message.png) no-repeat 50%;background-size:50%;height: 55px;padding: 17px;margin-top:10px;width: 18%;border-radius: 5px;vertical-align: top;}
.pay-btn{display: inline-block;background: #2450b3;padding: 17px;margin-top:10px;font-size: 1.3em;color: #fff;width: 80%;border-radius: 5px;font-weight:500;}

/******* responsive-menu *******/
.menu-top {padding: 15px;font-size: 1.2em;background: #274ea7;}
.responsive-box {margin:15px 0;padding:0 10px;background:#fff;}
.responsive-box > li{border-bottom:1px solid #ddd;}
.responsive-box > li:last-child{border-bottom:none;}
.responsive-menu-list {background: #11368b;}
.responsive-menu-list ul{text-align:center;}
.responsive-menu-list ul li{position: relative;display:inline-block;width: 49%;padding-right: 10px;font-size:1.2em;}
.responsive-menu-list ul li::after{position: absolute;content:'';background:#fff;width:1px;height: 30px;top: 15px;right:0;}
.responsive-menu-list ul li:last-child::after{background:none;}
.responsive-menu-list ul li a{font-size:1.1em;padding:20px;display: block;text-decoration: none;color:#fff;}

.info-box {display:inline-block;width:100%;padding: 10px 0;}
.info-box .left{float:left;display:inline-block;}
.info-box p {font-size: 1.4em;color:#fff;padding: 10px;}

.call {font-size: 1.2em;padding: 10px;}
.logout{background: #ddd;padding: 5px 10px;color: #999;border-radius: 5px;}

/******* 가입 *******/
.member-title {font-size: 1.5em;font-weight: 600;margin-bottom: 10px;padding: 8px 0;border-bottom: 1px solid #000;}
.member-title img{float:right;width:17px;margin-top:5px;}
.terms-box{padding:10px;}
.terms-txt{margin:10px;}
.terms-txt li{font-size:1.1em;}
p.txt-title {font-size: 1.3em;font-weight: 600;margin-bottom:5px;}
.chk-btn {width:28%;height: 40px;border-radius: 5px;background: #444;color: #fff;vertical-align: inherit;}
.chk-btn:active{background:#555;}
.input-box, .choose{padding: 10px;height: 40px;font-size: 1.3em;background: none;border:1px solid #ddd;border-radius:5px;vertical-align:top;}
.input-box::placeholder{color:#bbb;}
.park-choose{width:32%;}
.email-choose{width:48%;}
.at {line-height: 3;}
.tel {width: 33.333%;}
.tel-choose {width: 30%;}
.info-txt {font-size: 1em !important;margin-top: 5px;color:#777;}
/*#emailSite2 {display:none;}*/
.text-contents input[type="file"]{font-size:1.2em;}
.delete-btn {float: right;padding: 5px;}

/* 가입 약관 팝업 */
#JoinPopup, #MapPopup{position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;background:#fff;box-shadow: 1px 1px 10px 10px rgba(0,0,0,.3);}
.popup-top{position:relative;padding:15px 10px;text-align:center;border-bottom:1px solid #ddd;}
.close{position:absolute;top: 18px;right: 13px;background: none;}
.close img{width: 18px;}
.popup-top h1 {font-size: 1.5em;}
.popup-contents{height:100%;}
.popup-txt {padding:10px;overflow-y: auto;height: 100%;padding-bottom: 70px;}
.popup-map {overflow-y: auto;height: 100%;}
#JoinPopup .popup-txt-box, #MapPopup .popup-txt-box{height: 300px;padding:10px;background:#f8f8f8;border:1px solid #ddd;overflow-y: scroll;}
.popup-txt-box p{font-size: 1.3em;color:#555;margin-top: 5px;}
#MapPopup .popup-txt-box{height:400px;}
.popup-txt-box ul li{font-size: 1.3em;color: #555;padding-left: 15px;margin-bottom:3px;text-indent: -10px;}
.chk-close a{display:block;font-size: 1.5em;background:#2d62de;padding:15px 10px;margin:5px;color:#fff;font-weight:600;}

.add-btn {position: absolute;top: 0;right: 0;padding: 10px;background: #ffa500;color: #fff;border-radius: 5px;}
.park-select {height: 150px;border: 1px solid #ddd;border-radius: 5px;padding: 5px;overflow: auto;text-align:center;}
.park-select ul li{display:inline-block;width: 32%;}
.park-select ul li a{display: block;height: 38px;padding: 10px;font-size:1.2em;color: #fff;border-radius:5px;background: #0d59e5;}
.choosed {font-size: 1em !important;background: #fff !important;color: #0d59e5 !important;border: 1px solid #0d59e5;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.choosed img{width:12px;margin:0;margin-top: 2px;}

/* 가입완료  */
.join-bg {background:#fff;}
.signup-success p {font-size: 2.5em;}
.signup-success{padding: 15px;}
p.complete {font-size: 1.4em;margin: 10px 0;padding-bottom: 250px;background: url('/img/signup-success.png')no-repeat;background-position: 50% 75%;background-size: 100%;color: #555;}

/* 아이디, 비번 찾기 */
ul.find-tab{background:#f1f1f1;border-radius:25px;margin-bottom:20px;}
ul.find-tab li{display:inline-block;width: 49%;text-align:center;}
ul.find-tab li a{display:block;padding:15px;font-size:1.3em;color:#999;}
ul.find-tab li a.on{background:#2450b3;color:#fff;border-radius:25px;}
.find-list-title{font-size: 1.5em;text-align: center;padding-top: 100px;background: url('/img/find-last.png') no-repeat;background-position: 50% 30%;background-size: 25%;margin-bottom: 10px;}
.find-box {background: #f8f8f8;padding: 15px;}
p.find-last {font-size: 1.3em;text-align: center;}
.btns a{width:48%;}
.btns a.go-home{background:#555;}
.text-contents span.time {position: absolute;top: 38px;right: 33%;}


/* 선납권 충전 */
.plus, .minus {width: 40px;height: 40px;vertical-align: top;border-radius: 5px;background: #027efd;color: #fff;font-size:1.5em;line-height:40px;}
.result-page{padding-top:150px;margin-bottom:30px;}
.result-page p{font-size:2em;font-weight:600;text-align:center;}
.success{background:url('/img/success.png')no-repeat;background-size: 20%;background-position: 50% 60%;}
.fail{background:url('/img/fail.png')no-repeat;background-size: 20%;background-position: 50% 60%;}

/* 환불신청 */
.refund-txt {border:1px solid #ddd;padding:10px;border-radius: 5px;}

/* 선납권 배포이력, 공지사항 */
.payment-list .item, .notice-list .item{position:relative;padding: 10px;border-bottom: 1px solid #ddd;}
.payment-list-ticket {display:inline-block;font-size:1.1em;color:#ff0065;border:1px solid #ff0065;padding:3px;}
.payment-list-car, .notice-list-title{font-size: 1.8em;font-weight:600;margin: 3px 0;}
.payment-list-tel{font-size:1.5em;color:#555;}
.payment-list-date{position:absolute;top: 40%;right:10px;font-size:1.2em;color:#acacac;}

.notice-list .item img{position:absolute;top:30%;right:10px;width:20px;}
.notice-list-title{font-size: 1.3em;width: 90%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.notice-list-date{font-size: 1em;color:#acacac;}
.notice-title{padding:10px;border-bottom: 1px solid #ddd;}
.notice-title h1{font-size:1.5em;margin-bottom:5px;}
.notice-title p{font-size:1.2em;color:#555;}
.notice-contents {padding:10px;font-size:1.3em;}

.result-contents{margin:5px;}
.result-contents li{margin-bottom:15px;}
.result-contents li span{font-size:1.5em;}
.result-contents li .result-title {color:#777;}
.result-contents li .result-txt {float:right;}

.notice-list .tb_type04{width:100%;}
.notice-list .tb_type04 tr{display: block;border-bottom:1px solid #ddd;padding:15px 0;}
.notice-list .tb_type04 td{width:100%;display: block;text-align: left !important;}
.notice-list .tb_type04 a, .notice-list .tb_type04 td{display: block;width:90%;color:#000;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.notice-list .tb_type04 td{font-size: 1.3em;}
.notice-list .tb_type04 a{font-size:1.2em;font-weight:600;}

/* 선납권 배포이력 */
.distribute-list div > ul{position:relative;border-bottom:1px solid #ddd;padding: 40px 0;}
.distribute-list li{display:inline-block;}
.distribute-list li.distribute_date, .distribute-list li.ticket_qty, .distribute-list li.phone_number, .distribute-list li.car_number{position:absolute;}
.distribute-list li.distribute_date{top: 48px;right: 0;font-size: 1.2em;color: #777;}
.distribute-list li.ticket_qty{top: 20px;right:0;background: #d9ecff;color: #237fe0;padding: 3px 5px;border-radius: 3px;}
.distribute-list li.car_number{top: 14px;font-size: 1.8em;font-weight: 600;}
.distribute-list li.phone_number{top: 45px;font-size: 1.5em;}

/* 선납권 결제이력 */
.purchase-list div > ul{position:relative;border-bottom:1px solid #ddd;padding: 40px 0; cursor:pointer;}
.purchase-list li{display:inline-block;}
.purchase-list li.purchase_date, .purchase-list li.pay_method, .purchase-list li.ticket_qty, .purchase-list li.ticket_amt{position:absolute;}
.purchase-list li.purchase_date{top: 48px;right: 0;font-size: 1.2em;color: #777;}
.purchase-list li.pay_method{top: 20px;right:0;background: #ff2b73;color: #fff;padding: 3px 5px;border-radius: 3px;}
.purchase-list li.ticket_qty{top: 14px;font-size: 1.8em;font-weight: 600;}
.purchase-list li.ticket_amt{top: 45px;font-size: 1.5em;}

/* 선납권 환불목록 */
.refund-list div > ul{position:relative;border-bottom:1px solid #ddd;padding: 20px 0;}
.refund-list li{display:inline-block;}
.refund-list li.refund-list-date, .refund-list li.refund-list-condi, .refund-list li.refund-list-count, .refund-list li.refund-list-money{position:absolute;}
.refund-list li.refund-list-date{top: 48px;right: 0;font-size: 1.2em;color: #777;}
.refund-list li.refund-list-condi{top: 20px;right:0;background: #ffc5c5;color: #d32525;padding: 3px 5px;border-radius: 3px;}
.refund-list li.refund-list-count{top: 14px;font-size: 1.8em;font-weight: 600;}
.refund-list li.refund-list-money{top: 45px;font-size: 1.5em;}
.refund-list-bank {width: 100%;margin-top: 60px;background: #ebebeb;padding: 15px;}
.refund-list-bank > div{margin:0 10px;}
.refund-list-bank > div > div{margin-bottom:5px;}
.refund-list-bank span{display:inline-block;font-size:1.2em;}
.refund-list-bank .bank-title{font-weight:600;width:25%;}
.refund-list-bank .bank-txt{width:70%;}

/* 검색 */
.title-name, .detail-search{display:none;}
.detail-search label {display: none;}
.detail-search select {border: 1px solid #ddd;height:30px;border-radius: 3px;}
.detail-search button {padding: 10px;text-indent: -9999px;border-radius: 3px;vertical-align: bottom;width: 30px;height: 30px;background: #000 url('/img/search.png')no-repeat 50%;background-size: 70%;}

/* page */
.page-control{margin-top:5px;}
.page-control ul {display:inline-block;margin-right:5px;}
.page-control ul li:last-child{margin-right:0;}
.page-control ul li a{display:block;padding:5px;width:30px;height:30px;line-height:20px;background:rgb(49 122 208 / 20%);border-radius:5px;color:#0054ab;}
.page-control span a img{width: 30px; height: 30px; padding: 7px; background: rgb(49 122 208 / 20%); border-radius: 5px;}

/* 지도 디자인 */
.parking-name {position:relative;height: 70px;padding: 10px;font-size: 1.3em;}
.parking-name button{position:absolute;bottom: 5px;padding: 7px 5px;}
.parking-choose {background: #2367ff;color: #fff;width: 60%;left: 4%;cursor: pointer;}
.parking-close {right: 4%;width: 30%;cursor: pointer;}
.ovrly-label {margin-bottom: 96px;}
.ovrly-label * {display: inline-block;vertical-align: top;}
.ovrly-label .ovrly-left {background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat;display: inline-block;height: 24px;overflow: hidden;vertical-align: top;width: 7px;}
.ovrly-label .ovrly-center {background: url(https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat-x;display: inline-block;height: 24px;font-size: 12px;line-height: 24px;}
.ovrly-label .ovrly-right {background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") -1px 0  no-repeat;display: inline-block;height: 24px;overflow: hidden;width: 6px;}

/* 주차요금 계산 팝업 */
#chkPopup {display:none;position: fixed;z-index: 9999;left: 3%;top: 30%;width: 94%;background: #fff;border-radius:10px;box-shadow: 1px 1px 10px 10px rgba(0,0,0,.3);}
.modal-body {text-align: center;background: url('/img/warning.png') no-repeat 50%;padding-top: 90px;background-size: 15%;}
.modal-body p {margin: 5px;font-size: 1.5em;font-weight: 600;color: #587cff;}
.modal-footer {padding: 10px 10px 20px 10px;}
ul.btns03{text-align:center;}
ul.btns03 li{display:inline-block;width:32%;}
ul.btns03 li button{width:100%;border-radius:5px;font-weight: 600;font-size: 1.2em;height: 45px;}
.btn-accept{background:#2276ef;color:#fff;}
.btn-warring{background:#FF9800;color:#fff;}
.btn-cancel{background:#d4d4d4;color:#777;}
#chkPopup .btns03 li:first-child{display:none;}
/* 에러 팝업 */
#errorPopup {display:none;position: fixed;z-index: 9999;left: 3%;top: 30%;width: 94%;background: #fff;border-radius:10px;box-shadow: 1px 1px 10px 10px rgba(0,0,0,.3);}
ul.btns04{text-align:center;}
ul.btns04 li{display:inline-block;}
ul.btns04 li button{width:100%;border-radius:5px;font-weight: 600;font-size: 1.2em;height: 45px;}
#chkPopup .modal-body,#errorPopup .modal-body {background: url('/img/warning.png') no-repeat 50% 30%;background-size: 15%;} .modal-body {background: url('/img/warning.png') no-repeat 50% 30%;background-size: 15%;}

/* 회원정보 */
.udt-btn {position: absolute;top: 0;right: 0;padding: 10px;border-radius: 5px;background: #444;color: #fff;vertical-align: inherit;}

.udt-btn:active{background:#555;}

/* 결제 영수증 */
.bill-bg{position:relative;height: 1000px;background:#fff;width: 30%;margin: 0 auto;}
.bill-bg h1{font-size: 2em;padding:15px;}
.bill-contents{position:absolute;top:7%;width:100%;}
.bill-bg .contents{width:85%;margin:0 auto;}
.bill-contents01 ul li, .bill-contents04 ul li{font-size:1.1em;}
.bill-contents02 {margin-top: 20px;margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px dashed #000;}
.bill-contents02 table {border-collapse:collapse;width: 100%;border-top:1px solid #000;text-align: center;}
.bill-contents02 table th, .bill-contents02 table td{padding:5px;font-size:1.1em;}
.bill-contents02 table th{border-bottom:1px solid #000;font-weight:400;}
.bill-contents02 table td{font-size:1.1em;}
.bill-contents03{margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed #000;}
.bill-contents03 ul li{font-size:1.3em;margin-bottom:5px;}
.bill-contents03 ul li .txt, .bill-contents04 ul li .txt{float:right;}

/****************************
tablet(pad)
****************************/
@media (min-width: 600px) and (max-width: 768px){
	/* 로그인, 가입 */
	.top-box{height:230px;background-size:55%;}	
	.login-contents-box{width:350px;}
	.box-contents img{width:25px;}
	.login-input-box{font-size:1.5em;}
	.member-title img {width:20px;}
	.chk-box label{font-size:1.3em;}
	.joinchk{margin-top:3px;}
	.show{margin-top:5px;}
	.forget-btn{font-size:1.2em;}
	.or, .join{font-size:1.3em;}
	.info-txt{font-size:1.2em;}
	.at {line-height: 1;font-size: 1.5em;}
	
	.header p{font-size:2em;}
	.mbtn a{width: 25px;height: 25px;background-size:25px;}
	.next-btn{font-size:1.5em;}
	
	/* main */
	.box-top .title{font-size:1.8em;}
	.box-top .txt p{font-size:2.3em;}
	.buy-list ul li a{font-size:1.5em;}
	.box-btn{font-size:1.8em;}
	.buy img, .send img{width:30px;}
	.input-box, .choose{height:45px;font-size:1.5em;}
	.plus, .minus{width:45px;height:45px;font-size:1.5em;}
	.search{height:45px;}
	.result-contents li{margin-bottom:20px;}
	.result-contents li span{font-size:2em;}
	
	/* 팝업 */
	#noneCar .popup-header p, #carList .popup-header p{font-size:2.2em;}	
	#noneCar .popup-header button, #carList .popup-header button{top: 5px;right: 15px;background-size: 55%;}
	#carList, #noneCar{top: 20%;left: 13%;width: 75%;}
	#noneCar .popup-content{background: url('/img/warning.png') no-repeat 50% 30%;padding-top: 135px;}
	.popup .popup-footer button{font-size: 1.8em;height: 55px;}
	#noneCar .popup-content p, #carList .popup-content p{font-size:1.8em;}
	#carList .popup-content ul li a{font-size:1.8em;}
	
	/* 주차요금 계산 */
	.message-btn{background-size: 35%;height: 59px;}
	.pay-btn{font-size: 1.5em;}
	
	/* menu */
	.info-box p{font-size:1.8em;}
	.closeBtn a{width: 25px;height: 25px;margin-top: 15px;margin-right: 15px;background-size: 20px;}
	.back a{width: 25px;height: 25px;background-size: 25px;}
	.responsive-menu-list ul li a{font-size:1.3em;}
	.rsp, ul.dep li a{font-size:1.5em;padding:20px 10px;}
	.rsp img{width:20px;}
	
	/*sub-page*/
	p.txt-title{font-size:1.5em;}
	.chk-btn{height: 45px;font-size:1.3em;}
	.udt-btn{height: 50px;font-size:1.3em;}
	
	/* 선납권 환불목록 */
	.refund-list li.refund-list-count, .distribute-list li.car_number, .purchase-list li.ticket_qty{font-size:2em;}
	.refund-list li.refund-list-money, .distribute-list li.phone_number, .purchase-list li.ticket_amt{font-size:1.8em;}
	.refund-list li.refund-list-condi, .distribute-list li.ticket_qty, .purchase-list li.pay_method{font-size:1.3em;}
	.refund-list li.refund-list-date, .purchase-list li.purchase_date{font-size:1.5em;}
	.refund-list-bank span, .distribute-list li.distribute_date{font-size:1.5em;}
	
	/* 공지 */
	.notice-list .tb_type04 a{font-size:1.3em;}
	.notice-title h1{font-size:1.8em;}
	.notice-contents{font-size: 1.5em;}
	.notice-list .tb_type04 td{font-size:1.4em;}
	
	/* 선납권 충전 완료 */
	.success, .fail{background-size: 15%;}
	.result-page{padding-top: 200px;}
	.result-page p{font-size: 2.5em;}
	
	/* 가입완료  */
	.signup-success p {font-size: 2.5em;}
	p.complete {font-size: 1.8em;margin: 10px 0;padding-bottom: 300px;background-size: 80%;}
	
	/* 결제 영수증 */
	.bill-bg{width:50%;}
	
}

/****************************
tablet(pro)
****************************/
@media (min-width: 769px) and (max-width: 1366px){
	.contents{margin:10px 20px;}
	
	/* 로그인, 가입 */
	.top-box{height: 300px;background-size: 45%;}	
	.login-contents-box{width:400px;}
	.login-input-box{font-size:2em;}
	.box-contents img {width: 30px;margin: 10px;}
	.chk-box {padding: 15px 5px;}
	.forget-btn{font-size: 1.5em;}
	.chk-box label, .or, .join{font-size: 1.5em;}
	
	.joinchk {margin-top: 10px;}
	.show{font-size:1.5em;margin-top:10px;}
	.member-title{font-size:2.5em;}
	.add-btn{font-size:2em;}
	.popup-top h1{font-size:2em;}
	.close img{width:22px;}
	#JoinPopup .popup-txt-box, #MapPopup .popup-txt-box{height:400px;}
	.popup-txt-box p, .popup-txt-box ul li{font-size:1.8em;}
	.chk-close a{font-size: 2em;padding: 25px 10px;}
	.text-contents input[type="file"]{font-size:2em;}
	.at {line-height: 3;font-size: 2em;}
	p.member-title img {width: 25px;}
	
	.header{padding:25px;}
	.header p{font-size:3em;}
	.mbtn a{width: 37px;height: 37px;background-size: 37px;}
	.next-btn{font-size: 2.5em;padding: 25px;}
	
	/*sub-page*/
	p.txt-title{font-size:2.3em;margin-bottom: 10px;}
	.text-contents{margin-bottom: 25px;}
	.chk-btn{height:65px;font-size:2em;}
	.chk-btn{height:70px;font-size:2em;}
	.info-txt{font-size:1.5em !important;}
	.plus, .minus{font-size: 2em;width: 65px;height: 65px;}
	
	/* main */
	.box-top .title{font-size:3em;}
	.box-top .txt{padding:20px 10px;}
	.box-top .txt p{font-size:4em;}
	.buy-list ul li a{font-size:3em;padding: 30px 20px;}
	.box-btn{font-size:3em;padding: 20px}
	.buy img, .send img{width:50px;}
	.input-box, .choose{height: 65px;font-size: 2em;}
	.search{height:65px;background-size: 30%;}
	.result-contents li{margin-bottom: 20px;}
	.result-contents li span{font-size: 2.5em;}

	/* 팝업 */
	#noneCar .popup-header, #carList .popup-header{padding:20px;}
	#noneCar .popup-header p, #carList .popup-header p{font-size: 3.5em;}	
	#noneCar .popup-header button, #carList .popup-header button{top: 15px;right: 20px;background-size: 90%;}
	#carList, #noneCar{top: 20%;left: 13%;width: 75%;}
	#noneCar .popup-content{background: url('/img/warning.png') no-repeat 50% 30%;padding-top: 135px;}
	.popup .popup-footer button{font-size: 2.5em;height: 85px;}
	#noneCar .popup-content p, #carList .popup-content p{font-size: 3em;padding: 25px;}
	#carList .popup-content ul li a{font-size: 3em;padding: 20px;}
	#carList .popup-content ul li{margin:15px;}
	#carList .popup-content{height: 400px;}
	
	/* 주차요금 계산 */
	.message-btn{background-size: 35%;height: 89px;}
	.pay-btn{font-size: 2.5em;padding: 25px;}
	
	/* menu */
	.info-box{padding:20px 0;}
	.info-box p{font-size:2.5em;}
	.closeBtn a{width: 35px;height: 35px;margin-top: 25px;margin-right: 25px;background-size: 30px;}
	.back a{width: 35px;height: 35px;background-size: 30px;}
	.responsive-menu-list ul li::after{height:65px;}
	.responsive-menu-list ul li a{font-size: 2em;padding: 30px 0;}
	.rsp, ul.dep li a{font-size:2.5em;padding:25px 10px;}
	.rsp img{width:35px;}
	
	/* 결제내역 */
	.distribute-list div > ul, .purchase-list div > ul{padding: 60px 0;}
	.distribute-list li.distribute_date, .purchase-list li.purchase_date, .refund-list-date{top: 75px !important;}
	.distribute-list li.ticket_qty{top: 25px;}
	.distribute-list li.car_number, .purchase-list li.ticket_qty{top: 13px;}
	.distribute-list li.phone_number, .purchase-list li.ticket_amt, .refund-list-money{top: 65px !important;}
	
	.refund-list li.refund-list-count, .distribute-list li.car_number, .purchase-list li.ticket_qty{font-size: 3em;}
	.refund-list li.refund-list-money, .distribute-list li.phone_number, .purchase-list li.ticket_amt{font-size: 2.5em;}
	.refund-list li.refund-list-condi, .distribute-list li.ticket_qty, .purchase-list li.pay_method{font-size: 2em;}
	.refund-list li.refund-list-date, .purchase-list li.purchase_date{font-size: 2em;}
	.refund-list-bank span, .distribute-list li.distribute_date{font-size: 2em;}
	.refund-list li.refund-list-condi, .purchase-list li.pay_method{padding:5px;top:25px;}
	
	.refund-list-bank{margin-top:100px;padding: 20px;}
	.refund-list-bank > div > div{margin-bottom:15px;}
	
	/* 공지 */
	.notice-list .tb_type04 a{font-size:1.5em;}
	.notice-title h1{font-size:2.8em;}
	.notice-title p{font-size:2em;}
	.notice-contents{font-size: 2.5em;}
	.notice-list .tb_type04 td{font-size:1.8em;}
	
	.page-control{margin-top:20px;}
	.page-control ul li a{padding: 10px;width: 40px;height: 40px;font-size: 2em;line-height: 17px;}
	
	/* 선납권 충전 완료 */
	.success, .fail{background-size: 15%;background-position: 50%;}
	.result-page{padding-top: 200px;}
	.result-page p{font-size: 2.8em;}
	
	/* 가입완료  */
	.signup-success p {font-size: 3em;}
	p.complete {font-size: 2.3em;margin: 10px 0;padding-bottom: 450px;background-size: 80%;}
	
	/* 결제 영수증 */
	.bill-bg{width:50%;}
	
}

@media (max-width: 767px) {
	/* 로그인 화면 */
	.top-box{height: 200px;background: url('/img/publicPark.png')no-repeat 50%  80%;background-size: 80%;}
	
	/* 결제 영수증 */
	.bill-bg{width:100%;}
}