모바일 로그인 수정

src/main/webapp/mobile/app/login.html

@@ -15,13 +15,15 @@
     <script src="../js/properties.js"></script>
     <script src="../../js/require.min.js" data-main="../js/config.js"></script>
   </head>
+    <div class="bg_gray"></div>
     <div id="ITP_LOGIN">
       <form id="ITP_FORM_MOBILE_LOGIN" class="form-horizontal" action="" method="post" onsubmit="return false;">
         <input id="userId" name="userId" type="hidden" value="" />
         <input id="password" name="password" type="hidden" value="" />
       <div class="login_popup">
         <div class="login_info">
-          <h1>서비스<br>VISUAL IMAGE</h1>
+			<img src="../img/oqpologo.png" alt="로고" class=" ">
+       		<h1>Order Queen</h1>
         </div>
         <div class="num_area">
           <div class="input_area">

src/main/webapp/mobile/css/style.css

@@ -1,7 +1,7 @@
 @font-face { font-family: 'NanumBarunGothic';src: url('../fonts/NanumBarunGothic.eot');src: url('../fonts/NanumBarunGothic.eot') format('embedded-opentype'),url('../fonts/NanumBarunGothic.woff') format('woff');}
 * {margin: 0; padding: 0; box-sizing: border-box; text-align: center; font-family: 'NanumBarunGothic', 'serif'; list-style: none;}
 section {}
-body{background: #fff; position: relative; width: 100%; height: auto;}
+body{background: #fff; position: relative; width: 100%; height: auto; font-family: 'NanumBarunGothic';}
 .color-gray {color:#aaa;}
 /* 팝업 */
 section .popup { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 11;}
@@ -128,38 +128,38 @@ body.eee {height: 700px; background: #eee;}
 .upgrade .btn .info_btn2 button {width: 65%;color: #ccc;background-color: blue;}
 
 /* 로그인 */
+.bg_gray {width:100%; height:180px; background:#ecebea; border-bottom-left-radius:50%; border-bottom-right-radius:50%;}
 #ITP_LOGIN {max-width: 500px; margin: 0 auto;}
-#ITP_LOGIN .login_popup {position: relative; width: 100%; top: 80px; text-align: center;}
-#ITP_LOGIN .login_popup h1 { font-size: 1.5rem; color: #333; font-weight: normal;}
+#ITP_LOGIN .login_popup {position: relative; width: 100%; text-align: center;}
+#ITP_LOGIN .login_popup h1 { font-size: 1.5rem; color: #333; font-weight: 700;}
 #ITP_LOGIN .login_popup input { position: relative; height: 30px; font-size: 2.2rem;}
-#ITP_LOGIN .login_popup .login_info { margin-bottom: 100px;}
+#ITP_LOGIN .login_popup .login_info { margin-bottom: 30px; position:relative; top:-50px;}
+#ITP_LOGIN .login_popup .login_info img {width:100px; margin-bottom:10px;}
 #ITP_LOGIN .login_popup .num_area { position: relative; width: 100%;  margin-bottom: 40px;}
 #ITP_LOGIN .login_popup .num_area .input_area {margin-bottom: 10px;}
-#ITP_LOGIN .login_popup .num_area .input_area input {width:52%; font-size: 0.8rem; }
-#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;}
-#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;}
+#ITP_LOGIN .login_popup .num_area .input_area input {width:50%; font-size: 0.8rem; }
+#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;}
+#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;}
 #ITP_LOGIN .login_popup .num_area .brand_list select option {text-align: left; width: 70%; height: 50px; border: 1px solid #000; font-size: 20px;} 
 
 #ITP_LOGIN .login_page {position: relative; width: 100%;  margin-bottom: 30px;}
 
 #ITP_LOGIN .input_area {position: relative; width: 100%;  margin-bottom: 10px;}
-#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;}
-#ITP_LOGIN .input_area label {position: absolute; left: 18%; top: 12px; font-size: 1rem; transition: all .5s ease;}
+#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;}
+#ITP_LOGIN .input_area label {position: absolute; left: 18%; top: 14px; font-size: 15px; transition: all .5s ease; color:#666;}
 #ITP_LOGIN .input_area input:focus + label,
-#ITP_LOGIN .input_area input:valid + label {top: 2px; left: 16%; font-size: 0.6rem; color: blue;}
+#ITP_LOGIN .input_area input:valid + label {top: 4px; left: 18%; font-size: 0.6rem; color: blue;}
 #ITP_LOGIN .error {margin: 0 auto; margin-top: 100px;}
 #ITP_LOGIN .error label {font-size: 1rem;}
-#ITP_LOGIN .login_btn {position: absolute; bottom: 0; left: 0;}
+#ITP_LOGIN .login_btn {position: relative; top: -20px; left: 0;}
 #ITP_LOGIN .login_btn button {
-  font-weight: 700;
-  position: fixed;
-  background-color: #aaa;
+  font-weight: nomal;
+  border:3px solid #fbd896; border-radius: 10px;
   color: #eee;
-  bottom: 0px;
-  width: 100%;
-  height: 60px;
-  border-top: 1px solid #000;
-  font-size: 1.2rem;
+  background-color: #f7b014;
+  width: 70%;
+  height: 50px;
+  font-size: 20px;
 }
 
 /* 메인화면 */
@@ -182,7 +182,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 
 /* 공통화면 */
 
-#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;}
+#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;}
 #ITP_WRAPPER header .header_wrap {width: 100%; height: 55px; margin: 0 auto;}
 #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;}
 #ITP_WRAPPER header .header_wrap .menu_logo button img {width: 35px; height: 35px; margin: 0; border-radius: 0; border: none;}