refactor: test-gil 브랜치 추가

assets/css/style.css

@@ -21,6 +21,8 @@ body {
     line-height: 1.5;
     color: #111;
     text-size-adjust: none;
+    text-size-adjust: none;
+    text-size-adjust: none;
     box-sizing: border-box;
     box-sizing: border-box;
     box-sizing: border-box;
@@ -40,9 +42,9 @@ hgroup,
 menu,
 nav,
 section {
-  display: block\9 ;
-  margin: 0\9 ;
-  padding: 0\9 ;
+    display: block\9;
+    margin: 0\9;
+    padding: 0\9;
 }
 
 hr {
@@ -204,6 +206,816 @@ a {
     text-decoration: none;
 }
 
+/**
+ * Swiper 11.1.15
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2024 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: November 18, 2024
+ */
+@font-face {
+    font-family: swiper-icons;
+    src: url("data:application/font-woff;charset=utf-8;base64, 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");
+    font-weight: 400;
+    font-style: normal;
+}
+
+:root {
+    --swiper-theme-color: #007aff;
+}
+
+:host {
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    z-index: 1;
+}
+
+.swiper {
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    overflow: hidden;
+    list-style: none;
+    padding: 0;
+    z-index: 1;
+    display: block;
+}
+
+.swiper-vertical > .swiper-wrapper {
+    flex-direction: column;
+}
+
+.swiper-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    display: flex;
+    transition-property: transform;
+    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+    box-sizing: content-box;
+}
+
+.swiper-android .swiper-slide,
+.swiper-ios .swiper-slide,
+.swiper-wrapper {
+    transform: translate3d(0, 0, 0);
+}
+
+.swiper-horizontal {
+    touch-action: pan-y;
+}
+
+.swiper-vertical {
+    touch-action: pan-x;
+}
+
+.swiper-slide {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transition-property: transform;
+    display: block;
+}
+
+.swiper-slide-invisible-blank {
+    visibility: hidden;
+}
+
+.swiper-autoheight,
+.swiper-autoheight .swiper-slide {
+    height: auto;
+}
+
+.swiper-autoheight .swiper-wrapper {
+    align-items: flex-start;
+    transition-property: transform, height;
+}
+
+.swiper-backface-hidden .swiper-slide {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+    perspective: 1200px;
+}
+
+.swiper-3d .swiper-wrapper {
+    transform-style: preserve-3d;
+}
+
+.swiper-3d {
+    perspective: 1200px;
+}
+
+.swiper-3d .swiper-cube-shadow,
+.swiper-3d .swiper-slide {
+    transform-style: preserve-3d;
+}
+
+.swiper-css-mode > .swiper-wrapper {
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
+    display: none;
+}
+
+.swiper-css-mode > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: start start;
+}
+
+.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
+    scroll-snap-type: x mandatory;
+}
+
+.swiper-css-mode.swiper-vertical > .swiper-wrapper {
+    scroll-snap-type: y mandatory;
+}
+
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
+    scroll-snap-type: none;
+}
+
+.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: none;
+}
+
+.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
+    content: "";
+    flex-shrink: 0;
+    order: 9999;
+}
+
+.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: center center;
+    scroll-snap-stop: always;
+}
+
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
+    -webkit-margin-start: var(--swiper-centered-offset-before);
+    margin-inline-start: var(--swiper-centered-offset-before);
+}
+
+.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
+    height: 100%;
+    min-height: 1px;
+    width: var(--swiper-centered-offset-after);
+}
+
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
+    -webkit-margin-before: var(--swiper-centered-offset-before);
+    margin-block-start: var(--swiper-centered-offset-before);
+}
+
+.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
+    width: 100%;
+    min-width: 1px;
+    height: var(--swiper-centered-offset-after);
+}
+
+.swiper-3d .swiper-slide-shadow,
+.swiper-3d .swiper-slide-shadow-bottom,
+.swiper-3d .swiper-slide-shadow-left,
+.swiper-3d .swiper-slide-shadow-right,
+.swiper-3d .swiper-slide-shadow-top {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+}
+
+.swiper-3d .swiper-slide-shadow {
+    background: rgb(0 0 0 / 15%);
+}
+
+.swiper-3d .swiper-slide-shadow-left {
+    background-image: linear-gradient(to left, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
+}
+
+.swiper-3d .swiper-slide-shadow-right {
+    background-image: linear-gradient(to right, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
+}
+
+.swiper-3d .swiper-slide-shadow-top {
+    background-image: linear-gradient(to top, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
+}
+
+.swiper-3d .swiper-slide-shadow-bottom {
+    background-image: linear-gradient(to bottom, rgb(0 0 0 / 50%), rgb(0 0 0 / 0%));
+}
+
+.swiper-lazy-preloader {
+    width: 42px;
+    height: 42px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -21px;
+    margin-top: -21px;
+    z-index: 10;
+    transform-origin: 50%;
+    box-sizing: border-box;
+    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+    border-radius: 50%;
+    border-top-color: transparent;
+}
+
+.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
+.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
+    animation: swiper-preloader-spin 1s infinite linear;
+    animation: swiper-preloader-spin 1s infinite linear;
+}
+
+.swiper-lazy-preloader-white {
+    --swiper-preloader-color: #fff;
+}
+
+.swiper-lazy-preloader-black {
+    --swiper-preloader-color: #000;
+}
+
+@keyframes swiper-preloader-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes swiper-preloader-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.swiper-virtual .swiper-slide {
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+}
+
+.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+}
+
+.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
+    height: 1px;
+    width: var(--swiper-virtual-size);
+}
+
+.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
+    width: 1px;
+    height: var(--swiper-virtual-size);
+}
+
+:root {
+    --swiper-navigation-size: 44px;
+}
+
+.swiper-button-next,
+.swiper-button-prev {
+    position: absolute;
+    top: var(--swiper-navigation-top-offset, 50%);
+    width: calc(var(--swiper-navigation-size) / 44 * 27);
+    height: var(--swiper-navigation-size);
+    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
+    z-index: 10;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--swiper-navigation-color, var(--swiper-theme-color));
+}
+
+.swiper-button-next.swiper-button-disabled,
+.swiper-button-prev.swiper-button-disabled {
+    opacity: 0.35;
+    cursor: auto;
+    pointer-events: none;
+}
+
+.swiper-button-next.swiper-button-hidden,
+.swiper-button-prev.swiper-button-hidden {
+    opacity: 0;
+    cursor: auto;
+    pointer-events: none;
+}
+
+.swiper-navigation-disabled .swiper-button-next,
+.swiper-navigation-disabled .swiper-button-prev {
+    display: none !important;
+}
+
+.swiper-button-next svg,
+.swiper-button-prev svg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    object-fit: contain;
+    transform-origin: center;
+}
+
+.swiper-rtl .swiper-button-next svg,
+.swiper-rtl .swiper-button-prev svg {
+    transform: rotate(180deg);
+}
+
+.swiper-button-prev,
+.swiper-rtl .swiper-button-next {
+    left: var(--swiper-navigation-sides-offset, 10px);
+    right: auto;
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+    right: var(--swiper-navigation-sides-offset, 10px);
+    left: auto;
+}
+
+.swiper-button-lock {
+    display: none;
+}
+
+.swiper-button-next::after,
+.swiper-button-prev::after {
+    font-family: swiper-icons;
+    font-size: var(--swiper-navigation-size);
+    text-transform: none !important;
+    letter-spacing: 0;
+    font-variant: initial;
+    line-height: 1;
+}
+
+.swiper-button-prev::after,
+.swiper-rtl .swiper-button-next::after {
+    content: "prev";
+}
+
+.swiper-button-next,
+.swiper-rtl .swiper-button-prev {
+    right: var(--swiper-navigation-sides-offset, 10px);
+    left: auto;
+}
+
+.swiper-button-next::after,
+.swiper-rtl .swiper-button-prev::after {
+    content: "next";
+}
+
+.swiper-pagination {
+    position: absolute;
+    text-align: center;
+    transition: 0.3s opacity;
+    transform: translate3d(0, 0, 0);
+    z-index: 10;
+}
+
+.swiper-pagination.swiper-pagination-hidden {
+    opacity: 0;
+}
+
+.swiper-pagination-disabled > .swiper-pagination,
+.swiper-pagination.swiper-pagination-disabled {
+    display: none !important;
+}
+
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal,
+.swiper-pagination-custom,
+.swiper-pagination-fraction {
+    bottom: var(--swiper-pagination-bottom, 8px);
+    top: var(--swiper-pagination-top, auto);
+    left: 0;
+    width: 100%;
+}
+
+.swiper-pagination-bullets-dynamic {
+    overflow: hidden;
+    font-size: 0;
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    transform: scale(0.33);
+    position: relative;
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
+    transform: scale(1);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
+    transform: scale(1);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
+    transform: scale(0.66);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
+    transform: scale(0.33);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
+    transform: scale(0.66);
+}
+
+.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
+    transform: scale(0.33);
+}
+
+.swiper-pagination-bullet {
+    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+    display: inline-block;
+    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
+    background: var(--swiper-pagination-bullet-inactive-color, #000);
+    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
+}
+
+button.swiper-pagination-bullet {
+    border: none;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    appearance: none;
+    appearance: none;
+    appearance: none;
+    appearance: none;
+}
+
+.swiper-pagination-clickable .swiper-pagination-bullet {
+    cursor: pointer;
+}
+
+.swiper-pagination-bullet:only-child {
+    display: none !important;
+}
+
+.swiper-pagination-bullet-active {
+    opacity: var(--swiper-pagination-bullet-opacity, 1);
+    background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+
+.swiper-pagination-vertical.swiper-pagination-bullets,
+.swiper-vertical > .swiper-pagination-bullets {
+    right: var(--swiper-pagination-right, 8px);
+    left: var(--swiper-pagination-left, auto);
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+}
+
+.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+    display: block;
+}
+
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+}
+
+.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    display: inline-block;
+    transition: 0.2s transform, 0.2s top;
+}
+
+.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+}
+
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+}
+
+.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
+.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    transition: 0.2s transform, 0.2s left;
+}
+
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+    transition: 0.2s transform, 0.2s right;
+}
+
+.swiper-pagination-fraction {
+    color: var(--swiper-pagination-fraction-color, inherit);
+}
+
+.swiper-pagination-progressbar {
+    background: var(--swiper-pagination-progressbar-bg-color, rgb(0 0 0 / 25%));
+    position: absolute;
+}
+
+.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+    background: var(--swiper-pagination-color, var(--swiper-theme-color));
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform: scale(0);
+    transform-origin: left top;
+}
+
+.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
+    transform-origin: right top;
+}
+
+.swiper-horizontal > .swiper-pagination-progressbar,
+.swiper-pagination-progressbar.swiper-pagination-horizontal,
+.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
+.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
+    width: 100%;
+    height: var(--swiper-pagination-progressbar-size, 4px);
+    left: 0;
+    top: 0;
+}
+
+.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
+.swiper-pagination-progressbar.swiper-pagination-vertical,
+.swiper-vertical > .swiper-pagination-progressbar {
+    width: var(--swiper-pagination-progressbar-size, 4px);
+    height: 100%;
+    left: 0;
+    top: 0;
+}
+
+.swiper-pagination-lock {
+    display: none;
+}
+
+.swiper-scrollbar {
+    border-radius: var(--swiper-scrollbar-border-radius, 10px);
+    position: relative;
+    touch-action: none;
+    background: var(--swiper-scrollbar-bg-color, rgb(0 0 0 / 10%));
+}
+
+.swiper-scrollbar-disabled > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-disabled {
+    display: none !important;
+}
+
+.swiper-horizontal > .swiper-scrollbar,
+.swiper-scrollbar.swiper-scrollbar-horizontal {
+    position: absolute;
+    left: var(--swiper-scrollbar-sides-offset, 1%);
+    bottom: var(--swiper-scrollbar-bottom, 4px);
+    top: var(--swiper-scrollbar-top, auto);
+    z-index: 50;
+    height: var(--swiper-scrollbar-size, 4px);
+    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+
+.swiper-scrollbar.swiper-scrollbar-vertical,
+.swiper-vertical > .swiper-scrollbar {
+    position: absolute;
+    left: var(--swiper-scrollbar-left, auto);
+    right: var(--swiper-scrollbar-right, 4px);
+    top: var(--swiper-scrollbar-sides-offset, 1%);
+    z-index: 50;
+    width: var(--swiper-scrollbar-size, 4px);
+    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+}
+
+.swiper-scrollbar-drag {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: var(--swiper-scrollbar-drag-bg-color, rgb(0 0 0 / 50%));
+    border-radius: var(--swiper-scrollbar-border-radius, 10px);
+    left: 0;
+    top: 0;
+}
+
+.swiper-scrollbar-cursor-drag {
+    cursor: move;
+}
+
+.swiper-scrollbar-lock {
+    display: none;
+}
+
+.swiper-zoom-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+.swiper-zoom-container > canvas,
+.swiper-zoom-container > img,
+.swiper-zoom-container > svg {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    object-fit: contain;
+}
+
+.swiper-slide-zoomed {
+    cursor: move;
+    touch-action: none;
+}
+
+.swiper .swiper-notification {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    opacity: 0;
+    z-index: -1000;
+}
+
+.swiper-free-mode > .swiper-wrapper {
+    transition-timing-function: ease-out;
+    margin: 0 auto;
+}
+
+.swiper-grid > .swiper-wrapper {
+    flex-wrap: wrap;
+}
+
+.swiper-grid-column > .swiper-wrapper {
+    flex-flow: column wrap;
+}
+
+.swiper-fade.swiper-free-mode .swiper-slide {
+    transition-timing-function: ease-out;
+}
+
+.swiper-fade .swiper-slide {
+    pointer-events: none;
+    transition-property: opacity;
+}
+
+.swiper-fade .swiper-slide .swiper-slide {
+    pointer-events: none;
+}
+
+.swiper-fade .swiper-slide-active {
+    pointer-events: auto;
+}
+
+.swiper-fade .swiper-slide-active .swiper-slide-active {
+    pointer-events: auto;
+}
+
+.swiper.swiper-cube {
+    overflow: visible;
+}
+
+.swiper-cube .swiper-slide {
+    pointer-events: none;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1;
+    visibility: hidden;
+    transform-origin: 0 0;
+    width: 100%;
+    height: 100%;
+}
+
+.swiper-cube .swiper-slide .swiper-slide {
+    pointer-events: none;
+}
+
+.swiper-cube.swiper-rtl .swiper-slide {
+    transform-origin: 100% 0;
+}
+
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-active .swiper-slide-active {
+    pointer-events: auto;
+}
+
+.swiper-cube .swiper-slide-active,
+.swiper-cube .swiper-slide-next,
+.swiper-cube .swiper-slide-prev {
+    pointer-events: auto;
+    visibility: visible;
+}
+
+.swiper-cube .swiper-cube-shadow {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6;
+    z-index: 0;
+}
+
+.swiper-cube .swiper-cube-shadow::before {
+    content: "";
+    background: #000;
+    position: absolute;
+    inset: 0;
+    filter: blur(50px);
+}
+
+.swiper-cube .swiper-slide-next + .swiper-slide {
+    pointer-events: auto;
+    visibility: visible;
+}
+
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
+.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
+    z-index: 0;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.swiper.swiper-flip {
+    overflow: visible;
+}
+
+.swiper-flip .swiper-slide {
+    pointer-events: none;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    z-index: 1;
+}
+
+.swiper-flip .swiper-slide .swiper-slide {
+    pointer-events: none;
+}
+
+.swiper-flip .swiper-slide-active,
+.swiper-flip .swiper-slide-active .swiper-slide-active {
+    pointer-events: auto;
+}
+
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
+.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
+    z-index: 0;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.swiper-creative .swiper-slide {
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: hidden;
+    transition-property: transform, opacity, height;
+}
+
+.swiper.swiper-cards {
+    overflow: visible;
+}
+
+.swiper-cards .swiper-slide {
+    transform-origin: center bottom;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    backface-visibility: hidden;
+    overflow: hidden;
+}
+
 :host {
     position: relative;
     display: block;
@@ -448,16 +1260,6 @@ a {
     }
 }
 
-@keyframes swiper-preloader-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /* Slide styles end */
 .layer-wrap {
     overflow-y: auto;
@@ -1325,3 +2127,18 @@ a {
         font-size: 14px;
     }
 }
+
+.test-gil {
+    color: red;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 1px solid red;
+    border-radius: 10px;
+    background-color: #f0f0f0;
+    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
+    text-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
+    text-transform: uppercase;
+}

assets/css/style.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
-@use '_reset' as *;
-@use '_swiper' as *;
+@use "_reset" as *;
+@use "_swiper" as *;
 
 // rem 변환 $value = 디자인px
 @function rem($value) {
@@ -16,7 +16,7 @@ $flex-map: (
     between: space-between,
     around: space-around,
     stretch: stretch,
-  center: center
+    center: center,
 );
 
 @function _get-flex-value($key) {
@@ -41,8 +41,8 @@ $flex-map: (
 .layer-wrap {
     overflow-y: auto;
     position: fixed;
-  top:0;
-  left:0;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     background-color: #f3f4f9;
@@ -71,12 +71,11 @@ $flex-map: (
             width: rem(30); // 화살표 너비
             height: rem(30); // 화살표 높이
 
-
             &::before {
                 position: absolute;
                 top: 30%;
                 left: 40%;
-        content: '';
+                content: "";
                 width: rem(12); // 화살표 크기
                 height: rem(12); // 화살표 크기
                 border-top: rem(2) solid #000; // 화살표 선
@@ -84,7 +83,6 @@ $flex-map: (
                 transform: rotate(225deg); // 다음 화살표
             }
 
-
             em {
                 display: block;
                 text-indent: -9999em;
@@ -93,7 +91,7 @@ $flex-map: (
 
         .btn-close {
             position: absolute;
-      top:50%;
+            top: 50%;
             right: rem(20);
             transform: translateY(-50%);
             width: rem(26);
@@ -108,7 +106,7 @@ $flex-map: (
     }
 
     .layer-container {
-    padding:rem(60) 0 0;
+        padding: rem(60) 0 0;
 
         .layer-content-header {
             padding: rem(16);
@@ -118,7 +116,7 @@ $flex-map: (
             .point-area {
                 position: relative;
                 height: rem(130);
-        padding:0 rem(20);
+                padding: 0 rem(20);
                 background: url("../images/ico_point.png") no-repeat 95% 50% / rem(72) auto;
 
                 dt {
@@ -127,9 +125,9 @@ $flex-map: (
                     color: #000;
 
                     span {
-            margin-left:rem(4);
+                        margin-left: rem(4);
                         font-size: rem(10);
-            color:#6b6b6b;
+                        color: #6b6b6b;
                         font-weight: 400;
                     }
                 }
@@ -150,46 +148,44 @@ $flex-map: (
                     @include flex(start, center);
 
                     position: absolute;
-          top:0;
-          right:rem(20);
+                    top: 0;
+                    right: rem(20);
 
                     em {
                         display: block;
-            color:#666;
+                        color: #666;
                         font-size: rem(14);
                         font-weight: 400;
-            border-bottom:1px solid #666;
+                        border-bottom: 1px solid #666;
                     }
 
                     &::before {
-            content:"";
+                        content: "";
                         display: block;
                         width: rem(14);
                         height: rem(14);
                         margin-right: rem(4);
                         background: url("../images/ico_info.png") no-repeat center / 100% auto;
                     }
-    
                 }
             }
 
             .btn-txt-arr {
                 @include flex(start, center);
 
-        border-bottom:1px solid #6b6b6b;
-        color:#6b6b6b;
+                border-bottom: 1px solid #6b6b6b;
+                color: #6b6b6b;
                 font-size: rem(10);
                 font-weight: 400;
 
                 &::after {
-          content:"";
+                    content: "";
                     display: block;
                     width: rem(8);
                     height: rem(8);
                     margin-left: rem(4);
                     background: url("../images/ico_arrow_r2.png") no-repeat center / 100% auto;
                 }
-  
             }
 
             .btn-area {
@@ -205,7 +201,7 @@ $flex-map: (
                     height: rem(76);
                     padding: rem(14);
                     font-size: rem(16);
-          color:#fff;
+                    color: #fff;
                     font-weight: 500;
                     border-radius: rem(16);
                     text-align: left;
@@ -219,8 +215,8 @@ $flex-map: (
                         @include flex(end, center);
 
                         position: absolute;
-            top:0;
-            left:0;
+                        top: 0;
+                        left: 0;
                         width: 100%;
                         height: 100%;
                         padding-right: rem(14);
@@ -232,7 +228,7 @@ $flex-map: (
                     background-color: #1e1a3a;
 
                     &::after {
-            content:"";
+                        content: "";
                         display: block;
                         width: rem(26);
                         height: rem(26);
@@ -240,24 +236,23 @@ $flex-map: (
                     }
                 }
             }
-      
         }
 
         .layer-content {
-      padding:rem(22) rem(16) rem(16);
+            padding: rem(22) rem(16) rem(16);
 
             .category-area {
                 overflow: hidden;
                 position: relative;
                 padding-right: rem(44);
-        margin-bottom:rem(16);
+                margin-bottom: rem(16);
 
                 &::after {
-          content:"";
+                    content: "";
                     display: block;
                     position: absolute;
-          top:0;
-          right:0;
+                    top: 0;
+                    right: 0;
                     z-index: 1;
                     width: rem(62);
                     height: 100%;
@@ -269,9 +264,9 @@ $flex-map: (
                     @include flex(center, center);
 
                     height: rem(36);
-          padding:0 rem(12);
+                    padding: 0 rem(12);
                     font-size: rem(16);
-          color:#7a7d87;
+                    color: #7a7d87;
                     font-weight: 400;
                     background-color: #e4e7ee;
                     border-radius: rem(18);
@@ -285,19 +280,16 @@ $flex-map: (
                 .btn-more {
                     display: block;
                     position: absolute;
-          top:50%;
-          right:0;
+                    top: 50%;
+                    right: 0;
                     z-index: 2;
                     transform: translateY(-50%);
                     width: rem(30);
                     height: rem(30);
                     background: url("../images/btn_more.png") no-repeat center / 100% auto;
-
                 }
             }
 
-      
-
             .list-area {
                 .noti {
                     @include flex(between, center);
@@ -305,9 +297,9 @@ $flex-map: (
                     width: 100%;
                     height: rem(111);
                     padding: rem(2);
-          margin-bottom:rem(14);
+                    margin-bottom: rem(14);
                     border-radius: rem(16);
-          border: 0 ;
+                    border: 0;
                     border-image-source: linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
                     border-image-slice: 1;
                     background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to right, #e30084, #a62cbf 51%, #6b57f8);
@@ -315,13 +307,13 @@ $flex-map: (
                     background-clip: content-box, border-box;
 
                     .txt-area {
-            padding:0 rem(20);
+                        padding: 0 rem(20);
                         line-height: 1.3;
 
                         .tit {
                             position: relative;
                             font-size: rem(18);
-              color:#7a7d87;
+                            color: #7a7d87;
                         }
 
                         .acc {
@@ -339,7 +331,7 @@ $flex-map: (
                     }
 
                     .img-area {
-            padding:0 rem(20) 0 rem(10);
+                        padding: 0 rem(20) 0 rem(10);
 
                         img {
                             width: rem(66);
@@ -354,11 +346,11 @@ $flex-map: (
                                 @include inlineflex(center, center);
 
                                 position: absolute;
-                top:rem(3);
+                                top: rem(3);
                                 left: 100%;
                                 height: rem(18);
                                 padding: 0 rem(6) rem(2);
-                margin-left:rem(8);
+                                margin-left: rem(8);
                                 font-size: rem(10);
                                 font-weight: 700;
                                 color: #e30084;
@@ -375,7 +367,7 @@ $flex-map: (
                     grid-template-columns: repeat(2, 1fr);
                     grid-template-rows: repeat(2, 1fr);
                     grid-gap: rem(10) rem(12);
-          margin-bottom:rem(22);
+                    margin-bottom: rem(22);
 
                     li {
                         overflow: hidden;
@@ -388,7 +380,7 @@ $flex-map: (
                         border-radius: rem(8);
                         background-color: #fff;
 
-            &+li {
+                        & + li {
                             margin-top: 0;
                         }
 
@@ -441,8 +433,8 @@ $flex-map: (
                                 @include inlineflex(center, center);
 
                                 position: absolute;
-              bottom:rem(8.5);
-              left:rem(6);
+                                bottom: rem(8.5);
+                                left: rem(6);
                                 height: rem(18);
                                 padding: 0 rem(6) rem(2);
                                 margin-left: rem(6);
@@ -485,9 +477,6 @@ $flex-map: (
                         }
                     }
                 }
-        
-
-        
             }
 
             .caution-area {
@@ -496,16 +485,16 @@ $flex-map: (
                 background-color: #fff;
 
                 h3 {
-          margin-bottom:rem(12);
+                    margin-bottom: rem(12);
                     font-size: rem(18);
                     font-weight: 700;
-          color:#000;
+                    color: #000;
                 }
 
                 p {
                     font-size: rem(13);
                     font-weight: 400;
-          color:#666;
+                    color: #666;
                     line-height: 1.54;
                 }
             }
@@ -513,15 +502,14 @@ $flex-map: (
     }
 }
 
-
 .point-earn {
-  padding-bottom:rem(68);
+    padding-bottom: rem(68);
     background-color: #fff;
 
     .point-info {
         width: 100%;
         height: auto;
-    padding:rem(30) rem(22);
+        padding: rem(30) rem(22);
         background: none;
 
         figure {
@@ -547,10 +535,10 @@ $flex-map: (
     }
 
     .desc {
-    padding:0 rem(22);
+        padding: 0 rem(22);
         margin: 0 0 rem(40);
 
-    >dl {
+        > dl {
             padding: 0;
         }
 
@@ -571,7 +559,7 @@ $flex-map: (
 
                 padding: rem(16) 0 0;
 
-        &+dl {
+                & + dl {
                     margin-top: 0;
                     border-top: 0;
                 }
@@ -617,7 +605,7 @@ $flex-map: (
             .txt-caution {
                 margin-top: rem(4);
 
-        &>* {
+                & > * {
                     @include flex(start, start);
 
                     font-size: rem(10);
@@ -643,7 +631,7 @@ $flex-map: (
         background-color: #f2f3f7;
         border-radius: 0;
 
-    ul+h4 {
+        ul + h4 {
             margin-top: rem(26);
         }
 
@@ -675,7 +663,6 @@ $flex-map: (
         }
     }
 
-
     .ico-bu {
         @include inlineflex(start, start);
 
@@ -690,7 +677,6 @@ $flex-map: (
             background-color: #999;
         }
     }
-
 }
 
 .btn-area.fixed-bottom {
@@ -714,7 +700,7 @@ $flex-map: (
         height: rem(58);
         padding: 0 rem(20);
         font-size: rem(20);
-    color:#fff;
+        color: #fff;
         font-weight: 500;
         border-radius: rem(8);
         background-color: #e30084;
@@ -727,7 +713,6 @@ $flex-map: (
             width: 100%;
         }
     }
-
 }
 
 .card {
@@ -756,7 +741,7 @@ $flex-map: (
             position: relative;
             font-size: rem(16);
             font-weight: 500;
-          color:#e30084;
+            color: #e30084;
             margin-bottom: rem(20);
             border-bottom: 1px solid #e30084;
 
@@ -767,7 +752,7 @@ $flex-map: (
         }
 
         img {
-        margin-top:rem(20);
+            margin-top: rem(20);
         }
     }
 
@@ -907,9 +892,23 @@ $flex-map: (
     }
 }
 
-
 @media only screen and (width <= 320px) {
     html {
         font-size: 14px;
     }
 }
+
+.test-gil {
+    color: red;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 1px solid red;
+    border-radius: 10px;
+    background-color: #f0f0f0;
+    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
+    text-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
+    text-transform: uppercase;
+}

index.html

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang="ko">
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="format-detection" content="telephone=no">
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=5"/>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="format-detection" content="telephone=no" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=5" />
         <title>쿠팡 방문하고 포인트 적립</title>
-	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet" />
         <link type="text/css" rel="stylesheet" href="assets/css/style.css" />
-
-</head>
-<body>
-<div class="layer-wrap">
+    </head>
+    <body>
+        <div class="layer-wrap">
             <!-- header -->
             <header class="layer-header">
                 <h1 class="header-title">쇼핑 적립</h1>
@@ -21,9 +20,7 @@
 
             <!-- container -->
             <div class="layer-container">
-		<div>
-			테스트를 위해 작성 주dd
-		</div>
+                <div>테스트를 위해 작성 주dd</div>
                 <ul>
                     <li>1</li>
                     <li>2</li>
@@ -34,15 +31,12 @@
                     <li>7</li>
                     <li>8</li>
                 </ul>
+                <div class="test-gil">이번에는 MR테스트트</div>
                 <div class="layer-content-header">
                     <div class="point-area">
                         <dl>
-					<dt>
-						<b>내 포인트</b><span>적립예정 : 10 건</span>
-					</dt>
-					<dd>
-						<strong>22,000</strong> P
-					</dd>
+                            <dt><b>내 포인트</b><span>적립예정 : 10 건</span></dt>
+                            <dd><strong>22,000</strong> P</dd>
                         </dl>
 
                         <button type="button" class="btn-txt-arr"><em>포인트 내역보기</em></button>
@@ -51,7 +45,8 @@
 
                     <div class="btn-area">
                         <button type="button" class="btn-discount">
-					통신비<br> 할인 받기
+                            통신비<br />
+                            할인 받기
                             <label for="switchSlide" class="btn-switch">
                                 <span class="switch">
                                     <input type="checkbox" id="switchSlide" class="checkbox" checked="checked" />
@@ -60,7 +55,10 @@
                             </label>
                         </button>
 
-				<button type="button" class="btn-point-use">포인트<br> 사용하기</button>
+                        <button type="button" class="btn-point-use">
+                            포인트<br />
+                            사용하기
+                        </button>
                     </div>
                 </div>
 
@@ -94,11 +92,9 @@
                         <div class="noti quick">
                             <div class="txt-area">
                                 <span class="tit">쿠팡 쇼핑 금액의</span>
-						<span class="acc">
-							<strong>2.2</strong>% 적립 받기
-						</span>
+                                <span class="acc"> <strong>2.2</strong>% 적립 받기 </span>
                             </div>
-					<div class="img-area"><img src="./assets/images/brand_coupang.png" alt=""></div>
+                            <div class="img-area"><img src="./assets/images/brand_coupang.png" alt="" /></div>
                         </div>
 
                         <!-- [D] 즉시적립 시 li에 quick 클래스 추가 -->
@@ -109,7 +105,7 @@
                                         <span class="tit">쿠팡</span>
                                         <span class="acc"><strong>4</strong>%</span>
                                     </div>
-							<div class="img-area"><img src="./assets/images/brand_ya.png" alt=""></div>
+                                    <div class="img-area"><img src="./assets/images/brand_ya.png" alt="" /></div>
                                 </a>
                             </li>
                             <li>
@@ -118,7 +114,7 @@
                                         <span class="tit">G마켓</span>
                                         <span class="acc"><strong>1.21</strong>%</span>
                                     </div>
-							<div class="img-area"><img src="./assets/images/brand_gmarket.png" alt=""></div>
+                                    <div class="img-area"><img src="./assets/images/brand_gmarket.png" alt="" /></div>
                                 </a>
                             </li>
                             <li>
@@ -127,7 +123,7 @@
                                         <span class="tit">알리익스프레스</span>
                                         <span class="acc"><strong>5.67</strong>%</span>
                                     </div>
-							<div class="img-area"><img src="./assets/images/brand_aliexpress.png" alt=""></div>
+                                    <div class="img-area"><img src="./assets/images/brand_aliexpress.png" alt="" /></div>
                                 </a>
                             </li>
                             <li class="quick">
@@ -136,7 +132,7 @@
                                         <span class="tit">롯데온</span>
                                         <span class="acc"><strong>2.2</strong>%</span>
                                     </div>
-							<div class="img-area"><img src="./assets/images/brand_lotte_on.png" alt=""></div>
+                                    <div class="img-area"><img src="./assets/images/brand_lotte_on.png" alt="" /></div>
                                 </a>
                             </li>
                             <li>
@@ -145,7 +141,7 @@
                                         <span class="tit">홈플러스</span>
                                         <span class="acc"><strong>1.21</strong>%</span>
                                     </div>
-							<div class="img-area"><img src="./assets/images/brand_homeplus.png" alt=""></div>
+                                    <div class="img-area"><img src="./assets/images/brand_homeplus.png" alt="" /></div>
                                 </a>
                             </li>
                             <li>
@@ -154,7 +150,7 @@
                                         <span class="tit">CJ더마켓</span>
                                         <span class="acc"><strong>5.67</strong>%</span>
                                     </div>
-							<div class="img-area"><img src="./assets/images/brand_cj_the_market.png" alt=""></div>
+                                    <div class="img-area"><img src="./assets/images/brand_cj_the_market.png" alt="" /></div>
                                 </a>
                             </li>
                         </ul>
@@ -167,26 +163,23 @@
                 </div>
             </div>
             <!-- //container -->
-</div>
-<script src="assets/js/swiper.js"></script>
+        </div>
+        <script src="assets/js/swiper.js"></script>
 
-
-<script>
-var swiper = new Swiper(".category-area", {
+        <script>
+            var swiper = new Swiper(".category-area", {
                 slidesPerView: "auto",
                 spaceBetween: 8,
                 freeMode: true,
-});
-
-const buttons = document.querySelectorAll('.btn-cate');
-buttons.forEach((button) => {
-  button.addEventListener('click', () => {
-    buttons.forEach((btn) => btn.classList.remove('active'));    
-    button.classList.add('active');
             });
-});
 
-</script>
-
-</body>
+            const buttons = document.querySelectorAll(".btn-cate");
+            buttons.forEach((button) => {
+                button.addEventListener("click", () => {
+                    buttons.forEach((btn) => btn.classList.remove("active"));
+                    button.classList.add("active");
+                });
+            });
+        </script>
+    </body>
 </html>