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

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/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

@@ -144,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,15 +31,32 @@ 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'
+            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;
@@ -68,8 +85,22 @@ function Carousel(_a) {
                 }, 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);
             }))),
@@ -105,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, 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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  /** 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"])));
+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

@@ -66,14 +66,12 @@ 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
                         }
                     }, mode: carouselAutoplayMode === 'AUTO'
                         ? 'autoplay'
@@ -94,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) {

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

@@ -61,20 +61,18 @@ function TemplateB() {
     return (react_1.default.createElement(S_Wrapper, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
         react_1.default.createElement(S_ContentsArea, null,
             title && (react_1.default.createElement(S_SectionTitleBox, null,
-                react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold" }))),
+                react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "48px", customFontWeight: "bold" }))),
             description && (react_1.default.createElement(S_SectionDescriptionBox, null,
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
             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: 42, slidesPerView: 3, slidesPerGroup: 3, breakpoints: {
+                react_1.default.createElement(components_1.Carousel, { spaceBetween: 42, slidesPerView: 3, slidesPerGroup: 1, breakpoints: {
                         1301: {
-                            slidesPerView: 4,
-                            slidesPerGroup: 4
+                            slidesPerView: 4
                         },
                         1601: {
-                            slidesPerView: 5,
-                            slidesPerGroup: 5
+                            slidesPerView: 5
                         }
                     }, mode: carouselAutoplayMode === 'AUTO'
                         ? 'autoplay'
@@ -96,7 +94,7 @@ function TemplateB() {
 }
 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) {

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

@@ -37,24 +37,27 @@ function TemplateA() {
     return (react_1.default.createElement(S_ContentsAreaBox, { hasNothing: hasNothing },
         react_1.default.createElement(S_ContentsArea, null,
             sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", shapeType: "rectangle", scaleType: "cover" }))))),
+                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))),
             react_1.default.createElement(S_ContentsBodyWrapper, null,
-                title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "48px", customFontWeight: "bold" })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))))));
 }
-var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"])), function (_a) {
+var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
+    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\n  display: flex;\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\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-right: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });
-var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: calc(70% - ", ");\n"], ["\n  width: calc(70% - ", ");\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+});
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

package/dist/src/sub/DynamicLayout/desktop/sections/ContentsSection/templates/TemplateB/TemplateB.js

@@ -43,18 +43,21 @@ function TemplateB() {
                 buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, { hasTitle: !!title, hasDescription: !!description },
                     react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))),
             sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover" }))))))));
+                react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", height: "responsive", scaleType: "cover", shapeType: "rectangle" }))))))));
 }
-var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: 80px 0;\n  ", "\n"])), function (_a) {
+var S_ContentsAreaBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
+    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\n  display: flex;\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\n  display: flex;\n"])));
 var S_ImageBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"], ["\n  width: 30%;\n  min-width: 30%;\n  height: 100%;\n  min-height: 360px;\n  margin-left: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingI;
 });
-var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var S_ContentsBodyWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: calc(70% - ", ");\n"], ["\n  width: calc(70% - ", ");\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingI;
+});
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;
     return hasTitle && theme.spacing.spacingF;

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

@@ -57,10 +57,7 @@ function TemplateA() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: ", " auto;\n  ", "\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: ", " auto;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingH;
-}, function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: 160px auto;\n  ", "\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: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && 'margin: 0';
 });

package/dist/src/sub/DynamicLayout/desktop/sections/FooterSection/templates/TemplateB/TemplateB.js

@@ -57,10 +57,7 @@ function TemplateB() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: ", " auto;\n  ", "\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: ", " auto;\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingH;
-}, function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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: 160px auto;\n  ", "\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: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && 'margin: 0';
 });

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

@@ -74,7 +74,7 @@ function TemplateA() {
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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\n  margin: 80px auto;\n\n  ", "\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\n  margin: 80px auto;\n\n  ", "\n"])), function (_a) {
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __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\n  margin: 160px auto;\n  ", "\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\n  margin: 160px auto;\n  ", "\n"])), function (_a) {
     var hasNothing = _a.hasNothing;
     return hasNothing && "margin: 0";
 });

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

@@ -38,7 +38,7 @@ function TemplateA() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement("div", null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateA() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
 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_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {
     var theme = _a.theme, hasTitle = _a.hasTitle;

package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateB/TemplateB.js

@@ -38,7 +38,7 @@ function TemplateB() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_ContentsBox, null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -46,7 +46,7 @@ function TemplateB() {
                     buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                     buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex }))))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  justify-content: center;\n"], ["\n  width: 100%;\n  height: calc(100vh - 64px);\n  display: flex;\n  justify-content: center;\n"])));
 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"], ["\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"])));
 var S_ContentsBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: 800px;\n  position: absolute;\n  bottom: 13vh;\n"], ["\n  max-width: 800px;\n  position: absolute;\n  bottom: 13vh;\n"])));
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-top: ", ";\n"], ["\n  margin-top: ", ";\n"])), function (_a) {

package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateC/TemplateC.js

@@ -38,7 +38,7 @@ function TemplateC() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement(S_ContentsBox, null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },

package/dist/src/sub/DynamicLayout/desktop/sections/IntroSection/templates/TemplateD/TemplateD.js

@@ -38,7 +38,7 @@ function TemplateD() {
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
             react_1.default.createElement("div", null,
-                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold" })),
+                title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "60px", customFontWeight: "bold", lineHeight: 1.2 })),
                 description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                     react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
                 (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },

package/dist/src/sub/DynamicLayout/mobile/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/mobile/components/Section/Section.js

@@ -153,13 +153,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.4 : _b, textLabelProps = __rest(_a, ["text", "color", "lineHeight"]);
+    return (react_1.default.createElement(S_TitleStyleWrapper, { color: color, lineHeight: lineHeight },
         react_1.default.createElement(mobile_1.M_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/mobile/components/common/Carousel.js

@@ -61,13 +61,13 @@ var S_SwiperStyleWrapper = styled_components_1.default.div(templateObject_2 || (
     return paginationSpacing[1];
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_pagination_dot_01;
+    return theme.ui_cpnt_pagination_dot_02;
 }, function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_pagination_dot_border;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.ui_cpnt_pagination_dot_02;
+    return theme.ui_cpnt_pagination_dot_01;
 });
 exports.default = Carousel;
 var templateObject_1, templateObject_2;

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

@@ -59,9 +59,9 @@ function TemplateA() {
         : [];
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
+            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
+            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
         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,
@@ -83,11 +83,11 @@ function TemplateA() {
             }))))));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsCarouselSection/templates/TemplateB/TemplateB.js

@@ -59,9 +59,9 @@ function TemplateB() {
         : [];
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: !title && !description && !buttonAlphaLinkSrc && filteredItems.length === 0 },
         title && (react_1.default.createElement(S_SectionTitleBox, null,
-            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "headingBold" }))),
+            react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Regular" }))),
+            react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
         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 && (react_1.default.createElement(S_CarouselBox, null,
@@ -83,11 +83,11 @@ function TemplateB() {
             }))))));
 }
 var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"], ["\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
-    var theme = _a.theme, hasNothing = _a.hasNothing;
-    return (hasNothing ? 0 : theme.spacing.spacingG);
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateA/TemplateA.js

@@ -36,34 +36,36 @@ function TemplateA() {
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
         sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover" }))))),
-        title && react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
+            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
+        title && (react_1.default.createElement(S_SectionTitleBox, null,
+            react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" }))),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingG;
+});
+var S_SectionTitleBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing.spacingD;
 });
-var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingD;
 });
-var S_ButtonBox = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
+var S_ButtonBox = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingF;
 });
 exports.default = TemplateA;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/src/sub/DynamicLayout/mobile/sections/ContentsSection/templates/TemplateB/TemplateB.js

@@ -35,27 +35,24 @@ function TemplateB() {
     var _b = sectionContext.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex, buttonAlphaDesignType = _b.buttonAlphaDesignType, buttonAlphaLabelColorInHex = _b.buttonAlphaLabelColorInHex, buttonAlphaBackgroundColorInHex = _b.buttonAlphaBackgroundColorInHex;
     var hasNothing = !sectionContentMediaSrc && !title && !description && !buttonAlphaLinkSrc;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
+        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, customFontSize: "32px", customFontWeight: "bold" })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, customFontSize: "20px", customFontWeight: "bold" }))),
         sectionContentMediaSrc && (react_1.default.createElement(react_1.default.Fragment, null, sectionContentMediaType === 'IMAGE' && (react_1.default.createElement(S_ImageBox, null,
-            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover" }))))),
+            react_1.default.createElement(Section_1.Section.Image, { src: sectionContentMediaSrc, width: "responsive", ratio: "1_1", scaleType: "cover", shapeType: "rectangle" }))))),
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.spacing.spacingE;
+    return theme.spacing.spacingG;
 });
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateA/TemplateA.js

@@ -57,15 +57,12 @@ function TemplateA() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/sections/FooterSection/templates/TemplateB/TemplateB.js

@@ -57,15 +57,12 @@ function TemplateB() {
             react_1.default.createElement(Item_1.Item.Image, { ratio: "auto", height: 48, scaleType: "fill", src: filteredItems[0].properties.logoImageSrc }))),
         filteredItems[0].properties.body && (react_1.default.createElement(Item_1.Item.HTMLReader, { data: filteredItems[0].properties.body, styleTheme: "caption1Regular", color: itemDescriptionColorInHex, textAlign: "center" }))))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && "margin: 0";
 });
 var S_ImageBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/sections/InfoBoxSection/templates/TemplateA/TemplateA.js

@@ -54,9 +54,9 @@ function TemplateA() {
         : [];
     var hasNothing = !title && !description && !buttonAlphaLinkSrc && filteredItems.length <= 0;
     return (react_1.default.createElement(S_ContentsArea, { hasNothing: hasNothing },
-        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold" })),
+        title && (react_1.default.createElement(Section_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "32px", customFontWeight: "bold" })),
         description && (react_1.default.createElement(S_SectionDescriptionBox, null,
-            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
+            react_1.default.createElement(Section_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", customFontSize: "20px", customFontWeight: "bold" }))),
         filteredItems.length > 0 && (react_1.default.createElement(S_ItemsWrapper, null, filteredItems.map(function (item, index) {
             var id = item.id;
             var _a = item.properties, itemTitle = _a.title, itemDescription = _a.description, itemImageSrc = _a.imageSrc;
@@ -71,15 +71,12 @@ function TemplateA() {
         buttonAlphaLinkSrc && (react_1.default.createElement(S_ButtonBox, null,
             react_1.default.createElement(Section_1.Section.Button, { buttonType: buttonAlphaDesignType, text: buttonAlphaLabel, linkType: buttonAlphaLinkType, src: buttonAlphaLinkSrc, textColor: buttonAlphaLabelColorInHex, backgroundColor: buttonAlphaBackgroundColorInHex, borderColor: buttonAlphaLabelColorInHex })))));
 }
-var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " ", ";\n  ", "\n"], ["\n  margin: ", " ", ";\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingG;
+var S_ContentsArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", " 0;\n  padding: 0 ", ";\n"], ["\n  margin: ", " 0;\n  padding: 0 ", ";\n"])), function (_a) {
+    var hasNothing = _a.hasNothing;
+    return (hasNothing ? 0 : '80px');
 }, function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingE;
-}, function (_a) {
-    var hasNothing = _a.hasNothing;
-    return hasNothing && 'margin: 0';
 });
 var S_SectionDescriptionBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", " 0;\n"], ["\n  margin: ", " 0;\n"])), function (_a) {
     var theme = _a.theme;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateA/TemplateA.js

@@ -35,9 +35,17 @@ function TemplateA() {
     var _b = context.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
     var _c = context.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType, buttonBravoLabel = _c.buttonBravoLabel, buttonBravoLinkSrc = _c.buttonBravoLinkSrc, buttonBravoLinkType = _c.buttonBravoLinkType, buttonCharlieLabel = _c.buttonCharlieLabel, buttonCharlieLinkSrc = _c.buttonCharlieLinkSrc, buttonCharlieLinkType = _c.buttonCharlieLinkType;
     var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
-    return (react_1.default.createElement(S_FullScreenWrapper, null,
+    var _e = (0, react_1.useState)(window.innerHeight * 0.01), vh = _e[0], setVH = _e[1];
+    var handleResize = function () {
+        setVH(window.innerHeight * 0.01);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold" })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", customFontSize: "40px", customFontWeight: "bold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -45,7 +53,10 @@ function TemplateA() {
                 buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                 buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: center;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: center;\n"])), function (_a) {
+    var vh = _a.vh;
+    return vh * 100;
+});
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " ", ";\n"], ["\n  width: 100%;\n  margin: ", " ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateB/TemplateB.js

@@ -35,9 +35,17 @@ function TemplateB() {
     var _b = context.styles, titleColorInHex = _b.titleColorInHex, descriptionColorInHex = _b.descriptionColorInHex;
     var _c = context.properties, buttonAlphaLabel = _c.buttonAlphaLabel, buttonAlphaLinkSrc = _c.buttonAlphaLinkSrc, buttonAlphaLinkType = _c.buttonAlphaLinkType, buttonBravoLabel = _c.buttonBravoLabel, buttonBravoLinkSrc = _c.buttonBravoLinkSrc, buttonBravoLinkType = _c.buttonBravoLinkType, buttonCharlieLabel = _c.buttonCharlieLabel, buttonCharlieLinkSrc = _c.buttonCharlieLinkSrc, buttonCharlieLinkType = _c.buttonCharlieLinkType;
     var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
-    return (react_1.default.createElement(S_FullScreenWrapper, null,
+    var _e = (0, react_1.useState)(window.innerHeight * 0.01), vh = _e[0], setVH = _e[1];
+    var handleResize = function () {
+        setVH(window.innerHeight * 0.01);
+    };
+    (0, react_1.useEffect)(function () {
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return (react_1.default.createElement(S_FullScreenWrapper, { vh: vh },
         react_1.default.createElement(S_ContentsArea, null,
-            title && react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold" }),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "headingBold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body2Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },
@@ -45,7 +53,10 @@ function TemplateB() {
                 buttonBravoLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonBravoLabel, src: buttonBravoLinkSrc, linkType: buttonBravoLinkType, buttonType: buttonBravoDesignType, backgroundColor: buttonBravoBackgroundColorInHex, textColor: buttonBravoLabelColorInHex, borderColor: buttonBravoLabelColorInHex })),
                 buttonCharlieLinkSrc && (react_1.default.createElement(components_1.Section.Button, { text: buttonCharlieLabel, src: buttonCharlieLinkSrc, linkType: buttonCharlieLinkType, buttonType: buttonCharlieDesignType, backgroundColor: buttonCharlieBackgroundColorInHex, textColor: buttonCharlieLabelColorInHex, borderColor: buttonCharlieLabelColorInHex })))))));
 }
-var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: flex-end;\n"], ["\n  width: 100%;\n  min-height: 100vh;\n  display: flex;\n  align-items: flex-end;\n"])));
+var S_FullScreenWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: flex-end;\n"], ["\n  width: 100%;\n  min-height: calc(100vh - 56px); // fallback\n  min-height: calc(", "px - 56px);\n  display: flex;\n  align-items: flex-end;\n"])), function (_a) {
+    var vh = _a.vh;
+    return vh * 100;
+});
 var S_ContentsArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  margin: ", " ", ";\n"], ["\n  width: 100%;\n  margin: ", " ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.spacing.spacingG;

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateC/TemplateC.js

@@ -37,7 +37,7 @@ function TemplateC() {
     var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
-            title && react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold" }),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, styleTheme: "displayBold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },

package/dist/src/sub/DynamicLayout/mobile/sections/IntroSection/templates/TemplateD/TemplateD.js

@@ -37,7 +37,7 @@ function TemplateD() {
     var _d = context.styles, buttonAlphaDesignType = _d.buttonAlphaDesignType, buttonAlphaBackgroundColorInHex = _d.buttonAlphaBackgroundColorInHex, buttonAlphaLabelColorInHex = _d.buttonAlphaLabelColorInHex, buttonBravoDesignType = _d.buttonBravoDesignType, buttonBravoBackgroundColorInHex = _d.buttonBravoBackgroundColorInHex, buttonBravoLabelColorInHex = _d.buttonBravoLabelColorInHex, buttonCharlieDesignType = _d.buttonCharlieDesignType, buttonCharlieBackgroundColorInHex = _d.buttonCharlieBackgroundColorInHex, buttonCharlieLabelColorInHex = _d.buttonCharlieLabelColorInHex;
     return (react_1.default.createElement(S_FullScreenWrapper, null,
         react_1.default.createElement(S_ContentsArea, null,
-            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold" })),
+            title && (react_1.default.createElement(components_1.Section.Title, { text: title, color: titleColorInHex, textAlign: "center", styleTheme: "displayBold", lineHeight: 1.2 })),
             description && (react_1.default.createElement(S_SectionDescriptionBox, { hasTitle: !!title },
                 react_1.default.createElement(components_1.Section.Description, { text: description, color: descriptionColorInHex, textAlign: "center", styleTheme: "body1Bold" }))),
             (buttonAlphaLinkSrc || buttonBravoLinkSrc || buttonCharlieLinkSrc) && (react_1.default.createElement(S_SectionButtonBox, { hasTitle: !!title, hasDescription: !!description },

package/dist/src/sub/DynamicLayout/types.js

@@ -29,7 +29,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'NONE',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -89,7 +89,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'INTERNAL_LINK',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -153,7 +153,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'NONE',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -394,7 +394,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'INTERNAL_LINK',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {
@@ -495,7 +495,7 @@ exports.MOCK_DATA = [
             buttonEchoLinkType: 'INTERNAL_LINK',
             buttonEchoLinkSrc: '',
             carouselAutoplayMode: 'AUTO',
-            carouselAutoplayTime: 5,
+            carouselAutoplayTime: 1,
             carouselInfiniteLoopMode: 'USE'
         },
         styles: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,10 +1,20 @@
 # PDS-DEV-KIT-WEB-TEST Release Notes
-## [v0.0.14]
+## [v0.0.15]
 
 * sub
-  * DynamicLayout 수정
-    * <chore> export dynamicLayout on index
-    * <fix> DynamicLayout-ContentsCarouselSection: use carousel playmode
-    * <fix> DynamicLayout-IntroSection:fix height of templateC,B
-    * <fix> DynamicLayout: fix Section background
-    * <fix> DynamicLayout: fix HTMLReader font color
+  * DynamicLayout 디자인 디테일 수정
+    * desktop
+      * Intro 섹션 타이틀 line-height 1.2
+      * Intro 제외 섹션 타이틀 line-height 1.3
+      * Intro 제외 섹션 타이틀 사이즈 48px로 일괄 적용
+      * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 80px -> 160px으로 수정
+    * mobile
+      * Intro 섹션 타이틀 line-height 1.2
+      * Intro 제외 섹션 타이틀 line-height 1.4
+      * Intro 제외 섹션 타이틀 사이즈 32px로 일괄 적용
+      * Intro 제외 섹션 본문 bold 일괄 적용
+      * Intro 제외 섹션 본문 customFontSize : 20px
+      * Intro 제외 섹션과 콘텐츠 영역 상하단 margin 48px -> 80px으로 수정
+      * Content Section
+      * 이미지와 텍스트 사이 24px -> 48px
+      * 콘텐츠와 인디케이터 사이 간격 확인 / 인티케이터 하단 마진 조정 필요