/*modal style*/
.modal-layer { display: none; position: relative; width: 380px; max-width: 520px; max-height: calc(100% - 145px); border-radius: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; background: #fff; }

.modal-layer1 { display: none; position: relative; width: 380px; max-width: 520px; height: calc(100% - 50px); border-radius: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); box-sizing: border-box; background: #fff; }

.dim-layer { display: none; position: fixed; _position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; }
.dim-layer-on { display: flex; }
.dim-layer .dim-bg { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dim-layer .modal-layer { display: block; }
.dim-layer .modal-layer1 { display: block; }

.modal-group { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
.modal-container { height: 100%; overflow: auto; }
.modal-container .box-modal { overflow-y: auto; }
.modal-content { padding: 12px; box-sizing: border-box; }
.modal-tit { display: flex; justify-content: center; align-items: center; height: 45px; border-bottom: 1px solid #000; box-sizing: border-box; font-family: 'PyeongChang'; font-size: 18px; font-weight: 700; color: #000; text-align: center; letter-spacing: -0.5px; }
.modal-tit-v1 { justify-content: space-between; height: 50px; padding: 0 20px; border-radius: 6px 6px 0 0; box-sizing: border-box; background: #6600a6; font-family: 'Noto Sans KR'; color: #fff; }
.modal-tit-v1 .modal-close { width: 12px; height: 14px; border: none; background: url('/app_type_1/img/ico_x3.svg') center center no-repeat; }

.modal-tit-down { display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: calc(100% - 88%); z-index: 100; width: calc(100% - 50px); height: 73px; margin: 0 auto; padding: 17px 15px; box-sizing: border-box; }

.modal-tit-down1 { display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: calc(100% - 95%); z-index: 100; width: calc(100% - 50px); height: 73px; margin: 0 auto; padding: 17px 15px; box-sizing: border-box; }

.dim-layer .btn-custom { height: 45px; }


/*후원하기 모달창*/
.modal-content .user-info .user-detail .user-data > div { color: #000; }
.modal-content .user-info .user-detail .user-data > div span { margin-left: 2px; color: #6c6c6c; }
.modal-content .btn-guide { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 400; color: #000; text-align: right; letter-spacing: -0.3px; }
.modal-content .btn-guide img { width: 10px; margin-left: 2px; vertical-align: -1px; }

/*.modal-content .coin-state { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 16px 12px; border-radius: 6px; box-sizing: border-box; background: #f7f7f7; }*/

.modal-content .coin-state { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 16px 12px; border-radius: 6px; box-sizing: border-box; }
.modal-content .coin-state .coin-data { display: flex; align-items: center; }
.modal-content .coin-state .coin-data .tit { display: flex; align-items: center; font-size: 18px; font-weight: 400; color: #000; letter-spacing: -0.4px; }
.modal-content .coin-state .coin-data .tit img { margin-right: 3px; zoom: 0.5; }
.modal-content .coin-state .coin-data .txt { position: relative; margin-left: 4px; font-size: 20px; font-weight: 400; color: #000; letter-spacing: -0.4px; }
.modal-content .coin-state .coin-data .txt strong { font-size: 17px; }
.modal-content .coin-state .coin-data .txt span { position: absolute; left: 0; bottom: -12px; font-size: 10px; font-weight: 400; color: #626262; letter-spacing: -0.3px; width:150px; }
.modal-content .coin-state .coin-data .txt .btn-refresh { width: 14px; height: 14px; margin-left: 4px; border: none; background: url('/app_type_1/img/ico_refresh1.svg') center center no-repeat; vertical-align: -2px; }
.modal-content .coin-state .coin-data .btn-login { font-size: 13px; font-weight: 400; color: #000; letter-spacing: -0.4px; }
.modal-content .coin-state .coin-data .btn-login span { text-decoration: underline; }
.modal-content .coin-state .btn-charge { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 6px; box-sizing: border-box; background: #000; }
.modal-content .coin-state .btn-charge img { width: 23px; }
.modal-content .coin-state .btn-charge .tit { font-size: 10px; font-weight: 400; color: #34f7ff; letter-spacing: -0.6px; }

.modal-content .sponsor-group { margin-bottom: 10px; }
.modal-content .sponsor-group .tit { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; font-size: 14px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.4px; }
.modal-content .sponsor-group .tit .btn-question { width: 15px; height: 15px; margin-left: 4px; border: none; background: url('/app_type_1/img/ico_question3.svg') center center no-repeat; }
.modal-content .sponsor-group .txt { margin-top: 7px; font-size: 14px; font-weight: 300; color: #626262; text-align: center; letter-spacing: -0.36px; }
.modal-content .sponsor-group .frm-group-sponsor { display: flex; justify-content: space-between; align-items: center; }
.modal-content .sponsor-group .frm-group-sponsor .inp-group { display: flex; justify-content: flex-end; align-items: center; width: calc(100% - 70px); height: 45px; padding: 0 12px; border: 1px solid #000; border-radius: 6px; box-sizing: border-box; }
.modal-content .sponsor-group .frm-group-sponsor .inp-group .inp-frm { width: calc(100% - 17px); height: 100%; border: none; font-size: 17px; font-weight: 700; color: #000; text-align: right; letter-spacing: -0.5px; }
.modal-content .sponsor-group .frm-group-sponsor .inp-group .unit { width: 25px; font-size: 13px; font-weight: 400; color: #000; text-align: right; letter-spacing: -0.4px; }
.modal-content .sponsor-group .frm-group-sponsor .btn-frm { display: flex; justify-content: center; align-items: center; width: 62px; height: 45px; border: 1px solid #000; border-radius: 6px; box-sizing: border-box; background: #fff; font-size: 12px; font-weight: 500; color: #000; letter-spacing: -0.35px; }

.modal-content .community-group { margin-bottom: 10px; }
.modal-content .community-group .btn-custom { margin-bottom: 10px; }
.modal-content .community-group .tit { margin-bottom: 10px; font-size: 12px; font-weight: 400; color: #000; text-align: center; letter-spacing: -0.35px; }

.list-detail-history { padding: 20px; box-sizing: border-box; }
.list-detail-history li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.list-detail-history li:last-child { margin-bottom: 0; }
.list-detail-history .tit { font-size: 14px; font-weight: 700; color: #000; letter-spacing: -0.4px; }
.list-detail-history .txt { font-size: 14px; font-weight: 400; color: #000; text-align: right; letter-spacing: -0.4px; }


/*후원하기 Q&A*/
.modal-content .list-qna { margin-bottom: 12px; }
.modal-content .list-qna li { cursor: inherit; }
.modal-content .list-qna .fold { padding: 12px 0 7px; border-bottom: none; box-sizing: border-box; }
.modal-content .list-qna li:first-child .fold { padding-top: 0; }
.modal-content .list-qna .fold:after { display: none; }
.modal-content .list-qna .fold .tit { padding: 0 0 0 20px; box-sizing: border-box; font-size: 16px; font-weight: 500; letter-spacing: -0.48px; }
.modal-content .list-qna .fold .tit:before { content: 'Q.'; font-weight: 500; }
.modal-content .list-qna .unfold { display: block; }
.modal-content .list-qna .unfold .txt { position: relative; padding-left: 12px; box-sizing: border-box; font-size: 12px; }
.modal-content .list-qna .unfold .txt:before { content: 'A.'; position: absolute; top: 0; left: 0; }


/*후원하기 성공*/
.sponsor-result { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; height: 206px; margin: 12px 0; padding: 15px; border-radius: 8px; box-sizing: border-box; background: #f8f8f8; }
.sponsor-result .img { position: absolute; top: 15px; left: 0; right: 0; margin: 0 auto; zoom: 0.5; }
.sponsor-result .img-v1 { top: 50px; }
.sponsor-result .txt-group { text-align: center; }
.sponsor-result .txt-group .txt { font-size: 18px; font-weight: 500; color: #000; letter-spacing: -0.9px; }
.sponsor-result .txt-group .txt span { color: #00f1f7; }
.sponsor-result .txt-group .txt2 { display: flex; justify-content: center; align-items: center; margin-top: 4px; }
.sponsor-result .txt-group .txt2 div:nth-child(1) { margin-right: 4px; padding: 0 6px; border-radius: 9px; box-sizing: border-box; background: #000; font-size: 12px; font-weight: 500; color: #00ffff; letter-spacing: -0.6px; }
.sponsor-result .txt-group .txt2 div:nth-child(2) { font-size: 13px; font-weight: 300; color: #000; letter-spacing: -0.65px; }


/*대문글 관리*/
.modal-content textarea.inp-frm { display: block; width: 100%; height: 74px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #000; border-radius: 6px; box-sizing: border-box; font-size: 14px; font-weight: 500; color: #000; letter-spacing: -0.42px; }


/*이용료 변경*/
.modal-content .time { display: flex; justify-content: center; align-items: center; width: 60px; height: 24px; margin: 0 auto; padding: 0 9px; border-radius: 12px; box-sizing: border-box; background: #000; font-size: 14px; font-weight: 700; color: #00ffff; text-align: center; }

.slide-price { margin-bottom: 15px; padding: 10px 0; border-bottom: 1px solid #ededed; box-sizing: border-box; }
.slide-price .swiper { width: 80%; margin: 0 auto; }
.slide-price .swiper-slide { display: flex; justify-content: center; align-items: center; height: 26px; font-size: 13px; font-weight: 300; color: rgba(0, 0, 0, 0.48); text-align: center; letter-spacing: -0.39px; }
.slide-price .swiper-slide.swiper-slide-active { font-size: 18px; font-weight: 500; color: #15d3eb; letter-spacing: -0.54px; }
.slide-price .swiper-slide.swiper-slide-prev,
.slide-price .swiper-slide.swiper-slide-next { font-size: 15px; color: rgba(0, 0, 0, 0.81); letter-spacing: -0.45px; }

.modal-content .list-price { margin-bottom: 12px; }
.modal-content .list-price li { display: flex; align-items: center; margin-bottom: 10px; }
.modal-content .list-price li:last-child { margin-bottom: 0; }
.modal-content .list-price .tit { width: 95px; font-size: 14px; font-weight: 700; color: #000; letter-spacing: -0.42px; }
.modal-content .list-price .txt { display: flex; justify-content: flex-end; align-items: center; width: calc(100% - 95px); height: 45px; padding: 0 13px; border: 1px solid #000; border-radius: 6px; box-sizing: border-box; font-size: 14px; font-weight: 700; color: #000; text-align: right; letter-spacing: -0.42px; }


/*신청 완료*/
.apply-result { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; height: 206px; margin-bottom: 12px; padding: 15px; border-radius: 8px; box-sizing: border-box; background: #f8f8f8; }
.apply-result .img { position: absolute; top: 50px; left: 0; right: 0; margin: 0 auto; zoom: 0.5; }
.apply-result .txt-group { text-align: center; }
.apply-result .txt-group .txt { font-size: 18px; font-weight: 500; color: #000; letter-spacing: -0.9px; }

@media only screen and (max-width: 768px) {
    .modal-layer {
        max-width: calc(100% - 50px);
        width: calc(100% - 50px);
        height: calc(100% - 40px);
    }
    .modal-layer1 { 
        max-width: calc(100% - 50px);
        width: calc(100% - 50px);
        height: calc(100% - 40px);
     }
}