+ 이모지 반응

assets/css/animation.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/animation.scss"],"names":[],"mappings":"AAAA,uBACE,GACE,mBAGF,KACE,cAEA,UACE,6FASN,0BACE,GACE,cACA,UAGF,KACE,UACE,oFAOF,WAIJ,QACE,kBAGF,aACE,kBACA,cACA,iBACA,kBAEA,sBACA,2BACA,8BAEA,WAEA,WACA,YACA,mBAIF,oBACE,cACA,WACA,gBACA,0BAEA,mBAGF,mBACE,cACA,WACA,gBACA,cAEA,0BAEA,8CAEA,mBAIF,sBACE,4BACA,kCAEA,oCACA,qCAGA,mBAGF,qBACE,+BACA,kCACA,sBAEA,uCACA,qCACA,8BAGF,eACE,UACA,UACE,4FAQJ,SACE,UAGF,WACE,UAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,oBAGF,uCACE,oBAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,oBAGF,uCACE,oBAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE","file":"animation.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/animation.scss"],"names":[],"mappings":"AAAA,uBACE,GACE,mBAGF,KACE,cAEA,UACE,6FASN,0BACE,GACE,cACA,UAGF,KACE,UACE,oFAOF,WAIJ,QACE,kBACA,iBAGF,aACE,kBACA,cACA,iBACA,kBACA,sBACA,2BACA,8BACA,WACA,iBACA,WACA,YACA,mBACA,qCAGF,oBACE,cACA,WACA,gBACA,0BAEA,mBAGF,mBACE,cACA,WACA,gBACA,cAEA,0BAEA,8CAEA,mBAIF,sBACE,4BACA,kCAEA,oCACA,qCAGA,mBAGF,qBACE,+BACA,kCACA,sBAEA,uCACA,qCACA,8BAGF,eACE,UACA,UACE,4FAQJ,SACE,UAGF,WACE,UAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,oBAGF,uCACE,oBAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,oBAGF,uCACE,oBAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE","file":"animation.css"}

assets/scss/animation.scss

@@ -37,24 +37,23 @@
 
 .number {
   position: relative;
+  line-height: 1.75;
 }
 
 .number span {
   position: absolute;
   display: block;
   font-weight: bold;
-  text-align: center;
-  
+  text-align: center;  
   box-sizing: border-box;
   -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  
+  -webkit-box-sizing: border-box;  
   color: white;
-  
+  line-height: 1.75;
   width: 100%;
   height: 100%;
   perspective: 7.14em;
-  
+  font-family: 'gmarketSans'!important;
 }
 
 .number span:before {

assets/scss/style.scss

@@ -59,21 +59,21 @@ img{
         max-width: 290px;
         width: 40%;
         margin-bottom: 80px;
-        opacity: 0;
-        transform: translateY(60px);
-        animation: fadeUpLogo 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+        // opacity: 0;
+        // transform: translateY(60px);
+        // animation: fadeUpLogo 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
       }
       >h1{
         margin-bottom: 30px;
-        opacity: 0;
-        transform: translateX(-60px);
-        animation: fadeInRightH1 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
+        // opacity: 0;
+        // transform: translateX(-60px);
+        // animation: fadeInRightH1 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
       }
       >h2{
         opacity: 0;
-        transform: translateX(60px);
-        animation: fadeInLeftH2 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
-        margin-bottom: 100px;
+        // transform: translateX(60px);
+        // animation: fadeInLeftH2 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
+        // margin-bottom: 100px;
       }
       >h3{
         opacity: 0;
@@ -112,18 +112,18 @@ img{
           .bg--wave1{
             position: absolute;
             z-index: -1;
-            opacity: 0;
-            transform: translateX(-100px);
-            animation: waveInRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
+            // opacity: 0;
+            // transform: translateX(-100px);
+            // animation: waveInRight 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
           }
           .bg--wave2{
             position: absolute;
             width: 316px;
             right: 60px;
             top: 103px;
-            opacity: 0;            
-            transform: translateX(-100px);
-            animation: waveInRight 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
+            // opacity: 0;            
+            // transform: translateX(-100px);
+            // animation: waveInRight 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
           }
         }
       }
@@ -1581,12 +1581,73 @@ img{
         font-size: 36px;
       }
       .evt--2{
+        h2{
+          max-width:551px;
+        }
         .evt--box{
           padding: 30px;
           li{
             font-size: 30px;
           }
         }
+
+        .bob--wrap01{
+          margin-left: 402px;
+          margin-top: -441px;          
+        }
+
+        .bob--wrap02{
+          margin-left: 452px;
+          margin-top: -231px;
+        }
+        .bob--wrap03{
+          margin-left: 262px;
+          margin-top: -131px;
+        }
+        .bob--wrap04{
+          margin-left: -498px;
+          margin-top: -411px;
+        }
+        .bob--wrap05{
+          margin-left: -618px;
+          margin-top: -261px;
+        }
+        .bob--wrap06{
+          margin-left: -748px;
+          margin-top: -231px;
+        }
+        .bob--wrap07{
+          margin-left: -479px;
+          margin-top: -11px;
+        }
+
+
+
+        .tok05{
+          transform: scale(.5);
+          margin-top: -335px;
+          margin-left: 370px;
+        }
+        .tok04{
+          transform: scale(.5);
+          margin-top: -275px;
+          margin-left: 430px;
+        }
+        .tok03{
+          transform: scale(.5);
+          margin-top: -45px;
+          margin-left: 338px;
+        }
+        .tok02{
+          transform: scale(.5);
+          margin-top: -291px;
+          margin-left: -376px;
+        }
+        .tok01{
+          transform: scale(.5);
+          margin-top: -191px;
+          margin-left: -606px;
+        }
       }
     }
   }
@@ -1667,6 +1728,14 @@ img{
       }
     }
   }
+
+
+
+  @keyframes bobUp {
+    0% { transform: translateY(120vh) scale(.5); opacity: 0; }
+    80% { opacity: 1; }
+    100% { transform: translateY(0) scale(.5); opacity: 1; }
+  }
 }
 @media(max-width: 1000px){
   .evt--section01{
@@ -1909,6 +1978,64 @@ img{
           font-size: 24px;
           height: 80px;
         }
+
+        .bob--wrap01{
+          margin-left: 212px;
+          margin-top: -441px;          
+        }
+
+        .bob--wrap02{
+          margin-left: 232px;
+          margin-top: -231px;
+        }
+        .bob--wrap03{
+          margin-left: 112px;
+          margin-top: -81px;
+        }
+        .bob--wrap04{
+          margin-left: -398px;
+          margin-top: -411px;
+        }
+        .bob--wrap05{
+          margin-left: -458px;
+          margin-top: -261px;
+        }
+        .bob--wrap06{
+          margin-left: -708px;
+          margin-top: -231px;
+        }
+        .bob--wrap07{
+          margin-left: -479px;
+          margin-top: -11px;
+        }
+
+
+
+        .tok05{
+          transform: scale(.5);
+          margin-top: -335px;
+          margin-left: 370px;
+        }
+        .tok04{
+          transform: scale(.5);
+          margin-top: -275px;
+          margin-left: 430px;
+        }
+        .tok03{
+          transform: scale(.5);
+          margin-top: -45px;
+          margin-left: 338px;
+        }
+        .tok02{
+          transform: scale(.5);
+          margin-top: -291px;
+          margin-left: -376px;
+        }
+        .tok01{
+          transform: scale(.5);
+          margin-top: -191px;
+          margin-left: -606px;
+        }
       }
     }
   }
@@ -2089,6 +2216,37 @@ img{
           }
           padding: 20px;
         }
+
+
+        .bob--wrap01{
+          margin-left: 10%;
+          margin-top: -120%;          
+        }
+
+        .bob--wrap02{
+          margin-left: 10%;
+          margin-top: -231px;
+        }
+        .bob--wrap03{
+          margin-left: -14%;
+          margin-top: -81px;
+        }
+        .bob--wrap04{
+          margin-left: -60%;
+          margin-top: -120%;
+        }
+        .bob--wrap05{
+          margin-left: -80%;
+          margin-top: -70%;
+        }
+        .bob--wrap06{
+          margin-left: -120%;
+          margin-top: -70%;
+        }
+        .bob--wrap07{
+          margin-left: -80%;
+          margin-top:0%;
+        }
       }
     }
   }
@@ -2131,6 +2289,13 @@ img{
       }      
     }
   }
+
+
+  @keyframes bobUp {
+    0% { transform: translateY(120vh) scale(.3); opacity: 0; }
+    80% { opacity: 1; }
+    100% { transform: translateY(0) scale(.3); opacity: 1; }
+  }
 }
 
 

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="ko">
 <head>
-  <meta charset="UTF-8">
+  <meta charset="euc-kr">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />