기획전 script/style 추가

src/main/webapp/WEB-INF/views/mob/planning/PlanningDetailFormMob.html

@@ -21,9 +21,9 @@
 <th:block layout:fragment="content">
 
 <!-- 이벤트를 위한 임시 script 및 style 추가 시작 (21.10.22 by junghwan)  -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49">
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43"></script> -->
-<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43"></script>
+<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49"></script>
 
 <!-- 스타일데이 -->
 <script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js" th:if="${planInfo.planSq}==38"></script>
@@ -143,6 +143,58 @@
     .linkBox_right2 img{max-width:300px; width:100%;}
     .gift-modal-info{position:absolute; top:60px;}
 </style>
+<!-- 캘린더 사은품 이벤트 -->
+<script th:if="${planInfo.planSq}==49">
+	$(function () {
+	    $('.gift_slider2').bxSlider(
+	        {
+	            wrapperClass: 'sliderwrap3', 
+	            auto: true, 
+	            speed: 300, 
+	            controls: false,
+	            touchEnabled: true,
+	        }
+	    );
+	});
+	$(document).ready(function () {
+        $("#modal-gift2").click(function () {
+            $("#giftPop2").css('display', 'block');
+            $("body").addClass('ohidden');
+        });
+        $("#close-modal").click(function () {
+            $("#giftPop2").css('display', 'none');
+            $("body").removeClass('ohidden');
+            location.reload();
+        });
+    });
+</script>
+<style type="text/css" th:if="${planInfo.planSq}==49">
+    /* 10월 프로모션때도 넣었던 css */
+    .gift_box2{margin:5rem auto; max-width:1080px;}
+    .gift_box2 .gift_section{width:100%; width:auto; padding:0 2.2rem;}
+    .gift_box2 p{font-size:18px;}
+    .gift_box2 .gift_section{position:relative;}
+    .gift_box2 .gift_section #modal-gift2{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%); max-width:18rem;;}
+    .gift_box2 .gift_section #modal-gift2 img{width:100%;}
+    .sliderwrap3{position:relative; width:100%; margin-bottom:80px; text-align: center;}
+    .sliderwrap3 .bx-pager{position:absolute; left:50%; bottom:-2rem; transform:translateX(-50%);}
+    .sliderwrap3 .bx-pager div{display:inline-block;padding:0 3px;}
+    .sliderwrap3 .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+    .sliderwrap3 .bx-pager div .active{background:#fd4802;}
+    .gift_slider2 li{text-align:right;}
+
+    #giftPop2 {position: fixed; top: 0; right: 0;bottom: 0;left: 0;width: 100%;height: 100%;overflow: auto;z-index: 999;padding: 0;box-sizing: border-box;
+	background-color: #fff;text-align: center;}
+    .ohidden{overflow:hidden;}
+    .green_section{background-color:#638b57; text-align:center; padding:6rem 2rem;}
+
+    .brandSection_Link2{max-width:960px; overflow:hidden; margin:0 auto; border-bottom:1px solid #000;}
+    .linkBox_left2{float:left; width:50%; text-align:center; border-top:1px solid #000; border-left:1px solid #000; border-right:1px solid #000; box-sizing: border-box;}
+    .linkBox_left2 img{max-width:300px; width:100%;}
+    .linkBox_right2{float:right; width:50%; text-align:center;border-top:1px solid #000; border-right:1px solid #000; box-sizing: border-box;}
+    .linkBox_right2 img{max-width:300px; width:100%;}
+    .gift-modal-info{position:absolute; top:60px;}
+</style>   
 <!-- 이벤트를 위한 임시 script 및 style 추가 종료 (21.10.22 by junghwan)  -->
 
 <main role="" id="" class="container dp">

src/main/webapp/WEB-INF/views/web/planning/PlanningDetailFormWeb.html

@@ -19,9 +19,9 @@
 <th:block layout:fragment="content">
 <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
 <!-- 이벤트를 위한 임시 script 및 style 추가 시작 (21.10.22 by junghwan)  -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49">
 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43"></script> -->
-<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43"></script>
+<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js" th:if="${planInfo.planSq}==38 or ${planInfo.planSq}==43 or ${planInfo.planSq}==49"></script>
 
 <!-- 스타일데이 -->
 <script src="https://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js" th:if="${planInfo.planSq}==38"></script>
@@ -99,6 +99,47 @@
 	.controls .bx-prev{right:calc(100% + 40px);}
 	.controls .bx-next{left:calc(100% + 40px);}
 </style>
+<!-- 캘린더 사은품 이벤트 -->
+<script th:if="${planInfo.planSq}==49">
+	openWindow2 = function() {
+	  var popupX = (document.body.offsetWidth / 2) - (800 / 2);
+	  var popupY= (window.screen.height / 2) - (700 / 2);
+	  window.open('http://image.istyle24.com/Statics/design/event/2021/1115Gift01/gift_popup2.html', '', 'status=no, height=700, width=800, left='+ popupX + ', top='+ popupY + ', screenX='+ popupX + ', screenY= '+ popupY);
+	  return;
+	}
+	
+	$(function () {
+        $('.gift_slider').bxSlider(
+            {
+                wrapperClass: 'sliderwrap3', 
+                auto: true, 
+                speed: 300, 
+                nextText: '<i class="fas fa-chevron-right"></i>', 
+                prevText: '<i class="fas fa-chevron-left"></i>'}
+        );
+    });
+</script>
+<style type="text/css" th:if="${planInfo.planSq}==49">
+	/* 10월 프로모션때도 넣었던 css */
+	.coner_item01 img {max-width:100%;}
+	.pm_gift{padding:80px 0; background:url('http://image.istyle24.com/Statics/design/event/2021/1115Gift01/1115_bg_gift.jpg') center no-repeat; background-size: cover; text-align:center;}
+	.pm_gift img{max-width:1080px;}
+	.gift_box{margin:30px 0;}
+	.gift_box .gift_section{position:relative; max-width:860px; width:auto; margin:0 auto;}
+	.gift_box .gift_section #g-view{position:absolute; bottom:2rem; left:50%; transform: translateX(-50%);}
+	.gift_box p{font-size:18px;}
+	
+	.sliderwrap3{position:relative; max-width:860px; width:100%; margin-bottom:80px; text-align: center;}
+	.sliderwrap3 .bx-pager{position:absolute; left:50%; bottom:-40px; transform:translateX(-50%);}
+	.sliderwrap3 .bx-pager div{display:inline-block;padding:0 3px;}
+	.sliderwrap3 .bx-pager div a{display:block; width:6px; height:6px; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
+	.sliderwrap3 .bx-pager div .active{background:#fd4802;}
+	.gift_slider li{text-align:right;}
+	.gift_slider li span{position:absolute; left:50%; bottom:30px; transform:translateX(-50%);}
+	.controls .bx-prev, .controls .bx-next{position:absolute;top:50%;transform:translateY(-50%);font-size:3em;color:#7d7e7d;}
+	.controls .bx-prev{right:calc(100% + 40px);}
+	.controls .bx-next{left:calc(100% + 40px);}
+</style>
 <!-- 이벤트를 위한 임시 script 및 style 추가 종료 (21.10.22 by junghwan)  -->
 
 <div id="container" class="container dp" th:with="frontUrl=${@environment.getProperty('domain.front')}, goodsView=${@environment.getProperty('upload.goods.view')}, planView=${@environment.getProperty('upload.image.view')}">