pds-dev-kit-web-test 0.3.30 → 0.3.32

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.js

@@ -97,10 +97,9 @@ function CustomSection(props) {
         device: device,
         sectionActionHandler: sectionActionHandler
     }), setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB, makeAllInOneGroup = _g.makeAllInOneGroup, escapeFromGroup = _g.escapeFromGroup;
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useLayoutEffect)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         setLayouts(function (prev) {
-            console.log('custom section EFFECT: componentBlocks setLayouts');
             var groupInLG = (0, useGroupDrag_2.getGroupCB)(prev.lg);
             var groupInSM = (0, useGroupDrag_2.getGroupCB)(prev.sm);
             var groupedCBIdsInLG = (groupInLG === null || groupInLG === void 0 ? void 0 : groupInLG.childrenIds) || [];
@@ -110,14 +109,10 @@ function CustomSection(props) {
             if (groupInLG === null || groupInLG === void 0 ? void 0 : groupInLG.groupLayouts) {
                 var newGroupLayout = (0, utils_1.getGroupForMultiple)(lg.filter(function (each) { return groupedCBIdsInLG.includes(each.i); }));
                 filteredLG.push(newGroupLayout);
-                // eslint-disable-next-line no-console
-                console.log({ newGroupLG: newGroupLayout });
             }
             if (groupInSM === null || groupInSM === void 0 ? void 0 : groupInSM.groupLayouts) {
                 var newGroupLayout = (0, utils_1.getGroupForMultiple)(sm.filter(function (each) { return groupedCBIdsInSM.includes(each.i); }));
                 filteredSM.push(newGroupLayout);
-                // eslint-disable-next-line no-console
-                console.log({ newGroupSM: newGroupLayout });
             }
             return {
                 lg: filteredLG,
@@ -141,7 +136,7 @@ function CustomSection(props) {
     };
     var breakpoint = device === 'MOBILE' ? 'sm' : 'lg';
     var onClickCB = function (id) {
-        if (!isEditMode) {
+        if (!isEditMode || id === selectedCB) {
             return;
         }
         if (selectedCB && activeBulkSelectMode) {
@@ -200,10 +195,11 @@ function CustomSection(props) {
         if (!isEditMode || !props.item) {
             return;
         }
-        var item = props.item;
+        var item = props.item, prev = props.prev;
         if (item.i === 'group' && props.item.groupLayouts) {
             setSelectedCB('group');
             var outerBasedChildrenPositions = props.item.groupLayouts.map(function (cb) { return (__assign(__assign({}, cb), { x: item.x + cb.x, y: item.y + cb.y })); });
+            console.log(props.item);
             sectionActionHandler &&
                 sectionActionHandler({
                     type: '@CUSTOMSECTION/GROUP_DRAG_STOP',
@@ -213,9 +209,15 @@ function CustomSection(props) {
         }
         var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
         var isIdNumber = !Number.isNaN(numberId);
+        if (hasLayoutPlacementChanged(item, prev)) {
+            return;
+        }
         if (isIdNumber) {
             if ((0, useGroupDrag_2.getGroupCB)(layouts[layoutByDevice])) {
-                breakGroupCB();
+                setTimeout(function () {
+                    // NOTE: to fix.
+                    breakGroupCB();
+                }, 100);
             }
             setSelectedCB(numberId);
         }
@@ -227,12 +229,15 @@ function CustomSection(props) {
         }
     };
     var onResizeStop = function (props) {
-        var _a;
-        if (!isEditMode) {
+        var prev = props.prev, item = props.item;
+        if (!isEditMode || !item) {
             return;
         }
-        var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
+        var numberId = Number(item.i);
         var isIdNumber = !Number.isNaN(numberId);
+        if (hasLayoutPlacementChanged(item, prev)) {
+            return;
+        }
         if (isIdNumber) {
             setSelectedCB(numberId);
         }
@@ -342,6 +347,17 @@ function keepSimilarOrderToPreventRerender(arr) {
     }
     return __spreadArray([null], arrCopy.sort(function (a, b) { return Number(a.i) - Number(b.i); }), true);
 }
+function hasLayoutPlacementChanged(current, prev) {
+    if (!prev) {
+        return false;
+    }
+    return (prev.w === current.w &&
+        prev.h === current.h &&
+        prev.x === current.x &&
+        prev.y === current.y &&
+        prev.z === current.z &&
+        prev.i === current.i);
+}
 var S_gleStyles = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  * {\n    box-sizing: border-box;\n  }\n\n  .cb-box-in-group .cb-layout-box {\n  }\n\n  .iamgroup {\n    box-shadow: 0 0 0 3px #027aff;\n    opacity: 1;\n  }\n\n  .iamgroup::before {\n    display: block;\n    content: '\uC544\uC774\uC5E0 \uADF8\uB8F9\uB4DC\u314B';\n    position: absolute;\n    top: -22px;\n    right: 0;\n    background-color: #027aff;\n    color: white;\n    padding: 2px;\n  }\n\n  .react-grid-layout {\n    position: relative;\n    z-index: 1;\n  }\n\n  .react-grid-layout .grid-placeholder {\n    box-sizing: border-box;\n  }\n\n  .react-grid-item {\n    left: 0;\n    position: absolute;\n    top: 0;\n    z-index: 1;\n  }\n\n  .react-grid-item.react-draggable.react-resizable:hover,\n  .react-grid-item-selected {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.isResizing,\n  .react-grid-item.isResizing .cb-layout-box,\n  .react-grid-item.isResizing .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-draggable.isDragging,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  /* .react-grid-item.react-draggable.isDragging .cb-layout-box .twitter-embed-container {\n    visibility: hidden;\n  } */\n\n  .react-grid-item.isResizing > .react-resizable-handle,\n  .react-grid-item.react-draggable.isDragging > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.static::after {\n    color: red;\n    content: \"this is static, can't drag\";\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-grid-item.placeholder {\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    -webkit-user-select: none;\n    user-select: none;\n    z-index: 9999;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    background: rgb(255, 255, 255);\n    border: 3px solid rgb(2, 122, 255);\n    content: '';\n    height: 5px;\n    position: absolute;\n    width: 5px;\n  }\n\n  .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item-selected > .react-resizable-handle {\n    visibility: visible;\n  }\n\n  /* NOTE: Resizable related */\n  .react-resizable {\n    position: relative;\n  }\n\n  .react-resizable-handle {\n    align-items: center;\n    background-origin: content-box;\n    background-repeat: no-repeat;\n    box-sizing: border-box;\n    display: flex;\n    height: 20px;\n    justify-content: center;\n    position: absolute;\n    width: 20px;\n  }\n\n  .react-resizable-handle-sw {\n    bottom: 0;\n    cursor: sw-resize;\n    left: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .react-resizable-handle-se {\n    bottom: 0;\n    cursor: se-resize;\n    right: 0;\n    transform: translate(50%, 50%);\n  }\n\n  .react-resizable-handle-nw {\n    cursor: nw-resize;\n    left: 0;\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-ne {\n    cursor: ne-resize;\n    right: 0;\n    top: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    cursor: ew-resize;\n    top: 50%;\n  }\n\n  .react-resizable-handle-w {\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-e {\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    cursor: ns-resize;\n    left: 50%;\n  }\n\n  .react-resizable-handle-n {\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .grid-placeholder {\n    position: absolute;\n    z-index: 0;\n  }\n\n  .grid-pattern-rect {\n    fill: #0000001a;\n    stroke: #ffffff33;\n  }\n\n  .react-grid-item.placeholder .cb-layout-box,\n  .react-grid-item.placeholder .cb-layout-box .cb-divider {\n    animation: none;\n  }\n\n  .react-grid-item.placeholder {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item.placeholder > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .grid-guide-line-center {\n    border-color: #ff463aff;\n    border-style: dashed;\n    border-width: 1px;\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n    z-index: 99999;\n  }\n\n  /* NOTE: Effects */\n\n  @-webkit-keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:36\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:52\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:53:50\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-top\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:47\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-right\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:28\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:52:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:47:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-cw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:52:54\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-ccw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:34:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:35:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:18\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:46\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:37:11\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-bottom-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  @keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:38:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:40:3\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:44:48\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation scale-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n  @keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:46:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bck-center\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:13:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation text-focus-in\n * ----------------------------------------\n */\n  @-webkit-keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:33:10\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation puff-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:29\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation focus-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:22:44\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-horizontal\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n  @keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:23:8\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-vertical\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n  @keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:24:19\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-top\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n  @keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:21:6\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation vibrate-1\n * ----------------------------------------\n */\n  @-webkit-keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n  @keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:27:38\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation blink-1\n * ----------------------------------------\n */\n  @-webkit-keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n  @keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:41:14\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * @animation flicker-in-2\n * ----------------------------------------\n */\n  @-webkit-keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n  @keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-24 16:9:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bounce-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n  @keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:29:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation heartbeat\n * ----------------------------------------\n */\n  @-webkit-keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n  @keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:30:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation kenburns-top\n * ----------------------------------------\n */\n  @-webkit-keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n  @keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:12\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n  @keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-right\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n  @keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:27\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n  @keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:26\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-left\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n  @keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n"], ["\n  * {\n    box-sizing: border-box;\n  }\n\n  .cb-box-in-group .cb-layout-box {\n  }\n\n  .iamgroup {\n    box-shadow: 0 0 0 3px #027aff;\n    opacity: 1;\n  }\n\n  .iamgroup::before {\n    display: block;\n    content: '\uC544\uC774\uC5E0 \uADF8\uB8F9\uB4DC\u314B';\n    position: absolute;\n    top: -22px;\n    right: 0;\n    background-color: #027aff;\n    color: white;\n    padding: 2px;\n  }\n\n  .react-grid-layout {\n    position: relative;\n    z-index: 1;\n  }\n\n  .react-grid-layout .grid-placeholder {\n    box-sizing: border-box;\n  }\n\n  .react-grid-item {\n    left: 0;\n    position: absolute;\n    top: 0;\n    z-index: 1;\n  }\n\n  .react-grid-item.react-draggable.react-resizable:hover,\n  .react-grid-item-selected {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item img {\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .react-grid-item.isResizing,\n  .react-grid-item.isResizing .cb-layout-box,\n  .react-grid-item.isResizing .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  .react-grid-item.react-draggable.isDragging,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box,\n  .react-grid-item.react-draggable.isDragging .cb-layout-box .cb-divider {\n    visibility: hidden;\n  }\n\n  /* .react-grid-item.react-draggable.isDragging .cb-layout-box .twitter-embed-container {\n    visibility: hidden;\n  } */\n\n  .react-grid-item.isResizing > .react-resizable-handle,\n  .react-grid-item.react-draggable.isDragging > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item.dropping {\n    visibility: hidden;\n  }\n\n  .react-grid-item.static::after {\n    color: red;\n    content: \"this is static, can't drag\";\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-grid-item.placeholder {\n    -moz-user-select: none;\n    -ms-user-select: none;\n    -o-user-select: none;\n    -webkit-user-select: none;\n    user-select: none;\n    z-index: 9999;\n  }\n\n  .react-grid-item > .react-resizable-handle::after {\n    background: rgb(255, 255, 255);\n    border: 3px solid rgb(2, 122, 255);\n    content: '';\n    height: 5px;\n    position: absolute;\n    width: 5px;\n  }\n\n  .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .react-grid-item-selected > .react-resizable-handle {\n    visibility: visible;\n  }\n\n  /* NOTE: Resizable related */\n  .react-resizable {\n    position: relative;\n  }\n\n  .react-resizable-handle {\n    align-items: center;\n    background-origin: content-box;\n    background-repeat: no-repeat;\n    box-sizing: border-box;\n    display: flex;\n    height: 20px;\n    justify-content: center;\n    position: absolute;\n    width: 20px;\n  }\n\n  .react-resizable-handle-sw {\n    bottom: 0;\n    cursor: sw-resize;\n    left: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .react-resizable-handle-se {\n    bottom: 0;\n    cursor: se-resize;\n    right: 0;\n    transform: translate(50%, 50%);\n  }\n\n  .react-resizable-handle-nw {\n    cursor: nw-resize;\n    left: 0;\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-ne {\n    cursor: ne-resize;\n    right: 0;\n    top: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-w,\n  .react-resizable-handle-e {\n    cursor: ew-resize;\n    top: 50%;\n  }\n\n  .react-resizable-handle-w {\n    left: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-e {\n    right: 0;\n    transform: translate(50%, -50%);\n  }\n\n  .react-resizable-handle-n,\n  .react-resizable-handle-s {\n    cursor: ns-resize;\n    left: 50%;\n  }\n\n  .react-resizable-handle-n {\n    top: 0;\n    transform: translate(-50%, -50%);\n  }\n\n  .react-resizable-handle-s {\n    bottom: 0;\n    transform: translate(-50%, 50%);\n  }\n\n  .grid-placeholder {\n    position: absolute;\n    z-index: 0;\n  }\n\n  .grid-pattern-rect {\n    fill: #0000001a;\n    stroke: #ffffff33;\n  }\n\n  .react-grid-item.placeholder .cb-layout-box,\n  .react-grid-item.placeholder .cb-layout-box .cb-divider {\n    animation: none;\n  }\n\n  .react-grid-item.placeholder {\n    box-shadow: 0 0 0 3px #027aff;\n  }\n\n  .react-grid-item.placeholder > .react-resizable-handle {\n    visibility: hidden;\n  }\n\n  .grid-guide-line-center {\n    border-color: #ff463aff;\n    border-style: dashed;\n    border-width: 1px;\n    height: 100%;\n    left: 50%;\n    position: absolute;\n    transform: translateX(-50%);\n    z-index: 99999;\n  }\n\n  /* NOTE: Effects */\n\n  @-webkit-keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes fade-in-fwd {\n    0% {\n      -webkit-transform: translateZ(-80px);\n      transform: translateZ(-80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bck {\n    0% {\n      -webkit-transform: translateZ(80px);\n      transform: translateZ(80px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-top {\n    0% {\n      -webkit-transform: translateY(-50px);\n      transform: translateY(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-right {\n    0% {\n      -webkit-transform: translateX(50px);\n      transform: translateX(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:36\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-bottom {\n    0% {\n      -webkit-transform: translateY(50px);\n      transform: translateY(50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:29:52\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation fade-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes fade-in-left {\n    0% {\n      -webkit-transform: translateX(-50px);\n      transform: translateX(-50px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:53:50\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-top\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-top {\n    0% {\n      -webkit-transform: translateY(-1000px);\n      transform: translateY(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:47\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-right\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-right {\n    0% {\n      -webkit-transform: translateX(1000px);\n      transform: translateX(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bottom {\n    0% {\n      -webkit-transform: translateY(1000px);\n      transform: translateY(1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:54:28\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-left\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-left {\n    0% {\n      -webkit-transform: translateX(-1000px);\n      transform: translateX(-1000px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:52:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract {\n    0% {\n      letter-spacing: 1em;\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      letter-spacing: normal;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:47:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-cw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-cw {\n    0% {\n      -webkit-transform: rotate(-45deg);\n      transform: rotate(-45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:52:54\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation rotate-in-2-ccw\n * ----------------------------------------\n */\n  @-webkit-keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n  @keyframes rotate-in-2-ccw {\n    0% {\n      -webkit-transform: rotate(45deg);\n      transform: rotate(45deg);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotate(0);\n      transform: rotate(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:34:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-fwd {\n    0% {\n      -webkit-transform: rotateX(-100deg);\n      transform: rotateX(-100deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:35:56\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-top-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-top-bck {\n    0% {\n      -webkit-transform: rotateX(70deg);\n      transform: rotateX(70deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0deg);\n      transform: rotateX(0deg);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:18\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-fwd {\n    0% {\n      -webkit-transform: rotateY(-100deg);\n      transform: rotateY(-100deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:36:46\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-right-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-right-bck {\n    0% {\n      -webkit-transform: rotateY(70deg);\n      transform: rotateY(70deg);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: right;\n      transform-origin: right;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:37:11\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-bottom-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  @keyframes swing-in-bottom-fwd {\n    0% {\n      -webkit-transform: rotateX(100deg);\n      transform: rotateX(100deg);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateX(0);\n      transform: rotateX(0);\n      -webkit-transform-origin: bottom;\n      transform-origin: bottom;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:38:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-fwd\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-fwd {\n    0% {\n      -webkit-transform: rotateY(100deg);\n      transform: rotateY(100deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:40:3\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation swing-in-left-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n  @keyframes swing-in-left-bck {\n    0% {\n      -webkit-transform: rotateY(-70deg);\n      transform: rotateY(-70deg);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: rotateY(0);\n      transform: rotateY(0);\n      -webkit-transform-origin: left;\n      transform-origin: left;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:44:48\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation scale-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n  @keyframes scale-in-center {\n    0% {\n      -webkit-transform: scale(0);\n      transform: scale(0);\n      opacity: 1;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:46:1\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation slide-in-bck-center\n * ----------------------------------------\n */\n  @-webkit-keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes slide-in-bck-center {\n    0% {\n      -webkit-transform: translateZ(600px);\n      transform: translateZ(600px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:13:59\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation tracking-in-contract-bck\n * ----------------------------------------\n */\n  @-webkit-keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n  @keyframes tracking-in-contract-bck {\n    0% {\n      letter-spacing: 1em;\n      -webkit-transform: translateZ(400px);\n      transform: translateZ(400px);\n      opacity: 0;\n    }\n    40% {\n      opacity: 0.6;\n    }\n    100% {\n      -webkit-transform: translateZ(0);\n      transform: translateZ(0);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation text-focus-in\n * ----------------------------------------\n */\n  @-webkit-keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes text-focus-in {\n    0% {\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:33:10\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation puff-in-center\n * ----------------------------------------\n */\n  @-webkit-keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes puff-in-center {\n    0% {\n      -webkit-transform: scale(2);\n      transform: scale(2);\n      -webkit-filter: blur(4px);\n      filter: blur(4px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:11:29\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation focus-in-contract\n * ----------------------------------------\n */\n  @-webkit-keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n  @keyframes focus-in-contract {\n    0% {\n      letter-spacing: 1em;\n      -webkit-filter: blur(12px);\n      filter: blur(12px);\n      opacity: 0;\n    }\n    100% {\n      -webkit-filter: blur(0px);\n      filter: blur(0px);\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:22:44\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-horizontal\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n  @keyframes shake-horizontal {\n    0%,\n    100% {\n      -webkit-transform: translateX(0);\n      transform: translateX(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateX(-10px);\n      transform: translateX(-10px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateX(10px);\n      transform: translateX(10px);\n    }\n    80% {\n      -webkit-transform: translateX(8px);\n      transform: translateX(8px);\n    }\n    90% {\n      -webkit-transform: translateX(-8px);\n      transform: translateX(-8px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:23:8\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-vertical\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n  @keyframes shake-vertical {\n    0%,\n    100% {\n      -webkit-transform: translateY(0);\n      transform: translateY(0);\n    }\n    10%,\n    30%,\n    50%,\n    70% {\n      -webkit-transform: translateY(-8px);\n      transform: translateY(-8px);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: translateY(8px);\n      transform: translateY(8px);\n    }\n    80% {\n      -webkit-transform: translateY(6.4px);\n      transform: translateY(6.4px);\n    }\n    90% {\n      -webkit-transform: translateY(-6.4px);\n      transform: translateY(-6.4px);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:24:19\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation shake-top\n * ----------------------------------------\n */\n  @-webkit-keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n  @keyframes shake-top {\n    0%,\n    100% {\n      -webkit-transform: rotate(0deg);\n      transform: rotate(0deg);\n      -webkit-transform-origin: 50% 0;\n      transform-origin: 50% 0;\n    }\n    10% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n    20%,\n    40%,\n    60% {\n      -webkit-transform: rotate(-4deg);\n      transform: rotate(-4deg);\n    }\n    30%,\n    50%,\n    70% {\n      -webkit-transform: rotate(4deg);\n      transform: rotate(4deg);\n    }\n    80% {\n      -webkit-transform: rotate(-2deg);\n      transform: rotate(-2deg);\n    }\n    90% {\n      -webkit-transform: rotate(2deg);\n      transform: rotate(2deg);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:21:6\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation vibrate-1\n * ----------------------------------------\n */\n  @-webkit-keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n  @keyframes vibrate-1 {\n    0% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n    20% {\n      -webkit-transform: translate(-2px, 2px);\n      transform: translate(-2px, 2px);\n    }\n    40% {\n      -webkit-transform: translate(-2px, -2px);\n      transform: translate(-2px, -2px);\n    }\n    60% {\n      -webkit-transform: translate(2px, 2px);\n      transform: translate(2px, 2px);\n    }\n    80% {\n      -webkit-transform: translate(2px, -2px);\n      transform: translate(2px, -2px);\n    }\n    100% {\n      -webkit-transform: translate(0);\n      transform: translate(0);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:27:38\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation blink-1\n * ----------------------------------------\n */\n  @-webkit-keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n  @keyframes blink-1 {\n    0%,\n    50%,\n    100% {\n      opacity: 1;\n    }\n    25%,\n    75% {\n      opacity: 0;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 0:41:14\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * @animation flicker-in-2\n * ----------------------------------------\n */\n  @-webkit-keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n  @keyframes flicker-in-2 {\n    0% {\n      opacity: 0;\n    }\n    10% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.1% {\n      opacity: 1;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    10.2% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    20.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.25);\n    }\n    20.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    30.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.5% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    30.6% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    45.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    50% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);\n    }\n    55.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    57.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3);\n    }\n    60.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    65.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.3),\n        0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    75.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    77.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.4),\n        0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    85.1% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86% {\n      opacity: 0;\n      -webkit-box-shadow: none;\n      box-shadow: none;\n    }\n    86.1% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n    100% {\n      opacity: 1;\n      -webkit-box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n      box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45),\n        0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-24 16:9:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bounce-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n  @keyframes bounce-top {\n    0% {\n      -webkit-transform: translateY(-45px);\n      transform: translateY(-45px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n      opacity: 1;\n    }\n    24% {\n      opacity: 1;\n    }\n    40% {\n      -webkit-transform: translateY(-24px);\n      transform: translateY(-24px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    65% {\n      -webkit-transform: translateY(-12px);\n      transform: translateY(-12px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    82% {\n      -webkit-transform: translateY(-6px);\n      transform: translateY(-6px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    93% {\n      -webkit-transform: translateY(-4px);\n      transform: translateY(-4px);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    25%,\n    55%,\n    75%,\n    87% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    100% {\n      -webkit-transform: translateY(0px);\n      transform: translateY(0px);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n      opacity: 1;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:29:16\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation heartbeat\n * ----------------------------------------\n */\n  @-webkit-keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n  @keyframes heartbeat {\n    from {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-transform-origin: center center;\n      transform-origin: center center;\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    10% {\n      -webkit-transform: scale(0.91);\n      transform: scale(0.91);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    17% {\n      -webkit-transform: scale(0.98);\n      transform: scale(0.98);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n    33% {\n      -webkit-transform: scale(0.87);\n      transform: scale(0.87);\n      -webkit-animation-timing-function: ease-in;\n      animation-timing-function: ease-in;\n    }\n    45% {\n      -webkit-transform: scale(1);\n      transform: scale(1);\n      -webkit-animation-timing-function: ease-out;\n      animation-timing-function: ease-out;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:30:57\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation kenburns-top\n * ----------------------------------------\n */\n  @-webkit-keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n  @keyframes kenburns-top {\n    0% {\n      -webkit-transform: scale(1) translateY(0);\n      transform: scale(1) translateY(0);\n      -webkit-transform-origin: 50% 16%;\n      transform-origin: 50% 16%;\n    }\n    100% {\n      -webkit-transform: scale(1.25) translateY(-15px);\n      transform: scale(1.25) translateY(-15px);\n      -webkit-transform-origin: top;\n      transform-origin: top;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:12\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-top\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n  @keyframes bg-pan-top {\n    0% {\n      background-position: 50% 100%;\n    }\n    100% {\n      background-position: 50% 0%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:5\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-right\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n  @keyframes bg-pan-right {\n    0% {\n      background-position: 0% 50%;\n    }\n    100% {\n      background-position: 100% 50%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:33:27\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-bottom\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n  @keyframes bg-pan-bottom {\n    0% {\n      background-position: 50% 0%;\n    }\n    100% {\n      background-position: 50% 100%;\n    }\n  }\n\n  /* ----------------------------------------------\n * Generated by Animista on 2023-7-4 1:34:26\n * Licensed under FreeBSD License.\n * See http://animista.net/license for more info. \n * w: http://animista.net, t: @cssanimista\n * ---------------------------------------------- */\n\n  /**\n * ----------------------------------------\n * animation bg-pan-left\n * ----------------------------------------\n */\n  @-webkit-keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n  @keyframes bg-pan-left {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n"])));
 var S_SectionWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
 exports.default = react_1.default.memo(CustomSection);

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/useGroupDrag.js

@@ -64,6 +64,8 @@ function useGroupDrag(_a) {
             escapedItem.x += group.x;
             escapedItem.y += group.y;
             currentLayoutCopy.push(escapedItem);
+            var newGroup = (0, utils_1.recalculatedGroup)(group);
+            currentLayoutCopy.splice(groupIdx, 1, newGroup);
             return __assign(__assign({}, prev), (_a = {}, _a[layoutByDevice] = currentLayoutCopy, _a));
         });
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/utils.d.ts

@@ -4,6 +4,7 @@ export interface LayoutItemWithGroupType extends LayoutItem {
     childrenIds: string[];
 }
 export declare function getGroupData(elem1: LayoutItemWithGroupType, elem2: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function recalculatedGroup(group: LayoutItemWithGroupType): LayoutItemWithGroupType;
 export declare function getGroupForMultiple(elems: LayoutItem[]): LayoutItemWithGroupType;
 export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBlock[], groupIds: string[]): {
     inGroup: ComponentBlock[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGroupDrag/utils.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.splitComponentBlocksByGroup = exports.getGroupForMultiple = exports.getGroupData = void 0;
+exports.splitComponentBlocksByGroup = exports.getGroupForMultiple = exports.recalculatedGroup = exports.getGroupData = void 0;
 function getGroupData(elem1, elem2) {
     var _a, _b;
     var minX = Math.min(elem1.x, elem2.x);
@@ -33,8 +33,6 @@ function getGroupData(elem1, elem2) {
     var maxW = Math.max(elem1W, elem2W);
     var maxH = Math.max(elem1H, elem2H);
     var maxZ = Math.max((_a = elem1 === null || elem1 === void 0 ? void 0 : elem1.z) !== null && _a !== void 0 ? _a : 0, (_b = elem2 === null || elem2 === void 0 ? void 0 : elem2.z) !== null && _b !== void 0 ? _b : 0);
-    // eslint-disable-next-line no-console
-    console.log('grouping', { elem1Z: elem1.z, elem2Z: elem2.z });
     var elem1InnerData = __assign(__assign({}, elem1), { x: elem1.x - minX, y: elem1.y - minY });
     var elem2InnerData = __assign(__assign({}, elem2), { x: elem2.x - minX, y: elem2.y - minY });
     var groupLayouts = elem1.groupLayouts
@@ -53,6 +51,15 @@ function getGroupData(elem1, elem2) {
     };
 }
 exports.getGroupData = getGroupData;
+function recalculatedGroup(group) {
+    var _a;
+    if (!group.groupLayouts) {
+        return group;
+    }
+    var groupItemsWithOrgPlacement = (_a = group.groupLayouts.map(function (each) { return (__assign(__assign({}, each), { x: group.x + each.x, y: group.y + each.y })); })) !== null && _a !== void 0 ? _a : [];
+    return getGroupForMultiple(groupItemsWithOrgPlacement);
+}
+exports.recalculatedGroup = recalculatedGroup;
 function getGroupForMultiple(elems) {
     if (elems.length === 0) {
         throw new Error('Array must contain at least one element.');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.30",
+  "version": "0.3.32",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "publ-echo": "^0.0.31",
+    "publ-echo": "^0.0.34",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,6 +1,9 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.3.30]
+## [v0.3.32]
 ## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-        * 애니메이션 이슈 픽스 - cb의 순서를 최대한 보장한다.
+        * 깜빡깜빡거리며 구석에 생기는(x:0,y:0으로 움직이는) 이슈 픽스
+        * 제자리 DROP / 제자리 RESIZE → action 발행 안함
+        * shift후 스스로 클릭 → action 발행 안함
+        * bulk그룹에서 제외 클릭 시 group 사이즈 조정