+ 시계 링 위치 조절

assets/scss/style.scss

@@ -1310,6 +1310,155 @@ img{
     }
   }
 }
+
+
+
+
+
+
+/*===============================================
+에니메이션
+===============================================*/
+.floating {
+  animation: floating 3s ease-in-out infinite;
+}
+
+
+@keyframes bobUp {
+  0% { transform: translateY(120vh); opacity: 0; }
+  80% { opacity: 1; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+// 둥둥 떠있는 효과
+@keyframes bubbleFloat {
+  0%   { transform: translateY(0) scale(1);}
+  50%  { transform: translateY(-12px) scale(1.05);}
+  100% { transform: translateY(0) scale(1);}
+}
+
+@keyframes floating {
+  0%   { transform: translateY(0px); }
+  50%  { transform: translateY(-20px); }
+  100% { transform: translateY(0px); }
+}
+
+@keyframes fadeUpLogo {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInRightH1 {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInLeftH2 {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeUpH3 {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes waveInRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  60% {
+    opacity: 1;
+    transform: translateX(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes cloudMoveLeftToRight {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+  90% {
+    opacity: 1;
+    transform: translateX(300px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(400px);
+  }
+}
+
+@keyframes floating-diag-1 {
+  0%   { transform: translate(0, 0); }
+  20%  { transform: translate(-10px, 10px);}
+  40%  { transform: translate(10px, -10px);}
+  60%  { transform: translate(-10px, -10px);}
+  80%  { transform: translate(10px, 10px);}
+  100% { transform: translate(0, 0);}
+}
+@keyframes floating-diag-2 {
+  0%   { transform: translate(0, 0); }
+  25%  { transform: translate(12px, -8px);}
+  50%  { transform: translate(-12px, 8px);}
+  75%  { transform: translate(8px, 12px);}
+  100% { transform: translate(0, 0);}
+}
+@keyframes floating-diag-3 {
+  0%   { transform: translate(0, 0);}
+  30%  { transform: translate(-8px, 12px);}
+  60%  { transform: translate(8px, -12px);}
+  100% { transform: translate(0, 0);}
+}
+@keyframes floating-diag-4 {
+  0%   { transform: translate(0, 0);}
+  20%  { transform: translate(10px, 10px);}
+  40%  { transform: translate(-10px, -10px);}
+  60%  { transform: translate(10px, -10px);}
+  80%  { transform: translate(-10px, 10px);}
+  100% { transform: translate(0, 0);}
+}
+@keyframes shakeX {
+  0% { transform: translateY(-50%) translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateY(-50%) translateX(-8px); }
+  20%, 40%, 60%, 80% { transform: translateY(-50%) translateX(8px); }
+  100% { transform: translateY(-50%) translateX(0); }
+}
+@keyframes shakeX2 {
+  0% { transform: rotate(180deg) translateY(-50%) translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: rotate(180deg) translateY(-50%) translateX(-8px); }
+  20%, 40%, 60%, 80% { transform: rotate(180deg) translateY(-50%) translateX(8px); }
+  100% { transform: rotate(180deg) translateY(-50%) translateX(0); }
+}
+@keyframes bellRing {
+  0%   { transform: rotate(0deg); }
+  10%  { transform: rotate(-18deg); }
+  20%  { transform: rotate(16deg); }
+  30%  { transform: rotate(-12deg); }
+  40%  { transform: rotate(10deg); }
+  50%  { transform: rotate(-6deg); }
+  60%  { transform: rotate(4deg); }
+  70%  { transform: rotate(-2deg); }
+  80%, 100% { transform: rotate(0deg); }
+}
+
+
+
 @media(max-width: 1480px){
   .section--container{
     padding: 0 20px;
@@ -1828,6 +1977,16 @@ img{
           >p{
             font-size: 20px;
           }
+          .img--wrap{
+            .wch--l{
+              top:-60px;
+              left:-30px;
+            }
+            .wch--r{
+              top:-60px;
+              right:-40px;
+            }
+          }
         }
         .count--num{
           div{
@@ -1850,6 +2009,18 @@ img{
       }
     }
   }
+
+  @keyframes bellRing {
+  0%   { transform:scale(.5) rotate(0deg); }
+  10%  { transform:scale(.5) rotate(-18deg); }
+  20%  { transform:scale(.5) rotate(16deg); }
+  30%  { transform:scale(.5) rotate(-12deg); }
+  40%  { transform:scale(.5) rotate(10deg); }
+  50%  { transform:scale(.5) rotate(-6deg); }
+  60%  { transform:scale(.5) rotate(4deg); }
+  70%  { transform:scale(.5) rotate(-2deg); }
+  80%, 100% { transform:scale(.5) rotate(0deg); }
+}
 }
 @media(max-width: 500px){
   .evt--section01{
@@ -1964,146 +2135,3 @@ img{
 }
 
 
-
-
-
-/*===============================================
-에니메이션
-===============================================*/
-.floating {
-  animation: floating 3s ease-in-out infinite;
-}
-
-
-@keyframes bobUp {
-  0% { transform: translateY(120vh); opacity: 0; }
-  80% { opacity: 1; }
-  100% { transform: translateY(0); opacity: 1; }
-}
-
-// 둥둥 떠있는 효과
-@keyframes bubbleFloat {
-  0%   { transform: translateY(0) scale(1);}
-  50%  { transform: translateY(-12px) scale(1.05);}
-  100% { transform: translateY(0) scale(1);}
-}
-
-@keyframes floating {
-  0%   { transform: translateY(0px); }
-  50%  { transform: translateY(-20px); }
-  100% { transform: translateY(0px); }
-}
-
-@keyframes fadeUpLogo {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fadeInRightH1 {
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes fadeInLeftH2 {
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes fadeUpH3 {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes waveInRight {
-  0% {
-    opacity: 0;
-    transform: translateX(-100px);
-  }
-  60% {
-    opacity: 1;
-    transform: translateX(20px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes cloudMoveLeftToRight {
-  0% {
-    opacity: 0;
-    transform: translateX(-100px);
-  }
-  10% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  90% {
-    opacity: 1;
-    transform: translateX(300px);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(400px);
-  }
-}
-
-@keyframes floating-diag-1 {
-  0%   { transform: translate(0, 0); }
-  20%  { transform: translate(-10px, 10px);}
-  40%  { transform: translate(10px, -10px);}
-  60%  { transform: translate(-10px, -10px);}
-  80%  { transform: translate(10px, 10px);}
-  100% { transform: translate(0, 0);}
-}
-@keyframes floating-diag-2 {
-  0%   { transform: translate(0, 0); }
-  25%  { transform: translate(12px, -8px);}
-  50%  { transform: translate(-12px, 8px);}
-  75%  { transform: translate(8px, 12px);}
-  100% { transform: translate(0, 0);}
-}
-@keyframes floating-diag-3 {
-  0%   { transform: translate(0, 0);}
-  30%  { transform: translate(-8px, 12px);}
-  60%  { transform: translate(8px, -12px);}
-  100% { transform: translate(0, 0);}
-}
-@keyframes floating-diag-4 {
-  0%   { transform: translate(0, 0);}
-  20%  { transform: translate(10px, 10px);}
-  40%  { transform: translate(-10px, -10px);}
-  60%  { transform: translate(10px, -10px);}
-  80%  { transform: translate(-10px, 10px);}
-  100% { transform: translate(0, 0);}
-}
-@keyframes shakeX {
-  0% { transform: translateY(-50%) translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateY(-50%) translateX(-8px); }
-  20%, 40%, 60%, 80% { transform: translateY(-50%) translateX(8px); }
-  100% { transform: translateY(-50%) translateX(0); }
-}
-@keyframes shakeX2 {
-  0% { transform: rotate(180deg) translateY(-50%) translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: rotate(180deg) translateY(-50%) translateX(-8px); }
-  20%, 40%, 60%, 80% { transform: rotate(180deg) translateY(-50%) translateX(8px); }
-  100% { transform: rotate(180deg) translateY(-50%) translateX(0); }
-}
-@keyframes bellRing {
-  0%   { transform: rotate(0deg); }
-  10%  { transform: rotate(-18deg); }
-  20%  { transform: rotate(16deg); }
-  30%  { transform: rotate(-12deg); }
-  40%  { transform: rotate(10deg); }
-  50%  { transform: rotate(-6deg); }
-  60%  { transform: rotate(4deg); }
-  70%  { transform: rotate(-2deg); }
-  80%, 100% { transform: rotate(0deg); }
-}