@charset "UTF-8";

/* COMMON */
* {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0) !important;-webkit-text-size-adjust:none;outline:none !important;background:#F3F3F3;}
body {margin:0; padding:0; height:100%; font-size:12px; line-height:1.0; color:#585858; font-family:'Noto Sans KR', Dotum, Arial, sans-serif;}
div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td, button, textarea, select, a {margin: 0; padding: 0; font-family: 'Noto Sans KR', Dotum, Arial, sans-serif; -webkit-appearance: none; border-radius: 0;}
.container {padding: 108px 32px 104px; height: 100vh;}
input {border: 1px solid #585858; text-indent: 10px; background: #FFFFFF;}
.prdForm {display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
select {padding: 0 30px 0 8px; border: 1px solid #ddd; width: 100%; height: 30px; font-size: 14px; font-weight: 500; color: #6e6e6e; background: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27%3e%3cpath d=%27M7 10l5 5 5-5z%27/%3e%3c/svg%3e") no-repeat right 12px center; background-size: 30px auto;}
.rentalPayContent {text-align: center;}
a {text-decoration:none; font-weight: 700 !important;}    

/* HEADER */
.wrap {background:#f8f9fa}
.header {position:fixed; top:0; left:0; z-index:100; overflow:hidden; padding:0 32px; width:100%; height:76px; background:#F3F3F3;}
.header h1 {float:left; padding:20px 0 13px}
.header h1 a {width:250px; height:43px; text-indent:-9999px;}
.header .path {float:right; overflow:hidden; margin-top:26px}
.header .loginInfo {float:right; font-size:17px; text-align:right; margin-top:29px; margin-right:30px;}
.header .path > * {float:left; line-height:24px; font-size:16px; color:#6e6e6e}
.header .path > * + * {position:relative; padding-left:23px}
.header .path > * + *:before {display:block; content:""; position:absolute; left:10px; top:10px; width:5px; height:10px; background:url("../images/common/bl-arrow.png") no-repeat 0 0; background-size:100% auto}
.header .path > *:first-child {text-indent:-9999px; width:14px; height:24px; background:url("../images/common/ico-home.png") no-repeat center; background-size:100% auto}
.header .menu {float:right; overflow:hidden; margin-top:26px; margin-right:20px;}
.header img {max-height:35px;}

/* BUTTON */
.menuBtn {height: 30px; line-height: 0; padding: 0 10px; font-size: 15px; display: inline-block; text-align: center; font-weight: 700; color: #fff; background: #0b5ed7; border: 1px solid #0a58ca; cursor: pointer; border-radius: 6px;}

/* COL TABLE */
.colTable {overflow-x:auto; border-top:1px solid #323232;}
.colTable table {margin-left:-1px; table-layout:fixed; min-width:100%; width:auto}
.colTable table th {border-left:1px solid #ddd; background:#edeeef; font-weight:bold;}
.colTable table th,
.colTable table td {padding:0 8px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; height:44px; font-size:14px; color:#6e6e6e; white-space:nowrap}
.colTable table th:first-child,
.colTable table td:first-child {width: 56px; text-align: center;}
.colTable table th:last-child,
.colTable table td:last-child {border-right:none !important;}

/* SEARCH */
.search {margin: 0 0 30px; padding: 0px 20px 20px 20px; border-top: 1px solid #999; border-bottom: 1px solid #999;}
.search .m2 {position: relative; height: 32px; line-height: 30px; padding: 0 9px; font-weight: bold; overflow: hidden; box-sizing: border-box; width: 300px !important; border: 1px solid #999;}
.search div {margin-top: 20px;}
.search label {font-weight:bold; display: inline-block; min-width: 120px;}
.table-result {width: 100%; font-size: larger; font-weight: bold; border-collapse: separate; border-spacing: 0 20px;}
.table-result tr th {width: 20%;}
.table-result tr td {width: 80%;}

/* IMAGE */
.img-fluid {max-width: 100%; height: auto;}

/* CHECKBOX */
.checkbox {-webkit-appearance: auto; appearance: auto; width: 18px; height: 18px; vertical-align: middle; accent-color: #0b5ed7;}

/* pay - enter */
.menu-group {text-align: center; display: inline-grid; width: 100%; margin: 20px auto; max-width: 630px; border-radius: 10px; padding: 20px; text-align: center;}
.menu-name {width: 100%; text-align: center; margin: 15px; vertical-align: top; border-radius: 10px; padding: 20px; box-shadow: 0px 3px 6px;}
.menu-detail {width: 100%; text-align: center; margin: 15px; vertical-align: top; border-radius: 10px; padding: 20px; box-shadow: 0px 3px 6px;}
.menu-detail-list {display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; width: 100%; text-align: center; margin: 15px; vertical-align: top; border-radius: 10px; padding: 20px; box-shadow: 0px 3px 6px;}
.menu-name .termination {color: #ff0000; font-size: 2.0em; font-weight: bold;}
.menu-name .contract {color: #24aae1; font-size: 2.0em; font-weight: bold;}
.menu-detail a {display: block; font-size: 18px; margin: 15px 0; text-decoration: none; color: #2c3e50; transition: color 0.3s ease-in-out;}
.menu-detail-list a {display: block; font-size: 18px; margin: 15px 0; text-decoration: none; color: #2c3e50; transition: color 0.3s ease-in-out;}
.menu-detail > a {font-size:20px;}		}

.menu-detail a:hover {color: #e74c3c;}

/* pay */
.prdImg {width: 15%; height: 45px;}
.prdH2 {margin: 0;}
.prdTop {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.prdBtn {margin-left: auto;}
.prdTop .prdBtn {height: 30px; line-height: 0; padding: 0 10px; font-size: 15px; display: inline-block; text-align: center; font-weight: 700; color: #fff; background: #0b5ed7; border: 1px solid #0a58ca; cursor: pointer;}
.search .prdBtn {height: 30px; line-height: 0; padding: 0 10px; font-size: 15px; display: inline-block; text-align: center; font-weight: 700; color: #fff; background: #0b5ed7; border: 1px solid #0a58ca; cursor: pointer; margin-left: 20px;}

.field-row {display: flex; align-items: center; gap: 8px; margin: 8px 0; height: 31px;}
.field-row label {font-weight:bold; display: inline-block; min-width: 120px;}
.field-row input {height: 100%; border-radius: 6px; min-width: 300px;}
.field-row input.checkbox {width: 18px; height: 18px; min-width: 0px;}

.inline-label {display: inline-flex; align-items: center; gap: 4px;}

.term-col {display: grid; grid-template-columns: auto auto 120px auto 160px auto 200px; align-items: center; gap: 8px; margin: 6px 0;}
.term-col input[type='text'][readonly] {background: #e9ecef; border-radius: 6px;}
textarea#url_info {width: 100%; height: 100%; background: #e9ecef;}
.term-grid {display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; margin: 10px 0;}
.term-col {display: flex; flex-direction: column; gap: 8px; width: 100%;}
.term-head {display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #F3F3F3; border-radius: 6px; width: 100%; height: 45px;}
.term-head input {border-radius: 6px; height: 100%;}
.term-body {display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; padding: 6px 8px; background: #F3F3F3; border: 1px solid #F3F3F3; border-radius: 6px; width: 100%; height: 82px;}
.term-body label {font-weight: bold;  min-width: 111px; display: flex; justify-content: center; align-items: center;}

.returnUrl {background: #e9ecef;}
.url_info {width:100%; background: #e9ecef;}
.option_info{width:50%;}

.field-result {background-color: #F3F3F3; padding: 10px; border: 1px solid #ced4da; border-radius: 6px; margin-top: 20px;}

.form-control.is-invalid, 
.was-validated .form-control:invalid {border-color: #dc3545; padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(.75em + .375rem) calc(.75em + .375rem);}
.form-control.is-valid, 
.was-validated .form-control:valid {border-color: #198754; padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23198754' d='M4.3 9.73L2.6 7.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 4.4-5.0c.6-.63 1.6-.27 1.2.7l-5 5.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(1em + .375rem) calc(1em + .375rem);}
 
.msg_sound_only {display: inline-block !important; position: absolute; top: 0; left: 0; margin: 0 !important; padding: 0 !important; font-size: 0; line-height: 0; border: 0 !important; overflow: hidden !important;}

.link_info{height: 60px;}

/* pg - 주문 요악 */
.forderform{overflow: hidden; display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.rentalPayInfo{display: block; width: 30%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; margin-left: 35%;}
.rentalPayAddr{display: block; width: 30%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; margin-top: 20px; margin-left: 35%;}
.rentalPayAddr input{height: 31px; margin-bottom: 10px;}
.rentalPayResult{display: block; width: 30%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; margin-top: 20px; margin-bottom: 20px; margin-left: 35%;} 
.rentalPayResult>div{margin: 5px 0px};
.rentalPayCard{color: #9C845D;font-size: 12px;}
.rentalPaySelect{margin-top: 10px;}
.rentalPayInfoTotal{margin-bottom: 10px; min-height: 65px;}
.rentalPayOption{display: block; width: 30%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; margin-top: 20px; margin-left: 35%; padding-bottom: 10px;}

.btn-check{position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none;}
.btn-outline-dark{border:1px solid #212529;}
.btn-check:checked+.btn-outline-dark{background: #0b5ed7; background-color:#0b5ed7; color:#fff; box-shadow: none !important; border:1px solid #0a58ca;}
.btn-check:checked+.btn-outline-dark>small{background-color: #0b5ed7;}

.btn-group>.btn{padding: .25rem .5rem; font-size: .875rem; border-radius: .2rem;}
.addr{width: 100%; text-align: left; margin-top: 10px;}
.od_zip{width:20%;}
.od_addr1{width: 60%;}
.od_addr2{width: 100%;}
.prdNm{font-size: larger; font-weight: bolder; margin: 10px 0px;}

.od_addr2.is-invalid, 
.was-validated .od_addr2:invalid {border-color: #dc3545; padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(.75em + .375rem) calc(.75em + .375rem);}
.od_addr2.is-valid, 
.was-validated .od_addr2:valid {border-color: #198754; padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3e%3cpath fill='%23198754' d='M4.3 9.73L2.6 7.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 4.4-5.0c.6-.63 1.6-.27 1.2.7l-5 5.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(1em + .375rem) calc(1em + .375rem);}

.prdOption{margin-bottom: 10px;}

.prd_url{width: 100%;}