no message

assets/scss/style.scss

@@ -554,6 +554,247 @@ img{
         text-decoration: none;
         color: #ffffff;
       }
+
+
+      .bob01{        
+        width:210px;
+        height:214px;
+        background: url(../img/bob_01.png) no-repeat center;  
+        animation: bubbleFloat 3s ease-in-out infinite alternate;     
+      }
+      .bob02{      
+        width:225px;
+        height:211px;
+        background: url(../img/bob_02.png) no-repeat center;
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+      .bob03{        
+        width:417px;
+        height:403px;
+        background: url(../img/bob_03.png) no-repeat center;      
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+      .bob04{        
+        width:139px;
+        height:140px;
+        background: url(../img/bob_04.png) no-repeat center;        
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+
+      .bob05{        
+        width:248px;
+        height:211px;
+        background: url(../img/bob_05.png) no-repeat center;        
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+      .bob06{        
+        width:409px;
+        height:394px;
+        background: url(../img/bob_06.png) no-repeat center;        
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+      .bob07{        
+        width:220px;
+        height:211px;
+        background: url(../img/bob_07.png) no-repeat center;
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+        
+      }
+      .bob08{       
+        width:58px;
+        height:53px;
+        background: url(../img/bob_08.png) no-repeat center;        
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+      .bob09{      
+        width:90px;
+        height:90px;
+        background: url(../img/bob_09.png) no-repeat center;        
+        animation: bubbleFloat 3s ease-in-out infinite alternate;
+      }
+      .bob10{        
+        width:152px;
+        height:141px;
+        background: url(../img/bob_10.png) no-repeat center;     
+        animation: bubbleFloat 3s ease-in-out infinite alternate;  
+      }
+
+
+      .bob--wrap01{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:210px;
+        height:214px;
+        margin-left: 712px;
+        margin-top: -601px;    
+        animation: bobUp 2.2s cubic-bezier(0.22,1,0.36,1) infinite;   
+      }
+     
+      .bob--wrap02{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:225px;
+        height:211px;
+        margin-left: 759px;
+        margin-top: -153px;
+        animation: bobUp 1.8s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+    
+      .bob--wrap03{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        margin-left: 568px;
+        margin-top: 169px;
+        animation: bobUp 5.5s cubic-bezier(0.22,1,0.36,1) infinite;   
+      }
+    
+      .bob--wrap04{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:139px;
+        height:140px; 
+        margin-left: -692px;
+        margin-top: -579px;
+        animation: bobUp 4.2s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+    
+      .bob--wrap05{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:248px;
+        height:211px;
+        margin-left: -832px;
+        margin-top: -216px;
+        animation: bobUp 3.2s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+
+      .bob--wrap06{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:409px;
+        height:394px;
+        margin-left: -1012px;
+        margin-top: -19px;
+        animation: bobUp 4s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+
+      
+      .bob--wrap07{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:220px;
+        height:211px;
+        margin-left: -682px;
+        margin-top: 372px;
+        animation: bobUp 3.2s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+      
+      .bob--wrap08{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:58px;
+        height:53px;
+        margin-left: -620px;
+        margin-top: 61px;
+        animation: bobUp 6.5s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+     
+      .bob--wrap09{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:90px;
+        height:90px;
+        margin-left: 324px;
+        margin-top: 586px;
+        animation: bobUp 7.2s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+      
+      .bob--wrap10{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width:152px;
+        height:141px;
+        margin-left: -440px;
+        margin-top: 386px;
+        animation: bobUp 4.2s cubic-bezier(0.22,1,0.36,1) infinite;
+      }
+      
+
+      .tok01{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width: 66px;
+        height:66px;
+        background: url(../img/tok_01.png) no-repeat center;
+        margin-top: -281px;
+        margin-left: -857px;
+      }
+      .tok02{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width: 44px;
+        height:44px;
+        background: url(../img/tok_02.png) no-repeat center;
+        margin-top: -431px;
+        margin-left: -566px;
+      }
+      .tok03{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width: 51px;
+        height:51px;
+        background: url(../img/tok_03.png) no-repeat center;
+        margin-top: 210px;
+        margin-left: 592px;
+      }
+      .tok04{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width: 56px;
+        height:56px;
+        background: url(../img/tok_04.png) no-repeat center;
+        margin-top: -355px;
+        margin-left: 753px;
+      }
+      .tok05{
+        position: absolute;
+        top:50%;
+        left:50%;
+        transform: translate(-50%, -50%);
+        width: 66px;
+        height:66px;
+        background: url(../img/tok_05.png) no-repeat center;
+        margin-top: -475px;
+        margin-left: 590px;
+      }
     }
   }
 }
@@ -1693,12 +1934,31 @@ 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); }
@@ -1749,10 +2009,20 @@ img{
 
 @keyframes cloudMoveLeftToRight {
   0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  10% {
+    opacity: 1;
     transform: translateX(0px);
   }
+  90% {
+    opacity: 1;
+    transform: translateX(300px);
+  }
   100% {
-    transform: translateX(100px);
+    opacity: 0;
+    transform: translateX(400px);
   }
 }
 

index.html

@@ -141,8 +141,8 @@
     </div>
   </section>
   <section class="evt--section02-2">
-    <div class="bg1"><img src="assets/img/bg_5.png" alt=""></div>
-    <div class="bg2"><img src="assets/img/bg_6.png" alt=""></div>
+    <!-- <div class="bg1"><img src="assets/img/bg_5.png" alt=""></div>
+    <div class="bg2"><img src="assets/img/bg_6.png" alt=""></div> -->
     <div class="section--container">
       <div class="evt--2">
         <span class="evt--circle">EVENT.02</span>
@@ -160,6 +160,40 @@
         <div class="bg2"><img src="" alt=""></div>
         <div class="bg3"><img src="" alt=""></div>
         <div class="bg4"><img src="" alt=""></div>
+
+        <div class="bob--wrap01">
+          <div class="bob01"></div>
+        </div>
+        <div class="bob--wrap02">
+          <div class="bob02"></div>
+        </div>
+        <div class="bob--wrap03">
+          <div class="bob03"></div>
+        </div>
+        <div class="bob--wrap04">
+          <div class="bob04"></div>
+        </div>
+        <div class="bob--wrap05">
+          <div class="bob05"></div>
+        </div>
+        <div class="bob--wrap06">
+          <div class="bob06"></div>
+        </div>
+        <div class="bob--wrap07">
+          <div class="bob07"></div>
+        </div>
+        <div class="bob--wrap08">
+          <div class="bob08"></div>
+        </div>
+        <div class="bob--wrap09">
+          <div class="bob09"></div>
+        </div>
+
+        <div class="tok01"></div>
+        <div class="tok02"></div>
+        <div class="tok03"></div>
+        <div class="tok04"></div>
+        <div class="tok05"></div>
       </div>
     </div>
   </section>