--- src/main/webapp/publish/css/content.css
+++ src/main/webapp/publish/css/content.css
... | ... | @@ -895,6 +895,7 @@ |
| 895 | 895 |
.photoBox .txtBox span {font-size: 18px; font-weight: 300; color: #666; padding-top: 10px;display: inline-block;display:none;}
|
| 896 | 896 |
|
| 897 | 897 |
/* 결제내역 */ |
| 898 |
+ |
|
| 898 | 899 |
/* 요금결제내역 */ |
| 899 | 900 |
.pay_cont .list_info div:last-child button{font-size:14px;}
|
| 900 | 901 |
.pay_cont .tType1 .calendar_wrap {margin-right: 3px;}
|
... | ... | @@ -1082,6 +1083,10 @@ |
| 1082 | 1083 |
.charg_cont {background-color: #fff;padding: 40px;border-radius: 10px; min-height: 589px; display: none;}
|
| 1083 | 1084 |
.charg_cont.current {display: block;}
|
| 1084 | 1085 |
.charg_cont .tab_tit{font-size: 24px; font-weight: bold; color: #222; margin-bottom: 20px; margin-top: 40px;}
|
| 1086 |
+ |
|
| 1087 |
+/* 토스 */ |
|
| 1088 |
+.toss_wrap{width:calc(100% + 60px);margin:0 0 0 -30px;}
|
|
| 1089 |
+ |
|
| 1085 | 1090 |
/* 간편결제 오픈 시 */ |
| 1086 | 1091 |
.charg_cont .area_tab{display:flex;gap:25px 30px;flex-wrap:wrap;}
|
| 1087 | 1092 |
.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 @@ |
| 1134 | 1139 |
.charg_cont .area_tabcont.on{display: block;}
|
| 1135 | 1140 |
.charg_cont .area_tabcont .area_tit{font-size: 20px; font-weight: bold; color: #222; margin-left: 5px;}
|
| 1136 | 1141 |
.charg_cont .tType1{margin-bottom: 50px;}
|
| 1137 |
-.charg_cont .tType1 select, .charg_cont .tType1 button, .charg_cont .tType1 input{height: 40px; border-radius: 5px; display: inline-block;line-height:40px;}
|
|
| 1142 |
+.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;}
|
|
| 1138 | 1143 |
.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;}
|
| 1139 |
-.area_tabcont .tType1 button {background-color: var(--primary-color); padding: 0 20px; color: #fff; font-weight: normal; letter-spacing: -0.5px; font-size: 17px;}
|
|
| 1144 |
+.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;}
|
|
| 1140 | 1145 |
.charg_cont .tType1 input{border: 1px solid #ccc; margin-right: 5px; vertical-align: middle; margin-left: 8px;}
|
| 1141 | 1146 |
/* .charg_cont .tType1 input:nth-child(2) {margin-left: 0;} */
|
| 1142 | 1147 |
.charg_cont .tType1 .area_text{ font-size: 16px; font-weight: 300; color: #555;}
|
... | ... | @@ -1150,27 +1155,35 @@ |
| 1150 | 1155 |
.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;}
|
| 1151 | 1156 |
.charg_cont .tType1 .account_holder {display:inline-block;margin:0 0 0 -15px;font-size:16px;}
|
| 1152 | 1157 |
.charg_cont .tType1 .flex{display: flex; align-items: center;}
|
| 1153 |
-.charg_cont .tType1 .flex input{height: 40px; border: none;}
|
|
| 1158 |
+.charg_cont .tType1 .flex input{height: 40px; border: none; margin:0;}
|
|
| 1154 | 1159 |
.charg_cont .tType1 p.input_in{margin:0 0 0 5px;line-height: 1; font-size: 18px; display: inline-block; vertical-align: middle;}
|
| 1155 |
-.charg_cont .tType1 .flex button{border: 1px solid #b1b1b1; color: #222; font-size: 17px; background-color: #fff; padding: 0 13px; margin-right: 5px;}
|
|
| 1156 |
-.charg_cont .tType1 tbody tr.charge_content {border-bottom:0 none;}
|
|
| 1160 |
+.charg_cont .tType1 .flex button{border: 1px solid #d5d5d5; color: #333; font-size: 16px; background-color: #fff; padding: 0 20px;}
|
|
| 1157 | 1161 |
.charg_cont .tType1 tbody tr.charge_content .list_seType1 {width:180px;font-size:18px;border-color:#f2f2f2;background-color:#f2f2f2;cursor:pointer;}
|
| 1158 |
-.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;}
|
|
| 1159 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl {display:flex;letter-spacing:-0.025em;}
|
|
| 1160 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl dt {font-size:20px;font-weight:500;white-space:nowrap;}
|
|
| 1161 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul {display:flex;}
|
|
| 1162 |
-.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;}
|
|
| 1163 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li:first-child {padding-left:25px;}
|
|
| 1164 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li strong {font-size:22px;font-weight:700;color:#222;}
|
|
| 1165 |
-.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%);}
|
|
| 1166 |
-.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;}
|
|
| 1167 |
-.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;}
|
|
| 1168 |
-.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%);}
|
|
| 1169 |
-.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;}
|
|
| 1170 |
-.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;}
|
|
| 1171 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li.total {padding-right:0;font-size:20px;color:#222;}
|
|
| 1172 |
-.charg_cont .tType1 tbody tr td .amount_wrap dl dd ul li.total strong {color:#f43131;}
|
|
| 1173 |
-.charg_cont .tType1 tbody tr td .amount_wrap .btnType {width:210px;height:56px;font-size:20px;}
|
|
| 1162 |
+ |
|
| 1163 |
+.charg_cont .charge_content{border-bottom:1px solid #e5e5e5;}
|
|
| 1164 |
+.charg_cont .charge_content .flex{flex-wrap:wrap;gap:8px;}
|
|
| 1165 |
+.charg_cont .money_form_wrap{display:flex;width:100%;justify-content:flex-start;align-items:center;gap:8px;}
|
|
| 1166 |
+.charg_cont .money_form_wrap .money_input.error{border:1px solid var(--red-color);}
|
|
| 1167 |
+ |
|
| 1168 |
+.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;}
|
|
| 1169 |
+.amount_wrap dl {display:flex;letter-spacing:-0.025em;}
|
|
| 1170 |
+.amount_wrap dl dt {font-size:20px;font-weight:500;white-space:nowrap;}
|
|
| 1171 |
+.amount_wrap dl dd ul {display:flex;}
|
|
| 1172 |
+.amount_wrap dl dd ul li {position:relative;padding:0 30px;font-size:17px;font-weight:300;white-space:nowrap;color:#555;}
|
|
| 1173 |
+.amount_wrap dl dd ul li:first-child {padding-left:25px;}
|
|
| 1174 |
+.amount_wrap dl dd ul li strong {font-size:22px;font-weight:700;color:#000;margin:0 2px 0 0;}
|
|
| 1175 |
+.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%);}
|
|
| 1176 |
+.amount_wrap dl dd ul li .plus:before {content:'';position:absolute;left:12px;top:6px;width:3px;height:15px;background:#8f8f8f;}
|
|
| 1177 |
+.amount_wrap dl dd ul li .plus:after {content:'';position:absolute;left:6px;top:12px;width:15px;height:3px;background:#8f8f8f;}
|
|
| 1178 |
+.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%);}
|
|
| 1179 |
+.amount_wrap dl dd ul li .equal:before {content:'';position:absolute;left:6px;top:9px;width:15px;height:3px;background:#8f8f8f;}
|
|
| 1180 |
+.amount_wrap dl dd ul li .equal:after {content:'';position:absolute;left:6px;top:15px;width:15px;height:3px;background:#8f8f8f;}
|
|
| 1181 |
+.amount_wrap dl dd ul li.total {padding-right:0;font-size:20px;color:#222;}
|
|
| 1182 |
+.amount_wrap dl dd ul li.total strong {color:#f43131;}
|
|
| 1183 |
+.amount_wrap .btnType {width:210px;height:56px;font-size:20px;font-weight:600;}
|
|
| 1184 |
+ |
|
| 1185 |
+.charg_cont .amount_wrap{border:0;margin:0;padding:0 15px;}
|
|
| 1186 |
+ |
|
| 1174 | 1187 |
|
| 1175 | 1188 |
.info_bank{display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between;}
|
| 1176 | 1189 |
.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
... | ... | @@ -1,407 +1,419 @@ |
| 1 |
-:root{
|
|
| 2 |
- --primary-color:#176EE5; |
|
| 3 |
- --primary-color-hover:#1956B4; |
|
| 4 |
- --primary-light-color:#DBF0FA; |
|
| 5 |
- --primary-light-color-hover:#93D4F4; |
|
| 6 |
- --primary-lighter-color:#f4fbff; |
|
| 7 |
- --primary-dark-color:#1956B4; |
|
| 8 |
- --primary-dark-color-hover:#1A4B8E; |
|
| 9 |
- |
|
| 10 |
- --secondary-color:#4BB7ED; |
|
| 11 |
- --secondary-color-hover:#3C9DCE; |
|
| 12 |
- --secondary-light-color:#DBF0FA; |
|
| 13 |
- --secondary-light-color-hover:#93D4F4; |
|
| 14 |
- |
|
| 15 |
- --red-color:#F43131; |
|
| 16 |
- --red-color-hover:#D70202; |
|
| 17 |
- --red-light-color:#ffe5e5; |
|
| 18 |
- |
|
| 19 |
- --green-color:#15983A; |
|
| 20 |
- --green-color-hover:#0E9A1F; |
|
| 21 |
- |
|
| 22 |
- --gray-color:#888888; |
|
| 23 |
- --gray-color-hover:#666666; |
|
| 24 |
- --lightgray-color:#999999; |
|
| 25 |
- --lightgray-color-hover:#a3a3a3; |
|
| 26 |
- |
|
| 27 |
- --gray-border:#D5D5D5; |
|
| 28 |
- --darkgray-border:#B9B9B9; |
|
| 29 |
- --primary-light-border:#B1C6EE; |
|
| 30 |
- |
|
| 31 |
- --lightergray-bg:#f8f8f8; |
|
| 32 |
- --lightgray-bg:#f2f2f2; |
|
| 33 |
- --lightgray-bg-hover:#fafafa; |
|
| 34 |
-} |
|
| 35 |
- |
|
| 36 |
-/* ============================================= |
|
| 37 |
- 폰트 기본 |
|
| 38 |
-============================================= */ |
|
| 39 |
-.fwLg{font-weight:300!important;}
|
|
| 40 |
-.fwRg{font-weight:400!important;}
|
|
| 41 |
-.fwMd{font-weight:500!important;}
|
|
| 42 |
-.fwBold{font-weight:700!important;}
|
|
| 43 |
- |
|
| 44 |
-.c_white{color:#fff!important;}
|
|
| 45 |
-.c_002c9a{color:var(--primary-color)!important;}
|
|
| 46 |
-.c_e40000{color:#e40000!important;}
|
|
| 47 |
-.c_999999{color:#999!important;}
|
|
| 48 |
-.c_ffa200{color:var(--secondary-color)!important;}
|
|
| 49 |
-.c_19b32b{color:#19b32b!important;}
|
|
| 50 |
-.c_000{color:#000!important;}
|
|
| 51 |
-.c_222{color:#222!important;}
|
|
| 52 |
-.c_666{color:#666!important;}
|
|
| 53 |
- |
|
| 54 |
-.color_red{color:#F43131;}
|
|
| 55 |
- |
|
| 56 |
-/* ============================================= |
|
| 57 |
- 폰트 강조(GmarketSans Bold) |
|
| 58 |
-============================================= */ |
|
| 59 |
-.c_666_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#666!important;}
|
|
| 60 |
-.c_002c9a_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:var(--primary-color)!important;}
|
|
| 61 |
-.c_e40000_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#e40000!important;}
|
|
| 62 |
-.c_222_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#222!important;}
|
|
| 63 |
- |
|
| 64 |
-.sub_font{font-family:'GmarketSansBold';}
|
|
| 65 |
- |
|
| 66 |
-/* ============================================= |
|
| 67 |
- 테이블 유틸리티 |
|
| 68 |
-============================================= */ |
|
| 69 |
-.table{display:table;width:100%;}
|
|
| 70 |
-.table_cell{display:table-cell;vertical-align:middle;}
|
|
| 71 |
-.table_cell1{position:relative;display:table-cell;vertical-align:top;}
|
|
| 72 |
-.vMiddle{vertical-align:middle;}
|
|
| 73 |
-.tRight{text-align:right!important;}
|
|
| 74 |
-.tLeft{text-align:left!important;}
|
|
| 75 |
- |
|
| 76 |
-/* 기타 반복 사용 */ |
|
| 77 |
-.SortLine{position:relative;}
|
|
| 78 |
-.SortLine::before{position:absolute;top:50%;left:0;display:block;content:"";width:1px;height:12px;background:#b0b0b0;transform:translateY(-50%);}
|
|
| 79 |
-.text_deco{position:relative;padding-right:40px;}
|
|
| 80 |
-.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%);}
|
|
| 81 |
-.text_deco2{position:relative;padding-right:16px;}
|
|
| 82 |
-.text_deco2::after{position:absolute;top:50%;left:0;content:"";width:4px;height:4px;border-radius:50%;background-color:#23428b;transform:translateY(-50%);}
|
|
| 83 |
-.text_deco3{position:relative;padding-right:16px;}
|
|
| 84 |
-.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%);}
|
|
| 85 |
-.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;}
|
|
| 86 |
-.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;}
|
|
| 87 |
- |
|
| 88 |
-/* ===================== SORT BUTTON / CASE COUNT ===================== */ |
|
| 89 |
-.sort_wrap{display:inline-block;}
|
|
| 90 |
-.sort_wrap button:nth-child(1) img{margin-left:3px;}
|
|
| 91 |
-.sort_wrap button:nth-child(2) img{margin-left:-5px;}
|
|
| 92 |
-.sort_wrap button img{margin-bottom:5px;}
|
|
| 93 |
- |
|
| 94 |
-.sortBtn{margin:-3px 0 0;background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
|
|
| 95 |
-.sortBtnDesc{margin:-2px 0 0;background:url(/publish/images/sortDown.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
|
|
| 96 |
-.sortBtnAsc{background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
|
|
| 97 |
- |
|
| 98 |
-.numOfCase{position:absolute;top:57px;right:0;}
|
|
| 99 |
-.numOfCase p{display:inline-block;font-size:13px;}
|
|
| 100 |
-.numOfCase p:first-child span{font-weight:500;color:#e40000;}
|
|
| 101 |
-.numOfCase p:last-child span{font-weight:500;color:var(--primary-color);}
|
|
| 102 |
- |
|
| 103 |
-/* ========================================================================== */ |
|
| 104 |
-/* INPUT / SELECT — GLOBAL UNIFIED STYLE */ |
|
| 105 |
-/* ========================================================================== */ |
|
| 106 |
- |
|
| 107 |
-.form_area{display:flex;align-items:center;gap:8px;}
|
|
| 108 |
-.form_area.left{justify-content:flex-start;}
|
|
| 109 |
-.form_area.right{justify-content:flex-end;}
|
|
| 110 |
- |
|
| 111 |
-.form_area.column{flex-direction:column;}
|
|
| 112 |
- |
|
| 113 |
-select{border:1px solid #e5e5e5;vertical-align:middle;font-family:'Pretendard';font-weight:300;font-size:16px;}
|
|
| 114 |
-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;}
|
|
| 115 |
-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;}
|
|
| 116 |
-.list_selType1:focus{outline:none;}
|
|
| 117 |
-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;}
|
|
| 118 |
-.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;}
|
|
| 119 |
- |
|
| 120 |
-input{border:0;vertical-align:middle;box-sizing:border-box;font-family:'Pretendard';}
|
|
| 121 |
-input:focus{outline:none;}
|
|
| 122 |
-input::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 123 |
-input:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 124 |
-input[type="text"]{padding:0 10px;border-radius:3px;font-size:16px;}
|
|
| 125 |
-input[type="text"].readonly::placeholder{color:#222!important;}
|
|
| 126 |
-input[type="text"].readonly:-ms-input-placeholder{color:#222!important;}
|
|
| 127 |
-input[type="text"].inputLight::placeholder{color:#a6a6a6!important;}
|
|
| 128 |
-input[type="text"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
|
|
| 129 |
-input[type="password"]{padding:0 10px;border-radius:3px;font-size:16px;}
|
|
| 130 |
-input[type="password"].inputLight::placeholder{color:#a6a6a6!important;}
|
|
| 131 |
-input[type="password"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
|
|
| 132 |
-input.input_text{border:1px solid #d5d5d5;}
|
|
| 133 |
- |
|
| 134 |
-input[type="checkbox"]{width:16px;height:16px;border:1px solid #d6d8da;}
|
|
| 135 |
-input[type="radio"]{margin:2px 3px 0 0;}
|
|
| 136 |
-input[type="radio"]+label{margin-right:18px;font-size:16px;vertical-align:middle;}
|
|
| 137 |
-input[type="radio"].radio_big{margin:0;width:16px;height:16px;}
|
|
| 138 |
- |
|
| 139 |
-textarea{padding:15px;width:100%;box-sizing:border-box;font-family:'Pretendard';font-weight:300;font-size:16px;color:#666;}
|
|
| 140 |
-textarea::-webkit-scrollbar{width:7px;}
|
|
| 141 |
-textarea::-webkit-scrollbar-thumb{background:#c3c6c7;border-radius:3px;}
|
|
| 142 |
-textarea::-webkit-scrollbar-thumb:active{background:#808080;}
|
|
| 143 |
-textarea::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 144 |
-textarea:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 145 |
-.textarea_gray_type{padding:24px 20px;border-radius:5px;background-color:#f2f2f2;border:none;}
|
|
| 146 |
- |
|
| 147 |
-/* ============================================= |
|
| 148 |
- 인풋 클리어 버튼 제거 (IE 대응) |
|
| 149 |
-============================================= */ |
|
| 150 |
-input[type=text]::-ms-celar, |
|
| 151 |
-input[type=password]::-ms-clear, |
|
| 152 |
-input[type=email]::-ms-clear, |
|
| 153 |
-input[type=number]::-ms-clear, |
|
| 154 |
-input[type=tel]::-ms-clear{display:none;width:0;height:0;}
|
|
| 155 |
- |
|
| 156 |
-input[type=text]::-ms-reveal, |
|
| 157 |
-input[type=password]::-ms-reveal, |
|
| 158 |
-input[type=email]::-ms-reveal, |
|
| 159 |
-input[type=number]::-ms-reveal, |
|
| 160 |
-input[type=tel]::-ms-reveal{display:none;width:0;height:0;}
|
|
| 161 |
- |
|
| 162 |
-.w100{width:100%;}
|
|
| 163 |
-.h100{height:100%;}
|
|
| 164 |
- |
|
| 165 |
- |
|
| 166 |
- |
|
| 167 |
-/* ============================================= |
|
| 168 |
- 테이블 타입 |
|
| 169 |
-============================================= */ |
|
| 170 |
- |
|
| 171 |
-.tType1 {width: 100%;text-align: left;table-layout: fixed;}
|
|
| 172 |
-.tType1 tbody tr {border-bottom: 1px solid #e5e5e5;}
|
|
| 173 |
-.tType1 tbody tr:first-child{border-top: 2px solid #000;}
|
|
| 174 |
-.tType1 tbody tr th {min-width: 75px; height: 55px; vertical-align: middle;font-size: 17px; text-align: left;}
|
|
| 175 |
-.tType1 tbody tr th .essential {display:inline-block;margin:4px 2px 0 0;vertical-align:top;color:#e40000;}
|
|
| 176 |
-.tType1 tbody tr th.vTop {vertical-align: top; padding-top: 20px; line-height: 1.2;}
|
|
| 177 |
-.tType1 tbody tr td {vertical-align: middle;font-weight: 300;line-height: 1.3; padding: 10px 0;}
|
|
| 178 |
-.tType1 tbody tr td p {line-height: 1.4;}
|
|
| 179 |
-.tType1 tbody tr td.send_cf {font-size: 18px;}
|
|
| 180 |
-.tType1 tbody tr td.putText {padding: 10px 0;}
|
|
| 181 |
-.tType1 tbody tr td.putText>div {display: flex; width: 100%;}
|
|
| 182 |
-.tType1 tbody tr td.putText>p:last-child {color: #555; font-size: 14px; padding-top: 10px;}
|
|
| 183 |
-.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;*/}
|
|
| 184 |
-.tType1 tbody tr td.putText .put_left .text_length {position: relative;min-height: 28px;margin:0 0 15px;border-radius: 0 0 5px 5px;}
|
|
| 185 |
-.tType1 tbody tr td.putText .put_left .text_length>div:first-child {font-size: 15px; padding-left: 10px;}
|
|
| 186 |
-.tType1 tbody tr td.putText .put_left .text_length>div:last-child {position: absolute;bottom: 0;right: 10px;}
|
|
| 187 |
-.tType1 tbody tr td.putText .put_left .text_length p {display: inline-block;padding-right: 10px;}
|
|
| 188 |
-.tType1 tbody tr td.putText .put_right { width: 26%; max-width: 200px; position: relative;}
|
|
| 189 |
-.tType1 tbody tr td.putText .put_right>button {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
|
|
| 190 |
-.tType1 tbody tr td.putText .put_right .btn_popup_wrap button:not(.btn_close) {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
|
|
| 191 |
-.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;}
|
|
| 192 |
-.tType1 tbody tr td.putText .put_right .send_btnWrap {position: absolute;bottom: 0;right:0;width: calc(100% - 10px);}
|
|
| 193 |
-.tType1 tbody tr td.putText .put_right .send_btnWrap button {width: 48.5%;}
|
|
| 194 |
-.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;}
|
|
| 195 |
-.tType1 tbody tr td.putText .put_left.short textarea {height: 190px;margin:10px 0;padding:0 5px;}
|
|
| 196 |
-.tType1 tbody tr td.putText .put_left.short textarea::placeholder {color: #b5b5b5;}
|
|
| 197 |
-.tType1 tbody tr td.putText .put_left.short.on {border: 1px solid var(--primary-color);border-radius: 5px;background-color: #eef2f9 !important;}
|
|
| 198 |
-.tType1 tbody tr td.putText .put_left.long textarea {height: 380px;}
|
|
| 199 |
-.tType1 tbody tr td.putText .put_left.long.on {border: 1px solid #12bec9;border-radius: 5px;background-color: #eef5f9 !important;}
|
|
| 200 |
-.tType1 tbody tr td.putText .put_left.photo.on {border: 1px solid #e26ba9;border-radius: 5px;background-color: #f8f1f5 !important;}
|
|
| 201 |
-.tType1 tbody tr.msg_title {display:none;}
|
|
| 202 |
-.tType1 tbody tr.msg_title.active {display:table-row;}
|
|
| 203 |
-.tType1 tbody tr.msg_title td .title_wrap .textbox {display:none;margin:10px 0 0;}
|
|
| 204 |
-.tType1 tbody tr.msg_title td .title_wrap .textbox.active {display:block;}
|
|
| 205 |
- |
|
| 206 |
-.tType1_title {font-size: 20px; font-weight: 600; position: relative; height: 40px;}
|
|
| 207 |
-.tType1_title button {position: absolute;top: 22%; right: 0; transform: translateY(-50%); background-color: var(--primary-color); height: 40px; padding: 0 15px; color: #fff;}
|
|
| 208 |
-.tType1_title>span {font-size: 16px; font-weight: 300; color: #666;}
|
|
| 209 |
-.tType1 tbody tr td.send_list {position: relative;display: flex; justify-content: space-between;}
|
|
| 210 |
-.tType1 tbody tr td.send_list .list_left, .tType1 tbody tr td.send_list .list_right {width: calc(100%/2 - 25px);min-width: 290px;}
|
|
| 211 |
-.tType1 tbody tr td.send_list .list_left {left: 0;position: relative;}
|
|
| 212 |
-.tType1 tbody tr td.send_list .list_left .add_num {height: 90px;}
|
|
| 213 |
-.tType1 tbody tr td.send_list .list_left .add_num input[type="text"] {width: calc(100% - 97px);min-width: 200px;}
|
|
| 214 |
-.tType1 tbody tr td.send_list .list_left .add_num input[type="text"]::placeholder {color: #a6a6a6; font-weight: 300;}
|
|
| 215 |
-.tType1 tbody tr td.send_list .list_left .add_num>span {color: #e40000;font-size: 13px;font-weight: 400;line-height: 39px;}
|
|
| 216 |
-.tType1 tbody tr td .text_req {display: inline-block; color: #999; font-size: 17px; font-weight: 300; vertical-align: middle;}
|
|
| 217 |
- |
|
| 218 |
- |
|
| 219 |
-.tType1 tbody tr td.send_list .list_right {right: 0;}
|
|
| 220 |
-.tType1 tbody tr td.send_list .list_right .list_btnWrap {display: flex;flex-flow: wrap;justify-content: space-between;}
|
|
| 221 |
-.tType1 tbody tr td.send_list .list_right .list_btnWrap button {height: 37px;width: calc(100%/3 - 3px);margin-bottom: 5px;}
|
|
| 222 |
- |
|
| 223 |
-.tType1 tbody tr td.send_list .add_btn {position: absolute; right: 0; top: 0;}
|
|
| 224 |
-.tType1 tbody tr td.send_list .add_btn button {min-width: 95px; height: 32px; font-size: 14px;}
|
|
| 225 |
-.tType1 tbody tr td.send_list .add_remove {text-align: center;margin: 40px 4px 0 4px;align-self: center;}
|
|
| 226 |
-.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;}
|
|
| 227 |
-.tType1 tbody tr td.send_list .add_remove button:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
| 228 |
-.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;}
|
|
| 229 |
-.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;}
|
|
| 230 |
- |
|
| 231 |
-.tType1 tbody tr th.billingAmount {position: relative;line-height: 1;vertical-align: middle;}
|
|
| 232 |
-.tType1 tbody tr th.billingAmount>div {background-color: #f2f2f2;border-radius: 5px;padding: 23px 30px;margin: 20px 0; position: relative;}
|
|
| 233 |
-.tType1 tbody tr th.billingAmount>div .final_pay {position: relative; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
|
|
| 234 |
-.tType1 tbody tr th.billingAmount>div p:first-child {font-size: 20px;font-weight: 500;}
|
|
| 235 |
-.tType1 tbody tr th.billingAmount>div p:last-child {font-size: 20px;}
|
|
| 236 |
-.tType1 tbody tr th.billingAmount>div p span#totalPriceTxt {font-size: 24px;color: #e40000;font-weight: 500;}
|
|
| 237 |
-.tType1 tbody tr th.billingAmount>div p span:last-child {font-size: 16px;color: #888;font-weight: 300;}
|
|
| 238 |
-.tType1 tbody tr th.billingAmount .pay_info_list p {float:left;line-height:35px;}
|
|
| 239 |
-.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;}
|
|
| 240 |
-.tType1 tbody tr th.billingAmount .pay_info_list .info strong {font-size:18px;font-weight:700;color:var(--primary-color);}
|
|
| 241 |
-.tType1 tbody tr th.billingAmount .pay_info_list .info span {margin:0 8px 0 7px;}
|
|
| 242 |
-.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;}
|
|
| 243 |
-.tType1 tbody tr th.billingAmount button.cal_btn:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
| 244 |
-.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;}
|
|
| 245 |
-.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;}
|
|
| 246 |
-.tType1 tbody tr th.billingAmount .pay_type button.btn_event_cash{width: 100px;}
|
|
| 247 |
-.tType1 tbody tr th.billingAmount .pay_type:last-child {margin-top: 10px;}
|
|
| 248 |
-.tType1 tbody tr th.billingAmount .pay_type>div:first-child {float: left;margin:0 0 0 5px;}
|
|
| 249 |
-.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;}
|
|
| 250 |
-.tType1 tbody tr th.billingAmount .pay_type>div:last-child {float: right;}
|
|
| 251 |
-.tType1 tbody tr th.billingAmount .pay_type>div:only-child{float: left;}
|
|
| 252 |
-.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label {font-size: 16px;}
|
|
| 253 |
-.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label span {font-size: 17px; font-weight: 700;}
|
|
| 254 |
-.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;}
|
|
| 255 |
-.tType1 tbody tr th.billingAmount .pay_type input[type="text"]::placeholder {color: #000; font-size: 16px; text-align: right; font-weight: 500;}
|
|
| 256 |
-.tType1 tbody tr th.billingAmount .pay_type button {width: 78px; margin-left: 5px;}
|
|
| 257 |
- |
|
| 258 |
-.tType1 tbody tr td.check_num>div {display: inline-block;}
|
|
| 259 |
-.tType1 tbody tr td.check_num>div button {height: 40px; padding: 0 5px;}
|
|
| 260 |
-.tType1 tbody input[type="text"] {height: 40px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px;line-height:38px;}
|
|
| 261 |
-.tType1 tbody input[type="password"] {height: 50px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px; font-size: 16px;}
|
|
| 262 |
-.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;}
|
|
| 263 |
-.tType1 tbody input[type="text"]::placeholder {color: #a6a6a6;}
|
|
| 264 |
-.tType1 tbody input:disabled {background-color: #dedede;}
|
|
| 265 |
- |
|
| 266 |
- |
|
| 267 |
-.tType3 {width: 100%; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box;}
|
|
| 268 |
-.tType3.payDetail {margin-bottom: 50px;}
|
|
| 269 |
-.tType3.usageDetail {margin-bottom: 50px;}
|
|
| 270 |
-.tType3.payDetail {margin: -15px 0 10px 0;}
|
|
| 271 |
-.payDetail .tType3_hd>div:nth-child(1), .payDetail .tType3_bd>div:nth-child(1) {width: 40px;}
|
|
| 272 |
-.payDetail .tType3_hd>div:nth-child(2), .payDetail .tType3_bd>div:nth-child(2) {width: 20%;}
|
|
| 273 |
-.payDetail .tType3_hd>div:nth-child(3), .payDetail .tType3_bd>div:nth-child(3) {width: 17%;}
|
|
| 274 |
-.payDetail .tType3_hd>div:nth-child(4), .payDetail .tType3_bd>div:nth-child(4) {width: 15%;}
|
|
| 275 |
-.payDetail .tType3_hd>div:nth-child(5), .payDetail .tType3_bd>div:nth-child(5) {width: 17%;}
|
|
| 276 |
-.payDetail .tType3_hd>div:nth-child(6), .payDetail .tType3_bd>div:nth-child(6) {width: 15%;}
|
|
| 277 |
-.payDetail .tType3_hd>div:nth-child(7), .payDetail .tType3_bd>div:nth-child(7) {width: 17%;}
|
|
| 278 |
- |
|
| 279 |
-.table_cont {display: none;}
|
|
| 280 |
-.table_cont.current {display: block;}
|
|
| 281 |
- |
|
| 282 |
-.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;}
|
|
| 283 |
-.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;}
|
|
| 284 |
-.tType3 .tType3_hd>div:first-child {border-left:0;}
|
|
| 285 |
-.tType3 .font_ellipsis {position:relative;}
|
|
| 286 |
- |
|
| 287 |
-.tType3 .tType3_bd {display:flex;height:40px;box-sizing:border-box;text-align:center;}
|
|
| 288 |
-.tType3 .tType3_bd span {font-weight:400;}
|
|
| 289 |
-.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;}
|
|
| 290 |
-.tType3 .tType3_bd>div:first-child {border-left: 0;}
|
|
| 291 |
-.tType3 .tType3_bd:last-child>div {border-bottom: 0;}
|
|
| 292 |
-.tType3 .tType3_bd .table_certify {font-weight: 400;}
|
|
| 293 |
-.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;}
|
|
| 294 |
-.tType3 .tType3_bd .input_wrap2 input[type="text"]::placeholder {color: #555;}
|
|
| 295 |
-.tType3 .tType3_bd .input_wrap2 input[type="text"]:-ms-input-placeholder {color: #555;}
|
|
| 296 |
-.tType3 .tType3_bd .btnType14 {height: 28px; padding: 0 11.5px; vertical-align: baseline; line-height: 28px;}
|
|
| 297 |
-.tType3 .tType3_bd input[type="radio"] {margin-top: 0; margin-right: 0; vertical-align: revert;}
|
|
| 298 |
- |
|
| 299 |
-.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;}
|
|
| 300 |
-.tb_wrap:after {position:absolute;content:'';width:calc(100% - 4px);height:1px;background:#d5d5d5;left:2px;bottom:0;}
|
|
| 301 |
-.tType4{width:100%;table-layout:fixed;}
|
|
| 302 |
-.tType4 thead{position:relative;background:#f8f8f8;z-index:0;}
|
|
| 303 |
-.tType4 thead tr:only-child th{height:36px;}
|
|
| 304 |
-.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;}
|
|
| 305 |
-.tType4 thead th:last-child{border-right: 0;}
|
|
| 306 |
-.tType4 .sort_wrap{display: inline-block;}
|
|
| 307 |
-.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;}
|
|
| 308 |
-.tType4 tbody td.tb_tit{text-align: left; position: relative;}
|
|
| 309 |
-.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;}
|
|
| 310 |
-.tType4 tbody tr:only-child:last-child td{border-bottom: 1px solid #ccc;}
|
|
| 311 |
-.tType4 tbody td:last-child{border-right: 0;}
|
|
| 312 |
-.tType4 tbody td>p{width: 100%; line-height: 38px; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.5px; overflow: hidden;margin: 0 auto;}
|
|
| 313 |
-.tType4 tbody td span {font-weight: 400;}
|
|
| 314 |
-.tType4 td input[type="text"]{height: 28px; display: inline-block; border: 1px solid #e5e5e5; margin-right: 5px;}
|
|
| 315 |
-.tType4 tbody .btnType14 {height: 28px;}
|
|
| 316 |
-.tType4 .memo_text {width: calc(100% - 35px); margin-right: 5px; display: inline-block; text-align: left; vertical-align: inherit;}
|
|
| 317 |
-.tType4 tbody td span.textReject {line-height:28px;}
|
|
| 318 |
-.tType4 tbody td .btnTypeReject {margin:0 0 0 3px;line-height:26px;letter-spacing:0;text-align:center;vertical-align:top;}
|
|
| 319 |
-.tType4 tbody td.result_cont a {text-align: left!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
|
| 320 |
-.tType4 tbody td.result_cont .result_tit { }
|
|
| 321 |
-.tType4 tbody td .cancel_date {font-size:14px; color:#666; display: block;}
|
|
| 322 |
- |
|
| 323 |
-/* ============================================= |
|
| 324 |
- 탭 타입 |
|
| 325 |
-============================================= */ |
|
| 326 |
-.top_content {display: none;}
|
|
| 327 |
-.top_content.current {display: block;}
|
|
| 328 |
-.custom_content {display: none;}
|
|
| 329 |
-.custom_content.current {display: block;}
|
|
| 330 |
-.bottom_content {display: none;}
|
|
| 331 |
-.bottom_content.current {display: block;}
|
|
| 332 |
-.popup_cont {display: none;}
|
|
| 333 |
-.popup_cont.current {display: block;}
|
|
| 334 |
-.history_cont {display: none;}
|
|
| 335 |
-.history_cont.current {display: block;}
|
|
| 336 |
-.alarm_cont {display: none;}
|
|
| 337 |
-.alarm_cont.current {display: block;}
|
|
| 338 |
-.pay_cont {display: none;}
|
|
| 339 |
-.pay_cont.current {display: block;}
|
|
| 340 |
-.fee_cont {display: none;}
|
|
| 341 |
-.fee_cont.current {display: block;}
|
|
| 342 |
- |
|
| 343 |
-.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;}
|
|
| 344 |
-.tabType1 li{position:relative;flex:1;}
|
|
| 345 |
-.tabType1 li button{position:relative;width:100%;height:60px;padding:13px 0;font-size:18px;color:#222;border-radius:8px;z-index:1;}
|
|
| 346 |
-.tabType1 li.active button {border:1px solid var(--primary-color);background-color:var(--primary-color);font-weight:600;color:#fff;}
|
|
| 347 |
- |
|
| 348 |
-.mypage_content .tabType1 {background-color: #f4f4f5; color: #222; margin-top: 40px;}
|
|
| 349 |
-.mypage_content .tabType1 li.active button {background-color: var(--secondary-light-color); color: #222;}
|
|
| 350 |
- |
|
| 351 |
-.pay_tab_wrap .tabType1 {background-color: #f4f4f5; color: #222; margin: 30px 0 ;border:0 none;border-radius:5px;}
|
|
| 352 |
-.pay_tab_wrap .tabType1 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background-color: #d5d5d5;}
|
|
| 353 |
-.pay_tab_wrap .tabType1 li:last-child::after {content: none;}
|
|
| 354 |
-.pay_tab_wrap .tabType1 li button{height:53px;font-size:16px;}
|
|
| 355 |
-.pay_tab_wrap .tabType1 li:first-child button {border-radius:5px 0 0 5px;}
|
|
| 356 |
-.pay_tab_wrap .tabType1 li:last-child button {border-radius:0 5px 5px 0;}
|
|
| 357 |
-.pay_tab_wrap .tabType1 li.active {background-color:transparent;}
|
|
| 358 |
-.pay_tab_wrap .tabType1 li.active::after {content: none;}
|
|
| 359 |
-.pay_tab_wrap .tabType1 li.active button {background-color: var(--secondary-color); border:1px solid var(--secondary-color-hover);color: #FFF;border-radius:5px;}
|
|
| 360 |
-.pay_tab_wrap .tabType1 li.active button:before {display:none;}
|
|
| 361 |
-.pay_tab_wrap .tabType1 li.active button:after {display:none;}
|
|
| 362 |
- |
|
| 363 |
-.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;}
|
|
| 364 |
-.tabType2::after {position:absolute;content: "";width:calc(100% + 600px);height:2px;background:#1E3862;bottom:0;left:0;}
|
|
| 365 |
-.tabType2 li {flex-basis:calc(100% /4);min-width: 200px;}
|
|
| 366 |
-.tabType2 li button {width: 100%;padding:13px 0;font-size:20px;border-left:1px solid #f2f2f2;background:#fff;}
|
|
| 367 |
-.tabType2 li:nth-child(3) button {border-left:0;}
|
|
| 368 |
-.tabType2 li:first-child button {border-left:0;border-radius:10px 0 0 0;}
|
|
| 369 |
-.tabType2 li:last-child button {border-radius:0 10px 0 0;}
|
|
| 370 |
-.tabType2 li.active button {background:#1E3862;border-radius:10px 10px 0 0;color:#fff;border-left:1px solid transparent;}
|
|
| 371 |
- |
|
| 372 |
-.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;}
|
|
| 373 |
-.tabType4 li {flex: 1; position: relative;}
|
|
| 374 |
-.tabType4 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background-color: #d5d5d5;}
|
|
| 375 |
-.tabType4 li:last-child::after {content: none;}
|
|
| 376 |
-.tabType4 li.active::after {content: none;}
|
|
| 377 |
-.tabType4 li button {position:relative;width: 100%; height: 50px; padding: 12px 0;font-size: 18px; letter-spacing: -0.5px;}
|
|
| 378 |
-.tabType4 li.active button {color:#fff;border:1px solid var(--primary-color);background-color:var(--primary-color);border-radius:8px;}
|
|
| 379 |
-/* .tabType4 li.active button:before {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;} */
|
|
| 380 |
-/* .tabType4 li.active button:after {content:'';position:absolute;left:-5px;top:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;} */
|
|
| 381 |
-.tabType4.tabTwo li {flex-basis: calc(100%/2);}
|
|
| 382 |
- |
|
| 383 |
-.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;}
|
|
| 384 |
-.tabType5 li {flex-basis: calc(100%/3); position: relative;}
|
|
| 385 |
-.tabType5 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: #c7c8c8;}
|
|
| 386 |
-.tabType5 li:last-child::after {content: none;}
|
|
| 387 |
-.tabType5 li.active::after {content: none;}
|
|
| 388 |
-.tabType5 li button {width: 100%;height: 45px; font-size: 18px;}
|
|
| 389 |
-.tabType5 li.active button {background-color: #46484a;border-radius: 5px 5px 0 0;color: #fff; font-weight: 300;}
|
|
| 390 |
- |
|
| 391 |
-.tabType6 {background-color: #fff;width: 100%;border-bottom: 1px solid #e5e5e5; display: flex;text-align: center;}
|
|
| 392 |
-.tabType6 li {flex-basis: calc(100%/2);}
|
|
| 393 |
-.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;}
|
|
| 394 |
-.tabType6 li.active button {background-color: #c8c8c8;border-radius: 5px 5px 0 0; border: 1px solid #c8c8c8;}
|
|
| 395 |
-.pay_refund_cont .pay_tType1 {margin-top:-20px;}
|
|
| 396 |
-.pay_refund_cont .pay_tType1 tbody tr:first-child {border-top:0 none;}
|
|
| 397 |
- |
|
| 398 |
-/* ============================================= |
|
| 399 |
- 캘린더 |
|
| 400 |
-============================================= */ |
|
| 401 |
-.calendar_wrap {position:relative;display: inline-block;}
|
|
| 402 |
-.calendar_wrap>span {font-weight: 500;}
|
|
| 403 |
-.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;}
|
|
| 404 |
-.calendar_in {position: relative;display: inline;}
|
|
| 405 |
-.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%);}
|
|
| 406 |
-.calendar_in .calendar-frame {border: 0;height: 290px;width: 320px;}
|
|
| 1 |
+:root{
|
|
| 2 |
+ --primary-color:#176EE5; |
|
| 3 |
+ --primary-color-hover:#1956B4; |
|
| 4 |
+ --primary-light-color:#DBF0FA; |
|
| 5 |
+ --primary-light-color-hover:#93D4F4; |
|
| 6 |
+ --primary-lighter-color:#f4fbff; |
|
| 7 |
+ --primary-dark-color:#1956B4; |
|
| 8 |
+ --primary-dark-color-hover:#1A4B8E; |
|
| 9 |
+ |
|
| 10 |
+ --secondary-color:#4BB7ED; |
|
| 11 |
+ --secondary-color-hover:#3C9DCE; |
|
| 12 |
+ --secondary-light-color:#DBF0FA; |
|
| 13 |
+ --secondary-light-color-hover:#93D4F4; |
|
| 14 |
+ |
|
| 15 |
+ --red-color:#F43131; |
|
| 16 |
+ --red-color-hover:#D70202; |
|
| 17 |
+ --red-light-color:#ffe5e5; |
|
| 18 |
+ |
|
| 19 |
+ --green-color:#15983A; |
|
| 20 |
+ --green-color-hover:#0E9A1F; |
|
| 21 |
+ |
|
| 22 |
+ --blue-color:#176EE5; |
|
| 23 |
+ --blue-color-hover:#1956B4; |
|
| 24 |
+ |
|
| 25 |
+ --gray-color:#888888; |
|
| 26 |
+ --gray-color-hover:#666666; |
|
| 27 |
+ --lightgray-color:#999999; |
|
| 28 |
+ --lightgray-color-hover:#a3a3a3; |
|
| 29 |
+ |
|
| 30 |
+ --gray-border:#D5D5D5; |
|
| 31 |
+ --darkgray-border:#B9B9B9; |
|
| 32 |
+ --primary-light-border:#B1C6EE; |
|
| 33 |
+ |
|
| 34 |
+ --lightergray-bg:#f8f8f8; |
|
| 35 |
+ --lightgray-bg:#f2f2f2; |
|
| 36 |
+ --lightgray-bg-hover:#fafafa; |
|
| 37 |
+} |
|
| 38 |
+ |
|
| 39 |
+/* ============================================= |
|
| 40 |
+ 폰트 기본 |
|
| 41 |
+============================================= */ |
|
| 42 |
+.fwLg{font-weight:300!important;}
|
|
| 43 |
+.fwRg{font-weight:400!important;}
|
|
| 44 |
+.fwMd{font-weight:500!important;}
|
|
| 45 |
+.fwBold{font-weight:700!important;}
|
|
| 46 |
+ |
|
| 47 |
+.fs_18{font-size:18px;font-weight:bold;}
|
|
| 48 |
+.fs_16{font-size:16px;font-weight:bold;}
|
|
| 49 |
+.fs_14{font-size:14px;}
|
|
| 50 |
+ |
|
| 51 |
+.c_white{color:#fff!important;}
|
|
| 52 |
+.c_002c9a{color:var(--primary-color)!important;}
|
|
| 53 |
+.c_e40000{color:#e40000!important;}
|
|
| 54 |
+.c_999999{color:#999!important;}
|
|
| 55 |
+.c_ffa200{color:var(--secondary-color)!important;}
|
|
| 56 |
+.c_19b32b{color:#19b32b!important;}
|
|
| 57 |
+.c_000{color:#000!important;}
|
|
| 58 |
+.c_222{color:#222!important;}
|
|
| 59 |
+.c_666{color:#666!important;}
|
|
| 60 |
+ |
|
| 61 |
+.color_red{color:var(--red-color);}
|
|
| 62 |
+.color_blue{color:var(--blue-color);}
|
|
| 63 |
+.color_green{color:var(--green-color);}
|
|
| 64 |
+ |
|
| 65 |
+/* ============================================= |
|
| 66 |
+ 폰트 강조(GmarketSans Bold) |
|
| 67 |
+============================================= */ |
|
| 68 |
+.c_666_g{padding:0 4px 0 0;font-family:
|
|
| 69 |
+;font-size:26px;color:#666!important;} |
|
| 70 |
+.c_002c9a_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:var(--primary-color)!important;}
|
|
| 71 |
+.c_e40000_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#e40000!important;}
|
|
| 72 |
+.c_222_g{padding:0 4px 0 0;font-family:'GmarketSansBold';font-size:26px;color:#222!important;}
|
|
| 73 |
+ |
|
| 74 |
+.sub_font{font-family:'GmarketSansBold';}
|
|
| 75 |
+ |
|
| 76 |
+/* ============================================= |
|
| 77 |
+ 테이블 유틸리티 |
|
| 78 |
+============================================= */ |
|
| 79 |
+.table{display:table;width:100%;}
|
|
| 80 |
+.table_cell{display:table-cell;vertical-align:middle;}
|
|
| 81 |
+.table_cell1{position:relative;display:table-cell;vertical-align:top;}
|
|
| 82 |
+.vMiddle{vertical-align:middle;}
|
|
| 83 |
+.tRight{text-align:right!important;}
|
|
| 84 |
+.tLeft{text-align:left!important;}
|
|
| 85 |
+ |
|
| 86 |
+/* 기타 반복 사용 */ |
|
| 87 |
+.SortLine{position:relative;}
|
|
| 88 |
+.SortLine::before{position:absolute;top:50%;left:0;display:block;content:"";width:1px;height:12px;background:#b0b0b0;transform:translateY(-50%);}
|
|
| 89 |
+.text_deco{position:relative;padding-right:40px;}
|
|
| 90 |
+.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%);}
|
|
| 91 |
+.text_deco2{position:relative;padding-right:16px;}
|
|
| 92 |
+.text_deco2::after{position:absolute;top:50%;left:0;content:"";width:4px;height:4px;border-radius:50%;background-color:#23428b;transform:translateY(-50%);}
|
|
| 93 |
+.text_deco3{position:relative;padding-right:16px;}
|
|
| 94 |
+.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%);}
|
|
| 95 |
+.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;}
|
|
| 96 |
+.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;}
|
|
| 97 |
+ |
|
| 98 |
+ |
|
| 99 |
+/* ===================== SORT BUTTON / CASE COUNT ===================== */ |
|
| 100 |
+.sort_wrap{display:inline-block;}
|
|
| 101 |
+.sort_wrap button:nth-child(1) img{margin-left:3px;}
|
|
| 102 |
+.sort_wrap button:nth-child(2) img{margin-left:-5px;}
|
|
| 103 |
+.sort_wrap button img{margin-bottom:5px;}
|
|
| 104 |
+ |
|
| 105 |
+.sortBtn{margin:-3px 0 0;background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
|
|
| 106 |
+.sortBtnDesc{margin:-2px 0 0;background:url(/publish/images/sortDown.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
|
|
| 107 |
+.sortBtnAsc{background:url(/publish/images/sortUp.png) no-repeat center;background-color:transparent;border:0;height:14px;cursor:pointer;}
|
|
| 108 |
+ |
|
| 109 |
+.numOfCase{position:absolute;top:57px;right:0;}
|
|
| 110 |
+.numOfCase p{display:inline-block;font-size:13px;}
|
|
| 111 |
+.numOfCase p:first-child span{font-weight:500;color:#e40000;}
|
|
| 112 |
+.numOfCase p:last-child span{font-weight:500;color:var(--primary-color);}
|
|
| 113 |
+ |
|
| 114 |
+/* ========================================================================== */ |
|
| 115 |
+/* INPUT / SELECT — GLOBAL UNIFIED STYLE */ |
|
| 116 |
+/* ========================================================================== */ |
|
| 117 |
+ |
|
| 118 |
+.form_area{display:flex;align-items:center;gap:8px;}
|
|
| 119 |
+.form_area.left{justify-content:flex-start;}
|
|
| 120 |
+.form_area.right{justify-content:flex-end;}
|
|
| 121 |
+ |
|
| 122 |
+.form_area.column{flex-direction:column;}
|
|
| 123 |
+ |
|
| 124 |
+select{border:1px solid #e5e5e5;vertical-align:middle;font-family:'Pretendard';font-weight:300;font-size:16px;}
|
|
| 125 |
+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;}
|
|
| 126 |
+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;}
|
|
| 127 |
+.list_selType1:focus{outline:none;}
|
|
| 128 |
+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;}
|
|
| 129 |
+.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;}
|
|
| 130 |
+ |
|
| 131 |
+input{border:0;vertical-align:middle;box-sizing:border-box;font-family:'Pretendard';}
|
|
| 132 |
+input:focus{outline:none;}
|
|
| 133 |
+input::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 134 |
+input:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 135 |
+input[type="text"]{padding:0 10px;border-radius:3px;font-size:16px;}
|
|
| 136 |
+input[type="text"]:active{border:1px solid var(--blue-color);}
|
|
| 137 |
+input[type="text"].readonly::placeholder{color:#222!important;}
|
|
| 138 |
+input[type="text"].readonly:-ms-input-placeholder{color:#222!important;}
|
|
| 139 |
+input[type="text"].inputLight::placeholder{color:#a6a6a6!important;}
|
|
| 140 |
+input[type="text"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
|
|
| 141 |
+input[type="password"]{padding:0 10px;border-radius:3px;font-size:16px;}
|
|
| 142 |
+input[type="password"].inputLight::placeholder{color:#a6a6a6!important;}
|
|
| 143 |
+input[type="password"].inputLight:-ms-input-placeholder{color:#a6a6a6!important;}
|
|
| 144 |
+input.input_text{border:1px solid #d5d5d5;}
|
|
| 145 |
+ |
|
| 146 |
+input[type="checkbox"]{width:16px;height:16px;border:1px solid #d6d8da;}
|
|
| 147 |
+input[type="radio"]{margin:2px 3px 0 0;}
|
|
| 148 |
+input[type="radio"]+label{margin-right:18px;font-size:16px;vertical-align:middle;}
|
|
| 149 |
+input[type="radio"].radio_big{margin:0;width:16px;height:16px;}
|
|
| 150 |
+ |
|
| 151 |
+textarea{padding:15px;width:100%;box-sizing:border-box;font-family:'Pretendard';font-weight:300;font-size:16px;color:#666;}
|
|
| 152 |
+textarea::-webkit-scrollbar{width:7px;}
|
|
| 153 |
+textarea::-webkit-scrollbar-thumb{background:#c3c6c7;border-radius:3px;}
|
|
| 154 |
+textarea::-webkit-scrollbar-thumb:active{background:#808080;}
|
|
| 155 |
+textarea::placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 156 |
+textarea:-ms-input-placeholder{font-family:'Pretendard';font-weight:300;color:#a6a6a6!important;}
|
|
| 157 |
+.textarea_gray_type{padding:24px 20px;border-radius:5px;background-color:#f2f2f2;border:none;}
|
|
| 158 |
+ |
|
| 159 |
+/* ============================================= |
|
| 160 |
+ 인풋 클리어 버튼 제거 (IE 대응) |
|
| 161 |
+============================================= */ |
|
| 162 |
+input[type=text]::-ms-celar, |
|
| 163 |
+input[type=password]::-ms-clear, |
|
| 164 |
+input[type=email]::-ms-clear, |
|
| 165 |
+input[type=number]::-ms-clear, |
|
| 166 |
+input[type=tel]::-ms-clear{display:none;width:0;height:0;}
|
|
| 167 |
+ |
|
| 168 |
+input[type=text]::-ms-reveal, |
|
| 169 |
+input[type=password]::-ms-reveal, |
|
| 170 |
+input[type=email]::-ms-reveal, |
|
| 171 |
+input[type=number]::-ms-reveal, |
|
| 172 |
+input[type=tel]::-ms-reveal{display:none;width:0;height:0;}
|
|
| 173 |
+ |
|
| 174 |
+.w100{width:100%;}
|
|
| 175 |
+.h100{height:100%;}
|
|
| 176 |
+ |
|
| 177 |
+ |
|
| 178 |
+ |
|
| 179 |
+/* ============================================= |
|
| 180 |
+ 테이블 타입 |
|
| 181 |
+============================================= */ |
|
| 182 |
+ |
|
| 183 |
+.tType1 {width: 100%;text-align: left;table-layout: fixed;}
|
|
| 184 |
+.tType1 tbody tr {border-bottom: 1px solid #e5e5e5;}
|
|
| 185 |
+.tType1 tbody tr:first-child{border-top: 2px solid #000;}
|
|
| 186 |
+.tType1 tbody tr th {min-width: 75px; height: 55px; vertical-align: middle;font-size: 17px; text-align: left;}
|
|
| 187 |
+.tType1 tbody tr th .essential {display:inline-block;margin:4px 2px 0 0;vertical-align:top;color:#e40000;}
|
|
| 188 |
+.tType1 tbody tr th.vTop {vertical-align: top; padding-top: 20px; line-height: 1.2;}
|
|
| 189 |
+.tType1 tbody tr td {vertical-align: middle;font-weight: 300;line-height: 1.3; padding: 10px 0;}
|
|
| 190 |
+.tType1 tbody tr td p {line-height: 1.4;}
|
|
| 191 |
+.tType1 tbody tr td.send_cf {font-size: 18px;}
|
|
| 192 |
+.tType1 tbody tr td.putText {padding: 10px 0;}
|
|
| 193 |
+.tType1 tbody tr td.putText>div {display: flex; width: 100%;}
|
|
| 194 |
+.tType1 tbody tr td.putText>p:last-child {color: #555; font-size: 14px; padding-top: 10px;}
|
|
| 195 |
+.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;*/}
|
|
| 196 |
+.tType1 tbody tr td.putText .put_left .text_length {position: relative;min-height: 28px;margin:0 0 15px;border-radius: 0 0 5px 5px;}
|
|
| 197 |
+.tType1 tbody tr td.putText .put_left .text_length>div:first-child {font-size: 15px; padding-left: 10px;}
|
|
| 198 |
+.tType1 tbody tr td.putText .put_left .text_length>div:last-child {position: absolute;bottom: 0;right: 10px;}
|
|
| 199 |
+.tType1 tbody tr td.putText .put_left .text_length p {display: inline-block;padding-right: 10px;}
|
|
| 200 |
+.tType1 tbody tr td.putText .put_right { width: 26%; max-width: 200px; position: relative;}
|
|
| 201 |
+.tType1 tbody tr td.putText .put_right>button {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
|
|
| 202 |
+.tType1 tbody tr td.putText .put_right .btn_popup_wrap button:not(.btn_close) {width: calc(100% - 10px); margin-left: 10px;margin-bottom: 5px;}
|
|
| 203 |
+.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;}
|
|
| 204 |
+.tType1 tbody tr td.putText .put_right .send_btnWrap {position: absolute;bottom: 0;right:0;width: calc(100% - 10px);}
|
|
| 205 |
+.tType1 tbody tr td.putText .put_right .send_btnWrap button {width: 48.5%;}
|
|
| 206 |
+.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;}
|
|
| 207 |
+.tType1 tbody tr td.putText .put_left.short textarea {height: 190px;margin:10px 0;padding:0 5px;}
|
|
| 208 |
+.tType1 tbody tr td.putText .put_left.short textarea::placeholder {color: #b5b5b5;}
|
|
| 209 |
+.tType1 tbody tr td.putText .put_left.short.on {border: 1px solid var(--primary-color);border-radius: 5px;background-color: #eef2f9 !important;}
|
|
| 210 |
+.tType1 tbody tr td.putText .put_left.long textarea {height: 380px;}
|
|
| 211 |
+.tType1 tbody tr td.putText .put_left.long.on {border: 1px solid #12bec9;border-radius: 5px;background-color: #eef5f9 !important;}
|
|
| 212 |
+.tType1 tbody tr td.putText .put_left.photo.on {border: 1px solid #e26ba9;border-radius: 5px;background-color: #f8f1f5 !important;}
|
|
| 213 |
+.tType1 tbody tr.msg_title {display:none;}
|
|
| 214 |
+.tType1 tbody tr.msg_title.active {display:table-row;}
|
|
| 215 |
+.tType1 tbody tr.msg_title td .title_wrap .textbox {display:none;margin:10px 0 0;}
|
|
| 216 |
+.tType1 tbody tr.msg_title td .title_wrap .textbox.active {display:block;}
|
|
| 217 |
+ |
|
| 218 |
+.tType1_title {font-size: 20px; font-weight: 600; position: relative; height: 40px;}
|
|
| 219 |
+.tType1_title button {position: absolute;top: 22%; right: 0; transform: translateY(-50%); background-color: var(--primary-color); height: 40px; padding: 0 15px; color: #fff;}
|
|
| 220 |
+.tType1_title>span {font-size: 16px; font-weight: 300; color: #666;}
|
|
| 221 |
+.tType1 tbody tr td.send_list {position: relative;display: flex; justify-content: space-between;}
|
|
| 222 |
+.tType1 tbody tr td.send_list .list_left, .tType1 tbody tr td.send_list .list_right {width: calc(100%/2 - 25px);min-width: 290px;}
|
|
| 223 |
+.tType1 tbody tr td.send_list .list_left {left: 0;position: relative;}
|
|
| 224 |
+.tType1 tbody tr td.send_list .list_left .add_num {height: 90px;}
|
|
| 225 |
+.tType1 tbody tr td.send_list .list_left .add_num input[type="text"] {width: calc(100% - 97px);min-width: 200px;}
|
|
| 226 |
+.tType1 tbody tr td.send_list .list_left .add_num input[type="text"]::placeholder {color: #a6a6a6; font-weight: 300;}
|
|
| 227 |
+.tType1 tbody tr td.send_list .list_left .add_num>span {color: #e40000;font-size: 13px;font-weight: 400;line-height: 39px;}
|
|
| 228 |
+.tType1 tbody tr td .text_req {display: inline-block; color: #999; font-size: 17px; font-weight: 300; vertical-align: middle;}
|
|
| 229 |
+ |
|
| 230 |
+ |
|
| 231 |
+.tType1 tbody tr td.send_list .list_right {right: 0;}
|
|
| 232 |
+.tType1 tbody tr td.send_list .list_right .list_btnWrap {display: flex;flex-flow: wrap;justify-content: space-between;}
|
|
| 233 |
+.tType1 tbody tr td.send_list .list_right .list_btnWrap button {height: 37px;width: calc(100%/3 - 3px);margin-bottom: 5px;}
|
|
| 234 |
+ |
|
| 235 |
+.tType1 tbody tr td.send_list .add_btn {position: absolute; right: 0; top: 0;}
|
|
| 236 |
+.tType1 tbody tr td.send_list .add_btn button {min-width: 95px; height: 32px; font-size: 14px;}
|
|
| 237 |
+.tType1 tbody tr td.send_list .add_remove {text-align: center;margin: 40px 4px 0 4px;align-self: center;}
|
|
| 238 |
+.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;}
|
|
| 239 |
+.tType1 tbody tr td.send_list .add_remove button:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
| 240 |
+.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;}
|
|
| 241 |
+.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;}
|
|
| 242 |
+ |
|
| 243 |
+.tType1 tbody tr th.billingAmount {position: relative;line-height: 1;vertical-align: middle;}
|
|
| 244 |
+.tType1 tbody tr th.billingAmount>div {background-color: #f2f2f2;border-radius: 5px;padding: 23px 30px;margin: 20px 0; position: relative;}
|
|
| 245 |
+.tType1 tbody tr th.billingAmount>div .final_pay {position: relative; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
|
|
| 246 |
+.tType1 tbody tr th.billingAmount>div p:first-child {font-size: 20px;font-weight: 500;}
|
|
| 247 |
+.tType1 tbody tr th.billingAmount>div p:last-child {font-size: 20px;}
|
|
| 248 |
+.tType1 tbody tr th.billingAmount>div p span#totalPriceTxt {font-size: 24px;color: #e40000;font-weight: 500;}
|
|
| 249 |
+.tType1 tbody tr th.billingAmount>div p span:last-child {font-size: 16px;color: #888;font-weight: 300;}
|
|
| 250 |
+.tType1 tbody tr th.billingAmount .pay_info_list p {float:left;line-height:35px;}
|
|
| 251 |
+.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;}
|
|
| 252 |
+.tType1 tbody tr th.billingAmount .pay_info_list .info strong {font-size:18px;font-weight:700;color:var(--primary-color);}
|
|
| 253 |
+.tType1 tbody tr th.billingAmount .pay_info_list .info span {margin:0 8px 0 7px;}
|
|
| 254 |
+.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;}
|
|
| 255 |
+.tType1 tbody tr th.billingAmount button.cal_btn:hover {box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
| 256 |
+.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;}
|
|
| 257 |
+.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;}
|
|
| 258 |
+.tType1 tbody tr th.billingAmount .pay_type button.btn_event_cash{width: 100px;}
|
|
| 259 |
+.tType1 tbody tr th.billingAmount .pay_type:last-child {margin-top: 10px;}
|
|
| 260 |
+.tType1 tbody tr th.billingAmount .pay_type>div:first-child {float: left;margin:0 0 0 5px;}
|
|
| 261 |
+.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;}
|
|
| 262 |
+.tType1 tbody tr th.billingAmount .pay_type>div:last-child {float: right;}
|
|
| 263 |
+.tType1 tbody tr th.billingAmount .pay_type>div:only-child{float: left;}
|
|
| 264 |
+.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label {font-size: 16px;}
|
|
| 265 |
+.tType1 tbody tr th.billingAmount .pay_type input[type="radio"]+label span {font-size: 17px; font-weight: 700;}
|
|
| 266 |
+.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;}
|
|
| 267 |
+.tType1 tbody tr th.billingAmount .pay_type input[type="text"]::placeholder {color: #000; font-size: 16px; text-align: right; font-weight: 500;}
|
|
| 268 |
+.tType1 tbody tr th.billingAmount .pay_type button {width: 78px; margin-left: 5px;}
|
|
| 269 |
+ |
|
| 270 |
+.tType1 tbody tr td.check_num>div {display: inline-block;}
|
|
| 271 |
+.tType1 tbody tr td.check_num>div button {height: 40px; padding: 0 5px;}
|
|
| 272 |
+.tType1 tbody input[type="text"] {height: 40px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px;line-height:38px;}
|
|
| 273 |
+.tType1 tbody input[type="password"] {height: 50px; padding: 0 15px; background-color: #f2f2f2;border-radius: 5px; font-size: 16px;}
|
|
| 274 |
+.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;}
|
|
| 275 |
+.tType1 tbody input[type="text"]::placeholder {color: #a6a6a6;}
|
|
| 276 |
+.tType1 tbody input:disabled {background-color: #dedede;}
|
|
| 277 |
+ |
|
| 278 |
+ |
|
| 279 |
+.tType3 {width: 100%; border-radius: 3px; border: 1px solid #ccc; box-sizing: border-box;}
|
|
| 280 |
+.tType3.payDetail {margin-bottom: 50px;}
|
|
| 281 |
+.tType3.usageDetail {margin-bottom: 50px;}
|
|
| 282 |
+.tType3.payDetail {margin: -15px 0 10px 0;}
|
|
| 283 |
+.payDetail .tType3_hd>div:nth-child(1), .payDetail .tType3_bd>div:nth-child(1) {width: 40px;}
|
|
| 284 |
+.payDetail .tType3_hd>div:nth-child(2), .payDetail .tType3_bd>div:nth-child(2) {width: 20%;}
|
|
| 285 |
+.payDetail .tType3_hd>div:nth-child(3), .payDetail .tType3_bd>div:nth-child(3) {width: 17%;}
|
|
| 286 |
+.payDetail .tType3_hd>div:nth-child(4), .payDetail .tType3_bd>div:nth-child(4) {width: 15%;}
|
|
| 287 |
+.payDetail .tType3_hd>div:nth-child(5), .payDetail .tType3_bd>div:nth-child(5) {width: 17%;}
|
|
| 288 |
+.payDetail .tType3_hd>div:nth-child(6), .payDetail .tType3_bd>div:nth-child(6) {width: 15%;}
|
|
| 289 |
+.payDetail .tType3_hd>div:nth-child(7), .payDetail .tType3_bd>div:nth-child(7) {width: 17%;}
|
|
| 290 |
+ |
|
| 291 |
+.table_cont {display: none;}
|
|
| 292 |
+.table_cont.current {display: block;}
|
|
| 293 |
+ |
|
| 294 |
+.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;}
|
|
| 295 |
+.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;}
|
|
| 296 |
+.tType3 .tType3_hd>div:first-child {border-left:0;}
|
|
| 297 |
+.tType3 .font_ellipsis {position:relative;}
|
|
| 298 |
+ |
|
| 299 |
+.tType3 .tType3_bd {display:flex;height:40px;box-sizing:border-box;text-align:center;}
|
|
| 300 |
+.tType3 .tType3_bd span {font-weight:400;}
|
|
| 301 |
+.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;}
|
|
| 302 |
+.tType3 .tType3_bd>div:first-child {border-left: 0;}
|
|
| 303 |
+.tType3 .tType3_bd:last-child>div {border-bottom: 0;}
|
|
| 304 |
+.tType3 .tType3_bd .table_certify {font-weight: 400;}
|
|
| 305 |
+.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;}
|
|
| 306 |
+.tType3 .tType3_bd .input_wrap2 input[type="text"]::placeholder {color: #555;}
|
|
| 307 |
+.tType3 .tType3_bd .input_wrap2 input[type="text"]:-ms-input-placeholder {color: #555;}
|
|
| 308 |
+.tType3 .tType3_bd .btnType14 {height: 28px; padding: 0 11.5px; vertical-align: baseline; line-height: 28px;}
|
|
| 309 |
+.tType3 .tType3_bd input[type="radio"] {margin-top: 0; margin-right: 0; vertical-align: revert;}
|
|
| 310 |
+ |
|
| 311 |
+.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;}
|
|
| 312 |
+.tb_wrap:after {position:absolute;content:'';width:calc(100% - 4px);height:1px;background:#d5d5d5;left:2px;bottom:0;}
|
|
| 313 |
+.tType4{width:100%;table-layout:fixed;}
|
|
| 314 |
+.tType4 thead{position:relative;background:#f8f8f8;z-index:0;}
|
|
| 315 |
+.tType4 thead tr:only-child th{height:36px;}
|
|
| 316 |
+.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;}
|
|
| 317 |
+.tType4 thead th:last-child{border-right: 0;}
|
|
| 318 |
+.tType4 .sort_wrap{display: inline-block;}
|
|
| 319 |
+.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;}
|
|
| 320 |
+.tType4 tbody td.tb_tit{text-align: left; position: relative;}
|
|
| 321 |
+.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;}
|
|
| 322 |
+.tType4 tbody tr:only-child:last-child td{border-bottom: 1px solid #ccc;}
|
|
| 323 |
+.tType4 tbody td:last-child{border-right: 0;}
|
|
| 324 |
+.tType4 tbody td>p{width: 100%; line-height: 38px; white-space: nowrap; text-overflow: ellipsis; letter-spacing: -0.5px; overflow: hidden;margin: 0 auto;}
|
|
| 325 |
+.tType4 tbody td span {font-weight: 400;}
|
|
| 326 |
+.tType4 td input[type="text"]{height: 28px; display: inline-block; border: 1px solid #e5e5e5; margin-right: 5px;}
|
|
| 327 |
+.tType4 tbody .btnType14 {height: 28px;}
|
|
| 328 |
+.tType4 .memo_text {width: calc(100% - 35px); margin-right: 5px; display: inline-block; text-align: left; vertical-align: inherit;}
|
|
| 329 |
+.tType4 tbody td span.textReject {line-height:28px;}
|
|
| 330 |
+.tType4 tbody td .btnTypeReject {margin:0 0 0 3px;line-height:26px;letter-spacing:0;text-align:center;vertical-align:top;}
|
|
| 331 |
+.tType4 tbody td.result_cont a {text-align: left!important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
|
| 332 |
+.tType4 tbody td.result_cont .result_tit { }
|
|
| 333 |
+.tType4 tbody td .cancel_date {font-size:14px; color:#666; display: block;}
|
|
| 334 |
+ |
|
| 335 |
+/* ============================================= |
|
| 336 |
+ 탭 타입 |
|
| 337 |
+============================================= */ |
|
| 338 |
+.top_content {display: none;}
|
|
| 339 |
+.top_content.current {display: block;}
|
|
| 340 |
+.custom_content {display: none;}
|
|
| 341 |
+.custom_content.current {display: block;}
|
|
| 342 |
+.bottom_content {display: none;}
|
|
| 343 |
+.bottom_content.current {display: block;}
|
|
| 344 |
+.popup_cont {display: none;}
|
|
| 345 |
+.popup_cont.current {display: block;}
|
|
| 346 |
+.history_cont {display: none;}
|
|
| 347 |
+.history_cont.current {display: block;}
|
|
| 348 |
+.alarm_cont {display: none;}
|
|
| 349 |
+.alarm_cont.current {display: block;}
|
|
| 350 |
+.pay_cont {display: none;}
|
|
| 351 |
+.pay_cont.current {display: block;}
|
|
| 352 |
+.fee_cont {display: none;}
|
|
| 353 |
+.fee_cont.current {display: block;}
|
|
| 354 |
+ |
|
| 355 |
+.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;}
|
|
| 356 |
+.tabType1 li{position:relative;flex:1;}
|
|
| 357 |
+.tabType1 li button{position:relative;width:100%;height:60px;padding:13px 0;font-size:18px;color:#222;border-radius:8px;z-index:1;}
|
|
| 358 |
+.tabType1 li.active button {border:1px solid var(--primary-color);background-color:var(--primary-color);font-weight:600;color:#fff;}
|
|
| 359 |
+ |
|
| 360 |
+.mypage_content .tabType1 {background-color: #f4f4f5; color: #222; margin-top: 40px;}
|
|
| 361 |
+.mypage_content .tabType1 li.active button {background-color: var(--secondary-light-color); color: #222;}
|
|
| 362 |
+ |
|
| 363 |
+.pay_tab_wrap .tabType1 {background-color: #f4f4f5; color: #222; margin: 30px 0 ;border:0 none;border-radius:5px;}
|
|
| 364 |
+.pay_tab_wrap .tabType1 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 30px; background-color: #d5d5d5;}
|
|
| 365 |
+.pay_tab_wrap .tabType1 li:last-child::after {content: none;}
|
|
| 366 |
+.pay_tab_wrap .tabType1 li button{height:53px;font-size:16px;}
|
|
| 367 |
+.pay_tab_wrap .tabType1 li:first-child button {border-radius:5px 0 0 5px;}
|
|
| 368 |
+.pay_tab_wrap .tabType1 li:last-child button {border-radius:0 5px 5px 0;}
|
|
| 369 |
+.pay_tab_wrap .tabType1 li.active {background-color:transparent;}
|
|
| 370 |
+.pay_tab_wrap .tabType1 li.active::after {content: none;}
|
|
| 371 |
+.pay_tab_wrap .tabType1 li.active button {background-color: var(--secondary-color); border:1px solid var(--secondary-color-hover);color: #FFF;border-radius:5px;}
|
|
| 372 |
+.pay_tab_wrap .tabType1 li.active button:before {display:none;}
|
|
| 373 |
+.pay_tab_wrap .tabType1 li.active button:after {display:none;}
|
|
| 374 |
+ |
|
| 375 |
+.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;}
|
|
| 376 |
+.tabType2::after {position:absolute;content: "";width:calc(100% + 600px);height:2px;background:#1E3862;bottom:0;left:0;}
|
|
| 377 |
+.tabType2 li {flex-basis:calc(100% /4);min-width: 200px;}
|
|
| 378 |
+.tabType2 li button {width: 100%;padding:13px 0;font-size:20px;border-left:1px solid #f2f2f2;background:#fff;}
|
|
| 379 |
+.tabType2 li:nth-child(3) button {border-left:0;}
|
|
| 380 |
+.tabType2 li:first-child button {border-left:0;border-radius:10px 0 0 0;}
|
|
| 381 |
+.tabType2 li:last-child button {border-radius:0 10px 0 0;}
|
|
| 382 |
+.tabType2 li.active button {background:#1E3862;border-radius:10px 10px 0 0;color:#fff;border-left:1px solid transparent;}
|
|
| 383 |
+ |
|
| 384 |
+.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;}
|
|
| 385 |
+.tabType4 li {flex: 1; position: relative;}
|
|
| 386 |
+.tabType4 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background-color: #d5d5d5;}
|
|
| 387 |
+.tabType4 li:last-child::after {content: none;}
|
|
| 388 |
+.tabType4 li.active::after {content: none;}
|
|
| 389 |
+.tabType4 li button {position:relative;width: 100%; height: 50px; padding: 12px 0;font-size: 18px; letter-spacing: -0.5px;}
|
|
| 390 |
+.tabType4 li.active button {color:#fff;border:1px solid var(--primary-color);background-color:var(--primary-color);border-radius:8px;}
|
|
| 391 |
+/* .tabType4 li.active button:before {content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:2px solid #46484a;box-sizing:border-box;} */
|
|
| 392 |
+/* .tabType4 li.active button:after {content:'';position:absolute;left:-5px;top:-5px;width:100%;height:100%;border:5px solid #46484a;border-radius:10px;} */
|
|
| 393 |
+.tabType4.tabTwo li {flex-basis: calc(100%/2);}
|
|
| 394 |
+ |
|
| 395 |
+.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;}
|
|
| 396 |
+.tabType5 li {flex-basis: calc(100%/3); position: relative;}
|
|
| 397 |
+.tabType5 li::after {content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); width: 1px; height: 100%; background-color: #c7c8c8;}
|
|
| 398 |
+.tabType5 li:last-child::after {content: none;}
|
|
| 399 |
+.tabType5 li.active::after {content: none;}
|
|
| 400 |
+.tabType5 li button {width: 100%;height: 45px; font-size: 18px;}
|
|
| 401 |
+.tabType5 li.active button {background-color: #46484a;border-radius: 5px 5px 0 0;color: #fff; font-weight: 300;}
|
|
| 402 |
+ |
|
| 403 |
+.tabType6 {background-color: #fff;width: 100%;border-bottom: 1px solid #e5e5e5; display: flex;text-align: center;}
|
|
| 404 |
+.tabType6 li {flex-basis: calc(100%/2);}
|
|
| 405 |
+.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;}
|
|
| 406 |
+.tabType6 li.active button {background-color: #c8c8c8;border-radius: 5px 5px 0 0; border: 1px solid #c8c8c8;}
|
|
| 407 |
+.pay_refund_cont .pay_tType1 {margin-top:-20px;}
|
|
| 408 |
+.pay_refund_cont .pay_tType1 tbody tr:first-child {border-top:0 none;}
|
|
| 409 |
+ |
|
| 410 |
+/* ============================================= |
|
| 411 |
+ 캘린더 |
|
| 412 |
+============================================= */ |
|
| 413 |
+.calendar_wrap {position:relative;display: inline-block;}
|
|
| 414 |
+.calendar_wrap>span {font-weight: 500;}
|
|
| 415 |
+.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;}
|
|
| 416 |
+.calendar_in {position: relative;display: inline;}
|
|
| 417 |
+.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%);}
|
|
| 418 |
+.calendar_in .calendar-frame {border: 0;height: 290px;width: 320px;}
|
|
| 407 | 419 |
.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
... | ... | @@ -0,0 +1,276 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 7 | + <title>문자온</title> | |
| 8 | + | |
| 9 | + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> | |
| 10 | + <link rel="stylesheet" href="/publish/css/reset.css"> | |
| 11 | + <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css"> | |
| 12 | + <link rel="stylesheet" href="/publish/css/common.css"> | |
| 13 | + <link rel="stylesheet" href="/publish/css/style.css"> | |
| 14 | + <link rel="stylesheet" href="/publish/css/button.css"> | |
| 15 | + <link rel="stylesheet" href="/publish/css/content.css"> | |
| 16 | + <link rel="stylesheet" href="/publish/css/mem.css"> | |
| 17 | + <link rel="stylesheet" href="/publish/css/font.css"> | |
| 18 | + <link rel="stylesheet" href="/publish/css/popupLayer.css"> | |
| 19 | + | |
| 20 | + <script src="/publish/js/jquery-3.5.0.js"></script> | |
| 21 | + <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script> | |
| 22 | + <script src="/publish/js/common.js"></script> | |
| 23 | + <script src="/publish/js/content.js"></script> | |
| 24 | + <script src="/publish/js/calendar.js"></script> | |
| 25 | + <script src="/publish/js/popup.js"></script> | |
| 26 | + <script src="/publish/js/popupLayer.js"></script> | |
| 27 | + | |
| 28 | + <script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script> | |
| 29 | + <script type="text/javascript" src="/js/MJUtill.js"></script> | |
| 30 | + <script src="https://js.tosspayments.com/v1/payment-widget"></script> | |
| 31 | + <script> | |
| 32 | + let paymentWidget; | |
| 33 | + let paymentMethodWidget; | |
| 34 | + | |
| 35 | + $(document).ready(function () { | |
| 36 | + | |
| 37 | + const $input = $('.money_input'); | |
| 38 | + const $message = $('.input_message'); | |
| 39 | + | |
| 40 | + // 금액 추가 버튼 클릭 | |
| 41 | + $('.add_money .btn').on('click', function () { | |
| 42 | + | |
| 43 | + const addAmount = Number($(this).data('price')); | |
| 44 | + | |
| 45 | + // 현재 입력값 숫자만 추출 | |
| 46 | + let currentValue = $input.val().replace(/[^0-9]/g, ''); | |
| 47 | + currentValue = currentValue ? Number(currentValue) : 0; | |
| 48 | + | |
| 49 | + // 금액 합산 | |
| 50 | + const total = currentValue + addAmount; | |
| 51 | + | |
| 52 | + // input 표시 | |
| 53 | + $input.val(numberWithCommas(total)); | |
| 54 | + | |
| 55 | + // 금액 갱신 | |
| 56 | + updatePrice(total); | |
| 57 | + | |
| 58 | + }); | |
| 59 | + | |
| 60 | + // 직접 입력 | |
| 61 | + $input.on('input', function () { | |
| 62 | + let value = $(this).val().replace(/[^0-9]/g, ''); | |
| 63 | + value = value ? Number(value) : 0; | |
| 64 | + $(this).val(numberWithCommas(value)); | |
| 65 | + updatePrice(value); | |
| 66 | + }); | |
| 67 | + | |
| 68 | + // 토스페이먼츠 위젯 초기화 | |
| 69 | + const clientKey = 'test_gck_KNbdOvk5rk15kdKpqQGo3n07xlzm'; | |
| 70 | + const customerKey = 'test_customer_1234'; | |
| 71 | + | |
| 72 | + paymentWidget = PaymentWidget(clientKey, customerKey); | |
| 73 | + | |
| 74 | + // 최초 금액 | |
| 75 | + const initialAmount = 0; | |
| 76 | + | |
| 77 | + // 결제수단 렌더링 | |
| 78 | + paymentMethodWidget = paymentWidget.renderPaymentMethods( | |
| 79 | + '#payment-method', | |
| 80 | + { value: initialAmount } | |
| 81 | + ); | |
| 82 | + | |
| 83 | + // 약관 렌더링 | |
| 84 | + paymentWidget.renderAgreement('#agreement'); | |
| 85 | + | |
| 86 | + }); | |
| 87 | + | |
| 88 | + // 금액 업데이트 | |
| 89 | + function updatePrice(price) { | |
| 90 | + | |
| 91 | + const $message = $('.input_message'); | |
| 92 | + | |
| 93 | + const supplyPrice = price; | |
| 94 | + const vatPrice = Math.round(supplyPrice * 0.1); | |
| 95 | + const lastPrice = supplyPrice + vatPrice; | |
| 96 | + | |
| 97 | + // 화면 표시 | |
| 98 | + $('#supplyPriceStr').text(numberWithCommas(supplyPrice)); | |
| 99 | + $('#vatPriceStr').text(numberWithCommas(vatPrice)); | |
| 100 | + $('#lastPriceStr').text(numberWithCommas(lastPrice)); | |
| 101 | + | |
| 102 | + // 토스 결제 금액 변경 | |
| 103 | + if (typeof paymentMethodWidget !== 'undefined') { | |
| 104 | + paymentMethodWidget.updateAmount(lastPrice); | |
| 105 | + } | |
| 106 | + | |
| 107 | + // 휴대폰 결제 제한 체크 | |
| 108 | + if (price > 150000 || price < 5000) { | |
| 109 | + $(".money_input").addClass('error'); | |
| 110 | + $message.addClass('active'); | |
| 111 | + if(price<5001){ | |
| 112 | + $message.find(".msg").text("최소 충전금액 5천원 이상 입력해주세요."); | |
| 113 | + }else{$message.find(".msg").text("휴대폰 결제는 최대 150,000원까지 입력 가능합니다.");} | |
| 114 | + | |
| 115 | + } else { | |
| 116 | + $(".money_input").removeClass('error'); | |
| 117 | + $message.removeClass('active'); | |
| 118 | + } | |
| 119 | + } | |
| 120 | + | |
| 121 | + // 결제 호출 | |
| 122 | + function pgOpenerPopup() { | |
| 123 | + | |
| 124 | + const chargePrice = parseInt($('#price').val().replace(/[^0-9]/g, ''),10); | |
| 125 | + | |
| 126 | + const lastPrice = chargePrice + Math.round(chargePrice * 0.1); | |
| 127 | + | |
| 128 | + if (chargePrice < 5000) { | |
| 129 | + alert("최소 충전금액 5천원 이상 입력해주세요."); | |
| 130 | + return false; | |
| 131 | + } | |
| 132 | + | |
| 133 | + paymentWidget.requestPayment({ | |
| 134 | + orderId: 'ORDER_' + new Date().getTime(), | |
| 135 | + orderName: '문자온 충전 ' + lastPrice + '원', | |
| 136 | + successUrl: window.location.origin + '/web/member/pay/tossSuccess.do', | |
| 137 | + failUrl: window.location.origin + '/web/member/pay/tossFail.do', | |
| 138 | + customerEmail: $('#mberEmailAdres').val(), | |
| 139 | + customerName: $('#mberNm').val(), | |
| 140 | + customerMobilePhone: $('#moblphonNo').val() | |
| 141 | + }).catch(function (error) { | |
| 142 | + | |
| 143 | + if (error.code === 'USER_CANCEL') { | |
| 144 | + alert('결제를 취소하셨습니다.'); | |
| 145 | + } else { | |
| 146 | + alert(error.message); | |
| 147 | + } | |
| 148 | + | |
| 149 | + }); | |
| 150 | + } | |
| 151 | + | |
| 152 | + // 콤마 함수 | |
| 153 | + function numberWithCommas(x) { | |
| 154 | + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| 155 | + } | |
| 156 | + </script> | |
| 157 | + | |
| 158 | +</head> | |
| 159 | + | |
| 160 | +<body> | |
| 161 | + <div data-include-path="/publish/layout/_header.html"></div> | |
| 162 | + <!-- content 영역 --> | |
| 163 | + <div id="container" class="cont sub"> | |
| 164 | + <div class="inner"> | |
| 165 | + <!-- send top --> | |
| 166 | + <div class="send_top"> | |
| 167 | + <!-- tab button --> | |
| 168 | + <ul class="tabType4"> | |
| 169 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment1.html'">요금안내/견적내기</button></li> | |
| 170 | + <li class="tab active"><button type="button" onclick="TabType5(this,'2');">결제하기</button></li> | |
| 171 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment3.html'">요금 결제내역</button></li> | |
| 172 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment4.html'">요금 사용내역</button></li> | |
| 173 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment5.html'">세금계산서 발행 등록</button></li> | |
| 174 | + </ul> | |
| 175 | + <!--// tab button --> | |
| 176 | + <!-- 결제관리 - 결제하기 --> | |
| 177 | + <div class="serv_content charg_cont current" id="tab5_2"> | |
| 178 | + <div class="heading"> | |
| 179 | + <h2>결제하기</h2> | |
| 180 | + <button type="button" class="button info" onclick="infoListPop('payment2','792','250');">사용안내</button> | |
| 181 | + </div> | |
| 182 | + | |
| 183 | + <div> | |
| 184 | + <!-- 토스페이먼츠 결제수단 위젯 영역 --> | |
| 185 | + <div id="payment-method" class="toss_wrap"></div> | |
| 186 | + | |
| 187 | + <!-- 토스페이먼츠 이용약관 영역 --> | |
| 188 | + <div id="agreement" class="toss_wrap"></div> | |
| 189 | + | |
| 190 | + <!-- <b class="fs_18 fwMd">충전할 금액을 선택한 후 <spa n class="c_002c9a">[충전하기]</span> 버튼을 눌러주세요</b> --> | |
| 191 | + <div class="area_tabcont on " id="tab2_1"> | |
| 192 | + <p class="tType1_title"><img src="/publish/images/credit_small.png" alt="신용카드"> 신용카드</p> | |
| 193 | + <table class="tType1"> | |
| 194 | + <colgroup> | |
| 195 | + <col style="width: 100px;"> | |
| 196 | + <col style="width: auto;"> | |
| 197 | + </colgroup> | |
| 198 | + <tbody> | |
| 199 | + <tr class="charge_content"> | |
| 200 | + <th scope="row">충전금액</th> | |
| 201 | + <td class="flex"> | |
| 202 | + <!-- <select name="tempPrice" id="tempPrice" class="list_seType1"> | |
| 203 | + <option value="5000">5,000</option> | |
| 204 | + <option value="10000">10,000</option> | |
| 205 | + <option value="20000">20,000</option> | |
| 206 | + <option value="30000">30,000</option> | |
| 207 | + <option value="50000" selected="">50,000</option> | |
| 208 | + <option value="100000">100,000</option> | |
| 209 | + <option value="200000">200,000</option> | |
| 210 | + <option value="300000">300,000</option> | |
| 211 | + <option value="500000">500,000</option> | |
| 212 | + <option value="700000">700,000</option> | |
| 213 | + <option value="900000">900,000</option> | |
| 214 | + <option value="1000000">1,000,000</option> | |
| 215 | + <option value="1200000">1,200,000</option> | |
| 216 | + <option value="1500000">1,500,000</option> | |
| 217 | + <option value="2000000">2,000,000</option> | |
| 218 | + <option value="2500000">2,500,000</option> | |
| 219 | + <option value="3000000">3,000,000</option> | |
| 220 | + </select> --> | |
| 221 | + | |
| 222 | + <div class="money_form_wrap form_wrap"> | |
| 223 | + <input type="text" name="price" id="price" class="input money_input" placeholder="1,000원 이상 입력해주세요." value="50,000" min="5,000" max="150,000"/> | |
| 224 | + <p class="input_in">원</p> | |
| 225 | + <p class="input_message error"> | |
| 226 | + <i class="icon error">!</i> <span class="msg">휴대폰 결제는 최대 150,000원까지 입력 가능합니다.</span> | |
| 227 | + </p> | |
| 228 | + </div> | |
| 229 | + | |
| 230 | + <div class="btn_wrap add_money w100per"> | |
| 231 | + <button type="button" class="btn" data-price="10000">+ 1만원</button> | |
| 232 | + <button type="button" class="btn" data-price="50000">+ 5만원</button> | |
| 233 | + <button type="button" class="btn" data-price="100000">+ 10만원</button> | |
| 234 | + <button type="button" class="btn" data-price="1000000">+ 100만원</button> | |
| 235 | + </div> | |
| 236 | + <!-- <span class="reqTxt6">※ 최소 3천원 이상부터 결제 가능합니다.</span> --> | |
| 237 | + </td> | |
| 238 | + </tr> | |
| 239 | + | |
| 240 | + <tr> | |
| 241 | + <td colspan="2"> | |
| 242 | + <div class="amount_wrap"> | |
| 243 | + <dl> | |
| 244 | + <dt>최종 결제금액 :</dt> | |
| 245 | + <dd> | |
| 246 | + <ul> | |
| 247 | + <li><strong id="supplyPriceStr">50,000</strong>원(공급가액)</li> | |
| 248 | + <li><span class="plus"></span><strong id="vatPriceStr">5,000</strong>원(부가세)</li> | |
| 249 | + <li class="total"><span class="equal"></span><strong class="c_e40000" id="lastPriceStr">55,000</strong>원(최종금액)</li> | |
| 250 | + </ul> | |
| 251 | + </dd> | |
| 252 | + </dl> | |
| 253 | + <button type="button" class="btn btnType fill primary btn_pay" onclick="pgOpenerPopup(); return false;" >충전하기</button> | |
| 254 | + </div> | |
| 255 | + </td> | |
| 256 | + | |
| 257 | + </tr> | |
| 258 | + | |
| 259 | + </tbody> | |
| 260 | + </table> | |
| 261 | + </div> | |
| 262 | + | |
| 263 | + </div> | |
| 264 | + | |
| 265 | + </div><!-- 결제관리 - 결제하기 --> | |
| 266 | + </div> | |
| 267 | + <!--// send top --> | |
| 268 | + </div> | |
| 269 | + </div> | |
| 270 | + <!--// content 영역 --> | |
| 271 | + <!-- footer 영역 --> | |
| 272 | + <div data-include-path="/publish/layout/_footer.html"></div> | |
| 273 | + <!--// footer 영역 --> | |
| 274 | +</body> | |
| 275 | + | |
| 276 | +</html>(No newline at end of file) |
+++ src/main/webapp/publish/payment_toss_evaluation.html
... | ... | @@ -0,0 +1,381 @@ |
| 1 | +<!DOCTYPE html> | |
| 2 | +<html lang="ko"> | |
| 3 | + | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| 7 | + <title>문자온</title> | |
| 8 | + | |
| 9 | + <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet"> | |
| 10 | + <link rel="stylesheet" href="/publish/css/reset.css"> | |
| 11 | + <link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css"> | |
| 12 | + <link rel="stylesheet" href="/publish/css/common.css"> | |
| 13 | + <link rel="stylesheet" href="/publish/css/style.css"> | |
| 14 | + <link rel="stylesheet" href="/publish/css/button.css"> | |
| 15 | + <link rel="stylesheet" href="/publish/css/content.css"> | |
| 16 | + <link rel="stylesheet" href="/publish/css/mem.css"> | |
| 17 | + <link rel="stylesheet" href="/publish/css/font.css"> | |
| 18 | + <link rel="stylesheet" href="/publish/css/popupLayer.css"> | |
| 19 | + | |
| 20 | + <script src="/publish/js/jquery-3.5.0.js"></script> | |
| 21 | + <script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script> | |
| 22 | + <script src="/publish/js/common.js"></script> | |
| 23 | + <script src="/publish/js/content.js"></script> | |
| 24 | + <script src="/publish/js/calendar.js"></script> | |
| 25 | + <script src="/publish/js/popup.js"></script> | |
| 26 | + <script src="/publish/js/popupLayer.js"></script> | |
| 27 | + | |
| 28 | + <script src="https://mup.mobilians.co.kr/js/ext/ext_inc_comm.js"></script> | |
| 29 | + <script type="text/javascript" src="/js/MJUtill.js"></script> | |
| 30 | + <script src="https://js.tosspayments.com/v1/payment-widget"></script> | |
| 31 | + <script> | |
| 32 | + let paymentWidget; | |
| 33 | + let paymentMethodWidget; | |
| 34 | + | |
| 35 | + $(document).ready(function () { | |
| 36 | + | |
| 37 | + // 토스페이먼츠 위젯 초기화 세팅 | |
| 38 | + const clientKey = 'test_gck_KNbdOvk5rk15kdKpqQGo3n07xlzm'; | |
| 39 | + const customerKey = 'test_customer_1234'; | |
| 40 | + | |
| 41 | + paymentWidget = PaymentWidget(clientKey, customerKey); | |
| 42 | + | |
| 43 | + // 최초 선택된 체크박스 기준 금액 세팅 | |
| 44 | + setPriceMake(); | |
| 45 | + | |
| 46 | + const initialAmount = parseInt($("#price").val(), 10); | |
| 47 | + | |
| 48 | + // 결제수단 및 약관 위젯 렌더링 | |
| 49 | + paymentMethodWidget = paymentWidget.renderPaymentMethods( | |
| 50 | + '#payment-method', | |
| 51 | + { value: initialAmount } | |
| 52 | + ); | |
| 53 | + | |
| 54 | + paymentWidget.renderAgreement('#agreement'); | |
| 55 | + | |
| 56 | + $(".tType4 tbody tr td").click(function () { | |
| 57 | + $("input[name='price']").prop("checked", false); | |
| 58 | + $(this).closest("tr").find("input[name='price']").prop("checked", true); | |
| 59 | + | |
| 60 | + // 금액 갱신 | |
| 61 | + setPriceMake(); | |
| 62 | + }); | |
| 63 | + | |
| 64 | + }); | |
| 65 | + | |
| 66 | + | |
| 67 | + function setPriceMake() { | |
| 68 | + | |
| 69 | + const checkedRow = $('input[name="price"]:checked').closest('tr'); | |
| 70 | + const priceText = checkedRow.find('td').eq(1).text().replace(/,/g, '').trim(); | |
| 71 | + const supplyPrice = parseInt(priceText, 10); | |
| 72 | + const vatPrice = Math.round(supplyPrice * 0.1); | |
| 73 | + const lastPrice = supplyPrice + vatPrice; | |
| 74 | + | |
| 75 | + // hidden input 값 | |
| 76 | + $("#price").val(lastPrice); | |
| 77 | + | |
| 78 | + // 화면 표시 | |
| 79 | + $('#supplyPriceStr').html(numberWithCommas(supplyPrice)); | |
| 80 | + $('#vatPriceStr').html(numberWithCommas(vatPrice)); | |
| 81 | + $('#lastPriceStr').html(numberWithCommas(lastPrice)); | |
| 82 | + | |
| 83 | + // 토스 위젯 금액 변경 | |
| 84 | + if (typeof paymentMethodWidget !== 'undefined') { | |
| 85 | + paymentMethodWidget.updateAmount(lastPrice); | |
| 86 | + } | |
| 87 | + } | |
| 88 | + | |
| 89 | + | |
| 90 | + // 체크박스 단일 선택 처리 | |
| 91 | + $(document).on('change', 'input[name="price"]', function () { | |
| 92 | + $('input[name="price"]').not(this).prop('checked', false); | |
| 93 | + $(this).prop('checked', true); | |
| 94 | + | |
| 95 | + // 금액 갱신 | |
| 96 | + setPriceMake(); | |
| 97 | + }); | |
| 98 | + | |
| 99 | + // 후불제여부 체크 | |
| 100 | + function getMjUserAfterPayCheck() { | |
| 101 | + var isAfterPay = false; | |
| 102 | + | |
| 103 | + $.ajax({ | |
| 104 | + type: "POST", | |
| 105 | + url: "/web/main/selectUserAfterPayAjax.do", | |
| 106 | + data: {}, | |
| 107 | + dataType:'json', | |
| 108 | + async: false, | |
| 109 | + success: function (data) { | |
| 110 | + if (data.isSuccess) { | |
| 111 | + if (data.isAfterPay == true) { | |
| 112 | + isAfterPay = true; | |
| 113 | + } | |
| 114 | + } | |
| 115 | + }, | |
| 116 | + error: function (e) { | |
| 117 | + | |
| 118 | + } | |
| 119 | + }); | |
| 120 | + | |
| 121 | + return isAfterPay; | |
| 122 | + } | |
| 123 | + | |
| 124 | + function pgOpenerPopup(){ | |
| 125 | + | |
| 126 | + var lastPrice = parseInt($("#price").val(), 10); | |
| 127 | + if(lastPrice < 5500){ | |
| 128 | + alert("최소 충전금액 5천원 이상 선택해주세요."); | |
| 129 | + return false; | |
| 130 | + } | |
| 131 | + | |
| 132 | + // 토스페이먼츠 결제창 바로 호출 | |
| 133 | + paymentWidget.requestPayment({ | |
| 134 | + orderId: 'ORDER_' + new Date().getTime(), // 고유한 상점 주문번호 생성 | |
| 135 | + orderName: '문자고 충전 ' + lastPrice + '원', | |
| 136 | + successUrl: window.location.origin + '/web/member/pay/tossSuccess.do', // 결제 성공 시 이동할 URL (백엔드 컨트롤러 생성 필요) | |
| 137 | + // paymentType=NORMAL | |
| 138 | + // &orderId=ORDER_1778047452906 | |
| 139 | + // &paymentKey=tmunj2026050615041659Zv9 | |
| 140 | + // &amount=55000 | |
| 141 | + failUrl: window.location.origin + '/web/member/pay/tossFail.do', // 결제 실패 시 이동할 URL (백엔드 컨트롤러 생성 필요) | |
| 142 | + customerEmail: $('#mberEmailAdres').val(), // 필요시 로그인한 사용자의 이메일 매핑 | |
| 143 | + customerName: $('#mberNm').val(), // 필요시 로그인한 사용자의 이름 매핑 | |
| 144 | + customerMobilePhone: $('#moblphonNo').val() | |
| 145 | + }).catch(function (error) { | |
| 146 | + if (error.code === 'USER_CANCEL') { | |
| 147 | + alert('결제를 취소하셨습니다.'); | |
| 148 | + } else { | |
| 149 | + alert(error.message); | |
| 150 | + } | |
| 151 | + }); | |
| 152 | + } | |
| 153 | + | |
| 154 | + | |
| 155 | + // 숫자 콤마 함수 | |
| 156 | + function numberWithCommas(x) { | |
| 157 | + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); | |
| 158 | + } | |
| 159 | + | |
| 160 | + </script> | |
| 161 | + | |
| 162 | +</head> | |
| 163 | + | |
| 164 | +<body> | |
| 165 | + <div data-include-path="/publish/layout/_header.html"></div> | |
| 166 | + <!-- content 영역 --> | |
| 167 | + <div id="container" class="cont sub"> | |
| 168 | + <div class="inner"> | |
| 169 | + <!-- send top --> | |
| 170 | + <div class="send_top"> | |
| 171 | + <!-- tab button --> | |
| 172 | + <ul class="tabType4"> | |
| 173 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment1.html'">요금안내/견적내기</button></li> | |
| 174 | + <li class="tab active"><button type="button" onclick="TabType5(this,'2');">결제하기</button></li> | |
| 175 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment3.html'">요금 결제내역</button></li> | |
| 176 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment4.html'">요금 사용내역</button></li> | |
| 177 | + <li class="tab"><button type="button" onclick="location.href='/publish/payment5.html'">세금계산서 발행 등록</button></li> | |
| 178 | + </ul> | |
| 179 | + <!--// tab button --> | |
| 180 | + <!-- 결제관리 - 결제하기 --> | |
| 181 | + <div class="serv_content charg_cont current" id="tab5_2"> | |
| 182 | + <div class="heading"> | |
| 183 | + <h2>결제하기</h2> | |
| 184 | + <button type="button" class="button info" onclick="infoListPop('payment2','792','250');">사용안내</button> | |
| 185 | + </div> | |
| 186 | + | |
| 187 | + <div> | |
| 188 | + <!-- 토스페이먼츠 결제수단 위젯 영역 --> | |
| 189 | + <div id="payment-method" class="toss_wrap"></div> | |
| 190 | + | |
| 191 | + <!-- 토스페이먼츠 이용약관 영역 --> | |
| 192 | + <div id="agreement" class="toss_wrap"></div> | |
| 193 | + | |
| 194 | + <b class="fs_18 fwMd">결제할 금액을 선택한 후 <span class="c_002c9a">[결제하기]</span> 버튼을 눌러주세요</b> | |
| 195 | + <div class="tb_wrap" style="margin:12px 0 0 0;"> | |
| 196 | + <table class="tType4"> | |
| 197 | + <colgroup> | |
| 198 | + <col style="width:60px;"/> | |
| 199 | + <col style="width:calc((100% - 60px)/4);"/> | |
| 200 | + <col style="width:calc((100% - 60px)/4);"/> | |
| 201 | + <col style="width:calc((100% - 60px)/4);"/> | |
| 202 | + <col style="width:calc((100% - 60px)/4);"/> | |
| 203 | + </colgroup> | |
| 204 | + <thead> | |
| 205 | + <tr> | |
| 206 | + <th>선택</th> | |
| 207 | + <th>결제금액</th> | |
| 208 | + <th>단문(15원)</th> | |
| 209 | + <th>장문(39원)</th> | |
| 210 | + <th>그림(70원)</th> | |
| 211 | + </tr> | |
| 212 | + </thead> | |
| 213 | + <tbody> | |
| 214 | + <tr> | |
| 215 | + <td> | |
| 216 | + <input type="checkbox" name="price"/> | |
| 217 | + </td> | |
| 218 | + <td>10,000</td> | |
| 219 | + <td><b class="c_002c9a fwBold">666</b>건</td> | |
| 220 | + <td><b class="c_002c9a fwBold">256</b>건</td> | |
| 221 | + <td><b class="c_002c9a fwBold">142</b>건</td> | |
| 222 | + </tr> | |
| 223 | + <tr> | |
| 224 | + <td> | |
| 225 | + <input type="checkbox" name="price"/> | |
| 226 | + </td> | |
| 227 | + <td>20,000</td> | |
| 228 | + <td><b class="c_002c9a fwBold">1,333</b>건</td> | |
| 229 | + <td><b class="c_002c9a fwBold">512</b>건</td> | |
| 230 | + <td><b class="c_002c9a fwBold">285</b>건</td> | |
| 231 | + </tr> | |
| 232 | + <tr> | |
| 233 | + <td> | |
| 234 | + <input type="checkbox" name="price"/> | |
| 235 | + </td> | |
| 236 | + <td>30,000</td> | |
| 237 | + <td><b class="c_002c9a fwBold">2,000</b>건</td> | |
| 238 | + <td><b class="c_002c9a fwBold">769</b>건</td> | |
| 239 | + <td><b class="c_002c9a fwBold">428</b>건</td> | |
| 240 | + </tr> | |
| 241 | + <tr> | |
| 242 | + <td> | |
| 243 | + <input type="checkbox" name="price"/> | |
| 244 | + </td> | |
| 245 | + <td>40,000</td> | |
| 246 | + <td><b class="c_002c9a fwBold">2,666</b>건</td> | |
| 247 | + <td><b class="c_002c9a fwBold">1,025</b>건</td> | |
| 248 | + <td><b class="c_002c9a fwBold">571</b>건</td> | |
| 249 | + </tr> | |
| 250 | + <tr> | |
| 251 | + <td> | |
| 252 | + <input type="checkbox" name="price" checked/> | |
| 253 | + </td> | |
| 254 | + <td>50,000</td> | |
| 255 | + <td><b class="c_002c9a fwBold">3,333</b>건</td> | |
| 256 | + <td><b class="c_002c9a fwBold">1,282</b>건</td> | |
| 257 | + <td><b class="c_002c9a fwBold">714</b>건</td> | |
| 258 | + </tr> | |
| 259 | + <tr> | |
| 260 | + <td> | |
| 261 | + <input type="checkbox" name="price"/> | |
| 262 | + </td> | |
| 263 | + <td>100,000</td> | |
| 264 | + <td><b class="c_002c9a fwBold">6,666</b>건</td> | |
| 265 | + <td><b class="c_002c9a fwBold">2,564</b>건</td> | |
| 266 | + <td><b class="c_002c9a fwBold">1,428</b>건</td> | |
| 267 | + </tr> | |
| 268 | + <tr> | |
| 269 | + <td> | |
| 270 | + <input type="checkbox" name="price"/> | |
| 271 | + </td> | |
| 272 | + <td>150,000</td> | |
| 273 | + <td><b class="c_002c9a fwBold">10,000</b>건</td> | |
| 274 | + <td><b class="c_002c9a fwBold">3,846</b>건</td> | |
| 275 | + <td><b class="c_002c9a fwBold">2,142</b>건</td> | |
| 276 | + </tr> | |
| 277 | + <tr> | |
| 278 | + <td> | |
| 279 | + <input type="checkbox" name="price"/> | |
| 280 | + </td> | |
| 281 | + <td>200,000</td> | |
| 282 | + <td><b class="c_002c9a fwBold">13,333</b>건</td> | |
| 283 | + <td><b class="c_002c9a fwBold">5,128</b>건</td> | |
| 284 | + <td><b class="c_002c9a fwBold">2,857</b>건</td> | |
| 285 | + </tr> | |
| 286 | + <tr> | |
| 287 | + <td> | |
| 288 | + <input type="checkbox" name="price"/> | |
| 289 | + </td> | |
| 290 | + <td>300,000</td> | |
| 291 | + <td><b class="c_002c9a fwBold">20,000</b>건</td> | |
| 292 | + <td><b class="c_002c9a fwBold">7,692</b>건</td> | |
| 293 | + <td><b class="c_002c9a fwBold">4,285</b>건</td> | |
| 294 | + </tr> | |
| 295 | + <tr> | |
| 296 | + <td> | |
| 297 | + <input type="checkbox" name="price"/> | |
| 298 | + </td> | |
| 299 | + <td>400,000</td> | |
| 300 | + <td><b class="c_002c9a fwBold">26,666</b>건</td> | |
| 301 | + <td><b class="c_002c9a fwBold">10,256</b>건</td> | |
| 302 | + <td><b class="c_002c9a fwBold">5,714</b>건</td> | |
| 303 | + </tr> | |
| 304 | + <tr> | |
| 305 | + <td> | |
| 306 | + <input type="checkbox" name="price"/> | |
| 307 | + </td> | |
| 308 | + <td>500,000</td> | |
| 309 | + <td><b class="c_002c9a fwBold">33,333</b>건</td> | |
| 310 | + <td><b class="c_002c9a fwBold">12,820</b>건</td> | |
| 311 | + <td><b class="c_002c9a fwBold">7,142</b>건</td> | |
| 312 | + </tr> | |
| 313 | + <tr> | |
| 314 | + <td> | |
| 315 | + <input type="checkbox" name="price"/> | |
| 316 | + </td> | |
| 317 | + <td>1,000,000</td> | |
| 318 | + <td><b class="c_002c9a fwBold">66,666</b>건</td> | |
| 319 | + <td><b class="c_002c9a fwBold">25,641</b>건</td> | |
| 320 | + <td><b class="c_002c9a fwBold">14,285</b>건</td> | |
| 321 | + </tr> | |
| 322 | + <tr> | |
| 323 | + <td> | |
| 324 | + <input type="checkbox" name="price"/> | |
| 325 | + </td> | |
| 326 | + <td>1,500,000</td> | |
| 327 | + <td><b class="c_002c9a fwBold">100,000</b>건</td> | |
| 328 | + <td><b class="c_002c9a fwBold">38,461</b>건</td> | |
| 329 | + <td><b class="c_002c9a fwBold">21,428</b>건</td> | |
| 330 | + </tr> | |
| 331 | + <tr> | |
| 332 | + <td> | |
| 333 | + <input type="checkbox" name="price"/> | |
| 334 | + </td> | |
| 335 | + <td>2,000,000</td> | |
| 336 | + <td><b class="c_002c9a fwBold">133,333</b>건</td> | |
| 337 | + <td><b class="c_002c9a fwBold">51,282</b>건</td> | |
| 338 | + <td><b class="c_002c9a fwBold">28,571</b>건</td> | |
| 339 | + </tr> | |
| 340 | + <tr> | |
| 341 | + <td> | |
| 342 | + <input type="checkbox" name="price"/> | |
| 343 | + </td> | |
| 344 | + <td>5,000,000</td> | |
| 345 | + <td><b class="c_002c9a fwBold">333,333</b>건</td> | |
| 346 | + <td><b class="c_002c9a fwBold">128,205</b>건</td> | |
| 347 | + <td><b class="c_002c9a fwBold">71,428</b>건</td> | |
| 348 | + </tr> | |
| 349 | + </tbody> | |
| 350 | + </table> | |
| 351 | + </div> | |
| 352 | + | |
| 353 | + <div class="amount_wrap" style="margin:20px 0 0 0;padding:12px 30px 12px 35px;border:3px solid #ddd;border-radius:5px;"> | |
| 354 | + <dl> | |
| 355 | + <dt>최종 결제금액 :</dt> | |
| 356 | + <dd> | |
| 357 | + <ul> | |
| 358 | + <li><strong id="supplyPriceStr">50,000</strong>원(결제금액)</li> | |
| 359 | + <li><span class="plus"></span><strong id="vatPriceStr">5,000</strong>원(부가세)</li> | |
| 360 | + <li class="total"><span class="equal"></span><strong class="c_e40000" id="lastPriceStr">55,000</strong>원(최종금액)</li> | |
| 361 | + </ul> | |
| 362 | + </dd> | |
| 363 | + </dl> | |
| 364 | + <button type="button" class="btn btnType fill primary" onclick="pgOpenerPopup(); return false;" style="width:210px;">결제하기</button> | |
| 365 | + </div> | |
| 366 | + | |
| 367 | + | |
| 368 | + </div> | |
| 369 | + | |
| 370 | + </div><!-- 결제관리 - 결제하기 --> | |
| 371 | + </div> | |
| 372 | + <!--// send top --> | |
| 373 | + </div> | |
| 374 | + </div> | |
| 375 | + <!--// content 영역 --> | |
| 376 | + <!-- footer 영역 --> | |
| 377 | + <div data-include-path="/publish/layout/_footer.html"></div> | |
| 378 | + <!--// footer 영역 --> | |
| 379 | +</body> | |
| 380 | + | |
| 381 | +</html>(No newline at end of file) |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?