정수빈 정수빈 5 hours ago
토스 심사용 페이지 수정, 토스 위젯 수정
@0608cead41571e90e6947fed89221a47d6b104f8
src/main/webapp/publish/css/button.css
--- src/main/webapp/publish/css/button.css
+++ src/main/webapp/publish/css/button.css
@@ -7,6 +7,13 @@
 .form_wrap.center,.form_wrap .center{justify-content:center;}
 .form_wrap.right,.form_wrap .right{justify-content:flex-end;}
 
+.form_wrap .input_message{display:flex;font-size:16px;font-weight:400;color:#222;align-items:center;gap:8px;opacity:0;transition:opacity .3s ease;}
+.form_wrap .input_message.active{opacity:1;}
+.form_wrap .input_message.error{color:var(--red-color);}
+
+.form_wrap .input_message .icon{display:inline-block;width:16px;height:16px;font-family:'GmarketSansBold';font-size:12px;line-height:18px;font-weight:bold;text-align:center;border-radius:100%;background:#222;}
+.form_wrap .input_message.error .icon{background:var(--red-color);color:#fff;}
+
 
 /* 버튼 레이아웃 */
 .btn_wrap{display:flex;justify-content:space-between;gap:8px;}
src/main/webapp/publish/css/content.css
--- src/main/webapp/publish/css/content.css
+++ src/main/webapp/publish/css/content.css
@@ -895,6 +895,7 @@
 .photoBox .txtBox span {font-size: 18px; font-weight: 300; color: #666; padding-top: 10px;display: inline-block;display:none;}
 
 /* 결제내역 */
+
 /* 요금결제내역 */
 .pay_cont .list_info div:last-child button{font-size:14px;}
 .pay_cont .tType1 .calendar_wrap {margin-right: 3px;}
@@ -1082,6 +1083,10 @@
 .charg_cont {background-color: #fff;padding: 40px;border-radius: 10px; min-height: 589px; display: none;}
 .charg_cont.current {display: block;}
 .charg_cont .tab_tit{font-size: 24px; font-weight: bold; color: #222; margin-bottom: 20px; margin-top: 40px;}
+
+/* 토스 */
+.toss_wrap{width:calc(100% + 60px);margin:0 0 0 -30px;}
+
 /* 간편결제 오픈 시 */
 .charg_cont .area_tab{display:flex;gap:25px 30px;flex-wrap:wrap;}
 .charg_cont .area_tab li{position:relative;position:relative;width:calc((100% /4) - 23px);border:1px solid #d5d5d5;border-radius:5px;box-sizing:border-box;}
@@ -1134,9 +1139,9 @@
 .charg_cont .area_tabcont.on{display: block;}
 .charg_cont .area_tabcont .area_tit{font-size: 20px; font-weight: bold; color: #222; margin-left: 5px;}
 .charg_cont .tType1{margin-bottom: 50px;}
-.charg_cont .tType1 select, .charg_cont .tType1 button, .charg_cont .tType1 input{height: 40px; border-radius: 5px; display: inline-block;line-height:40px;}
+.charg_cont .tType1 select, .charg_cont .tType1 button:not(.btn_pay), .charg_cont .tType1 input{height: 40px; border-radius: 5px; display: inline-block;line-height:40px;}
 .charg_cont .tType1 select{width: 220px; padding: 0 20px 0 15px; border: 1px solid #ccc; margin-left: 8px; font-size: 16px; color: #222; font-weight: 300; background-image: url(/publish/images/select_search.png); background-repeat: no-repeat; background-position: 92% center;}
-.area_tabcont .tType1 button {background-color: var(--primary-color); padding: 0 20px; color: #fff; font-weight: normal; letter-spacing: -0.5px; font-size: 17px;}
+.area_tabcont .tType1 button:not(.btn_pay) {background-color: var(--primary-color); padding: 0 20px; color: #fff; font-weight: normal; letter-spacing: -0.5px; font-size: 17px;}
 .charg_cont .tType1 input{border: 1px solid #ccc; margin-right: 5px; vertical-align: middle; margin-left: 8px;}
 /* .charg_cont .tType1 input:nth-child(2) {margin-left: 0;} */
 .charg_cont .tType1 .area_text{ font-size: 16px; font-weight: 300; color: #555;}
@@ -1150,27 +1155,35 @@
 .charg_cont .tType1 .checkbox_wrap input[type="radio"]+label{width: 24px;height: 24px; border-radius: 50%;display: inline-block; vertical-align: middle; margin-bottom: 3px; position: relative; cursor: pointer; vertical-align: middle; margin-right: 5px; margin-top: -2px;padding:0;}
 .charg_cont .tType1 .account_holder {display:inline-block;margin:0 0 0 -15px;font-size:16px;}
 .charg_cont .tType1 .flex{display: flex; align-items: center;}
-.charg_cont .tType1 .flex input{height: 40px; border: none;}
+.charg_cont .tType1 .flex input{height: 40px; border: none; margin:0;}
 .charg_cont .tType1 p.input_in{margin:0 0 0 5px;line-height: 1; font-size: 18px; display: inline-block; vertical-align: middle;}
-.charg_cont .tType1 .flex button{border: 1px solid #b1b1b1; color: #222; font-size: 17px; background-color: #fff; padding: 0 13px; margin-right: 5px;}
-.charg_cont .tType1 tbody tr.charge_content {border-bottom:0 none;}
+.charg_cont .tType1 .flex button{border: 1px solid #d5d5d5; color: #333; font-size: 16px; background-color: #fff; padding: 0 20px;}
 .charg_cont .tType1 tbody tr.charge_content .list_seType1 {width:180px;font-size:18px;border-color:#f2f2f2;background-color:#f2f2f2;cursor:pointer;}
-.charg_cont .tType1 tbody tr td .amount_wrap {display:flex;margin:-5px 0 20px;padding:12px 30px 12px 35px;line-height:56px;justify-content:space-between;border:3px solid #ddd;border-radius:5px;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl {display:flex;letter-spacing:-0.025em;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dt {font-size:20px;font-weight:500;white-space:nowrap;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul {display:flex;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li {position:relative;padding:0 30px;font-size:16px;font-weight:300;white-space:nowrap;color:#555;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li:first-child {padding-left:25px;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li strong {font-size:22px;font-weight:700;color:#222;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li .plus {position:absolute;left:-14px;top:50%;width:27px;height:27px;background:#f5f5f5;border-radius:28px;transform:translateY(-50%);}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li .plus:before {content:'';position:absolute;left:12px;top:6px;width:3px;height:15px;background:#8f8f8f;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li .plus:after {content:'';position:absolute;left:6px;top:12px;width:15px;height:3px;background:#8f8f8f;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li .equal {position:absolute;left:-14px;top:50%;width:27px;height:27px;background:#f5f5f5;border-radius:28px;transform:translateY(-50%);}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li .equal:before {content:'';position:absolute;left:6px;top:9px;width:15px;height:3px;background:#8f8f8f;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li .equal:after {content:'';position:absolute;left:6px;top:15px;width:15px;height:3px;background:#8f8f8f;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li.total {padding-right:0;font-size:20px;color:#222;}
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li.total strong {color:#f43131;}
-.charg_cont .tType1 tbody tr td .amount_wrap .btnType {width:210px;height:56px;font-size:20px;}
+
+.charg_cont .charge_content{border-bottom:1px solid #e5e5e5;}
+.charg_cont .charge_content .flex{flex-wrap:wrap;gap:8px;}
+.charg_cont .money_form_wrap{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:8px;}
+.charg_cont .money_form_wrap .money_input.error{border:1px solid var(--red-color);}
+
+.amount_wrap {display:flex;margin:-5px 0 20px;padding:12px 30px 12px 35px;line-height:56px;justify-content:space-between;border:3px solid #ddd;border-radius:5px;}
+.amount_wrap dl {display:flex;letter-spacing:-0.025em;}
+.amount_wrap dl dt {font-size:20px;font-weight:500;white-space:nowrap;}
+.amount_wrap dl dd ul {display:flex;}
+.amount_wrap dl dd ul li {position:relative;padding:0 30px;font-size:17px;font-weight:300;white-space:nowrap;color:#555;}
+.amount_wrap dl dd ul li:first-child {padding-left:25px;}
+.amount_wrap dl dd ul li strong {font-size:22px;font-weight:700;color:#000;margin:0 2px 0 0;}
+.amount_wrap dl dd ul li .plus {position:absolute;left:-14px;top:50%;width:27px;height:27px;background:#f5f5f5;border-radius:28px;transform:translateY(-50%);}
+.amount_wrap dl dd ul li .plus:before {content:'';position:absolute;left:12px;top:6px;width:3px;height:15px;background:#8f8f8f;}
+.amount_wrap dl dd ul li .plus:after {content:'';position:absolute;left:6px;top:12px;width:15px;height:3px;background:#8f8f8f;}
+.amount_wrap dl dd ul li .equal {position:absolute;left:-14px;top:50%;width:27px;height:27px;background:#f5f5f5;border-radius:28px;transform:translateY(-50%);}
+.amount_wrap dl dd ul li .equal:before {content:'';position:absolute;left:6px;top:9px;width:15px;height:3px;background:#8f8f8f;}
+.amount_wrap dl dd ul li .equal:after {content:'';position:absolute;left:6px;top:15px;width:15px;height:3px;background:#8f8f8f;}
+.amount_wrap dl dd ul li.total {padding-right:0;font-size:20px;color:#222;}
+.amount_wrap dl dd ul li.total strong {color:#f43131;}
+.amount_wrap .btnType {width:210px;height:56px;font-size:20px;font-weight:600;}
+
+.charg_cont .amount_wrap{border:0;margin:0;padding:0 15px;}
+
 
 .info_bank{display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;}
 .info_bank li{width: calc((100% - 33px) / 3); display: flex; margin-bottom: 11px; height: 62px; align-items: center; justify-content: center; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); border-radius: 5px;} 
src/main/webapp/publish/css/style.css
--- src/main/webapp/publish/css/style.css
+++ src/main/webapp/publish/css/style.css
@@ -1,407 +1,419 @@
-:root{
-  --primary-color:#176EE5;
-  --primary-color-hover:#1956B4;
-  --primary-light-color:#DBF0FA;
-  --primary-light-color-hover:#93D4F4;
-  --primary-lighter-color:#f4fbff;
-  --primary-dark-color:#1956B4;
-  --primary-dark-color-hover:#1A4B8E;
-  
-  --secondary-color:#4BB7ED;
-  --secondary-color-hover:#3C9DCE;
-  --secondary-light-color:#DBF0FA;
-  --secondary-light-color-hover:#93D4F4;
-  
-  --red-color:#F43131;
-  --red-color-hover:#D70202;
-  --red-light-color:#ffe5e5;
-  
-  --green-color:#15983A;
-  --green-color-hover:#0E9A1F;
-  
-  --gray-color:#888888;
-  --gray-color-hover:#666666;
-  --lightgray-color:#999999;
-  --lightgray-color-hover:#a3a3a3;
-  
-  --gray-border:#D5D5D5;
-  --darkgray-border:#B9B9B9;
-  --primary-light-border:#B1C6EE;
-  
-  --lightergray-bg:#f8f8f8;
-  --lightgray-bg:#f2f2f2;
-  --lightgray-bg-hover:#fafafa;
-}
-
-/* =============================================
-   폰트 기본
-============================================= */
-.fwLg{font-weight:300!important;}
-.fwRg{font-weight:400!important;}
-.fwMd{font-weight:500!important;}
-.fwBold{font-weight:700!important;}
-
-.c_white{color:#fff!important;}
-.c_002c9a{color:var(--primary-color)!important;}
-.c_e40000{color:#e40000!important;}
-.c_999999{color:#999!important;}
-.c_ffa200{color:var(--secondary-color)!important;}
-.c_19b32b{color:#19b32b!important;}
-.c_000{color:#000!important;}
-.c_222{color:#222!important;}
-.c_666{color:#666!important;}
-
-.color_red{color:#F43131;}
-
-/* =============================================
-   폰트 강조(GmarketSans Bold)
-============================================= */
-.c_666_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#666!important;}
-.c_002c9a_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:var(--primary-color)!important;}
-.c_e40000_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#e40000!important;}
-.c_222_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#222!important;}
-
-.sub_font{font-family:'GmarketSansBold';}
-
-/* =============================================
-   테이블 유틸리티
-============================================= */
-.table{display:table;width:100%;}
-.table_cell{display:table-cell;vertical-align:middle;}
-.table_cell1{position:relative;display:table-cell;vertical-align:top;}
-.vMiddle{vertical-align:middle;}
-.tRight{text-align:right!important;}
-.tLeft{text-align:left!important;}
-
-/* 기타 반복 사용 */
-.SortLine{position:relative;}
-.SortLine::before{position:absolute;top:50%;left:0;display:block;content:"";width:1px;height:12px;background:#b0b0b0;transform:translateY(-50%);}
-.text_deco{position:relative;padding-right:40px;}
-.text_deco::after{position:absolute;top:50%;left:0;content:"";width:20px;height:20px;border:5px solid var(--secondary-light-color);border-radius:50%;background-color:#fff;transform:translateY(-50%);}
-.text_deco2{position:relative;padding-right:16px;}
-.text_deco2::after{position:absolute;top:50%;left:0;content:"";width:4px;height:4px;border-radius:50%;background-color:#23428b;transform:translateY(-50%);}
-.text_deco3{position:relative;padding-right:16px;}
-.text_deco3::after{position:absolute;top:50%;left:0;content:"";width:5px;height:17px;border-radius:2.5px;background-color:var(--secondary-light-color);transform:translateY(-50%);}
-.font_ellipsis>p{display:-webkit-inline-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-weight:300;line-break:anywhere;text-align:left;}
-.font_ellipsis>a>p{display:-webkit-inline-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-weight:400;line-break:anywhere;text-align:left;}
-
-/* ===================== SORT BUTTON / CASE COUNT ===================== */
-.sort_wrap{display:inline-block;}
-.sort_wrap button:nth-child(1) img{margin-left:3px;}
-.sort_wrap button:nth-child(2) img{margin-left:-5px;}
-.sort_wrap button img{margin-bottom:5px;}
-
-.sortBtn{margin:-3px 0 0;background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
-.sortBtnDesc{margin:-2px 0 0;background:url(/publish/images/sortDown.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
-.sortBtnAsc{background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
-
-.numOfCase{position:absolute;top:57px;right:0;}
-.numOfCase p{display:inline-block;font-size:13px;}
-.numOfCase p:first-child span{font-weight:500;color:#e40000;}
-.numOfCase p:last-child span{font-weight:500;color:var(--primary-color);}
-
-/* ========================================================================== */
-/*  INPUT / SELECT — GLOBAL UNIFIED STYLE                                     */
-/* ========================================================================== */
-
-.form_area{display:flex;align-items:center;gap:8px;}
-.form_area.left{justify-content:flex-start;}
-.form_area.right{justify-content:flex-end;}
-
-.form_area.column{flex-direction:column;}
-
-select{border:1px solid #e5e5e5;vertical-align:middle;font-family:'Pretendard';font-weight:300;font-size:16px;}
-select.selType1{padding:0 25px 0 10px;height:34px;border:1px solid #d5d5d5;border-radius:3px;background-image:url(/publish/images/select_search2.png);background-repeat:no-repeat;background-position:right 5px top 50%;color:#777;}
-select.selType2{margin-left:2px;align-self:center;padding-left:12px;width:125px;height:36px;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;background-image:url(/publish/images/select_search.png);background-repeat:no-repeat;background-position:92% center;font-size:16px;color:#666;}
-.list_selType1:focus{outline:none;}
-select.list_selType1{padding:0 15px;width:100%;border:none;background-color:transparent;background-image:url(/publish/images/mem/list_select.png);background-repeat:no-repeat;background-position:right 0 top 50%;font-family:'Pretendard';font-size:18px;color:#222;cursor:pointer;}
-.select_gray_type{padding:0 20px;width:340px;height:40px;border-radius:5px;border:0;background-color:#f2f2f2;background-image:url(../images/select_search.png);background-repeat:no-repeat;background-position:94% center;font-weight:400;font-size:16px;color:#222;}
-
-input{border:0;vertical-align:middle;box-sizing:border-box;font-family:'Pretendard';}
-input:focus{outline:none;}
-input::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
-input:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
-input[type="text"]{padding:0 10px;border-radius:3px;font-size:16px;}
-input[type="text"].readonly::placeholder{color:#222!important;}
-input[type="text"].readonly:-ms-input-placeholder{color:#222!important;}
-input[type="text"].inputLight::placeholder{color:#a6a6a6!important;}
-input[type="text"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
-input[type="password"]{padding:0 10px;border-radius:3px;font-size:16px;}
-input[type="password"].inputLight::placeholder{color:#a6a6a6!important;}
-input[type="password"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
-input.input_text{border:1px solid #d5d5d5;}
-
-input[type="checkbox"]{width:16px;height:16px;border:1px solid #d6d8da;}
-input[type="radio"]{margin:2px 3px 0 0;}
-input[type="radio"]+label{margin-right:18px;font-size:16px;vertical-align:middle;}
-input[type="radio"].radio_big{margin:0;width:16px;height:16px;}
-
-textarea{padding:15px;width:100%;box-sizing:border-box;font-family:'Pretendard';font-weight:300;font-size:16px;color:#666;}
-textarea::-webkit-scrollbar{width:7px;}
-textarea::-webkit-scrollbar-thumb{background:#c3c6c7;border-radius:3px;}
-textarea::-webkit-scrollbar-thumb:active{background:#808080;}
-textarea::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
-textarea:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
-.textarea_gray_type{padding:24px 20px;border-radius:5px;background-color:#f2f2f2;border:none;}
-
-/* =============================================
-   인풋 클리어 버튼 제거 (IE 대응)
-============================================= */
-input[type=text]::-ms-celar,
-input[type=password]::-ms-clear,
-input[type=email]::-ms-clear,
-input[type=number]::-ms-clear,
-input[type=tel]::-ms-clear{display:none;width:0;height:0;}
-
-input[type=text]::-ms-reveal,
-input[type=password]::-ms-reveal,
-input[type=email]::-ms-reveal,
-input[type=number]::-ms-reveal,
-input[type=tel]::-ms-reveal{display:none;width:0;height:0;}
-
-.w100{width:100%;}
-.h100{height:100%;}
-
-
-
-/* =============================================
-   테이블 타입
-============================================= */
-
-.tType1 {width: 100%;text-align: left;table-layout: fixed;}
-.tType1 tbody tr {border-bottom: 1px solid #e5e5e5;}
-.tType1 tbody tr:first-child{border-top: 2px solid #000;}
-.tType1 tbody tr th {min-width: 75px; height: 55px; vertical-align: middle;font-size: 17px; text-align: left;}
-.tType1 tbody tr th .essential {display:inline-block;margin:4px 2px 0 0;vertical-align:top;color:#e40000;}
-.tType1 tbody tr th.vTop {vertical-align: top; padding-top: 20px; line-height: 1.2;}
-.tType1 tbody tr td {vertical-align: middle;font-weight: 300;line-height: 1.3; padding: 10px 0;}
-.tType1 tbody tr td p {line-height: 1.4;}
-.tType1 tbody tr td.send_cf {font-size: 18px;} 
-.tType1 tbody tr td.putText {padding: 10px 0;}
-.tType1 tbody tr td.putText>div {display: flex; width: 100%;}
-.tType1 tbody tr td.putText>p:last-child {color: #555; font-size: 14px; padding-top: 10px;}
-.tType1 tbody tr td.putText .put_left {float: left;width: calc(100% - 26%); min-width: 420px; padding: 0 10px; border:1px solid #f2f2f2;box-sizing: border-box; border-radius: 5px; background-color: #f2f2f2; position: relative; /*max-height: 300px;*/}
-.tType1 tbody tr td.putText .put_left .text_length {position: relative;min-height: 28px;margin:0 0 15px;border-radius: 0 0 5px 5px;}
-.tType1 tbody tr td.putText .put_left .text_length>div:first-child {font-size: 15px; padding-left: 10px;}
-.tType1 tbody tr td.putText .put_left .text_length>div:last-child {position: absolute;bottom: 0;right: 10px;}
-.tType1 tbody tr td.putText .put_left .text_length p {display: inline-block;padding-right: 10px;}
-.tType1 tbody tr td.putText .put_right { width: 26%; max-width: 200px; position: relative;}
-.tType1 tbody tr td.putText .put_right>button {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
-.tType1 tbody tr td.putText .put_right .btn_popup_wrap button:not(.btn_close) {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
-.tType1 tbody tr td.putText button .qmMark {background-image: url(/publish/images/content/qmIcon_s.png); width: 19px; height: 19px; margin-left: 5px; margin-top: -2px;}
-.tType1 tbody tr td.putText .put_right .send_btnWrap {position: absolute;bottom: 0;right:0;width: calc(100% - 10px);}
-.tType1 tbody tr td.putText .put_right .send_btnWrap button {width: 48.5%;}
-.tType1 tbody tr td.putText textarea {height: 160px; border: none;margin: 0;padding:0 15px;border-radius: 5px 5px 0 0;outline: 0;background-color: transparent; font-size: 15px;}
-.tType1 tbody tr td.putText .put_left.short textarea {height: 190px;margin:10px 0;padding:0 5px;}
-.tType1 tbody tr td.putText .put_left.short textarea::placeholder {color: #b5b5b5;}
-.tType1 tbody tr td.putText .put_left.short.on {border: 1px solid var(--primary-color);border-radius: 5px;background-color: #eef2f9 !important;}
-.tType1 tbody tr td.putText .put_left.long textarea {height: 380px;}
-.tType1 tbody tr td.putText .put_left.long.on {border: 1px solid #12bec9;border-radius: 5px;background-color: #eef5f9 !important;}
-.tType1 tbody tr td.putText .put_left.photo.on {border: 1px solid #e26ba9;border-radius: 5px;background-color: #f8f1f5 !important;}
-.tType1 tbody tr.msg_title {display:none;}
-.tType1 tbody tr.msg_title.active {display:table-row;}
-.tType1 tbody tr.msg_title td .title_wrap .textbox {display:none;margin:10px 0 0;}
-.tType1 tbody tr.msg_title td .title_wrap .textbox.active {display:block;}
-
-.tType1_title {font-size: 20px; font-weight: 600; position: relative; height: 40px;}
-.tType1_title button {position: absolute;top: 22%; right: 0; transform: translateY(-50%); background-color: var(--primary-color); height: 40px; padding: 0 15px; color: #fff;}
-.tType1_title>span {font-size: 16px; font-weight: 300; color: #666;}
-.tType1 tbody tr td.send_list {position: relative;display: flex; justify-content: space-between;}
-.tType1 tbody tr td.send_list .list_left, .tType1 tbody tr td.send_list .list_right {width: calc(100%/2 - 25px);min-width: 290px;}
-.tType1 tbody tr td.send_list .list_left {left: 0;position: relative;}
-.tType1 tbody tr td.send_list .list_left .add_num {height: 90px;}
-.tType1 tbody tr td.send_list .list_left .add_num input[type="text"] {width: calc(100% - 97px);min-width: 200px;}
-.tType1 tbody tr td.send_list .list_left .add_num input[type="text"]::placeholder {color: #a6a6a6; font-weight: 300;}
-.tType1 tbody tr td.send_list .list_left .add_num>span {color: #e40000;font-size: 13px;font-weight: 400;line-height: 39px;}
-.tType1 tbody tr td .text_req {display: inline-block; color: #999; font-size: 17px; font-weight: 300; vertical-align: middle;}
-
-
-.tType1 tbody tr td.send_list .list_right {right: 0;}
-.tType1 tbody tr td.send_list .list_right .list_btnWrap {display: flex;flex-flow: wrap;justify-content: space-between;}
-.tType1 tbody tr td.send_list .list_right .list_btnWrap button {height: 37px;width: calc(100%/3 - 3px);margin-bottom: 5px;}
-
-.tType1 tbody tr td.send_list .add_btn {position: absolute; right: 0; top: 0;}
-.tType1 tbody tr td.send_list .add_btn button {min-width: 95px; height: 32px; font-size: 14px;}
-.tType1 tbody tr td.send_list .add_remove {text-align: center;margin: 40px 4px 0 4px;align-self: center;}
-.tType1 tbody tr td.send_list .add_remove button {display: block;max-width: 44px;padding: 4px 6px; border: 1px solid #b1b1b1;border-radius: 5px; margin: 0 auto;margin-bottom: 5px;font-size: 12px;}
-.tType1 tbody tr td.send_list .add_remove button:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
-.tType1 tbody tr td.send_list .add_remove button.add i {background-image:url(/publish/images/content/add_btn.png);width: 11px;height: 10px;display: block;margin: 0 auto;}
-.tType1 tbody tr td.send_list .add_remove button.remove i {background-image:url(/publish/images/content/remove_btn.png);width: 11px;height: 10px;display: block;margin: 0 auto;}
-
-.tType1 tbody tr th.billingAmount {position: relative;line-height: 1;vertical-align: middle;}
-.tType1 tbody tr th.billingAmount>div {background-color: #f2f2f2;border-radius: 5px;padding: 23px 30px;margin: 20px 0; position: relative;}
-.tType1 tbody tr th.billingAmount>div .final_pay {position: relative; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
-.tType1 tbody tr th.billingAmount>div p:first-child {font-size: 20px;font-weight: 500;}
-.tType1 tbody tr th.billingAmount>div p:last-child {font-size: 20px;}
-.tType1 tbody tr th.billingAmount>div p span#totalPriceTxt {font-size: 24px;color: #e40000;font-weight: 500;}
-.tType1 tbody tr th.billingAmount>div p span:last-child {font-size: 16px;color: #888;font-weight: 300;}
-.tType1 tbody tr th.billingAmount .pay_info_list p {float:left;line-height:35px;}
-.tType1 tbody tr th.billingAmount .pay_info_list .info {float:left;margin:0 0 0 15px;padding:8px 15px 10px;font-size:16px;font-weight:300;color:#555;background:#e5e5e5;border-radius:5px;box-sizing:border-box;}
-.tType1 tbody tr th.billingAmount .pay_info_list .info strong {font-size:18px;font-weight:700;color:var(--primary-color);}
-.tType1 tbody tr th.billingAmount .pay_info_list .info span {margin:0 8px 0 7px;} 
-.tType1 tbody tr th.billingAmount button.cal_btn {position: absolute;right: 0; top: 50%;transform: translateY(-50%);background-color: var(--secondary-color);width: 88px;height: 32px;border-radius: 5px;}
-.tType1 tbody tr th.billingAmount button.cal_btn:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
-.tType1 tbody tr th.billingAmount button.cal_btn i {background-image: url(/publish/images/content/calIcon.png);width: 12px;height: 16px;margin: 0 3px 2px 0;}
-.tType1 tbody tr th.billingAmount .pay_type {background-color: #fff; border-radius: 5px 5px 0 0; height: 60px; padding: 12px 13px; box-sizing: border-box;}
-.tType1 tbody tr th.billingAmount .pay_type button.btn_event_cash{width: 100px;}
-.tType1 tbody tr th.billingAmount .pay_type:last-child {margin-top: 10px;}
-.tType1 tbody tr th.billingAmount .pay_type>div:first-child {float: left;margin:0 0 0 5px;}
-.tType1 tbody tr th.billingAmount .pay_type>div .won {display:inline-block;margin:9px 11px 0 -34px;font-size:16px;vertical-align:top;color:#9a9a9a;}
-.tType1 tbody tr th.billingAmount .pay_type>div:last-child {float: right;}
-.tType1 tbody tr th.billingAmount .pay_type>div:only-child{float: left;}
-.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label {font-size: 16px;}
-.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label span {font-size: 17px; font-weight: 700;}
-.tType1 tbody tr th.billingAmount .pay_type input[type="text"] {width: 210px; height: 36px; padding:0 37px 2px 16px; border-radius: 5px;text-align:right;}
-.tType1 tbody tr th.billingAmount .pay_type input[type="text"]::placeholder {color: #000; font-size: 16px; text-align: right; font-weight: 500;}
-.tType1 tbody tr th.billingAmount .pay_type button {width: 78px; margin-left: 5px;}
-
-.tType1 tbody tr td.check_num>div {display: inline-block;}
-.tType1 tbody tr td.check_num>div button {height: 40px; padding: 0 5px;}
-.tType1 tbody input[type="text"] {height: 40px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px;line-height:38px;}
-.tType1 tbody input[type="password"] {height: 50px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px; font-size: 16px;}
-.tType1 tbody select.sel_number {width: 340px; height: 40px; padding: 0 20px; background-color: #f2f2f2;border-radius: 5px; border: 0;color: var(--primary-color);font-weight: 400;font-size: 16px;background-image: url(/publish/images/select_search.png); background-repeat: no-repeat; background-position: 94% center;}
-.tType1 tbody input[type="text"]::placeholder {color: #a6a6a6;}
-.tType1 tbody input:disabled {background-color: #dedede;}
-
-
-.tType3 {width: 100%; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box;}
-.tType3.payDetail {margin-bottom: 50px;}
-.tType3.usageDetail {margin-bottom: 50px;}
-.tType3.payDetail {margin: -15px 0 10px 0;}
-.payDetail .tType3_hd>div:nth-child(1), .payDetail .tType3_bd>div:nth-child(1) {width: 40px;}
-.payDetail .tType3_hd>div:nth-child(2), .payDetail .tType3_bd>div:nth-child(2) {width: 20%;}
-.payDetail .tType3_hd>div:nth-child(3), .payDetail .tType3_bd>div:nth-child(3) {width: 17%;}
-.payDetail .tType3_hd>div:nth-child(4), .payDetail .tType3_bd>div:nth-child(4) {width: 15%;}
-.payDetail .tType3_hd>div:nth-child(5), .payDetail .tType3_bd>div:nth-child(5) {width: 17%;}
-.payDetail .tType3_hd>div:nth-child(6), .payDetail .tType3_bd>div:nth-child(6) {width: 15%;}
-.payDetail .tType3_hd>div:nth-child(7), .payDetail .tType3_bd>div:nth-child(7) {width: 17%;}
-
-.table_cont {display: none;}
-.table_cont.current {display: block;}
-
-.tType3 .tType3_hd {position:relative;display:flex;height:36px;font-size:15px;background:#f8f8f8;text-align:center;border-radius:5px 5px 0 0;box-sizing:border-box;z-index:0;}
-.tType3 .tType3_hd>div {display:flex;border-left:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;box-sizing:border-box;justify-content:center;align-items:center;gap:8px;}
-.tType3 .tType3_hd>div:first-child {border-left:0;} 
-.tType3 .font_ellipsis {position:relative;}
-
-.tType3 .tType3_bd {display:flex;height:40px;box-sizing:border-box;text-align:center;}
-.tType3 .tType3_bd span {font-weight:400;}
-.tType3 .tType3_bd>div {height:40px;padding:0 10px;border-bottom:1px solid #d5d5d5;border-left:1px solid #d5d5d5;text-align:center;font-size:15px;color:#555;font-weight:300;box-sizing:border-box;}
-.tType3 .tType3_bd>div:first-child {border-left: 0;}
-.tType3 .tType3_bd:last-child>div {border-bottom: 0;}
-.tType3 .tType3_bd .table_certify {font-weight: 400;}
-.tType3 .tType3_bd .input_wrap2 input[type="text"] {text-align: center; background-color: #f2f2f2; width: calc(100% - 20px); height: 32px; border-radius: 5px; color: #555; vertical-align: baseline;}
-.tType3 .tType3_bd .input_wrap2 input[type="text"]::placeholder {color: #555;}
-.tType3 .tType3_bd .input_wrap2 input[type="text"]:-ms-input-placeholder {color: #555;}
-.tType3 .tType3_bd .btnType14 {height: 28px; padding: 0 11.5px; vertical-align: baseline; line-height: 28px;}
-.tType3 .tType3_bd input[type="radio"] {margin-top: 0; margin-right: 0; vertical-align: revert;}
-
-.tb_wrap{position:relative;width:100%;min-height:430px;border:1px solid #d5d5d5;border-radius:5px;margin-bottom:10px;box-sizing: border-box;border-bottom:0 none;overflow:hidden;}
-.tb_wrap:after {position:absolute;content:'';width:calc(100% - 4px);height:1px;background:#d5d5d5;left:2px;bottom:0;}
-.tType4{width:100%;table-layout:fixed;}
-.tType4 thead{position:relative;background:#f8f8f8;z-index:0;}
-.tType4 thead tr:only-child th{height:36px;}
-.tType4 thead th{position:relative;height:25px;border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;font-size:15px;font-weight:400;vertical-align:middle;z-index:1;}
-.tType4 thead th:last-child{border-right: 0;}
-.tType4 .sort_wrap{display: inline-block;}
-.tType4 tbody td{text-align: center; font-size: 15px; color: #666; font-weight: 400; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; height: 38px; vertical-align: middle; padding: 0 10px; box-sizing: border-box;}
-.tType4 tbody td.tb_tit{text-align: left; position: relative;}
-.tType4 tbody td.input_wrap2 input[type="text"] {text-align: center;background-color: #f2f2f2;width: calc(100% - 20px);height: 32px;border-radius: 5px;border: 1px solid #f2f2f2;margin-right: 0;color: #555;}
-.tType4 tbody tr:only-child:last-child td{border-bottom: 1px solid #ccc;}
-.tType4 tbody td:last-child{border-right: 0;}
-.tType4 tbody td>p{width: 100%; line-height: 38px; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.5px; overflow: hidden;margin: 0 auto;}
-.tType4 tbody td span {font-weight: 400;}
-.tType4 td input[type="text"]{height: 28px; display: inline-block; border: 1px solid #e5e5e5; margin-right: 5px;}
-.tType4 tbody .btnType14 {height: 28px;}
-.tType4 .memo_text {width: calc(100% - 35px); margin-right: 5px; display: inline-block; text-align: left; vertical-align: inherit;}
-.tType4 tbody td span.textReject {line-height:28px;}
-.tType4 tbody td .btnTypeReject {margin:0 0 0 3px;line-height:26px;letter-spacing:0;text-align:center;vertical-align:top;}
-.tType4 tbody td.result_cont a {text-align: left!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
-.tType4 tbody td.result_cont .result_tit { }
-.tType4 tbody td .cancel_date {font-size:14px; color:#666; display: block;}
-
-/* =============================================
-   탭 타입
-============================================= */
-.top_content {display: none;}
-.top_content.current {display: block;}
-.custom_content {display: none;}
-.custom_content.current {display: block;}
-.bottom_content {display: none;}
-.bottom_content.current {display: block;}
-.popup_cont {display: none;}
-.popup_cont.current {display: block;}
-.history_cont {display: none;}
-.history_cont.current {display: block;}
-.alarm_cont {display: none;}
-.alarm_cont.current {display: block;}
-.pay_cont {display: none;}
-.pay_cont.current {display: block;}
-.fee_cont {display: none;}
-.fee_cont.current {display: block;}
-
-.tabType1{display:flex;width:100%;margin:0 0 20px;background:#fff;border-radius:10px;border:1px solid var(--primary-color);text-align:center;overflow:hidden;}
-.tabType1 li{position:relative;flex:1;}
-.tabType1 li button{position:relative;width:100%;height:60px;padding:13px 0;font-size:18px;color:#222;border-radius:8px;z-index:1;}
-.tabType1 li.active button {border:1px solid var(--primary-color);background-color:var(--primary-color);font-weight:600;color:#fff;}
-
-.mypage_content .tabType1 {background-color: #f4f4f5; color: #222; margin-top: 40px;}
-.mypage_content .tabType1 li.active button {background-color: var(--secondary-light-color); color: #222;}
-
-.pay_tab_wrap .tabType1 {background-color: #f4f4f5; color: #222; margin: 30px 0 ;border:0 none;border-radius:5px;}
-.pay_tab_wrap .tabType1 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background-color: #d5d5d5;}
-.pay_tab_wrap .tabType1 li:last-child::after {content: none;}
-.pay_tab_wrap .tabType1 li button{height:53px;font-size:16px;}
-.pay_tab_wrap .tabType1 li:first-child button {border-radius:5px 0 0 5px;}
-.pay_tab_wrap .tabType1 li:last-child button {border-radius:0 5px 5px 0;}
-.pay_tab_wrap .tabType1 li.active {background-color:transparent;}
-.pay_tab_wrap .tabType1 li.active::after {content: none;}
-.pay_tab_wrap .tabType1 li.active button {background-color: var(--secondary-color); border:1px solid var(--secondary-color-hover);color: #FFF;border-radius:5px;}
-.pay_tab_wrap .tabType1 li.active button:before {display:none;}
-.pay_tab_wrap .tabType1 li.active button:after {display:none;}
-
-.tabType2 {position:relative;display:flex;width:calc(100% - 600px);margin:0 0 20px 0;background:#fff;border-radius:10px 10px 0 0;text-align:center;}
-.tabType2::after {position:absolute;content: "";width:calc(100% + 600px);height:2px;background:#1E3862;bottom:0;left:0;}
-.tabType2 li {flex-basis:calc(100% /4);min-width: 200px;}
-.tabType2 li button {width: 100%;padding:13px 0;font-size:20px;border-left:1px solid #f2f2f2;background:#fff;}
-.tabType2 li:nth-child(3) button {border-left:0;}
-.tabType2 li:first-child button {border-left:0;border-radius:10px 0 0 0;}
-.tabType2 li:last-child button {border-radius:0 10px 0 0;}
-.tabType2 li.active button {background:#1E3862;border-radius:10px 10px 0 0;color:#fff;border-left:1px solid transparent;}
-
-.tabType4 {background-color: #fff;width: 100%;border-radius: 10px; display: flex;text-align: center;margin-bottom: 20px;border:1px solid var(--primary-color);overflow:hidden;}
-.tabType4 li {flex: 1; position: relative;}
-.tabType4 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background-color: #d5d5d5;}
-.tabType4 li:last-child::after {content: none;}
-.tabType4 li.active::after {content: none;}
-.tabType4 li button {position:relative;width: 100%; height: 50px; padding: 12px 0;font-size: 18px; letter-spacing: -0.5px;}
-.tabType4 li.active button {color:#fff;border:1px solid var(--primary-color);background-color:var(--primary-color);border-radius:8px;}
-/* .tabType4 li.active button:before {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;} */
-/* .tabType4 li.active button:after {content:'';position:absolute;left:-5px;top:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;} */
-.tabType4.tabTwo li {flex-basis: calc(100%/2);}
-
-.tabType5 {background-color: #fff;width: 100%; border: 1px solid #dfdfdf; border-bottom: 1px solid #46484a; border-radius: 5px 5px 0 0; display: flex;text-align: center;}
-.tabType5 li {flex-basis: calc(100%/3); position: relative;}
-.tabType5 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: #c7c8c8;}
-.tabType5 li:last-child::after {content: none;}
-.tabType5 li.active::after {content: none;}
-.tabType5 li button {width: 100%;height: 45px; font-size: 18px;}
-.tabType5 li.active button {background-color: #46484a;border-radius: 5px 5px 0 0;color: #fff; font-weight: 300;}
-
-.tabType6 {background-color: #fff;width: 100%;border-bottom: 1px solid #e5e5e5;  display: flex;text-align: center;}
-.tabType6 li {flex-basis: calc(100%/2);}
-.tabType6 li button {width: 100%;height: 35px; font-size: 16px;border: 1px solid #dfdfdf; border-bottom: 1px solid #e5e5e5; border-radius: 5px 5px 0 0;}
-.tabType6 li.active button {background-color: #c8c8c8;border-radius: 5px 5px 0 0; border: 1px solid #c8c8c8;}
-.pay_refund_cont .pay_tType1 {margin-top:-20px;}
-.pay_refund_cont .pay_tType1 tbody tr:first-child {border-top:0 none;}
-
-/* =============================================
-   캘린더
-============================================= */
-.calendar_wrap {position:relative;display: inline-block;}
-.calendar_wrap>span {font-weight: 500;}
-.calendar_wrap>input[type="text"] {height: 36px;line-height: 36px;width: 140px;border: 1px solid #d5d5d5;font-size: 16px;font-weight: 300;padding: 0 5px;color: #777;background: url(/publish/images/calendar/calendarIcon2.png) #fff no-repeat right 7px center;}
-.calendar_in {position: relative;display: inline;}
-.calendar_in>button {  border: 1px solid transparent !important; height: 26px; margin: 1px 0 0 0; padding: 0; text-indent: -9999em; width: 26px; vertical-align: middle; position: absolute; right: 8px;top: 57%; transform: translateY(-50%);}
-.calendar_in .calendar-frame {border: 0;height: 290px;width: 320px;}
+:root{
+  --primary-color:#176EE5;
+  --primary-color-hover:#1956B4;
+  --primary-light-color:#DBF0FA;
+  --primary-light-color-hover:#93D4F4;
+  --primary-lighter-color:#f4fbff;
+  --primary-dark-color:#1956B4;
+  --primary-dark-color-hover:#1A4B8E;
+  
+  --secondary-color:#4BB7ED;
+  --secondary-color-hover:#3C9DCE;
+  --secondary-light-color:#DBF0FA;
+  --secondary-light-color-hover:#93D4F4;
+  
+  --red-color:#F43131;
+  --red-color-hover:#D70202;
+  --red-light-color:#ffe5e5;
+  
+  --green-color:#15983A;
+  --green-color-hover:#0E9A1F;
+  
+  --blue-color:#176EE5;
+  --blue-color-hover:#1956B4;
+  
+  --gray-color:#888888;
+  --gray-color-hover:#666666;
+  --lightgray-color:#999999;
+  --lightgray-color-hover:#a3a3a3;
+  
+  --gray-border:#D5D5D5;
+  --darkgray-border:#B9B9B9;
+  --primary-light-border:#B1C6EE;
+  
+  --lightergray-bg:#f8f8f8;
+  --lightgray-bg:#f2f2f2;
+  --lightgray-bg-hover:#fafafa;
+}
+
+/* =============================================
+   폰트 기본
+============================================= */
+.fwLg{font-weight:300!important;}
+.fwRg{font-weight:400!important;}
+.fwMd{font-weight:500!important;}
+.fwBold{font-weight:700!important;}
+
+.fs_18{font-size:18px;font-weight:bold;}
+.fs_16{font-size:16px;font-weight:bold;}
+.fs_14{font-size:14px;}
+
+.c_white{color:#fff!important;}
+.c_002c9a{color:var(--primary-color)!important;}
+.c_e40000{color:#e40000!important;}
+.c_999999{color:#999!important;}
+.c_ffa200{color:var(--secondary-color)!important;}
+.c_19b32b{color:#19b32b!important;}
+.c_000{color:#000!important;}
+.c_222{color:#222!important;}
+.c_666{color:#666!important;}
+
+.color_red{color:var(--red-color);}
+.color_blue{color:var(--blue-color);}
+.color_green{color:var(--green-color);}
+
+/* =============================================
+   폰트 강조(GmarketSans Bold)
+============================================= */
+.c_666_g{padding:0 4px 0 0;font-family:
+;font-size:26px;color:#666!important;}
+.c_002c9a_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:var(--primary-color)!important;}
+.c_e40000_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#e40000!important;}
+.c_222_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#222!important;}
+
+.sub_font{font-family:'GmarketSansBold';}
+
+/* =============================================
+   테이블 유틸리티
+============================================= */
+.table{display:table;width:100%;}
+.table_cell{display:table-cell;vertical-align:middle;}
+.table_cell1{position:relative;display:table-cell;vertical-align:top;}
+.vMiddle{vertical-align:middle;}
+.tRight{text-align:right!important;}
+.tLeft{text-align:left!important;}
+
+/* 기타 반복 사용 */
+.SortLine{position:relative;}
+.SortLine::before{position:absolute;top:50%;left:0;display:block;content:"";width:1px;height:12px;background:#b0b0b0;transform:translateY(-50%);}
+.text_deco{position:relative;padding-right:40px;}
+.text_deco::after{position:absolute;top:50%;left:0;content:"";width:20px;height:20px;border:5px solid var(--secondary-light-color);border-radius:50%;background-color:#fff;transform:translateY(-50%);}
+.text_deco2{position:relative;padding-right:16px;}
+.text_deco2::after{position:absolute;top:50%;left:0;content:"";width:4px;height:4px;border-radius:50%;background-color:#23428b;transform:translateY(-50%);}
+.text_deco3{position:relative;padding-right:16px;}
+.text_deco3::after{position:absolute;top:50%;left:0;content:"";width:5px;height:17px;border-radius:2.5px;background-color:var(--secondary-light-color);transform:translateY(-50%);}
+.font_ellipsis>p{display:-webkit-inline-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-weight:300;line-break:anywhere;text-align:left;}
+.font_ellipsis>a>p{display:-webkit-inline-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-weight:400;line-break:anywhere;text-align:left;}
+
+
+/* ===================== SORT BUTTON / CASE COUNT ===================== */
+.sort_wrap{display:inline-block;}
+.sort_wrap button:nth-child(1) img{margin-left:3px;}
+.sort_wrap button:nth-child(2) img{margin-left:-5px;}
+.sort_wrap button img{margin-bottom:5px;}
+
+.sortBtn{margin:-3px 0 0;background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
+.sortBtnDesc{margin:-2px 0 0;background:url(/publish/images/sortDown.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
+.sortBtnAsc{background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
+
+.numOfCase{position:absolute;top:57px;right:0;}
+.numOfCase p{display:inline-block;font-size:13px;}
+.numOfCase p:first-child span{font-weight:500;color:#e40000;}
+.numOfCase p:last-child span{font-weight:500;color:var(--primary-color);}
+
+/* ========================================================================== */
+/*  INPUT / SELECT — GLOBAL UNIFIED STYLE                                     */
+/* ========================================================================== */
+
+.form_area{display:flex;align-items:center;gap:8px;}
+.form_area.left{justify-content:flex-start;}
+.form_area.right{justify-content:flex-end;}
+
+.form_area.column{flex-direction:column;}
+
+select{border:1px solid #e5e5e5;vertical-align:middle;font-family:'Pretendard';font-weight:300;font-size:16px;}
+select.selType1{padding:0 25px 0 10px;height:34px;border:1px solid #d5d5d5;border-radius:3px;background-image:url(/publish/images/select_search2.png);background-repeat:no-repeat;background-position:right 5px top 50%;color:#777;}
+select.selType2{margin-left:2px;align-self:center;padding-left:12px;width:125px;height:36px;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;background-image:url(/publish/images/select_search.png);background-repeat:no-repeat;background-position:92% center;font-size:16px;color:#666;}
+.list_selType1:focus{outline:none;}
+select.list_selType1{padding:0 15px;width:100%;border:none;background-color:transparent;background-image:url(/publish/images/mem/list_select.png);background-repeat:no-repeat;background-position:right 0 top 50%;font-family:'Pretendard';font-size:18px;color:#222;cursor:pointer;}
+.select_gray_type{padding:0 20px;width:340px;height:40px;border-radius:5px;border:0;background-color:#f2f2f2;background-image:url(../images/select_search.png);background-repeat:no-repeat;background-position:94% center;font-weight:400;font-size:16px;color:#222;}
+
+input{border:0;vertical-align:middle;box-sizing:border-box;font-family:'Pretendard';}
+input:focus{outline:none;}
+input::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
+input:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
+input[type="text"]{padding:0 10px;border-radius:3px;font-size:16px;}
+input[type="text"]:active{border:1px solid var(--blue-color);}
+input[type="text"].readonly::placeholder{color:#222!important;}
+input[type="text"].readonly:-ms-input-placeholder{color:#222!important;}
+input[type="text"].inputLight::placeholder{color:#a6a6a6!important;}
+input[type="text"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
+input[type="password"]{padding:0 10px;border-radius:3px;font-size:16px;}
+input[type="password"].inputLight::placeholder{color:#a6a6a6!important;}
+input[type="password"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
+input.input_text{border:1px solid #d5d5d5;}
+
+input[type="checkbox"]{width:16px;height:16px;border:1px solid #d6d8da;}
+input[type="radio"]{margin:2px 3px 0 0;}
+input[type="radio"]+label{margin-right:18px;font-size:16px;vertical-align:middle;}
+input[type="radio"].radio_big{margin:0;width:16px;height:16px;}
+
+textarea{padding:15px;width:100%;box-sizing:border-box;font-family:'Pretendard';font-weight:300;font-size:16px;color:#666;}
+textarea::-webkit-scrollbar{width:7px;}
+textarea::-webkit-scrollbar-thumb{background:#c3c6c7;border-radius:3px;}
+textarea::-webkit-scrollbar-thumb:active{background:#808080;}
+textarea::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
+textarea:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
+.textarea_gray_type{padding:24px 20px;border-radius:5px;background-color:#f2f2f2;border:none;}
+
+/* =============================================
+   인풋 클리어 버튼 제거 (IE 대응)
+============================================= */
+input[type=text]::-ms-celar,
+input[type=password]::-ms-clear,
+input[type=email]::-ms-clear,
+input[type=number]::-ms-clear,
+input[type=tel]::-ms-clear{display:none;width:0;height:0;}
+
+input[type=text]::-ms-reveal,
+input[type=password]::-ms-reveal,
+input[type=email]::-ms-reveal,
+input[type=number]::-ms-reveal,
+input[type=tel]::-ms-reveal{display:none;width:0;height:0;}
+
+.w100{width:100%;}
+.h100{height:100%;}
+
+
+
+/* =============================================
+   테이블 타입
+============================================= */
+
+.tType1 {width: 100%;text-align: left;table-layout: fixed;}
+.tType1 tbody tr {border-bottom: 1px solid #e5e5e5;}
+.tType1 tbody tr:first-child{border-top: 2px solid #000;}
+.tType1 tbody tr th {min-width: 75px; height: 55px; vertical-align: middle;font-size: 17px; text-align: left;}
+.tType1 tbody tr th .essential {display:inline-block;margin:4px 2px 0 0;vertical-align:top;color:#e40000;}
+.tType1 tbody tr th.vTop {vertical-align: top; padding-top: 20px; line-height: 1.2;}
+.tType1 tbody tr td {vertical-align: middle;font-weight: 300;line-height: 1.3; padding: 10px 0;}
+.tType1 tbody tr td p {line-height: 1.4;}
+.tType1 tbody tr td.send_cf {font-size: 18px;} 
+.tType1 tbody tr td.putText {padding: 10px 0;}
+.tType1 tbody tr td.putText>div {display: flex; width: 100%;}
+.tType1 tbody tr td.putText>p:last-child {color: #555; font-size: 14px; padding-top: 10px;}
+.tType1 tbody tr td.putText .put_left {float: left;width: calc(100% - 26%); min-width: 420px; padding: 0 10px; border:1px solid #f2f2f2;box-sizing: border-box; border-radius: 5px; background-color: #f2f2f2; position: relative; /*max-height: 300px;*/}
+.tType1 tbody tr td.putText .put_left .text_length {position: relative;min-height: 28px;margin:0 0 15px;border-radius: 0 0 5px 5px;}
+.tType1 tbody tr td.putText .put_left .text_length>div:first-child {font-size: 15px; padding-left: 10px;}
+.tType1 tbody tr td.putText .put_left .text_length>div:last-child {position: absolute;bottom: 0;right: 10px;}
+.tType1 tbody tr td.putText .put_left .text_length p {display: inline-block;padding-right: 10px;}
+.tType1 tbody tr td.putText .put_right { width: 26%; max-width: 200px; position: relative;}
+.tType1 tbody tr td.putText .put_right>button {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
+.tType1 tbody tr td.putText .put_right .btn_popup_wrap button:not(.btn_close) {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
+.tType1 tbody tr td.putText button .qmMark {background-image: url(/publish/images/content/qmIcon_s.png); width: 19px; height: 19px; margin-left: 5px; margin-top: -2px;}
+.tType1 tbody tr td.putText .put_right .send_btnWrap {position: absolute;bottom: 0;right:0;width: calc(100% - 10px);}
+.tType1 tbody tr td.putText .put_right .send_btnWrap button {width: 48.5%;}
+.tType1 tbody tr td.putText textarea {height: 160px; border: none;margin: 0;padding:0 15px;border-radius: 5px 5px 0 0;outline: 0;background-color: transparent; font-size: 15px;}
+.tType1 tbody tr td.putText .put_left.short textarea {height: 190px;margin:10px 0;padding:0 5px;}
+.tType1 tbody tr td.putText .put_left.short textarea::placeholder {color: #b5b5b5;}
+.tType1 tbody tr td.putText .put_left.short.on {border: 1px solid var(--primary-color);border-radius: 5px;background-color: #eef2f9 !important;}
+.tType1 tbody tr td.putText .put_left.long textarea {height: 380px;}
+.tType1 tbody tr td.putText .put_left.long.on {border: 1px solid #12bec9;border-radius: 5px;background-color: #eef5f9 !important;}
+.tType1 tbody tr td.putText .put_left.photo.on {border: 1px solid #e26ba9;border-radius: 5px;background-color: #f8f1f5 !important;}
+.tType1 tbody tr.msg_title {display:none;}
+.tType1 tbody tr.msg_title.active {display:table-row;}
+.tType1 tbody tr.msg_title td .title_wrap .textbox {display:none;margin:10px 0 0;}
+.tType1 tbody tr.msg_title td .title_wrap .textbox.active {display:block;}
+
+.tType1_title {font-size: 20px; font-weight: 600; position: relative; height: 40px;}
+.tType1_title button {position: absolute;top: 22%; right: 0; transform: translateY(-50%); background-color: var(--primary-color); height: 40px; padding: 0 15px; color: #fff;}
+.tType1_title>span {font-size: 16px; font-weight: 300; color: #666;}
+.tType1 tbody tr td.send_list {position: relative;display: flex; justify-content: space-between;}
+.tType1 tbody tr td.send_list .list_left, .tType1 tbody tr td.send_list .list_right {width: calc(100%/2 - 25px);min-width: 290px;}
+.tType1 tbody tr td.send_list .list_left {left: 0;position: relative;}
+.tType1 tbody tr td.send_list .list_left .add_num {height: 90px;}
+.tType1 tbody tr td.send_list .list_left .add_num input[type="text"] {width: calc(100% - 97px);min-width: 200px;}
+.tType1 tbody tr td.send_list .list_left .add_num input[type="text"]::placeholder {color: #a6a6a6; font-weight: 300;}
+.tType1 tbody tr td.send_list .list_left .add_num>span {color: #e40000;font-size: 13px;font-weight: 400;line-height: 39px;}
+.tType1 tbody tr td .text_req {display: inline-block; color: #999; font-size: 17px; font-weight: 300; vertical-align: middle;}
+
+
+.tType1 tbody tr td.send_list .list_right {right: 0;}
+.tType1 tbody tr td.send_list .list_right .list_btnWrap {display: flex;flex-flow: wrap;justify-content: space-between;}
+.tType1 tbody tr td.send_list .list_right .list_btnWrap button {height: 37px;width: calc(100%/3 - 3px);margin-bottom: 5px;}
+
+.tType1 tbody tr td.send_list .add_btn {position: absolute; right: 0; top: 0;}
+.tType1 tbody tr td.send_list .add_btn button {min-width: 95px; height: 32px; font-size: 14px;}
+.tType1 tbody tr td.send_list .add_remove {text-align: center;margin: 40px 4px 0 4px;align-self: center;}
+.tType1 tbody tr td.send_list .add_remove button {display: block;max-width: 44px;padding: 4px 6px; border: 1px solid #b1b1b1;border-radius: 5px; margin: 0 auto;margin-bottom: 5px;font-size: 12px;}
+.tType1 tbody tr td.send_list .add_remove button:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
+.tType1 tbody tr td.send_list .add_remove button.add i {background-image:url(/publish/images/content/add_btn.png);width: 11px;height: 10px;display: block;margin: 0 auto;}
+.tType1 tbody tr td.send_list .add_remove button.remove i {background-image:url(/publish/images/content/remove_btn.png);width: 11px;height: 10px;display: block;margin: 0 auto;}
+
+.tType1 tbody tr th.billingAmount {position: relative;line-height: 1;vertical-align: middle;}
+.tType1 tbody tr th.billingAmount>div {background-color: #f2f2f2;border-radius: 5px;padding: 23px 30px;margin: 20px 0; position: relative;}
+.tType1 tbody tr th.billingAmount>div .final_pay {position: relative; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
+.tType1 tbody tr th.billingAmount>div p:first-child {font-size: 20px;font-weight: 500;}
+.tType1 tbody tr th.billingAmount>div p:last-child {font-size: 20px;}
+.tType1 tbody tr th.billingAmount>div p span#totalPriceTxt {font-size: 24px;color: #e40000;font-weight: 500;}
+.tType1 tbody tr th.billingAmount>div p span:last-child {font-size: 16px;color: #888;font-weight: 300;}
+.tType1 tbody tr th.billingAmount .pay_info_list p {float:left;line-height:35px;}
+.tType1 tbody tr th.billingAmount .pay_info_list .info {float:left;margin:0 0 0 15px;padding:8px 15px 10px;font-size:16px;font-weight:300;color:#555;background:#e5e5e5;border-radius:5px;box-sizing:border-box;}
+.tType1 tbody tr th.billingAmount .pay_info_list .info strong {font-size:18px;font-weight:700;color:var(--primary-color);}
+.tType1 tbody tr th.billingAmount .pay_info_list .info span {margin:0 8px 0 7px;} 
+.tType1 tbody tr th.billingAmount button.cal_btn {position: absolute;right: 0; top: 50%;transform: translateY(-50%);background-color: var(--secondary-color);width: 88px;height: 32px;border-radius: 5px;}
+.tType1 tbody tr th.billingAmount button.cal_btn:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
+.tType1 tbody tr th.billingAmount button.cal_btn i {background-image: url(/publish/images/content/calIcon.png);width: 12px;height: 16px;margin: 0 3px 2px 0;}
+.tType1 tbody tr th.billingAmount .pay_type {background-color: #fff; border-radius: 5px 5px 0 0; height: 60px; padding: 12px 13px; box-sizing: border-box;}
+.tType1 tbody tr th.billingAmount .pay_type button.btn_event_cash{width: 100px;}
+.tType1 tbody tr th.billingAmount .pay_type:last-child {margin-top: 10px;}
+.tType1 tbody tr th.billingAmount .pay_type>div:first-child {float: left;margin:0 0 0 5px;}
+.tType1 tbody tr th.billingAmount .pay_type>div .won {display:inline-block;margin:9px 11px 0 -34px;font-size:16px;vertical-align:top;color:#9a9a9a;}
+.tType1 tbody tr th.billingAmount .pay_type>div:last-child {float: right;}
+.tType1 tbody tr th.billingAmount .pay_type>div:only-child{float: left;}
+.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label {font-size: 16px;}
+.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label span {font-size: 17px; font-weight: 700;}
+.tType1 tbody tr th.billingAmount .pay_type input[type="text"] {width: 210px; height: 36px; padding:0 37px 2px 16px; border-radius: 5px;text-align:right;}
+.tType1 tbody tr th.billingAmount .pay_type input[type="text"]::placeholder {color: #000; font-size: 16px; text-align: right; font-weight: 500;}
+.tType1 tbody tr th.billingAmount .pay_type button {width: 78px; margin-left: 5px;}
+
+.tType1 tbody tr td.check_num>div {display: inline-block;}
+.tType1 tbody tr td.check_num>div button {height: 40px; padding: 0 5px;}
+.tType1 tbody input[type="text"] {height: 40px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px;line-height:38px;}
+.tType1 tbody input[type="password"] {height: 50px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px; font-size: 16px;}
+.tType1 tbody select.sel_number {width: 340px; height: 40px; padding: 0 20px; background-color: #f2f2f2;border-radius: 5px; border: 0;color: var(--primary-color);font-weight: 400;font-size: 16px;background-image: url(/publish/images/select_search.png); background-repeat: no-repeat; background-position: 94% center;}
+.tType1 tbody input[type="text"]::placeholder {color: #a6a6a6;}
+.tType1 tbody input:disabled {background-color: #dedede;}
+
+
+.tType3 {width: 100%; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box;}
+.tType3.payDetail {margin-bottom: 50px;}
+.tType3.usageDetail {margin-bottom: 50px;}
+.tType3.payDetail {margin: -15px 0 10px 0;}
+.payDetail .tType3_hd>div:nth-child(1), .payDetail .tType3_bd>div:nth-child(1) {width: 40px;}
+.payDetail .tType3_hd>div:nth-child(2), .payDetail .tType3_bd>div:nth-child(2) {width: 20%;}
+.payDetail .tType3_hd>div:nth-child(3), .payDetail .tType3_bd>div:nth-child(3) {width: 17%;}
+.payDetail .tType3_hd>div:nth-child(4), .payDetail .tType3_bd>div:nth-child(4) {width: 15%;}
+.payDetail .tType3_hd>div:nth-child(5), .payDetail .tType3_bd>div:nth-child(5) {width: 17%;}
+.payDetail .tType3_hd>div:nth-child(6), .payDetail .tType3_bd>div:nth-child(6) {width: 15%;}
+.payDetail .tType3_hd>div:nth-child(7), .payDetail .tType3_bd>div:nth-child(7) {width: 17%;}
+
+.table_cont {display: none;}
+.table_cont.current {display: block;}
+
+.tType3 .tType3_hd {position:relative;display:flex;height:36px;font-size:15px;background:#f8f8f8;text-align:center;border-radius:5px 5px 0 0;box-sizing:border-box;z-index:0;}
+.tType3 .tType3_hd>div {display:flex;border-left:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;box-sizing:border-box;justify-content:center;align-items:center;gap:8px;}
+.tType3 .tType3_hd>div:first-child {border-left:0;} 
+.tType3 .font_ellipsis {position:relative;}
+
+.tType3 .tType3_bd {display:flex;height:40px;box-sizing:border-box;text-align:center;}
+.tType3 .tType3_bd span {font-weight:400;}
+.tType3 .tType3_bd>div {height:40px;padding:0 10px;border-bottom:1px solid #d5d5d5;border-left:1px solid #d5d5d5;text-align:center;font-size:15px;color:#555;font-weight:300;box-sizing:border-box;}
+.tType3 .tType3_bd>div:first-child {border-left: 0;}
+.tType3 .tType3_bd:last-child>div {border-bottom: 0;}
+.tType3 .tType3_bd .table_certify {font-weight: 400;}
+.tType3 .tType3_bd .input_wrap2 input[type="text"] {text-align: center; background-color: #f2f2f2; width: calc(100% - 20px); height: 32px; border-radius: 5px; color: #555; vertical-align: baseline;}
+.tType3 .tType3_bd .input_wrap2 input[type="text"]::placeholder {color: #555;}
+.tType3 .tType3_bd .input_wrap2 input[type="text"]:-ms-input-placeholder {color: #555;}
+.tType3 .tType3_bd .btnType14 {height: 28px; padding: 0 11.5px; vertical-align: baseline; line-height: 28px;}
+.tType3 .tType3_bd input[type="radio"] {margin-top: 0; margin-right: 0; vertical-align: revert;}
+
+.tb_wrap{position:relative;width:100%;min-height:430px;border:1px solid #d5d5d5;border-radius:5px;margin-bottom:10px;box-sizing: border-box;border-bottom:0 none;overflow:hidden;}
+.tb_wrap:after {position:absolute;content:'';width:calc(100% - 4px);height:1px;background:#d5d5d5;left:2px;bottom:0;}
+.tType4{width:100%;table-layout:fixed;}
+.tType4 thead{position:relative;background:#f8f8f8;z-index:0;}
+.tType4 thead tr:only-child th{height:36px;}
+.tType4 thead th{position:relative;height:25px;border-right:1px solid #d5d5d5;border-bottom:1px solid #d5d5d5;font-size:15px;font-weight:400;vertical-align:middle;z-index:1;}
+.tType4 thead th:last-child{border-right: 0;}
+.tType4 .sort_wrap{display: inline-block;}
+.tType4 tbody td{text-align: center; font-size: 15px; color: #666; font-weight: 400; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; height: 38px; vertical-align: middle; padding: 0 10px; box-sizing: border-box;}
+.tType4 tbody td.tb_tit{text-align: left; position: relative;}
+.tType4 tbody td.input_wrap2 input[type="text"] {text-align: center;background-color: #f2f2f2;width: calc(100% - 20px);height: 32px;border-radius: 5px;border: 1px solid #f2f2f2;margin-right: 0;color: #555;}
+.tType4 tbody tr:only-child:last-child td{border-bottom: 1px solid #ccc;}
+.tType4 tbody td:last-child{border-right: 0;}
+.tType4 tbody td>p{width: 100%; line-height: 38px; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.5px; overflow: hidden;margin: 0 auto;}
+.tType4 tbody td span {font-weight: 400;}
+.tType4 td input[type="text"]{height: 28px; display: inline-block; border: 1px solid #e5e5e5; margin-right: 5px;}
+.tType4 tbody .btnType14 {height: 28px;}
+.tType4 .memo_text {width: calc(100% - 35px); margin-right: 5px; display: inline-block; text-align: left; vertical-align: inherit;}
+.tType4 tbody td span.textReject {line-height:28px;}
+.tType4 tbody td .btnTypeReject {margin:0 0 0 3px;line-height:26px;letter-spacing:0;text-align:center;vertical-align:top;}
+.tType4 tbody td.result_cont a {text-align: left!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
+.tType4 tbody td.result_cont .result_tit { }
+.tType4 tbody td .cancel_date {font-size:14px; color:#666; display: block;}
+
+/* =============================================
+   탭 타입
+============================================= */
+.top_content {display: none;}
+.top_content.current {display: block;}
+.custom_content {display: none;}
+.custom_content.current {display: block;}
+.bottom_content {display: none;}
+.bottom_content.current {display: block;}
+.popup_cont {display: none;}
+.popup_cont.current {display: block;}
+.history_cont {display: none;}
+.history_cont.current {display: block;}
+.alarm_cont {display: none;}
+.alarm_cont.current {display: block;}
+.pay_cont {display: none;}
+.pay_cont.current {display: block;}
+.fee_cont {display: none;}
+.fee_cont.current {display: block;}
+
+.tabType1{display:flex;width:100%;margin:0 0 20px;background:#fff;border-radius:10px;border:1px solid var(--primary-color);text-align:center;overflow:hidden;}
+.tabType1 li{position:relative;flex:1;}
+.tabType1 li button{position:relative;width:100%;height:60px;padding:13px 0;font-size:18px;color:#222;border-radius:8px;z-index:1;}
+.tabType1 li.active button {border:1px solid var(--primary-color);background-color:var(--primary-color);font-weight:600;color:#fff;}
+
+.mypage_content .tabType1 {background-color: #f4f4f5; color: #222; margin-top: 40px;}
+.mypage_content .tabType1 li.active button {background-color: var(--secondary-light-color); color: #222;}
+
+.pay_tab_wrap .tabType1 {background-color: #f4f4f5; color: #222; margin: 30px 0 ;border:0 none;border-radius:5px;}
+.pay_tab_wrap .tabType1 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background-color: #d5d5d5;}
+.pay_tab_wrap .tabType1 li:last-child::after {content: none;}
+.pay_tab_wrap .tabType1 li button{height:53px;font-size:16px;}
+.pay_tab_wrap .tabType1 li:first-child button {border-radius:5px 0 0 5px;}
+.pay_tab_wrap .tabType1 li:last-child button {border-radius:0 5px 5px 0;}
+.pay_tab_wrap .tabType1 li.active {background-color:transparent;}
+.pay_tab_wrap .tabType1 li.active::after {content: none;}
+.pay_tab_wrap .tabType1 li.active button {background-color: var(--secondary-color); border:1px solid var(--secondary-color-hover);color: #FFF;border-radius:5px;}
+.pay_tab_wrap .tabType1 li.active button:before {display:none;}
+.pay_tab_wrap .tabType1 li.active button:after {display:none;}
+
+.tabType2 {position:relative;display:flex;width:calc(100% - 600px);margin:0 0 20px 0;background:#fff;border-radius:10px 10px 0 0;text-align:center;}
+.tabType2::after {position:absolute;content: "";width:calc(100% + 600px);height:2px;background:#1E3862;bottom:0;left:0;}
+.tabType2 li {flex-basis:calc(100% /4);min-width: 200px;}
+.tabType2 li button {width: 100%;padding:13px 0;font-size:20px;border-left:1px solid #f2f2f2;background:#fff;}
+.tabType2 li:nth-child(3) button {border-left:0;}
+.tabType2 li:first-child button {border-left:0;border-radius:10px 0 0 0;}
+.tabType2 li:last-child button {border-radius:0 10px 0 0;}
+.tabType2 li.active button {background:#1E3862;border-radius:10px 10px 0 0;color:#fff;border-left:1px solid transparent;}
+
+.tabType4 {background-color: #fff;width: 100%;border-radius: 10px; display: flex;text-align: center;margin-bottom: 20px;border:1px solid var(--primary-color);overflow:hidden;}
+.tabType4 li {flex: 1; position: relative;}
+.tabType4 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background-color: #d5d5d5;}
+.tabType4 li:last-child::after {content: none;}
+.tabType4 li.active::after {content: none;}
+.tabType4 li button {position:relative;width: 100%; height: 50px; padding: 12px 0;font-size: 18px; letter-spacing: -0.5px;}
+.tabType4 li.active button {color:#fff;border:1px solid var(--primary-color);background-color:var(--primary-color);border-radius:8px;}
+/* .tabType4 li.active button:before {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;} */
+/* .tabType4 li.active button:after {content:'';position:absolute;left:-5px;top:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;} */
+.tabType4.tabTwo li {flex-basis: calc(100%/2);}
+
+.tabType5 {background-color: #fff;width: 100%; border: 1px solid #dfdfdf; border-bottom: 1px solid #46484a; border-radius: 5px 5px 0 0; display: flex;text-align: center;}
+.tabType5 li {flex-basis: calc(100%/3); position: relative;}
+.tabType5 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: #c7c8c8;}
+.tabType5 li:last-child::after {content: none;}
+.tabType5 li.active::after {content: none;}
+.tabType5 li button {width: 100%;height: 45px; font-size: 18px;}
+.tabType5 li.active button {background-color: #46484a;border-radius: 5px 5px 0 0;color: #fff; font-weight: 300;}
+
+.tabType6 {background-color: #fff;width: 100%;border-bottom: 1px solid #e5e5e5;  display: flex;text-align: center;}
+.tabType6 li {flex-basis: calc(100%/2);}
+.tabType6 li button {width: 100%;height: 35px; font-size: 16px;border: 1px solid #dfdfdf; border-bottom: 1px solid #e5e5e5; border-radius: 5px 5px 0 0;}
+.tabType6 li.active button {background-color: #c8c8c8;border-radius: 5px 5px 0 0; border: 1px solid #c8c8c8;}
+.pay_refund_cont .pay_tType1 {margin-top:-20px;}
+.pay_refund_cont .pay_tType1 tbody tr:first-child {border-top:0 none;}
+
+/* =============================================
+   캘린더
+============================================= */
+.calendar_wrap {position:relative;display: inline-block;}
+.calendar_wrap>span {font-weight: 500;}
+.calendar_wrap>input[type="text"] {height: 36px;line-height: 36px;width: 140px;border: 1px solid #d5d5d5;font-size: 16px;font-weight: 300;padding: 0 5px;color: #777;background: url(/publish/images/calendar/calendarIcon2.png) #fff no-repeat right 7px center;}
+.calendar_in {position: relative;display: inline;}
+.calendar_in>button {  border: 1px solid transparent !important; height: 26px; margin: 1px 0 0 0; padding: 0; text-indent: -9999em; width: 26px; vertical-align: middle; position: absolute; right: 8px;top: 57%; transform: translateY(-50%);}
+.calendar_in .calendar-frame {border: 0;height: 290px;width: 320px;}
 .calendar_in .calendarPop {display: none;position: absolute;z-index: 10;top: 32px;left: -204px; border-radius: 10px 10px 0 0;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12); background-color: #fff;}
(No newline at end of file)
 
src/main/webapp/publish/payment_toss.html (added)
+++ src/main/webapp/publish/payment_toss.html
@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>문자온</title>
+
+	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="/publish/css/reset.css">
+	<link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
+	<link rel="stylesheet" href="/publish/css/common.css">
+	<link rel="stylesheet" href="/publish/css/style.css">
+	<link rel="stylesheet" href="/publish/css/button.css">
+	<link rel="stylesheet" href="/publish/css/content.css">
+	<link rel="stylesheet" href="/publish/css/mem.css">
+	<link rel="stylesheet" href="/publish/css/font.css">
+	<link rel="stylesheet" href="/publish/css/popupLayer.css">
+
+	<script src="/publish/js/jquery-3.5.0.js"></script>
+	<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
+	<script src="/publish/js/common.js"></script>
+	<script src="/publish/js/content.js"></script>
+	<script src="/publish/js/calendar.js"></script>
+	<script src="/publish/js/popup.js"></script>
+	<script src="/publish/js/popupLayer.js"></script>
+
+	<script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script>
+	<script type="text/javascript" src="/js/MJUtill.js"></script>
+	<script src="https://js.tosspayments.com/v1/payment-widget"></script>
+	<script>
+		let paymentWidget;
+		let paymentMethodWidget;
+	
+		$(document).ready(function () {
+	
+			const $input = $('.money_input');
+			const $message = $('.input_message');
+	
+			// 금액 추가 버튼 클릭
+			$('.add_money .btn').on('click', function () {
+	
+				const addAmount = Number($(this).data('price'));
+	
+				// 현재 입력값 숫자만 추출
+				let currentValue = $input.val().replace(/[^0-9]/g, '');
+				currentValue = currentValue ? Number(currentValue) : 0;
+	
+				// 금액 합산
+				const total = currentValue + addAmount;
+	
+				// input 표시
+				$input.val(numberWithCommas(total));
+	
+				// 금액 갱신
+				updatePrice(total);
+	
+			});
+	
+			// 직접 입력
+			$input.on('input', function () {
+				let value = $(this).val().replace(/[^0-9]/g, '');
+				value = value ? Number(value) : 0;
+				$(this).val(numberWithCommas(value));
+				updatePrice(value);
+			});
+			
+			// 토스페이먼츠 위젯 초기화
+			const clientKey = 'test_gck_KNbdOvk5rk15kdKpqQGo3n07xlzm';
+			const customerKey = 'test_customer_1234';
+	
+			paymentWidget = PaymentWidget(clientKey, customerKey);
+	
+			// 최초 금액
+			const initialAmount = 0;
+	
+			// 결제수단 렌더링
+			paymentMethodWidget = paymentWidget.renderPaymentMethods(
+				'#payment-method',
+				{ value: initialAmount }
+			);
+	
+			// 약관 렌더링
+			paymentWidget.renderAgreement('#agreement');
+	
+		});
+	
+		// 금액 업데이트
+		function updatePrice(price) {
+	
+			const $message = $('.input_message');
+	
+			const supplyPrice = price;
+			const vatPrice = Math.round(supplyPrice * 0.1);
+			const lastPrice = supplyPrice + vatPrice;
+	
+			// 화면 표시
+			$('#supplyPriceStr').text(numberWithCommas(supplyPrice));
+			$('#vatPriceStr').text(numberWithCommas(vatPrice));
+			$('#lastPriceStr').text(numberWithCommas(lastPrice));
+	
+			// 토스 결제 금액 변경
+			if (typeof paymentMethodWidget !== 'undefined') {
+				paymentMethodWidget.updateAmount(lastPrice);
+			}
+	
+			// 휴대폰 결제 제한 체크
+			if (price > 150000 || price < 5000) {
+				$(".money_input").addClass('error');
+				$message.addClass('active');
+				if(price<5001){
+					$message.find(".msg").text("최소 충전금액 5천원 이상 입력해주세요.");
+				}else{$message.find(".msg").text("휴대폰 결제는 최대 150,000원까지 입력 가능합니다.");}
+				
+			} else {
+				$(".money_input").removeClass('error');
+				$message.removeClass('active');
+			}
+		}
+	
+		// 결제 호출
+		function pgOpenerPopup() {
+	
+			const chargePrice = parseInt($('#price').val().replace(/[^0-9]/g, ''),10);
+	
+			const lastPrice = chargePrice + Math.round(chargePrice * 0.1);
+	
+			if (chargePrice < 5000) {
+				alert("최소 충전금액 5천원 이상 입력해주세요.");
+				return false;
+			}
+	
+			paymentWidget.requestPayment({
+				orderId: 'ORDER_' + new Date().getTime(),
+				orderName: '문자온 충전 ' + lastPrice + '원',
+				successUrl: window.location.origin + '/web/member/pay/tossSuccess.do',
+				failUrl: window.location.origin + '/web/member/pay/tossFail.do',
+				customerEmail: $('#mberEmailAdres').val(),
+				customerName: $('#mberNm').val(),
+				customerMobilePhone: $('#moblphonNo').val()
+			}).catch(function (error) {
+	
+				if (error.code === 'USER_CANCEL') {
+					alert('결제를 취소하셨습니다.');
+				} else {
+					alert(error.message);
+				}
+	
+			});
+		}
+	
+		// 콤마 함수
+		function numberWithCommas(x) {
+			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+		}
+	</script>
+
+</head>
+
+<body>
+	<div data-include-path="/publish/layout/_header.html"></div>
+	<!-- content 영역 -->
+	<div id="container" class="cont sub">
+		<div class="inner">
+			<!-- send top -->
+			<div class="send_top">
+				<!-- tab button -->
+				<ul class="tabType4">
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment1.html'">요금안내/견적내기</button></li>
+					<li class="tab active"><button type="button" onclick="TabType5(this,'2');">결제하기</button></li>
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment3.html'">요금 결제내역</button></li>
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment4.html'">요금 사용내역</button></li>
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment5.html'">세금계산서 발행 등록</button></li>
+				</ul>
+				<!--// tab button -->
+				<!-- 결제관리 - 결제하기 -->
+				<div class="serv_content charg_cont current" id="tab5_2">
+					<div class="heading">
+						<h2>결제하기</h2>
+						<button type="button" class="button info" onclick="infoListPop('payment2','792','250');">사용안내</button>
+					</div>
+					
+					<div>
+					<!-- 토스페이먼츠 결제수단 위젯 영역 -->
+						<div id="payment-method" class="toss_wrap"></div>
+
+						<!-- 토스페이먼츠 이용약관 영역 -->
+						<div id="agreement" class="toss_wrap"></div>
+						
+						<!-- <b class="fs_18 fwMd">충전할 금액을 선택한 후 <spa n class="c_002c9a">[충전하기]</span> 버튼을 눌러주세요</b> -->
+						<div class="area_tabcont on " id="tab2_1">
+							<p class="tType1_title"><img src="/publish/images/credit_small.png" alt="신용카드"> 신용카드</p>
+							<table class="tType1">
+								<colgroup>
+									<col style="width: 100px;">
+									<col style="width: auto;">
+								</colgroup>
+								<tbody>
+									<tr class="charge_content">
+										<th scope="row">충전금액</th>
+										<td class="flex">
+											<!-- <select name="tempPrice" id="tempPrice" class="list_seType1">
+												<option value="5000">5,000</option>
+												<option value="10000">10,000</option>
+												<option value="20000">20,000</option>
+												<option value="30000">30,000</option>
+												<option value="50000" selected="">50,000</option>
+												<option value="100000">100,000</option>
+												<option value="200000">200,000</option>
+												<option value="300000">300,000</option>
+												<option value="500000">500,000</option>
+												<option value="700000">700,000</option>
+												<option value="900000">900,000</option>
+												<option value="1000000">1,000,000</option>
+												<option value="1200000">1,200,000</option>
+												<option value="1500000">1,500,000</option>
+												<option value="2000000">2,000,000</option>
+												<option value="2500000">2,500,000</option>
+												<option value="3000000">3,000,000</option>
+											</select> -->
+											
+											<div class="money_form_wrap form_wrap">
+												<input type="text" name="price" id="price" class="input money_input" placeholder="1,000원 이상 입력해주세요." value="50,000" min="5,000" max="150,000"/>
+												<p class="input_in">원</p>
+												<p class="input_message error">
+													<i class="icon error">!</i> <span class="msg">휴대폰 결제는 최대 150,000원까지 입력 가능합니다.</span>
+												</p>
+											</div>
+											
+											<div class="btn_wrap add_money w100per">
+												<button type="button" class="btn" data-price="10000">+ 1만원</button>
+												<button type="button" class="btn" data-price="50000">+ 5만원</button>
+												<button type="button" class="btn" data-price="100000">+ 10만원</button>
+												<button type="button" class="btn" data-price="1000000">+ 100만원</button>
+											</div>
+											<!-- <span class="reqTxt6">※ 최소 3천원 이상부터 결제 가능합니다.</span> -->
+										</td>
+									</tr>
+									
+									<tr>
+										<td colspan="2">
+											<div class="amount_wrap">
+												<dl>
+													<dt>최종 결제금액 :</dt>
+													<dd>
+														<ul>
+															<li><strong id="supplyPriceStr">50,000</strong>원(공급가액)</li>
+															<li><span class="plus"></span><strong id="vatPriceStr">5,000</strong>원(부가세)</li>
+															<li class="total"><span class="equal"></span><strong class="c_e40000" id="lastPriceStr">55,000</strong>원(최종금액)</li>
+														</ul>
+													</dd>
+												</dl>
+												<button type="button" class="btn btnType fill primary btn_pay" onclick="pgOpenerPopup(); return false;" >충전하기</button>
+											</div>
+										</td>
+										
+									</tr>
+									
+								</tbody>
+							</table>
+						</div>
+						
+					</div>
+
+				</div><!-- 결제관리 - 결제하기 -->
+			</div>
+			<!--// send top -->
+		</div>
+	</div>
+	<!--// content 영역 -->
+	<!-- footer 영역 -->
+	<div data-include-path="/publish/layout/_footer.html"></div>
+	<!--// footer 영역 -->
+</body>
+
+</html>(No newline at end of file)
 
src/main/webapp/publish/payment_toss_evaluation.html (added)
+++ src/main/webapp/publish/payment_toss_evaluation.html
@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>문자온</title>
+
+	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="/publish/css/reset.css">
+	<link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
+	<link rel="stylesheet" href="/publish/css/common.css">
+	<link rel="stylesheet" href="/publish/css/style.css">
+	<link rel="stylesheet" href="/publish/css/button.css">
+	<link rel="stylesheet" href="/publish/css/content.css">
+	<link rel="stylesheet" href="/publish/css/mem.css">
+	<link rel="stylesheet" href="/publish/css/font.css">
+	<link rel="stylesheet" href="/publish/css/popupLayer.css">
+
+	<script src="/publish/js/jquery-3.5.0.js"></script>
+	<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
+	<script src="/publish/js/common.js"></script>
+	<script src="/publish/js/content.js"></script>
+	<script src="/publish/js/calendar.js"></script>
+	<script src="/publish/js/popup.js"></script>
+	<script src="/publish/js/popupLayer.js"></script>
+
+	<script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script>
+	<script type="text/javascript" src="/js/MJUtill.js"></script>
+	<script src="https://js.tosspayments.com/v1/payment-widget"></script>
+	<script>
+		let paymentWidget;
+		let paymentMethodWidget;
+	
+		$(document).ready(function () {
+			
+			// 토스페이먼츠 위젯 초기화 세팅
+			const clientKey = 'test_gck_KNbdOvk5rk15kdKpqQGo3n07xlzm';
+			const customerKey = 'test_customer_1234';
+	
+			paymentWidget = PaymentWidget(clientKey, customerKey);
+	
+			// 최초 선택된 체크박스 기준 금액 세팅
+			setPriceMake();
+	
+			const initialAmount = parseInt($("#price").val(), 10);
+	
+			// 결제수단 및 약관 위젯 렌더링
+			paymentMethodWidget = paymentWidget.renderPaymentMethods(
+				'#payment-method',
+				{ value: initialAmount }
+			);
+	
+			paymentWidget.renderAgreement('#agreement');
+			
+			$(".tType4 tbody tr td").click(function () {
+				$("input[name='price']").prop("checked", false);
+				$(this).closest("tr").find("input[name='price']").prop("checked", true);
+
+				// 금액 갱신
+				setPriceMake();
+			});
+			
+		});
+	
+	
+		function setPriceMake() {
+	
+			const checkedRow = $('input[name="price"]:checked').closest('tr');
+			const priceText = checkedRow.find('td').eq(1).text().replace(/,/g, '').trim();
+			const supplyPrice = parseInt(priceText, 10);
+			const vatPrice = Math.round(supplyPrice * 0.1);
+			const lastPrice = supplyPrice + vatPrice;
+	
+			// hidden input 값
+			$("#price").val(lastPrice);
+	
+			// 화면 표시
+			$('#supplyPriceStr').html(numberWithCommas(supplyPrice));
+			$('#vatPriceStr').html(numberWithCommas(vatPrice));
+			$('#lastPriceStr').html(numberWithCommas(lastPrice));
+	
+			// 토스 위젯 금액 변경
+			if (typeof paymentMethodWidget !== 'undefined') {
+				paymentMethodWidget.updateAmount(lastPrice);
+			}
+		}
+	
+	
+		// 체크박스 단일 선택 처리
+		$(document).on('change', 'input[name="price"]', function () {
+			$('input[name="price"]').not(this).prop('checked', false);
+			$(this).prop('checked', true);
+	
+			// 금액 갱신
+			setPriceMake();
+		});
+		
+		// 후불제여부 체크
+		function getMjUserAfterPayCheck() {
+			var isAfterPay = false;
+
+			$.ajax({
+				type: "POST",
+				url: "/web/main/selectUserAfterPayAjax.do",
+				data: {},
+				dataType:'json',
+				async: false,
+				success: function (data) {
+					if (data.isSuccess) {
+						if (data.isAfterPay == true) {
+							isAfterPay = true;
+						}
+					}
+				},
+				error: function (e) {
+
+				}
+			});
+
+			return isAfterPay;
+		}
+		
+		function pgOpenerPopup(){
+			
+			var lastPrice = parseInt($("#price").val(), 10);
+			if(lastPrice < 5500){
+				alert("최소 충전금액 5천원 이상 선택해주세요.");
+				return false;
+			}
+
+			// 토스페이먼츠 결제창 바로 호출
+			paymentWidget.requestPayment({
+				orderId: 'ORDER_' + new Date().getTime(), // 고유한 상점 주문번호 생성
+				orderName: '문자고 충전 ' + lastPrice + '원',
+				successUrl: window.location.origin + '/web/member/pay/tossSuccess.do', // 결제 성공 시 이동할 URL (백엔드 컨트롤러 생성 필요)
+				// paymentType=NORMAL
+				// &orderId=ORDER_1778047452906
+				// &paymentKey=tmunj2026050615041659Zv9
+				// &amount=55000
+				failUrl: window.location.origin + '/web/member/pay/tossFail.do',       // 결제 실패 시 이동할 URL (백엔드 컨트롤러 생성 필요)
+				customerEmail: $('#mberEmailAdres').val(), // 필요시 로그인한 사용자의 이메일 매핑
+				customerName: $('#mberNm').val(),   // 필요시 로그인한 사용자의 이름 매핑
+				customerMobilePhone: $('#moblphonNo').val()
+			}).catch(function (error) {
+				if (error.code === 'USER_CANCEL') {
+					alert('결제를 취소하셨습니다.');
+				} else {
+					alert(error.message);
+				}
+			});
+		}
+	
+	
+		// 숫자 콤마 함수
+		function numberWithCommas(x) {
+			return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+		}
+		
+	</script>
+
+</head>
+
+<body>
+	<div data-include-path="/publish/layout/_header.html"></div>
+	<!-- content 영역 -->
+	<div id="container" class="cont sub">
+		<div class="inner">
+			<!-- send top -->
+			<div class="send_top">
+				<!-- tab button -->
+				<ul class="tabType4">
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment1.html'">요금안내/견적내기</button></li>
+					<li class="tab active"><button type="button" onclick="TabType5(this,'2');">결제하기</button></li>
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment3.html'">요금 결제내역</button></li>
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment4.html'">요금 사용내역</button></li>
+					<li class="tab"><button type="button" onclick="location.href='/publish/payment5.html'">세금계산서 발행 등록</button></li>
+				</ul>
+				<!--// tab button -->
+				<!-- 결제관리 - 결제하기 -->
+				<div class="serv_content charg_cont current" id="tab5_2">
+					<div class="heading">
+						<h2>결제하기</h2>
+						<button type="button" class="button info" onclick="infoListPop('payment2','792','250');">사용안내</button>
+					</div>
+					
+					<div>
+					<!-- 토스페이먼츠 결제수단 위젯 영역 -->
+						<div id="payment-method" class="toss_wrap"></div>
+
+						<!-- 토스페이먼츠 이용약관 영역 -->
+						<div id="agreement" class="toss_wrap"></div>
+						
+						<b class="fs_18 fwMd">결제할 금액을 선택한 후 <span class="c_002c9a">[결제하기]</span> 버튼을 눌러주세요</b>
+						<div class="tb_wrap" style="margin:12px 0 0 0;">
+							<table class="tType4">
+								<colgroup>
+									<col style="width:60px;"/>
+									<col style="width:calc((100% - 60px)/4);"/>
+									<col style="width:calc((100% - 60px)/4);"/>
+									<col style="width:calc((100% - 60px)/4);"/>
+									<col style="width:calc((100% - 60px)/4);"/>
+								</colgroup>
+								<thead>
+									<tr>
+										<th>선택</th>
+										<th>결제금액</th>
+										<th>단문(15원)</th>
+										<th>장문(39원)</th>
+										<th>그림(70원)</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>10,000</td>
+										<td><b class="c_002c9a fwBold">666</b>건</td>
+										<td><b class="c_002c9a fwBold">256</b>건</td>
+										<td><b class="c_002c9a fwBold">142</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>20,000</td>
+										<td><b class="c_002c9a fwBold">1,333</b>건</td>
+										<td><b class="c_002c9a fwBold">512</b>건</td>
+										<td><b class="c_002c9a fwBold">285</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>30,000</td>
+										<td><b class="c_002c9a fwBold">2,000</b>건</td>
+										<td><b class="c_002c9a fwBold">769</b>건</td>
+										<td><b class="c_002c9a fwBold">428</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>40,000</td>
+										<td><b class="c_002c9a fwBold">2,666</b>건</td>
+										<td><b class="c_002c9a fwBold">1,025</b>건</td>
+										<td><b class="c_002c9a fwBold">571</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price" checked/>
+										</td>
+										<td>50,000</td>
+										<td><b class="c_002c9a fwBold">3,333</b>건</td>
+										<td><b class="c_002c9a fwBold">1,282</b>건</td>
+										<td><b class="c_002c9a fwBold">714</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>100,000</td>
+										<td><b class="c_002c9a fwBold">6,666</b>건</td>
+										<td><b class="c_002c9a fwBold">2,564</b>건</td>
+										<td><b class="c_002c9a fwBold">1,428</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>150,000</td>
+										<td><b class="c_002c9a fwBold">10,000</b>건</td>
+										<td><b class="c_002c9a fwBold">3,846</b>건</td>
+										<td><b class="c_002c9a fwBold">2,142</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>200,000</td>
+										<td><b class="c_002c9a fwBold">13,333</b>건</td>
+										<td><b class="c_002c9a fwBold">5,128</b>건</td>
+										<td><b class="c_002c9a fwBold">2,857</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>300,000</td>
+										<td><b class="c_002c9a fwBold">20,000</b>건</td>
+										<td><b class="c_002c9a fwBold">7,692</b>건</td>
+										<td><b class="c_002c9a fwBold">4,285</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>400,000</td>
+										<td><b class="c_002c9a fwBold">26,666</b>건</td>
+										<td><b class="c_002c9a fwBold">10,256</b>건</td>
+										<td><b class="c_002c9a fwBold">5,714</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>500,000</td>
+										<td><b class="c_002c9a fwBold">33,333</b>건</td>
+										<td><b class="c_002c9a fwBold">12,820</b>건</td>
+										<td><b class="c_002c9a fwBold">7,142</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>1,000,000</td>
+										<td><b class="c_002c9a fwBold">66,666</b>건</td>
+										<td><b class="c_002c9a fwBold">25,641</b>건</td>
+										<td><b class="c_002c9a fwBold">14,285</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>1,500,000</td>
+										<td><b class="c_002c9a fwBold">100,000</b>건</td>
+										<td><b class="c_002c9a fwBold">38,461</b>건</td>
+										<td><b class="c_002c9a fwBold">21,428</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>2,000,000</td>
+										<td><b class="c_002c9a fwBold">133,333</b>건</td>
+										<td><b class="c_002c9a fwBold">51,282</b>건</td>
+										<td><b class="c_002c9a fwBold">28,571</b>건</td>
+									</tr>
+									<tr>
+										<td>
+											<input type="checkbox" name="price"/>
+										</td>
+										<td>5,000,000</td>
+										<td><b class="c_002c9a fwBold">333,333</b>건</td>
+										<td><b class="c_002c9a fwBold">128,205</b>건</td>
+										<td><b class="c_002c9a fwBold">71,428</b>건</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						
+						<div class="amount_wrap" style="margin:20px 0 0 0;padding:12px 30px 12px 35px;border:3px solid #ddd;border-radius:5px;">
+							<dl>
+								<dt>최종 결제금액 :</dt>
+								<dd>
+									<ul>
+										<li><strong id="supplyPriceStr">50,000</strong>원(결제금액)</li>
+										<li><span class="plus"></span><strong id="vatPriceStr">5,000</strong>원(부가세)</li>
+										<li class="total"><span class="equal"></span><strong class="c_e40000" id="lastPriceStr">55,000</strong>원(최종금액)</li>
+									</ul>
+								</dd>
+							</dl>
+							<button type="button" class="btn btnType fill primary" onclick="pgOpenerPopup(); return false;" style="width:210px;">결제하기</button>
+						</div>
+
+
+					</div>
+
+				</div><!-- 결제관리 - 결제하기 -->
+			</div>
+			<!--// send top -->
+		</div>
+	</div>
+	<!--// content 영역 -->
+	<!-- footer 영역 -->
+	<div data-include-path="/publish/layout/_footer.html"></div>
+	<!--// footer 영역 -->
+</body>
+
+</html>(No newline at end of file)
Add a comment
List