@charset "utf-8";

.modal {display: none; position: fixed; z-index: 20; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.6);}
.modal-content {position: relative; background-color: #fff; margin: auto; padding: 4rem 3rem; width: 80%; max-height: 90%; max-width: 560px; border-radius: 0; -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; overflow: hidden auto;}
.close {color: var(--col-black); float: right; font-size: 2.4rem; font-weight: 700; line-height: 1; cursor: pointer;}

.modal-content::-webkit-scrollbar {width: 8px;}
.modal-content::-webkit-scrollbar-track {background-color: #FFF;}
.modal-content::-webkit-scrollbar-thumb {background-color: var(--col-brown); border-radius: 50px;}

@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.modal-header {margin-bottom: 4rem;}
.modal-header h2 {text-align: left; color: var(--col-black); font-size: 1.8rem; font-weight: 700;}
.modal-body {text-align: center; line-height: 1.5;}
.modal-body p {margin-bottom: 8px;}
.modal-body ul {margin: 0 auto; text-align: left;}
.modal-body ul li span {position: relative; display: inline-block; min-width: 80px; margin-right: 10px;}
.modal-body ul li span::after {content: ""; position: absolute; top: 8px; right: 0; width: 1px; height: 10px; background: var(--col-bd-gray);}
.modal-body ul li + li {margin-top: 4px;}
.modal-body dl {display: flex; align-items: center; gap: 2rem; text-align: left;}
.modal-body dl + dl {margin-top: 0.5rem;}
.modal-body b,
.modal-body dt {min-width: 100px;}
/*.modal-body b {display: block; text-align: left; font-weight: 700;}*/
.modal-body dt {font-weight: 700;}
.modal-body dd {flex: 1 0 auto; text-align: right;}
.modal-body dd b {text-align: right;}

.modal-body .info {margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--col-bd-gray);}
.modal-body .info dl {display: flex; justify-content: space-between; gap: 0.5rem;}
.modal-body .info dd {text-align: right;}
.modal-body .info dd span {display: block; font-size: 80%;}
.modal-body .info dd small {font-size: 80%;}

.modal-body .thumb-wrap {position: relative; overflow: hidden;}
.modal-body .thumb {width: 30rem; aspect-ratio: 1; margin: 0 auto; background-position: center; background-size: cover; background-repeat: no-repeat; transition: var(--trans-25);}

.modal-body .head {flex: 1 0 100%; margin-bottom: 1rem; text-align: left; color: var(--col-brown); font-weight: 700;}
.choice-point {display: flex; flex-wrap: wrap; gap: 1rem;}
.choice-point .radio {min-width: calc(33.33% - 1rem); margin: 0; padding: 0.4rem 0.4rem  0.4rem 0 ; border: 1px solid var(--col-bd-gray); border-radius: 8px; text-align: left;}
.choice-point .radio span {white-space: nowrap;}

.modal-footer {margin-top: 4rem; text-align: center;}

/* 신청 반려 사유 */
.reason {background: #f5f5f5; padding: 3rem 2rem;}

/* 포인트 충전 */
.point input[type="number"] {padding: 0 2rem;}

@media (max-width: 768px) {
    .modal-content {padding: 4rem 2rem;}
    .modal-body .m-col {flex-direction: column; align-items: flex-start; gap: 0;}
    .modal-body .m-col dd {width: 100%;}
}