pds-dev-kit-web-test 0.0.13 → 0.0.15

package/dist/index.d.ts

@@ -19,3 +19,7 @@ export { LayoutMP, MPNavigationContainer, MPTabContainer, MPContainersBox };
 export { LayoutMS, MSNavigationContainer, MSContainersBox };
 export { M_BasicChatListItem, M_BasicFormGroup, M_BasicList, M_BasicListItem, M_BlogTextField, M_BodyTextGroup, M_Card, M_CardList, M_ChatBubbleListItem, M_ChatList, M_Checkbox, M_Chip, M_ContextMenu, M_ContextMenuItem, M_Dropdown, M_FloatingActionButton, M_HorizontalFormGroup, M_IconButton, M_ImageSlide, M_LottieReactionButton, M_MainButton, M_MobileAlertDialog, M_MobileHeaderBar, M_MobileTabBar, M_Radio, M_ReactionButton, M_Select, M_StatusBlock, M_TextButton, M_TextField, M_TextLabel, M_UploadIconButton, M_UploadMainButton, M_UploadTextButton };
 export { M_AnnotationSheet, M_ContentSheet, M_MobileBasicModal, M_SectionSheet };
+import { DynamicLayout } from './src/sub';
+export { DynamicLayout };
+import { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem } from './src/sub/DynamicLayout/types';
+export { TypeOfSectionManifestSchema, TypeofSectionTemplate, TypeOfSectionContentMediaType, TypeOfSectionLinkType, TypeOfCarouselAutoplayMode, TypeOfCarouselInfiniteLoopMode, TypeOfBackgroundMediaType, TypeOfSectionButtonDesignType, TypeOfItemButtonDesignType, TypeOfItemManifestSchema, TypeOfItemLinkMethod, TypeOfItemLinkType, ISection, ISectionProperties, ISectionStyles, IItem };

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.D_DesktopAlertDialog = exports.D_ContextMenuItem = exports.D_ContextMenu = exports.D_Chip = exports.D_Checkbox = exports.D_ChatList = exports.D_ChatBubbleListItem = exports.D_CardList = exports.D_Card = exports.D_BodyTextGroup = exports.D_BlogTextField = exports.D_BasicListItem = exports.D_BasicList = exports.D_BasicFormGroup = exports.D_BasicChatListItem = exports.D_AdminListItem = exports.D_AdminListHeader = exports.D_AdminList = exports.WTContainersBox = exports.WTGlobalMenuContainer = exports.LayoutWT = exports.WSContainersBox = exports.WSGlobalMenuContainer = exports.LayoutWS = exports.WHContainersBox = exports.LayoutWH = exports.WFContainersBox = exports.LayoutWF = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = exports.Form = exports.theme = exports.customTheme = exports.uiColors = exports.spacing = exports.boxShadow = exports.mobileEditorLineHeight = exports.mobileEditorFontSize = exports.mobileLineHeight = exports.mobileFontSize = exports.desktopEditorLineHeight = exports.desktopEditorFontSize = exports.desktopLineHeight = exports.desktopFontSize = exports.fontWeight = void 0;
 exports.M_BlogTextField = exports.M_BasicListItem = exports.M_BasicList = exports.M_BasicFormGroup = exports.M_BasicChatListItem = exports.MSContainersBox = exports.MSNavigationContainer = exports.LayoutMS = exports.MPContainersBox = exports.MPTabContainer = exports.MPNavigationContainer = exports.LayoutMP = exports.MMContainersBox = exports.MMNavigationContainer = exports.LayoutMM = exports.MFContainersBox = exports.LayoutMF = exports.D_SectionSheet = exports.D_DesktopHeadlessModal = exports.D_DesktopBasicModal = exports.D_ContentSheet = exports.D_AnnotationSheet = exports.D_UserDesktopSideTab = exports.D_UserDesktopTabBar = exports.D_UserDesktopNavBar = exports.D_UploadTextButton = exports.D_UploadMainButton = exports.D_UploadIconButton = exports.D_TextLabel = exports.D_TextField = exports.D_TextButton = exports.D_StatusBlock = exports.D_Select = exports.D_ReactionButton = exports.D_Radio = exports.D_PageTitleTextGroup = exports.D_MainButton = exports.D_LottieReactionButton = exports.D_ImageSlide = exports.D_IconButton = exports.D_HorizontalFormGroup = exports.D_Hero = exports.D_FloatingActionButton = exports.D_FilterBar = exports.D_EditApplyTextField = exports.D_DynamicDesktopNavBarTemplates = exports.D_DynamicDesktopNavBar = exports.D_Dropdown = exports.D_DesktopTabBar = exports.D_DesktopHeaderBar = void 0;
-exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = void 0;
+exports.DynamicLayout = exports.M_SectionSheet = exports.M_MobileBasicModal = exports.M_ContentSheet = exports.M_AnnotationSheet = exports.M_UploadTextButton = exports.M_UploadMainButton = exports.M_UploadIconButton = exports.M_TextLabel = exports.M_TextField = exports.M_TextButton = exports.M_StatusBlock = exports.M_Select = exports.M_ReactionButton = exports.M_Radio = exports.M_MobileTabBar = exports.M_MobileHeaderBar = exports.M_MobileAlertDialog = exports.M_MainButton = exports.M_LottieReactionButton = exports.M_ImageSlide = exports.M_IconButton = exports.M_HorizontalFormGroup = exports.M_FloatingActionButton = exports.M_Dropdown = exports.M_ContextMenuItem = exports.M_ContextMenu = exports.M_Chip = exports.M_Checkbox = exports.M_ChatList = exports.M_ChatBubbleListItem = exports.M_CardList = exports.M_Card = exports.M_BodyTextGroup = void 0;
 /* eslint-disable import/order */
 /* eslint-disable import/first */
 // common
@@ -146,3 +146,7 @@ Object.defineProperty(exports, "M_AnnotationSheet", { enumerable: true, get: fun
 Object.defineProperty(exports, "M_ContentSheet", { enumerable: true, get: function () { return mobile_1.M_ContentSheet; } });
 Object.defineProperty(exports, "M_MobileBasicModal", { enumerable: true, get: function () { return mobile_1.M_MobileBasicModal; } });
 Object.defineProperty(exports, "M_SectionSheet", { enumerable: true, get: function () { return mobile_1.M_SectionSheet; } });
+// sub
+// dynamicLayout
+var sub_1 = require("./src/sub");
+Object.defineProperty(exports, "DynamicLayout", { enumerable: true, get: function () { return sub_1.DynamicLayout; } });

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/MenuItemNav.js

@@ -43,6 +43,7 @@ var hybrid_1 = require("../../../../../hybrid");
 var ContextMenuNavs_1 = require("../ContextMenuNavs");
 var DisplayOnlyMenuItemNav_1 = __importDefault(require("./components/DisplayOnlyMenuItemNav"));
 var InternalLinkMenuItemNav_1 = __importDefault(require("./components/InternalLinkMenuItemNav"));
+var PageMenuItemNav_1 = __importDefault(require("./components/PageMenuItemNav"));
 var PAppMenuItemNav_1 = __importDefault(require("./components/PAppMenuItemNav"));
 var WebMenuItemNav_1 = __importDefault(require("./components/WebMenuItemNav"));
 // NOTE: 서버에서 itemType으로 enum값이 잘 오면 아래 불필요한 케이스/default 간소화
@@ -61,6 +62,7 @@ function MenuItemNav(_a) {
             menu.menuItemType === 'NAV_P_APP' && menu.pAppCode && (react_1.default.createElement(PAppMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { pAppCode: menu.pAppCode }), showMenuAsIcon: showMenuAsIcon })),
             menu.menuItemType === 'WEB_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(WebMenuItemNav_1.default, { openNewTab: true, menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
             menu.menuItemType === 'INTERNAL_LINK' && menu.conversionLinkSrc && (react_1.default.createElement(InternalLinkMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: menu.conversionLinkSrc }), showMenuAsIcon: showMenuAsIcon })),
+            menu.menuItemType === 'NAV_PAGE' && menu.slug && (react_1.default.createElement(PageMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { slug: menu.slug }), showMenuAsIcon: showMenuAsIcon })),
             menu.menuItemType === 'DISPLAY_ONLY' && (react_1.default.createElement(DisplayOnlyMenuItemNav_1.default, { menu: __assign(__assign({}, menu), { conversionLinkSrc: '' }), showMenuAsIcon: showMenuAsIcon })),
             isContextOpen && menu.parsedNodes.length > 0 && (react_1.default.createElement(ContextMenuNavs_1.ContextMenuNavs, { parentRef: ref }, menu.parsedNodes.map(function (nav, index) { return (react_1.default.createElement(ContextMenuNavs_1.ContextMenuItemNav, { key: index, menu: nav })); })))),
         showMenuAsIcon ? (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_b" })) : (react_1.default.createElement(hybrid_1.Spacing, { spacingType: "width", size: "spacing_f" }))));

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParsedNode } from '../../../types';
+declare type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+declare type Props = {
+    menu: WithRequired<ParsedNode, 'slug'>;
+    showMenuAsIcon?: boolean;
+    isContextMenu?: boolean;
+};
+declare function PageMenuItemNav({ menu, showMenuAsIcon, isContextMenu }: Props): JSX.Element;
+export default PageMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/components/MenuItemNav/components/PageMenuItemNav.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var Navigations_1 = require("../../../../../../common/components/Navigations");
+var DynamicDesktopNavBar_1 = require("../../../DynamicDesktopNavBar");
+var IconNav_1 = __importDefault(require("../../IconNav"));
+var ImageIconNav_1 = __importDefault(require("../../ImageIconNav"));
+function PageMenuItemNav(_a) {
+    var menu = _a.menu, showMenuAsIcon = _a.showMenuAsIcon, _b = _a.isContextMenu, isContextMenu = _b === void 0 ? false : _b;
+    var _c = (0, react_1.useContext)(DynamicDesktopNavBar_1.BasePathContext), basePath = _c.basePath, activeMode = _c.activeMode;
+    var activeMatch = (0, react_router_dom_1.useRouteMatch)(basePath + "/pages/:activeKey");
+    var isActive = (0, react_1.useMemo)(function () {
+        if (activeMode === 'BY_CLICK') {
+            return false;
+        }
+        return (activeMatch === null || activeMatch === void 0 ? void 0 : activeMatch.params.activeKey) === menu.slug;
+    }, [activeMode, menu, activeMatch]);
+    if (showMenuAsIcon) {
+        if (menu.iconSrc) {
+            return (react_1.default.createElement(ImageIconNav_1.default, { to: basePath + "/pages/" + menu.slug, iconSrc: menu.iconSrc, openNewTab: false }));
+        }
+        if (menu.iconName) {
+            return (react_1.default.createElement(IconNav_1.default, { to: basePath + "/pages/" + menu.slug, iconName: menu.iconName, openNewTab: false }));
+        }
+    }
+    return isContextMenu ? (react_1.default.createElement(Navigations_1.ContextTextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name })) : (react_1.default.createElement(Navigations_1.TextLabelNav, { isActive: isActive, preventLineChange: true, openNewTab: false, to: basePath + "/pages/" + menu.slug, text: menu.name }));
+}
+exports.default = PageMenuItemNav;

package/dist/src/desktop/components/DynamicDesktopNavBar/types.d.ts

@@ -8,7 +8,8 @@ export declare type ParsedNode = {
     iconName?: PDSIconType;
     visibilityLevel: string;
     pAppCode?: string;
+    slug?: string;
     conversionLinkSrc?: string;
     parsedNodes: Array<ParsedNode>;
 };
-export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY';
+export declare type menuItemTypes = 'NAV_P_APP' | 'WEB_LINK' | 'INTERNAL_LINK' | 'DISPLAY_ONLY' | 'NAV_PAGE';

package/dist/src/sub/DynamicLayout/desktop/components/Item/Item.js

@@ -234,7 +234,7 @@ var S_Content = styled_components_1.default.div(templateObject_6 || (templateObj
         }[colorTheme];
 }, function (_a) {
     var color = _a.color;
-    return color && "color: " + color;
+    return color && "color: " + color + ";";
 }, function (_a) {
     var textAlign = _a.textAlign;
     return textAlign;

package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.d.ts

@@ -6,7 +6,9 @@ declare function Section({ children, ...props }: ISection & {
     children?: React.ReactNode;
 }): JSX.Element;
 declare namespace Section {
-    var Title: ({ text, color, ...textLabelProps }: ISectionTitle & TextLabelProps) => JSX.Element;
+    var Title: ({ text, color, lineHeight, ...textLabelProps }: ISectionTitle & TextLabelProps & {
+        lineHeight?: number | undefined;
+    }) => JSX.Element;
     var Description: ({ text, color, ...textLabelProps }: ISectionDescription & TextLabelProps) => JSX.Element;
     var Image: ({ ...imageViewProps }: ImageViewProps) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, state, borderColor }: ISectionButton) => JSX.Element;

package/dist/src/sub/DynamicLayout/desktop/components/Section/Section.js

@@ -61,7 +61,7 @@ function Section(_a) {
     return (react_1.default.createElement(sectionContext.Provider, { value: props },
         react_1.default.createElement(S_MarginCollapsingBoundary, null,
             react_1.default.createElement(S_Section, null,
-                props.styles.backgroundMediaType && react_1.default.createElement(Background, null),
+                react_1.default.createElement(Background, null),
                 children))));
 }
 var S_MarginCollapsingBoundary = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
@@ -109,7 +109,7 @@ function Background() {
             window.removeEventListener('resize', onResize);
         };
     }, []);
-    var background = (0, react_1.useMemo)(function () {
+    var backgroundMedia = (0, react_1.useMemo)(function () {
         switch (backgroundMediaType) {
             case 'IMAGE':
                 return (react_1.default.createElement(hybrid_1.ImageView, { src: backgroundMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }));
@@ -117,13 +117,14 @@ function Background() {
             //   // NOTE VIDEO타입 배경은 최초 scope에서 제외
             //   return <></>;
             case 'YOUTUBE':
-                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize), backgroundMediaSrc && react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
+                return (react_1.default.createElement(S_YoutubeContainer, __assign({}, youtubeSize),
+                    react_1.default.createElement(YouTubeIframe_1.default, { id: id, src: backgroundMediaSrc })));
             default:
                 return react_1.default.createElement(react_1.default.Fragment, null);
         }
     }, [youtubeSize]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && background),
+        react_1.default.createElement(S_BackgroundWrapper, { ref: backgroundRef, color: backgroundColorInHex }, backgroundMediaSrc && backgroundMedia),
         react_1.default.createElement(S_BackgroundOverlay, { color: backgroundOverlayColorInHex })));
 }
 var S_BackgroundWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"], ["\n  z-index: -2;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n"])), function (_a) {
@@ -143,13 +144,16 @@ var S_YoutubeContainer = styled_components_1.default.div(templateObject_5 || (te
 });
 // TITLE
 function Title(_a) {
-    var text = _a.text, color = _a.color, textLabelProps = __rest(_a, ["text", "color"]);
-    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color },
+    var text = _a.text, color = _a.color, _b = _a.lineHeight, lineHeight = _b === void 0 ? 1.3 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
         react_1.default.createElement(desktop_1.D_TextLabel, __assign({ text: text, colorTheme: "sysTextPrimary" }, textLabelProps))));
 }
-var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n  }\n"])), function (_a) {
+var S_TitleStyleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"], ["\n  & > div {\n    color: ", ";\n    line-height: ", ";\n  }\n"])), function (_a) {
     var color = _a.color;
     return color;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
 });
 // DESCRIPTION
 function Description(_a) {

package/dist/src/sub/DynamicLayout/desktop/components/common/Carousel.js

@@ -31,31 +31,76 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var swiper_1 = require("swiper");
 var react_2 = require("swiper/react");
 var desktop_1 = require("../../../../../desktop");
+var swiper_style_1 = __importDefault(require("./swiper.style"));
 function Carousel(_a) {
-    var children = _a.children, spaceBetween = _a.spaceBetween, slidesPerView = _a.slidesPerView, slidesPerGroup = _a.slidesPerGroup, breakpoints = _a.breakpoints, _b = _a.mode, mode = _b === void 0 ? 'normal' : _b, _c = _a.autoplayDelay, autoplayDelay = _c === void 0 ? 3000 : _c, buttonSpacing = _a.buttonSpacing;
+    var children = _a.children, spaceBetween = _a.spaceBetween, slidesPerView = _a.slidesPerView, slidesPerGroup = _a.slidesPerGroup, breakpoints = _a.breakpoints, _b = _a.mode, mode = _b === void 0 ? 'normal' : _b, _c = _a.autoplayDelay, autoplayDelay = _c === void 0 ? 3 : _c, buttonSpacing = _a.buttonSpacing;
     var swiperRef = (0, react_1.useRef)(null);
     var _d = (0, react_1.useState)(true), isBeginning = _d[0], setIsBeginning = _d[1];
     var _e = (0, react_1.useState)(true), isEnd = _e[0], setIsEnd = _e[1];
     var _f = (0, react_1.useState)(true), isLocked = _f[0], setIsLocked = _f[1];
+    var _g = (0, react_1.useState)(mode), targetMode = _g[0], setTargetMode = _g[1];
+    /**
+     * @when : 캐러셀이 처음 화면에 렌더링될 때
+     * @expected
+     * 캐러셀의 아이템 수가 slidesPerView보다 적다면,
+     * prev / next 버튼을 숨기고 mode를 normal로 강제합니다.
+     * 그렇지 않다면, 사용자가 설정한 mode를 사용합니다.
+     * @clear : -
+     */
+    (0, react_1.useEffect)(function () {
+        if (react_1.default.Children.count(children) <= slidesPerView) {
+            setTargetMode('normal');
+            return;
+        }
+        setTargetMode(mode);
+    }, [slidesPerView, mode]);
     return (react_1.default.createElement(S_Carousel, null,
         react_1.default.createElement(S_SwiperStyleWrapper, null,
-            react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Navigation, swiper_1.Autoplay], centerInsufficientSlides: true, spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerGroup, breakpoints: breakpoints, loop: mode === 'loop' || mode === 'autoplay', autoplay: mode === 'autoplay' ? { delay: autoplayDelay, disableOnInteraction: false } : undefined, onSwiper: function (swiper) {
+            react_1.default.createElement(react_2.Swiper, { modules: [swiper_1.Navigation, swiper_1.Autoplay], centerInsufficientSlides: true, spaceBetween: spaceBetween, slidesPerView: slidesPerView, slidesPerGroup: slidesPerGroup, breakpoints: breakpoints, loop: targetMode === 'loop' || targetMode === 'autoplay', autoplay: targetMode === 'autoplay'
+                    ? { delay: autoplayDelay * 1000, disableOnInteraction: false }
+                    : undefined, onSwiper: function (swiper) {
                     swiperRef.current = swiper;
                     setIsBeginning(swiper.isBeginning);
                     setIsEnd(swiper.isEnd);
                 }, onSlideChange: function (swiper) {
-                    setIsBeginning(swiper.isBeginning);
-                    setIsEnd(swiper.isEnd);
+                    if (swiper.params.loop) {
+                        setIsBeginning(false);
+                        setIsEnd(false);
+                    }
+                    else {
+                        setIsBeginning(swiper.isBeginning);
+                        setIsEnd(swiper.isEnd);
+                    }
                 }, onToEdge: function (swiper) {
-                    setIsBeginning(swiper.isBeginning);
-                    setIsEnd(swiper.isEnd);
+                    if (swiper.params.loop) {
+                        setIsBeginning(false);
+                        setIsEnd(false);
+                    }
+                    else {
+                        setIsBeginning(swiper.isBeginning);
+                        setIsEnd(swiper.isEnd);
+                    }
                 }, onLock: function () {
                     setIsLocked(true);
                 }, onUnlock: function () {
                     setIsLocked(false);
                 }, onResize: function (swiper) {
-                    setIsBeginning(swiper.isBeginning);
-                    setIsEnd(swiper.isEnd);
+                    if (swiper.params.loop) {
+                        setIsBeginning(false);
+                        setIsEnd(false);
+                    }
+                    else {
+                        setIsBeginning(swiper.isBeginning);
+                        setIsEnd(swiper.isEnd);
+                    }
+                }, onBreakpoint: function (swiper) {
+                    if (typeof swiper.params.slidesPerView === 'number') {
+                        if (react_1.default.Children.count(children) <= swiper.params.slidesPerView) {
+                            setTargetMode('normal');
+                            return;
+                        }
+                        setTargetMode(mode);
+                    }
                 } }, react_1.default.Children.map(children, function (child) {
                 return react_1.default.createElement(react_2.SwiperSlide, null, child);
             }))),
@@ -91,6 +136,6 @@ var S_ButtonWrapper = styled_components_1.default.div(templateObject_2 || (templ
     var right = _a.right;
     return right && "right : " + right + "; transform : translateX(100%);";
 });
-var S_SwiperStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /** NOTE: Swiper\uAC00 \uC81C\uACF5\uD558\uB294 css \uD30C\uC77C\uC744 webpack \uC774\uC288\uB85C import\uD558\uC9C0 \uBABB\uD574\uC11C \uC784\uC2DC\uB85C \uB9CC\uB4E0 css wrapper\uC785\uB2C8\uB2E4.\n  * \uCC28\uD6C4 Webpack 5\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uB418\uB294 \uACBD\uC6B0 swiper \uD648\uD398\uC774\uC9C0\uC5D0\uC11C \uCD94\uCC9C\uD558\uB294 \uC0AC\uC6A9\uBC95\uC73C\uB85C \uC218\uC815\uC774 \uD544\uC694\uD569\uB2C8\uB2E4.\n  */\n\n  @font-face {\n    font-family: swiper-icons;\n    src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  :root {\n    --swiper-theme-color: #007aff;\n  }\n\n  .swiper {\n    margin-left: auto;\n    margin-right: auto;\n    position: relative;\n    overflow: hidden;\n    list-style: none;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .swiper-vertical > .swiper-wrapper {\n    flex-direction: column;\n  }\n\n  .swiper-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    display: flex;\n    transition-property: transform;\n    box-sizing: content-box;\n  }\n\n  .swiper-android .swiper-slide,\n  .swiper-wrapper {\n    transform: translate3d(0px, 0, 0);\n  }\n\n  .swiper-pointer-events {\n    touch-action: pan-y;\n  }\n\n  .swiper-pointer-events.swiper-vertical {\n    touch-action: pan-x;\n  }\n\n  .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n  }\n\n  .swiper-slide-invisible-blank {\n    visibility: hidden;\n  }\n\n  .swiper-autoheight,\n  .swiper-autoheight .swiper-slide {\n    height: auto;\n  }\n\n  .swiper-autoheight .swiper-wrapper {\n    align-items: flex-start;\n    transition-property: transform, height;\n  }\n\n  .swiper-backface-hidden .swiper-slide {\n    transform: translateZ(0);\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-3d,\n  .swiper-3d.swiper-css-mode .swiper-wrapper {\n    perspective: 1200px;\n  }\n\n  .swiper-3d .swiper-cube-shadow,\n  .swiper-3d .swiper-slide,\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top,\n  .swiper-3d .swiper-wrapper {\n    transform-style: preserve-3d;\n  }\n\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 10;\n  }\n\n  .swiper-3d .swiper-slide-shadow {\n    background: rgba(0, 0, 0, 0.15);\n  }\n\n  .swiper-3d .swiper-slide-shadow-left {\n    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-right {\n    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-top {\n    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-bottom {\n    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-css-mode > .swiper-wrapper {\n    overflow: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: start start;\n  }\n\n  .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: x mandatory;\n  }\n\n  .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: y mandatory;\n  }\n\n  .swiper-centered > .swiper-wrapper::before {\n    content: '';\n    flex-shrink: 0;\n    order: 9999;\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n    margin-inline-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n    height: 100%;\n    min-height: 1px;\n    width: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n    margin-block-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n    width: 100%;\n    min-width: 1px;\n    height: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: center center;\n  }\n\n  .swiper-virtual .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    transform: translateZ(0);\n  }\n\n  .swiper-virtual.swiper-css-mode .swiper-wrapper::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {\n    height: 1px;\n    width: var(--swiper-virtual-size);\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {\n    width: 1px;\n    height: var(--swiper-virtual-size);\n  }\n\n  :root {\n    --swiper-navigation-size: 44px;\n  }\n\n  .swiper-button-next,\n  .swiper-button-prev {\n    position: absolute;\n    top: 50%;\n    width: calc(var(--swiper-navigation-size) / 44 * 27);\n    height: var(--swiper-navigation-size);\n    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n    z-index: 10;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--swiper-navigation-color, var(--swiper-theme-color));\n  }\n\n  .swiper-button-next.swiper-button-disabled,\n  .swiper-button-prev.swiper-button-disabled {\n    opacity: 0.35;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-button-next.swiper-button-hidden,\n  .swiper-button-prev.swiper-button-hidden {\n    opacity: 0;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-navigation-disabled .swiper-button-next,\n  .swiper-navigation-disabled .swiper-button-prev {\n    display: none !important;\n  }\n\n  .swiper-button-next:after,\n  .swiper-button-prev:after {\n    font-family: swiper-icons;\n    font-size: var(--swiper-navigation-size);\n    text-transform: none !important;\n    letter-spacing: 0;\n    font-variant: initial;\n    line-height: 1;\n  }\n\n  .swiper-button-prev,\n  .swiper-rtl .swiper-button-next {\n    left: 10px;\n    right: auto;\n  }\n\n  .swiper-button-prev:after,\n  .swiper-rtl .swiper-button-next:after {\n    content: 'prev';\n  }\n\n  .swiper-button-next,\n  .swiper-rtl .swiper-button-prev {\n    right: 10px;\n    left: auto;\n  }\n\n  .swiper-button-next:after,\n  .swiper-rtl .swiper-button-prev:after {\n    content: 'next';\n  }\n\n  .swiper-button-lock {\n    display: none;\n  }\n\n  .swiper-pagination {\n    position: absolute;\n    text-align: center;\n    transition: 0.3s opacity;\n    transform: translate3d(0, 0, 0);\n    z-index: 10;\n  }\n\n  .swiper-pagination.swiper-pagination-hidden {\n    opacity: 0;\n  }\n\n  .swiper-pagination-disabled > .swiper-pagination,\n  .swiper-pagination.swiper-pagination-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets,\n  .swiper-pagination-bullets.swiper-pagination-horizontal,\n  .swiper-pagination-custom,\n  .swiper-pagination-fraction {\n    bottom: 10px;\n    left: 0;\n    width: 100%;\n  }\n\n  .swiper-pagination-bullets-dynamic {\n    overflow: hidden;\n    font-size: 0;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transform: scale(0.33);\n    position: relative;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullet {\n    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));\n    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));\n    display: inline-block;\n    border-radius: 50%;\n    background: var(--swiper-pagination-bullet-inactive-color, #000);\n    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);\n  }\n\n  button.swiper-pagination-bullet {\n    border: none;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .swiper-pagination-clickable .swiper-pagination-bullet {\n    cursor: pointer;\n  }\n\n  .swiper-pagination-bullet:only-child {\n    display: none !important;\n  }\n\n  .swiper-pagination-bullet-active {\n    opacity: var(--swiper-pagination-bullet-opacity, 1);\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets,\n  .swiper-vertical > .swiper-pagination-bullets {\n    right: 10px;\n    top: 50%;\n    transform: translate3d(0px, -50%, 0);\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;\n    display: block;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    top: 50%;\n    transform: translateY(-50%);\n    width: 8px;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-vertical\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    display: inline-block;\n    transition: 0.2s transform, 0.2s top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    left: 50%;\n    transform: translateX(-50%);\n    white-space: nowrap;\n  }\n\n  .swiper-horizontal\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s left;\n  }\n\n  .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s right;\n  }\n\n  .swiper-pagination-progressbar {\n    background: rgba(0, 0, 0, 0.25);\n    position: absolute;\n  }\n\n  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    transform: scale(0);\n    transform-origin: left top;\n  }\n\n  .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    transform-origin: right top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal,\n  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,\n  .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {\n    width: 100%;\n    height: 4px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-vertical,\n  .swiper-vertical > .swiper-pagination-progressbar {\n    width: 4px;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-pagination-lock {\n    display: none;\n  }\n\n  .swiper-scrollbar {\n    border-radius: 10px;\n    position: relative;\n    -ms-touch-action: none;\n    background: rgba(0, 0, 0, 0.1);\n  }\n\n  .swiper-scrollbar-disabled > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-horizontal {\n    position: absolute;\n    left: 1%;\n    bottom: 3px;\n    z-index: 50;\n    height: 5px;\n    width: 98%;\n  }\n\n  .swiper-scrollbar.swiper-scrollbar-vertical,\n  .swiper-vertical > .swiper-scrollbar {\n    position: absolute;\n    right: 3px;\n    top: 1%;\n    z-index: 50;\n    width: 5px;\n    height: 98%;\n  }\n\n  .swiper-scrollbar-drag {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: 10px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-scrollbar-cursor-drag {\n    cursor: move;\n  }\n\n  .swiper-scrollbar-lock {\n    display: none;\n  }\n\n  .swiper-zoom-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .swiper-zoom-container > canvas,\n  .swiper-zoom-container > img,\n  .swiper-zoom-container > svg {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n  }\n\n  .swiper-slide-zoomed {\n    cursor: move;\n  }\n\n  .swiper-lazy-preloader {\n    width: 42px;\n    height: 42px;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    margin-left: -21px;\n    margin-top: -21px;\n    z-index: 10;\n    transform-origin: 50%;\n    box-sizing: border-box;\n    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n    border-radius: 50%;\n    border-top-color: transparent;\n  }\n\n  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,\n  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {\n    animation: swiper-preloader-spin 1s infinite linear;\n  }\n\n  .swiper-lazy-preloader-white {\n    --swiper-preloader-color: #fff;\n  }\n\n  .swiper-lazy-preloader-black {\n    --swiper-preloader-color: #000;\n  }\n\n  @keyframes swiper-preloader-spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .swiper .swiper-notification {\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n    opacity: 0;\n    z-index: -1000;\n  }\n\n  .swiper-free-mode > .swiper-wrapper {\n    transition-timing-function: ease-out;\n    margin: 0 auto;\n  }\n\n  .swiper-grid > .swiper-wrapper {\n    flex-wrap: wrap;\n  }\n\n  .swiper-grid-column > .swiper-wrapper {\n    flex-wrap: wrap;\n    flex-direction: column;\n  }\n\n  .swiper-fade.swiper-free-mode .swiper-slide {\n    transition-timing-function: ease-out;\n  }\n\n  .swiper-fade .swiper-slide {\n    pointer-events: none;\n    transition-property: opacity;\n  }\n\n  .swiper-fade .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-fade .swiper-slide-active,\n  .swiper-fade .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube {\n    overflow: visible;\n  }\n\n  .swiper-cube .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n    visibility: hidden;\n    transform-origin: 0 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .swiper-cube .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-cube.swiper-rtl .swiper-slide {\n    transform-origin: 100% 0;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-next,\n  .swiper-cube .swiper-slide-next + .swiper-slide,\n  .swiper-cube .swiper-slide-prev {\n    pointer-events: auto;\n    visibility: visible;\n  }\n\n  .swiper-cube .swiper-slide-shadow-bottom,\n  .swiper-cube .swiper-slide-shadow-left,\n  .swiper-cube .swiper-slide-shadow-right,\n  .swiper-cube .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-cube .swiper-cube-shadow {\n    position: absolute;\n    left: 0;\n    bottom: 0px;\n    width: 100%;\n    height: 100%;\n    opacity: 0.6;\n    z-index: 0;\n  }\n\n  .swiper-cube .swiper-cube-shadow:before {\n    content: '';\n    background: #000;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    filter: blur(50px);\n  }\n\n  .swiper-flip {\n    overflow: visible;\n  }\n\n  .swiper-flip .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n  }\n\n  .swiper-flip .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-flip .swiper-slide-active,\n  .swiper-flip .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-flip .swiper-slide-shadow-bottom,\n  .swiper-flip .swiper-slide-shadow-left,\n  .swiper-flip .swiper-slide-shadow-right,\n  .swiper-flip .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-creative .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n    transition-property: transform, opacity, height;\n  }\n\n  .swiper-cards {\n    overflow: visible;\n  }\n\n  .swiper-cards .swiper-slide {\n    transform-origin: center bottom;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n  }\n"], ["\n  /** NOTE: Swiper\uAC00 \uC81C\uACF5\uD558\uB294 css \uD30C\uC77C\uC744 webpack \uC774\uC288\uB85C import\uD558\uC9C0 \uBABB\uD574\uC11C \uC784\uC2DC\uB85C \uB9CC\uB4E0 css wrapper\uC785\uB2C8\uB2E4.\n  * \uCC28\uD6C4 Webpack 5\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uB418\uB294 \uACBD\uC6B0 swiper \uD648\uD398\uC774\uC9C0\uC5D0\uC11C \uCD94\uCC9C\uD558\uB294 \uC0AC\uC6A9\uBC95\uC73C\uB85C \uC218\uC815\uC774 \uD544\uC694\uD569\uB2C8\uB2E4.\n  */\n\n  @font-face {\n    font-family: swiper-icons;\n    src: url('data:application/font-woff;charset=utf-8;base64, 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');\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  :root {\n    --swiper-theme-color: #007aff;\n  }\n\n  .swiper {\n    margin-left: auto;\n    margin-right: auto;\n    position: relative;\n    overflow: hidden;\n    list-style: none;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .swiper-vertical > .swiper-wrapper {\n    flex-direction: column;\n  }\n\n  .swiper-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    display: flex;\n    transition-property: transform;\n    box-sizing: content-box;\n  }\n\n  .swiper-android .swiper-slide,\n  .swiper-wrapper {\n    transform: translate3d(0px, 0, 0);\n  }\n\n  .swiper-pointer-events {\n    touch-action: pan-y;\n  }\n\n  .swiper-pointer-events.swiper-vertical {\n    touch-action: pan-x;\n  }\n\n  .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n  }\n\n  .swiper-slide-invisible-blank {\n    visibility: hidden;\n  }\n\n  .swiper-autoheight,\n  .swiper-autoheight .swiper-slide {\n    height: auto;\n  }\n\n  .swiper-autoheight .swiper-wrapper {\n    align-items: flex-start;\n    transition-property: transform, height;\n  }\n\n  .swiper-backface-hidden .swiper-slide {\n    transform: translateZ(0);\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-3d,\n  .swiper-3d.swiper-css-mode .swiper-wrapper {\n    perspective: 1200px;\n  }\n\n  .swiper-3d .swiper-cube-shadow,\n  .swiper-3d .swiper-slide,\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top,\n  .swiper-3d .swiper-wrapper {\n    transform-style: preserve-3d;\n  }\n\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 10;\n  }\n\n  .swiper-3d .swiper-slide-shadow {\n    background: rgba(0, 0, 0, 0.15);\n  }\n\n  .swiper-3d .swiper-slide-shadow-left {\n    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-right {\n    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-top {\n    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-bottom {\n    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-css-mode > .swiper-wrapper {\n    overflow: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: start start;\n  }\n\n  .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: x mandatory;\n  }\n\n  .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: y mandatory;\n  }\n\n  .swiper-centered > .swiper-wrapper::before {\n    content: '';\n    flex-shrink: 0;\n    order: 9999;\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n    margin-inline-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n    height: 100%;\n    min-height: 1px;\n    width: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n    margin-block-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n    width: 100%;\n    min-width: 1px;\n    height: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: center center;\n  }\n\n  .swiper-virtual .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    transform: translateZ(0);\n  }\n\n  .swiper-virtual.swiper-css-mode .swiper-wrapper::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {\n    height: 1px;\n    width: var(--swiper-virtual-size);\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {\n    width: 1px;\n    height: var(--swiper-virtual-size);\n  }\n\n  :root {\n    --swiper-navigation-size: 44px;\n  }\n\n  .swiper-button-next,\n  .swiper-button-prev {\n    position: absolute;\n    top: 50%;\n    width: calc(var(--swiper-navigation-size) / 44 * 27);\n    height: var(--swiper-navigation-size);\n    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n    z-index: 10;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--swiper-navigation-color, var(--swiper-theme-color));\n  }\n\n  .swiper-button-next.swiper-button-disabled,\n  .swiper-button-prev.swiper-button-disabled {\n    opacity: 0.35;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-button-next.swiper-button-hidden,\n  .swiper-button-prev.swiper-button-hidden {\n    opacity: 0;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-navigation-disabled .swiper-button-next,\n  .swiper-navigation-disabled .swiper-button-prev {\n    display: none !important;\n  }\n\n  .swiper-button-next:after,\n  .swiper-button-prev:after {\n    font-family: swiper-icons;\n    font-size: var(--swiper-navigation-size);\n    text-transform: none !important;\n    letter-spacing: 0;\n    font-variant: initial;\n    line-height: 1;\n  }\n\n  .swiper-button-prev,\n  .swiper-rtl .swiper-button-next {\n    left: 10px;\n    right: auto;\n  }\n\n  .swiper-button-prev:after,\n  .swiper-rtl .swiper-button-next:after {\n    content: 'prev';\n  }\n\n  .swiper-button-next,\n  .swiper-rtl .swiper-button-prev {\n    right: 10px;\n    left: auto;\n  }\n\n  .swiper-button-next:after,\n  .swiper-rtl .swiper-button-prev:after {\n    content: 'next';\n  }\n\n  .swiper-button-lock {\n    display: none;\n  }\n\n  .swiper-pagination {\n    position: absolute;\n    text-align: center;\n    transition: 0.3s opacity;\n    transform: translate3d(0, 0, 0);\n    z-index: 10;\n  }\n\n  .swiper-pagination.swiper-pagination-hidden {\n    opacity: 0;\n  }\n\n  .swiper-pagination-disabled > .swiper-pagination,\n  .swiper-pagination.swiper-pagination-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets,\n  .swiper-pagination-bullets.swiper-pagination-horizontal,\n  .swiper-pagination-custom,\n  .swiper-pagination-fraction {\n    bottom: 10px;\n    left: 0;\n    width: 100%;\n  }\n\n  .swiper-pagination-bullets-dynamic {\n    overflow: hidden;\n    font-size: 0;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transform: scale(0.33);\n    position: relative;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullet {\n    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));\n    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));\n    display: inline-block;\n    border-radius: 50%;\n    background: var(--swiper-pagination-bullet-inactive-color, #000);\n    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);\n  }\n\n  button.swiper-pagination-bullet {\n    border: none;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .swiper-pagination-clickable .swiper-pagination-bullet {\n    cursor: pointer;\n  }\n\n  .swiper-pagination-bullet:only-child {\n    display: none !important;\n  }\n\n  .swiper-pagination-bullet-active {\n    opacity: var(--swiper-pagination-bullet-opacity, 1);\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets,\n  .swiper-vertical > .swiper-pagination-bullets {\n    right: 10px;\n    top: 50%;\n    transform: translate3d(0px, -50%, 0);\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;\n    display: block;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    top: 50%;\n    transform: translateY(-50%);\n    width: 8px;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-vertical\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    display: inline-block;\n    transition: 0.2s transform, 0.2s top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    left: 50%;\n    transform: translateX(-50%);\n    white-space: nowrap;\n  }\n\n  .swiper-horizontal\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s left;\n  }\n\n  .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s right;\n  }\n\n  .swiper-pagination-progressbar {\n    background: rgba(0, 0, 0, 0.25);\n    position: absolute;\n  }\n\n  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    transform: scale(0);\n    transform-origin: left top;\n  }\n\n  .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    transform-origin: right top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal,\n  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,\n  .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {\n    width: 100%;\n    height: 4px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-vertical,\n  .swiper-vertical > .swiper-pagination-progressbar {\n    width: 4px;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-pagination-lock {\n    display: none;\n  }\n\n  .swiper-scrollbar {\n    border-radius: 10px;\n    position: relative;\n    -ms-touch-action: none;\n    background: rgba(0, 0, 0, 0.1);\n  }\n\n  .swiper-scrollbar-disabled > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-horizontal {\n    position: absolute;\n    left: 1%;\n    bottom: 3px;\n    z-index: 50;\n    height: 5px;\n    width: 98%;\n  }\n\n  .swiper-scrollbar.swiper-scrollbar-vertical,\n  .swiper-vertical > .swiper-scrollbar {\n    position: absolute;\n    right: 3px;\n    top: 1%;\n    z-index: 50;\n    width: 5px;\n    height: 98%;\n  }\n\n  .swiper-scrollbar-drag {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: 10px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-scrollbar-cursor-drag {\n    cursor: move;\n  }\n\n  .swiper-scrollbar-lock {\n    display: none;\n  }\n\n  .swiper-zoom-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .swiper-zoom-container > canvas,\n  .swiper-zoom-container > img,\n  .swiper-zoom-container > svg {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n  }\n\n  .swiper-slide-zoomed {\n    cursor: move;\n  }\n\n  .swiper-lazy-preloader {\n    width: 42px;\n    height: 42px;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    margin-left: -21px;\n    margin-top: -21px;\n    z-index: 10;\n    transform-origin: 50%;\n    box-sizing: border-box;\n    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n    border-radius: 50%;\n    border-top-color: transparent;\n  }\n\n  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,\n  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {\n    animation: swiper-preloader-spin 1s infinite linear;\n  }\n\n  .swiper-lazy-preloader-white {\n    --swiper-preloader-color: #fff;\n  }\n\n  .swiper-lazy-preloader-black {\n    --swiper-preloader-color: #000;\n  }\n\n  @keyframes swiper-preloader-spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .swiper .swiper-notification {\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n    opacity: 0;\n    z-index: -1000;\n  }\n\n  .swiper-free-mode > .swiper-wrapper {\n    transition-timing-function: ease-out;\n    margin: 0 auto;\n  }\n\n  .swiper-grid > .swiper-wrapper {\n    flex-wrap: wrap;\n  }\n\n  .swiper-grid-column > .swiper-wrapper {\n    flex-wrap: wrap;\n    flex-direction: column;\n  }\n\n  .swiper-fade.swiper-free-mode .swiper-slide {\n    transition-timing-function: ease-out;\n  }\n\n  .swiper-fade .swiper-slide {\n    pointer-events: none;\n    transition-property: opacity;\n  }\n\n  .swiper-fade .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-fade .swiper-slide-active,\n  .swiper-fade .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube {\n    overflow: visible;\n  }\n\n  .swiper-cube .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n    visibility: hidden;\n    transform-origin: 0 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .swiper-cube .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-cube.swiper-rtl .swiper-slide {\n    transform-origin: 100% 0;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-next,\n  .swiper-cube .swiper-slide-next + .swiper-slide,\n  .swiper-cube .swiper-slide-prev {\n    pointer-events: auto;\n    visibility: visible;\n  }\n\n  .swiper-cube .swiper-slide-shadow-bottom,\n  .swiper-cube .swiper-slide-shadow-left,\n  .swiper-cube .swiper-slide-shadow-right,\n  .swiper-cube .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-cube .swiper-cube-shadow {\n    position: absolute;\n    left: 0;\n    bottom: 0px;\n    width: 100%;\n    height: 100%;\n    opacity: 0.6;\n    z-index: 0;\n  }\n\n  .swiper-cube .swiper-cube-shadow:before {\n    content: '';\n    background: #000;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    filter: blur(50px);\n  }\n\n  .swiper-flip {\n    overflow: visible;\n  }\n\n  .swiper-flip .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n  }\n\n  .swiper-flip .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-flip .swiper-slide-active,\n  .swiper-flip .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-flip .swiper-slide-shadow-bottom,\n  .swiper-flip .swiper-slide-shadow-left,\n  .swiper-flip .swiper-slide-shadow-right,\n  .swiper-flip .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-creative .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n    transition-property: transform, opacity, height;\n  }\n\n  .swiper-cards {\n    overflow: visible;\n  }\n\n  .swiper-cards .swiper-slide {\n    transform-origin: center bottom;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n  }\n"])));
+var S_SwiperStyleWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /** NOTE: Swiper\uAC00 \uC81C\uACF5\uD558\uB294 css \uD30C\uC77C\uC744 webpack \uC774\uC288\uB85C import\uD558\uC9C0 \uBABB\uD574\uC11C \uC784\uC2DC\uB85C \uB9CC\uB4E0 css wrapper\uC785\uB2C8\uB2E4.\n  * \uCC28\uD6C4 Webpack 5\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uB418\uB294 \uACBD\uC6B0 swiper \uD648\uD398\uC774\uC9C0\uC5D0\uC11C \uCD94\uCC9C\uD558\uB294 \uC0AC\uC6A9\uBC95\uC73C\uB85C \uC218\uC815\uC774 \uD544\uC694\uD569\uB2C8\uB2E4.\n  */\n\n  ", "\n"], ["\n  /** NOTE: Swiper\uAC00 \uC81C\uACF5\uD558\uB294 css \uD30C\uC77C\uC744 webpack \uC774\uC288\uB85C import\uD558\uC9C0 \uBABB\uD574\uC11C \uC784\uC2DC\uB85C \uB9CC\uB4E0 css wrapper\uC785\uB2C8\uB2E4.\n  * \uCC28\uD6C4 Webpack 5\uB85C \uB9C8\uC774\uADF8\uB808\uC774\uC158 \uB418\uB294 \uACBD\uC6B0 swiper \uD648\uD398\uC774\uC9C0\uC5D0\uC11C \uCD94\uCC9C\uD558\uB294 \uC0AC\uC6A9\uBC95\uC73C\uB85C \uC218\uC815\uC774 \uD544\uC694\uD569\uB2C8\uB2E4.\n  */\n\n  ", "\n"])), swiper_style_1.default);
 exports.default = Carousel;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/sub/DynamicLayout/desktop/components/common/swiper.style.d.ts

@@ -0,0 +1,2 @@
+declare const SwiperCss: import("styled-components").FlattenSimpleInterpolation;
+export default SwiperCss;

package/dist/src/sub/DynamicLayout/desktop/components/common/swiper.style.js

@@ -0,0 +1,10 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var styled_components_1 = require("styled-components");
+var SwiperCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @font-face {\n    font-family: swiper-icons;\n    src: url('data:application/font-woff;charset=utf-8;base64, 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');\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  :root {\n    --swiper-theme-color: #007aff;\n  }\n\n  .swiper {\n    margin-left: auto;\n    margin-right: auto;\n    position: relative;\n    overflow: hidden;\n    list-style: none;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .swiper-vertical > .swiper-wrapper {\n    flex-direction: column;\n  }\n\n  .swiper-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    display: flex;\n    transition-property: transform;\n    box-sizing: content-box;\n  }\n\n  .swiper-android .swiper-slide,\n  .swiper-wrapper {\n    transform: translate3d(0px, 0, 0);\n  }\n\n  .swiper-pointer-events {\n    touch-action: pan-y;\n  }\n\n  .swiper-pointer-events.swiper-vertical {\n    touch-action: pan-x;\n  }\n\n  .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n  }\n\n  .swiper-slide-invisible-blank {\n    visibility: hidden;\n  }\n\n  .swiper-autoheight,\n  .swiper-autoheight .swiper-slide {\n    height: auto;\n  }\n\n  .swiper-autoheight .swiper-wrapper {\n    align-items: flex-start;\n    transition-property: transform, height;\n  }\n\n  .swiper-backface-hidden .swiper-slide {\n    transform: translateZ(0);\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-3d,\n  .swiper-3d.swiper-css-mode .swiper-wrapper {\n    perspective: 1200px;\n  }\n\n  .swiper-3d .swiper-cube-shadow,\n  .swiper-3d .swiper-slide,\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top,\n  .swiper-3d .swiper-wrapper {\n    transform-style: preserve-3d;\n  }\n\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 10;\n  }\n\n  .swiper-3d .swiper-slide-shadow {\n    background: rgba(0, 0, 0, 0.15);\n  }\n\n  .swiper-3d .swiper-slide-shadow-left {\n    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-right {\n    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-top {\n    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-bottom {\n    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-css-mode > .swiper-wrapper {\n    overflow: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: start start;\n  }\n\n  .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: x mandatory;\n  }\n\n  .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: y mandatory;\n  }\n\n  .swiper-centered > .swiper-wrapper::before {\n    content: '';\n    flex-shrink: 0;\n    order: 9999;\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n    margin-inline-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n    height: 100%;\n    min-height: 1px;\n    width: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n    margin-block-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n    width: 100%;\n    min-width: 1px;\n    height: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: center center;\n  }\n\n  .swiper-virtual .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    transform: translateZ(0);\n  }\n\n  .swiper-virtual.swiper-css-mode .swiper-wrapper::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {\n    height: 1px;\n    width: var(--swiper-virtual-size);\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {\n    width: 1px;\n    height: var(--swiper-virtual-size);\n  }\n\n  :root {\n    --swiper-navigation-size: 44px;\n  }\n\n  .swiper-button-next,\n  .swiper-button-prev {\n    position: absolute;\n    top: 50%;\n    width: calc(var(--swiper-navigation-size) / 44 * 27);\n    height: var(--swiper-navigation-size);\n    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n    z-index: 10;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--swiper-navigation-color, var(--swiper-theme-color));\n  }\n\n  .swiper-button-next.swiper-button-disabled,\n  .swiper-button-prev.swiper-button-disabled {\n    opacity: 0.35;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-button-next.swiper-button-hidden,\n  .swiper-button-prev.swiper-button-hidden {\n    opacity: 0;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-navigation-disabled .swiper-button-next,\n  .swiper-navigation-disabled .swiper-button-prev {\n    display: none !important;\n  }\n\n  .swiper-button-next:after,\n  .swiper-button-prev:after {\n    font-family: swiper-icons;\n    font-size: var(--swiper-navigation-size);\n    text-transform: none !important;\n    letter-spacing: 0;\n    font-variant: initial;\n    line-height: 1;\n  }\n\n  .swiper-button-prev,\n  .swiper-rtl .swiper-button-next {\n    left: 10px;\n    right: auto;\n  }\n\n  .swiper-button-prev:after,\n  .swiper-rtl .swiper-button-next:after {\n    content: 'prev';\n  }\n\n  .swiper-button-next,\n  .swiper-rtl .swiper-button-prev {\n    right: 10px;\n    left: auto;\n  }\n\n  .swiper-button-next:after,\n  .swiper-rtl .swiper-button-prev:after {\n    content: 'next';\n  }\n\n  .swiper-button-lock {\n    display: none;\n  }\n\n  .swiper-pagination {\n    position: absolute;\n    text-align: center;\n    transition: 0.3s opacity;\n    transform: translate3d(0, 0, 0);\n    z-index: 10;\n  }\n\n  .swiper-pagination.swiper-pagination-hidden {\n    opacity: 0;\n  }\n\n  .swiper-pagination-disabled > .swiper-pagination,\n  .swiper-pagination.swiper-pagination-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets,\n  .swiper-pagination-bullets.swiper-pagination-horizontal,\n  .swiper-pagination-custom,\n  .swiper-pagination-fraction {\n    bottom: 10px;\n    left: 0;\n    width: 100%;\n  }\n\n  .swiper-pagination-bullets-dynamic {\n    overflow: hidden;\n    font-size: 0;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transform: scale(0.33);\n    position: relative;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullet {\n    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));\n    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));\n    display: inline-block;\n    border-radius: 50%;\n    background: var(--swiper-pagination-bullet-inactive-color, #000);\n    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);\n  }\n\n  button.swiper-pagination-bullet {\n    border: none;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .swiper-pagination-clickable .swiper-pagination-bullet {\n    cursor: pointer;\n  }\n\n  .swiper-pagination-bullet:only-child {\n    display: none !important;\n  }\n\n  .swiper-pagination-bullet-active {\n    opacity: var(--swiper-pagination-bullet-opacity, 1);\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets,\n  .swiper-vertical > .swiper-pagination-bullets {\n    right: 10px;\n    top: 50%;\n    transform: translate3d(0px, -50%, 0);\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;\n    display: block;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    top: 50%;\n    transform: translateY(-50%);\n    width: 8px;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-vertical\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    display: inline-block;\n    transition: 0.2s transform, 0.2s top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    left: 50%;\n    transform: translateX(-50%);\n    white-space: nowrap;\n  }\n\n  .swiper-horizontal\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s left;\n  }\n\n  .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s right;\n  }\n\n  .swiper-pagination-progressbar {\n    background: rgba(0, 0, 0, 0.25);\n    position: absolute;\n  }\n\n  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    transform: scale(0);\n    transform-origin: left top;\n  }\n\n  .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    transform-origin: right top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal,\n  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,\n  .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {\n    width: 100%;\n    height: 4px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-vertical,\n  .swiper-vertical > .swiper-pagination-progressbar {\n    width: 4px;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-pagination-lock {\n    display: none;\n  }\n\n  .swiper-scrollbar {\n    border-radius: 10px;\n    position: relative;\n    -ms-touch-action: none;\n    background: rgba(0, 0, 0, 0.1);\n  }\n\n  .swiper-scrollbar-disabled > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-horizontal {\n    position: absolute;\n    left: 1%;\n    bottom: 3px;\n    z-index: 50;\n    height: 5px;\n    width: 98%;\n  }\n\n  .swiper-scrollbar.swiper-scrollbar-vertical,\n  .swiper-vertical > .swiper-scrollbar {\n    position: absolute;\n    right: 3px;\n    top: 1%;\n    z-index: 50;\n    width: 5px;\n    height: 98%;\n  }\n\n  .swiper-scrollbar-drag {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: 10px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-scrollbar-cursor-drag {\n    cursor: move;\n  }\n\n  .swiper-scrollbar-lock {\n    display: none;\n  }\n\n  .swiper-zoom-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .swiper-zoom-container > canvas,\n  .swiper-zoom-container > img,\n  .swiper-zoom-container > svg {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n  }\n\n  .swiper-slide-zoomed {\n    cursor: move;\n  }\n\n  .swiper-lazy-preloader {\n    width: 42px;\n    height: 42px;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    margin-left: -21px;\n    margin-top: -21px;\n    z-index: 10;\n    transform-origin: 50%;\n    box-sizing: border-box;\n    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n    border-radius: 50%;\n    border-top-color: transparent;\n  }\n\n  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,\n  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {\n    animation: swiper-preloader-spin 1s infinite linear;\n  }\n\n  .swiper-lazy-preloader-white {\n    --swiper-preloader-color: #fff;\n  }\n\n  .swiper-lazy-preloader-black {\n    --swiper-preloader-color: #000;\n  }\n\n  @keyframes swiper-preloader-spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .swiper .swiper-notification {\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n    opacity: 0;\n    z-index: -1000;\n  }\n\n  .swiper-free-mode > .swiper-wrapper {\n    transition-timing-function: ease-out;\n    margin: 0 auto;\n  }\n\n  .swiper-grid > .swiper-wrapper {\n    flex-wrap: wrap;\n  }\n\n  .swiper-grid-column > .swiper-wrapper {\n    flex-wrap: wrap;\n    flex-direction: column;\n  }\n\n  .swiper-fade.swiper-free-mode .swiper-slide {\n    transition-timing-function: ease-out;\n  }\n\n  .swiper-fade .swiper-slide {\n    pointer-events: none;\n    transition-property: opacity;\n  }\n\n  .swiper-fade .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-fade .swiper-slide-active,\n  .swiper-fade .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube {\n    overflow: visible;\n  }\n\n  .swiper-cube .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n    visibility: hidden;\n    transform-origin: 0 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .swiper-cube .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-cube.swiper-rtl .swiper-slide {\n    transform-origin: 100% 0;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-next,\n  .swiper-cube .swiper-slide-next + .swiper-slide,\n  .swiper-cube .swiper-slide-prev {\n    pointer-events: auto;\n    visibility: visible;\n  }\n\n  .swiper-cube .swiper-slide-shadow-bottom,\n  .swiper-cube .swiper-slide-shadow-left,\n  .swiper-cube .swiper-slide-shadow-right,\n  .swiper-cube .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-cube .swiper-cube-shadow {\n    position: absolute;\n    left: 0;\n    bottom: 0px;\n    width: 100%;\n    height: 100%;\n    opacity: 0.6;\n    z-index: 0;\n  }\n\n  .swiper-cube .swiper-cube-shadow:before {\n    content: '';\n    background: #000;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    filter: blur(50px);\n  }\n\n  .swiper-flip {\n    overflow: visible;\n  }\n\n  .swiper-flip .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n  }\n\n  .swiper-flip .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-flip .swiper-slide-active,\n  .swiper-flip .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-flip .swiper-slide-shadow-bottom,\n  .swiper-flip .swiper-slide-shadow-left,\n  .swiper-flip .swiper-slide-shadow-right,\n  .swiper-flip .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-creative .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n    transition-property: transform, opacity, height;\n  }\n\n  .swiper-cards {\n    overflow: visible;\n  }\n\n  .swiper-cards .swiper-slide {\n    transform-origin: center bottom;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n  }\n"], ["\n  @font-face {\n    font-family: swiper-icons;\n    src: url('data:application/font-woff;charset=utf-8;base64, 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');\n    font-weight: 400;\n    font-style: normal;\n  }\n\n  :root {\n    --swiper-theme-color: #007aff;\n  }\n\n  .swiper {\n    margin-left: auto;\n    margin-right: auto;\n    position: relative;\n    overflow: hidden;\n    list-style: none;\n    padding: 0;\n    z-index: 1;\n  }\n\n  .swiper-vertical > .swiper-wrapper {\n    flex-direction: column;\n  }\n\n  .swiper-wrapper {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    display: flex;\n    transition-property: transform;\n    box-sizing: content-box;\n  }\n\n  .swiper-android .swiper-slide,\n  .swiper-wrapper {\n    transform: translate3d(0px, 0, 0);\n  }\n\n  .swiper-pointer-events {\n    touch-action: pan-y;\n  }\n\n  .swiper-pointer-events.swiper-vertical {\n    touch-action: pan-x;\n  }\n\n  .swiper-slide {\n    flex-shrink: 0;\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transition-property: transform;\n  }\n\n  .swiper-slide-invisible-blank {\n    visibility: hidden;\n  }\n\n  .swiper-autoheight,\n  .swiper-autoheight .swiper-slide {\n    height: auto;\n  }\n\n  .swiper-autoheight .swiper-wrapper {\n    align-items: flex-start;\n    transition-property: transform, height;\n  }\n\n  .swiper-backface-hidden .swiper-slide {\n    transform: translateZ(0);\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-3d,\n  .swiper-3d.swiper-css-mode .swiper-wrapper {\n    perspective: 1200px;\n  }\n\n  .swiper-3d .swiper-cube-shadow,\n  .swiper-3d .swiper-slide,\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top,\n  .swiper-3d .swiper-wrapper {\n    transform-style: preserve-3d;\n  }\n\n  .swiper-3d .swiper-slide-shadow,\n  .swiper-3d .swiper-slide-shadow-bottom,\n  .swiper-3d .swiper-slide-shadow-left,\n  .swiper-3d .swiper-slide-shadow-right,\n  .swiper-3d .swiper-slide-shadow-top {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    z-index: 10;\n  }\n\n  .swiper-3d .swiper-slide-shadow {\n    background: rgba(0, 0, 0, 0.15);\n  }\n\n  .swiper-3d .swiper-slide-shadow-left {\n    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-right {\n    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-top {\n    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-3d .swiper-slide-shadow-bottom {\n    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));\n  }\n\n  .swiper-css-mode > .swiper-wrapper {\n    overflow: auto;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {\n    display: none;\n  }\n\n  .swiper-css-mode > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: start start;\n  }\n\n  .swiper-horizontal.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: x mandatory;\n  }\n\n  .swiper-vertical.swiper-css-mode > .swiper-wrapper {\n    scroll-snap-type: y mandatory;\n  }\n\n  .swiper-centered > .swiper-wrapper::before {\n    content: '';\n    flex-shrink: 0;\n    order: 9999;\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {\n    margin-inline-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-horizontal > .swiper-wrapper::before {\n    height: 100%;\n    min-height: 1px;\n    width: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {\n    margin-block-start: var(--swiper-centered-offset-before);\n  }\n\n  .swiper-centered.swiper-vertical > .swiper-wrapper::before {\n    width: 100%;\n    min-width: 1px;\n    height: var(--swiper-centered-offset-after);\n  }\n\n  .swiper-centered > .swiper-wrapper > .swiper-slide {\n    scroll-snap-align: center center;\n  }\n\n  .swiper-virtual .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    transform: translateZ(0);\n  }\n\n  .swiper-virtual.swiper-css-mode .swiper-wrapper::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {\n    height: 1px;\n    width: var(--swiper-virtual-size);\n  }\n\n  .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {\n    width: 1px;\n    height: var(--swiper-virtual-size);\n  }\n\n  :root {\n    --swiper-navigation-size: 44px;\n  }\n\n  .swiper-button-next,\n  .swiper-button-prev {\n    position: absolute;\n    top: 50%;\n    width: calc(var(--swiper-navigation-size) / 44 * 27);\n    height: var(--swiper-navigation-size);\n    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));\n    z-index: 10;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--swiper-navigation-color, var(--swiper-theme-color));\n  }\n\n  .swiper-button-next.swiper-button-disabled,\n  .swiper-button-prev.swiper-button-disabled {\n    opacity: 0.35;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-button-next.swiper-button-hidden,\n  .swiper-button-prev.swiper-button-hidden {\n    opacity: 0;\n    cursor: auto;\n    pointer-events: none;\n  }\n\n  .swiper-navigation-disabled .swiper-button-next,\n  .swiper-navigation-disabled .swiper-button-prev {\n    display: none !important;\n  }\n\n  .swiper-button-next:after,\n  .swiper-button-prev:after {\n    font-family: swiper-icons;\n    font-size: var(--swiper-navigation-size);\n    text-transform: none !important;\n    letter-spacing: 0;\n    font-variant: initial;\n    line-height: 1;\n  }\n\n  .swiper-button-prev,\n  .swiper-rtl .swiper-button-next {\n    left: 10px;\n    right: auto;\n  }\n\n  .swiper-button-prev:after,\n  .swiper-rtl .swiper-button-next:after {\n    content: 'prev';\n  }\n\n  .swiper-button-next,\n  .swiper-rtl .swiper-button-prev {\n    right: 10px;\n    left: auto;\n  }\n\n  .swiper-button-next:after,\n  .swiper-rtl .swiper-button-prev:after {\n    content: 'next';\n  }\n\n  .swiper-button-lock {\n    display: none;\n  }\n\n  .swiper-pagination {\n    position: absolute;\n    text-align: center;\n    transition: 0.3s opacity;\n    transform: translate3d(0, 0, 0);\n    z-index: 10;\n  }\n\n  .swiper-pagination.swiper-pagination-hidden {\n    opacity: 0;\n  }\n\n  .swiper-pagination-disabled > .swiper-pagination,\n  .swiper-pagination.swiper-pagination-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets,\n  .swiper-pagination-bullets.swiper-pagination-horizontal,\n  .swiper-pagination-custom,\n  .swiper-pagination-fraction {\n    bottom: 10px;\n    left: 0;\n    width: 100%;\n  }\n\n  .swiper-pagination-bullets-dynamic {\n    overflow: hidden;\n    font-size: 0;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transform: scale(0.33);\n    position: relative;\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {\n    transform: scale(1);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {\n    transform: scale(0.66);\n  }\n\n  .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {\n    transform: scale(0.33);\n  }\n\n  .swiper-pagination-bullet {\n    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));\n    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));\n    display: inline-block;\n    border-radius: 50%;\n    background: var(--swiper-pagination-bullet-inactive-color, #000);\n    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);\n  }\n\n  button.swiper-pagination-bullet {\n    border: none;\n    margin: 0;\n    padding: 0;\n    box-shadow: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .swiper-pagination-clickable .swiper-pagination-bullet {\n    cursor: pointer;\n  }\n\n  .swiper-pagination-bullet:only-child {\n    display: none !important;\n  }\n\n  .swiper-pagination-bullet-active {\n    opacity: var(--swiper-pagination-bullet-opacity, 1);\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets,\n  .swiper-vertical > .swiper-pagination-bullets {\n    right: 10px;\n    top: 50%;\n    transform: translate3d(0px, -50%, 0);\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;\n    display: block;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    top: 50%;\n    transform: translateY(-50%);\n    width: 8px;\n  }\n\n  .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-vertical\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    display: inline-block;\n    transition: 0.2s transform, 0.2s top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {\n    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);\n  }\n\n  .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {\n    left: 50%;\n    transform: translateX(-50%);\n    white-space: nowrap;\n  }\n\n  .swiper-horizontal\n    > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet,\n  .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic\n    .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s left;\n  }\n\n  .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {\n    transition: 0.2s transform, 0.2s right;\n  }\n\n  .swiper-pagination-progressbar {\n    background: rgba(0, 0, 0, 0.25);\n    position: absolute;\n  }\n\n  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    background: var(--swiper-pagination-color, var(--swiper-theme-color));\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    transform: scale(0);\n    transform-origin: left top;\n  }\n\n  .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {\n    transform-origin: right top;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal,\n  .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,\n  .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {\n    width: 100%;\n    height: 4px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,\n  .swiper-pagination-progressbar.swiper-pagination-vertical,\n  .swiper-vertical > .swiper-pagination-progressbar {\n    width: 4px;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-pagination-lock {\n    display: none;\n  }\n\n  .swiper-scrollbar {\n    border-radius: 10px;\n    position: relative;\n    -ms-touch-action: none;\n    background: rgba(0, 0, 0, 0.1);\n  }\n\n  .swiper-scrollbar-disabled > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-disabled {\n    display: none !important;\n  }\n\n  .swiper-horizontal > .swiper-scrollbar,\n  .swiper-scrollbar.swiper-scrollbar-horizontal {\n    position: absolute;\n    left: 1%;\n    bottom: 3px;\n    z-index: 50;\n    height: 5px;\n    width: 98%;\n  }\n\n  .swiper-scrollbar.swiper-scrollbar-vertical,\n  .swiper-vertical > .swiper-scrollbar {\n    position: absolute;\n    right: 3px;\n    top: 1%;\n    z-index: 50;\n    width: 5px;\n    height: 98%;\n  }\n\n  .swiper-scrollbar-drag {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    background: rgba(0, 0, 0, 0.5);\n    border-radius: 10px;\n    left: 0;\n    top: 0;\n  }\n\n  .swiper-scrollbar-cursor-drag {\n    cursor: move;\n  }\n\n  .swiper-scrollbar-lock {\n    display: none;\n  }\n\n  .swiper-zoom-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .swiper-zoom-container > canvas,\n  .swiper-zoom-container > img,\n  .swiper-zoom-container > svg {\n    max-width: 100%;\n    max-height: 100%;\n    object-fit: contain;\n  }\n\n  .swiper-slide-zoomed {\n    cursor: move;\n  }\n\n  .swiper-lazy-preloader {\n    width: 42px;\n    height: 42px;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    margin-left: -21px;\n    margin-top: -21px;\n    z-index: 10;\n    transform-origin: 50%;\n    box-sizing: border-box;\n    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));\n    border-radius: 50%;\n    border-top-color: transparent;\n  }\n\n  .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,\n  .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {\n    animation: swiper-preloader-spin 1s infinite linear;\n  }\n\n  .swiper-lazy-preloader-white {\n    --swiper-preloader-color: #fff;\n  }\n\n  .swiper-lazy-preloader-black {\n    --swiper-preloader-color: #000;\n  }\n\n  @keyframes swiper-preloader-spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .swiper .swiper-notification {\n    position: absolute;\n    left: 0;\n    top: 0;\n    pointer-events: none;\n    opacity: 0;\n    z-index: -1000;\n  }\n\n  .swiper-free-mode > .swiper-wrapper {\n    transition-timing-function: ease-out;\n    margin: 0 auto;\n  }\n\n  .swiper-grid > .swiper-wrapper {\n    flex-wrap: wrap;\n  }\n\n  .swiper-grid-column > .swiper-wrapper {\n    flex-wrap: wrap;\n    flex-direction: column;\n  }\n\n  .swiper-fade.swiper-free-mode .swiper-slide {\n    transition-timing-function: ease-out;\n  }\n\n  .swiper-fade .swiper-slide {\n    pointer-events: none;\n    transition-property: opacity;\n  }\n\n  .swiper-fade .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-fade .swiper-slide-active,\n  .swiper-fade .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube {\n    overflow: visible;\n  }\n\n  .swiper-cube .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n    visibility: hidden;\n    transform-origin: 0 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  .swiper-cube .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-cube.swiper-rtl .swiper-slide {\n    transform-origin: 100% 0;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-cube .swiper-slide-active,\n  .swiper-cube .swiper-slide-next,\n  .swiper-cube .swiper-slide-next + .swiper-slide,\n  .swiper-cube .swiper-slide-prev {\n    pointer-events: auto;\n    visibility: visible;\n  }\n\n  .swiper-cube .swiper-slide-shadow-bottom,\n  .swiper-cube .swiper-slide-shadow-left,\n  .swiper-cube .swiper-slide-shadow-right,\n  .swiper-cube .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-cube .swiper-cube-shadow {\n    position: absolute;\n    left: 0;\n    bottom: 0px;\n    width: 100%;\n    height: 100%;\n    opacity: 0.6;\n    z-index: 0;\n  }\n\n  .swiper-cube .swiper-cube-shadow:before {\n    content: '';\n    background: #000;\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    filter: blur(50px);\n  }\n\n  .swiper-flip {\n    overflow: visible;\n  }\n\n  .swiper-flip .swiper-slide {\n    pointer-events: none;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    z-index: 1;\n  }\n\n  .swiper-flip .swiper-slide .swiper-slide {\n    pointer-events: none;\n  }\n\n  .swiper-flip .swiper-slide-active,\n  .swiper-flip .swiper-slide-active .swiper-slide-active {\n    pointer-events: auto;\n  }\n\n  .swiper-flip .swiper-slide-shadow-bottom,\n  .swiper-flip .swiper-slide-shadow-left,\n  .swiper-flip .swiper-slide-shadow-right,\n  .swiper-flip .swiper-slide-shadow-top {\n    z-index: 0;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n\n  .swiper-creative .swiper-slide {\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n    transition-property: transform, opacity, height;\n  }\n\n  .swiper-cards {\n    overflow: visible;\n  }\n\n  .swiper-cards .swiper-slide {\n    transform-origin: center bottom;\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n    overflow: hidden;\n  }\n"])));
+exports.default = SwiperCss;
+var templateObject_1;

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsCarouselSection/templates/TemplateA/TemplateA.js

@@ -46,6 +46,7 @@ function TemplateA() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, itemTitleColorInHex = _b.itemTitleColorInHex, itemDescriptionColorInHex = _b.itemDescriptionColorInHex;
     var _c = sectionContext.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType;
     var _d = sectionContext.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, itemButtonDesignType = _d.itemButtonDesignType, itemButtonBackgroundColorInHex = _d.itemButtonBackgroundColorInHex, itemButtonLabelColorInHex = _d.itemButtonLabelColorInHex;
+    var _e = sectionContext.properties, carouselAutoplayMode = _e.carouselAutoplayMode, carouselAutoplayTime = _e.carouselAutoplayTime, carouselInfiniteLoopMode = _e.carouselInfiniteLoopMode;
     var dynamicLayoutSectionItems = sectionContext.dynamicLayoutSectionItems;
     var filteredItems = dynamicLayoutSectionItems
         ? dynamicLayoutSectionItems.filter(function (item) {
@@ -65,16 +66,18 @@ function TemplateA() {
             buttonAlphaLinkSrc && (react_1.default.createElement(S_SectionButtonBox, null,
                 react_1.default.createElement(components_1.Section.Button, { text: buttonAlphaLabel, src: buttonAlphaLinkSrc, linkType: buttonAlphaLinkType, buttonType: buttonAlphaDesignType, backgroundColor: buttonAlphaBackgroundColorInHex, textColor: buttonAlphaLabelColorInHex, borderColor: buttonAlphaLabelColorInHex }))),
             filteredItems.length > 0 && (react_1.default.createElement(S_CarouselBox, null,
-                react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 3, breakpoints: {
+                react_1.default.createElement(components_1.Carousel, { spaceBetween: 24, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
-                            slidesPerView: 4,
-                            slidesPerGroup: 4
+                            slidesPerView: 4
                         },
                         1601: {
-                            slidesPerView: 5,
-                            slidesPerGroup: 5
+                            slidesPerView: 5
                         }
-                    }, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
+                    }, mode: carouselAutoplayMode === 'AUTO'
+                        ? 'autoplay'
+                        : carouselInfiniteLoopMode === 'USE'
+                            ? 'loop'
+                            : 'normal', autoplayDelay: carouselAutoplayTime, buttonSpacing: "-24px" }, filteredItems.map(function (item) {
                     var id = item.id;
                     var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc, itemLinkMethod = _a.linkMethod, itemLinkSrc = _a.linkSrc, itemLinkType = _a.linkType, itemButtonLabel = _a.buttonLabel;
                     return (react_1.default.createElement(components_1.Item, __assign({ key: id }, item),
@@ -89,7 +92,7 @@ function TemplateA() {
 }
 var S_Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : '80px');
+    return (hasNothing ? 0 : '160px');
 });
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"], ["\n  --min-width: 1000;\n  --min-width-px: 1000px;\n  --max-width: 1500;\n  --max-width-px: 1500px;\n  --min-viewport-width: 1200;\n  --min-viewport-width-px: 1200px;\n  --max-viewport-width: 1920;\n  --max-viewport-width-px: 1920px;\n  width: calc(\n    (100vw - var(--min-viewport-width-px)) * (var(--max-width) - var(--min-width)) /\n      (var(--max-viewport-width) - var(--min-viewport-width)) + var(--min-width-px)\n  );\n  min-width: var(--min-width-px);\n  max-width: var(--max-width-px);\n  margin: 0 auto;\n"])));
 var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {