merge master into develop - CscListRForm.jsp FAQ 아코디언 버그 수정

build/resources/main/static/pc/brand/JM/css/brand_story.css

@@ -0,0 +1,168 @@
+  #layout_config { width: 100%; margin: auto;}
+*{margin:0;padding:0;box-sizing:border-box}
+    html{font:normal 16px sans-serif;color:#383D3B}
+    ul,nav{list-style:none}
+    a{text-decoration:none;opacity:.75;color:#fff}
+    a:hover{opacity:1}
+    a.btn{border-radius:4px;text-transform:uppercase;font-weight:700;text-align:center;background-color:#1B98E0;opacity:1}
+    a.btn:hover{opacity:.75}
+
+    section{display:flex;flex-direction:column;align-items:center;padding:10px 80px}
+    section:not(.hero):nth-child(even){background-color:#f5f5f5}
+    .grid{width:100%;display:flex;flex-wrap:wrap;justify-content:center; }
+    hr{width:250px;height:3px;background-color:#1B98E0;border:0;margin-bottom:50px}
+    section h3.title{text-transform:capitalize;font:bold 32px "Open Sans",sans-serif;margin-bottom:30px;text-align:center}
+    section p{font-size:15px; line-height:2;padding:0 20px;margin-bottom:14px;text-align:center}
+    @media (max-width: 800px) {
+    section{padding:50px 20px}
+    }
+    section{opacity:0;transform:translate(0,20px);transition:all 1s}
+    section.visible{opacity:1;transform:translate(0,0)}
+
+    header{position:absolute;width:100%;display:flex;justify-content:space-between;align-items:center;padding:35px 100px 0;opacity:0;animation:1s fadein .5 forwards;color:#fff;z-index:1}
+    @keyframes fadein {
+    100%{opacity:1}
+    }
+    header nav{margin:0 auto;display:flex; }
+    header nav li{margin:0 15px; }
+    header nav li a {color:#111;}
+    @media (max-width: 800px) {
+    header{padding:20px 50px;flex-direction:column}
+    header .brand{margin-bottom:15px}
+    }
+    @media (max-width: 500px) {
+    header li.hide{display:none}
+    }
+
+    .hero{position:relative;justify-content:center;text-align:center;color:#fff}
+    .hero .background-image{background-position:center;background-image:url(/pc/brand/JM/images/01_Brandstory_01_back.png);position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;z-index:-1;background-color:#80a3db}
+    .hero h1{font:normal 45px "Open Sans",sans-serif;margin-bottom:15px;color:#111;}
+    .hero h3{font:normal 20px "Open Sans",sans-serif;margin-bottom:30px;color:#111;}
+    .hero h4{font:normal 30px "Open Sans",sans-serif;margin-bottom:40px;color:#111;}
+    .hero a.btn{padding:20px 60px}
+    .hero-content{opacity:0;padding-bottom:11vh;animation:1s slidefade 1s forwards}
+    @keyframes slidefade {
+    100%{opacity:1;margin:0}
+    }
+    @media (max-width: 800px) {
+    .hero{min-height:700px}
+    .hero h1{font-size:32px;margin-bottom:15px;}
+    .hero h3{font-size:15px;margin-bottom:15px;}
+    .hero h4{font-size:18px;margin-bottom:15px;}
+    .hero a.btn{padding:15px 40px}
+    }
+
+    .scrollFade{opacity:0}
+    .destinations {margin-top:97px; margin-bottom:100px; position:relative; overflow: hidden; height:763px; padding:0;}
+    .destinations .background-image{ background-position:center;background-image:url(/pc/brand/JM/images/02_Brandstory_02_back.png);position:absolute;top:0;left:0;width:100%;height:100%;background-size:auto;z-index:-1;background-color:#fff;background-repeat: no-repeat; }
+    .destinations h1{font:bold 60px "Open Sans",sans-serif;margin-bottom:15px}
+    .destinations h3{font:normal 28px "Open Sans",sans-serif;margin-bottom:40px}
+    .text_wrap { position: relative; margin:492px auto; padding:93px 80px 0 80px; background-color:#fff;}
+    .text_wrap p { text-align: center; font:normal 14px;}
+    .destinations h1{font:normal 30px "Open Sans",sans-serif;margin-bottom:15px;color:#3e7266; text-align: center;}
+
+    @media (max-width: 880px) {
+    .destinations{min-height:763px}
+    .destinations.grid{flex-basis:100%;}
+    .destinations.grid.back{margin:0 auto; flex-basis:100%; background-size:auto;}
+    .text_wrap { position:absolute; margin-top:50px; margin-left:210px; padding:40px 45px 5px 0; font-size:14px; border: 1px solid #111;}
+    .text_wrap p {text-align: left;}
+    }
+
+    #about {position:relative; overflow: hidden; height:884px; }
+    .about_text_wrap {position: relative; text-align: center; margin-top:50px; z-index:400;}
+    .about_text_wrap h1{font:normal 45px "Open Sans",sans-serif;margin-bottom:15px;color:#506339;}
+    .about_text_wrap h3{font:normal 20px "Open Sans",sans-serif;margin-bottom:30px;color:#3e7266;}
+    .about .background-image{overflow: hidden;background-position:center;background-image:url(/pc/brand/JM/images/03_Brandstory_03_back.png);position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;z-index:-1;background-color:#80a3db}
+    .about_img {padding:125px 0 40px 0;}
+    .leaf_wrap{position: relative; width:1500px; height: 300px; margin: 580px auto; }
+    .leaf_2 {
+        text-align: center;
+        position:absolute;
+        margin-top:260px;
+        margin-left:10%;
+        width: 1121px;
+        height: 268px;
+        z-index: 200;
+    }
+    .leaf_1 {
+        position:absolute;
+        margin-top:-17px;
+        margin-left:100px;
+        width: 1045px;
+        height: 190px;
+        z-index: 100;
+    }
+    
+    @media (max-width: 800px) {
+    .about{min-height:700px;}
+    .about_text_wrap h1{font-size:32px;margin-bottom:15px;}
+    .about_text_wrap h3{font-size:15px;margin-bottom:15px; color:#3e7266;}
+    .about_text_wrap h4{font-size:18px;margin-bottom:15px;}
+    }
+
+
+    /*iframe{width:560px;height:315px;margin-bottom:20px}
+    @media (max-width: 700px) {
+    iframe{width:300px;height:169px}
+    }
+
+    .packages .grid li{padding:50px;flex-basis:50%;text-align:center}
+    .packages .grid li i{color:#383D3B}
+    .packages .grid li a{color:#383D3B;opacity:1}
+    .packages .grid li a:hover,.packages .grid li h4:hover{opacity:.75}
+    .packages .grid li h4{font-size:30px;margin:25px 0}
+    @media (max-width: 800px) {
+    .packages .grid li{flex-basis:100%;padding:20px}
+    }*/
+
+    .testimonials h1{font:normal 45px "Open Sans",sans-serif;margin-bottom:60px; text-align: center;margin-top:50px;}
+    .testimonials h3{font:normal 20px "Open Sans",sans-serif;margin-bottom:120px; text-align: center;}
+    .testimonials_img{margin-bottom:30px;}
+
+
+    @media (max-width: 800px) {
+    .testimonials .quote{font-size:18px;margin:15px 0}
+    .testimonials .author{font-size:14px}
+    }
+
+
+    /* customizable snowflake styling */
+    .snowflake {
+      color: #fff;
+      font-size: 1em;
+      font-family: Arial;
+      text-shadow: 0 0 1px #000;
+      
+    }
+    .snowflakes {
+      z-index: -1;
+
+    }
+    
+    @-webkit-keyframes 
+    snowflakes-fall{0%{top:0;}100%{top:90%;}}
+    @-webkit-keyframes snowflakes-shake{
+      0%{-webkit-transform:translateX(0px);transform:translateX(0px);}
+      50%{-webkit-transform:translateX(80px);transform:translateX(80px);}
+      100%{-webkit-transform:translateX(0px);transform:translateX(0px);}
+    }
+    @keyframes snowflakes-fall{0%{top:0;}100%{top:90%;}}
+    @keyframes snowflakes-shake{0%{transform:translateX(0px);}50%{transform:translateX(80px)}100%{transform:translateX(0px);}}
+    .snowflake{overflow: hidden; position: absolute;; top:-10%; z-index:-1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}
+    .snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s;}
+    .snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}
+    .snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}
+    .snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}
+    .snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}
+    .snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}
+    .snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}
+    .snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}
+    .snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}
+    .snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
+    /* Demo Purpose Only*/
+
+    .skrollable {	position:fixed;	z-index:100;}
+    .skrollr-mobile .skrollable {position:absolute;}
+    .skrollable .skrollable {position:absolute;}
+    .skrollable .skrollable .skrollable {position:static;}

build/resources/main/static/pc/brand/JM/css/css.css

@@ -0,0 +1,188 @@
+html, body, div, span, strong, a, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, samp, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+}
+p {
+    line-height: 1.5;
+    font-weight: 400;
+    word-break: break-all;
+}
+
+.page_wrap .stit {
+    font-style: normal;
+    display: inline-block;
+    font-size: 25px;
+    color: #cc5346;
+    padding-bottom: 10px;
+}
+.topBg {
+    width: 100%;
+    height: 360px;
+    background: url("/pc/brand/JM/images/brand_top.jpg") center center no-repeat;
+    background-size: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.topBg .conW {
+    display: table;
+    height: 100%;
+    position: relative;
+    width: 1200px;
+    min-width: 1200px;
+    margin: 0 auto;
+}
+.topBg .titleW {
+    display: table-cell;
+    vertical-align: middle;
+    margin: 0 auto;
+    text-align: center;
+}
+.topBg h2 {
+    font-size: 50px;
+    font-weight: 700;
+}
+.topBg p {
+    margin-top: 10px;
+    font-size: 30px;
+}
+.topBg h2, .topBg p {
+    color: #fff;
+}
+
+.page_wrap {
+    position: relative;
+    margin-top: 387px;
+}
+.page_wrap p {
+    font-size: 20px;
+    font-weight: 300;
+}
+.page_wrap h3 {
+    font-size: 35px;
+    font-weight: 700;
+}
+.page_wrap .strong {
+    display: inline-block;
+    font-weight: 700;
+}
+.page_wrap .pointW {
+    background: #d16458;
+    padding: 0px 5px;
+    display: inline-block;
+    color: #fff !important;
+}
+
+.brand .con {
+    position: relative;
+    margin: 0 auto;
+    text-align: center;
+    border-bottom: 1px solid #e0e0e0;
+    padding: 80px 0;
+}
+.brand .con .strong {
+    font-size: 28px;
+}
+.brand .con .titleW {
+    padding-bottom: 40px;
+}
+
+.brand .con .stit {
+    color: #cc5346;
+    padding-bottom: 10px;
+}
+
+.brand .con1 .strong {
+    margin-top: 10px;
+}
+.brand .con1 .conImg {
+    padding: 50px 0;
+}
+
+.brand .con2 .conImg {
+    padding: 0 0 50px 0;
+}
+
+.brand .con3 {
+    border-bottom: none;
+    padding: 80px 0 0 0;
+}
+.brand .conT .dep {
+    margin-top: 20px;
+}
+
+.safeCare p.titW {
+	font-size: 28px;
+	padding-top: 100px;
+	text-align: center;
+	position: relative;
+}
+
+.safeCare p.titW:before {
+	content: "";
+	position: absolute;
+	left: 50%;
+	margin-left: -18px;
+	top: 50px;
+	background: url("/pc/brand/JM/images/img_point.png") center center no-repeat;
+	width: 36px;
+	height: 27px;
+	background-size: cover;
+}
+
+.safeCare .con {
+	position: relative;
+	padding-top: 80px;
+}
+
+.safeCare .con1 {
+	position: relative;
+	padding-top: 130px;
+}
+
+.safeCare .con1 .line {
+	width: 1px;
+	height: 160px;
+	background: #000;
+	position: absolute;
+	left: 50%;
+	margin-left: -0.5px;
+	top: -80px;
+	z-index: 10;
+}
+
+.safeCare .con .conImg {
+	position: relative;
+}
+
+.safeCare .con2 .conImg {
+	text-align: right;
+}
+
+.safeCare .con .txtW {
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	z-index: 1;
+	background: #fff;
+	display: block;
+	width: 510px;
+}
+
+.safeCare .con2 .txtW {
+	position: absolute;
+	left: 0;
+}
+.safeCare .con .txt{
+	padding: 60px 0 30px 50px;
+	text-align: left;
+}
+
+.safeCare .con2 .txt{
+	padding: 60px 50px 30px 0;
+	text-align: right;
+}
+
+.safeCare .con .txt p {
+	padding-top: 30px;
+}

build/resources/main/static/pc/brand/JM/css/worganic.css

@@ -0,0 +1,277 @@
+ul,nav{list-style:none}
+section{display:flex;flex-direction:column;padding:10px}
+section:not(.hero):nth-child(even){}
+.grid{width:100%;display:flex;flex-wrap:wrap; }
+section{opacity:1;transform:translate(0,20px);transition:all 1s}
+section.visible{opacity:1;transform:translate(0,0)}
+
+
+/*SECTION 1*/
+    .area_1{position:relative;text-align:center;min-height:18vh;color:#fff; padding:0; }
+    .area_1 .background-image {background-position:center;background-image: url(http://justmyday.co.kr/data/brand/brand_story/worganic_00_back.png); position:absolute;top:0;left:0;width:100%;height:85%;background-size:cover;z-index:-1; overflow: hidden;}
+    .area_1 .character_img {position: absolute; z-index: 7; width: 896px; height: 242px; left:50%; transform: translateX(-50%); top: 440px;}
+    .area_1 .cotton_text_wrap {padding-top: 145px; z-index: 9; text-align: center;}
+    .area_1 h1 {font-size: 45px; line-height: 1.2; color:#111; font-weight: normal; padding-bottom:30px;}
+    .area_1 h2 {font-size: 23px; line-height: 1.2; color:#111; font-weight: normal;}
+    .area_1 .text_box {position: absolute; left:50%; z-index: 10; top: 840px; transform: translateX(-50%);}
+    .scrollFade{opacity:0}
+    
+    .area_2 {position:relative; overflow: hidden; height:990px; padding:0;}
+    .area_2 .area_2_character_img {position: absolute; z-index: 1; left:50%; transform: translateX(-50%); top: 180px;}
+    .area_2 .core_text_wrap { position: relative; margin:150px auto; padding:93px 80px 0 80px;}
+    .area_2 p { text-align: center; font:normal 14px;}
+    .area_2 h1{font:normal 45px "Open Sans",sans-serif;margin-bottom:15px;color:#111; text-align: center;}
+    .area_2 h2{font:normal 23px "Open Sans",sans-serif;margin-bottom:40px; color:#111; text-align: center;}
+
+    .area_3 {position:relative; overflow: hidden; height:900px; }
+    .area_3 .bubble_text_wrap {position: relative; text-align: center; margin-top:20px; z-index:400;}
+    .area_3 .bubble_text_wrap h1{font-size: 45px; line-height: 1.2; color:#111; font-weight: normal; padding-bottom:30px;}
+    .area_3 .bubble_text_wrap h2{font-size: 23px; line-height: 1.2; color:#111; font-weight: normal;}
+    .area_3 .background-image{overflow: hidden;background-position:center;background-image:url(http://justmyday.co.kr/data/brand/brand_story/worganic_01_back.png);position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;z-index:-1;}
+    .area_3 .bubble{position:absolute;bottom:-60px;opacity:.9;animation:fly 15s ease-in-out infinite}
+    .area_3 .bubble:nth-child(1){left:13%;height:40px;width:40px;animation-duration:8s;}
+    .area_3 .bubble:nth-child(2){left:20%;height:35px;width:35px;animation-duration:10s;animation-delay:1s}
+    .area_3 .bubble:nth-child(3){left:15%;height:30px;width:30px;animation-duration:6s;animation-delay:2s}
+    .area_3 .bubble:nth-child(4){left:30%;height:60px;width:60px;animation-duration:12s;animation-delay:5s}
+    .area_3 .bubble:nth-child(5){left:40%;height:30px;width:30px;animation-duration:9s;animation-delay:0s}
+    .area_3 .bubble:nth-child(6){left:50%;height:15px;width:15px;animation-duration:13s;animation-delay:8s}
+    .area_3 .bubble:nth-child(7){left:60%;height:60px;width:60px;animation-duration:15s;animation-delay:0s}
+    .area_3 .bubble:nth-child(8){left:70%;height:10px;width:10px;animation-duration:14s;animation-delay:5s}
+    .area_3 .bubble:nth-child(9){left:75%;height:20px;width:20px;animation-duration:10s;animation-delay:3s}
+    .area_3 .bubble:nth-child(10){left:75%;height:55px;width:55px;animation-duration:17s;animation-delay:11s}
+    .area_3 .bubble:nth-child(11){left:50%;height:35px;width:35px;animation-duration:10s;animation-delay:7s}
+    .area_3 .bubble:nth-child(12){left:55%;height:60px;width:60px;animation-duration:10s;animation-delay:0s}
+    .area_3 .bubble:nth-child(13){left:60%;height:25px;width:25px;animation-duration:14s;animation-delay:3s}
+    .area_3 .bubble:nth-child(14){left:73%;height:20px;width:20px;animation-duration:10s;animation-delay:8s}
+    .area_3 .bubble:nth-child(15){left:15%;height:55px;width:55px;animation-duration:7s;animation-delay:6s}
+    .area_3 .product_img {position:relative; margin:80px auto; z-index: 500;}
+    .area_3 .character_img {position: absolute; z-index: 600; width: 823px; height: 588px; left:50%; transform: translateX(-50%); top: 250px;}
+
+    @keyframes fly{
+      0%{
+        bottom: -200px;
+        transform:translateX(0);
+        -ms-transform:translateX(0);
+      }
+      33%{
+        transform:translateX(50px);
+        -ms-transform:translateX(50px);
+      }
+      66%{
+        transform:translateX(-100px);
+        -ms-transform:translateX(-100px);
+      }
+      100%{
+        bottom: 1080px;
+        transform:translateX(200px);
+        -ms-transform:translateX(200px);
+      }
+    }
+
+
+    .area_4 {position:relative;}
+    .production_img{position: relative; margin:60px auto; z-index: 1500; text-align:center;}
+    .gear_text_wrap {position: relative; margin-top:150px; z-index: 100; text-align: center; }
+    .area_4 h1 {font-size: 45px; line-height: 1.2; color:#111; font-weight: normal;padding-bottom: 30px;}
+    .area_4 h2 {font-size: 23px; line-height: 1.2; color:#111; font-weight: normal;}
+    
+    .gear_box {position: absolute; width:1200px; height: 1431px; margin-top: 200px; margin-bottom: 100px;  overflow: hidden; z-index: -1; }
+    .gears {position: absolute; top:340px; left:10%; width: 500px; display: block; text-align: center; font-weight: 700; font-family: Arial; color:#fff; text-shadow :1px 1px 2px #5f868a}
+    .gears_2 {position: absolute; top:540px; left:10%; width: 500px; margin-top: 850px; margin-left: 750px; display: block; text-align: center; font-weight: 700; font-family: Arial; color:#fff; text-shadow: 1px 1px 2px #5f868a}
+    
+    .gears .big {
+       width: 248px;
+       height: 248px;
+       -webkit-transform-origin: center;
+       -moz-transform-origin: center;
+       -o-transform-origin: center;
+       transform-origin: center;
+       -webkit-animation: rotate 3s linear infinite;
+       -moz-animation: rotate 3s linear infinite;
+       -o-animation: rotate 3s linear infinite;
+       animation: rotate 3s linear infinite
+    }
+    
+    .gears .small {
+       width: 160px;
+       height: 160px;
+       margin-left: -10px;
+       -webkit-transform-origin: center;
+       -moz-transform-origin: center;
+       -o-transform-origin: center;
+       transform-origin: center;
+       -webkit-animation: reverseRotate 3s linear infinite;
+       -moz-animation: reverseRotate 3s linear infinite;
+       -o-animation: reverseRotate 3s linear infinite;
+       animation: reverseRotate 3s linear infinite;
+    }
+    
+    .gears_2 .big {
+       width: 248px;
+       height: 248px;
+       margin-left: -10px;
+       -webkit-transform-origin: center;
+       -moz-transform-origin: center;
+       -o-transform-origin: center;
+       transform-origin: center;
+       -webkit-animation: rotate 3s linear infinite;
+       -moz-animation: rotate 3s linear infinite;
+       -o-animation: rotate 3s linear infinite;
+       animation: rotate 3s linear infinite
+    }
+    
+    .gears_2 .small {
+       width: 160px;
+       height: 160px;
+       -webkit-transform-origin: center;
+       -moz-transform-origin: center;
+       -o-transform-origin: center;
+       transform-origin: center;
+       -webkit-animation: reverseRotate 3s linear infinite;
+       -moz-animation: reverseRotate 3s linear infinite;
+       -o-animation: reverseRotate 3s linear infinite;
+       animation: reverseRotate 3s linear infinite;
+    }
+    
+    @-webkit-keyframes rotate {
+       0% {
+          -webkit-transform: rotate(0);
+          transform: rotate(0);
+       }
+       100% {
+          -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+    }
+    
+    @-moz-keyframes rotate {
+       0% {
+          -moz-transform: rotate(0);
+          transform: rotate(0);
+       }
+       100% {
+          -moz-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+    }
+    
+    @-o-keyframes rotate {
+       0% {
+          -o-transform: rotate(0);
+          transform: rotate(0);
+       }
+       100% {
+          -o-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+    }
+    
+    @keyframes rotate {
+       0% {
+          -webkit-transform: rotate(0);
+          -moz-transform: rotate(0);
+          -o-transform: rotate(0);
+          transform: rotate(0);
+       }
+       100% {
+          -webkit-transform: rotate(180deg);
+          -moz-transform: rotate(180deg);
+          -o-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+    }
+    
+    @-webkit-keyframes reverseRotate {
+       0% {
+          -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+       100% {
+          -webkit-transform: rotate(0);
+          transform: rotate(0);
+       }
+    }
+    
+    @-moz-keyframes reverseRotate {
+       0% {
+          -moz-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+       100% {
+          -moz-transform: rotate(0);
+          transform: rotate(0);
+       }
+    }
+    
+    @-o-keyframes reverseRotate {
+       0% {
+          -o-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+       100% {
+          -o-transform: rotate(0);
+          transform: rotate(0);
+       }
+    }
+    
+    @keyframes reverseRotate {
+       0% {
+          -webkit-transform: rotate(180deg);
+          -moz-transform: rotate(180deg);
+          -o-transform: rotate(180deg);
+          transform: rotate(180deg);
+       }
+       100% {
+          -webkit-transform: rotate(0);
+          -moz-transform: rotate(0);
+          -o-transform: rotate(0);
+          transform: rotate(0);
+       }
+    }
+
+
+.area_5 {position:relative; background-color:#fff; width:100%; height:1179px; padding:0;}
+    .recommend_background {position: relative; background-color:#f5f5f5; width:100%; height:926px; z-index: -1;}
+    .recommend_img{position: absolute; margin-top:396px; left:50%; transform: translateX(-50%);width:887px;}
+    .recommend_text_wrap {position:relative; top:146px; z-index: 1200; text-align: center; }
+    .area_5 h1 {font-size: 45px; line-height: 1.2; color:#111; font-weight: normal; padding-bottom: 30px;}
+    .area_5 h2 {font-size: 23px; line-height: 1.2; color:#111; font-weight: normal;}
+    .recommend_txt {position:absolute; top:735px; z-index: 888; left: 50%; transform: translateX(-50%)}
+
+    /* 코튼 눈내리는 CSS */
+    .snowflake {
+      color: #fff;
+      font-size: 1em;
+      font-family: Arial;
+      text-shadow: 0 0 1px #000;
+    
+    }
+    .snowflakes {
+      z-index: -1;  
+    }
+
+    @-webkit-keyframes 
+    snowflakes-fall{0%{top:0;}100%{top:90%;}}
+    @-webkit-keyframes snowflakes-shake{
+      0%{-webkit-transform:translateX(0px);transform:translateX(0px);}
+      50%{-webkit-transform:translateX(80px);transform:translateX(80px);}
+      100%{-webkit-transform:translateX(0px);transform:translateX(0px);}
+    }
+    @keyframes snowflakes-fall{0%{top:0;}100%{top:90%;}}
+    @keyframes snowflakes-shake{0%{transform:translateX(0px);}50%{transform:translateX(80px)}100%{transform:translateX(0px);}}
+    .snowflake{overflow: hidden; position: absolute;; top:-10%; z-index:-1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}
+    .snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s;}
+    .snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}
+    .snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}
+    .snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}
+    .snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}
+    .snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}
+    .snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}
+    .snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}
+    .snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}
+    .snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
+    /* Demo Purpose Only*/  
+    .skrollable {	position:fixed;	z-index:100;}
+    .skrollr-mobile .skrollable {position:absolute;}
+    .skrollable .skrollable {position:absolute;}
+    .skrollable .skrollable .skrollable {position:static;}