메인페이지기록카테고리수정-2

ddl_20220205.txt

@@ -61,4 +61,25 @@ alter table tbl_bf_family modify name varchar(30) comment '부모이름';
 alter table tbl_bf_family_baby_disease add disease_text varchar(255) comment '기타질환텍스트';
 
 -- tbl_bf_family_baby 테이블 member_id 컬럼값 필수 삭제
-alter table tbl_bf_family_baby modify member_id varchar(30) comment '회원아이디';
+alter table tbl_bf_family_baby modify member_id varchar(30) comment '회원아이디';
+
+-- tbl_db_home_bf_recommend : 추천 홈메이드 이유식
+CREATE TABLE `tbl_db_home_bf_recommend` (
+  `smc_no` int(11) NOT NULL COMMENT '아이 SMC_NO',
+  `dhb_no` int(11) NOT NULL COMMENT '홈메이드 이유식 정보 KEY',
+  `order_no` int(11) DEFAULT NULL COMMENT '노출순서',
+  `reg_dt` datetime DEFAULT NULL COMMENT '등록일자',
+  PRIMARY KEY (`smc_no`,`dhb_no`)
+) ENGINE=InnoDB DEFAULT CHARSET=euckr COMMENT='아이별 추천 홈메이드 이유식 정보';
+
+
+-- tbl_db_bf_ingre_recommend : 아이별 추천 식재료
+CREATE TABLE `tbl_db_bf_ingre_recommend` (
+  `smc_no` int(11) NOT NULL COMMENT '아이 SMC_NO',
+  `dbi_no` int(11) NOT NULL COMMENT '이유식 식재료 KEY',
+  `order_no` int(11) DEFAULT NULL COMMENT '노출순서',
+  `reg_dt` datetime DEFAULT NULL COMMENT '등록일자',
+  PRIMARY KEY (`smc_no`,`dbi_no`)
+) ENGINE=InnoDB DEFAULT CHARSET=euckr COMMENT='아이별 추천 이유식 식재료';
+
+

src/main/java/com/backoffice/m/bf_food/M_Bf_foodController.java

@@ -11,6 +11,7 @@ import java.util.Map.Entry;
 
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpSession;
 import javax.xml.crypto.Data;
 
 import org.apache.commons.logging.Log;
@@ -464,7 +465,98 @@ public class M_Bf_foodController extends AbstractControllerManager{
 		
 		return redirect_url;
 	}
-	
+
+	/**
+	 * 이유식 > 추천 홈페이드 이유식 화면 - snut97
+	 * @param model
+	 * @param request
+	 * @param response
+	 * @param ra
+	 * @return
+	 */
+	@RequestMapping(value="list_bf_homemade_recommend")
+	public String list_bf_homemade_recommend(@ModelAttribute("model") ModelMap model, HttpServletRequest  request, HttpServletResponse response, RedirectAttributes ra) {
+		DataMap paramMap = gmUtil.getDataMapFromRequest(request);
+//		String redirect_url = "m/bf_food/list_bf_homemade_recommend";
+		String redirect_url = "m/bf_food/" + paramMap.getString("return_url");
+		
+		HttpSession session = request.getSession(false);
+		DataMap rm_child = (DataMap) session.getAttribute(ConstantSystem.SESSION_RM_CHILD);
+
+		//세션에 선택된 아이정보가 있을 경우
+		if(rm_child != null) {
+			paramMap.put("smc_no", rm_child.get("smc_no"));			
+		} else {
+			ra.addFlashAttribute("script_msg", "아이를 선택하세요");
+			redirect_url = "redirect:/m/index.do";
+
+			return redirect_url;
+		}
+			
+		checkHeaderParam(AbstractControllerManager.CHECK_NORMAL, paramMap);
+		String check_sys_member_id = this.getSystemLoginId(request, ConstantSystem.SESSION_SYS_MEMBER, paramMap, ConstantSystem.SESSION_SYS_MEMBER);
+
+		try{
+			// 아이 정보
+			DataMap info = recommendBO.select_baby_info(paramMap);
+			DataMap.putToModel(model, "info", info);
+
+			// 영양기록
+			List<DataMap> lm = scoreBO.select_daily_list(paramMap);
+//				DataMap.putToModel(model, "lm", lm);
+			// 영양소 총합
+			DataMap tot = scoreBO.select_day_total(paramMap);
+//				DataMap.putToModel(model, "tot", tot);
+
+			int m = info.getInt("month");
+			// 산술값 순위화
+			DataMap rank  = new DataMap();
+			// 권장량대비섭취량
+			DataMap intake = new DataMap();
+			// 홈메이드,시판 이유식 추천시 필요한 dm
+			DataMap recommend = new DataMap();
+
+			// 전날 섭취 기록 없음
+			if(lm.isEmpty()) {
+				NutrientScoreCalculation nut = new NutrientScoreCalculation(info);
+				recommend.put("for_m", nut.getBabyFoodStage());
+				rank.putAll(nut.NutrientSortingForNoRecord());
+				if(nut.getLabel() != -1) rank.put("record", "N");
+				// 전날 섭취 기록 있음
+			}else {
+				NutrientScoreCalculation nut = new NutrientScoreCalculation(tot);
+				recommend.put("for_m", nut.getBabyFoodStage());
+				intake = nut.getIntakeComparedToTheRecommendedAmount();
+				rank.mergeDataMap(nut.NutrientSortingForRecord(intake));
+
+				FoodScoreCalculation food = new FoodScoreCalculation(tot);
+				rank.mergeDataMap(food.Foodsort(food.getScore()));
+				if(nut.getLabel() != -1)  rank.put("record", "Y");
+			}
+
+			List<DataMap> ingre = recommendBO.select_ingre_recommend_list(rank);
+
+			List<String> ingre_name = new ArrayList<String>();
+			for(DataMap dm:ingre) {
+				String name = dm.getString("name_real");
+				ingre_name.add(name);
+			}
+			recommend.put("name_real", ingre_name);
+
+			List<DataMap> home = recommendBO.select_home_recommend_list(recommend);
+
+			DataMap.putToModel(model, "rank", rank);
+			DataMap.putToModel(model, "intake", intake);
+			DataMap.putToModel(model, "ingre", ingre);
+			DataMap.putToModel(model, "home", home);
+
+
+		} catch(Exception ex1){
+			redirect_url = gmUtil.redirectError(true, ex1, request, paramMap, ra, ""); ex1.printStackTrace();
+		}
+
+		return redirect_url;
+	}
 	
 	@RequestMapping(value="list_bf_ingredient")	
 	public String list_bf_ingredient(@ModelAttribute("model") ModelMap model, HttpServletRequest  request, HttpServletResponse response

src/main/java/com/backoffice/m/index/M_IndexController.java

@@ -58,8 +58,7 @@ public class M_IndexController extends AbstractControllerManager{
 	M_Util gmUtil = new M_Util();
 	
 	@RequestMapping(value="index2")	
-	public String index2(@ModelAttribute("model") ModelMap model, HttpServletRequest  request, HttpServletResponse response
-    		, RedirectAttributes ra) {	
+	public String index2(@ModelAttribute("model") ModelMap model, HttpServletRequest  request, HttpServletResponse response, RedirectAttributes ra) {
 
 		DataMap paramMap = gmUtil.getDataMapFromRequest(request);
 
@@ -120,8 +119,7 @@ public class M_IndexController extends AbstractControllerManager{
 	 * @return
 	 */
 	@RequestMapping(value="index")	
-	public String view_sn_index(@ModelAttribute("model") ModelMap model, HttpServletRequest  request, HttpServletResponse response
-    		, RedirectAttributes ra) {	
+	public String view_sn_index(@ModelAttribute("model") ModelMap model, HttpServletRequest  request, HttpServletResponse response, RedirectAttributes ra) {
 
 		DataMap paramMap = gmUtil.getDataMapFromRequest(request);
 
@@ -160,8 +158,8 @@ public class M_IndexController extends AbstractControllerManager{
 				// 아이
 				DataMap rm_child = init_child(model, request, paramMap);
 				DataMap.putToModel(model, "rm_child", rm_child);
-				
-				
+
+
 				if(rm_child != null) {
 					// 선택아이 성장 정보 조회
 					DataMap rm_last_h = init_child_info(model, request, paramMap, "Y", "N");				
@@ -288,8 +286,7 @@ public class M_IndexController extends AbstractControllerManager{
 	 */
     @RequestMapping(value="ajax_child_info", method=RequestMethod.GET)
     @ResponseBody
-    public DataMap ajax_child_info(@ModelAttribute("model") ModelMap model, HttpServletRequest request, HttpServletResponse response
-    		, RedirectAttributes redirectAttributes) {
+    public DataMap ajax_child_info(@ModelAttribute("model") ModelMap model, HttpServletRequest request, HttpServletResponse response, RedirectAttributes redirectAttributes) {
 
     	DataMap paramMap = gmUtil.getDataMapFromRequest(request);
     	
@@ -311,7 +308,9 @@ public class M_IndexController extends AbstractControllerManager{
 					// 디폴트 아이정보 선택
 					DataMap rm_child = init_child(model, request, paramMap);
 					result.put("rm_child", rm_child);
-					
+
+					log.info("smc_no:" + rm_child.get("smc_no"));
+
 					if(rm_child != null) {
 						// 선택아이 성장 정보 조회
 						DataMap rm_last_h = init_child_info(model, request, paramMap, "Y", "N");				

src/main/resources/bf.properties

@@ -1,9 +1,9 @@
 ########## Environment ##########
 #개발서버 : 45.50.165.220
 
-URL_BASE=http://devops.lookylooks.ai:14280
+#URL_BASE=http://devops.lookylooks.ai:14280
 #URL_BASE=http://qoolsystem.com
-#URL_BASE=http://dev.bf.co.kr:8080
+URL_BASE=http://dev.bf.co.kr:8080
 SERVER_TP_KOR=개발
 SERVER_TP=DEV
 #system.domain=http://qoolsystem.com
@@ -60,6 +60,10 @@ social.callback.naver=/m/login/nhnLogin_callback
 social.callback.kakao=/m/login/kakaoLogin_callback.do
 
 mysql_driver=net.sf.log4jdbc.DriverSpy
-mysql_url=jdbc:log4jdbc:mysql://devops.lookylooks.ai:14236/babyfeed
-mysql_username=imcloud
-mysql_password=imc1234
+#mysql_url=jdbc:log4jdbc:mysql://devops.lookylooks.ai:14236/babyfeed
+mysql_url=jdbc:log4jdbc:mysql://115.85.181.214:3306/babyfeed
+mysql_username=root
+mysql_password=123qwe!@#
+
+#mysql_username=imcloud
+#mysql_password=imc1234

src/main/resources/sqlmap/admin/bf/com.backoffice.admin.bf.bf_recommend.xml

@@ -9,6 +9,8 @@
 				   ,DATEDIFF(current_date()-interval 1 day,birthday) AS afterbirth
 				   ,TIMESTAMPDIFF(MONTH, birthday, current_date()) AS month
 				   ,current_date()-interval 1 day AS reg_dt
+		   		   ,append_src_img_file
+   				   ,append_300_img_file
 			FROM tbl_bf_family_baby
 			WHERE smc_no=#smc_no#
 	</select>
@@ -96,7 +98,7 @@
 	</select>
 	
 	<select id="select_home_recommend_list"  resultClass="dataMap" parameterClass="dataMap">
-		SELECT dhb.dhb_cd
+		SELECT dhb.dhb_no
 			   ,dhb.name
 		       ,COUNT(lhb.reg_dt) AS views
 		FROM (

src/main/webapp/WEB-INF/views/ftl/admin/login.ftl

@@ -11,7 +11,6 @@
 	<script src="${URL_STATIC_ROOT}/static/renamaster/js/cookie.js"></script>    
 	<script src="${URL_STATIC_ROOT}/static/renamaster/js/renamaster_map.js"></script>
 	<script src="${URL_STATIC_ROOT}/static/renamaster/js/renamaster_util.js"></script>
-
     <script src="${URL_STATIC_ROOT}/static/js/catcode-admin.js"></script>
 	
 	<style>

src/main/webapp/WEB-INF/views/ftl/m/bf_food/list_bf_cart.ftl

@@ -12,7 +12,7 @@
 
         <!-- header_sub -->
         <header class="header_wrapper">
-            <a href="javascript:back.return_url();" class="side_Lbtn hidden pre_btn">이전으로</a>
+            <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
             <h1 class="header_title">카트</h1>
             <div class="side_Rbtn">             
             </div>

src/main/webapp/WEB-INF/views/ftl/m/bf_food/list_bf_cart_add.ftl

@@ -10,7 +10,7 @@
 
         <!-- header_sub -->
         <header class="header_wrapper">
-            <a href="javascript:back.return_url();" class="side_Lbtn hidden pre_btn">이전으로</a>
+            <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
             <h1 class="header_title">카트 추가하기</h1>
             <div class="side_Rbtn">
             </div>

src/main/webapp/WEB-INF/views/ftl/m/bf_food/list_bf_homemade.ftl

@@ -12,7 +12,7 @@
 
         <!-- header_sub -->
         <header class="header_wrapper">
-            <a href="javascript:back.return_url();" class="side_Lbtn hidden pre_btn">이전으로</a>
+            <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
             <h1 class="header_title">홈메이드이유식</h1>
             <a href="#" class="side_Rbtn hidden"></a>
         </header>

src/main/webapp/WEB-INF/views/ftl/m/bf_food/list_bf_homemade_recommend.ftl

@@ -0,0 +1,75 @@
+<#include "/m/include/index_top.ftl">
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+<link rel="stylesheet" href="${URL_STATIC_ROOT}/m/css/swiper.min.css">
+<script src="${URL_STATIC_ROOT}/m/js/swiper.min.js"></script>
+<script src="${URL_STATIC_ROOT}/m/js/jquery_popupoverlay.js"></script>
+<script src="${URL_STATIC_ROOT}/m/js/design.js"></script>
+
+<body>
+
+<!-- wrap -->
+<ul class="wrap">
+
+    <!-- header_sub -->
+    <header class="header_wrapper">
+        <a href="javascript:back.return_url()" class="side_Lbtn hidden pre_btn">이전으로</a>
+        <h1 class="header_title">추천 홈메이드 이유식</h1>
+        <a href="${URL_ROOT}/m/bf_food/list_bf_homemade_recommend.do?smc_no=${model['info']['smc_no']}&return_url=list_bf_ingre_recommend" class="side_Rbtn">추천식재료</a>
+        <a href="${URL_ROOT}/m/bf_food/list_bf_cart.do?return_url=index" class="side_Rbtn">카트</a>
+    </header>
+    <!-- //header_sub -->
+
+    <div>
+        <h2><span name="child_nm">${model['info']['name']!}</span></h2>
+        <div>
+            <p><img src="<#if model['info']['append_300_img_file']?exists>${URL_ROOT}/file/get_img.do?mt_file_seq=${model['info']['append_300_img_file']}<#else>${URL_STATIC_ROOT}/m/img/main/main_profile_img02.png</#if>" alt="프로필 사진" /></p>
+
+        </div>
+    </div>
+
+
+    <!-- main_nutrition -->
+    <main class="main_nutrition" style="padding-top:60px">
+
+        <!-- nutrition_search_main -->
+        <ul class="nutrition_search_main pd0">
+            <!-- 검색결과 -->
+            <ul id="ul_board" class="search_result_homemade">
+                <H4>추천 홈메이드 이유식</H4>
+            </ul>
+
+            <ul id="ul_board" class="search_result_homemade">
+                <#if model['home']?has_content>
+                    <#list model['home'] as item>
+                        <li><a href="${URL_ROOT}/m/bf_food/view_bf_homemade.do?return_url=list_bf_homemade&dhb_no=${item['dhb_no']!}">${item['name']!}</a></li>
+                    </#list>
+                <#else>
+                    아이 이유식단계 & 추천이유식 1개이상 포함된 홈메이드 이유식 없음
+                </#if>
+            </ul>
+
+        </ul>
+        <!-- //nutrition_search_main -->
+
+        <ul style="padding-top:100px"></ul>
+
+        <button onclick="location.href='${URL_ROOT}/m/bf_food/list_bf_homemade.do?return_url=index'">이유식 레시피 검색</button>
+        <button onclick="location.href='${URL_ROOT}/m/bf_food/list_bf_commerce.do?return_url=index'">시판 이유식 검색</button>
+    </main>
+    <!-- //main_nutrition -->
+
+</ul>
+<!-- //wrap -->
+
+<script type="text/javascript">
+</script>
+
+<!-- 하단 네비 iyu_nav -->
+<#include "/m/include/index_bottom_menu.ftl">
+<!-- //iyu_nav -->
+
+<#include "/m/bf_food/include_return_url.ftl">
+
+</body>
+<#include "/m/include/index_bottom.ftl">

src/main/webapp/WEB-INF/views/ftl/m/bf_food/list_bf_ingre_recommend.ftl

@@ -0,0 +1,72 @@
+<#include "/m/include/index_top.ftl">
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+<link rel="stylesheet" href="${URL_STATIC_ROOT}/m/css/swiper.min.css">
+<script src="${URL_STATIC_ROOT}/m/js/swiper.min.js"></script>
+<script src="${URL_STATIC_ROOT}/m/js/jquery_popupoverlay.js"></script>
+<script src="${URL_STATIC_ROOT}/m/js/design.js"></script>
+
+<body>
+
+<!-- wrap -->
+<ul class="wrap">
+
+    <!-- header_sub -->
+    <header class="header_wrapper">
+        <a href="javascript:back.return_url()" class="side_Lbtn hidden pre_btn">이전으로</a>
+        <h1 class="header_title">추천 식재료</h1>
+        <a href="${URL_ROOT}/m/bf_food/list_bf_homemade_recommend.do?smc_no=${model['info']['smc_no']}&return_url=list_bf_homemade_recommend" class="side_Rbtn">추천홈메이드이유식</a>
+
+    </header>
+    <!-- //header_sub -->
+
+    <div>
+        <h2><span name="child_nm">${model['info']['name']!}</span></h2>
+        <div>
+            <p><img src="<#if model['info']['append_300_img_file']?exists>${URL_ROOT}/file/get_img.do?mt_file_seq=${model['info']['append_300_img_file']}<#else>${URL_STATIC_ROOT}/m/img/main/main_profile_img02.png</#if>" alt="프로필 사진" /></p>
+
+        </div>
+    </div>
+
+
+    <!-- main_nutrition -->
+    <main class="main_nutrition" style="padding-top:60px">
+
+        <!-- nutrition_search_main -->
+        <ul class="nutrition_search_main pd0">
+            <!-- 검색결과 -->
+            <ul id="ul_board" class="search_result_homemade">
+                <H4>추천 식재료3</H4>
+            </ul>
+
+            <ul id="ul_board" class="search_result_homemade">
+                <#if model['ingre']?has_content>
+                    <#list model['ingre'] as item>
+                        <li><a href="${URL_ROOT}/m/bf_food/view_bf_ingredient.do?return_url=list_bf_ingredient&dbi_no=${item['dbi_no']!}">${item['name_real']!}</a></li>
+                    </#list>
+                </#if>
+            </ul>
+
+            <br/>
+            <br/>
+
+        </ul>
+        <!-- //nutrition_search_main -->
+
+    </main>
+    <!-- //main_nutrition -->
+
+</ul>
+<!-- //wrap -->
+
+<script type="text/javascript">
+</script>
+
+<!-- 하단 네비 iyu_nav -->
+<#include "/m/include/index_bottom_menu.ftl">
+<!-- //iyu_nav -->
+
+<#include "/m/bf_food/include_return_url.ftl">
+
+</body>
+<#include "/m/include/index_bottom.ftl">

src/main/webapp/WEB-INF/views/ftl/m/bf_food/view_bf_commerce.ftl

@@ -13,7 +13,7 @@
 
         <!-- header_sub -->
         <header class="header_wrapper">
-            <a href="javascript:back.return_url();" class="side_Lbtn hidden pre_btn">이전으로</a>
+            <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
             <h1 class="header_title">시중판매이유식</h1>
             <div class="side_Rbtn">
                 <a href="javascript:insert_cart(${model['rm']['dbc_no']!},'${model['rm']['prd_nm']!}');" class="foodInfo_subMain_basket">

src/main/webapp/WEB-INF/views/ftl/m/bf_food/view_bf_homemade.ftl

@@ -12,7 +12,7 @@
 
         <!-- header_sub -->
         <header class="header_wrapper">
-            <a href="javascript:back.return_url();" class="side_Lbtn hidden pre_btn">이전으로</a>
+            <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
             <h1 class="header_title">홈메이드  소개</h1>
             <a href="#" class="side_Rbtn hidden"></a>
         </header>

src/main/webapp/WEB-INF/views/ftl/m/bf_food/view_bf_ingredient.ftl

@@ -12,7 +12,7 @@
 
         <!-- header_sub -->
         <header class="header_wrapper">
-            <a href="javascript:back.return_url();" class="side_Lbtn hidden pre_btn">이전으로</a>
+            <a href="javascript:history.back();" class="side_Lbtn hidden pre_btn">이전으로</a>
             <h1 class="header_title">이유식 식재료 소개</h1>
             <div class="side_Rbtn header_cart">
                 <a href="javascript:insert_cart(${model['rm']['dbi_no']!},'${model['rm']['name_real']!}');" class="nutrition_subMain_set"><img src="${URL_STATIC_ROOT}/m/img/nutrition/nutrition_subMain_cart_ico.png" alt="장바구니 담기" /></a>

src/main/webapp/WEB-INF/views/ftl/m/include/index_bottom.ftl

@@ -100,6 +100,11 @@
 	});
         
     });
+
+    function fncGoRecommend() {
+        <#--location.href = "${URL_ROOT}/m/bf_food/list_bf_homemade_recommend.do?smc_no=" + $("#smc_no").val() + "&return_url=list_bf_homemade_recommend";-->
+        location.href = "${URL_ROOT}/m/bf_food/list_bf_homemade_recommend.do?return_url=list_bf_homemade_recommend";
+    }
 </script>
 
 </html>

src/main/webapp/WEB-INF/views/ftl/m/include/index_bottom_menu.ftl

@@ -1,9 +1,13 @@
 <nav class="iyu_nav">
 	<ul>
 		<li class="nav_list01">
-			<a href="${URL_ROOT}/m/bf_food/index.do?return_url=index">
-				<div class="icon">이유식(영양)</div>
-				<div class="tit">이유식(영양)</div>
+<#--			<a href="${URL_ROOT}/m/bf_food/index.do?return_url=index">-->
+<#--				<div class="icon">영양</div>-->
+<#--				<div class="tit">영양</div>-->
+<#--			</a>-->
+			<a href="javascript:fncGoRecommend()">
+				<div class="icon">이유식</div>
+				<div class="tit">이유식</div>
 			</a>
 		</li>
 		<li class="nav_list02">

src/main/webapp/m/css/reset.css

@@ -0,0 +1,93 @@
+@charset"utf-8";
+
+@font-face {
+   font-family: 'Noto Sans KR'; 
+   font-style: normal;
+   font-weight: 300;
+   src: url(../font/NotoSansKR-Regular.otf) format('otf'),
+       url(../font/NotoSansKR-Regular.woff) format('woff'),
+       url(../font/NotoSansKR-Regular.ttf) format('ttf');
+ }
+
+@font-face {
+   font-family: 'Noto Sans KR'; 
+   font-style: normal;
+   font-weight: 400;
+   src: url(../font/NotoSansKR-Medium.otf) format('otf'),
+       url(../font/NotoSansKR-Medium.woff) format('woff'),
+       url(../font/NotoSansKR-Medium.ttf) format('ttf');
+ }
+
+@font-face {
+   font-family: 'Noto Sans KR'; 
+   font-style: normal;
+   font-weight: 500;
+   src: url(../font/NotoSansKR-Bold.otf) format('otf'),
+       url(../font/NotoSansKR-Bold.woff) format('woff'),
+       url(../font/NotoSansKR-Bold.ttf) format('ttf');
+ }
+
+@font-face {
+   font-family: 'Noto Sans KR'; 
+   font-style: normal;
+   font-weight: 600;
+   src: url(../font/NotoSansKR-Bold.otf) format('otf'),
+       url(../font/NotoSansKR-Bold.woff) format('woff'),
+       url(../font/NotoSansKR-Bold.ttf) format('ttf');
+ }
+
+
+html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,b,font,
+blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
+ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
+fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
+article,aside,canvas,details,figcaption,figure,footer,header,hgroup,
+menu,nav,section,summary,time,mark,audio,video,input,button,select,input{
+	margin:0; 
+	padding:0;
+	font-family: 'Noto Sans KR'!important;
+	outline: none;
+}
+*{margin:0; padding:0;}
+*, 
+*:before, 
+*:after { 
+	-moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box; 
+	box-sizing: border-box;
+}
+html, body { 
+	width: 100%; height: 100%; font-family: 'Noto Sans KR', 'Myriad Pro', sans-serif; font-weight: 300; font-size: 16px; color: #000000;
+}
+img,fieldset{border: none; vertical-align: top;}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
+body { line-height: 1;}
+ol, ul { list-style: none;}
+ul::after,ol::after,cb::after{content:""; display:block; clear:both;}
+li { display: list-item; float:left; text-align: -webkit-match-parent;}
+blockquote, q { quotes: none; }
+blockquote:before, blockquote:after, q:before, q:after {
+    content: ''; content: none; }
+table { border-collapse: collapse; border-spacing: 0;}
+body { -webkit-text-size-adjust: none;}
+h1,h2,h3,h4,h5,h6,select,p,pre,button,input,textarea,button{font-family: 'Noto Sans KR'; font-weight: 300; color: #000000;font-size: 16px; }
+address,strong{font-style:normal; font-weight:normal;}
+a { text-decoration:none; color:#000000; }
+a:hover { color:#000000; }
+select{  -webkit-appearance:none; appearance:none; }
+select::-ms-expand {display:none}
+i{font-style: normal;}
+button{ -webkit-border:none; -webkit-outline:none; background-color: #dddddd; }
+
+body{
+	outline: none;
+	
+	/* 화면을 길게 누르고 있을때 뜨는 팝업이나 액션시트를 제어 */
+	-webkit-touch-callout:none;
+	touch-callout:none;
+    /* 텍스트나 이미지를 선택할 수 있게 하는 여부를 제어 */
+    -webkit-user-select:none;
+    user-select:none;
+    /* 링크를 터치했을때 나오는 기본 영역의 색상을 제어 */
+/*    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);*/
+}

src/main/webapp/m/css/swiper.min.css

@@ -0,0 +1,706 @@
+/**
+ * Swiper 4.4.6
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * http://www.idangero.us/swiper/
+ *
+ * Copyright 2014-2018 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: December 19, 2018
+ */
+
+.swiper-container {
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    z-index: 1
+}
+
+.swiper-container-no-flexbox .swiper-slide {
+    float: left
+}
+
+.swiper-container-vertical>.swiper-wrapper {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column
+}
+
+.swiper-wrapper {
+    position: relative;
+    width: 100%;
+    height: auto;
+    z-index: 1;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    -o-transition-property: transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box
+}
+
+.swiper-container-android .swiper-slide,
+.swiper-wrapper {
+    height: 100%;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
+}
+
+.swiper-container-multirow>.swiper-wrapper {
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap
+}
+
+.swiper-container-free-mode>.swiper-wrapper {
+    -webkit-transition-timing-function: ease-out;
+    -o-transition-timing-function: ease-out;
+    transition-timing-function: ease-out;
+    margin: 0 auto
+}
+
+.swiper-slide {
+    width: 100%;
+    -webkit-flex-shrink: 0;
+    -ms-flex-negative: 0;
+    flex-shrink: 0;
+    width: 100%;
+    height: auto;
+    position: relative;
+    -webkit-transition-property: -webkit-transform;
+    transition-property: -webkit-transform;
+    -o-transition-property: transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform
+}
+
+.swiper-slide-invisible-blank {
+    visibility: hidden
+}
+
+.swiper-container-autoheight,
+.swiper-container-autoheight .swiper-slide {
+    height: auto
+}
+
+.swiper-container-autoheight .swiper-wrapper {
+    -webkit-box-align: start;
+    -webkit-align-items: flex-start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    -webkit-transition-property: height, -webkit-transform;
+    transition-property: height, -webkit-transform;
+    -o-transition-property: transform, height;
+    transition-property: transform, height;
+    transition-property: transform, height, -webkit-transform
+}
+
+.swiper-container-3d {
+    -webkit-perspective: 1200px;
+    perspective: 1200px
+}
+
+.swiper-container-3d .swiper-cube-shadow,
+.swiper-container-3d .swiper-slide,
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top,
+.swiper-container-3d .swiper-wrapper {
+    -webkit-transform-style: preserve-3d;
+    transform-style: preserve-3d
+}
+
+.swiper-container-3d .swiper-slide-shadow-bottom,
+.swiper-container-3d .swiper-slide-shadow-left,
+.swiper-container-3d .swiper-slide-shadow-right,
+.swiper-container-3d .swiper-slide-shadow-top {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10
+}
+
+.swiper-container-3d .swiper-slide-shadow-left {
+    background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+    background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: -o-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-right {
+    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-top {
+    background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+    background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-3d .swiper-slide-shadow-bottom {
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0)));
+    background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: -o-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
+}
+
+.swiper-container-wp8-horizontal,
+.swiper-container-wp8-horizontal>.swiper-wrapper {
+    -ms-touch-action: pan-y;
+    touch-action: pan-y
+}
+
+.swiper-container-wp8-vertical,
+.swiper-container-wp8-vertical>.swiper-wrapper {
+    -ms-touch-action: pan-x;
+    touch-action: pan-x
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+    position: absolute;
+    bottom: 10px;
+    width: 27px;
+    height: 44px;
+    margin-top: -22px;
+    z-index: 10;
+    cursor: pointer;
+    background-size: 27px 44px;
+    background-position: center;
+    background-repeat: no-repeat
+}
+
+.swiper-button-next.swiper-button-disabled,
+.swiper-button-prev.swiper-button-disabled {
+    opacity: .35;
+    cursor: auto;
+    pointer-events: none
+}
+
+.swiper-button-prev,
+.swiper-container-rtl .swiper-button-next {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+    left: 10px;
+    right: auto
+}
+
+.swiper-button-next,
+.swiper-container-rtl .swiper-button-prev {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
+    right: 10px;
+    left: auto
+}
+
+.swiper-button-prev.swiper-button-white,
+.swiper-container-rtl .swiper-button-next.swiper-button-white {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-next.swiper-button-white,
+.swiper-container-rtl .swiper-button-prev.swiper-button-white {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-prev.swiper-button-black,
+.swiper-container-rtl .swiper-button-next.swiper-button-black {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-next.swiper-button-black,
+.swiper-container-rtl .swiper-button-prev.swiper-button-black {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")
+}
+
+.swiper-button-lock {
+    display: none
+}
+
+.swiper-pagination {
+    position: absolute;
+    text-align: center;
+    -webkit-transition: .3s opacity;
+    -o-transition: .3s opacity;
+    transition: .3s opacity;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    z-index: 10
+}
+
+.swiper-pagination.swiper-pagination-hidden {
+    opacity: 0
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets,
+.swiper-pagination-custom,
+.swiper-pagination-fraction {
+    bottom: 10px;
+    left: 0;
+    width: 100%
+}
+
+.swiper-pagination-bullets-dynamic {
+    overflow: hidden;
+    font-size: 0
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    -webkit-transform: scale(.33);
+    -ms-transform: scale(.33);
+    transform: scale(.33);
+    position: relative
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1)
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1)
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+    -webkit-transform: scale(.66);
+    -ms-transform: scale(.66);
+    transform: scale(.66)
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+    -webkit-transform: scale(.33);
+    -ms-transform: scale(.33);
+    transform: scale(.33)
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+    -webkit-transform: scale(.66);
+    -ms-transform: scale(.66);
+    transform: scale(.66)
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+    -webkit-transform: scale(.33);
+    -ms-transform: scale(.33);
+    transform: scale(.33)
+}
+
+.swiper-pagination-bullet {
+    width: 6px;
+    height: 6px;
+    display: inline-block;
+    border-radius: 100%;
+    background: #000;
+    opacity: .2
+}
+
+button.swiper-pagination-bullet {
+    border: none;
+    margin: 0;
+    padding: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none
+}
+
+.swiper-pagination-clickable .swiper-pagination-bullet {
+    cursor: pointer
+}
+
+.swiper-pagination-bullet-active {
+    opacity: 1;
+    background: #FF9C00;
+}
+
+.swiper-container-vertical>.swiper-pagination-bullets {
+    right: 10px;
+    top: 50%;
+    -webkit-transform: translate3d(0, -50%, 0);
+    transform: translate3d(0, -50%, 0)
+}
+
+.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 6px 0;
+    display: block
+}
+
+.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+    width: 8px
+}
+
+.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    display: inline-block;
+    -webkit-transition: .2s top, .2s -webkit-transform;
+    transition: .2s top, .2s -webkit-transform;
+    -o-transition: .2s transform, .2s top;
+    transition: .2s transform, .2s top;
+    transition: .2s transform, .2s top, .2s -webkit-transform
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 4px
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+    white-space: nowrap
+}
+
+.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    -webkit-transition: .2s left, .2s -webkit-transform;
+    transition: .2s left, .2s -webkit-transform;
+    -o-transition: .2s transform, .2s left;
+    transition: .2s transform, .2s left;
+    transition: .2s transform, .2s left, .2s -webkit-transform
+}
+
+.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    -webkit-transition: .2s right, .2s -webkit-transform;
+    transition: .2s right, .2s -webkit-transform;
+    -o-transition: .2s transform, .2s right;
+    transition: .2s transform, .2s right;
+    transition: .2s transform, .2s right, .2s -webkit-transform
+}
+
+.swiper-pagination-progressbar {
+    background: rgba(0, 0, 0, .25);
+    position: absolute
+}
+
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+    background: #007aff;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    transform: scale(0);
+    -webkit-transform-origin: left top;
+    -ms-transform-origin: left top;
+    transform-origin: left top
+}
+
+.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+    -webkit-transform-origin: right top;
+    -ms-transform-origin: right top;
+    transform-origin: right top
+}
+
+.swiper-container-horizontal>.swiper-pagination-progressbar,
+.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+    width: 100%;
+    height: 4px;
+    left: 0;
+    top: 0
+}
+
+.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-container-vertical>.swiper-pagination-progressbar {
+    width: 4px;
+    height: 100%;
+    left: 0;
+    top: 0
+}
+
+.swiper-pagination-white .swiper-pagination-bullet-active {
+    background: #fff
+}
+
+.swiper-pagination-progressbar.swiper-pagination-white {
+    background: rgba(255, 255, 255, .25)
+}
+
+.swiper-pagination-progressbar.swiper-pagination-white .swiper-pagination-progressbar-fill {
+    background: #fff
+}
+
+.swiper-pagination-black .swiper-pagination-bullet-active {
+    background: #000
+}
+
+.swiper-pagination-progressbar.swiper-pagination-black {
+    background: rgba(0, 0, 0, .25)
+}
+
+.swiper-pagination-progressbar.swiper-pagination-black .swiper-pagination-progressbar-fill {
+    background: #000
+}
+
+.swiper-pagination-lock {
+    display: none
+}
+
+.swiper-scrollbar {
+    border-radius: 10px;
+    position: relative;
+    -ms-touch-action: none;
+    background: rgba(0, 0, 0, .1)
+}
+
+.swiper-container-horizontal>.swiper-scrollbar {
+    position: absolute;
+    left: 1%;
+    bottom: 3px;
+    z-index: 50;
+    height: 5px;
+    width: 98%
+}
+
+.swiper-container-vertical>.swiper-scrollbar {
+    position: absolute;
+    right: 3px;
+    top: 1%;
+    z-index: 50;
+    width: 5px;
+    height: 98%
+}
+
+.swiper-scrollbar-drag {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: rgba(0, 0, 0, .5);
+    border-radius: 10px;
+    left: 0;
+    top: 0
+}
+
+.swiper-scrollbar-cursor-drag {
+    cursor: move
+}
+
+.swiper-scrollbar-lock {
+    display: none
+}
+
+.swiper-zoom-container {
+    width: 100%;
+    height: 100%;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    text-align: center
+}
+
+.swiper-zoom-container>canvas,
+.swiper-zoom-container>img,
+.swiper-zoom-container>svg {
+    max-width: 100%;
+    max-height: 100%;
+    -o-object-fit: contain;
+    object-fit: contain
+}
+
+.swiper-slide-zoomed {
+    cursor: move
+}
+
+.swiper-lazy-preloader {
+    width: 42px;
+    height: 42px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -21px;
+    margin-top: -21px;
+    z-index: 10;
+    -webkit-transform-origin: 50%;
+    -ms-transform-origin: 50%;
+    transform-origin: 50%;
+    -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
+    animation: swiper-preloader-spin 1s steps(12, end) infinite
+}
+
+.swiper-lazy-preloader:after {
+    display: block;
+    content: '';
+    width: 100%;
+    height: 100%;
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+    background-position: 50%;
+    background-size: 100%;
+    background-repeat: no-repeat
+}
+
+.swiper-lazy-preloader-white:after {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}
+
+@-webkit-keyframes swiper-preloader-spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+
+@keyframes swiper-preloader-spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg)
+    }
+}
+
+.swiper-container .swiper-notification {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    opacity: 0;
+    z-index: -1000
+}
+
+.swiper-container-fade.swiper-container-free-mode .swiper-slide {
+    -webkit-transition-timing-function: ease-out;
+    -o-transition-timing-function: ease-out;
+    transition-timing-function: ease-out
+}
+
+.swiper-container-fade .swiper-slide {
+    pointer-events: none;
+    -webkit-transition-property: opacity;
+    -o-transition-property: opacity;
+    transition-property: opacity
+}
+
+.swiper-container-fade .swiper-slide .swiper-slide {
+    pointer-events: none
+}
+
+.swiper-container-fade .swiper-slide-active,
+.swiper-container-fade .swiper-slide-active .swiper-slide-active {
+    pointer-events: auto
+}
+
+.swiper-container-cube {
+    overflow: visible
+}
+
+.swiper-container-cube .swiper-slide {
+    pointer-events: none;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1;
+    visibility: hidden;
+    -webkit-transform-origin: 0 0;
+    -ms-transform-origin: 0 0;
+    transform-origin: 0 0;
+    width: 100%;
+    height: 100%
+}
+
+.swiper-container-cube .swiper-slide .swiper-slide {
+    pointer-events: none
+}
+
+.swiper-container-cube.swiper-container-rtl .swiper-slide {
+    -webkit-transform-origin: 100% 0;
+    -ms-transform-origin: 100% 0;
+    transform-origin: 100% 0
+}
+
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-active .swiper-slide-active {
+    pointer-events: auto
+}
+
+.swiper-container-cube .swiper-slide-active,
+.swiper-container-cube .swiper-slide-next,
+.swiper-container-cube .swiper-slide-next+.swiper-slide,
+.swiper-container-cube .swiper-slide-prev {
+    pointer-events: auto;
+    visibility: visible
+}
+
+.swiper-container-cube .swiper-slide-shadow-bottom,
+.swiper-container-cube .swiper-slide-shadow-left,
+.swiper-container-cube .swiper-slide-shadow-right,
+.swiper-container-cube .swiper-slide-shadow-top {
+    z-index: 0;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden
+}
+
+.swiper-container-cube .swiper-cube-shadow {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: .6;
+    -webkit-filter: blur(50px);
+    filter: blur(50px);
+    z-index: 0
+}
+
+.swiper-container-flip {
+    overflow: visible
+}
+
+.swiper-container-flip .swiper-slide {
+    pointer-events: none;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1
+}
+
+.swiper-container-flip .swiper-slide .swiper-slide {
+    pointer-events: none
+}
+
+.swiper-container-flip .swiper-slide-active,
+.swiper-container-flip .swiper-slide-active .swiper-slide-active {
+    pointer-events: auto
+}
+
+.swiper-container-flip .swiper-slide-shadow-bottom,
+.swiper-container-flip .swiper-slide-shadow-left,
+.swiper-container-flip .swiper-slide-shadow-right,
+.swiper-container-flip .swiper-slide-shadow-top {
+    z-index: 0;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden
+}
+
+.swiper-container-coverflow .swiper-wrapper {
+    -ms-perspective: 1200px
+}

src/main/webapp/m/css/timepicki.css

@@ -0,0 +1,100 @@
+/* 
+Created on: 17 Sep, 2014, 4:29:37 PM
+Author: senthil
+*/
+
+.ti_tx,
+.mi_tx,
+.mer_tx {
+    width: 100%;
+    text-align: center;
+    margin: 10px 0;
+}
+
+.time {
+    margin-left: calc(50% - 110px) !important;
+}
+
+.time,
+.mins,
+.meridian {
+    width: 60px;
+    float: left;
+    margin: 0 10px;
+    font-size: 20px;
+    color: #2d2e2e;
+    font-family: arial;
+    font-weight: 700;
+}
+
+.prev,
+.next {
+    cursor: pointer;
+    padding: 18px;
+    width: 28%;
+    border: 1px solid #FF9C00;
+    margin: auto;
+    background: #FF9C00 url(../img/nutrition/arrow.png?200528) no-repeat;
+    border-radius: 5px;
+}
+
+.prev:hover,
+.next:hover {
+    background-color: #FF9C00;
+    border: 1px solid #FF9C00;
+}
+
+.next {
+    background-position: 50% 150%;
+}
+
+.prev {
+    background-position: 50% -50%;
+}
+
+.time_pick {
+    position: relative;
+}
+
+.timepicker_wrap {
+    width: 100%;
+    padding: 25px 10px;
+    border-radius: 5px;
+    z-index: 998;
+    display: none;
+    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
+    background: #fff;
+    border: 1px solid #ddd;
+    float: left;
+    position: absolute;
+    top: 48px;
+    left: 0;
+    text-align: center;
+}
+
+.arrow_top {
+    position: absolute;
+    top: -10px;
+    left: 20px;
+    background: url(../images/top_arr.png) no-repeat;
+    width: 18px;
+    height: 10px;
+    z-index: 999;
+}
+
+input.timepicki-input {
+    background: none repeat scroll 0 0 #FFFFFF;
+    border: 1px solid #CCCCCC;
+    border-radius: 5px 5px 5px 5px;
+    float: none;
+    margin: 0;
+    text-align: center;
+    width: 70%;
+    padding: 5px 0;
+}
+
+a.reset_time {
+    float: left;
+    margin-top: 5px;
+    color: #000;
+}