|
@@ -1,7 +1,7 @@
|
1
|
1
|
@font-face { font-family: 'NanumBarunGothic';src: url('../fonts/NanumBarunGothic.eot');src: url('../fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('../fonts/NanumBarunGothic.woff') format('woff');}
|
2
|
2
|
* {margin: 0; padding: 0; box-sizing: border-box; text-align: center; font-family: 'NanumBarunGothic', 'serif'; list-style: none;}
|
3
|
3
|
section {}
|
4
|
|
-body{background: #fff; position: relative; width: 100%; height: auto;}
|
|
4
|
+body{background: #fff; position: relative; width: 100%; height: auto; font-family: 'NanumBarunGothic';}
|
5
|
5
|
.color-gray {color:#aaa;}
|
6
|
6
|
/* 팝업 */
|
7
|
7
|
section .popup { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 11;}
|
|
@@ -128,38 +128,38 @@ body.eee {height: 700px; background: #eee;}
|
128
|
128
|
.upgrade .btn .info_btn2 button {width: 65%;color: #ccc;background-color: blue;}
|
129
|
129
|
|
130
|
130
|
/* 로그인 */
|
|
131
|
+.bg_gray {width:100%; height:180px; background:#ecebea; border-bottom-left-radius:50%; border-bottom-right-radius:50%;}
|
131
|
132
|
#ITP_LOGIN {max-width: 500px; margin: 0 auto;}
|
132
|
|
-#ITP_LOGIN .login_popup {position: relative; width: 100%; top: 80px; text-align: center;}
|
133
|
|
-#ITP_LOGIN .login_popup h1 { font-size: 1.5rem; color: #333; font-weight: normal;}
|
|
133
|
+#ITP_LOGIN .login_popup {position: relative; width: 100%; text-align: center;}
|
|
134
|
+#ITP_LOGIN .login_popup h1 { font-size: 1.5rem; color: #333; font-weight: 700;}
|
134
|
135
|
#ITP_LOGIN .login_popup input { position: relative; height: 30px; font-size: 2.2rem;}
|
135
|
|
-#ITP_LOGIN .login_popup .login_info { margin-bottom: 100px;}
|
|
136
|
+#ITP_LOGIN .login_popup .login_info { margin-bottom: 30px; position:relative; top:-50px;}
|
|
137
|
+#ITP_LOGIN .login_popup .login_info img {width:100px; margin-bottom:10px;}
|
136
|
138
|
#ITP_LOGIN .login_popup .num_area { position: relative; width: 100%; margin-bottom: 40px;}
|
137
|
139
|
#ITP_LOGIN .login_popup .num_area .input_area {margin-bottom: 10px;}
|
138
|
|
-#ITP_LOGIN .login_popup .num_area .input_area input {width:52%; font-size: 0.8rem; }
|
139
|
|
-#ITP_LOGIN .login_popup .num_area .input_area button {font-weight: 700; margin-left: 0.1%; width: 16.5%; height: 40px; background-color: blue; color: #eee; font-size: 1rem; padding: 0;}
|
140
|
|
-#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 40px; font-size: 0.8rem; background: url(../img/down.png)no-repeat 100% 50%/40px auto; -webkit-appearance:none; appearance:none;}
|
|
140
|
+#ITP_LOGIN .login_popup .num_area .input_area input {width:50%; font-size: 0.8rem; }
|
|
141
|
+#ITP_LOGIN .login_popup .num_area .input_area button {margin-left: 0.1%; width: 19.5%; height: 45px; background-color: #f7b014; color: #eee; font-size: 16px; padding: 0; border:3px solid #fbd896; border-radius: 10px;}
|
|
142
|
+#ITP_LOGIN .login_popup .num_area .brand_list select {padding-left: 10px; width: 70%; height: 45px; font-size: 0.8rem; border:2px solid #ddd; border-radius:10px; background: url(../img/downarrow.png)no-repeat 95% 50%/20px auto; -webkit-appearance:none; appearance:none;}
|
141
|
143
|
#ITP_LOGIN .login_popup .num_area .brand_list select option {text-align: left; width: 70%; height: 50px; border: 1px solid #000; font-size: 20px;}
|
142
|
144
|
|
143
|
145
|
#ITP_LOGIN .login_page {position: relative; width: 100%; margin-bottom: 30px;}
|
144
|
146
|
|
145
|
147
|
#ITP_LOGIN .input_area {position: relative; width: 100%; margin-bottom: 10px;}
|
146
|
|
-#ITP_LOGIN .input_area input {width: 70%; height: 40px; position: relative; padding: 10px; text-align: left; border:1px solid #666; font-size: 0.7rem; color: #000; outline: none; margin:0;}
|
147
|
|
-#ITP_LOGIN .input_area label {position: absolute; left: 18%; top: 12px; font-size: 1rem; transition: all .5s ease;}
|
|
148
|
+#ITP_LOGIN .input_area input {width: 70%; height: 45px; position: relative; padding: 10px; text-align: left; border:2px solid #ddd; border-radius:10px; font-size: 0.7rem; color: #000; outline: none; margin:0;}
|
|
149
|
+#ITP_LOGIN .input_area label {position: absolute; left: 18%; top: 14px; font-size: 15px; transition: all .5s ease; color:#666;}
|
148
|
150
|
#ITP_LOGIN .input_area input:focus + label,
|
149
|
|
-#ITP_LOGIN .input_area input:valid + label {top: 2px; left: 16%; font-size: 0.6rem; color: blue;}
|
|
151
|
+#ITP_LOGIN .input_area input:valid + label {top: 4px; left: 18%; font-size: 0.6rem; color: blue;}
|
150
|
152
|
#ITP_LOGIN .error {margin: 0 auto; margin-top: 100px;}
|
151
|
153
|
#ITP_LOGIN .error label {font-size: 1rem;}
|
152
|
|
-#ITP_LOGIN .login_btn {position: absolute; bottom: 0; left: 0;}
|
|
154
|
+#ITP_LOGIN .login_btn {position: relative; top: -20px; left: 0;}
|
153
|
155
|
#ITP_LOGIN .login_btn button {
|
154
|
|
- font-weight: 700;
|
155
|
|
- position: fixed;
|
156
|
|
- background-color: #aaa;
|
|
156
|
+ font-weight: nomal;
|
|
157
|
+ border:3px solid #fbd896; border-radius: 10px;
|
157
|
158
|
color: #eee;
|
158
|
|
- bottom: 0px;
|
159
|
|
- width: 100%;
|
160
|
|
- height: 60px;
|
161
|
|
- border-top: 1px solid #000;
|
162
|
|
- font-size: 1.2rem;
|
|
159
|
+ background-color: #f7b014;
|
|
160
|
+ width: 70%;
|
|
161
|
+ height: 50px;
|
|
162
|
+ font-size: 20px;
|
163
|
163
|
}
|
164
|
164
|
|
165
|
165
|
/* 메인화면 */
|
|
@@ -176,22 +176,25 @@ body.eee {height: 700px; background: #eee;}
|
176
|
176
|
.main .wicon .icon_left {float: left;}
|
177
|
177
|
|
178
|
178
|
|
179
|
|
-input {margin-top: 3px; border: 1px solid #000; margin-top: -2px; height: 36px; font-size: 0.8rem; text-align: left; padding:0 15px;}
|
|
179
|
+input {margin-top: 3px; border: 1px solid #aaa; border-radius:5px; margin-top: -2px; height: 36px; font-size: 0.8rem; text-align: left; padding:0 15px;}
|
180
|
180
|
select {border: 1px solid #000; height: 35px; font-size: 1rem; text-align: left; padding:0 15px;}
|
181
|
181
|
input .day {margin: 18%; width: 45%; height: 80px; float: right;}
|
182
|
182
|
|
183
|
183
|
/* 공통화면 */
|
184
|
184
|
|
185
|
|
-#ITP_WRAPPER header {position: fixed;top: 0;width: 100%;height: 55px;background-color:#92c7f6;align-items: center;border-bottom: 1px solid #000;z-index: 11;}
|
|
185
|
+#ITP_WRAPPER header {position: fixed;top: 0;width: 100%;height: 55px;background-color:#F7B014;align-items: center;border-bottom: 1px solid #000;z-index: 11;}
|
186
|
186
|
#ITP_WRAPPER header .header_wrap {width: 100%; height: 55px; margin: 0 auto;}
|
187
|
187
|
#ITP_WRAPPER header .header_wrap .menu_logo button {width: 40px; height: 40px; float: left; padding: 0; background: transparent; border: none; margin-top: 7px; margin-left: 7px;}
|
188
|
|
-#ITP_WRAPPER header .header_wrap .menu_logo button img {width: 35px; height: 35px; margin: 0; border-radius: 0; border: none;}
|
|
188
|
+#ITP_WRAPPER header .header_wrap .menu_logo button img {width: 25px; height: 20px; margin: 0; border-radius: 0; border: none;}
|
189
|
189
|
#ITP_WRAPPER header .header_wrap img.brand {float: right; height: 45px; margin: 5px; border-radius: 50%; border: 1px solid #666;}
|
190
|
190
|
#ITP_WRAPPER header .header_wrap label{ margin-top: 15px; width: 50px; height: 25px; font-size: 1rem;float: left; color: #fff;}
|
191
|
|
-#ITP_WRAPPER header .header_wrap .name_info {width: auto; float: right;}
|
192
|
|
-#ITP_WRAPPER header .header_wrap .name_info label {width: auto; font-size: 1.1rem; }
|
|
191
|
+#ITP_WRAPPER header .header_wrap .name_info {width: 50%; height:55px; margin:0 auto; display:inline-flex;}
|
|
192
|
+#ITP_WRAPPER header .header_wrap .name_info div {width: auto; font-size: 20px; color:#eee; margin-top:17px;}
|
|
193
|
+#ITP_WRAPPER header .header_wrap .name_info div.bn {padding-right:5px; font-size:22px; margin-top:14px;}
|
|
194
|
+
|
193
|
195
|
#ITP_WRAPPER header .header_wrap .logout {float: right; width: 60px;}
|
194
|
|
-#ITP_WRAPPER header .header_wrap .logout button { margin: 3px 0px; padding: 0px; width: 50px; height: 50px; border-radius: 15px; font-size: 0.8rem;}
|
|
196
|
+#ITP_WRAPPER header .header_wrap .logout button { margin: 3px 0px; width: 50px; height: 50px; border:none; font-size: 0.8rem;background: transparent;}
|
|
197
|
+#ITP_WRAPPER header .header_wrap .logout button img {width:22px;}
|
195
|
198
|
|
196
|
199
|
/* 메뉴바 */
|
197
|
200
|
#ITP_MENU .menu_area {position: fixed; width: 100%; height: 100%; top: 0; left: -0%; background: #000; opacity: 0.7; z-index: 12; transition: all 0.5s;}
|
|
@@ -247,24 +250,25 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
|
247
|
250
|
padding-top: 50px;
|
248
|
251
|
font-size: 2rem;
|
249
|
252
|
}
|
250
|
|
-.content {top: 55px; position: fixed; z-index: 10; width:100%; background: #fff;}
|
251
|
|
-.content .line {position: relative; display: inline-block; width: 100%; height: 35px; margin-bottom: 0px;}
|
|
253
|
+.content {z-index: 10; margin-top:5px; width:100%; background: #f4f5f4;}
|
|
254
|
+.content .line {position: relative; display: inline-block; width: 90%; height: 45px; margin-bottom: 0px;}
|
252
|
255
|
.content .line div {font-weight: 700;}
|
253
|
|
-.content .line label {font-size: 1.2rem; margin-left: 10px; float: left; text-align: left; margin-top: 12px;}
|
|
256
|
+.content .line label {min-width:110px; color:#555; font-size: 18px; margin-left: 10px; float: left; text-align: left; margin-top: 12px;}
|
254
|
257
|
.content .line label.pay_label {margin:38px 1%; width:98%;}
|
255
|
258
|
.content .line select.label {border: 1px solid #000; font-size: 0.9rem;margin:9px 0 0 5px; float: left; width: 120px; height: 30px; text-align: left;}
|
256
|
|
-.content .line .search_nm {float: right; margin-right: 2%;}
|
|
259
|
+.content .line .search_nm {float: left; margin-right: 2%;}
|
257
|
260
|
.content .line .search_wrap {float:right; margin-right:10px;}
|
258
|
|
-.content .line .float_left {float: left;}
|
|
261
|
+.content .line .float_left {float: left; margin-top:2px;}
|
|
262
|
+.content .line .float_left button {float: left; border:none;}
|
259
|
263
|
.content .line .float_left.note {width: 100%; padding: 10px;}
|
260
|
264
|
.content .line .float_left.note textarea {width: 100%; height: 100px; border: 1px solid #000; text-align: left;}
|
261
|
265
|
.content .line .float_left div {font-size: 1rem; margin-top: 8px;}
|
262
|
|
-.content .line .float_left_btn {float: left; margin-top: 5px; margin-left: 5px;}
|
|
266
|
+.content .line .float_left_btn {float: left; margin-top: 0px; margin-left: 5px;}
|
263
|
267
|
.content .line .float_left_btn button {padding:0; width:36px; height:36px; border-radius:5px;}
|
264
|
268
|
.content .line .float_left_btn button img {width:20px; height:20px;}
|
265
|
269
|
.content .line .float_left select {float: left; width: 150px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem;}
|
266
|
270
|
.content .line .line_right {font-size: 2rem; float: right; margin-right: 0%;}
|
267
|
|
-.content .line .line_right div {float: right; font-size: 1.2rem; margin-top: 12px; margin-right: 30px;}
|
|
271
|
+.content .line .line_right div {float: right; font-size: 18px;; margin-top: 12px; margin-right: 30px; color:#555;}
|
268
|
272
|
.content .line .line_right input {position: relative; text-align: right; margin-right: 84px;}
|
269
|
273
|
.content .line .line_right input.m9 {margin-right:93px;}
|
270
|
274
|
.content .line .line_right input.left {text-align: left;}
|
|
@@ -272,7 +276,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
|
272
|
276
|
.content .line .line_right select.m9 {margin-right:83px;}
|
273
|
277
|
.content .line .line_right input.date{width:140px; margin-right:132px; height:35px;}
|
274
|
278
|
.content .line .line_right select {float: right; width: 180px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem; margin-right:93px;}
|
275
|
|
-.content .line input.date {width: 40%; margin: 10px; height: 40px; float: right; margin-right: 3%;}
|
|
279
|
+.content .line input.date {width: 40%; margin: 10px; height: 35px; float: left;}
|
276
|
280
|
.content .line input.date2 {width: 140px; height: 30px; margin-right:133px;}
|
277
|
281
|
.content .line div.date_to {float: right; margin-right:10px;}
|
278
|
282
|
.content .line div.date_to input.year {width: 120px; height: 30px;}
|