@charset "utf-8";
/* 당근고양이 'ㅅ' */

/* 초기화 */
@import url("default.css");

/* 기본 레이아웃 */
html, body {width:100%; overflow-x:hidden; word-break:keep-all;}
input.text,
select.text,
textarea.text {border:#ddd 1px solid; outline:0; background:#fff; transition:.2s linear;}
input.text,
select.text {height:44px;}
input.text {padding:0 10px;}
textarea.text {padding:10px;}
input.text:focus,
select.text:focus,
textarea.text:focus {border-color:#aaa;}
body.ie select.text {padding:0 0 0 0 !important; background:none;}
button,input,a {transition:.2s linear;}
a.smoth {scroll-behavior:smooth;}
.imgin img {position:absolute; top:50%; left:50%; width:auto; height:auto; max-width:100%; max-height:100%; transform:translate(-50%,-50%);}

.inner {width:100%; padding:0 15px; max-width:768px; margin:0 auto;}

.red {color:#ff1b1b;}
.blue {color:#109dde !important;}

/* header */
.header {position:fixed; top:0; left:0; width:100%; height:45px; background:#fff; z-index:100; display:flex;}
.header .logo {display:block; width:140px; height:45px; line-height:45px; text-align:center; font-size:0; margin:0 auto;}
.header .logo img {height:25px;}
.header .btn_menu {position:absolute; top:0; right:0; width:45px; height:45px; z-index:10;}
.header .btn_menu p {position:absolute; top:50%; left:50%; width:16px; height:2px; background:#000; margin-left:-8px; transition:.2s linear;}
.header .btn_menu .t {margin-top:-6px;}
.header .btn_menu .m {margin-top:-1px;}
.header .btn_menu .b {margin-top:4px;}
.header.on .btn_menu p {background:#fff;}
.header.on .btn_menu .t {margin-top:-1px; transform:rotate(135deg);}
.header.on .btn_menu .m {width:0;}
.header.on .btn_menu .b {margin-top:-1px; transform:rotate(-135deg);}
.header .gnb {position:fixed; top:0; right:-100%; width:100%; height:100%; opacity:0; padding-left:20%; transition:.2s linear;}
.header.on .gnb {background:rgba(0,0,0,.55); right:0; opacity:1;}
.header .gnb .menu_wrap {background:#283385; width:100%; height:100%;}
.header .gnb .tit {height:10%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;}
.header .gnb .tit strong {display:block; font-size:30px; color:#fff; font-weight:700; line-height:1.4;}
.header .gnb .tit p {font-size:15px; color:#fff; line-height:1.4; margin:5px 0 25px;}
.header .gnb .tit .btn {display:block; font-size:15px; color:#283385; font-weight:500; line-height:33px; height:33px; width:120px; background:#fff; border-radius:16px; margin:0 auto;}
.header .gnb ul {max-height:calc(100vh - (100vh - 452px) - 139px); overflow:auto;}
.header .gnb li {border-top:rgba(255,255,255,.35) 1px solid;}
.header .gnb li > a {position:relative; display:block; font-size:15px; color:#fff; font-weight:500; line-height:44px; padding:0 20px;}
.header .gnb li i {position:absolute; top:50%; right:20px; width:8px; height:8px; border-right:#fff 2px solid; border-bottom:#fff 2px solid; transform:rotate(45deg); margin-top:-6px; transition:.2s linear;}
.header .gnb li.open i,
.header .gnb li.on i {transform:rotate(225deg); margin-top:-2px;}
.header .gnb li.open.on i {transform:rotate(45deg); margin-top:-6px;}
.header .gnb .snb {padding:0 0 10px; display:none;}
.header .gnb .snb a {display:block; font-size:15px; color:#fff; font-weight:300; line-height:28px; padding:0 30px;}
.header .foot {font-size:11px; color:rgba(255,255,255,.72); line-height:1.5; margin-top:30px; padding:0 20px 20px;}
.header .foot .tel {margin:10px 0;}
.header .foot .tel i {display:inline-block; vertical-align:top; width:15px;}
.header .foot .btns {display:flex;}
.header .foot .btns a {color:rgba(255,255,255,.72);}


/* 공통 */

.display-none {
	display: none;
}


.loading_popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(255, 255, 255, .5);
	z-index: 99999;
}

.loading_popup img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.contents {padding:45px 0 20px;}
.contents .title {position: relative; font-size:19px; color:#222; font-weight:700; line-height:42px; height:42px; width:100%; text-align:center; background:#e2e2e2; margin-bottom:25px;}
.contents .title .btn_re {position: absolute; top:0; right:10px; width: 42px; height: 42px; background: url('/Resources/images/icon_re.gif') no-repeat 50% 50% / 22px;}
.main_wrap .title {color:#fff; background:#283385;}
.ctit {font-size:17px; color:#222; font-weight:700; line-height:1.2; text-align:center; margin-bottom:20px;}

.gbox {border:#ebebeb 1px solid; padding:15px; font-size:17px; color:#222; font-weight:700; line-height:1.4; text-align:center;}
.gbox.mt {margin-top:45px;}
.gbox .ctit {padding-top:25px;}
.tbl th,
.tbl td {font-size:14px; color:#222; line-height:20px; text-align:center; padding:10px 0;}
.tbl thead th {font-weight:500; background:#f8f8f8;}
.tbl_tdover {overflow:auto; height:120px; margin:10px 0;}
.tbl_tdover tbody td {font-weight:400;}
.tbl_gup thead th {background:#ccc;}
.tbl_gup tbody td {background:#f2f2f2; height:50px;}
.tbl_blue thead th {color:#fff; background:#283385;}
.tbl_blue tbody td {background:#f0f9fd; height:50px;}
.tbl_blue .plmi {text-align:center;}
.tbl_blue .plmi > *,
.tbl_blue .btn {display:inline-block; vertical-align:middle; height:24px; width:24px; line-height:22px; text-align:center;}
.tbl_blue .plmi .trn {border:0; outline:0; background:none;}
.tbl_blue .btn {background:#fff; border:#ddd 1px solid; font-size:17px; font-family:'nanum gothic';}
.tbl_blue .btn.btn_del {font-size:14px;}

.paging {display:flex; justify-content:center; margin-top:30px;}
.paging a {width:30px; height:30px; font-size:13px; color:#999; line-height:28px; text-align:center; margin:0 1px; border:#ebebeb 1px solid;}
.paging a.on {color:#fff; background:#283385; border-color:#283385;}
.paging .btn_arrow {font-family:'nanum gothic';}

/* main */
.to_parking {display:flex; justify-content:space-between; margin:20px 0 50px;}
.to_parking li {position:relative; width:calc(50% - 10px); font-size:15px; color:#58585a; font-weight:500; line-height:30px;}
.to_parking li a {position:relative; display:block; padding-right:80px;}
.to_parking li a > * {position:absolute; top:0; right:0; width:70px; height:30px; line-height:28px; text-align:center; font-size:15px; color:#222; border-radius:0 10px; padding-right:10px;}
.to_parking li span {font-weight:500; border:#ebebeb 1px solid;}
.to_parking li strong {background:#f8f8f8; border:#e1e1e1 1px solid;}
.to_parking li i {position:absolute; top:0; right:10px; width:2px; height:100%; background:url('/Resources/images/dots.png') no-repeat 50% 50% / contain;}
.search_car {background:#f8f8f8; padding:25px; text-align:center; margin-bottom:10px;}
.search_car b {display:block; font-size:18px; color:#222; line-height:1.2; margin-bottom:20px;}
.search_car .search_wrap {display:flex; justify-content:center; gap:15px;}
.search_car .search_wrap .text,
.search_car .search_wrap .btn {font-size:16px; font-weight:500; height:32px; text-align:center;}
.search_car .search_wrap .text {width:130px; border:#ebebeb 1px solid; background:#fff; color:#333; line-height:30px;}
.search_car .search_wrap .btn {width:70px; background:#283385; color:#fff; line-height:32px;}
.btn_tar {text-align:right;}
.btn_tar.mb {margin-bottom:5px;}
.btn_tar .btn {display:inline-block; vertical-align:top; font-size:16px; color:#fff; font-weight:500; line-height:40px; height:40px; text-align:center; background:#283385; padding:0 20px;}
.btn_bdrs {display:inline-block; vertical-align:top; font-size:14px; color:#222; font-weight:500; line-height:38px; height:40px; padding:0 20px; border-radius:0 15px; border:#e1e1e1 1px solid;}

/* login */
.login_wrap {background:#283385; padding-top:80px; height:100vh;}
.login_wrap .logo {position:relative; font-size:15px; color:#fff; font-weight:700; text-align:center; margin-bottom:50px;}
.login_wrap .logo:before {content:""; display:block; height:25px; width:100%; background:url('/Resources/images/logo_w.png') no-repeat 50% 50% / contain; margin-bottom:-3px;}
.login_wrap .text,
.login_wrap .btn {background:#fff; border-radius:22px;}
.login_wrap .text {display:block; width:100%; border:0; outline:0; margin-top:10px; padding:0 30px; font-size:15px; color:#333;}
.login_wrap .text:first-child {margin-top:0;}
.login_wrap .text::placeholder {color:#666;}
.login_wrap .btn {display:block; font-size:15px; color:#283385; font-weight:700; line-height:44px; height:44px; width:100%; margin-top:25px;}
.login_wrap p {font-size:15px; color:#fff; line-height:22px; margin-top:40px; text-align:center;}
.login_wrap .copy {position:absolute; bottom:20px; left:0; width:100%; text-align:center; font-size:12px; color:#000; line-height:20px; text-align:center;}
.login_wrap .copy strong {display:block; font-size:15px;}

/* 고객등록 */
.inputbox {background:#f6f6f6; padding:25px 10px; display:flex; flex-direction:column; gap:15px;}
.inputbox.mb {margin-bottom:5px;}
.inputbox dl {display:flex;}
.inputbox dt {font-size:15px; color:#222; font-weight:500; text-align:center; width:80px; line-height:30px;}
.inputbox dd {width:calc(100% - 80px);}
.inputbox dd .text {width:100%; background:#fff; border:0; outline:0; padding:0 5px; font-size:13px; color:#333; height:30px;}
.inputbox dd .text::placeholder {color:#9e9e9e; font-weight:300;}
.inputbox.dt_w dt {width:90px;}
.inputbox.dt_w dd {width:calc(100% - 90px);}

.btn_tac {display:flex; justify-content:center; text-align:center; margin-top:34px; font-size:0;}
.btn_tac .btn {display:inline-block; vertical-align:top; font-size:16px; color:#fff; font-weight:500; line-height:40px; height:40px; width:100px; background:#283385; margin:0 8px; border:0; outline:0;}
.btn_tac .btn_g {background:#c2c2c2;}
.btn_tac .btn_wi {display:inline-block; vertical-align:top; font-size:16px; color:#fff; font-weight:500; line-height:40px; height:40px; width:80%; background:#283385; margin:0 8px; border:0; outline:0;}


.terms_box {overflow:auto; height:120px; margin:10px 0;}
.terms_box .btn_wi {display:inline-block; vertical-align:top; font-size:16px; color:#fff; font-weight:500; line-height:40px; height:40px; width:80%; background:#283385; margin:0 8px; border:0; outline:0;}

.inputbox .btn_tac {margin-top:10px;}
.inputbox .btn_tac .btn {width:150px;}
.inputbox + .btn_tar .btn {display:inline-block; font-size:14px; color:#fff; font-weight:500; line-height:40px; height:40px; width:120px; text-align:center; background:#283385;}

.inputbox .date_wrap {display:flex; margin-top:5px;}
.inputbox .date_wrap > * {height:30px;}
.inputbox .date_wrap input {width:calc(50% - 10px);}
.inputbox .date_wrap em {width:20px; text-align:center; line-height:30px;}

.total {text-align:right; margin-top:20px; font-size:14px; color:#666; line-height:30px;}
.total strong {font-size:18px; color:#222; margin-left:20px;}
.total em {width:1px; height:10px; background:#ddd; margin:0 5px; display:inline-block; vertical-align:middle;}

.yaks p {font-size:13px; color:#222; font-weight:300; line-height:1.2; padding-left:10px; text-indent:-10px;}
.yaks strong {font-size:18px; color:#222; margin-left:20px;}
.yaks a {font-size:18px; color:#109dde; margin-left:20px;}
.yaks .box { overflow:auto; width:100%; height:500px; margin:5px 0; }

.terms_wrap {display:flex; justify-content:center; text-align:center; margin-top:34px; font-size:0;}

.sale_top {
    display: flex;
}
.sale_top dt,
.sale_top dd {width:50%;}
.sale_top dd {padding-left:20px;}
.sale_top .tit {font-size:20px; color:#222; font-weight:700; line-height:23px; margin-top:25px;}
.sale_top .tit:first-child {margin-top:0;}
.sale_top strong {display:block; font-size:17px; color:#109dde; line-height:23px;}
.sale_top p {font-size:14px; color:#222; line-height:24px;}

.blue_box {background:#f0f9fd; padding:16px 12px; margin-top:40px;}
.blue_box .tit {font-size:16px; color:#222; font-weight:700; line-height:1.2; padding-bottom:15px; border-bottom:#e1e1e1 1px solid;}
.blue_box .select_area {position:relative; margin-top:15px; padding-right:60px;}
.blue_box .select_area .text {width:100%; height:28px; border:#ebebeb 1px solid; border-radius:0 10px; font-size:13px; color:#666; font-weight:300; padding:0 10px;}
.blue_box .select_area .btn {position:absolute; top:0; right:0; font-size:15px; color:#fff; font-weight:500; line-height:28px; height:28px; width:55px; text-align:center; background:#283385; border:0;}
.blue_box .over_ul {overflow:auto; height:200px;}
.blue_box .over_ul li {position:relative; border-bottom:#e1e1e1 1px solid; font-size:16px; color:#666; font-weight:300; line-height:45px; padding-right:50px; display:flex;}
.blue_box .over_ul li:last-child {border-bottom:0;}
.blue_box .over_ul li .name {width:80%;}
.blue_box .over_ul li .count {width:40px;}
.blue_box .over_ul li .btn {position:absolute; top:10px; right:0; width:50px; height:25px; line-height:23px; text-align:center; font-size:15px; color:#222; border:#666 1px solid;}
.blue_box .btn_tac {margin-top:20px;}
.blue_box .btn_tac .btn {width:90px;}

.popup,
.popup .black {position:fixed; top:0; left:0; width:100%; height:100%;}
.popup {z-index:101; display:none;}
.popup .black {background:rgba(0,0,0,.6);}
.popup .inbox {position:absolute; top:50%; left:50%; width:calc(100vw - 30px); background:#fff; padding:30px; text-align:center; transform:translate(-50%,-50%);}
.popup .inbox strong {display:block; font-size:18px; color:#222; font-weight:500; line-height:24px;}
.popup .inbox p {font-size:14px; color:#222; line-height:22px; margin:20px 0;}
.popup .inbox .btn {display:block; font-size:14px; color:#fff; font-weight:500; line-height:40px; height:40px; width:100px; background:#283385; margin:0 auto;}
.popup .inbox .popup-btn-box2{display:block; font-size:14px; color:#fff; font-weight:500; line-height:40px; height:40px; width:100px; background:#283385; margin:20px;}
.popup .inbox .popup-btn-box3{display:block; font-size:14px; color:#fff; font-weight:500; line-height:40px; height:40px; width:100px; background:#283385;  margin:20px;}

/* 달력 */
.hasDatepicker + img {position:relative; margin:0 0 0 -30px; width:30px;}
.ui-datepicker {width:200px; margin-top:-1px; display:none;}
.ui-datepicker-header {position:relative; border:#ddd 1px solid; border-bottom:0; background:#000; overflow:hidden;}
.ui-datepicker-title {text-align:center; font-size:13px; color:#fff; font-weight:700; line-height:40px; width:100%;}
.ui-datepicker-prev,
.ui-datepicker-next {position:absolute; top:0; height:40px; line-height:40px; width:40px; text-align:center;}
.ui-datepicker-prev {left:0;}
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {display:block; width:11px; height:20px; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; font-size:0; margin:10px auto;}
.ui-datepicker-prev .ui-icon {background-image:url('/Resources/images/arrow_prev.png');}
.ui-datepicker-next {right:0;}
.ui-datepicker-next .ui-icon {background-image:url('/Resources/images/arrow_next.png');}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {border:#ddd 1px solid; text-align:center; background:#fff; line-height:24px;}
.ui-datepicker-calendar th {}
.ui-datepicker-calendar th:first-child {color:#d43333;}
.ui-datepicker-calendar th:last-child {color:#000;}
.ui-datepicker-calendar td a {display:block;}
.ui-datepicker-calendar td:first-child a {color:#d43333;}
.ui-datepicker-calendar td:last-child a {color:#000;}

.open_close {margin-bottom:20px;}
.open_close .search_car {margin-bottom:5px;}
.open_close .btn_opcl {display:block; width:100%; font-size:15px; color:#000; font-weight:500; line-height:38px; height:40px; text-align:center; border:#ddd 1px solid;}
.open_close .btn_opcl i {transition:.2s linear;}
.open_close.on .btn_opcl i {transform:rotate(180deg);}

/* 주차현황상세 */
.parking_list {padding-bottom:50px;}
.parking_list dt,
.parking_list dd {font-size:15px; color:#000; f width:700; line-height:40px; height:40px; padding:0 10px; border-radius:5px;}
.parking_list dt {background:#acacac;}
.parking_list dd {background:#e9e9e9; margin-top:5px;}

.btn_fix {position:fixed; bottom:0; left:0; width:100%; height:40px; line-height:40px; font-size:15px; color:#fff; font-weight:500; text-align:center; background:#283385;}

.pre_box { display: block; font-size:13px; font-weight:300; white-space: pre-line;  margin: 1em 0; }