@charset "utf-8";

#comingsoon{width:100%;padding-top:100px;text-align:center}

.pagecommon{padding:100px 0;font-size:17px;line-height:1.6;color:#666;font-family:var(--k-font)}
.pagecommon *{word-break:keep-all}
.pagecommon .pl{white-space:pre-line}
.w_800{max-width:800px;margin:0 auto}
.w_1400{max-width:1400px;margin:0 auto}

/* 페이 페이지 공통 */
.pay_page{position:relative;padding:0}
.pay_page:before{position:absolute;left:0;bottom:0;content:'';width:100%;height:100px;background:var(--pale)}

#payTop{width:100%;padding-top:30px}
#payTop .pay_banner{display:flex;width:100%;max-width:var(--mainsize);margin:0 auto}
#payTop .pay_banner .l_top{flex-shrink:0;width:600px;padding-top:90px}
#payTop .pay_banner .l_top p{margin-bottom:31px;font-size:20px;font-weight:700;color:#111}
#payTop .pay_banner .l_top p img{height:23px;margin:-10px 0 0 5px}
#payTop .pay_banner .l_top b{white-space:pre-line;font-size:55px;font-weight:normal;line-height:1.35;color:#111;font-family:var(--p-font)}
#payTop .pay_banner .l_top b img{margin-top:-15px}
#payTop .pay_banner .l_top a{display:flex;align-items:center;width:fit-content;gap:20px;height:70px;margin-top:69px;padding:0 20px 0 40px;border-radius:50px;font-size:16px;font-weight:600;color:#111;background-color:#f5f5f5;transition:all .2s}
#payTop .pay_banner .l_top a span{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:100%;background-color:#fff}
#payTop .pay_banner .l_top a span svg{height:18px;color:#111}
#payTop .pay_banner .r_top{position:relative;width:100%;padding-left:90px}
#payTop .pay_banner .r_top:before{position:absolute;left:0;top:60px;content:'';z-index:-1;width:1500px;height:420px;border-radius:210px 0 0 210px;background:var(--pale)}
#payTop .pay_quick{display:flex;align-items:center;gap:50px;max-width:1920px;margin:0 auto;padding:90px 80px 0}
#payTop .pay_quick>a{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:710px;height:110px;border-radius:20px;font-size:23px;color:#fff;background-color:var(--dark);transition:all .2s;font-family:var(--p-font)}
#payTop .pay_quick>a .quick_logo{height:35px;margin:-12px 5px 0}
#payTop .pay_quick>a .quick_arrow{margin-left:30px}
#payTop .pay_quick .point_list{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
#payTop .pay_quick .point_list li{position:relative;text-align:center}
#payTop .pay_quick .point_list li+li:before{position:absolute;left:0;top:50%;transform:translateY(-50%);content:'';width:1px;height:65px;background:#e1e1e1}
#payTop .pay_quick .point_list li p{font-size:18px;font-weight:700;color:#111}
#payTop .pay_quick .point_list li p span{display:block;margin:11px 0 4px;font-size:14px;font-weight:normal;font-family:var(--p-font)}

#payCobar{margin-top:100px}
#payCobar .inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--mainsize);margin:0 auto}
#payCobar .l_box ul li{position:relative;padding-left:19px;font-size:20px;line-height:1.5;font-weight:500;color:#fff}
#payCobar .l_box ul li:before{position:absolute;left:0;top:11px;content:'';width:4px;height:4px;border-radius:100px;background:rgba(255,255,255,.5)}
#payCobar .l_box p{margin-top:29px;font-weight:500;color:rgba(255,255,255,.6)}
#payCobar .r_box{display:flex;gap:10px;padding:50px 0}
#payCobar .r_box a{display:flex;flex-flow:column;justify-content:center;gap:19px;width:330px;height:160px;padding:0 40px;border-radius:20px;background-color:#fff;transition:all .2s}
#payCobar .r_box a b{font-size:20px;font-weight:normal;color:#111;transition:all .2s;font-family:var(--p-font)}
#payCobar .r_box a p{display:flex;align-items:center;font-size:15px;font-weight:500;color:#888;transition:all .2s}
#payCobar .r_box a p svg{height:20px;margin-left:10px}

#payCont{padding:180px 0 200px}
#payCont .cont_box{display:flex;align-items:center;justify-content:center;gap:140px}
#payCont .cont_box+.cont_box{margin-top:180px}
#payCont .cont_box:nth-child(2n){flex-flow:row-reverse}
#payCont .cont_box div>span{display:block;margin-bottom:26px;font-size:18px;font-weight:600}
#payCont .cont_box b{display:block;margin-bottom:66px;font-size:40px;font-weight:normal;line-height:1.35;color:#111;font-family:var(--p-font)}
#payCont .cont_box:last-child b{margin-bottom:46px}
#payCont .cont_box b span{font-size:18px;color:#888}

#payBottom{width:calc(100% - 160px);max-width:1920px;margin:0 auto;border-radius:20px;background:url('/sh_page/img/pay_card.png') no-repeat right center;background-size:cover}
#payBottom .inner{display:flex;flex-flow:column;justify-content:center;align-items:flex-start;width:100%;height:450px;max-width:var(--mainsize);margin:0 auto}
#payBottom p{margin-bottom:16px;font-size:40px;color:#fff;font-family:var(--p-font)}
#payBottom img{height:60px}
#payBottom a{display:block;width:270px;margin-top:55px;border-radius:50px;font-size:16px;text-align:center;line-height:65px;font-weight:600;color:#fff;background-color:var(--primary);transition:all .2s}

/* 월세/임대료 */
.pay_co01 .pay_quick .point_list li p span, .pay_co01 #payCont .cont_box div>span{color:var(--primary)}
.pay_co01 #payCobar, .pay_co01 #payBottom a{background-color:var(--primary)}

/* 인건비/알바비 */
.pay_co02 .pay_quick .point_list li p span, .pay_co02 #payCont .cont_box div>span{color:#318ced}
.pay_co02 #payCobar, .pay_co02 #payBottom a{background-color:#318ced}

/* 공사비/인테리어 */
.pay_co03 .pay_quick .point_list li p span, .pay_co03 #payCont .cont_box div>span{color:#0eb22d}
.pay_co03 #payCobar, .pay_co03 #payBottom a{background-color:#0eb22d}

/* 가타 거래 */
.pay_co04 .pay_quick .point_list li p span, .pay_co04 #payCont .cont_box div>span{color:#ff6000}
.pay_co04 #payCobar, .pay_co04 #payBottom a{background-color:#ff6000}


@media (hover: hover) {
#payTop .pay_banner .l_top a:hover{color:#fff;background-color:var(--dark)}
.pay_co01 #payTop .pay_quick>a:hover{background-color:var(--primary)}
.pay_co02 #payTop .pay_quick>a:hover{background-color:#318ced}
.pay_co03 #payTop .pay_quick>a:hover{background-color:#0eb22d}
.pay_co04 #payTop .pay_quick>a:hover{background-color:#ff6000}
#payCobar .r_box a:hover{background-color:var(--dark)}
#payCobar .r_box a:hover b{color:#fff}
#payCobar .r_box a:hover p{color:#fff}
#payBottom a:hover{color:#111;background-color:#fff}
}

/* 반응형 [s] */
@media (max-width:1800px){
#payBottom{width:calc(100% - 100px);padding:0 50px}
}
@media (max-width:1600px){
#payTop .pay_banner{max-width:none;padding:0 50px}
#payTop .pay_quick{gap:30px;padding:90px 50px 0}
#payTop .pay_quick>a{width:600px}
#payTop .pay_quick .point_list li p{font-size:17px}
#payCobar .inner{max-width:none;padding:0 50px}
#payCobar .l_box ul li{font-size:18px}
#payCobar .r_box a{width:300px}
}
@media (max-width:1380px){
#payTop .pay_banner .l_top{width:520px}
#payTop .pay_banner .l_top b{font-size:50px}
#payTop .pay_banner .r_top:before{height:380px}
#payTop .pay_banner .r_top>img{height:350px}
#payTop .pay_quick{gap:20px}
#payTop .pay_quick>a{width:520px;font-size:20px}
#payTop .pay_quick>a .quick_logo{height:30px;margin:-7px 8px 0}
#payTop .pay_quick .point_list li img{height:35px}
#payCobar .inner{gap:30px}
#payCont .cont_box{gap:100px}
#payCont .cont_box>img{height:350px}
#payCont .cont_box b{margin-bottom:50px;font-size:35px}
#payBottom .inner{height:390px}
#payBottom p{margin-bottom:10px;font-size:35px}
#payBottom img{height:55px}
#payBottom a{width:250px;margin-top:40px}
}
@media (max-width:1230px){
#payTop{padding-top:20px}
#payTop .pay_banner{padding:0 30px}
#payTop .pay_banner .l_top{width:470px;padding-top:60px}
#payTop .pay_banner .l_top p{font-size:18px}
#payTop .pay_banner .l_top b{font-size:45px}
#payTop .pay_banner .l_top b img{height:58px}
#payTop .pay_banner .l_top a{margin-top:55px}
#payTop .pay_banner .r_top{padding-left:60px}
#payTop .pay_banner .r_top:before{height:330px}
#payTop .pay_banner .r_top>img{height:300px}
#payTop .pay_quick{padding:80px 30px 0}
#payTop .pay_quick>a{width:470px;height:100px;font-size:18px}
#payTop .pay_quick .point_list li img{height:33px}
#payTop .pay_quick .point_list li p{font-size:16px}
#payTop .pay_quick .point_list li p span{font-size:13px}
#payCobar .inner{padding:0 30px}
#payCobar .l_box ul li{font-size:17px}
#payCont{padding:160px 0 180px}
#payCont .cont_box{gap:80px}
#payCont .cont_box+.cont_box{margin-top:160px}
#payCont .cont_box div>span{font-size:16px}
#payCont .cont_box b{font-size:30px}
#payCont .cont_box>img{height:320px}
#payBottom{width:calc(100% - 60px)}
}
@media (max-width:1150px){
.pagecommon{font-size:16px}
#payTop .pay_banner .l_top{width:385px}
#payTop .pay_banner .l_top p{margin-bottom:20px;font-size:17px}
#payTop .pay_banner .l_top b{font-size:35px;line-height:1.45}
#payTop .pay_banner .l_top b img{height:43px}
#payTop .pay_banner .l_top a{height:65px;margin-top:45px;padding:0 15px 0 30px;font-size:15px}
#payTop .pay_banner .r_top:before{height:285px}
#payTop .pay_banner .r_top>img{height:275px}
#payTop .pay_quick{flex-flow:column-reverse;gap:30px;padding:60px 30px 0}
#payTop .pay_quick>a{width:100%;height:85px;border-radius:15px}
#payTop .pay_quick>a .quick_logo{height:25px}
#payTop .pay_quick>a .quick_arrow{height:30px}
#payCobar .r_box{flex-flow:column;padding:30px 0}
#payCobar .r_box a{flex-flow:row;align-items:center;justify-content:space-between;width:300px;height:90px;padding:0 30px;border-radius:15px}
#payCobar .r_box a b{font-size:18px}
#payCont{padding:130px 30px 150px}
#payCont .cont_box{gap:60px}
#payCont .cont_box+.cont_box{margin-top:130px}
#payCont .cont_box>img{height:270px}
#payCont .cont_box div>span{margin-bottom:20px}
#payCont .cont_box b{margin-bottom:30px;font-size:25px}
#payCont .cont_box p.pl{max-width:450px;white-space:normal}
#payBottom .inner{height:330px}
#payBottom p{font-size:30px}
#payBottom img{height:45px}
#payBottom a{width:210px;font-size:15px;line-height:55px}
}
@media (max-width:900px){
.pagecommon{font-size:15px}
#payTop{padding-top:40px}
#payTop .pay_banner{flex-flow:column}
#payTop .pay_banner .l_top{width:100%;padding-top:0;text-align:center}
#payTop .pay_banner .l_top a{margin:35px auto 0}
#payTop .pay_banner .r_top{padding:50px 0;text-align:center}
#payTop .pay_banner .r_top:before{top:auto;bottom:0;width:100%;border-radius:20px}
#payTop .pay_banner .r_top>img{max-width:100%;height:auto}
#payCobar{margin-top:80px}
#payCobar .inner{flex-flow:column;align-items:flex-start;padding:35px 30px}
#payCobar .r_box{flex-flow:row;justify-content:center;width:100%;padding:0}
#payCobar .r_box a{height:70px}
#payCobar .r_box a b{font-size:16px}
#payCont{padding:100px 30px 120px}
#payCont .cont_box{flex-flow:column !important}
#payCont .cont_box+.cont_box{margin-top:80px}
#payCont .cont_box>div{text-align:center}
#payBottom{background:var(--dark);background-image:none}
#payBottom .inner{align-items:center;height:310px}
#payBottom p{font-size:28px}
}
@media (max-width:768px){
#payTop .pay_banner{padding:0 15px}
#payTop .pay_banner .r_top{padding:50px 30px 30px}
#payTop .pay_banner .r_top:before{height:75%}
#payTop .pay_quick{padding:30px 15px 0}
#payTop .pay_quick .point_list{grid-template-columns:repeat(2,1fr);gap:20px}
#payTop .pay_quick .point_list li+li:before{display:none}
#payTop .pay_quick .point_list li img{height:30px}
#payTop .pay_quick>a{height:75px;font-size:16px}
#payTop .pay_quick>a .quick_arrow{margin-left:20px}
#payTop .pay_quick>a .quick_logo{height:22px}
#payTop .pay_quick>a .quick_arrow{height:25px}
#payCobar .inner{padding:35px 15px}
#payCobar .l_box ul li{font-size:15px}
#payCobar .l_box p{margin-top:20px}
#payCobar .r_box{flex-flow:column}
#payCobar .r_box a{width:100%;padding:0 20px}
#payCobar .r_box a b{font-size:15px}
#payCobar .r_box a p{font-size:14px}
#payCobar .r_box a p svg{margin-left:5px}
#payCont{padding:80px 15px 90px}
#payBottom{width:calc(100% - 30px);padding:0 15px}
#payBottom .inner{height:280px}
#payBottom p{font-size:23px}
#payBottom img{height:40px}
}
@media (max-width:480px){
.pagecommon{font-size:14px}
#payTop .pay_banner .l_top p{font-size:15px}
#payTop .pay_banner .l_top p img{height:19px}
#payTop .pay_banner .l_top b{font-size:28px}
#payTop .pay_banner .l_top b img{height:35px;margin-top:-11px}
#payTop .pay_banner .l_top a{gap:15px;height:55px;margin-top:30px;padding:0 10px 0 25px;font-size:14px}
#payTop .pay_banner .l_top a span{width:40px;height:40px}
#payTop .pay_banner .l_top a span svg{height:15px}
#payTop .pay_quick{padding:30px 15px 0}
#payTop .pay_quick .point_list li p span{font-size:12px}
#payTop .pay_quick .point_list li p{font-size:15px}
#payTop .pay_quick>a{height:65px;border-radius:10px;font-size:15px}
#payTop .pay_quick>a .quick_logo{height:20px}
#payTop .pay_quick>a .quick_arrow{margin-left:15px}
#payCobar{margin-top:60px}
#payCobar .r_box a{height:60px;border-radius:10px}
#payCont{padding:60px 15px 70px}
#payCont .cont_box{gap:40px}
#payCont .cont_box+.cont_box{margin-top:60px}
#payCont .cont_box>img{height:auto;max-width:90%}
#payCont .cont_box div>span{margin-bottom:15px;font-size:15px}
#payCont .cont_box b{margin-bottom:20px !important;font-size:20px}
#payBottom{border-radius:10px}
#payBottom .inner{height:250px}
#payBottom p{font-size:20px}
#payBottom img{height:35px}
#payBottom a{width:190px;margin-top:30px;font-size:14px;line-height:50px}
}
@media (max-width:380px){
#payBottom p{font-size:18px;text-align:center}
}
/* 반응형 [e] */


/* 결제하기 */
#payMent .pm_top .tit{display:flex;align-items:flex-start;justify-content:space-between;padding-right:30px}
#payMent .pm_top .tit p{font-size:40px;line-height:1.3;color:#111;font-family:var(--p-font)}
#payMent .pm_top .tit p img{height:48px;margin:-16px 5px 0 0}
#payMent .reason_list dl{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 20px 40px;border:1px solid #e1e1e1;border-radius:20px}
#payMent .reason_list dl+dl{margin-top:10px}
#payMent .reason_list dl dt{display:flex;align-items:flex-start;gap:15px}
#payMent .reason_list dl dt span{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:100%;font-size:15px;color:#fff;background-color:var(--primary);font-family:var(--p-font)}
#payMent .reason_list dl dt p{margin-top:-1px}
#payMent .reason_list dl dt p b{display:block;margin-bottom:14px;font-size:23px;font-weight:700;color:#111}
#payMent .reason_list dl dd{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:100px;height:100px;border-radius:20px;background-color:var(--pale)}
#payMent .pm_mid{width:fit-content;margin:100px auto;text-align:center}
#payMent .pm_mid .b_txt b{display:block;margin:33px 0 28px;font-size:30px;line-height:1.4;font-weight:normal;color:#111;font-family:var(--p-font)}
#payMent .step_list{display:flex;align-items:flex-start;justify-content:center;margin-top:66px}
#payMent .step_list li{width:210px}
#payMent .step_list li .num{display:flex;align-items:center;justify-content:center;position:relative;width:85px;height:30px;margin:0 auto -15px;border-radius:50px;font-size:15px;font-weight:600;color:#fff;background-color:var(--primary)}
#payMent .step_list li>span{display:flex;align-items:center;justify-content:center;width:160px;height:160px;margin:0 auto 19px;border-radius:20px;background-color:var(--pale)}
#payMent .step_list li .txt span{display:block;font-size:20px;color:#111;font-family:var(--p-font)}
#payMent .step_list li:nth-child(2) .txt span{margin-bottom:8px}
#payMent .red_txt{font-weight:600;color:var(--primary)}
#payMent .pm_mid .red_txt{margin-top:32px;text-align:center}
#payMent .pm_state{padding-bottom:100px}
#payMent .pm_state>div{display:flex;flex-flow:column;padding:30px 30px 40px;border:1px solid #e1e1e1;border-radius:20px;text-align:center}
#payMent .pm_state>div+div{margin-top:10px}
#payMent .pm_state>div .state{margin-left:auto;padding:5px 10px;border-radius:5px;font-size:16px;font-weight:600;background-color:#e2effc;color:#318ced}
#payMent .pm_state>div b{display:block;font-size:30px;font-weight:700;color:#111}
#payMent .pm_state .red_txt{margin-top:10px;text-align:right}
#payMent .pm_state ul{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:45px}
#payMent .pm_state ul li a{display:flex;align-items:center;justify-content:center;height:55px;border-radius:5px;font-weight:600;color:var(--dark);border:1px solid var(--dark);transition:all .2s}
#payMent .go_btn li+li{margin-top:10px}
#payMent .go_btn li a{display:flex;flex-flow:column;align-items:center;justify-content:center;gap:5px;width:100%;height:100px;border-radius:10px;font-size:20px;color:#fff;background-color:var(--dark);transition:all .2s;font-family:var(--p-font)}
#payMent .go_btn li a span{font-size:16px;color:rgba(255,255,255,.6);font-family:var(--k-font)}
#payMent .go_btn li:nth-child(2) a{border:1px solid var(--dark);color:var(--dark);background-color:#fff}
#payMent .guide_btn{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:100px}
#payMent .guide_btn li a{display:block;padding:30px;border:1px solid #e1e1e1;border-radius:10px}
#payMent .guide_btn li p{font-size:20px;color:#111;font-family:var(--p-font)}
#payMent .guide_btn li span{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:24px 0 0 auto;border-radius:100%;color:#fff;transition:all .2s;background-color:var(--primary)}
#payMent .guide_btn li span svg{height:20px}

/* 간편결제 카드등록 */
#cardPage .card_info{margin-bottom:20px;padding:30px;border-radius:20px;border:1px solid #e1e1e1;font-size:20px;font-weight:600;text-align:center}
#cardPage .card_info p{margin-bottom:10px;font-size:25px;font-weight:normal;color:#111;font-family:var(--p-font)}
#cardPage .card_info button{width:100%;height:60px;margin-top:20px;border:none;border-radius:5px;font-size:16px;font-weight:500;color:#888;background-color:#f5f5f5;transition:all .2s}
#cardPage .card_info li+li{margin-top:10px}
#cardPage .btn_list li+li{margin-top:10px}
#cardPage .btn_list li a{display:flex;justify-content:center;align-items:center;width:100%;height:60px;border-radius:5px;font-weight:500;color:#fff;background-color:var(--dark);transition:all .2s}
#cardPage .btn_list li:nth-child(2) a{border:1px solid var(--dark);color:var(--dark);background-color:#fff}

/* 폼페이지 - 공통 */
.form_page .form_tit{position:relative;margin-bottom:20px;padding-left:20px;font-size:20px;color:#111;font-family:var(--p-font)}
.form_page .form_tit:before{position:absolute;left:0;top:50%;transform:translateY(-50%);content:'';width:5px;height:5px;border-radius:100px;background:var(--primary)}
.form_page form{font-size:16px}
.form_page .form_box+.form_box{margin-top:40px}
.form_page form input[type=text], .form_page form input[type=file], .form_page form input[type=password], .form_page form select{width:100%;height:50px;padding:0 15px;border:1px solid #e1e1e1;border-radius:5px;line-height:50px;transition:all .2s;color:#666}
.form_page form input+input{margin-top:5px}
.form_page form .add_input{display:flex;gap:5px;margin-top:5px}
.form_page form .add_input button{flex-shrink:0;width:150px;border:none;border-radius:5px;font-weight:500;color:#fff;background-color:var(--dark)}
.form_page form select{margin:5px 0}
.form_page form input:focus, .form_page form select:focus{outline:none !important;border:1px solid var(--dark) !important;box-shadow: none !important}
.form_page form #file_list li{display:flex;align-items:center;gap:5px;height:50px;margin-top:5px;padding:0 15px;border-radius:5px;background-color:#f5f5f5}
.form_page form #file_list li p{width:100%}
.form_page form #file_list li button{flex-shrink:0;width:60px;border:1px solid #e1e1e1;border-radius:5px;font-size:15px;font-weight:500;line-height:30px;color:#888;background-color:#fff}
.form_page .radi_list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.form_page .radi_list li input{display:none}
.form_page .radi_list li label{display:block;padding:20px;border:1px solid #e1e1e1;border-radius:5px;text-align:center;font-weight:500;cursor:pointer;transition:all .2s}
.form_page .radi_list li input:checked + label{border:1px solid var(--primary);color:#fff;background-color:var(--primary)}
.form_page #reserve_date{margin-top:5px}
.form_page .ctr_btn{width:100%;height:60px;margin-top:40px;border:none;border-radius:5px;font-weight:500;color:#fff;background-color:var(--dark);transition:all .2s}
.form_page .form_box .psn_btn{width:100%;height:60px;margin-top:5px;border:none;border-radius:5px;font-weight:500;color:#fff;background-color:var(--dark);transition:all .2s}
.form_page .sm_txt{padding:10px 10px 0;font-size:15px}
.form_page .sm_txt span{font-weight:500;color:var(--primary)}
.form_page .sm_txt b{font-weight:600;color:#333}
.form_page .pay_gd{display:flex;gap:20px;margin-top:10px;padding:15px;border-radius:10px;font-size:15px;background-color:#f5f5f5}
.form_page .pay_gd dt{flex-shrink:0;font-weight:600;color:#111}
.form_page .pay_gd dt.red_co{color:var(--primary)}
.form_page .pay_gd dt.pd_t{padding-top:5px}
.form_page .pay_gd dd a{color:#666}
.form_page .pay_gd dd ul li{display:flex;gap:10px;align-items:flex-start}
.form_page .pay_gd dd ul li+li{margin-top:8px}
.form_page .pay_gd dd ul li span{flex-shrink:0;padding:5px 10px;border-radius:5px;font-weight:600;color:#111;background-color:#fff}
.form_page .pay_gd dd ul li p{padding-top:5px}
.form_page .agr_txt{display:flex;gap:5px;align-items:center;justify-content:right;margin-top:5px;font-size:15px}
.form_page .agr_txt label{cursor:pointer}

/* 회원구분 */
#signOpt ul{display:grid;grid-template-columns:repeat(2,1fr);gap:30px} 
#signOpt ul li input{display:none}
#signOpt ul li label{display:block;padding:25px;border:1px solid #e1e1e1;border-radius:20px;font-size:20px;line-height:30px;color:#111;cursor:pointer;transition:all .2s;font-family:var(--p-font)}
#signOpt ul li label span{display:flex;align-items:center;justify-content:center;width:65px;height:65px;margin-bottom:25px;border-radius:10px;background-color:var(--pale)}
#signOpt ul li label em{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:20px 0 0 auto;border-radius:100%;color:#fff;background-color:var(--primary);transition:all .2s}
#signOpt ul li label em svg{height:20px}

@media (hover: hover) {
#payMent .go_btn li a:hover{background-color:var(--primary)}
#payMent .go_btn li:nth-child(2) a:hover{border:1px solid var(--primary);color:#fff;background-color:var(--primary)}
#payMent .guide_btn li a:hover span{transform:rotate(45deg);background-color:var(--dark)}
#payMent .pm_state ul li a:hover{border:1px solid var(--primary);color:#fff;background-color:var(--primary)}
#cardPage .card_info button:hover{color:#fff;background-color:var(--dark)}
#cardPage .btn_list li a:hover{background-color:var(--primary)}
#cardPage .btn_list li:nth-child(2) a:hover{color:#fff;border:1px solid var(--primary)}
#signOpt ul li label:hover{border:1px solid var(--primary)}
#signOpt ul li label:hover em{transform:rotate(45deg);background-color:var(--dark)}
.form_page .ctr_btn:hover{background-color:var(--primary)}
}

@media (max-width:1460px){
.w_1400{max-width:none;padding:100px 30px}
}
@media (max-width:1230px){
#payMent .step_list li{width:195px}
}
@media (max-width:1024px){
#payMent .pm_mid .b_txt b{font-size:28px}
#payMent .step_list{gap:20px}
#payMent .step_list li{width:calc(100%/5)}
#payMent .step_list li>span{width:125px;height:125px}
#payMent .step_list li>span img{height:35px}
#payMent .step_list li .txt span{font-size:18px}
}
@media (max-width:860px){
.pagecommon{padding:60px 30px}
.w_800{max-width:none}
#payMent .pm_mid .b_txt b{white-space:normal}
#payMent .guide_btn li p{font-size:18px}
}
@media (max-width:768px){
.pagecommon{padding:50px 15px}
#payMent .pm_top .tit p{font-size:30px}
#payMent .pm_top .tit p img{height:40px}
#payMent .pm_top .tit>img{width:220px}
#payMent .reason_list dl{gap:10px;padding:20px}
#payMent .reason_list dl dt p b{font-size:20px}
#payMent .pm_mid .b_txt b{font-size:25px}
#payMent .step_list{flex-wrap:wrap;gap:20px 0;max-width:570px;margin:60px auto 0}
#payMent .step_list li{width:calc(100%/3)}
#payMent .step_list li>span{width:110px;height:110px;margin-bottom:15px}
#payMent .step_list li .num{width:70px;height:25px;font-size:13px}
#payMent .step_list li:nth-child(2) .txt span{margin-bottom:5px}
#payMent .step_list li .txt span{font-size:17px}
#payMent .pm_state>div{padding:20px;border-radius:10px}
#payMent .pm_state>div .state{font-size:14px}
#payMent .pm_state>div b{font-size:25px}
#payMent .pm_state ul{gap:10px;margin-top:25px}
#payMent .pm_state ul li a{height:45px}
#payMent .go_btn li a{height:90px;font-size:18px}
#payMent .go_btn li a span{font-size:15px}
#payMent .guide_btn{gap:10px}
#payMent .guide_btn li a{padding:20px}
#payMent .guide_btn li p{font-size:16px}
.form_page .form_tit{margin-bottom:15px;font-size:18px}
.form_page form{font-size:15px}
.form_page .ctr_btn{height:55px}
}
@media (max-width:480px){
#payMent .pm_top .tit>img{display:none}
#payMent .pm_top .tit p{margin-bottom:25px;font-size:20px}
#payMent .pm_top .tit p img{height:33px;margin-top:-11px}
#payMent .reason_list dl{padding:15px;border-radius:15px}
#payMent .reason_list dl dt span{width:30px;height:30px;font-size:13px;line-height:1}
#payMent .reason_list dl dt p b{font-size:16px}
#payMent .reason_list dl dd{width:80px;height:80px;border-radius:10px}
#payMent .reason_list dl dt p b{margin-bottom:5px}
#payMent .pm_mid{margin:60px auto}
#payMent .pm_mid .ex_mark{height:45px}
#payMent .pm_mid .b_txt b{margin:25px 0;font-size:18px}
#payMent .step_list{margin-top:50px}
#payMent .step_list li>span{width:85px;height:85px;border-radius:10px}
#payMent .step_list li .num{width:60px;height:23px;margin-bottom:-10px}
#payMent .step_list li .txt span{font-size:16px}
#payMent .step_list li:nth-child(2) .txt span{margin-bottom:0}
#payMent .pm_state{padding-bottom:60px}
#payMent .pm_state>div{padding:15px}
#payMent .pm_state>div b{font-size:20px}
#payMent .pm_state ul{margin-top:15px}
#payMent .pm_state ul li a{height:40px}
#payMent .go_btn li a{gap:0;height:80px;font-size:16px}
#payMent .guide_btn{grid-template-columns:repeat(1,1fr);margin-top:60px}
#payMent .guide_btn li a{display:flex;align-items:center;justify-content:space-between}
#payMent .guide_btn li span{width:45px;height:45px;margin:0;}
.form_page .form_tit{font-size:16px}
.form_page form{font-size:14px}
.form_page .form_box+.form_box{margin-top:30px}
.form_page form input[type=text], .form_page form input[type=file], .form_page form input[type=password], .form_page form select{height:45px;padding:0 10px}
.form_page form .add_input button{width:120px}
.form_page .radi_list li label{padding:15px}
.form_page .ctr_btn{height:50px;margin-top:30px}
.form_page .sm_txt{font-size:15px}
.form_page .pay_gd{display:block;font-size:14px}
.form_page .pay_gd dt{margin-bottom:10px}
.form_page .pay_gd dt.pd_t{padding-top:0}
.form_page .agr_txt{font-size:14px}
}
@media (max-width:380px){
#payMent .reason_list dl{align-items:flex-end}
#payMent .reason_list dl dt{flex-flow:column;gap:10px}
#payMent .reason_list dl dt p b{font-size:15px}
#payMent .reason_list dl dt span{width:25px;height:25px}
#payMent .reason_list dl dd{width:75px;height:75px}
#payMent .reason_list dl dd img{height:30px}
#payMent .pm_mid .b_txt b{font-size:17px}
#payMent .step_list li{width:calc(100%/2)}
#payMent .step_list li .txt span{font-size:15px}
.form_page form .add_input button{width:85px}
}

/* 결제관리 */
#payList .list_top p{margin-bottom:20px;font-size:20px;color:#111;font-family:var(--p-font)}
#payList .list_top p span{color:var(--primary)}
#payList table{font-size:15px;text-align:center}
#payList table thead th{height:auto;border-top:1px solid #111;padding:15px 0;font-weight:600;color:#111}
#payList table td{height:auto;padding:15px 10px;border-top:1px dashed #e1e1e1;border-bottom:none;transition:all .2s}
#payList .top_sch{margin-bottom:35px;padding:20px;border-radius:15px;background-color:#f5f5f5}
#payList .top_sch .tit{margin-bottom:10px;font-weight:600;color:#111}
#payList .top_sch .tit i{margin-right:10px}
#payList .top_sch input[type=text]{border:1px solid #e1e1e1;box-shadow:none;font-size:15px}
#payList .top_sch button{width:85px;height:40px;border:none;border-radius:3px;font-size:15px;font-weight:500;color:#fff;background-color:var(--dark)}
#payList .pg_wrap{display:block;float:none;margin-top:40px;text-align:center;font-size:13px}
#payList .pg_current{border:1px solid var(--dark);background-color:var(--dark)}

@media (max-width:1460px){
#payList .tbl_wrap{overflow-x:scroll;width:100%}
#payList table th, #payList table td{white-space:nowrap}
}
@media (max-width:768px){
#payList .list_top p{font-size:18px}
#payList table{font-size:14px}
#payList table thead th{padding:12px 0}
#payList table td{padding:12px 10px}
}
@media (max-width:480px){
#payList .list_top p{font-size:16px;white-space:pre-line}
#payList .top_sch{padding:15px;border-radius:10px}
#payList .top_sch input[type=text]{font-size:13px}
#payList .top_sch button{width:49px;font-size:14px}
}
@media (max-width:380px){
#payList .top_sch input[type=text]{width:calc(100%/2 - 8px)}
#payList .top_sch button{width:100%;margin-top:5px}
}