|
|
@@ -18,6 +18,132 @@
|
|
|
-->
|
|
|
<body>
|
|
|
<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">
|
|
|
+<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="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js" th:if="${planInfo.planSq}==38"></script>
|
|
|
+<script th:if="${planInfo.planSq}==38">
|
|
|
+ $(function(){
|
|
|
+ $('.gift_slider').bxSlider({
|
|
|
+ wrapperClass: 'sliderwrap2',
|
|
|
+ auto: true,
|
|
|
+ controls: false,
|
|
|
+ speed: 300,
|
|
|
+ });
|
|
|
+
|
|
|
+ $('img[usemap]').rwdImageMaps();
|
|
|
+ $("#img").width("100%");
|
|
|
+ });
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ $("#modal-gift").click(function() {
|
|
|
+ $("#giftPop").css('display','block');
|
|
|
+ $("body").addClass('ohidden');
|
|
|
+ });
|
|
|
+ $("#close-modal").click(function() {
|
|
|
+ $("#giftPop").css('display','none');
|
|
|
+ $("body").removeClass('ohidden');
|
|
|
+ location.reload();
|
|
|
+ });
|
|
|
+ });
|
|
|
+</script>
|
|
|
+<style type="text/css" th:if="${planInfo.planSq}==38">
|
|
|
+ .gift_box .gift_section{max-width:960px; width:auto; background-color:#fff; padding:4rem 3rem; margin:0 auto 4rem; overflow: hidden;}
|
|
|
+ .gift_box .gift_section h3{text-align: center; }
|
|
|
+ .gift_box .gift_section h3 img{max-width:280px; margin-bottom:30px;}
|
|
|
+ .gift_box p{font-size:16px; text-align:left; float:left; margin-top:20px;}
|
|
|
+
|
|
|
+ .sliderwrap2{position:relative; max-width:850px; margin-bottom:10rem; text-align: center;}
|
|
|
+ .sliderwrap2 .bx-pager{position:absolute; left:50%; bottom:-3rem; transform:translateX(-50%);}
|
|
|
+ .sliderwrap2 .bx-pager div{display:inline-block;padding:0 3px;}
|
|
|
+ .sliderwrap2 .bx-pager div a{display:block; width:13px; height:13px; border:2px solid #222; background:#fff; border-radius:100%; color:transparent; font-size:0px;}
|
|
|
+ .sliderwrap2 .bx-pager div .active{background:#222; width:22px; border-radius:12px;}
|
|
|
+ .btn_giftPopup{float:right; max-width:20rem; margin-top:-6rem;}
|
|
|
+ .btn_giftPopup{display: block; height:100%;}
|
|
|
+
|
|
|
+
|
|
|
+ .tomato_section{background-color:#d3410e; text-align:center; padding:6rem 2rem;}
|
|
|
+ .blue1_section{background-color:#202a7a; text-align:center; padding:6rem 2rem;}
|
|
|
+ .blue2_section{background-color:#0a1252; text-align:center; padding:6rem 2rem;}
|
|
|
+ .img_max_960{max-width:960px; width:100%;}
|
|
|
+ .img_max_900{max-width:900px; width:100%;}
|
|
|
+ .img_max_800{max-width:800px; width:100%;}
|
|
|
+ .img_max_470px{max-width:470px; width:100%;}
|
|
|
+ .img_max_480px{max-width:480px; width:100%;}
|
|
|
+ .marginb5{margin-bottom:5rem;}
|
|
|
+ .marginb4{margin-bottom:4rem;}
|
|
|
+ .marginb3{margin-bottom:3rem;}
|
|
|
+ .marginb2{margin-bottom:2rem;}
|
|
|
+ .w55p{width:50%;}
|
|
|
+ .border_grey{border:1px solid #919191;}
|
|
|
+
|
|
|
+ .brandSection_Link{max-width:960px; overflow:hidden; margin:0 auto;}
|
|
|
+ .linkBox_left{float:left; max-width:48%; margin:0 4% 25px 0;}
|
|
|
+ .linkBox_right{float:right; max-width:48%; margin-bottom:25px;}
|
|
|
+ #giftPop {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;}
|
|
|
+ .gift-modal-info{position:absolute; top:60px;}
|
|
|
+ @media (max-width:450px){
|
|
|
+ .btn_giftPopup{float:none; width:100%; margin:-6rem auto 0;}
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<!-- 핸드크림 -->
|
|
|
+<script th:if="${planInfo.planSq}==43">
|
|
|
+ $(function(){
|
|
|
+ $('.gift_slider2').bxSlider({
|
|
|
+ wrapperClass: 'sliderwrap3',
|
|
|
+ auto: true,
|
|
|
+ speed: 300,
|
|
|
+ controls: false,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ $(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}==43">
|
|
|
+ .gift_promotion2{padding:6rem 0; background:url('http://image.istyle24.com/Statics/design/event/2021/1022Gift/1025_bg_gift.jpg') center no-repeat; background-size: cover; text-align:center;}
|
|
|
+ .gift_promotion2 img{max-width:1080px; width:100%;}
|
|
|
+ .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">
|
|
|
<section class="content">
|
|
|
<div class="inner">
|
card007