@charset 'utf-8';

@font-face {
    font-family:'Pretendard';
    font-style:normal;
    font-weight:400;
    src:url('fonts/Pretendard-Regular.woff') format('woff');
}
@font-face {
    font-family:'Pretendard';
    font-style:normal;
    font-weight:600;
    src:url('fonts/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
    font-family:'Pretendard';
    font-style:normal;
    font-weight:700;
    src:url('fonts/Pretendard-Bold.woff') format('woff');
}

/* common */
:root{
    --top:env(safe-area-inset-top);
    --right:env(safe-area-inset-right);
    --bottom:env(safe-area-inset-bottom);
    --left:env(safe-area-inset-left);
    --radius:16px;
}
*{margin:0; padding:0; font-family:'Pretendard'; font-weight:400; -webkit-tap-highlight-color:transparent;}
body{font-size:16px; color:#222; line-height:1.2; -webkit-text-size-adjust:none; -webkit-overscroll-behavior:none; overscroll-behavior:none;}
a,
a:hover,
a:focus{color:inherit; text-decoration:none;}
hr, caption, legend{display:none;}
colgroup{background:none;}
h1, h2, h3, h4, h5, h6{font-size:100%; line-height:1.2;}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, fieldset, table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption, img{margin:0; padding:0; border:0;}
ul, ol, li{list-style:none;}
table{clear:both; width:100%; border-spacing:0; border:0;}
p, div, th, td{font-size:100%;}
img,input,select,textarea{vertical-align:middle;}
input,select,textarea, button{font-family:'Pretendard'; font-size:100%; outline:none;}
textarea{resize:none;}
input[type="submit"], button{cursor:pointer;}
button{outline:none; border:0; appearance:none;}
button::-moz-focus-inner{padding: 0; border:0;}
::placeholder{color:#999;}
.blind{position:absolute; top:0; left:-9999px; width:0; height:0; font-size:0; line-height:0;}
.lock{overflow:hidden;}
.require:after{margin:0 0 0 2px; content:'*'; color:#ea5454;}

html, body{height:100%;}
.wrap{display:flex; flex-direction:column; max-width:640px; height:100%; margin:0 auto;}

/* header */
.header{position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:var(--top) 0 0; border-bottom:1px solid #ddd; background:#fff;}
.header .logo a{display:block; width:147px; height:28px; overflow:hidden; text-indent:-9999px; background:url(/images/logo.png) no-repeat center; background-size:100% auto;}
.header .btn-menu{position:absolute; top:50%; right:13px; width:24px; height:24px; overflow:hidden; text-indent:-9999px; background:url(/images/ico_menu.svg) no-repeat center; transform:translateY(-50%);}

.nav{position:fixed; top:51px; left:0; display:none; width:100%; height:calc(100% - 51px); box-sizing:border-box; padding:0 20px 61px; background:#fff;}
.nav .user{padding:25px 0 15px; border-bottom:1px solid #eee;}
.nav .user p{padding:0 0 0 25px; color:#6c7278; background:url(/images/ico_person.png) no-repeat 0 center; background-size:18px auto;}
.nav > ul{padding:20px 0 0;}
.nav > ul > li:not(:first-child){margin:20px 0 0;}
.nav a{position:relative; display:block; height:48px; font-size:18px; line-height:48px; border-radius:6px;}
.nav .cate{font-weight:700;}
.nav .cate:after{position:absolute; top:50%; right:10px; width:24px; height:24px; content:''; background:url(/images/ico_nav_arrow.png) no-repeat center; background-size:24px auto; transform:translateY(-50%) rotate(180deg);}
.nav .cate.active:after{transform:translateY(-50%) rotate(0deg);}
.nav .cate.active + ul{display:block;}
.nav .sub{display:none;}
.nav .sub a{padding:0 16px; transition:all .2s;}
.nav .sub a:active,
.nav .sub .active{background:#f9f9f9;}

.nav-opened .btn-menu{background:url(/images/ico_close.svg) no-repeat center;}
.nav-opened .nav{display:block;}

/* tab-bar */
.tab-bar{position:relative; z-index:2; min-height:60px; border-top:1px solid #ddd; background:#fff;}
.tab-bar ul{display:flex; justify-content:space-between; text-align:center;}
.tab-bar li{position:relative; width:20%;}
.tab-bar a{display:block; width:100%; padding:35px 0 10px; font-size:11px; color:rgba(0, 0, 0, .6);}
.tab-bar .home a{background:url(/images/navi_home.svg) no-repeat center 7px;}
.tab-bar .as a{background:url(/images/navi_as.svg) no-repeat center 11px;}
.tab-bar .rental a{background:url(/images/navi_rent.svg) no-repeat center 7px;}
.tab-bar .search a{background:url(/images/navi_search.svg) no-repeat center 7px;}
.tab-bar .admin a{background:url(/images/navi_admin.svg) no-repeat center 7px;}
.tab-bar .active:before{position:absolute; top:-1px; left:0; width:100%; height:2px; content:''; background:#323232;}

/* footer */
.copyright{width:100%; padding:22px 0; font-size:14px; color:#999; text-align:center;}
.contents .copyright{margin-bottom:-60px;}

/* form */
.radio-wrap{display:flex; gap:40px;}
.radio{position:relative;}
.radio input[type="radio"]{position:absolute; top:0; left:0; opacity:0;}
.radio label{height:25px; margin:0; padding:0 0 0 33px; line-height:25px;}
.radio label:before{position:absolute; top:0; left:0; width:25px; height:25px; box-sizing:border-box; content:''; border:1px solid #ccc; border-radius:50%;}
.radio input[type="radio"]:checked + label:before{border:2px solid #5887eb;}
.radio input[type="radio"]:checked + label:after{position:absolute; top:8px; left:8px; width:9px; height:9px; content:''; border-radius:50%; background:#5887eb;}
.radio input[type="radio"]:checked:disabled + label:before{border:2px solid #eee;}
.radio input[type="radio"]:checked:disabled + label:after{background:#eee;}
.checkbox{position:relative;}
.checkbox + .checkbox{margin-top:20px;}
.checkbox input[type="checkbox"]{position:absolute; top:0; left:0; opacity:0;}
.checkbox label{display:flex; align-items:center; min-height:25px; margin:0; padding:0 0 0 33px;}
.checkbox label:before{position:absolute; top:0; left:0; width:24px; height:24px; box-sizing:border-box; content:''; border:1px solid #ccc; border-radius:10px;}
.checkbox input[type="checkbox"]:checked + label:before{border-color:#5887eb; background:#5887eb;}
.checkbox input[type="checkbox"]:checked + label:after{position:absolute; top:6px; left:7px; width:12px; height:12px; content:''; border-radius:50%; background:url(/images/ico_check_w.png) no-repeat center; background-size:12px auto;}
.checkbox input[type="checkbox"]:checked:disabled + label:before{border-color:#eee; background:#eee;}
.checkbox input[type="checkbox"]:checked:disabled + label:after{background:url(/images/ico_check_disabled.png) no-repeat center; background-size:12px auto;}

input[type="text"]{width:100%; height:48px; box-sizing:border-box; padding:0 16px; border:1px solid #ccc; border-radius:var(--radius);}
input[type="text"]:disabled{border:1px solid #ccc; background:#f9f9f9;}
input[type="date"]{width:100%; height:48px; box-sizing:border-box; padding:0 16px; border:1px solid #ccc; border-radius:var(--radius);}

select{width:100%; height:48px; box-sizing:border-box; margin:0 0 10px; padding:0 16px; border:1px solid #ccc; border-radius:var(--radius);}
select:disabled{border:1px solid #ccc; background:#f9f9f9;}

/* modal */
.modal{position:fixed; top:0; left:0; z-index:11; width:100%; height:100%; background:rgba(0, 0, 0, .7);}
.modal .inner{position:absolute; top:50%; left:50%; width:310px; min-height:244px; box-sizing:border-box; padding:20px; border-radius:var(--radius); background:#fff; transform:translate(-50%, -50%);}
.modal .btn-area .btn{height:47px; font-size:16px; line-height:47px;}
.modal .btn-close{position:absolute; top:20px; right:20px; width:24px; height:24px; overflow:hidden; text-indent:-9999px;  border:0; background:url(/images/ico_x.png) no-repeat center; background-size:30px auto;}
.modal .info-txt{position:absolute; top:50%; left:50%; padding:68px 0 0; font-size:18px; font-weight:700; text-align:center; transform:translate(-50%, -50%);}
.modal-noti h1{padding:58px 0 0; font-size:18px; font-weight:700; text-align:center; background:url(/images/ico_noti.png) no-repeat center 0; background-size:48px auto;}
.modal-noti .info{margin:20px 0; padding:16px; font-size:13px; background:#f9f9f9;}
.modal-noti .info ul{padding:0 10px;}
.modal-noti .info li{position:relative; margin:0 0 6px; padding:0 0 0 10px; color:#666; line-height:1.4;}
.modal-noti .info li:before{position:absolute; top:7px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:#666;}
.modal-noti .info li + li{margin:14px 0 0;}
.modal-noti .info li span{display:block;}
.modal-success .info-txt{background:url(/images/ico_success.png) no-repeat center 0; background-size:48px auto;}
.modal-warning .info-txt{background:url(/images/ico_warning.png) no-repeat center 0; background-size:48px auto;}

/* toast */
.toast{position:fixed; top:0; left:0; z-index:11; width:100%; height:100%; background:rgba(0, 0, 0, .7);}
.toast .inner{position:absolute; top:50%; left:50%; width:292px; box-sizing:border-box; padding:18px 45px 18px 56px; border:1px solid; border-radius:var(--radius); background:#fff; transform:translate(-50%, -50%);}
.toast .btn-close{position:absolute; top:50%; right:16px; width:24px; height:24px; overflow:hidden; text-indent:-9999px;  border:0; background:url(/images/ico_x.png) no-repeat center; background-size:30px auto; transform:translateY(-50%);}
.toast h1{margin:0 0 5px; font-weight:700;}
.toast .toast-noti{border-color:#ffa96a; background:#fdfaee url(/images/ico_noti.png) no-repeat 16px center; background-size:24px auto;}
.toast .toast-warning{border-color:#ea5454; background:#fdeeee url(/images/ico_warning.png) no-repeat 16px center; background-size:24px auto;}
.toast .toast-success{border-color:#34a853; background:#e8f7ea url(/images/ico_success.png) no-repeat 16px center; background-size:24px auto;}

/* contents */
.contents{flex:1; overflow:auto;}
.contents .inner{height:100%; box-sizing:border-box; overflow-y:auto; padding:0 calc(var(--right) + 16px) 0 calc(var(--left) + 16px);}

.title-area{margin:0 -16px; padding:24px; background:#f9f9f9;}
.title-area h2{font-size:26px; font-weight:700;}

.quick{margin:0 0 8px; padding:30px 0 0;}
.quick ul{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 0;}
.quick li{width:49%;}
.quick li a{display:block; height:160px; box-sizing:Border-box; padding:87px 0 0;  text-align:center; border-radius:12px;}
.quick li.as a{background:#f9f9f9 url(/images/ico_quick01.png) no-repeat center 35px; background-size:50px auto;}
.quick li.rental a{background:#f9f9f9 url(/images/ico_quick02.png) no-repeat center 35px; background-size:50px auto;}
.quick li.return a{background:#f9f9f9 url(/images/ico_quick03.png) no-repeat center 35px; background-size:50px auto;}
.quick li.search a{background:#f9f9f9 url(/images/ico_quick04.png) no-repeat center 35px; background-size:37px auto;}
.quick li strong{display:block; margin:0 0 2px; font-weight:700;}

.device-info{padding:22px 16px; border:1px solid #eaeaea; border-radius:12px; background:#fff;}
.device-info h2{margin:0 0 5px; font-weight:700;}
.device-info .tag{display:inline-block; margin:0 0 0 2px; padding:3px 10px; font-size:12px; border:1px solid; border-radius:12px; background:#fff;}
.device-info .type01{color:#a075e6; border-color:#a075e6;}
.device-info .type02{color:#ffa96a; border-color:#ffa96a;}
.device-info .type03{color:#34a853; border-color:#34a853;}
.device-info p{font-size:14px;}

.login-wrap{min-height:calc(100% - 61px - var(--bottom)); box-sizing:border-box; padding:60px 14px 0;}
.login-wrap h2{margin:0 0 20px; font-size:26px; font-weight:700; text-align:center;}
.login-wrap .input{position:relative;}
.login-wrap .input + .input{margin:10px 0 0;}
.login-wrap input{width:100%; height:54px; box-sizing:border-box; padding:0 44px 0 20px; border:1px solid transparent; border-radius:var(--radius);}
.login-wrap input::placeholder{padding:0 0 0 24px;}
.login-wrap input.value,
.login-wrap input:focus{border-color:#222; background:#fff;}
.login-wrap input:disabled{border-color:#ccc; background:#eee;}
.login-wrap input:disabled::placeholder{padding:0;}
.login-wrap .id{background:#f5f5f5 url(/images/ico_id.png) no-repeat 20px center; background-size:20px auto;}
.login-wrap .pw{background:#f5f5f5 url(/images/ico_pw.png) no-repeat 20px center; background-size:20px auto;}
.login-wrap .btn-del{position:absolute; top:50%; right:20px; width:20px; height:20px; overflow:hidden; text-indent:-9999px; border-radius:50%; background:#ddd url(/images/ico_x.png) no-repeat center; background-size:14px auto; transform:translateY(-50%);}
.login-wrap .btn-del:before{position:absol}
.login-wrap .warning{margin:10px 10px 20px; font-size:14px; color:#ea5454;}

.btn-full{display:block; width:100%; height:52px; font-size:20px; text-align:center; color:#fff; line-height:52px; border-radius:var(--radius); background:#5887eb;}

.form-area .section{position:relative; padding:30px 0;}
.form-area .section:not(:first-child){border-top:1px solid #d0d0d0;}
.section h3{margin:0 0 10px; font-size:20px; font-weight:700;}
.section .num{display:inline-block; width:20px; height:20px; margin:0 6px 0 0; font-size:13px; font-weight:600; color:#fff; text-align:center; line-height:20px; vertical-align:middle; border-radius:50%; background:#222;}
.section .txt{display:flex;}
.section .txt p{position:relative; color:#666;}
.section .txt p:not(:first-child){margin:0 0 0 20px;}
.section .txt p:not(:first-child):before{position:absolute; top:2px; left:-10px; width:1px; height:16px; content:''; background:#ddd;}
.section .status{position:absolute; top:30px; right:0; display:flex; align-items:center; justify-content:center; width:60px; height:60px; box-sizing:border-box; font-size:14px; border:1px solid; border-radius:50%; background:#fff;}
.section .status.type01{color:#a075e6; border-color:#a075e6;}
.section .status.type02{color:#ffa96a; border-color:#ffa96a;}
.section .status.type03{color:#34a853; border-color:#34a853;}
.section .info{position:relative; margin:0 0 20px; padding:0 0 0 20px; font-size:14px; color:#666;}
.section .info:before{position:absolute; top:7px; left:10px; width:3px; height:3px; content:''; border-radius:50%; background:#666;}
.section .row > .label,
.section .row > label{display:block; margin:0 0 10px;}
.section .label.bold,
.section label.bold{font-weight:700;}
.section .detail{width:100%; height:180px; box-sizing:border-box; padding:15px; border:1px solid #ccc; border-radius:var(--radius);}
.section .row{margin:0 0 15px;}
.section .row .option{font-size:14px;}
.section .row textarea{width:100%; height:180px; box-sizing:border-box; margin:0 0 10px; padding:10px; border:1px solid #ccc;border-radius:var(--radius); background:#fff;}
.section .row input[type="text"] + input[type="text"]{margin:10px 0 0;}
.section .privacy{overflow:hidden; padding:16px; border:1px solid #ddd; border-radius:var(--radius);}
.section .privacy .caution{margin:20px -16px -16px; padding:20px 20px 30px; background:#f9f9f9;}
.section .privacy .caution li{position:relative; margin:0 0 6px; padding:0 0 0 10px;}
.section .privacy .caution li:before{position:absolute; top:7px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:#666;}
.section .privacy .caution .add{display:block; color:#999;}
.section .privacy .caution .txt{margin:16px 5px 8px;}
.section .privacy .caution a:after{display:inline-block; width:20px; height:20px; margin:0 0 0 5px; content:''; vertical-align:middle; background:url(/images/ico_arrow_link.png) no-repeat center; background-size:24px auto;}
.section .important{margin:30px 0 0;}
.section .important strong{display:block; margin:0 0 5px; font-weight:700; color:#ea5454;}
.section .important em{font-style:normal; font-weight:700; text-decoration:underline;}
.section .address > *:not(:first-child){margin:10px 0 0;}
.section .zip-code{display:flex; gap:10px;}
.section .zip-code input[type="text"]{flex:1;}
.section .zip-code .btn-zip{width:88px; border:1px solid #222; border-radius:var(--radius); background:#fff;}
.section .radio-wrap{margin:20px 0 0;}
.section .date{position:relative;}
.section .date input[type="text"]{padding-right:40px;}
.section .date .btn-date{position:absolute; top:0; right:6px; width:40px; height:48px; overflow:hidden; text-indent:-9999px; background:url(/images/ico_calendar.png) no-repeat center; background-size:20px auto;}
.section .signature{position:relative;}
.section .signature input[type="text"]{padding-right:80px}
.section .signature .btn-clear{position:absolute; top:8px; right:16px; width:57px; height:32px; font-size:14px; color:#fff; border-radius:16px; background:#222;}
.section .signature .canvas-wrap{position:relative; margin:6px 0 0;}
.section .signature .canvas-wrap .guide{position:absolute; top:50%; left:0; width:100%; text-align:center; transform:translateY(-50%);}
.section .signature .canvas-wrap img{width:100%;}
.section .signature canvas{width:100%; height:140px; background:#f9f9f9;}
.btn-area{display:flex; gap:10px;}
.btn-area button{flex:1; height:52px; font-size:20px; font-weight:700; text-align:center; line-height:52px; border-radius:var(--radius); }
.btn-area .btn-primary{color:#fff; background:#5887eb;}
.btn-area .btn-default{color:#5887eb; border:1px solid #5887eb; background:#fff;}

.complete-wrap{min-height:calc(100% - 61px - var(--bottom));}
.complete-wrap .complete{margin:0 -16px 30px; padding:30px 0; text-align:center; background:rgba(88, 136, 237, 0.10);}
.complete-wrap .complete h2{position:relative; padding:63px 0 0; font-size:20px;}
.complete-wrap .complete h2:before{position:absolute; top:0; left:50%; width:51px; height:51px; content:''; border-radius:50%; background:#fff url(/images/ico_check.png) no-repeat center; background-size:24px auto; transform:translateX(-50%);}
.complete-wrap .detail-info{margin:0 0 30px;}
.complete-wrap .detail-info h3{margin:0 0 5px; font-weight:700;}
.complete-wrap .detail-info ul{margin:0 0 0 8px;}
.complete-wrap .detail-info li{position:relative; margin:0 0 6px; padding:0 0 0 10px; color:#666;}
.complete-wrap .detail-info li:before{position:absolute; top:7px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:#666;}

.error-wrap{min-height:calc(100% - 61px - var(--bottom)); box-sizing:border-box; padding:180px 0 0;}
.error-wrap .txt{padding:0 0 160px; font-size:20px; text-align:center;}
.error-wrap .txt:before{display:block; width:80px; height:80px; margin:0 auto 30px; content:''; border-radius:50%; background:#eff4fe url(/images/ico_exclamation.png) no-repeat center; background-size:32px auto;}
.error-wrap .em{display:block; margin:10px 0 -29px; font-size:16px;color:#ea5454; text-align:center;}

.search-title{padding-bottom:65px; border-radius:0 0 16px 16px; background:rgba(88, 136, 237, 0.10);}
.rental-info{display:flex; justify-content:space-between; gap:20px; margin:-35px 0 0; padding:0 16px; border-radius:20px; background:#fff; box-shadow:4px 4px 10px 0px rgba(0, 0, 0, 0.05);}
.rental-info dl{flex:1; display:flex; flex-direction:column-reverse; padding:16px 0; text-align:center;}
.rental-info dt{font-size:14px; color:#666;}
.rental-info dd{margin:0 0 3px; font-size:24px; font-weight:700;}
.rental-list .card{position:relative; overflow:hidden; border:1px solid #ddd; border-radius:12px;}
.rental-list .card + .card{margin:15px 0 0;}
.rental-list .card h4{margin:0 0 5px; font-weight:700;}
.rental-list .card .tag{display:inline-block; margin:0 0 0 2px; padding:3px 10px; font-size:12px; border:1px solid; border-radius:12px; background:#fff;}
.rental-list .card .type01{color:#a075e6; border-color:#a075e6;}
.rental-list .card .type02{color:#ffa96a; border-color:#ffa96a;}
.rental-list .card .type03{color:#34a853; border-color:#34a853;}
.rental-list .card .device{padding:16px;}
.rental-list .card .device p + p{margin:6px 0 0;}
.rental-list .card .person{padding:16px; font-size:13px; background:#f9f9f9;}
.rental-list .card .person ul{padding:0 10px;}
.rental-list .card li{position:relative; margin:0 0 6px; padding:0 0 0 10px; color:#666; line-height:1.4;}
.rental-list .card li:before{position:absolute; top:7px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:#666;}
.rental-list .card li + li{margin:14px 0 0;}
.rental-list .card li span{display:block;}
.rental-list .card .btn-more{position:absolute; top:16px; right:16px; width:24px; height:24px; overflow:hidden; text-indent:-9999px; background:none;}
.rental-list .card .btn-more:before{position:absolute; top:2px; left:50%; width:5px; height:5px; content:''; border-radius:50%; background:#ccc; transform:translateX(-50%);}
.rental-list .card .btn-more:after{position:absolute; bottom:2px; left:50%; width:5px; height:5px; content:''; border-radius:50%; background:#ccc; transform:translateX(-50%);}
.rental-list .card .btn-more i{position:absolute; top:50%; left:50%; width:5px; height:5px; content:''; border-radius:50%; background:#ccc; transform:translate(-50%, -50%);}

.rental-list .btn-area{margin:16px 0 0; padding:0 18px;}
.rental-list .btn-area button{height:36px; font-size:16px; font-weight:400; line-height:36px;}
.rental-list .btn-area .btn-border{border:1px solid #222; background:#fff;}
.rental-list .btn-area .btn-gray{background:#ddd;}

.serial-wrap{min-height:calc(100% - 61px - var(--bottom)); box-sizing:border-box; padding:30px 14px 0;}
.serial-wrap .warning{margin:10px 10px 20px; font-size:14px; color:#ea5454;}
.serial-wrap .detail-info{margin:30px 0 0; padding:20px; border:1px solid #ddd; border-radius:var(--radius);}
.serial-wrap .detail-info h3{margin:0 0 5px; font-weight:700;}
.serial-wrap .detail-info ul{margin:0 0 0 8px;}
.serial-wrap .detail-info li{position:relative; margin:0 0 6px; padding:0 0 0 10px; color:#666;}
.serial-wrap .detail-info li:before{position:absolute; top:7px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:#666;}