@charset "utf-8";

@import url(//cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css);
@import url(//fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900|Roboto:100,300,400,500,700,900);
    
/*reset 설정*/
    
*{padding:0;margin:0;box-sizing:border-box}
a{color:inherit;text-decoration:none}
li{list-style:none}
input, button{outline:0}
input{appearance:none;-webkit-appearance:none;-webkit-border-radius:0}
button{border:none;cursor:pointer}
.clearfix::after{content:'';display:block;clear:both}
body{line-height:1.4;font-family:'Pretendard','Noto Sans KR'}
*:hover, *:focus, *:checked{outline:none;-webkit-tap-highlight-color:transparent}
    
    
/*app*/
#app-wrap{background-color:#ffffff}
    
@media only screen and (min-width:1024px){
#app-wrap{position:relative;z-index:2;margin:0 0 0 calc(50vw - 1px)!important;max-width:422px;min-height:100vh;border-right:1px solid #e1e1e1;border-left:1px solid #e1e1e1;zoom:1}
#footer-btns{position:fixed;bottom:0; z-index:80;width:100%;max-width:420px;transition:all 0.3s}
}

/* WebKit browsers */ 
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder{color:transparent}
/* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder{color:transparent}
/* Mozilla Firefox 19+ */
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder{color:transparent}
/* Internet Explorer 10+ */
input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder{color:transparent}



/*app header*/
#header{position:sticky;width:100%;height:50px;z-index:99;top:0;background-color:#fff;border-bottom:1px solid #efefef;transition:all 0.3s}
#header .title{display:flex;align-items:center;justify-content:flex-start;padding:12px 16px;gap:10px;position:relative;height:50px}
#header .title .prev{display:flex;width:30px;height:30px;background:url(/app/img/pay/prev.svg) no-repeat 50% 50%}
.skip{display:none}
#header .title .location h3{font-family:'Noto Sans KR';font-size:18px;font-weight:400;letter-spacing:-0.5px;line-height:1;width:100%;text-align:center}

/*pay 결제하기*/
.pay *{font-family:'Pretendard';letter-spacing:-.5px;font-size:0}
.pay{display:flex;flex-direction:column;justify-content:space-between;min-height:95vh}
.pay .pay-box{background-color:#fff}
.pay .total{display:flex;justify-content:space-between;align-items:flex-end;height:69px;background-color:#fff;padding:20px 0;border-bottom:1px solid #ddd;margin:0 21px}
.pay .total .tit{font-size:20px;font-weight:700}
.pay .total .money{display:flex;align-items:flex-end}
.pay .total .money .num{font-size:18px;font-weight:700;text-align:right;color:#5f5998;margin-right:5px}
.pay .total .money .unit{font-size:16px;font-weight:400}
.pay .select .input .pay-sel{display:none}
.pay .main{background-color:#fff;height:470px}
.pay .wrap{padding:20px 21px}
.pay .box + .box{margin-top:30px}
.pay .box .tit{margin-bottom:7px;font-size:16px;font-weight:bold;color:#202020}
.pay .box .select{display:flex;flex-direction:row;justify-content:space-between;gap:13px}
.pay .box .select .input{width:100%;text-align:center}
.pay .box .select .input .pay-sel+ label{position:relative;display:block;width:100%;height:50px;border:2px solid #dbdbdb;border-radius:5px;line-height:50px;font-size:16px;letter-spacing:-.75px;font-weight:bold;color:#999;cursor:pointer}
.pay .box .select .input .pay-sel:checked + label{border:2px solid #000;color:#000}
.pay .select .input .way-sel{display:none}
.pay .box .select .input .way-sel+label{position:relative;display:flex;width:100%;height:100px;border:2px solid #dbdbdb;border-radius:5px;font-size:16px;letter-spacing:-.75px;font-weight:700;color:#999;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.pay .box .select .input .way-sel+label .img{height:30px}
.pay .box .select .input .way-sel+label .txt{font-size:14px}
.pay .box .select .input .way-sel:checked + label{border:2px solid #000;color:#000}
.pay .box .select .input .way-sel:checked + label .img{filter:brightness(0)}

.total-money{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:16px;border:2px solid #dbdbdb;border-radius:5px}
.remain-money{display:flex;justify-content:space-between;align-items:center}
.remain-money .txt{font-size:16px;color:#555}
.remain-money .money{display:flex;align-items:flex-end;gap:4px}
.remain-money .money .num{font-size:18px;letter-spacing:0;color:#000}
.remain-money .money .unit{font-size:16px;color:#555}
.pay-money{display:flex;justify-content:space-between;align-items:center;font-size:0}
.pay-money .txt{font-size:16px;color:#555}
.pay-money .ipt{position:relative;height:50px;display:inline-block}
.pay-money .ipt input{height:50px;width:200px;text-align:right;padding:10px;border:2px solid #dbdbdb;border-radius:5px;font-size:16px;letter-spacing:0}
.pay-money .ipt input:focus{border:2px solid #000}
.pay-money .ipt input::placeholder{letter-spacing:-0.75px;padding-right:0}
/*.pay-money .ipt .clear-btn{width:24px;height:24px;position:absolute;top:25%;right:10px;background:url(/app/img/pay/delete.svg) 50% 50% no-repeat;cursor:pointer}*/

/*foot 버튼*/
.footer .foot-btn{width:100%;height:80px;text-align:center}
.footer .foot-btn .pay-bt{font-family:'Pretendard';fdisplay:block;width:100%;height:54px;border-radius:5px;text-align:center;font-size:18px;color:#999;font-weight:700;letter-spacing:-.5px;background-color:#e5e5e5;cursor:pointer}
.footer .foot-btn .pay-bt.act{background-color:#000;color:#fff}
.footer .foot-btn .back-home{display:inline-block;height:54px;text-align:center;font-size:16px;background-color:transparent;cursor:pointer;margin:0 auto;padding:10px;color:#000}
.footer .foot-btn .back-home img{width:24px;height:24px;vertical-align:middle}
.footer .foot-btn .back-home .txt{font-family:'Pretendard';font-size:16px;font-weight:700;vertical-align:middle;letter-spacing:-0.5px}
#footer-btns{z-index:80;position:fixed;bottom:20px;width:100%}
#footer-btns .foot-btn{display:flex;align-items:center;height:80px;padding:0 21px}
#footer-btns .foot-btn .pay-bt{font-family:'Pretendard';fdisplay:block;width:100%;height:54px;border-radius:5px;text-align:center;font-size:18px;color:#999;font-weight:700;letter-spacing:-.5px;background-color:#e5e5e5;cursor:pointer}
#footer-btns .foot-btn .pay-bt.act{background-color:#000;color:#fff}
#footer-btns .foot-btn .back-home{display:inline-block;height:54px;text-align:center;font-size:16px;background-color:transparent;cursor:pointer;margin:0 auto;padding:10px;color:#000}
#footer-btns .foot-btn .back-home img{width:24px;height:24px;vertical-align:middle}
#footer-btns .foot-btn .back-home .txt{font-family:'Pretendard';font-size:16px;font-weight:700;vertical-align:middle;letter-spacing:-0.5px}

/*알림*/
.notice{background-color:#f4f4f4}
.notice .wrap{padding:30px 21px}
.notice .wrap .text .txt{font-size:14px;color:#555;background:url(/app/img/pay/alert.svg) 0 0/16px 16px no-repeat;padding-left:20px}
.notice .wrap .text .txt + .txt{margin-top:10px}

/*1번결제일때*/
.pay.once{background-color:#fff}
.pay.once .notice{display:none}
.pay.once .main{height:300px}
.pay.once .main .paymoney{display:none}

/*다수결제일때*/
.pay.many .main{height:470px}
.pay.many{background-color:#f4f4f4}

/*결제완료*/
.complete{display:flex;flex-direction:column;justify-content:space-between;height:90vh;font-size:0}
.complete *{font-family:'Pretendard';letter-spacing:-.5px}
.complete .inner{background:url(/app/img/pay/bill.png) 50% 50%/300px 275px no-repeat;width:100%;height:350px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.complete .inner .box{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px}
.complete .inner .box .img{width:100px;height:100px}
.complete .inner .box .text{font-size:18px}
.complete .inner .box .text b{font-size:18px;font-weight:700}

/*공지사항*/
.notice-m .title{width:100%;min-height:100px;display:flex;padding:23px 21px;flex-direction:column;gap:5px;border-bottom:1px solid #ddd}
.notice-m .title .tit{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%}
.notice-m .title .tit .notice-icon{background:url(/app/img/notice.png) 50% 50%/contain no-repeat;width:50px;height:30px;min-width:50px}
.notice-m .title .tit p{font-size:18px;font-weight:700;letter-spacing:-.5px;font-family:'Pretendard';margin-left:10px}
.notice-m .title .date{font-size:14px;color:#999;text-align:right}
.notice-m .content{background-color:#fbfbfb;width:100%;height:100vh;padding:20px 21px;font-size:15px;font-family:'Pretendard';letter-spacing:-.5px;word-break:break-word}
.notice-m  .content ul{padding:0 21px}
.notice-m .content li{list-style:inherit}
.notice-m .content .img{width:100%;margin:0 auto;border-radius:10px}
.notice-m .content .img img{width:100%}
.notice-m .content .img + .txt{margin-top:20px}
.notice-m .content .txt{font-size:15px;font-family:'Pretendard';letter-spacing:-.5px}
.notice-m .content .txt p{font-size:15px;font-family:'Pretendard';letter-spacing:-.5px}
.notice-m .content .txt p img{width:100%!important;margin:0 auto;border-radius:10px;object-fit:cover}

/*faq*/
.faq-m .title{width:100%;min-height:100px;display:flex;padding:23px 21px;flex-direction:column;gap:10px;border-bottom:1px solid #ddd}
.faq-m .title .tit{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;width:100%}
.faq-m .title .tit .faq-icon{background:url(/app/img/faq.png) 50% 50%/contain no-repeat;width:20px;height:20px;min-width:20px}
.faq-m .title .tit p{font-size:18px;font-weight:700;letter-spacing:-.5px;font-family:'Pretendard';margin-left:10px}
.faq-m .title .date{font-size:14px;color:#999;text-align:right}
.faq-m .content{background-color:#fbfbfb;width:100%;height:100vh;padding:20px 21px;font-size:15px;font-family:'Pretendard';letter-spacing:-.5px;word-break:break-word}
.faq-m .content ul{padding:0 21px}
.faq-m .content li{list-style:inherit}
.faq-m .content .img{width:100%;margin:0 auto;border-radius:10px}
.faq-m .content .img img{width:100%}
.faq-m .content .img + .txt{margin-top:20px}
.faq-m .content .txt{font-size:15px;font-family:'Pretendard';letter-spacing:-.5px}
.faq-m .content .txt p{font-size:15px;font-family:'Pretendard';letter-spacing:-.5px}
.faq-m .content .txt p img{width:100%!important;margin:0 auto;border-radius:10px;object-fit:cover}



/*개인정보처리방침*/

.policy{background-color:#fff;padding:16px;width:100%;font-family:'Pretendard'}
.policy-wrap .title{text-align:center}
.policy-wrap .title .date{font-size:16px;color:#555}
.policy-wrap .title .txt{font-size:24px;font-weight:700;color:#0B2831;margin:10px 0;flex:auto}
.policy-wrap .content{width:100%; padding:24px 0}
.policy-wrap .content p{font-size:16px; letter-spacing:-0.75px; line-height:1.6;color:#333}
.policy-wrap .content h2{font-size:20px;letter-spacing:-0.75px; line-height:1.6;margin:10px 0}
.policy-wrap .content h3{font-size:18px;letter-spacing:-0.75px; line-height:1.6;margin:10px 0}
.policy-wrap .content ul li{font-size:16px;letter-spacing:-.5px;color:#333}
.policy-wrap .content ul li + li{margin-top:10px}
.policy-wrap .content ol{padding:10px}
.policy-wrap .content ol li{font-size: 15px}
.policy-wrap .content ol li + li{margin-top:10px}
.policy-wrap .content ol li small{color:#555}
.policy-wrap .content ol li .inner-wrap{padding:5px}
.policy-wrap .content ol li .inner-wrap p{font-size:15px}
.policy-wrap .content .small{font-size:14px;color:#555;letter-spacing:-0.5px}
.policy-wrap .content .inner-wrap{padding:20px 10px}
.policy-wrap .content .inner-wrap h4{font-size:16px;font-weight:normal;letter-spacing:-0.5px}
.policy-wrap .content .inner-wrap h4 + p{margin-top:20px}
.policy-wrap .content .inner-wrap .refer{padding: 10px 0}
.policy-wrap .content .inner-wrap .refer p{font-size:14px;color:#555}
.policy-wrap .content .inner{padding:20px 10px}
.policy-wrap .content .inner .inn{font-size:14px;letter-spacing:-0.75px;padding:0 16px}
.policy-wrap .content .inner .refer{padding:20px 0}
.policy-wrap .content .inner .refer p{font-size:14px;color:#555;letter-spacing:-0.5px}
.policy-wrap .content .inner span{font-size:16px; font-weight:600}
.policy-wrap .content .inner li{list-style:none}
.policy-wrap .content .tbl{padding:20px 10px}
.policy-wrap .content .tbl th{letter-spacing:0.75px}
.policy-wrap .content .tbl td{padding:10px}
.policy-wrap .content .tbl td p{text-align:left; font-size:14px}
.policy-wrap .content .tbl tbody th{font-size:14px; font-weight:600; letter-spacing:-0.75px}
.policy-wrap .content table.col tbody td{font-size:13px}

/*이용약관*/
.policy-wrap{width:100%}
.service .title{text-align:center}
.service .title .date{font-size:16px;color:#555}
.service .title .txt{font-size:26px;font-weight:700;color:#0B2831;margin:10px 0;flex:auto}
.service .content{width:100%; padding:24px 0}
.service .content p{font-size:16px; letter-spacing:-0.75px; line-height:1.6;color:#333}
.service .content  h2{font-size:24px;letter-spacing:-0.75px; line-height:1.6;margin:20px 0;color:#ff6800 }
.service .content  h3{font-size:20px;letter-spacing:-0.75px; line-height:1.6;margin:10px 0;color:#272b3a}
.service .content  h4{font-size:18px;letter-spacing:-0.75px; line-height:1.6;margin:10px 0}
.service .content .inner-wrap{padding:20px 10px}
.service .content .inner{padding:20px 10px}
.service .content .inner span{font-size:16px; font-weight:600}
.service .content .inner ul{padding:5px}
.service .content .inner li{list-style:none}
.service .content .inner li+li{margin-bottom:10px}
.service .content .inner ol{padding:5px}


table.col{width:100%;border-collapse:collapse;border-spacing:0}
table.col thead tr{height:50px}
table.col thead th:first-child{border-left:0}
table.col thead th:last-child{border-right:0}
table.col tbody th:last-child{border-right:0}
table.col tbody td:first-child{border-left:0}
table.col tbody td:last-child{border-right:0}
table.col thead th{line-height:1.2;font-size:14px;font-weight:600;letter-spacing:-1px;color:#242a38;border:1px solid #eee;border-bottom:1px solid #eee;background:#fafbfc}
table.col thead tr.pd8 th{padding:8px 0 !important}
table.col tbody tr{height:40px}
table.col tbody td{padding:8px;font-size:14px;text-align:center;color:#555;border:1px solid #eee;border-bottom:1px solid #eee;word-break:keep-all}
table.col tbody td em{font-size:12px;font-weight:700}
table.col tbody td:nth-child(1){text-align:center}
table.col tbody.collection th{line-height:1.2;font-size:14px;font-weight:600;letter-spacing:-1px;color:#242a38;border:1px solid #eee;border-bottom:1px solid #eee;background:#fafbfc;border-left:hidden}

.purple{color:#5F5998!important}
.orange{color:#E18C51!important}

.col1{width:8.33% !important}
.col2{width:16.66% !important}
.col3{width:24.99% !important}
.col4{width:33.32% !important}
.col5{width:41.65% !important}
.col6{width:49.98% !important}
.col7{width:58.31% !important}
.col8{width:66.64% !important}
.col9{width:74.97% !important}
.col10{width:83.3% !important}
.col11{width:91.63% !important}
.col12{width:100% !important}


.tal{text-align:left !important}
.tac{text-align:center !important}
.tar{text-align:right !important}
.jcc{justify-content:center !important}

.fr{float:right !important}
.fl{float:left !important}

.mt0{margin-top:0!important}
.mt1{margin-top:1px}
.mt2{margin-top:2px}
.mt3{margin-top:3px}
.mt4{margin-top:4px}
.mt5{margin-top:5px}
.mt6{margin-top:6px}
.mt7{margin-top:7px}
.mt8{margin-top:8px}
.mt9{margin-top:9px}
.mt10{margin-top:10px}
.mt11{margin-top:11px}
.mt12{margin-top:12px}
.mt13{margin-top:13px}
.mt14{margin-top:14px}
.mt15{margin-top:15px}
.mt16{margin-top:16px}
.mt17{margin-top:17px}
.mt18{margin-top:18px}
.mt19{margin-top:19px}
.mt20{margin-top:20px}

.mb40{margin-bottom:40px !important}
.mb45{margin-bottom:45px !important}
.mb50{margin-bottom:50px !important}
.mb55{margin-bottom:55px !important}

.pt0{padding-top:0}
.pl07{padding-left:7px !important}
.pl10{padding-left:10px !important}
.pl11{padding-left:11px !important}
.pl12{padding-left:12px !important}
.pl13{padding-left:13px !important}
.pl14{padding-left:14px !important}
.pl15{padding-left:15px !important}
.pl16{padding-left:16px !important}
.pl17{padding-left:17px !important}
.pl18{padding-left:18px !important}
.pl19{padding-left:19px !important}
.pl20{padding-left:20px !important}

.pr10{padding-right:10px !important}
.pr15{padding-right:15px !important}
.pr20{padding-right:20px !important}
.pr25{padding-right:25px !important}
.pr30{padding-right:30px !important}
.pr35{padding-right:35px !important}
.pr40{padding-right:40px !important}
.pr45{padding-right:45px !important}
.pr50{padding-right:50px !important}
.pr55{padding-right:55px !important}
.pr60{padding-right:60px !important}
.pr65{padding-right:65px !important}

.w10{width:10px !important}
.w20{width:20px !important}
.w30{width:30px !important}
.w40{width:40px !important}
.w50{width:50px !important}
.w60{width:60px !important}
.w70{width:70px !important}
.w75{width:75px !important}
.w80{width:80px !important}
.w85{width:85px !important}
.w90{width:90px !important}
.w95{width:95px !important}


.w1p{width:1% !important}
.w2p{width:2% !important}
.w3p{width:3% !important}
.w4p{width:4% !important}
.w5p{width:5% !important}
.w6p{width:6% !important}
.w7p{width:7% !important}
.w8p{width:8% !important}
.w9p{width:9% !important}
.w10p{width:10% !important}
.w11p{width:11% !important}
.w12p{width:12% !important}
.w13p{width:13% !important}
.w14p{width:14% !important}
.w15p{width:15% !important}
.w16p{width:16% !important}
.w17p{width:17% !important}
.w18p{width:18% !important}
.w19p{width:19% !important}
.w20p{width:20% !important}
.w21p{width:21% !important}
.w22p{width:22% !important}
.w23p{width:23% !important}
.w24p{width:24% !important}
.w25p{width:25% !important}
.w26p{width:26% !important}
.w27p{width:27% !important}
.w28p{width:28% !important}
.w29p{width:29% !important}
.w30p{width:30% !important}
.w31p{width:31% !important}
.w32p{width:32% !important}
.w33p{width:33% !important}
.w34p{width:34% !important}
.w35p{width:35% !important}
.w36p{width:36% !important}
.w37p{width:37% !important}
.w38p{width:38% !important}
.w39p{width:39% !important}
.w40p{width:40% !important}
.w41p{width:41% !important}
.w42p{width:42% !important}
.w43p{width:43% !important}
.w44p{width:44% !important}
.w45p{width:45% !important}
.w46p{width:46% !important}
.w47p{width:47% !important}
.w48p{width:48% !important}
.w49p{width:49% !important}
.w50p{width:50% !important}
.w51p{width:51% !important}
.w52p{width:52% !important}
.w53p{width:53% !important}
.w54p{width:54% !important}
.w55p{width:55% !important}
.w56p{width:56% !important}
.w57p{width:57% !important}
.w58p{width:58% !important}
.w59p{width:59% !important}
.w60p{width:60% !important}
.w68p{width:68% !important}
.w70p{width:70% !important}
.w80p{width:80% !important}
.w90p{width:90% !important}
.w100p{width:100% !important}