pds-dev-kit-web-test 0.3.14 → 0.3.16

package/dist/src/desktop/components/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 export type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
@@ -26,6 +26,8 @@ export type TextFieldProps = {
     iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn1IconFillType?: 'line' | 'fill';
     iBtn2IconFillType?: 'line' | 'fill';
+    overrideIBtn1IconColorKey?: UiColors;
+    overrideIBtn2IconColorKey?: UiColors;
     colorTheme?: 'none' | 'dark' | 'transparent';
     max?: number;
     maxLength?: number;
@@ -45,5 +47,5 @@ export type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

package/dist/src/desktop/components/TextField/TextField.js

@@ -50,7 +50,7 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -140,17 +140,19 @@ function TextField(_a) {
                     break;
                 }
             }
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
-                                    {
-                                        none: basicThemeIconColors[state],
-                                        dark: darkThemeIconColors[state],
-                                        transparent: transparentThemeIconColors[state]
-                                    }[colorTheme], iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
-                                    {
-                                        none: basicThemeIconColors[state],
-                                        dark: darkThemeIconColors[state],
-                                        transparent: transparentThemeIconColors[state]
-                                    }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
     };
     return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));

package/dist/src/mobile/components/TextField/TextField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Path } from 'react-hook-form';
-import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType } from '../../../common';
+import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
 export type TextFieldProps = {
     name: Path<IFormValues>;
     hintText?: PDSTextType;
@@ -26,6 +26,8 @@ export type TextFieldProps = {
     iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
     iBtn1IconFillType?: 'line' | 'fill';
     iBtn2IconFillType?: 'line' | 'fill';
+    overrideIBtn1IconColorKey?: UiColors;
+    overrideIBtn2IconColorKey?: UiColors;
     colorTheme?: 'none' | 'dark' | 'transparent';
     max?: number;
     maxLength?: number;
@@ -45,5 +47,5 @@ export type TextFieldProps = {
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
     onTarget?: () => void;
 };
-declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
+declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
 export default TextField;

package/dist/src/mobile/components/TextField/TextField.js

@@ -50,7 +50,7 @@ var IconButton_1 = require("../IconButton");
 var TextLabel_1 = require("../TextLabel");
 function TextField(_a) {
     var _b;
-    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
+    var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
     var basicThemeIconColors = {
         normal: 'ui_cpnt_button_icon_default',
         read_only: 'ui_cpnt_button_icon_default',
@@ -140,17 +140,19 @@ function TextField(_a) {
                     break;
                 }
             }
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
-                                    {
-                                        none: basicThemeIconColors[state],
-                                        dark: darkThemeIconColors[state],
-                                        transparent: transparentThemeIconColors[state]
-                                    }[colorTheme], iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: colorTheme &&
-                                    {
-                                        none: basicThemeIconColors[state],
-                                        dark: darkThemeIconColors[state],
-                                        transparent: transparentThemeIconColors[state]
-                                    }[colorTheme], iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
+                                    (colorTheme &&
+                                        {
+                                            none: basicThemeIconColors[state],
+                                            dark: darkThemeIconColors[state],
+                                            transparent: transparentThemeIconColors[state]
+                                        }[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
         }
     };
     return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));

package/dist/src/sub/DynamicLayout/sectionActionTypes.d.ts

@@ -16,6 +16,15 @@ type ActionHandlerPayload = {
         e?: ResizeEventType;
         node?: HTMLElement;
     };
+    '@CUSTOMSECTION/GROUP_DRAG_STOP': {
+        layout: Layout;
+        prev?: LayoutItem;
+        item?: LayoutItem;
+        placeholder?: LayoutItem;
+        e?: ResizeEventType;
+        node?: HTMLElement;
+        outerBasedChildrenPositions: LayoutItem[];
+    };
     '@CUSTOMSECTION/CB_RESIZE_STOP': {
         layout: Layout;
         prev?: LayoutItem;

package/dist/src/sub/DynamicLayout/sections/CustomSection/CustomSection.d.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import type { ISection } from '../../types';
+import type { Layout } from 'publ-echo/dist/lib/GridLayoutEditor/types';
+export type LayoutsType = {
+    sm: Layout;
+    lg: Layout;
+};
 declare function CustomSection(props: ISection): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof CustomSection>;
 export default _default;

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

@@ -44,14 +44,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable react/destructuring-assignment */
 var publ_echo_1 = require("publ-echo");
+var ReactGridLayout_1 = __importDefault(require("publ-echo/dist/lib/GridLayoutEditor/ReactGridLayout"));
 var react_1 = __importStar(require("react"));
 var ErrorBoundary_1 = require("../../../DynamicLayout/components/Section/ErrorBoundary");
 var dynamicLayoutContext_1 = require("../../../DynamicLayout/dynamicLayoutContext");
 var styled_components_1 = __importDefault(require("styled-components"));
 var components_1 = require("../../components");
 var ComponentBlockMatcher_1 = __importDefault(require("./components/ComponentBlock/ComponentBlockMatcher"));
+var useGroupDrag_1 = require("./hooks/useGroupDrag");
 var util_1 = require("./util");
 var parseSectionPadding_1 = __importDefault(require("./util/layoutPropParsers/parseSectionPadding"));
+var WidthProvidedRGL = (0, publ_echo_1.WidthProvider)(ReactGridLayout_1.default);
 var Responsive = (0, publ_echo_1.WidthProvider)(publ_echo_1.ResponsiveGridEditor);
 var GRID_CELL_MIN = 24;
 var DESKTOP_GRID_COLS = 24;
@@ -68,6 +71,7 @@ function CustomSection(props) {
     var _e = (0, react_1.useState)(16), baseFontSize = _e[0], setBaseFontSize = _e[1];
     var isMobile = device === 'MOBILE';
     var isEditMode = mode === 'EDIT';
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
     var _f = (0, react_1.useState)(function () {
         var _a = (0, util_1.parsePlacement)(componentBlocks !== null && componentBlocks !== void 0 ? componentBlocks : []), lg = _a.lg, sm = _a.sm;
         return {
@@ -84,10 +88,14 @@ function CustomSection(props) {
             setSelectedCB(null);
         }
     }, [editingSectionId]);
-    var _g = (0, util_1.parseCustomSectionPlacement)({
+    var _g = (0, useGroupDrag_1.useGroupDrag)({
+        setLayouts: setLayouts,
+        device: device
+    }), isShiftOn = _g.isShiftOn, setGroupCB = _g.setGroupCB, breakGroupCB = _g.breakGroupCB;
+    var _h = (0, util_1.parseCustomSectionPlacement)({
         isMobile: isMobile,
         customSectionProps: CB_PLACEMENT_PROP_SECTION
-    }), rows = _g.rows, width = _g.width, minHeight = _g.minHeight, isFullWidth = _g.isFullWidth;
+    }), rows = _h.rows, width = _h.width, minHeight = _h.minHeight, isFullWidth = _h.isFullWidth;
     var customSectionStyles = {
         minHeight: "".concat(minHeight, "vh"),
         width: '100%',
@@ -98,6 +106,18 @@ function CustomSection(props) {
         if (!isEditMode) {
             return;
         }
+        if (selectedCB && isShiftOn) {
+            setGroupCB(selectedCB, id);
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/CB_CLICKED',
+                    payload: {
+                        id: 'group'
+                    }
+                });
+            setSelectedCB('group');
+            return;
+        }
         setSelectedCB(id);
         sectionActionHandler &&
             sectionActionHandler({
@@ -136,7 +156,18 @@ function CustomSection(props) {
     };
     var onDragStop = function (props) {
         var _a;
-        if (!isEditMode) {
+        if (!isEditMode || !props.item) {
+            return;
+        }
+        var item = props.item;
+        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 })); });
+            sectionActionHandler &&
+                sectionActionHandler({
+                    type: '@CUSTOMSECTION/GROUP_DRAG_STOP',
+                    payload: __assign(__assign({}, props), { outerBasedChildrenPositions: outerBasedChildrenPositions })
+                });
             return;
         }
         var numberId = Number((_a = props.item) === null || _a === void 0 ? void 0 : _a.i);
@@ -172,6 +203,7 @@ function CustomSection(props) {
         if (!isEditMode) {
             return;
         }
+        breakGroupCB();
         setSelectedCB(null);
         sectionActionHandler &&
             sectionActionHandler({
@@ -203,23 +235,41 @@ function CustomSection(props) {
                         paddingBottom: padding.bottom,
                         paddingRight: padding.right,
                         paddingLeft: padding.left
-                    } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: { lg: layouts.lg, sm: layouts.sm }, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
+                    } }, { children: (0, jsx_runtime_1.jsx)(Responsive, __assign({ allowOverlap: true, layouts: layouts, resizeHandles: ['nw', 'e', 'n', 'ne', 's', 'se', 'sw', 'w'], breakpoints: breakpoints, breakpoint: breakpoint, cols: { lg: 24, sm: 8 }, rowHeight: rowHeight, margin: [10, 10], style: {
                             width: customSectionStyles.width,
                             maxWidth: customSectionStyles.maxWidth,
                             minWidth: isMobile ? GLE_MIN_WIDTH_MOBILE_PX : GLE_MIN_WIDTH_DESKTOP_PX,
                             fontSize: "".concat(baseFontSize, "px")
-                        }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: (componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.length) ? (componentBlocks.map(function (each) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === each.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                                    width: '100%',
-                                    height: '100%'
-                                }, onClick: function (e) {
-                                    e.stopPropagation();
-                                    onClickCB(each.id);
-                                }, onContextMenu: function (e) {
-                                    e.stopPropagation();
-                                    onContextMenuCB(each.id, e);
-                                } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: each, device: device }) }) })) }), each.id)); })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) })) })) })) }) }));
+                        }, onLayoutChange: onLayoutChange, onDragStop: onDragStop, onResizeStop: onResizeStop, onWidthChange: onWidthChange, minNbRow: rows, isDraggable: isEditMode, isResizable: isEditMode }, { children: layouts[layoutByDevice].map(function (each) {
+                            var _a;
+                            var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
+                            if (each.i === 'group' && each.groupLayouts) {
+                                return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "iamgroup" }, { children: (0, jsx_runtime_1.jsx)(WidthProvidedRGL, __assign({ cols: each.w, allowOverlap: true, layout: each.groupLayouts, rowHeight: rowHeight, containerPadding: [0, 0], margin: [10, 10], isDraggable: false, isResizable: false, style: {
+                                            width: '100%'
+                                        } }, { children: (_a = each.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (each) {
+                                            var matchedCB = componentBlocks === null || componentBlocks === void 0 ? void 0 : componentBlocks.find(function (cb) { return cb.id.toString() === each.i; });
+                                            if (!matchedCB) {
+                                                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                                            }
+                                            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device }) }) }, matchedCB.id));
+                                        }) })) }), each.i));
+                            }
+                            if (!matchedCB) {
+                                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+                            }
+                            return ((0, jsx_runtime_1.jsx)("div", __assign({ className: selectedCB === matchedCB.id ? 'react-grid-item-selected' : '' }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                                        width: '100%',
+                                        height: '100%'
+                                    }, onClick: function (e) {
+                                        e.stopPropagation();
+                                        onClickCB(matchedCB.id);
+                                    }, onContextMenu: function (e) {
+                                        e.stopPropagation();
+                                        onContextMenuCB(matchedCB.id, e);
+                                    } }, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ComponentBlockMatcher_1.default, { cbProps: matchedCB, device: device }) }) })) }), matchedCB.id));
+                        }) })) })) })) }) }));
 }
-var S_gleStyles = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  * {\n    box-sizing: border-box;\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  .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_gleStyles = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  * {\n    box-sizing: border-box;\n  }\n\n  .iamgroup {\n    box-shadow: 0 0 0 3px #027aff;\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  .iamgroup {\n    box-shadow: 0 0 0 3px #027aff;\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);
 var templateObject_1, templateObject_2;

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js

@@ -19,7 +19,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-console */
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
@@ -78,7 +77,6 @@ function Youtube(props) {
             iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
         }
     }, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, cbAutoplayMode]);
-    console.log(youtubeSrc);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ ref: autoplayRef, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: id, src: youtubeSrc, onLoad: onLoadIframe, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
 }
 function getBGColorStyles(props, device) {

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

@@ -0,0 +1 @@
+export { default as useGroupDrag } from './useGroupDrag';

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGroupDrag = void 0;
+var useGroupDrag_1 = require("./useGroupDrag");
+Object.defineProperty(exports, "useGroupDrag", { enumerable: true, get: function () { return __importDefault(useGroupDrag_1).default; } });

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { LayoutItemWithGroupType } from './utils';
+import type { LayoutsType } from '../../CustomSection';
+import type { Device } from '../../util/types';
+import type { Layout } from 'publ-echo/dist/lib';
+type Props = {
+    device: Device;
+    setLayouts: React.Dispatch<React.SetStateAction<LayoutsType>>;
+};
+declare function useGroupDrag({ device, setLayouts }: Props): {
+    isShiftOn: boolean;
+    setGroupCB: (selectedId: number | 'group', newId: number) => void;
+    breakGroupCB: () => void;
+    getGroupCB: (layout: Layout) => LayoutItemWithGroupType | null;
+};
+export default useGroupDrag;

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

@@ -0,0 +1,76 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var utils_1 = require("./utils");
+function useGroupDrag(_a) {
+    var device = _a.device, setLayouts = _a.setLayouts;
+    var _b = (0, react_1.useState)(false), isShiftOn = _b[0], setIsShiftOn = _b[1];
+    var layoutByDevice = device === 'DESKTOP' ? 'lg' : 'sm';
+    (0, react_1.useEffect)(function () {
+        function onKeyDown(e) {
+            if (e.key === 'Shift') {
+                setIsShiftOn(true);
+            }
+        }
+        function onKeyUp() {
+            setIsShiftOn(false);
+        }
+        document.addEventListener('keydown', onKeyDown);
+        document.addEventListener('keyup', onKeyUp);
+        return function () {
+            document.removeEventListener('keydown', onKeyDown);
+            document.removeEventListener('keyup', onKeyUp);
+        };
+    }, []);
+    function setGroupCB(selectedId, newId) {
+        setLayouts(function (prev) {
+            var currentLayout = prev[layoutByDevice];
+            var firstIdx = currentLayout.findIndex(function (item) { return Number(item.i) === selectedId; });
+            var firstElem = currentLayout.splice(firstIdx, 1)[0];
+            var secondIdx = currentLayout.findIndex(function (item) { return Number(item.i) === newId; });
+            var secondElem = currentLayout.splice(secondIdx, 1)[0];
+            // if (currentLayout) {
+            //   firstElem.childrenIds = currentLayout.childrenIds;
+            //   firstElem.groupLayouts = currentLayout.groupLayouts;
+            // }
+            var group = (0, utils_1.getGroupData)(firstElem, secondElem);
+            currentLayout.push(group);
+            return __assign({}, prev);
+        });
+    }
+    function breakGroupCB() {
+        setLayouts(function (prev) {
+            var _a, _b;
+            var currentLayout = prev[layoutByDevice];
+            var groupIdx = currentLayout.findIndex(function (item) { return item.i === 'group'; });
+            if (groupIdx < 0) {
+                return prev;
+            }
+            var groupItem = currentLayout.splice(groupIdx, 1)[0];
+            var groupItems = (_b = (_a = groupItem === null || groupItem === void 0 ? void 0 : groupItem.groupLayouts) === null || _a === void 0 ? void 0 : _a.map(function (each) { return (__assign(__assign({}, each), { x: groupItem.x + each.x, y: groupItem.y + each.y })); })) !== null && _b !== void 0 ? _b : [];
+            currentLayout.push.apply(currentLayout, groupItems);
+            return __assign({}, prev);
+        });
+    }
+    function getGroupCB(layout) {
+        var groupIdx = layout.findIndex(function (item) { return item.i === 'group'; });
+        if (groupIdx < 0) {
+            return null;
+        }
+        var groupItem = layout[groupIdx];
+        return groupItem;
+    }
+    return { isShiftOn: isShiftOn, setGroupCB: setGroupCB, breakGroupCB: breakGroupCB, getGroupCB: getGroupCB };
+}
+exports.default = useGroupDrag;

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

@@ -0,0 +1,10 @@
+import type { ComponentBlock } from '../../types';
+import type { LayoutItem } from 'publ-echo/dist/lib';
+export interface LayoutItemWithGroupType extends LayoutItem {
+    childrenIds: string[];
+}
+export declare function getGroupData(elem1: LayoutItemWithGroupType, elem2: LayoutItemWithGroupType): LayoutItemWithGroupType;
+export declare function splitComponentBlocksByGroup(componentBlocks: ComponentBlock[], groupIds: string[]): {
+    inGroup: ComponentBlock[];
+    notInGroup: ComponentBlock[];
+};

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

@@ -0,0 +1,86 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitComponentBlocksByGroup = exports.getGroupData = void 0;
+function getGroupData(elem1, elem2) {
+    var minX = Math.min(elem1.x, elem2.x);
+    var minY = Math.min(elem1.y, elem2.y);
+    var elem1W = elem1.x - minX + elem1.w;
+    var elem2W = elem2.x - minX + elem2.w;
+    var elem1H = elem1.y - minY + elem1.h;
+    var elem2H = elem2.y - minY + elem2.h;
+    var maxW = Math.max(elem1W, elem2W);
+    var maxH = Math.max(elem1H, elem2H);
+    var elem1InnerData = {
+        i: elem1.i,
+        x: elem1.x - minX,
+        y: elem1.y - minY,
+        w: elem1.w,
+        h: elem1.h
+    };
+    var elem2InnerData = {
+        i: elem2.i,
+        x: elem2.x - minX,
+        y: elem2.y - minY,
+        w: elem2.w,
+        h: elem2.h
+    };
+    var groupLayouts = elem1.groupLayouts
+        ? getAdaptedGroupLayouts(elem1.groupLayouts, elem2InnerData, elem1, minX, minY)
+        : [elem1InnerData, elem2InnerData];
+    var childrenIds = elem1.groupLayouts ? __spreadArray(__spreadArray([], elem1.childrenIds, true), [elem2.i], false) : [elem1.i, elem2.i];
+    return {
+        i: 'group',
+        x: minX,
+        y: minY,
+        w: maxW,
+        h: maxH,
+        groupLayouts: groupLayouts,
+        childrenIds: childrenIds
+    };
+}
+exports.getGroupData = getGroupData;
+function getAdaptedGroupLayouts(originals, comming, ogWrapper, minX, minY) {
+    var ogs = originals.map(function (og) {
+        var xNagativeGap = Math.max(0, ogWrapper.x - minX);
+        var yNagativeGap = Math.max(0, ogWrapper.y - minY);
+        return __assign(__assign({}, og), { x: og.x + xNagativeGap, y: og.y + yNagativeGap });
+    });
+    return __spreadArray(__spreadArray([], ogs, true), [comming], false);
+}
+function splitComponentBlocksByGroup(componentBlocks, groupIds) {
+    var inGroup = [];
+    var notInGroup = [];
+    componentBlocks.forEach(function (cb) {
+        if (groupIds.includes(cb.id.toString())) {
+            inGroup.push(cb);
+        }
+        else {
+            notInGroup.push(cb);
+        }
+    });
+    return {
+        inGroup: inGroup,
+        notInGroup: notInGroup
+    };
+}
+exports.splitComponentBlocksByGroup = splitComponentBlocksByGroup;

package/dist/src/sub/DynamicLayout/sections/CustomSection/types.d.ts

@@ -9,6 +9,14 @@ type GeneralCustomSectionType = {
     queryableDefinitionPreset: string;
     dynamicLayoutSectionId: number;
 };
+export type GroupCustomSectionType = {
+    id: 'group';
+    type: 'GROUP';
+    availablePlugins: Array<string>;
+    queryableTapSrc: string;
+    queryableDefinitionPreset: string;
+    dynamicLayoutSectionId: number;
+};
 export type AllCBProperties = CB_TEXT_PROPERTIES_TYPE | CB_BTN_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_RICHTEXT_PROPERTIES_TYPE | CB_DIVIDER_PROPERTIES_TYPE | CB_YOUTUBE_PROPERTIES_TYPE | CB_IMG_PROPERTIES_TYPE | CB_TWITTER_PROPERTIES_TYPE;
 export type CB_TEXT_TYPE = GeneralCustomSectionType & {
     componentBlockCode: CB_ALL_CODES.CB_TEXT;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.3.14",
+  "version": "0.3.16",
   "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.25",
+    "publ-echo": "^0.0.27",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",

package/release-note.md

@@ -1,6 +1,7 @@
-# pds-dev-kit-web-test Release Notes
-## [v0.3.14]
-## 기준 pds-dev-kit-web 버전 @2.2.34
+# PDS-DEV-KIT-WEB Release Notes
+## [v0.3.16]
+## 기준 pds-dev-kit-web 버전 @2.2.41
 ### sub
     * DynamicLayout
-      * youtube cb autoplay관련 poc코드 Spec code로 변경
+      * CustomSection의 group 이동 기능 추가
+        * group화/group drag/ group drag stop시 outerBasedPositions payload