/**
 * @project        bata2.fave.kr
 * @author         
 * @build          Tue, Aug 5, 2025 4:29 PM
 * @copyright      Copyright (c) 2025, 
 *
 */

/* Brand Color Variables */
:root {
    /* Brand Colors */
    --primary-pink: #ED2D85;
    --primary-pink-dark: #C91E6B;
    --primary-pink-light: #F54AA0;
    --brand-black: #000000;
    --brand-purple: #8B5CF6;
    --brand-purple-dark: #7C3AED;
    --brand-purple-light: #A78BFA;
    --brand-dark-blue: #1E3A8A;
    --brand-dark-blue-light: #3B82F6;
    --brand-mehrun: #722F37;
    --brand-mehrun-dark: #5A2429;
    --brand-mehrun-light: #8B3E47;
    
    /* Legacy support */
    --primary-purple: var(--brand-purple);
    --primary-purple-dark: var(--brand-purple-dark);
    --primary-purple-light: var(--brand-purple-light);
    
    /* UI Colors */
    --bg-black: var(--brand-black);
    --bg-dark: #0A0A0F;
    --text-white: #FFFFFF;
    --text-gray: #E5E7EB;
    --text-gray-light: #9CA3AF;
    --border-gray: rgba(255, 255, 255, 0.2);
    --shadow-purple: rgba(139, 92, 246, 0.3);
    --shadow-pink: rgba(237, 45, 133, 0.3);
    
    /* Cursor Colors */
    --cursor-blue: #3B82F6;
    --cursor-blue-bright: #60A5FA;
    --cursor-blue-dark: #2563EB;
}

/* ============================================
   Custom Blue Glowing Cursor
   GPU-Optimized, Smooth, Visible on All Backgrounds
   ============================================ */

/* Default cursor remains visible - custom arrow follows it */
/* The custom cursor will track the default browser cursor position */

/* Custom Cursor Container - Optimized for Performance */
.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    pointer-events: none !important;
    z-index: 99999;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.15s ease;
    opacity: 0;
    will-change: transform;
    /* GPU acceleration optimizations */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    contain: layout style paint;
    /* Ensure it never blocks interactions */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Outer Thin Blue Ring */
.cursor-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid rgba(59, 130, 246, 0.8);
    transform: translate3d(-50%, -50%, 0);
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform;
    z-index: 1;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Blue Glow/Aura around white dot */
.cursor-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, rgba(59, 130, 246, 0.3) 50%, transparent 100%);
    transform: translate3d(-50%, -50%, 0);
    transition: transform 0.08s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: transform;
    z-index: 2;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Inner Bright White Dot - Center */
.cursor-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    transform: translate3d(-50%, -50%, 0);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
    transition: transform 0.06s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    pointer-events: none;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Hover states - minimal scale - Ultra Light */
/* Scale handled by transform on child elements */

.custom-cursor.hover .cursor-outer {
    transform: translate3d(-50%, -50%, 0) scale(1.15);
    opacity: 1;
}

.custom-cursor.hover .cursor-glow {
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

.custom-cursor.hover .cursor-inner {
    transform: translate3d(-50%, -50%, 0) scale(1.1);
}

/* Click state - minimal scale - Ultra Light */
.custom-cursor.click .cursor-outer {
    transform: translate3d(-50%, -50%, 0) scale(0.9);
}

.custom-cursor.click .cursor-glow {
    transform: translate3d(-50%, -50%, 0) scale(0.9);
}

.custom-cursor.click .cursor-inner {
    transform: translate3d(-50%, -50%, 0) scale(0.9);
}

/* Smooth movement animation */
@keyframes cursorFloat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Hide cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .custom-cursor {
        display: none;
    }
    
    * {
        cursor: auto !important;
    }
}

 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     margin: 0;
     padding: 0;
     border: 0;
     font-size: 100%;
     vertical-align: baseline;
 }
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
     display: block;
 }
 
 body {
     line-height: 1;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     overscroll-behavior-y: contain;
     overscroll-behavior-x: none;
 }
 
 /* Optimize scroll performance */
 @supports (scroll-behavior: smooth) {
     html {
         scroll-behavior: smooth;
     }
     
     * {
         scroll-behavior: inherit;
     }
 }
 
 /* Smooth scroll for all scrollable containers */
 [data-smooth-scroll] {
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
 }
 
 ol,
 ul {
     list-style: none;
 }
 
 blockquote,
 q {
     quotes: none;
 }
 
 blockquote:before,
 blockquote:after,
 q:before,
 q:after {
     content: "";
     content: none;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 input[type=search]::-webkit-search-cancel-button,
 input[type=search]::-webkit-search-decoration,
 input[type=search]::-webkit-search-results-button,
 input[type=search]::-webkit-search-results-decoration {
     -webkit-appearance: none;
     -moz-appearance: none;
 }
 
 input[type=search] {
     -webkit-appearance: none;
     -moz-appearance: none;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
 }
 
 textarea {
     overflow: auto;
     vertical-align: top;
     resize: vertical;
 }
 
 audio,
 canvas,
 video {
     display: inline-block;
     *display: inline;
     *zoom: 1;
     max-width: 100%;
 }
 
 audio:not([controls]) {
     display: none;
     height: 0;
 }
 
 [hidden] {
     display: none;
 }
 
 html {
     font-size: 100%;
     -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
     scroll-behavior: smooth;
     scroll-padding-top: 100px;
     overflow-x: hidden;
}

/* Ensure anchor-linked sections are scrollable */
section[id],
div[id],
#index,
#about,
#contact {
     scroll-margin-top: 100px;
}
 
 /* Enhanced smooth scrolling with momentum */
 @media (prefers-reduced-motion: no-preference) {
     html {
         scroll-behavior: smooth;
     }
     
     * {
         scroll-behavior: inherit;
     }
 }
 
 body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    /* Optimized for smooth scrolling */
    scroll-padding-top: 80px;
 }
 
 a:active,
 a:hover {
     outline: 0;
 }
 
 img {
     border: 0;
     -ms-interpolation-mode: bicubic;
 }
 
 figure {
     margin: 0;
 }
 
 form {
     margin: 0;
 }
 
 fieldset {
     border: 1px solid silver;
     margin: 0 2px;
     padding: .35em .625em .75em;
 }
 
 legend {
     border: 0;
     padding: 0;
     white-space: normal;
     *margin-left: -7px;
 }
 
 button,
 input,
 select,
 textarea {
     font-size: 100%;
     margin: 0;
     vertical-align: baseline;
     *vertical-align: middle;
 }
 
 button,
 input {
     line-height: normal;
 }
 
 button,
 select {
     text-transform: none;
 }
 
 button,
 html input[type=button],
 input[type=reset],
 input[type=submit] {
     -webkit-appearance: button;
     cursor: pointer;
     *overflow: visible;
 }
 
 button[disabled],
 html input[disabled] {
     cursor: default;
 }
 
 input[type=checkbox],
 input[type=radio] {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     padding: 0;
     *height: 13px;
     *width: 13px;
 }
 
 input[type=search] {
     -webkit-appearance: textfield;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
 }
 
 input[type=search]::-webkit-search-cancel-button,
 input[type=search]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 
 textarea {
     overflow: auto;
     vertical-align: top;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 html,
 button,
 input,
 select,
 textarea {
     color: #000;
 }
 
 ::-moz-selection {
     background: #b3d4fc;
     text-shadow: none;
 }
 
 ::selection {
     background: #b3d4fc;
     text-shadow: none;
 }
 
 img {
     vertical-align: middle;
 }
 
 fieldset {
     border: 0;
     margin: 0;
     padding: 0;
 }
 
 textarea {
     resize: vertical;
 }
 
 .chromeframe {
     margin: .2em 0;
     background: #ccc;
     color: #000;
     padding: .2em 0;
 }
 
 body {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-overflow-scrolling: touch;
 }
 
 button {
     border: 0;
     padding: 0;
     background: none;
     cursor: pointer;
 }
 
 a {
     text-decoration: none;
     color: inherit;
 }
 
 @font-face {
     font-family: "Helvetica Neue";
     src: url("../fonts/HelveticaNeueLTPro-Bd.woff2") format("woff2"), url("../fonts/HelveticaNeueLTPro-Bd.woff") format("woff"), url("../fonts/HelveticaNeueLTPro-Bd.svg#HelveticaNeueLTPro-Bd") format("svg");
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Helvetica Neue";
     src: url("../fonts/HelveticaNeueLTPro-Th.woff2") format("woff2"), url("../fonts/HelveticaNeueLTPro-Th.woff") format("woff"), url("../fonts/HelveticaNeueLTPro-Th.svg#HelveticaNeueLTPro-Th") format("svg");
     font-weight: 100;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Helvetica Neue";
     src: url("../fonts/HelveticaNeueLTPro-Lt.woff2") format("woff2"), url("../fonts/HelveticaNeueLTPro-Lt.woff") format("woff"), url("../fonts/HelveticaNeueLTPro-Lt.svg#HelveticaNeueLTPro-Lt") format("svg");
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Helvetica Neue";
     src: url("../fonts/HelveticaNeueLTPro-It.woff2") format("woff2"), url("../fonts/HelveticaNeueLTPro-It.woff") format("woff"), url("../fonts/HelveticaNeueLTPro-It.svg#HelveticaNeueLTPro-It") format("svg");
     font-weight: normal;
     font-style: italic;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Noto Sans KR";
     src: url("../fonts/NotoSansKR-Thin.woff2") format("woff2"), url("../fonts/NotoSansKR-Thin.woff2") format("woff");
     font-weight: 100;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Noto Sans KR";
     src: url("../fonts/NotoSansKR-Light.woff2") format("woff2"), url("../fonts/NotoSansKR-Light.woff2") format("woff");
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Noto Sans KR";
     src: url("../fonts/NotoSansKR-Regular.woff2") format("woff2"), url("../fonts/NotoSansKR-Regular.woff2") format("woff");
     font-weight: 400;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Noto Sans KR";
     src: url("../fonts/NotoSansKR-Medium.woff2") format("woff2"), url("../fonts/NotoSansKR-Medium.woff2") format("woff");
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Noto Sans KR";
     src: url("../fonts/NotoSansKR-Bold.woff2") format("woff2"), url("../fonts/NotoSansKR-Bold.woff2") format("woff");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
 }
 
 @font-face {
     font-family: "Noto Sans KR";
     src: url("../fonts/NotoSansKR-Black.woff2") format("woff2"), url("../fonts/NotoSansKR-Black.woff2") format("woff");
     font-weight: 900;
     font-style: normal;
     font-display: swap;
 }
 
 .skip_nav a {
     left: -999px;
     position: absolute;
     top: auto;
     width: 1px;
     height: 1px;
     overflow: hidden;
     z-index: -999;
 }
 
 .skip_nav a:focus,
 .skip_nav a:active {
     color: #fff;
     background-color: #000;
     left: auto;
     top: auto;
     width: 30%;
     height: auto;
     overflow: auto;
     margin: 10px 35%;
     padding: 5px;
     border-radius: 15px;
     border: 4px solid #ff0;
     text-align: center;
     font-size: 1.2em;
     z-index: 999;
 }
 
 .header {
     position: fixed;
     z-index: 19;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     width: 100%;
     padding: 1.875vw;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     pointer-events: none;
     mix-blend-mode: inherit;
 }
 
 .header.blend-on {
     mix-blend-mode: difference !important;
 }
 
 html.static-mode .header {
     mix-blend-mode: inherit;
 }
 
 .header .mode {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     height: 1.7578125vw;
     pointer-events: auto;
 }
 
 .header .mode-wrap {
     margin-right: 1.5625vw;
     position: relative;
     cursor: pointer;
 }
 
 .header .mode .nav-checkbox {
     display: none;
     visibility: hidden;
 }
 
 .header .mode .nav-btn {
     display: block;
     width: 28px;
     height: 28px;
     background-size: contain;
     background-repeat: no-repeat;
     cursor: pointer;
 }
 
 .header .mode .nav-btn.light {
     background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23fff' stroke='%23fff' stroke-width='2'/%3E%3Cpath fill='%23fff' d='M13 0h2v4h-2zM13 24h2v4h-2zM23.191 3.393l1.415 1.414-2.829 2.828-1.414-1.414zM6.22 20.364l1.415 1.414-2.828 2.829-1.415-1.414zM28 13v2h-4v-2zM4 13v2H0v-2zM24.608 23.192l-1.414 1.415-2.829-2.829 1.415-1.414zM7.636 6.222 6.222 7.636 3.394 4.808l1.414-1.415z'/%3E%3C/svg%3E");
 }
 
 html.color-mode .header .mode .nav-btn.light {
     display: none;
 }
 
 .header .mode .nav-btn.dark {
     background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 28C21.732 28 28 21.732 28 14C28 6.26801 21.732 0 14 0C6.26801 0 0 6.26801 0 14C0 21.732 6.26801 28 14 28ZM16.3334 14C16.3334 18.784 13.4538 22.8957 9.3334 24.696C10.7624 25.3203 12.3409 25.6667 14.0001 25.6667C20.4435 25.6667 25.6667 20.4433 25.6667 14C25.6667 7.55672 20.4435 2.33335 14.0001 2.33335C12.3409 2.33335 10.7624 2.67971 9.3334 3.30405C13.4538 5.10433 16.3334 9.216 16.3334 14Z' fill='white'/%3E%3C/svg%3E%0A");
 }
 
 html.dark-mode .header .mode .nav-btn.dark {
     display: none;
 }
 
 .header .mode .nav-btn.motion-mode {
     background-image: url("data:image/svg+xml,%3Csvg width='27' height='29' viewBox='0 0 27 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.5996 20.2288L25.5996 9.39054C25.5996 8.56038 25.1187 7.82245 24.3973 7.40737L14.6344 2.01132C13.913 1.59624 12.9511 1.59624 12.2297 2.01132L2.41864 7.40737C1.69724 7.82245 1.21631 8.56038 1.21631 9.39054L1.21631 20.2288C1.21631 21.0589 1.69724 21.7968 2.41864 22.2119L12.1816 27.608C12.903 28.0231 13.8649 28.0231 14.5863 27.608L24.3492 22.2119C25.1187 21.7968 25.5996 21.0589 25.5996 20.2288Z' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M13.4326 14.8329L13.4326 28.3' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M1.21631 8.05353L13.432 14.8332' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.6002 8.05353L13.4326 14.8332' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M1.74561 21.2901L8.38249 17.6005' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M25.0705 21.2901L18.4336 17.6005' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E%0A");
 }
 
 html:not(.static-mode) .header .mode .nav-btn.motion-mode {
     display: none;
 }
 
 html.dark-mode .header .mode .nav-btn.motion-mode {
     background-image: url("data:image/svg+xml,%3Csvg width='27' height='29' viewBox='0 0 27 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.5996 20.2288L25.5996 9.39054C25.5996 8.56038 25.1187 7.82245 24.3973 7.40737L14.6344 2.01132C13.913 1.59624 12.9511 1.59624 12.2297 2.01132L2.41864 7.40737C1.69724 7.82245 1.21631 8.56038 1.21631 9.39054L1.21631 20.2288C1.21631 21.0589 1.69724 21.7968 2.41864 22.2119L12.1816 27.608C12.903 28.0231 13.8649 28.0231 14.5863 27.608L24.3492 22.2119C25.1187 21.7968 25.5996 21.0589 25.5996 20.2288Z' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M13.4326 14.8329L13.4326 28.3' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M1.21631 8.05353L13.432 14.8332' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M25.6002 8.05353L13.4326 14.8332' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M1.74561 21.2901L8.38249 17.6005' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M25.0705 21.2901L18.4336 17.6005' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E%0A");
 }
 
 .header .mode .nav-btn.static-mode {
     background-image: url("data:image/svg+xml,%3Csvg width='25' height='27' viewBox='0 0 25 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.79929 18.2132L1.54488 19.5553C0.873335 19.865 0.821678 20.5877 1.49322 20.8974L11.9797 25.4914C12.2896 25.6463 12.7029 25.6463 13.0128 25.4914L23.4476 20.8974C24.1191 20.5877 24.1191 19.865 23.3959 19.5553L20.1415 18.2132' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M4.79929 11.5536L1.54488 12.8957C0.873335 13.2054 0.821678 13.9281 1.49322 14.2378L11.9797 18.8318C12.2896 18.9867 12.7029 18.9867 13.0128 18.8318L23.4476 14.2378C24.1191 13.9281 24.1191 13.2054 23.3959 12.8957L20.1415 11.5536' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M12.0314 1.1774L1.59664 5.46176C0.925093 5.77147 0.873435 6.49413 1.54498 6.80385L4.95437 8.30079L9.7585 10.4172L11.9798 11.4495C12.2897 11.6044 12.703 11.6044 13.0129 11.4495L15.1825 10.4688L19.9867 8.35241L23.396 6.85546C24.0676 6.54575 24.0676 5.82309 23.3444 5.51338L13.0129 1.1774C12.703 1.07417 12.3414 1.07417 12.0314 1.1774Z' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
 }
 
 html.static-mode .header .mode .nav-btn.static-mode {
     display: none;
 }
 
 html.dark-mode .header .mode .nav-btn.static-mode {
     background-image: url("data:image/svg+xml,%3Csvg width='25' height='27' viewBox='0 0 25 27' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.79929 18.2132L1.54488 19.5553C0.873335 19.865 0.821678 20.5877 1.49322 20.8974L11.9797 25.4914C12.2896 25.6463 12.7029 25.6463 13.0128 25.4914L23.4476 20.8974C24.1191 20.5877 24.1191 19.865 23.3959 19.5553L20.1415 18.2132' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M4.79929 11.5536L1.54488 12.8957C0.873335 13.2054 0.821678 13.9281 1.49322 14.2378L11.9797 18.8318C12.2896 18.9867 12.7029 18.9867 13.0128 18.8318L23.4476 14.2378C24.1191 13.9281 24.1191 13.2054 23.3959 12.8957L20.1415 11.5536' stroke='white' stroke-width='2' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M12.0314 1.1774L1.59664 5.46176C0.925093 5.77147 0.873435 6.49413 1.54498 6.80385L4.95437 8.30079L9.7585 10.4172L11.9798 11.4495C12.2897 11.6044 12.703 11.6044 13.0129 11.4495L15.1825 10.4688L19.9867 8.35241L23.396 6.85546C24.0676 6.54575 24.0676 5.82309 23.3444 5.51338L13.0129 1.1774C12.703 1.07417 12.3414 1.07417 12.0314 1.1774Z' stroke='white' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
 }
 
 .header .nav-menu {
     position: relative;
     width: 28px;
     height: 28px;
     pointer-events: all;
     z-index: 11;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     mix-blend-mode: difference;
     opacity: 1;
     text-indent: -99999999px;
     font-size: 0px;
     overflow: hidden;
 }
 
 .header .nav-menu span.nav-menu--toggle {
     position: relative;
     width: 28px;
     height: 2px;
     background-color: #fff;
     font-size: 0;
 }
 
 html.dark-mode .header .nav-menu span.nav-menu--toggle {
     background-color: #fff;
 }
 
 .header .nav-menu span.nav-menu--toggle::before,
 .header .nav-menu span.nav-menu--toggle::after {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     height: 2px;
     width: 28px;
     background-color: #fff;
     -webkit-transition: margin-top .3s ease-out, -webkit-transform .3s ease-out;
     transition: margin-top .3s ease-out, -webkit-transform .3s ease-out;
     transition: transform .3s ease-out, margin-top .3s ease-out;
     transition: transform .3s ease-out, margin-top .3s ease-out, -webkit-transform .3s ease-out;
 }
 
 html.dark-mode .header .nav-menu span.nav-menu--toggle::before,
 html.dark-mode .header .nav-menu span.nav-menu--toggle::after {
     background-color: #fff;
 }
 
 .header .nav-menu span.nav-menu--toggle::before {
     margin-top: -8px;
 }
 
 .header .nav-menu span.nav-menu--toggle::after {
     margin-top: 8px;
 }
 
 html.dark-mode .header .nav-menu span.nav-menu--toggle {
     color: #fff;
 }
 
 .header .nav-menu span.nav-menu--toggle.nav-menu--toggle {
     display: block;
 }
 
 .header .nav-menu.on span.nav-menu--toggle {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: min(4.6875vw, 36px);
     height: 2px;
     -webkit-transition: background-color .3s ease-out;
     transition: background-color .3s ease-out;
     background-color: rgba(255, 255, 255, 0);
 }
 
 html.dark-mode .header .nav-menu.on span.nav-menu--toggle {
     background-color: #000;
 }
 
 .header .nav-menu.on span.nav-menu--toggle::before,
 .header .nav-menu.on span.nav-menu--toggle::after {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     height: 2px;
     width: min(4.5572916667vw, 35px);
     background-color: #fff;
     -webkit-transition: margin-top .3s ease-out, -webkit-transform .3s ease-out;
     transition: margin-top .3s ease-out, -webkit-transform .3s ease-out;
     transition: transform .3s ease-out, margin-top .3s ease-out;
     transition: transform .3s ease-out, margin-top .3s ease-out, -webkit-transform .3s ease-out;
 }
 
 html.dark-mode .header .nav-menu.on span.nav-menu--toggle::before,
 html.dark-mode .header .nav-menu.on span.nav-menu--toggle::after {
     background-color: #fff;
 }
 
 .header .nav-menu.on span.nav-menu--toggle::before {
     -webkit-transform: translate(-50%, -50%) rotate(45deg);
     transform: translate(-50%, -50%) rotate(45deg);
     margin-top: 0;
 }
 
 .header .nav-menu.on span.nav-menu--toggle::after {
     -webkit-transform: translate(-50%, -50%) rotate(-45deg);
     transform: translate(-50%, -50%) rotate(-45deg);
     margin-top: 0;
 }
 
 #faveHeader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
     visibility: hidden;
     min-height: 100%;
 }
 
 #faveHeader::-webkit-scrollbar {
     display: none;
 }
 
 #faveHeader .header-wrap {
     position: relative;
     width: 100%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     padding: 1.875vw;
     z-index: 2;
     pointer-events: none;
 }
 
 #faveHeader .logo {
     width: 4.6875vw;
     height: 1.7578125vw;
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='25' viewBox='0 0 65 25' width='65' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='m16.9 0v4.29231h-11.64538v5.4h10.01218v4.01539h-10.01218v9.6923h-5.25462v-23.4z'/%3E%3Cpath clip-rule='evenodd' d='m16.9491 8.8128c-.497.70542-.7811 1.6225-.8521 2.7512v.141h4.7576c.071-.917.426-1.5519.9231-1.97515s1.2782-.63488 2.2013-.63488c.426 0 .8521 0 1.2071.07054.3551.07054.7101.21163.9941.35271.2131.14109.4971.42326.6391.70538.213.2822.284.7055.284 1.1993s-.142.8465-.426 1.1287c-.284.2116-.7101.4232-1.2782.5643-.568.1411-1.1361.2116-1.8462.2822-.7101.0705-1.4202.1411-2.1302.2821-.7101.0706-1.4202.2117-2.1303.4233-.6391.2116-1.2781.4938-1.8462.8465-.5681.4233-.9941.9171-1.3492 1.5519-.355.6349-.497 1.4109-.497 2.3985 0 .917.142 1.693.426 2.3279.3551.6349.7101 1.1992 1.2782 1.6225.497.4232 1.1361.7054 1.8462.917.7101.2117 1.4912.2822 2.3433.2822 1.0651 0 2.0592-.2116 3.1243-.4938 1.0652-.2822 1.9173-.8465 2.6984-1.6225.0355.1411.0532.2822.071.4233.0177.1411.0355.2822.071.4232l.213.8466h4.8286c-.2841-.3528-.4261-.9171-.4971-1.6225-.071-.7055-.142-1.4814-.142-2.2574v-8.9589c0-1.05815-.213-1.90466-.7101-2.53954-.497-.63489-1.1361-1.12869-1.8462-1.4814-.7811-.35271-1.5622-.56434-2.4853-.70543-.8521-.14108-1.7752-.21162-2.6273-.21162-.9231 0-1.9172.07054-2.8403.28217-.9232.14108-1.8463.4938-2.5563.91705-.7101.42326-1.3492 1.05814-1.8463 1.76357zm10.0833 6.3437c.0237-.0203.0474-.042.071-.0654h-.071zm0 0c-.1708.1455-.3515.2166-.6135.3197-.031.0122-.0632.0249-.0966.0381-.3551.1411-.6391.2117-.9942.2822-.355.0705-.71.1411-1.0651.1411-.1775.0353-.3728.0529-.568.0705-.1953.0177-.3906.0353-.5681.0706-.3551.0705-.7101.1411-1.0651.2821-.3551.1411-.6391.2822-.9231.4233-.2841.2116-.4971.4233-.6391.7054-.142.2822-.213.6349-.213 1.1287 0 .4233.071.776.213 1.0581.142.2822.355.4938.6391.7055.284.1411.568.2821.9231.3527.355.0705.71.0705 1.1361.0705.9231 0 1.6332-.1411 2.2013-.4938.497-.2821.9231-.7054 1.1361-1.1286.213-.4233.426-.8466.426-1.3404.0711-.4232.0711-.7759.0711-1.0581z' fill-rule='evenodd'/%3E%3Cpath d='m37.7161 23.4-5.8661-16.9h4.8884l3.6314 11.5196h.0698l3.6314-11.5196h4.679l-5.7963 16.9z'/%3E%3Cpath clip-rule='evenodd' d='m56.9202 20.5092c-1.3093 0-2.3429-.3541-3.032-1.0623-.689-.7082-1.0336-1.8413-1.0336-3.3992h12.1278c.0689-1.3456-.0689-2.6203-.3445-3.8242-.3446-1.2038-.8269-2.2661-1.516-3.25754-.6891-.92062-1.5849-1.69961-2.6185-2.26615s-2.274-.8498-3.721-.8498c-1.3093 0-2.4807.21245-3.5143.70817-1.1026.4249-1.9984 1.06225-2.7563 1.91206-.758.84981-1.3782 1.77046-1.7917 2.90346-.4134 1.1331-.6201 2.337-.6201 3.6117 0 1.3455.2067 2.5494.6201 3.6825.4135 1.1331.9648 2.1245 1.7227 2.9035.6891.779 1.6538 1.4164 2.6875 1.8413 1.0336.4249 2.2739.6373 3.5832.6373 1.9294 0 3.5143-.4249 4.8924-1.3455 1.3782-.9206 2.4118-2.4078 3.032-4.4615h-4.0656c-.1378.5665-.5513 1.0623-1.2403 1.558-.6891.4957-1.4471.7082-2.4118.7082zm-.3445-11.11834c1.1714 0 1.9983.28327 2.5496.92064.5512.6373.9647 1.558 1.1025 2.691h-7.511c0-.3541.069-.7081.2068-1.133s.3445-.8498.6201-1.2039c.2757-.3541.6891-.6374 1.1715-.92065.4823-.21245 1.1025-.35409 1.8605-.35409z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: 100%;
     font-size: 0;
     opacity: 0;
     -webkit-transition: opacity .3s ease-out;
     transition: opacity .3s ease-out;
     pointer-events: auto;
 }
 
 #faveHeader .logo a {
     width: 100%;
     height: 100%;
     display: block;
 }
 
 html.dark-mode #faveHeader .logo {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='25' viewBox='0 0 65 25' width='65' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='m16.9 0v4.29231h-11.64538v5.4h10.01218v4.01539h-10.01218v9.6923h-5.25462v-23.4z'/%3E%3Cpath clip-rule='evenodd' d='m16.9491 8.8128c-.497.70542-.7811 1.6225-.8521 2.7512v.141h4.7576c.071-.917.426-1.5519.9231-1.97515s1.2782-.63488 2.2013-.63488c.426 0 .8521 0 1.2071.07054.3551.07054.7101.21163.9941.35271.2131.14109.4971.42326.6391.70538.213.2822.284.7055.284 1.1993s-.142.8465-.426 1.1287c-.284.2116-.7101.4232-1.2782.5643-.568.1411-1.1361.2116-1.8462.2822-.7101.0705-1.4202.1411-2.1302.2821-.7101.0706-1.4202.2117-2.1303.4233-.6391.2116-1.2781.4938-1.8462.8465-.5681.4233-.9941.9171-1.3492 1.5519-.355.6349-.497 1.4109-.497 2.3985 0 .917.142 1.693.426 2.3279.3551.6349.7101 1.1992 1.2782 1.6225.497.4232 1.1361.7054 1.8462.917.7101.2117 1.4912.2822 2.3433.2822 1.0651 0 2.0592-.2116 3.1243-.4938 1.0652-.2822 1.9173-.8465 2.6984-1.6225.0355.1411.0532.2822.071.4233.0177.1411.0355.2822.071.4232l.213.8466h4.8286c-.2841-.3528-.4261-.9171-.4971-1.6225-.071-.7055-.142-1.4814-.142-2.2574v-8.9589c0-1.05815-.213-1.90466-.7101-2.53954-.497-.63489-1.1361-1.12869-1.8462-1.4814-.7811-.35271-1.5622-.56434-2.4853-.70543-.8521-.14108-1.7752-.21162-2.6273-.21162-.9231 0-1.9172.07054-2.8403.28217-.9232.14108-1.8463.4938-2.5563.91705-.7101.42326-1.3492 1.05814-1.8463 1.76357zm10.0833 6.3437c.0237-.0203.0474-.042.071-.0654h-.071zm0 0c-.1708.1455-.3515.2166-.6135.3197-.031.0122-.0632.0249-.0966.0381-.3551.1411-.6391.2117-.9942.2822-.355.0705-.71.1411-1.0651.1411-.1775.0353-.3728.0529-.568.0705-.1953.0177-.3906.0353-.5681.0706-.3551.0705-.7101.1411-1.0651.2821-.3551.1411-.6391.2822-.9231.4233-.2841.2116-.4971.4233-.6391.7054-.142.2822-.213.6349-.213 1.1287 0 .4233.071.776.213 1.0581.142.2822.355.4938.6391.7055.284.1411.568.2821.9231.3527.355.0705.71.0705 1.1361.0705.9231 0 1.6332-.1411 2.2013-.4938.497-.2821.9231-.7054 1.1361-1.1286.213-.4233.426-.8466.426-1.3404.0711-.4232.0711-.7759.0711-1.0581z' fill-rule='evenodd'/%3E%3Cpath d='m37.7161 23.4-5.8661-16.9h4.8884l3.6314 11.5196h.0698l3.6314-11.5196h4.679l-5.7963 16.9z'/%3E%3Cpath clip-rule='evenodd' d='m56.9202 20.5092c-1.3093 0-2.3429-.3541-3.032-1.0623-.689-.7082-1.0336-1.8413-1.0336-3.3992h12.1278c.0689-1.3456-.0689-2.6203-.3445-3.8242-.3446-1.2038-.8269-2.2661-1.516-3.25754-.6891-.92062-1.5849-1.69961-2.6185-2.26615s-2.274-.8498-3.721-.8498c-1.3093 0-2.4807.21245-3.5143.70817-1.1026.4249-1.9984 1.06225-2.7563 1.91206-.758.84981-1.3782 1.77046-1.7917 2.90346-.4134 1.1331-.6201 2.337-.6201 3.6117 0 1.3455.2067 2.5494.6201 3.6825.4135 1.1331.9648 2.1245 1.7227 2.9035.6891.779 1.6538 1.4164 2.6875 1.8413 1.0336.4249 2.2739.6373 3.5832.6373 1.9294 0 3.5143-.4249 4.8924-1.3455 1.3782-.9206 2.4118-2.4078 3.032-4.4615h-4.0656c-.1378.5665-.5513 1.0623-1.2403 1.558-.6891.4957-1.4471.7082-2.4118.7082zm-.3445-11.11834c1.1714 0 1.9983.28327 2.5496.92064.5512.6373.9647 1.558 1.1025 2.691h-7.511c0-.3541.069-.7081.2068-1.133s.3445-.8498.6201-1.2039c.2757-.3541.6891-.6374 1.1715-.92065.4823-.21245 1.1025-.35409 1.8605-.35409z' fill-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E");
 }
 
 #faveHeader.menu-index {
     z-index: 10;
     visibility: visible;
 }
 
 #faveHeader.menu-on {
     opacity: 1;
     visibility: visible;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader.menu-on:after {
     content: "";
     background-color: #fff;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: 0;
 }
 
 html.dark-mode #faveHeader.menu-on:after {
     background-color: #000;
 }
 
 #faveHeader.menu-on .nav-panel {
     -webkit-transform: translateX(0);
     transform: translateX(0);
     -webkit-transition: opacity .35s ease-out, -webkit-transform .35s;
     transition: opacity .35s ease-out, -webkit-transform .35s;
     transition: transform .35s, opacity .35s ease-out;
     transition: transform .35s, opacity .35s ease-out, -webkit-transform .35s;
     z-index: 1;
 }
 
 #faveHeader.menu-show .nav-panel .logo {
     opacity: 1;
 }
 
 #faveHeader.menu-show .nav-wrap {
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
     opacity: 1;
 }
 
 #faveHeader.menu-show .nav-lang {
     opacity: 1;
 }
 
 #faveHeader.menu-show .nav-menu {
     opacity: 1;
 }
 
 #faveHeader.menu-show .nav-text-rolling {
     opacity: 1;
     -webkit-transition: opacity 1s;
     transition: opacity 1s;
     -webkit-transition-delay: .35s;
     transition-delay: .35s;
 }
 
 #faveHeader.menu-show .nav-text-rolling .text {
     -webkit-animation: slideLeft 60s linear infinite;
     animation: slideLeft 60s linear infinite;
     will-change: transform;
 }
 
 #faveHeader.menu-show .nav-link {
     opacity: 1;
     -webkit-transition: opacity .3s;
     transition: opacity .3s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link:nth-child(1) a {
     -webkit-transition-delay: 0.1s;
     transition-delay: 0.1s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link:nth-child(2) a {
     -webkit-transition-delay: 0.2s;
     transition-delay: 0.2s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link:nth-child(3) a {
     -webkit-transition-delay: 0.3s;
     transition-delay: 0.3s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link:nth-child(4) a {
     -webkit-transition-delay: 0.4s;
     transition-delay: 0.4s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link:nth-child(5) a {
     -webkit-transition-delay: 0.5s;
     transition-delay: 0.5s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link a {
     opacity: 1;
     -webkit-transform: translate3d(0px, 0%, 0px);
     transform: translate3d(0px, 0%, 0px);
     -webkit-transition: -webkit-transform .7s ease-out;
     transition: -webkit-transform .7s ease-out;
     transition: transform .7s ease-out;
     transition: transform .7s ease-out, -webkit-transform .7s ease-out;
     outline-offset: -1px;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link span {
     -webkit-transition: color .3s;
     transition: color .3s;
 }
 
 #faveHeader.menu-show .nav-link .link-list .link span:hover {
     color: var(--primary-pink);
 }
 
 #faveHeader.menu-show .nav-figure {
     opacity: 1;
 }
 
 #faveHeader.menu-show .nav-figure .bannerWrap {
     width: 100%;
     -webkit-transition: width .75s ease-out;
     transition: width .75s ease-out;
 }
 
 #faveHeader .nav-panel {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     -webkit-transform: translateX(101%);
     transform: translateX(101%);
     -webkit-transition: opacity .35s ease-out, -webkit-transform .35s;
     transition: opacity .35s ease-out, -webkit-transform .35s;
     transition: transform .35s, opacity .35s ease-out;
     transition: transform .35s, opacity .35s ease-out, -webkit-transform .35s;
     background-color: #fff;
     color: #000;
     pointer-events: all;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -ms-overflow-style: none;
     min-height: 46.875vw;
 }
 
 #faveHeader .nav-panel::-webkit-scrollbar {
     display: none;
 }
 
 html.dark-mode #faveHeader .nav-panel {
     background-color: #000;
     color: #fff;
 }
 
 #faveHeader .nav-text-rolling {
     position: relative;
     overflow: hidden;
     width: 100%;
     padding: 0.859375vw 0;
     opacity: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-sizing: content-box;
     box-sizing: content-box;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
     background: linear-gradient(191deg, rgba(156, 92, 255, 0.96) 15%, rgb(191, 128, 255) 50%, rgb(126, 45, 255) 90%);
 }
 
 #faveHeader .nav-text-rolling .text-container {
     overflow: hidden;
 }
 
 #faveHeader .nav-text-rolling .text {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     height: 2.578125vw;
     font-size: 2.5vw;
     letter-spacing: -0.0390625vw;
     line-height: 1.4;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     font-weight: 300;
     text-transform: uppercase;
     color: #fff;
 }
 
 #faveHeader .nav-text-rolling .text-container {
     display: block;
     width: 100%;
     white-space: nowrap;
 }
 
 #faveHeader .nav-text-rolling .text span {
     display: inline-block;
     background-size: cover;
     width: 100%;
     height: 100%;
 }
 
 #faveHeader .nav-text-rolling .text .eyes {
     background-image: url("data:image/svg+xml,%3Csvg width='88' height='63' viewBox='0 0 88 63' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M73.6091 50.6067C66.1266 50.6067 59.8911 41.9542 59.8911 31.4475C59.8911 20.9408 66.1266 12.2882 73.6091 12.2882C76.7269 12.2882 79.5328 13.5243 81.7152 15.9965C82.6505 16.3055 83.274 16.6145 83.8976 17.2326C80.1563 7.34392 72.9856 0.854492 64.5677 0.854492C54.2792 0.854492 45.5496 10.7431 43.3672 24.34C43.679 26.8122 43.9908 28.9753 43.9908 31.7565C43.9908 34.2287 43.679 36.7008 43.3672 39.173C45.8614 52.7699 54.2792 62.6585 64.5677 62.6585C73.9209 62.6585 82.027 54.315 85.1447 42.5722C82.3387 47.2075 78.2857 50.6067 73.6091 50.6067Z' fill='white'/%3E%3Cpath d='M29.6491 50.6067C22.1666 50.6067 15.9311 41.9542 15.9311 31.4475C15.9311 20.9408 22.1666 12.2882 29.6491 12.2882C32.7668 12.2882 35.5728 13.5243 37.7552 15.9965C40.5611 16.6145 42.4318 20.0137 42.4318 24.031C42.4318 24.34 42.4318 24.34 42.4318 24.649C42.4318 24.9581 42.7435 25.2671 42.7435 25.8851C42.7435 25.2671 43.0553 24.9581 43.0553 24.34C40.5611 10.7431 32.1433 0.854492 21.8548 0.854492C9.69569 0.854492 0.0307617 14.7604 0.0307617 31.7565C0.0307617 48.7526 10.0075 62.6585 21.8548 62.6585C32.1433 62.6585 40.8729 52.7699 43.0553 39.173C43.0553 38.555 42.7435 38.2459 42.7435 37.6279C40.8729 45.0444 35.8845 50.6067 29.6491 50.6067Z' fill='white'/%3E%3Cpath d='M43.0551 24.0312C43.0551 24.6493 42.7437 24.9583 42.7437 25.5764C43.0551 27.4305 43.3666 29.2846 43.3666 31.4477C43.3666 33.6109 43.0551 35.465 42.7437 37.3191C42.7437 37.9372 43.0551 38.2462 43.0551 38.8642C43.3666 36.3921 43.6781 34.2289 43.6781 31.4477C43.6781 28.9756 43.3666 26.5034 43.0551 24.0312Z' fill='white'/%3E%3Cpath d='M86.3904 31.4479C86.3904 35.1561 85.7675 38.8643 85.1445 42.2636C86.7019 39.1734 87.3248 35.4651 87.3248 31.4479C87.3248 28.9757 87.0133 26.8126 86.3904 24.6494C86.3904 25.2675 86.3904 25.8855 86.0789 26.8126C86.0789 28.0486 86.3904 29.9028 86.3904 31.4479Z' fill='white'/%3E%3Cpath d='M42.7431 37.3189C43.0546 35.4648 43.366 33.6107 43.366 31.4476C43.366 29.2844 43.0546 27.4303 42.7431 25.5762C42.4316 27.4303 42.4316 29.2844 42.4316 31.4476C42.4316 33.3017 42.4316 35.4648 42.7431 37.3189Z' fill='white'/%3E%3Cpath d='M86.3893 24.6489C86.3893 24.3399 86.3893 24.3399 86.3893 24.0309C86.3893 21.2497 85.4548 18.7775 83.8975 17.2324C84.2089 18.4685 84.8319 19.7046 85.1434 20.6316C85.4549 21.8677 86.0778 23.1038 86.3893 24.6489Z' fill='white'/%3E%3Cpath d='M84.8328 20.6314C84.521 19.3953 84.2092 18.1592 83.5857 17.2322C82.9622 16.6141 82.3386 16.3051 81.4033 15.9961C82.9622 17.2322 83.8975 18.7773 84.8328 20.6314Z' fill='white'/%3E%3Cpath d='M86.0785 26.5027C86.39 25.8846 86.3899 25.2666 86.3899 24.3395C86.0785 23.1034 85.4555 21.5583 84.8325 20.3223C85.4555 22.4854 85.767 24.6486 86.0785 26.5027Z' fill='white'/%3E%3Cpath d='M74.856 24.0313C74.856 28.3576 77.3501 32.0658 80.7796 32.0658C83.2738 32.0658 85.4562 29.9027 86.0798 26.8125C85.768 24.6493 85.4562 22.7952 84.8327 20.9411C83.8974 19.087 82.9621 17.5419 81.4032 16.3058C81.0914 16.3058 80.7796 16.3058 80.4679 16.3058C77.3501 15.6878 74.856 19.396 74.856 24.0313Z' fill='white'/%3E%3Cpath d='M42.432 24.0306C42.432 20.0134 40.2496 16.9232 37.7554 15.9961C39.9378 18.1592 41.4967 20.9404 42.432 24.6487C42.432 24.3396 42.432 24.0306 42.432 24.0306Z' fill='white'/%3E%3Cpath d='M30.8965 24.031C30.8965 28.3573 33.3907 32.0656 36.8202 32.0656C39.9379 32.0656 42.4321 28.6664 42.4321 24.6491C41.4968 21.2499 39.9379 18.1597 37.7555 15.9965C37.4437 15.9965 37.132 15.9965 36.8202 15.9965C33.3907 15.6875 30.8965 19.3957 30.8965 24.031Z' fill='white'/%3E%3C/svg%3E%0A");
     width: 3.409765625vw;
     height: 2.4140625vw;
     margin-right: 0.46875vw;
 }
 
 #faveHeader .nav-text-rolling .text .star {
     background-image: url("data:image/svg+xml,%3Csvg width='66' height='65' viewBox='0 0 66 65' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M65.811 32.4471C47.7282 32.4471 33.0749 17.9232 33.0749 0C33.0749 17.9232 18.4217 32.4471 0.338867 32.4471C18.4217 32.4471 33.0749 46.9711 33.0749 64.8942C33.3867 46.9711 47.7282 32.4471 65.811 32.4471Z' fill='white'/%3E%3C/svg%3E%0A");
     width: 2.557421875vw;
     height: 2.534765625vw;
     margin-right: 0.46875vw;
 }
 
 #faveHeader .nav-text-rolling .text .boom {
     background-image: url("data:image/svg+xml,%3Csvg width='52' height='53' viewBox='0 0 52 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.7281 0L29.8547 13.9067L41.4093 4.90824L36.4573 18.4059L51.3132 17.9969L39.346 26.1773L51.3132 34.3577L36.4573 33.9487L41.4093 47.4463L29.8547 38.8569L25.7281 52.7636L21.6015 38.8569L10.0469 47.4463L14.9989 33.9487L0.555664 34.3577L12.5229 26.1773L0.555664 17.9969L14.9989 18.4059L10.0469 4.90824L21.6015 13.9067L25.7281 0Z' fill='white'/%3E%3C/svg%3E%0A");
     width: 1.9828125vw;
     height: 2.0609375vw;
     margin: 0.3125vw 0.46875vw 0 0.46875vw;
 }
 
 #faveHeader .nav-text-rolling .text .hart {
     background-image: url("data:image/svg+xml,%3Csvg width='75' height='75' viewBox='0 0 75 75' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37.5 66.7188L32.9688 62.5938C16.875 48 6.25 38.375 6.25 26.5625C6.25 16.9375 13.8125 9.375 23.4375 9.375C28.875 9.375 34.0938 11.9063 37.5 15.9063C40.9062 11.9063 46.125 9.375 51.5625 9.375C61.1875 9.375 68.75 16.9375 68.75 26.5625C68.75 38.375 58.125 48 42.0312 62.625L37.5 66.7188Z' fill='white'/%3E%3C/svg%3E%0A");
     width: 2.9296875vw;
     height: 2.9296875vw;
     margin-top: -0.3125vw;
     margin-right: 0.46875vw;
 }
 
 @-webkit-keyframes slideLeft {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
     }
     100% {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
     }
 }
 
 @keyframes slideLeft {
     0% {
         -webkit-transform: translateX(0);
         transform: translateX(0);
     }
     100% {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
     }
 }
 
 #faveHeader .nav-wrap {
     position: absolute;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     height: 100%;
     opacity: 0;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-wrap .nav-wrap02 {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     height: 31.25vw;
 }
 
 #faveHeader .nav-wrap .footer-wrap .contact-list {
     margin-bottom: 0.390625vw;
 }
 
 #faveHeader .nav-wrap .footer-wrap .contact-list a {
     font-size: 0.78125vw;
     font-weight: bold;
     color: #000;
     margin-right: 0.625vw;
     position: relative;
     padding-bottom: 3px;
 }
 
 #faveHeader .nav-wrap .footer-wrap .contact-list a:before {
     content: "";
     width: 0%;
     height: 2px;
     background: var(--primary-pink);
     display: block;
     position: absolute;
     left: 0;
     bottom: 2px;
     -webkit-transition: width .3s;
     transition: width .3s;
     z-index: 1;
 }
 
 #faveHeader .nav-wrap .footer-wrap .contact-list a:hover:before,
 #faveHeader .nav-wrap .footer-wrap .contact-list a:focus:before {
     width: 100%;
 }
 
 html.dark-mode #faveHeader .nav-wrap .footer-wrap .contact-list a {
     color: #fff;
 }
 
 #faveHeader .nav-wrap .text-wrap {
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
 }
 
 #faveHeader .nav-link {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     width: 41.796875vw;
     height: 100%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     opacity: 0;
     -webkit-transition: opacity .5s;
     transition: opacity .5s;
 }
 
 #faveHeader .nav-link .link {
     display: block;
     overflow: hidden;
     margin-bottom: 0.9375vw;
 }
 
 #faveHeader .nav-link .link a {
     color: #000;
     font-size: 2.8125vw;
     font-weight: 300;
     line-height: 1.2;
     letter-spacing: 0.1171875vw;
     text-transform: uppercase;
     position: relative;
     display: inline-block;
     -webkit-transform: translate3d(0px, 200%, 0px);
     transform: translate3d(0px, 200%, 0px);
     opacity: 0;
     -webkit-transition: opacity .5s ease-out, -webkit-transform 5s;
     transition: opacity .5s ease-out, -webkit-transform 5s;
     transition: transform 5s, opacity .5s ease-out;
     transition: transform 5s, opacity .5s ease-out, -webkit-transform 5s;
 }
 
 html.dark-mode #faveHeader .nav-link .link a {
     color: #fff;
 }
 
 #faveHeader .nav-link .link a span {
     opacity: 1;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
     display: inline-block;
     -webkit-box-align: center;
 }
 
 #faveHeader .nav-link .link a:hover::after,
 #faveHeader .nav-link .link a:focus::after {
     -webkit-transform: translate(0, -50%);
     transform: translate(0, -50%);
     opacity: 1;
     opacity: 1;
 }
 
 #faveHeader .nav-link .link a:hover::before,
 #faveHeader .nav-link .link a:focus::before {
     opacity: 1 !important;
 }
 
 #faveHeader .nav-link .link a:hover span,
 #faveHeader .nav-link .link a:focus span {
     opacity: 1 !important;
 }
 
 #faveHeader .nav-figure {
     width: 100%;
     position: relative;
     padding-right: 7.8125vw;
     opacity: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .bannerWrap {
     width: 0%;
     height: 31.25vw;
     overflow: hidden;
     -webkit-transition: width .5s ease-out;
     transition: width .5s ease-out;
 }
 
 #faveHeader .nav-figure .banner {
     position: relative;
     width: 53.125vw;
     height: 31.25vw;
 }
 
 #faveHeader .nav-figure .nav-image {
     position: absolute;
     background-repeat: no-repeat;
     background-position: bottom;
     background-size: cover;
     max-width: 1360px;
     width: 53.125vw;
     height: 31.25vw;
 }
 
 #faveHeader .nav-figure .nav-image.img00 {
     background-image: url("../images/common/nav_fave-office-01.jpg");
     background-position: bottom;
     background-size: cover;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img01 {
     background-image: url("../images/common/nav_fave-office-01.jpg");
     z-index: 0;
     opacity: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img01.hover {
     z-index: 1;
     opacity: 1;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img02 {
     background-image: url("../images/common/nav_fave-office-02.jpg");
     z-index: 0;
     opacity: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img02.hover {
     z-index: 1;
     opacity: 1;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img03 {
     background-image: url("../images/common/nav_fave-office-03.jpg");
     z-index: 0;
     opacity: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img03.hover {
     z-index: 1;
     opacity: 1;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img04 {
     background-image: url("../images/common/nav_fave-office-04.jpg");
     z-index: 0;
     opacity: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img04.hover {
     z-index: 1;
     opacity: 1;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img05 {
     background-image: url("../images/common/nav_fave-office-05.jpg");
     z-index: 0;
     opacity: 0;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img05.hover {
     z-index: 1;
     opacity: 1;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out;
 }
 
 #faveHeader .nav-figure .nav-image.img03 {
     background-position: center 61%;
 }
 
 #faveHeader .nav-figure .nav-image.img04 {
     background-position: center 69%;
 }
 
 #faveHeader .static-change,
 #faveHeader .mobile-debug {
     display: block;
     position: absolute;
     bottom: 30px;
     right: 20px;
     pointer-events: auto;
     cursor: pointer;
     font-size: 17px;
     color: #fff;
     z-index: 100;
 }
 
 #faveHeader .static-change:before,
 #faveHeader .mobile-debug:before {
     content: "";
     width: 32px;
     height: 32px;
     display: inline-block;
     background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_602_778)'%3E%3Cpath d='M23.8519 19.1359L23.8519 12.6363C23.8519 12.1385 23.5754 11.696 23.1605 11.4471L17.546 8.2111C17.1311 7.96218 16.578 7.96218 16.1631 8.2111L10.5209 11.4471C10.106 11.696 9.82947 12.1385 9.82947 12.6363L9.82947 19.1359C9.82947 19.6337 10.106 20.0763 10.5209 20.3252L16.1354 23.5611C16.5503 23.8101 17.1035 23.8101 17.5183 23.5611L23.1328 20.3252C23.5754 20.0763 23.8519 19.6337 23.8519 19.1359Z' stroke='white' stroke-miterlimit='10'/%3E%3Cpath d='M16.8546 15.9004L16.8546 23.9765' stroke='white' stroke-miterlimit='10'/%3E%3Cpath d='M9.82947 11.834L16.8545 15.8997' stroke='white' stroke-miterlimit='10'/%3E%3Cpath d='M23.852 11.834L16.8546 15.8997' stroke='white' stroke-miterlimit='10'/%3E%3Cpath d='M10.1337 19.7722L13.9505 17.5596' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M23.5477 19.7722L19.731 17.5596' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M27.2557 22.8168C25.0431 26.2187 21.1986 28.4313 16.8564 28.4313C9.96959 28.4313 4.41038 22.8721 4.41038 15.9854' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M1.97648 18.3362L4.41037 15.9023L6.81659 18.3362' stroke='white' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.65062 9.1819C8.86324 5.78 12.7077 3.56738 17.0499 3.56738C23.9367 3.56738 29.4959 9.12659 29.4959 16.0134' stroke='white' stroke-miterlimit='10' stroke-linecap='round'/%3E%3Cpath d='M31.9298 13.6621L29.4959 16.096L27.062 13.6621' stroke='white' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_602_778'%3E%3Crect width='32' height='32' fill='white' transform='translate(32.9531 32) rotate(-180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")
 }
 
 #faveHeader .static-change label,
 #faveHeader .mobile-debug label {
     position: absolute;
     clip: rect(0 0 0 0);
     font-size: 1px;
     color: rgba(0, 0, 0, 0);
     width: 1px;
     height: 1px;
     margin: -1px;
     overflow: hidden
 }
 
 #faveHeader .static-change input,
 #faveHeader .mobile-debug input {
     width: 32px;
     height: 32px;
     padding: 5px;
     position: absolute;
     right: 0px;
     opacity: 0;
     cursor: pointer
 }
 
 .nav-lang {
     position: absolute;
     top: 2.34375vw;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     cursor: pointer;
     opacity: 0;
     color: #000
 }
 
 html.dark-mode .nav-lang {
     color: #fff
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .nav-lang {
         top: 5.8651026393vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .nav-lang {
         position: static;
         margin-top: 7.1707953064vw
     }
 }
 
 .nav-lang button {
     font-size: 0.9375vw;
     margin-right: 1.25vw;
     font-weight: bold;
     position: relative
 }
 
 html.color-mode .nav-lang button {
     color: #000
 }
 
 html.dark-mode .nav-lang button {
     color: #fff
 }
 
 .nav-lang button:before {
     content: "";
     width: 0%;
     height: 2px;
     background: var(--primary-pink);
     display: block;
     position: absolute;
     left: 0;
     bottom: 2px;
     -webkit-transition: width .3s;
     transition: width .3s;
     z-index: 1
 }
 
 .nav-lang button:hover:before {
     width: 100%
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .nav-lang button {
         font-size: 2.3460410557vw;
         margin-right: 3.128054741vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .nav-lang button {
         font-size: 4.1720990874vw;
         margin-right: 5.2151238592vw
     }
 }
 
 html.lang-en .nav-lang--kr {
     color: #7f7f7f !important
 }
 
 html.lang-ko .nav-lang--en {
     color: #7f7f7f !important
 }
 
 .nav-copy {
     font-size: 0.78125vw;
     font-weight: bold;
     color: #000;
     white-space: nowrap
 }
 
 html.dark-mode .nav-copy {
     color: #fff
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .nav-copy {
         font-size: 1.9550342131vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .nav-copy {
         font-size: 2.6075619296vw
     }
 }
 
 .nav-copy span {
     color: #888
 }
 
 .page-copyright {
     position: fixed;
     bottom: 1.3%;
     right: 2%;
     mix-blend-mode: difference;
     font-size: min(1.5555555556vw, 14px);
     font-weight: 300;
     opacity: 1;
     z-index: 998;
     -webkit-transition: opacity .2s;
     transition: opacity .2s
 }
 
 .page-copyright strong {
     font-weight: 400
 }
 
 .page-copyright.off {
     opacity: 0
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-copyright {
         font-size: min(1.8229166667vw, 14px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-copyright {
         font-size: 2.6075619296vw
     }
 }
 
 .page-container .logo-circle {
     position: absolute;
     z-index: 999;
     top: calc(min(46.6666666667vw, 420px) - min(6.8888888889vw, 62px));
     left: calc(50% - min(40vw, 360px));
     width: min(13.7777777778vw, 124px);
     height: min(13.7777777778vw, 124px);
     -webkit-transition: left .5s, margin-top .5s cubic-bezier(0.3, 0, 0.28, 1), -webkit-transform .5s;
     transition: left .5s, margin-top .5s cubic-bezier(0.3, 0, 0.28, 1), -webkit-transform .5s;
     transition: transform .5s, left .5s, margin-top .5s cubic-bezier(0.3, 0, 0.28, 1);
     transition: transform .5s, left .5s, margin-top .5s cubic-bezier(0.3, 0, 0.28, 1), -webkit-transform .5s;
     pointer-events: none
 }
 
 @media screen and (max-width: 767px) {
     .page-container .logo-circle {
         top: calc(48.309178744vw - min(8.0834419817vw, 62px));
         left: calc(50% - min(43.0247718383vw, 330px));
         width: 16.1668839635vw;
         height: 16.1668839635vw
     }
 }
 
 .page-container .logo-circle.logo-on {
     position: fixed;
     -webkit-transform: scale(0.48) rotate(1080deg);
     transform: scale(0.48) rotate(1080deg);
     left: min(1.1111111111vw, 10px);
     top: 0;
     margin-top: min(1.1111111111vw, 10px);
     pointer-events: auto
 }
 
 @media screen and (max-width: 767px) {
     .page-container .logo-circle.logo-on {
         -webkit-transform: scale(0.48) rotate(720deg);
         transform: scale(0.48) rotate(720deg);
         left: min(1.3037809648vw, 10px);
         margin-top: min(1.3037809648vw, 10px)
     }
 }
 
 html.color-mode .page-container .logo-circle .logo-white {
     display: none
 }
 
 html.dark-mode .page-container .logo-circle .logo-black {
     display: none
 }
 
 .page-container .logo-circle img {
     width: 100%
 }
 
 .page {
     position: relative;
     width: 100%;
     height: auto;
     overscroll-behavior-y: none
 }
 
 html.fake-scroll .page {
     will-change: transform
 }
 
 .page .clone-circle {
     position: fixed;
     z-index: 20;
     top: 30px;
     left: 30px
 }
 
 .page .clone-circle img {
     width: 80px;
     height: 80px
 }
 
 .page-container {
     position: fixed;
     left: 0;
     top: 0;
     overflow: hidden;
     overscroll-behavior-y: none;
     display: block;
     width: 100%;
     height: 100%;
     pointer-events: all;
     z-index: 2
 }
 
 html.static-mode .page-container {
     background-color: #fff
 }
 
 html.static-mode.dark-mode .page-container {
     background-color: #000
 }
 
 .page-container.screen .page-index {
     opacity: 0
 }
 
 .page-container.screen .screen-canvas-wrap {
     opacity: 1
 }
 
 .page-container.scroll-on {
     overflow-y: scroll
 }
 
 .page-section {
     position: relative;
     width: 100%
 }
 
 .page-section.index {
     padding: 0
 }
 
 .page-content {
     position: relative;
     margin: 0 auto;
     max-width: 1920px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box
 }
 
 .page-gap {
     width: 100%;
     min-height: 300px;
     height: 160vh
 }
 
 .page-gap.gap-g1 {
     height: 200vh;
     margin-top: -50vh
 }
 
 .page-gap.gap-g3 {
     height: 220vh
 }
 
 .page-gap.gap-g4 {
     height: 220vh
 }
 
 html.static-mode .page-gap {
     display: none
 }
 
 .sticky-wrap {
     position: relative
 }
 
 .sticky-content {
     position: sticky;
     top: 0;
     height: 100vh;
     width: 100%
 }
 
 html.fake-scroll .sticky-content {
     position: absolute;
     will-change: transform
 }
 
 .sticky-opacity {
     opacity: 0;
     -webkit-transition: opacity .15s ease-out;
     transition: opacity .15s ease-out
 }
 
 html:not(.static-mode) .sticky-opacity .swiper {
     pointer-events: none
 }
 
 .sticky-opacity.sticky-on {
     opacity: 1
 }
 
 html:not(.static-mode) .sticky-opacity.sticky-on .swiper {
     pointer-events: all
 }
 
 html.fake-scroll .scroll-container {
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100vh;
     overflow: hidden;
     z-index: 1
 }
 
 html.static-mode .scroll-container {
     position: relative !important;
     height: auto !important;
     overflow: auto !important
 }
 
 .scroll-height-device {
     display: none
 }
 
 .popup {
     position: fixed;
     bottom: min(1.25vw, 24px);
     right: min(1.25vw, 24px);
     max-width: 740px;
     z-index: 999;
     width: min(38.5416666667vw, 740px);
     background-color: #fff;
     -webkit-box-shadow: min(0.4166666667vw, 8px) min(0.4166666667vw, 8px) min(1.5625vw, 30px) rgba(0, 0, 0, .08);
     box-shadow: min(0.4166666667vw, 8px) min(0.4166666667vw, 8px) min(1.5625vw, 30px) rgba(0, 0, 0, .08);
     border-radius: min(2.0833333333vw, 40px);
     max-height: 80%;
     overflow: auto
 }
 
 .popup::-webkit-scrollbar {
     display: none
 }
 
 .popup br {
     display: none
 }
 
 @media screen and (max-width: 767px) {
     .popup br.mo-only {
         display: block
     }
 }
 
 @media screen and (min-width: 768px) {
     .popup br.pc-only {
         display: block
     }
 }
 
 html.dark-mode .popup {
     background-color: #000;
     -webkit-box-shadow: none;
     box-shadow: none;
     border: 1px solid #fff
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup {
         width: min(58.59375vw, 450px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup {
         width: 96.479791395vw;
         border-radius: 5.2151238592vw;
         left: 1.8252933507vw;
         right: 1.8252933507vw;
         bottom: 1.8252933507vw;
         max-height: 85%;
         overflow: auto
     }
 }
 
 .popup-inner {
     padding: min(2.0833333333vw, 40px) min(2.5vw, 48px);
     margin: 0 auto;
     font-size: min(1.5625vw, 30px);
     color: #000;
     -webkit-box-sizing: border-box;
     box-sizing: border-box
 }
 
 .popup-inner .thanks-desc {
     font-size: min(1.09375vw, 21px);
     margin: min(0.9375vw, 18px) 0 min(2.0833333333vw, 40px)
 }
 
 .popup-inner .thanks-desc.lang-ko {
     font-size: min(1.25vw, 24px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-inner .thanks-desc.lang-ko {
         font-size: 15px
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-inner .thanks-desc.lang-ko {
         font-size: 4.1720990874vw
     }
 }
 
 html.dark-mode .popup-inner .thanks-desc {
     color: #fff
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-inner .thanks-desc {
         font-size: 14px
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-inner .thanks-desc {
         font-size: 3.9113428944vw;
         margin: 3.6505867014vw 0 7.5619295958vw
     }
 }
 
 html.dark-mode .popup-inner {
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .popup-inner {
         padding: 8.3441981747vw 6.258148631vw
     }
 }
 
 .popup-top {
     padding-bottom: min(2.0833333333vw, 40px)
 }
 
 @media screen and (max-width: 767px) {
     .popup-top {
         padding-bottom: 7.3011734029vw
     }
 }
 
 .popup-top .ex-tools {
     font-size: min(1.6666666667vw, 32px);
     font-weight: 700
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-top .ex-tools {
         font-size: min(2.34375vw, 18px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-top .ex-tools {
         font-size: 6.258148631vw
     }
 }
 
 .popup-icons {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: start;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-top: min(1.25vw, 24px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-icons {
         margin-top: min(1.8229166667vw, 14px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-icons {
         margin-top: 6.258148631vw;
         -ms-flex-wrap: wrap;
         flex-wrap: wrap
     }
 }
 
 .popup-icons li {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     margin-right: min(2.0833333333vw, 40px);
     font-size: min(0.625vw, 12px)
 }
 
 @media screen and (max-width: 767px) {
     .popup-icons li {
         margin-right: 4.4328552803vw;
         margin-bottom: 6.258148631vw
     }
     .popup-icons li:nth-child(n+5) {
         margin-bottom: 0
     }
 }
 
 .popup-icons li i {
     display: inline-block;
     width: min(2.5vw, 48px);
     height: min(2.5vw, 48px);
     font-size: 0;
     margin-bottom: min(0.3125vw, 6px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-icons li i {
         width: min(3.6458333333vw, 28px);
         height: min(3.6458333333vw, 28px);
         margin-bottom: min(0.78125vw, 6px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-icons li i {
         width: 10.4302477184vw;
         height: 10.4302477184vw;
         margin-bottom: 0.7822685789vw
     }
 }
 
 .popup-icons li span {
     display: block;
     font-size: min(0.625vw, 12px);
     white-space: nowrap
 }
 
 @media screen and (max-width: 767px) {
     .popup-icons li span {
         font-size: 3.1290743155vw
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-icons li span {
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 .popup-icons li:last-child {
     margin-right: 0
 }
 
 .popup-icons li.notion i {
     background: url("../images/popup/notion.svg") center center no-repeat;
     background-size: contain
 }
 
 html.dark-mode .popup-icons li.notion i {
     background: url("../images/popup/notion-dark.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.peeps i {
     background: url("../images/popup/peeps.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.characters i {
     background: url("../images/popup/characterz.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.sketch i {
     background: url("../images/popup/sketch.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.vectary i {
     background: url("../images/popup/vectary.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.spline i {
     background: url("../images/popup/spline.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.blender i {
     background: url("../images/popup/blender.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-icons li.three i {
     background: url("../images/popup/three.svg") center center no-repeat;
     background-size: contain
 }
 
 html.dark-mode .popup-icons li.three i {
     background: url("../images/popup/three-dark.svg") center center no-repeat;
     background-size: contain
 }
 
 .popup-bot {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     border-top: 1px solid #ddd;
     padding-top: min(2.0833333333vw, 40px)
 }
 
 @media screen and (max-width: 767px) {
     .popup-bot {
         padding-top: 6.258148631vw;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: start;
         -ms-flex-pack: start;
         justify-content: start;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: start
     }
 }
 
 html.dark-mode .popup-bot {
     border-top: 1px solid #3c3c3c
 }
 
 .popup-bot .cookie {
     word-break: keep-all;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     font-size: min(0.8333333333vw, 16px);
     font-weight: 600;
     max-width: 48%
 }
 
 .popup-bot .cookie.lang-ko {
     max-width: 50%
 }
 
 @media screen and (max-width: 767px) {
     .popup-bot .cookie.lang-ko {
         max-width: none
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-bot .cookie {
         font-size: 4.1720990874vw;
         max-width: 100%;
         padding-right: 0
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-bot .cookie {
         max-width: 40%;
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 .popup-btns {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: start;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center
 }
 
 @media screen and (max-width: 767px) {
     .popup-btns {
         margin-top: 4.1720990874vw
     }
 }
 
 .popup-btns .btn {
     position: relative;
     padding: min(0.46875vw, 9px) min(1.9791666667vw, 38px) min(0.2604166667vw, 5px) min(3.0208333333vw, 58px);
     width: min(8.0729166667vw, 155px);
     border: 1px solid #000;
     border-radius: min(0.4166666667vw, 8px);
     color: #000;
     font-size: min(0.9375vw, 18px);
     font-weight: 500;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     white-space: nowrap;
     -webkit-transition: all .2s;
     transition: all .2s;
     overflow: hidden
 }
 
 .popup-btns .btn:nth-child(even) {
     margin-right: 0
 }
 
 @media screen and (min-width: 768px) {
     .popup-btns .btn.lang-ko {
         padding: min(0.625vw, 12px) min(1.9791666667vw, 38px) min(0.3125vw, 6px) min(3.0208333333vw, 58px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-btns .btn.lang-ko {
         padding: 2.998696219vw 15.6453715776vw 1.8252933507vw 18.2529335072vw
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-btns .btn {
         width: min(10.2639296188vw, 105px);
         font-size: min(1.8229166667vw, 14px);
         padding: min(0.8797653959vw, 9px) min(3.7145650049vw, 38px) min(0.4887585533vw, 5px) min(3.7145650049vw, 38px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-btns .btn {
         width: 100%;
         padding: 2.6075619296vw 14.6023468057vw;
         margin-right: 1.5645371578vw;
         padding-bottom: 1.6949152542vw;
         font-size: 3.3898305085vw;
         font-weight: 700
     }
 }
 
 .safari .popup-btns .btn {
     padding: min(0.2604166667vw, 5px) min(1.9791666667vw, 38px) min(0.2604166667vw, 5px) min(3.0208333333vw, 58px)
 }
 
 @media screen and (min-width: 768px) {
     .safari .popup-btns .btn.lang-ko {
         padding: min(0.2604166667vw, 5px) min(1.9791666667vw, 38px) min(0.3125vw, 6px) min(3.0208333333vw, 58px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .safari .popup-btns .btn.lang-ko {
         padding: 2.3468057366vw 15.6453715776vw 1.8252933507vw 18.2529335072vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .safari .popup-btns .btn {
         padding: 2.6075619296vw 14.6023468057vw;
         margin-right: 1.5645371578vw;
         padding-bottom: 1.6949152542vw;
         font-size: 3.3898305085vw;
         font-weight: 700
     }
 }
 
 html.dark-mode .popup-btns .btn-ok {
     border: 1px solid #fff;
     color: #fff
 }
 
 .popup-btns .btn-ok:hover {
     background: var(--primary-pink);
     color: #fff;
     border-color: rgba(0, 0, 0, 0)
 }
 
 html.dark-mode .popup-btns .btn-ok:hover {
     border-color: rgba(0, 0, 0, 0)
 }
 
 .popup-btns .btn-ok:hover .accept-icon:before {
     border-color: #fff
 }
 
 .popup-btns .btn-ok .accept-icon:before {
     content: "";
     display: inline-block;
     width: min(0.9375vw, 18px);
     height: min(0.9375vw, 18px);
     border: 1px solid #000;
     border-radius: 50%;
     position: absolute;
     left: min(1.25vw, 24px);
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     -webkit-transition: all .2s;
     transition: all .2s
 }
 
 html.dark-mode .popup-btns .btn-ok .accept-icon:before {
     border-color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .popup-btns .btn-ok .accept-icon:before {
         width: 3.3898305085vw;
         height: 3.3898305085vw;
         left: 5.9973924381vw
     }
     .lang-ko .popup-btns .btn-ok .accept-icon:before {
         left: 7.8226857888vw
     }
 }
 
 .popup-btns .btn-cancel {
     border: 1px solid #767676;
     margin-right: min(0.3125vw, 6px);
     color: #767676
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .popup-btns .btn-cancel {
         margin-right: min(0.78125vw, 6px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .popup-btns .btn-cancel {
         margin-right: 1.5645371578vw
     }
 }
 
 .popup-btns .btn-cancel:hover {
     background: #767676;
     color: #fff;
     border-color: rgba(0, 0, 0, 0)
 }
 
 html.dark-mode .popup-btns .btn-cancel:hover {
     background: rgba(118, 118, 118, .2901960784);
     border-color: rgba(0, 0, 0, 0)
 }
 
 .popup-btns .btn-cancel:hover .decline-icon:before,
 .popup-btns .btn-cancel:hover .decline-icon:after {
     background: #fff
 }
 
 .popup-btns .btn-cancel .decline-icon:before,
 .popup-btns .btn-cancel .decline-icon:after {
     content: "";
     display: inline-block;
     width: min(0.9375vw, 18px);
     height: 1px;
     background-color: #767676;
     position: absolute;
     left: min(1.25vw, 24px);
     top: 50%;
     -webkit-transition: all .2s;
     transition: all .2s
 }
 
 @media screen and (max-width: 767px) {
     .popup-btns .btn-cancel .decline-icon:before,
     .popup-btns .btn-cancel .decline-icon:after {
         width: 3.3898305085vw;
         left: 5.9973924381vw
     }
     .lang-ko .popup-btns .btn-cancel .decline-icon:before,
     .lang-ko .popup-btns .btn-cancel .decline-icon:after {
         left: 6.7796610169vw
     }
 }
 
 .popup-btns .btn-cancel .decline-icon:before {
     -webkit-transform: translateY(-50%) rotate(45deg);
     transform: translateY(-50%) rotate(45deg)
 }
 
 .popup-btns .btn-cancel .decline-icon:after {
     -webkit-transform: translateY(-50%) rotate(-45deg);
     transform: translateY(-50%) rotate(-45deg)
 }
 
 .cursor {
     position: fixed;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     pointer-events: none;
     z-index: 99;
     opacity: 0;
     mix-blend-mode: difference;
     display: none
 }
 
 .cursor-inner {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #fff
 }
 
 .cursor-outer {
     width: 50px;
     height: 50px;
     overflow: visible;
     -webkit-animation: rotate 3s infinite linear;
     animation: rotate 3s infinite linear
 }
 
 .cursor-star {
     position: absolute;
     top: 50%;
     left: 0;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     width: 14px;
     height: auto;
     -webkit-animation: rotate 3s infinite linear;
     animation: rotate 3s infinite linear;
     animation-direction: reverse
 }
 
 .cursor-star path {
     fill: #fff;
     mix-blend-mode: difference
 }
 
 @-webkit-keyframes rotate {
     from {
         -webkit-transform: translate(-50%, -50%) rotate(0deg);
         transform: translate(-50%, -50%) rotate(0deg)
     }
     to {
         -webkit-transform: translate(-50%, -50%) rotate(360deg);
         transform: translate(-50%, -50%) rotate(360deg)
     }
 }
 
 @keyframes rotate {
     from {
         -webkit-transform: translate(-50%, -50%) rotate(0deg);
         transform: translate(-50%, -50%) rotate(0deg)
     }
     to {
         -webkit-transform: translate(-50%, -50%) rotate(360deg);
         transform: translate(-50%, -50%) rotate(360deg)
     }
 }
 
 .loading-container {
     background-color: #fff;
     min-width: 320px;
     width: 100%;
     height: 100%;
     z-index: 9999;
     -webkit-transition: background-color .3s ease-out;
     transition: background-color .3s ease-out;
     position: fixed;
     top: 0;
     left: 0
 }
 
 html.dark-mode .loading-container {
     background-color: #000
 }
 
 .loading-rolling {
     position: absolute;
     left: 50%;
     top: 50%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-size: min(1.25vw, 24px);
     color: #000;
     -webkit-transition: color .3s ease-out, width .65s .5s ease-in-out;
     transition: color .3s ease-out, width .65s .5s ease-in-out;
     z-index: 1
 }
 
 html.dark-mode .loading-rolling {
     color: #fff
 }
 
 html:not(.static-mode) .loading-rolling {
     width: min(23.4375vw, 450px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .loading-rolling {
         width: min(43.9882697947vw, 450px)
     }
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode) .loading-rolling {
         width: 56.0625814863vw
     }
 }
 
 html.static-mode .loading-rolling {
     width: auto
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .loading-rolling {
         font-size: 20px
     }
 }
 
 @media screen and (max-width: 767px) {
     .loading-rolling {
         width: 56.0625814863vw;
         font-size: 3.1290743155vw
     }
 }
 
 .loading-title {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     font-weight: bold
 }
 
 .loading-title:after {
     content: "";
     display: inline-block;
     width: min(4.1666666667vw, 80px);
     height: 1px;
     margin: 0 min(0.3125vw, 6px) min(0.46875vw, 9px);
     background-color: #000;
     -webkit-transition: background-color .3s ease-out, width .65s .5s ease-in-out;
     transition: background-color .3s ease-out, width .65s .5s ease-in-out
 }
 
 html.dark-mode .loading-title:after {
     background-color: #fff
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .loading-title:after {
         width: min(7.8201368524vw, 80px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .loading-title:after {
         width: 10.4302477184vw;
         margin-bottom: 1.1734028683vw
     }
 }
 
 .end>.loading-title:after {
     width: min(2.6041666667vw, 50px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .end>.loading-title:after {
         width: min(3.9100684262vw, 40px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .end>.loading-title:after {
         width: 6.518904824vw
     }
 }
 
 .loading-wrap {
     position: relative;
     height: min(1.4583333333vw, 28px);
     -webkit-transition: width .3s;
     transition: width .3s
 }
 
 .loading-wrap::before {
     content: "";
     height: min(5.2083333333vw, 100px);
     width: 500px;
     display: block;
     background-color: #fff;
     position: absolute;
     z-index: 99;
     bottom: min(1.4583333333vw, 28px);
     pointer-events: none;
     -webkit-transition: background-color .3s ease-out;
     transition: background-color .3s ease-out
 }
 
 html.dark-mode .loading-wrap::before {
     background-color: #000
 }
 
 @media screen and (max-width: 767px) {
     .loading-wrap::before {
         height: 13.037809648vw
     }
 }
 
 .loading-wrap::after {
     content: "";
     height: min(5.2083333333vw, 100px);
     width: 500px;
     display: block;
     background-color: #fff;
     position: absolute;
     z-index: 99;
     top: min(1.4583333333vw, 28px);
     pointer-events: none;
     -webkit-transition: background-color .3s ease-out;
     transition: background-color .3s ease-out
 }
 
 html.dark-mode .loading-wrap::after {
     background-color: #000
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .loading-wrap::after {
         top: 25px
     }
 }
 
 @media screen and (max-width: 767px) {
     .loading-wrap::after {
         height: 13.037809648vw;
         top: 3.6505867014vw
     }
 }
 
 .loading-list {
     position: absolute;
     top: 0;
     width: auto;
     height: 100%;
     -webkit-transition: opacity .3s;
     transition: opacity .3s
 }
 
 .loading-list p {
     display: block;
     position: absolute;
     top: 0;
     -webkit-transform: translateY(28px);
     transform: translateY(28px);
     white-space: nowrap;
     display: none
 }
 
 html:not(.static-mode) .loading-list p {
     display: block
 }
 
 .loading-list p.loading-show-item {
     position: relative;
     -webkit-transform: translateY(0px);
     transform: translateY(0px);
     opacity: 1;
     -webkit-transition: opacity .7s ease-in-out, -webkit-transform .7s;
     transition: opacity .7s ease-in-out, -webkit-transform .7s;
     transition: transform .7s, opacity .7s ease-in-out;
     transition: transform .7s, opacity .7s ease-in-out, -webkit-transform .7s;
     width: 100%
 }
 
 .safari .loading-list p.loading-show-item {
     -webkit-transform: translateY(-2px);
     transform: translateY(-2px)
 }
 
 .loading-list p.loading-up-item {
     -webkit-transform: translateY(-28px);
     transform: translateY(-28px);
     opacity: 0;
     -webkit-transition: opacity .7s ease-in-out, -webkit-transform .7s;
     transition: opacity .7s ease-in-out, -webkit-transform .7s;
     transition: transform .7s, opacity .7s ease-in-out;
     transition: transform .7s, opacity .7s ease-in-out, -webkit-transform .7s
 }
 
 .loading-end-item {
     font-weight: 700;
     position: relative;
     top: 0;
     -webkit-transform: translateY(28px);
     transform: translateY(28px);
     -webkit-transition: -webkit-transform .5s;
     transition: -webkit-transform .5s;
     transition: transform .5s;
     transition: transform .5s, -webkit-transform .5s;
     -webkit-transition-delay: .5s;
     transition-delay: .5s
 }
 
 html.static-mode .loading-end-item {
     -webkit-transform: translate(0px);
     transform: translate(0px)
 }
 
 .loading-percent-num {
     color: #e0e0e0;
     z-index: 2;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     font-size: min(3.125vw, 60px);
     font-weight: 100;
     position: fixed;
     left: 50%;
     bottom: min(1.5625vw, 30px);
     z-index: 2;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     -webkit-transition: background-color .3s ease-out;
     transition: background-color .3s ease-out;
     display: none
 }
 
 html.dark-mode .loading-percent-num {
     color: #6e6e6e
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .loading-percent-num {
         font-size: min(5.8651026393vw, 60px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .loading-percent-num {
         font-size: 7.8226857888vw
     }
 }
 
 html:not(.static-mode) .loading-percent-num {
     display: block
 }
 
 .loading-progress {
     width: 0;
     height: min(0.2604166667vw, 5px);
     position: fixed;
     bottom: 0;
     left: 0;
     display: block;
     background-color: var(--primary-pink);
     z-index: 2;
     -webkit-transition: width .1s ease-out;
     transition: width .1s ease-out
 }
 
 html.dark-mode .loading-progress {
     background-color: #6835fc
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .loading-progress {
         height: min(0.5865102639vw, 6px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .loading-progress {
         height: 0.7822685789vw
     }
 }
 
 #awwwards {
     top: min(46.6666666667vw, 420px);
     right: 0;
     -webkit-transform: rotate(56deg);
     transform: rotate(56deg);
     -webkit-transform-origin: right top;
     transform-origin: right top;
     margin-top: -97px
 }
 
 @media screen and (min-width: 768px)and (max-width: 900px) {
     #awwwards {
         margin-top: min(-10.7777777778vw, -97px)
     }
 }
 
 @media screen and (max-width: 767px) {
     #awwwards {
         top: 48.309178744vw;
         -webkit-transform: rotate(56deg) scale(0.55);
         transform: rotate(56deg) scale(0.55);
         margin-top: -54px
     }
 }
 
 html.static-mode #awwwards {
     position: absolute !important;
     top: 0
 }
 
 #awwwards .js-color-bg {
     fill: #b56bf3
 }
 
 #awwwards .js-color-text {
     fill: #000
 }
 
 :root {
     --scrollbar-width: 0px
 }
 
 .page-section.page-index {
     padding: 0;
     background-color: #fff
 }
 
 .page-section.page-index .sticky-wrap {
     height: 200vh;
     margin-bottom: -100vh
 }
 
 html.static-mode .page-section.page-index .sticky-wrap {
     margin-bottom: 0
 }
 
 .page-section.page-index .content-about-hiring {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: baseline;
     -ms-flex-align: baseline;
     align-items: baseline
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-about-hiring {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column
     }
 }
 
 .page-section.page-index .content-about-hiring .item-about-hiring {
     -webkit-box-flex: 50%;
     -ms-flex: 50%;
     flex: 50%;
     margin-right: min(3.3333333333vw, 30px)
 }
 
 .page-section.page-index .content-about-hiring .item-about-hiring:last-child {
     margin-right: 0
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-about-hiring .item-about-hiring {
         -webkit-box-flex: 100%;
         -ms-flex: 100%;
         flex: 100%;
         width: 100%;
         margin-right: 7.3011734029vw;
         margin-top: 16.9491525424vw
     }
 }
 
 .page-section.page-index .content-about-hiring .item-about-hiring .item-about-list>li,
 .page-section.page-index .content-about-hiring .item-about-hiring .item-hiring-list>li {
     margin: min(0.1111111111vw, 1px) 0;
     padding: min(0.3333333333vw, 3px) 0 min(0.3333333333vw, 3px) min(0.2222222222vw, 2px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-about-hiring .item-about-hiring .item-about-list>li,
     .page-section.page-index .content-about-hiring .item-about-hiring .item-hiring-list>li {
         margin: 0.5215123859vw 0
     }
 }
 
 .page-section.page-index .content-about-hiring .item-about-hiring .item-hiring-list .text_p:after {
     content: "";
     display: inline-block;
     width: min(0.6770833333vw, 13px);
     height: min(0.6770833333vw, 13px);
     margin-left: min(0.2604166667vw, 5px);
     margin-bottom: min(0.1041666667vw, 2px);
     vertical-align: middle;
     background: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%23000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain
 }
 
 html.dark-mode .page-section.page-index .content-about-hiring .item-about-hiring .item-hiring-list .text_p:after {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%23fff' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-about-hiring .item-about-hiring .item-hiring-list .text_p:after {
         width: 3.259452412vw;
         height: 3.259452412vw;
         margin-left: 1.3037809648vw;
         margin-bottom: 0.6518904824vw;
         background-size: 3.259452412vw
     }
 }
 
 .page-section.page-index .content-about-hiring .icon_p {
     font-size: min(2.2222222222vw, 20px);
     margin-right: min(0.4444444444vw, 4px);
     font-style: normal
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-about-hiring .icon_p {
         font-size: 3.6505867014vw;
         margin-right: 1.9556714472vw
     }
 }
 
 .page-section.page-index .content-about-hiring .text_p {
     padding-bottom: min(0.1111111111vw, 1px);
     color: #000;
     font-weight: 500;
     text-overflow: ellipsis;
     border-bottom: min(0.1111111111vw, 1px) solid rgba(55, 53, 47, .16)
 }
 
 html.dark-mode .page-section.page-index .content-about-hiring .text_p {
     color: #fff;
     border-color: #787774
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-about-hiring .text_p {
         font-size: 3.9113428944vw
     }
 }
 
 .page-section.page-index .content-join {
     margin-top: min(6vw, 54px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-join {
         margin-top: 13.037809648vw
     }
 }
 
 .page-section.page-index .content-join .callout-block .text a.mail-text {
     color: #337ea9;
     font-weight: 400;
     border-bottom: .05em solid;
     border-color: rgba(55, 53, 47, .4)
 }
 
 .page-section.page-index .content-join .callout-block .text a.mail-text>i {
     margin: 0 min(0.1111111111vw, 1px)
 }
 
 .page-section.page-index .content-join .bulleted-list i {
     margin: 0 min(0.8888888889vw, 8px)
 }
 
 .page-section.page-index .content-join .bulleted-list i strong {
     font-weight: 600
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-join .bulleted-list i {
         margin: 0 1.9556714472vw
     }
 }
 
 html.static-mode .page-section.page-index .content-hiring-wrap {
     position: relative;
     bottom: unset
 }
 
 .page-section.page-index .content-contact {
     margin-top: min(7.7777777778vw, 70px);
     margin-bottom: min(7.7777777778vw, 70px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-contact {
         margin-top: 12.5162972621vw;
         margin-bottom: 14.9934810952vw
     }
 }
 
 .page-section.page-index .content-contact .bulleted-list .gap-mobile {
     display: none
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .content-contact .bulleted-list .gap-mobile {
         display: block;
         height: 1.4341590613vw
     }
 }
 
 .page-section.page-index .copyrights {
     font-weight: 500;
     margin-top: min(7.7777777778vw, 70px);
     margin-bottom: min(11.1111111111vw, 100px)
 }
 
 html.static-mode .page-section.page-index .copyrights {
     margin-bottom: 0
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .copyrights {
         margin-top: 14.9934810952vw;
         font-size: 3.9113428944vw
     }
 }
 
 .page-section.page-index .copyrights i,
 .page-section.page-index .copyrights a {
     color: #787774;
     fill: #787774
 }
 
 .page-section.page-index .copyrights a {
     border-bottom: .05em solid;
     border-color: rgba(55, 53, 47, .4);
     opacity: .7
 }
 
 .page-section.page-index .sticky-bg {
     position: fixed;
     width: 100vw;
     height: 100vh;
     left: 50%;
     bottom: 0;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     background-color: #fff;
     z-index: -1
 }
 
 html.dark-mode .page-section.page-index .sticky-bg {
     background-color: #000;
     color: #fff
 }
 
 .page-section.page-index .notion-content,
 .page-section.page-index .notion-content .lang-ko {
     font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
 }
 
 html:not(.static-mode) .page-section.page-index .notion-content {
     position: relative;
     z-index: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
     -webkit-perspective: 1000px;
     perspective: 1000px
 }
 
 html.static-mode .page-section.page-index .notion-content {
     position: relative
 }
 
 html.lang-en .page-section.page-index .notion-content .lang-ko {
     display: none
 }
 
 html.lang-ko .page-section.page-index .notion-content .lang-en {
     display: none
 }
 
 html.static-mode .page-section.page-index .img-ipad {
     position: absolute;
     opacity: 0;
     z-index: 999;
     pointer-events: none;
     width: min(138.8888888889vw, 1250px);
     margin-left: calc(-1*min(69.4444444444vw, 625px));
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     will-change: transform;
     -webkit-font-smoothing: antialiased;
     -webkit-perspective: 2;
     perspective: 2;
     left: 50%;
     bottom: 0
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-index .img-ipad {
         width: 84.2242503259vw;
         margin-left: calc(-1 * 42.112125163vw)
     }
 }
 
 .page-section.page-index .img-ipad .img-content-ipad {
     display: none
 }
 
 @media screen and (min-width: 768px) {
     .page-section.page-index .img-ipad .img-content-ipad {
         display: block
     }
 }
 
 .page-section.page-index .img-ipad .img-content-iphone {
     display: none
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .img-ipad .img-content-iphone {
         display: block
     }
 }
 
 .page-section.page-index .capture-wrap.capture-on .content-achievements,
 .page-section.page-index .capture-wrap.capture-on .content-hiring-wrap {
     margin-left: calc(var(--scrollbar-width)/2 - var(--scrollbar-width));
     padding-right: calc(var(--scrollbar-width)/2)
 }
 
 .page-section.page-index .capture-wrap.capture-end .content-achievements,
 .page-section.page-index .capture-wrap.capture-end .content-hiring-wrap {
     margin-left: 0px;
     padding-right: 0px
 }
 
 .page-section.page-index .notion-content {
     position: relative
 }
 
 /* html:not(.static-mode) .page-section.page-index .notion-content {
     padding-top: min(46.6666666667vw, 420px)
 } */
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode) .page-section.page-index .notion-content {
         padding-top: 48.309178744vw
     }
 }
 
 .page-section.page-index .notion-wrap {
     position: relative;
     width: 100%;
     max-width: 900px;
     margin: 0 auto;
     z-index: 20;
     padding: min(9.3333333333vw, 84px) min(10.6666666667vw, 96px) min(11.1111111111vw, 100px);
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-perspective: 1;
     perspective: 1;
     -webkit-transform-style: preserve-3d;
     transform-style: preserve-3d;
     will-change: transform;
     -webkit-font-smoothing: antialiased
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-wrap {
         padding: min(10.9517601043vw, 84px) 7.8226857888vw 1px 7.8226857888vw
     }
 }
 
 html.static-mode .page-section.page-index .notion-wrap {
     -webkit-transform-origin: bottom;
     transform-origin: bottom
 }
 
 .page-section.page-index .notion-wrap+.notion-wrap {
     margin-top: max(-11.1111111111vw, -100px);
     padding-top: 0
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-wrap+.notion-wrap {
         margin-top: -1px
     }
 }
 
 html:not(.static-mode) .page-section.page-index .notion-forfixed {
     position: relative;
     z-index: 1
 }
 
 html:not(.static-mode).color-mode .page-section.page-index .notion-forfixed {
     width: 100%;
     background: #fff
 }
 
 html:not(.static-mode).dark-mode .page-section.page-index .notion-forfixed {
     width: 100%;
     background: #000
 }
 
 .page-section.page-index .notion-cover {
     position: relative;
     height: min(46.6666666667vw, 420px);
     background-color: #563f87;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     overflow: hidden
 }
 
 html.static-mode .page-section.page-index .notion-cover {
     width: 100%
 }
 
 html:not(.static-mode) .page-section.page-index .notion-cover {
     width: calc(100% - var(--scrollbar-width))
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-cover {
         height: 48.309178744vw
     }
 }
 
 html:not(.static-mode) .page-section.page-index .notion-cover {
     position: fixed
 }
 
 .page-section.page-index .notion-cover .scroll-hint {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     height: 100%;
     font-family: "Helvetica Neue";
     color: #fff;
     font-weight: normal;
     font-size: min(3.90625vw, 100px);
     line-height: 1.1;
     letter-spacing: calc(-1*min(0.15625vw, 4px));
     text-align: center;
     background: linear-gradient(359deg, #563f87, rgba(255, 255, 255, 0.8), #563f87) no-repeat;
     background-size: 100%;
     -webkit-background-clip: text;
     background-clip: text;
     color: rgba(255, 255, 255, .3);
     -webkit-animation: shine linear 2.5s infinite;
     animation: shine linear 2.5s infinite
 }
 
 @-webkit-keyframes shine {
     0% {
         background-position-y: min(38.8888888889vw, 350px)
     }
     100% {
         background-position-y: calc(-1*min(38.8888888889vw, 350px))
     }
 }
 
 @keyframes shine {
     0% {
         background-position-y: min(38.8888888889vw, 350px)
     }
     100% {
         background-position-y: calc(-1*min(38.8888888889vw, 350px))
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-cover .scroll-hint {
         font-size: min(9.3872229465vw, 72px);
         letter-spacing: calc(-1*min(0.5215123859vw, 4px))
     }
     .page-section.page-index .notion-cover .scroll-hint.lang-en {
         letter-spacing: calc(-1*min(0.260756193vw, 2px))
     }
     @-webkit-keyframes shine {
         0% {
             background-position-y: 39.1134289439vw
         }
         100% {
             background-position-y: -39.1134289439vw
         }
     }
     @keyframes shine {
         0% {
             background-position-y: 39.1134289439vw
         }
         100% {
             background-position-y: -39.1134289439vw
         }
     }
 }
 
 html.static-mode .page-section.page-index .notion-cover .scroll-hint {
     display: none
 }
 
 html.lang-en .page-section.page-index .notion-cover .scroll-hint.lang-ko {
     display: none !important
 }
 
 html.lang-ko .page-section.page-index .notion-cover .scroll-hint.lang-en {
     display: none !important
 }
 
 .page-section.page-index .notion-cover .scroll-light {
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background: -webkit-gradient(linear, left bottom, left top, from(rgba(86, 63, 135, 0)), color-stop(37%, rgba(86, 63, 135, 0.696997549)), color-stop(51%, rgba(86, 63, 135, 0.7390143557)), color-stop(65%, rgba(86, 63, 135, 0.6493785014)), to(rgba(86, 63, 135, 0)));
     background: linear-gradient(360deg, rgba(86, 63, 135, 0) 0%, rgba(86, 63, 135, 0.696997549) 37%, rgba(86, 63, 135, 0.7390143557) 51%, rgba(86, 63, 135, 0.6493785014) 65%, rgba(86, 63, 135, 0) 100%);
     opacity: .65;
     -webkit-animation: slideDown 3s cubic-bezier(0.4, 0, 1, 1) infinite;
     animation: slideDown 3s cubic-bezier(0.4, 0, 1, 1) infinite;
     will-change: transform
 }
 
 @-webkit-keyframes slideDown {
     0% {
         -webkit-transform: translateY(60%);
         transform: translateY(60%)
     }
     70% {
         -webkit-transform: translateY(-70%);
         transform: translateY(-70%)
     }
     100% {
         -webkit-transform: translateY(-70%);
         transform: translateY(-70%)
     }
 }
 
 @keyframes slideDown {
     0% {
         -webkit-transform: translateY(60%);
         transform: translateY(60%)
     }
     70% {
         -webkit-transform: translateY(-70%);
         transform: translateY(-70%)
     }
     100% {
         -webkit-transform: translateY(-70%);
         transform: translateY(-70%)
     }
 }
 
 html.static-mode .page-section.page-index .notion-cover .scroll-light {
     display: none
 }
 
 .page-section.page-index .notion-page {
     font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
     font-size: min(1.7777777778vw, 16px);
     line-height: 1.5;
     color: #000;
     background-color: #fff
 }
 
 html.dark-mode .page-section.page-index .notion-page {
     background-color: #000;
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page {
         font-size: 4.0417209909vw
     }
 }
 
 .page-section.page-index .notion-page a,
 .page-section.page-index .notion-page button {
     font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
 }
 
 .page-section.page-index .notion-page img {
     display: block;
     max-width: 100%
 }
 
 .page-section.page-index .notion-page .weight400 {
     font-weight: 400
 }
 
 .page-section.page-index .notion-page .mt40 {
     margin-top: min(4.4444444444vw, 40px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .mt40 {
         margin-top: 8.4745762712vw
     }
 }
 
 .page-section.page-index .notion-page .mt80 {
     margin-top: min(8.8888888889vw, 80px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .mt80 {
         margin-top: 14.4719687093vw
     }
 }
 
 .page-section.page-index .notion-page .text {
     display: block;
     word-break: break-word
 }
 
 html.lang-ko .page-section.page-index .notion-page .text {
     word-break: keep-all
 }
 
 .page-section.page-index .notion-page .text span {
     display: inline
 }
 
 .page-section.page-index .notion-page .text strong {
     font-weight: 600
 }
 
 .page-section.page-index .notion-page .text.normal {
     color: #787774;
     font-weight: 500
 }
 
 .page-section.page-index .notion-page .text.normal span {
     color: #000;
     font-weight: 700;
     background: rgba(244, 240, 247, .8)
 }
 
 html.dark-mode .page-section.page-index .notion-page .text.normal span {
     color: #fff;
     background: rgba(56, 44, 66, .8)
 }
 
 .page-section.page-index .notion-page .text .gray {
     color: #787774
 }
 
 .page-section.page-index .notion-page .text .gray.weight400 {
     font-weight: 500
 }
 
 .page-section.page-index .notion-page .text.title {
     font-size: min(4.4444444444vw, 40px);
     line-height: 1.2;
     font-weight: 700
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .text.title {
         font-size: 7.8226857888vw
     }
 }
 
 .page-section.page-index .notion-page .text.h1 {
     font-size: 1.875em;
     line-height: 1.3;
     font-weight: 600;
     margin-bottom: min(1.1111111111vw, 10px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .text.h1 {
         font-size: 1.5em;
         margin-bottom: 1.1734028683vw
     }
 }
 
 .page-section.page-index .notion-page .text.h2 {
     font-size: 1.5em;
     line-height: 1.3;
     font-weight: 600
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .text.h2 {
         font-size: 1.25em
     }
 }
 
 .page-section.page-index .notion-page .callout-block {
     padding: min(1.7777777778vw, 16px);
     padding-left: min(1.3333333333vw, 12px);
     background-color: #f1f1ef;
     margin-bottom: min(7.7777777778vw, 70px);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     border-radius: 3px;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center
 }
 
 html.dark-mode .page-section.page-index .notion-page .callout-block {
     color: #000
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .callout-block {
         font-size: 3.9113428944vw;
         font-weight: 400;
         padding: 3.9113428944vw 3.9113428944vw 3.9113428944vw 2.998696219vw;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start
     }
 }
 
 .page-section.page-index .notion-page .callout-block .icon {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     font-size: min(2.4444444444vw, 22px);
     -ms-flex-item-align: start;
     align-self: flex-start
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .callout-block .icon {
         font-size: 4.0417209909vw
     }
 }
 
 .page-section.page-index .notion-page .callout-block .text {
     width: 100%;
     margin-left: min(0.8888888889vw, 8px);
     font-weight: 700
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .callout-block .text {
         font-size: 3.9113428944vw;
         margin-left: 1.3037809648vw
     }
 }
 
 .page-section.page-index .notion-page .content-join .callout-block {
     margin-top: min(0.4444444444vw, 4px);
     margin-bottom: min(0.5555555556vw, 5px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .content-join .callout-block {
         margin-top: 0.9126466754vw;
         margin-bottom: 0.9126466754vw
     }
 }
 
 .page-section.page-index .notion-page .content-join .bulleted-list {
     padding-bottom: min(3.3333333333vw, 30px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .content-join .bulleted-list {
         padding-bottom: 8.4745762712vw
     }
 }
 
 .page-section.page-index .notion-page .divider-block {
     height: min(1.5555555556vw, 14px);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center
 }
 
 .page-section.page-index .notion-page .divider-block:after {
     content: "";
     display: block;
     width: 100%;
     height: 1px;
     background-color: rgba(55, 53, 47, .16)
 }
 
 html.dark-mode .page-section.page-index .notion-page .divider-block:after {
     background-color: #3d3d3d
 }
 
 html.static-mode.dark-mode .page-section.page-index .notion-page .divider-block:after {
     background-color: #787774
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .divider-block {
         height: 3.3898305085vw
     }
 }
 
 .page-section.page-index .notion-page .bulleted-list {
     padding-bottom: min(1.1111111111vw, 10px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .bulleted-list {
         font-size: 4.0417209909vw
     }
 }
 
 .page-section.page-index .notion-page .bulleted-list .text {
     word-break: break-word
 }
 
 html.lang-ko .page-section.page-index .notion-page .bulleted-list .text {
     word-break: keep-all
 }
 
 .page-section.page-index .notion-page .bulleted-list .notion-hashtag {
     background: rgba(244, 240, 247, .8)
 }
 
 html.dark-mode .page-section.page-index .notion-page .bulleted-list .notion-hashtag {
     background: rgba(56, 44, 66, .8)
 }
 
 .page-section.page-index .notion-page .bulleted-list a {
     display: inline;
     color: #37352f;
     border-bottom: .05em solid rgba(55, 53, 47, .4);
     opacity: .7;
     word-wrap: break-word
 }
 
 html.dark-mode .page-section.page-index .notion-page .bulleted-list a {
     font-weight: 700;
     color: #a080ff;
     border-color: #a080ff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .bulleted-list a.capture-ignore {
         border-bottom: none
     }
 }
 
 .page-section.page-index .notion-page .bulleted-list>div {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-line-pack: start;
     align-content: flex-start;
     padding: min(0.3333333333vw, 3px) min(0.2222222222vw, 2px);
     margin: min(0.1111111111vw, 1px) 0;
     width: 100%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .bulleted-list>div {
         padding: 0.6518904824vw 0.3911342894vw;
         margin: 0.260756193vw 0
     }
 }
 
 .page-section.page-index .notion-page .bulleted-list>div:before {
     content: "";
     display: inline-block;
     width: min(0.6666666667vw, 6px);
     height: min(0.6666666667vw, 6px);
     -ms-flex-negative: 0;
     flex-shrink: 0;
     background: #000;
     border-radius: 100%;
     margin: min(1.1111111111vw, 10px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-index .notion-page .bulleted-list>div:before {
         width: 1.4341590613vw;
         height: 1.4341590613vw;
         margin: 2.0860495437vw
     }
 }
 
 html.lang-ko .page-section.page-index .notion-page .content-achievements .bulleted-list>div:before {
     margin-top: min(0.7777777778vw, 7px)
 }
 
 @media screen and (max-width: 767px) {
     html.lang-ko .page-section.page-index .notion-page .content-achievements .bulleted-list>div:before {
         margin: 2.0860495437vw
     }
 }
 
 .page-section.page-index .notion-page .content-join p.h2 {
     font-weight: 600
 }
 
 .page-section.page-index .notion-page .content-join .text {
     font-weight: 400
 }
 
 .page-section.page-index .notion-page .content-contact .bulleted-list>div .text.lang-ko {
     margin-top: 2px
 }
 
 .screen-canvas-wrap {
     width: calc(100% - var(--scrollbar-width))
 }
 
 .screen-canvas-wrap .screen-canvas {
     left: calc(50% + var(--scrollbar-width)/2)
 }
 
 .page-section.page-about {
     --axis-x: 1px;
     --axis-y: 25px;
     --delay: 10;
     --color-black: #000;
     --color-white: #fff;
     --color-orange: #D49C3D;
     --color-red: #D14B3D;
     --color-violet: #CF52EB;
     --color-blue: #44A3F7;
     --color-green: #5ACB3C;
     --color-yellow: #DEBF40;
     --color-foreground: var(--color-white)
 }
 
 html:not(.static-mode).color-mode .page-section.page-about {
     margin-top: -80vh;
     padding-top: 80vh
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about {
         margin-bottom: 29.9869621904vw
     }
 }
 
 .page-section.page-about .page-content {
     padding: min(14.0625vw, 270px) min(9.0104166667vw, 173px);
     text-shadow: 0 0 6px rgba(0, 0, 0, .4588235294)
 }
 
 html.lang-ko .page-section.page-about .page-content {
     word-break: keep-all
 }
 
 html:not(.static-mode).light-mode .page-section.page-about .page-content {
     color: #000;
     text-shadow: 0 0 6px rgba(255, 255, 255, .46)
 }
 
 html.static-mode .page-section.page-about .page-content {
     background: #fff;
     padding: min(18.8541666667vw, 362px) min(8.3854166667vw, 161px) min(11.0416666667vw, 212px);
     color: #000;
     text-shadow: none
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content {
     background: #000;
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content {
         padding: 29.9869621904vw 7.8226857888vw 0
     }
     html.static-mode .page-section.page-about .page-content {
         margin-top: 19.556714472vw;
         padding: 29.9869621904vw 7.8226857888vw 0
     }
 }
 
 html:not(.static-mode) .page-section.page-about .page-content .quote-title .visuallyhidden {
     display: none
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .visuallyhidden {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
     font-size: 0
 }
 
 .page-section.page-about .page-content .quote-title .c-rainbow {
     font-size: min(10.4166666667vw, 200px);
     font-weight: bold
 }
 
 .page-section.page-about .page-content .quote-title .c-rainbow strong:first-child {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span {
     display: inline-block;
     text-shadow: min(0.2083333333vw, 4px) min(0.2083333333vw, 4px) 0 #a084ff;
     -webkit-transition: -webkit-transform .2s ease;
     transition: -webkit-transform .2s ease;
     transition: transform .2s ease;
     transition: transform .2s ease, -webkit-transform .2s ease;
     -webkit-animation: waviy 1.5s infinite;
     animation: waviy 1.5s infinite
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(1) {
     -webkit-animation-delay: .1s;
     animation-delay: .1s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(2) {
     -webkit-animation-delay: .2s;
     animation-delay: .2s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(3) {
     -webkit-animation-delay: .3s;
     animation-delay: .3s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(4) {
     -webkit-animation-delay: .4s;
     animation-delay: .4s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(5) {
     -webkit-animation-delay: .5s;
     animation-delay: .5s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(6) {
     -webkit-animation-delay: .6s;
     animation-delay: .6s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(7) {
     -webkit-animation-delay: .7s;
     animation-delay: .7s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(8) {
     -webkit-animation-delay: .8s;
     animation-delay: .8s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(9) {
     -webkit-animation-delay: .9s;
     animation-delay: .9s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(10) {
     -webkit-animation-delay: 1s;
     animation-delay: 1s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(11) {
     -webkit-animation-delay: 1.1s;
     animation-delay: 1.1s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(12) {
     -webkit-animation-delay: 1.2s;
     animation-delay: 1.2s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(13) {
     -webkit-animation-delay: 1.3s;
     animation-delay: 1.3s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(14) {
     -webkit-animation-delay: 1.4s;
     animation-delay: 1.4s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(15) {
     -webkit-animation-delay: 1.5s;
     animation-delay: 1.5s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(16) {
     -webkit-animation-delay: 1.6s;
     animation-delay: 1.6s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(17) {
     -webkit-animation-delay: 1.7s;
     animation-delay: 1.7s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(18) {
     -webkit-animation-delay: 1.8s;
     animation-delay: 1.8s
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span:nth-child(19) {
     -webkit-animation-delay: 1.9s;
     animation-delay: 1.9s
 }
 
 @-webkit-keyframes waviy {
     0%,
     40%,
     100% {
         -webkit-transform: translateY(0);
         transform: translateY(0)
     }
     20% {
         -webkit-transform: translateY(-25px);
         transform: translateY(-25px)
     }
 }
 
 @keyframes waviy {
     0%,
     40%,
     100% {
         -webkit-transform: translateY(0);
         transform: translateY(0)
     }
     20% {
         -webkit-transform: translateY(-25px);
         transform: translateY(-25px)
     }
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span {
     color: #fff;
     text-shadow: min(0.3125vw, 6px) min(0.3125vw, 6px) 0 var(--primary-pink)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span {
         font-size: 15.6453715776vw
     }
     html.static-mode.dark-mode .page-section.page-about .page-content .quote-title .c-rainbow strong span {
             text-shadow: 0.7822685789vw 0.7822685789vw 0 var(--primary-pink)
     }
 }
 
 .page-section.page-about .page-content .quote-title .quote {
     font-size: min(1.9791666667vw, 38px);
     font-weight: bold;
     line-height: 1.22em;
     margin-top: min(2.6041666667vw, 50px);
     max-width: min(39.5833333333vw, 760px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-about .page-content .quote-title .quote {
         font-size: min(4.9479166667vw, 38px);
         font-weight: bold;
         line-height: 1.22em;
         margin-top: min(6.5104166667vw, 50px);
         max-width: min(98.9583333333vw, 760px)
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-title .quote {
     position: relative;
     z-index: 2;
     max-width: min(48.75vw, 936px);
     margin-top: min(2.4479166667vw, 47px)
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-title .quote {
     text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-title .quote {
         font-size: 5.9973924381vw;
         max-width: 640px;
         margin-top: 13.037809648vw
     }
     html.static-mode .page-section.page-about .page-content .quote-title .quote {
         max-width: 640px
     }
 }
 
 html:not(.static-mode).color-mode .page-section.page-about .page-content .quote-title .quote.show+.quote-term:before {
     width: min(5.2083333333vw, 100px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-content {
         margin-top: 200px
     }
     html.static-mode .page-section.page-about .page-content .quote-content {
         margin-top: 0
     }
 }
 
 .page-section.page-about .page-content .quote-term {
     position: relative;
     margin: min(13.0208333333vw, 250px) 0 min(15.1041666667vw, 290px) min(31.25vw, 600px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-term {
     position: relative;
     left: min(8.3854166667vw, 161px);
     margin: min(6.3541666667vw, 122px) 0 min(6.9791666667vw, 134px) min(31.25vw, 600px);
     margin-top: calc(-1*min(15.9895833333vw, 307px))
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-term {
         font-size: 3.3898305085vw;
         left: 0;
         margin: -4.0417209909vw 0 18.2529335072vw 0;
         padding-left: 11.7340286832vw
     }
     html.static-mode .page-section.page-about .page-content .quote-term {
         left: 0;
         margin: -3.6505867014vw 0 18.2529335072vw 0
     }
 }
 
 .page-section.page-about .page-content .quote-term::before {
     content: "";
     width: min(7.1875vw, 138px);
     height: min(0.0520833333vw, 1px);
     position: absolute;
     left: min(-3.6458333333vw, -70px);
     top: min(-1.3020833333vw, -25px);
     background-color: #fff;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
     -webkit-transition: width .3s;
     transition: width .3s;
     -webkit-transition-delay: .4s;
     transition-delay: .4s;
     -webkit-transform-origin: left top;
     transform-origin: left top;
     -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4588235294);
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4588235294)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-term::before {
     display: none;
     width: 138px;
     background-color: #000;
     -webkit-box-shadow: none;
     box-shadow: none
 }
 
 html:not(.static-mode).light-mode .page-section.page-about .page-content .quote-term::before {
     background-color: #000;
     text-shadow: 0 0 6px rgba(255, 255, 255, .46)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-about .page-content .quote-term::before {
         left: min(-2.8645833333vw, -55px);
         top: min(-0.5208333333vw, -10px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-term::before {
         width: 0;
         left: 13.037809648vw;
         top: -9.1264667536vw;
         opacity: 0;
         -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
         -webkit-transform-origin: left top;
         transform-origin: left top
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-term.show::before {
         width: 13.5593220339vw;
         opacity: 1
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-term .line {
     opacity: 0;
     position: absolute;
     left: min(2.6041666667vw, 50px);
     top: min(32.8125vw, 630px);
     z-index: 1;
     display: inline-block;
     width: 0;
     height: 1px;
     background-color: #000;
     -webkit-transform: rotate(135deg);
     transform: rotate(135deg);
     -webkit-transform-origin: left top;
     transform-origin: left top
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-term .line {
     background-color: #fff
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-term .line {
         left: 16.036505867vw;
         top: 50.1955671447vw
     }
 }
 
 .page-section.page-about .page-content .quote-term p {
     position: relative;
     font-size: min(1.6666666667vw, 32px);
     font-weight: 200;
     line-height: 1.2;
     margin-bottom: min(2.6041666667vw, 50px)
 }
 
 .page-section.page-about .page-content .quote-term p:nth-of-type(2) {
     padding-right: min(5.2083333333vw, 100px) !important
 }
 
 .page-section.page-about .page-content .quote-term p:nth-of-type(3) {
     padding-right: min(12.5vw, 240px)
 }
 
 html.lang-ko .page-section.page-about .page-content .quote-term p:nth-of-type(3) {
     padding-right: min(8.3333333333vw, 160px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-about .page-content .quote-term p {
         font-size: min(2.0833333333vw, 16px)
     }
     .page-section.page-about .page-content .quote-term p br {
         display: none
     }
 }
 
 html.lang-ko .page-section.page-about .page-content .quote-term p {
     font-weight: 400
 }
 
 html.static-mode .page-section.page-about .page-content .quote-term p {
     padding-right: min(5.2083333333vw, 100px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-term p:nth-of-type(2) {
     padding-right: min(20.8333333333vw, 400px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-term p:nth-of-type(3) {
     padding-right: min(23.4375vw, 450px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-term p {
         font-size: 4.6936114733vw;
         margin-bottom: 50px;
         padding-right: 0
     }
     .page-section.page-about .page-content .quote-term p:nth-of-type(2) {
         padding-right: 0
     }
     .page-section.page-about .page-content .quote-term p:nth-of-type(3) {
         padding-right: 0
     }
     html.static-mode .page-section.page-about .page-content .quote-term p {
         padding-right: 0
     }
     html.static-mode .page-section.page-about .page-content .quote-term p:nth-of-type(2) {
         padding-right: 0
     }
     html.static-mode .page-section.page-about .page-content .quote-term p:nth-of-type(3) {
         padding-right: 0
     }
 }
 
 .page-section.page-about .page-content .quote-block {
     font-size: min(4.2708333333vw, 82px);
     line-height: 1.2;
     font-weight: bold;
     letter-spacing: .01em;
     position: relative;
     width: min(63.5416666667vw, 1220px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-block {
         font-size: 5.7366362451vw;
         letter-spacing: -0.0586701434vw;
         margin-right: 0;
         width: 100%
     }
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-block .alive {
     color: #a080ff
 }
 
 html.static-mode .page-section.page-about .page-content .quote-block-wrap {
     margin: min(6.9791666667vw, 134px) 0 min(6.9791666667vw, 134px) min(14.4791666667vw, 278px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-block-wrap {
         margin: 0;
         margin-top: 200px
     }
     html.static-mode .page-section.page-about .page-content .quote-block-wrap {
         margin: 0;
         margin-top: 0
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-image {
     position: relative
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-image {
     background-color: #6835fc
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-image {
         margin-bottom: 10.4302477184vw
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-image img {
     -webkit-transition: -webkit-transform .5s;
     transition: -webkit-transform .5s;
     transition: transform .5s;
     transition: transform .5s, -webkit-transform .5s
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-image img {
     -webkit-transition: -webkit-transform .5s, -webkit-filter .5s ease-in-out;
     transition: -webkit-transform .5s, -webkit-filter .5s ease-in-out;
     transition: transform .5s, filter .5s ease-in-out;
     transition: transform .5s, filter .5s ease-in-out, -webkit-transform .5s, -webkit-filter .5s ease-in-out;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-image img:hover {
     -webkit-transition: -webkit-transform .5s, -webkit-filter .2s ease-in-out;
     transition: -webkit-transform .5s, -webkit-filter .2s ease-in-out;
     transition: transform .5s, filter .2s ease-in-out;
     transition: transform .5s, filter .2s ease-in-out, -webkit-transform .5s, -webkit-filter .2s ease-in-out;
     -webkit-filter: grayscale(0%);
     filter: grayscale(0%)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-image img {
     width: 100%;
     height: 100%
 }
 
 html.static-mode .page-section.page-about .page-content .quote-image--fave {
     max-width: min(54.4270833333vw, 1045px);
     max-height: min(37.0833333333vw, 712px);
     margin-bottom: min(5.2083333333vw, 100px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-image--fave {
         margin-bottom: 200px
     }
     html.static-mode .page-section.page-about .page-content .quote-image--fave {
         max-width: 616px;
         max-height: 432px;
         width: 80.3129074316vw;
         margin-right: 0;
         margin-left: auto
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-image--fave.show+.line {
     width: min(7.2182291667vw, 138.59px);
     opacity: 1;
     -webkit-transition: width .5s, opacity .5s;
     transition: width .5s, opacity .5s;
     -webkit-transition-delay: 1s;
     transition-delay: 1s
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-image--fave.show+.line {
         width: 13.5593220339vw
     }
     html.static-mode .page-section.page-about .page-content .quote-image--fave.show+.line {
         width: 13.5593220339vw
     }
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-image--fave img {
     -webkit-transform: translate3d(calc(-1 * min(1.5625vw, 30px)), calc(-1 * min(1.5625vw, 30px)), 0);
     transform: translate3d(calc(-1 * min(1.5625vw, 30px)), calc(-1 * min(1.5625vw, 30px)), 0)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode.dark-mode .page-section.page-about .page-content .quote-image--fave img {
         -webkit-transform: none;
         transform: none
     }
 }
 
 .page-section.page-about .page-content .quote-image--strong {
     max-width: min(34.1145833333vw, 655px);
     margin-left: min(4.53125vw, 87px);
     margin-bottom: min(5.2083333333vw, 100px)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-image--strong {
         max-width: 61.7992177314vw;
         width: 61.7992177314vw;
         margin: 0 auto 13.037809648vw
     }
 }
 
 .page-section.page-about .page-content .quote-image--people {
     max-width: min(34.9479166667vw, 671px)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-image--people {
         max-width: 73.0117340287vw;
         margin-left: auto;
         margin-right: -7.8226857888vw;
         margin-top: 20.8604954368vw
     }
 }
 
 .page-section.page-about .page-content .quote-image--differ {
     max-width: min(44.1666666667vw, 848px)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-image--differ {
         max-width: 78.2268578879vw;
         margin-left: -7.8226857888vw;
         top: 0
     }
 }
 
 .page-section.page-about .page-content .quote-image--professional {
     max-width: min(42.1875vw, 810px)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-image--professional {
         max-width: 73.0117340287vw;
         margin-left: auto;
         margin-right: -7.8226857888vw
     }
 }
 
 .page-section.page-about .page-content .quote-fave {
     margin-top: min(9.1145833333vw, 175px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave {
     position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     margin-top: 0
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dl {
     letter-spacing: 1px
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave:nth-of-type(2n) div {
     left: min(9.4270833333vw, 181px);
     left: 0
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave:nth-of-type(2n-1) {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave {
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start
     }
     .page-section.page-about .page-content .quote-fave:nth-of-type(2n) {
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse
     }
     .page-section.page-about .page-content .quote-fave:nth-of-type(2n-1) {
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse
     }
     .page-section.page-about .page-content .quote-fave div {
         position: relative;
         margin-bottom: 0
     }
     html.static-mode .page-section.page-about .page-content .quote-fave {
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start
     }
     html.static-mode .page-section.page-about .page-content .quote-fave:nth-of-type(2n) {
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse
     }
     html.static-mode .page-section.page-about .page-content .quote-fave:nth-of-type(2n-1) {
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse
     }
 }
 
 .page-section.page-about .page-content .quote-fave1 {
     margin-top: min(15.625vw, 300px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave1 {
     margin-top: 0;
     margin-bottom: min(6.9791666667vw, 134px);
     margin-right: calc(-1*min(8.3854166667vw, 161px))
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave1 {
         margin-top: 26.075619296vw;
         margin-bottom: 13.037809648vw
     }
     html.static-mode .page-section.page-about .page-content .quote-fave1 {
         margin-bottom: 13.037809648vw;
         margin-right: 0
     }
 }
 
 .page-section.page-about .page-content .quote-fave1 dl {
     width: min(52.0833333333vw, 1000px)
 }
 
 @media screen and (min-width: 768px) {
     html.lang-ko .page-section.page-about .page-content .quote-fave1 dl {
         width: min(46.3541666667vw, 890px)
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave1 dl {
     margin-top: 0;
     width: min(51.71875vw, 993px)
 }
 
 .page-section.page-about .page-content .quote-fave2 {
     margin-left: min(30.2083333333vw, 580px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave2 {
     margin-left: 0;
     margin-bottom: 0;
     margin-left: calc(-1*min(8.3854166667vw, 161px));
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: start
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave2 {
         margin-top: 26.075619296vw;
         margin-left: 0;
         margin-bottom: 18.2529335072vw
     }
     html.static-mode .page-section.page-about .page-content .quote-fave2 {
         margin-bottom: 18.2529335072vw;
         margin-left: 0
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-fave2 dl {
         margin-left: 0
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave2 dl {
     margin-left: min(6.3020833333vw, 121px);
     width: min(36.3020833333vw, 697px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave2 dl dt {
         margin-left: 0 !important
     }
     html.static-mode .page-section.page-about .page-content .quote-fave2 dl dt {
         margin-left: 20.8604954368vw
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave3 {
     bottom: min(5.2083333333vw, 100px);
     margin-right: calc(-1*min(8.3854166667vw, 161px))
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave3 {
         top: 0;
         margin-top: 26.075619296vw;
         margin-bottom: 0
     }
     html.static-mode .page-section.page-about .page-content .quote-fave3 {
         margin-right: 0
     }
 }
 
 .page-section.page-about .page-content .quote-fave3 dl {
     width: 54vw
 }
 
 @media screen and (min-width: 768px) {
     html.lang-ko .page-section.page-about .page-content .quote-fave3 dl {
         width: min(50vw, 960px)
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-about .page-content .quote-fave3 dl {
         margin-top: 0
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave3 dl {
     width: min(44.1145833333vw, 847px);
     margin-top: min(5.2083333333vw, 100px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dl {
         width: 100%
     }
     html.static-mode .page-section.page-about .page-content .quote-fave dl {
         width: 100%
     }
 }
 
 .page-section.page-about .page-content .quote-fave dt {
     position: relative;
     font-size: min(2.6041666667vw, 50px);
     font-weight: bold;
     padding: min(0.2604166667vw, 5px) min(1.0416666667vw, 20px) min(0.1041666667vw, 2px) min(1.0416666667vw, 20px);
     margin-bottom: min(1.3020833333vw, 25px);
     display: inline-block
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt {
     margin-bottom: min(2.0833333333vw, 40px)
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt:before {
     content: "";
     width: 0%;
     height: 0%;
     -webkit-transform-origin: center left;
     transform-origin: center left
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt span:before {
     content: "";
     width: 0%;
     height: 0%;
     -webkit-transform-origin: center left;
     transform-origin: center left
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt.show:before {
     width: 100%;
     height: 100%
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt.show span:before {
     width: 100%;
     height: 100%
 }
 
 html.static-mode.color-mode .page-section.page-about .page-content .quote-fave dt {
     padding: 0
 }
 
 html.static-mode.color-mode .page-section.page-about .page-content .quote-fave dt.show:before {
     width: 0%
 }
 
 html.static-mode.color-mode .page-section.page-about .page-content .quote-fave dt.show span:before {
     width: 0%
 }
 
 html:not(.static-mode) .page-section.page-about .page-content .quote-fave dt:before {
     content: "";
     width: 0%;
     height: 0%;
     -webkit-transform-origin: center left;
     transform-origin: center left;
     background: #6835fc
 }
 
 html:not(.static-mode) .page-section.page-about .page-content .quote-fave dt span:before {
     content: "";
     width: 0%;
     height: 0%;
     -webkit-transform-origin: center left;
     transform-origin: center left;
     background: #6835fc
 }
 
 html:not(.static-mode) .page-section.page-about .page-content .quote-fave dt.show:before {
     width: 100%;
     height: 100%
 }
 
 html:not(.static-mode) .page-section.page-about .page-content .quote-fave dt.show span:before {
     width: 100%;
     height: 100%
 }
 
 html:not(.static-mode).color-mode .page-section.page-about .page-content .quote-fave dt.show:before {
     width: 100%;
     height: 100%
 }
 
 html:not(.static-mode).color-mode .page-section.page-about .page-content .quote-fave dt.show span:before {
     width: 100%;
     height: 100%
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-fave dt::before {
     background: #6835fc
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-fave dt span::before {
     background: #6835fc
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-fave dt.show:before {
     height: 100%
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .quote-fave dt.show span:before {
     height: 100%
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dt {
         font-size: 6.258148631vw;
         margin-bottom: 5.6062581486vw
     }
     html.static-mode .page-section.page-about .page-content .quote-fave dt {
         margin-bottom: 5.6062581486vw
     }
     html.static-mode .page-section.page-about .page-content .quote-fave dt:before {
         display: none
     }
 }
 
 @media screen and (max-width: 767px) {
     html.lang-ko .page-section.page-about .page-content .quote-fave dt:before {
         display: none
     }
 }
 
 .page-section.page-about .page-content .quote-fave dt:before {
     content: "";
     width: 0%;
     height: min(1.5625vw, 30px);
     min-height: 15px;
     background-color: #4d07db;
     display: block;
     position: absolute;
     left: 0;
     bottom: 1px;
     z-index: -1;
     -webkit-transition: width .3s;
     transition: width .3s;
     -webkit-transition-delay: .45s;
     transition-delay: .45s
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dt:before {
         min-height: 25px
     }
     html.static-mode .page-section.page-about .page-content .quote-fave dt:before {
         min-height: 25px
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt:before {
     background-color: rgba(86, 63, 135, .5)
 }
 
 .page-section.page-about .page-content .quote-fave dt:before.show:before {
     width: 100%
 }
 
 .page-section.page-about .page-content .quote-fave dt br {
     display: none
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dt br {
         display: block
     }
 }
 
 .page-section.page-about .page-content .quote-fave dt span {
     position: relative;
     display: inline-block
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dt span:last-child:before {
         -webkit-transition-delay: .6s;
         transition-delay: .6s
     }
 }
 
 .page-section.page-about .page-content .quote-fave dt span:before {
     content: "";
     display: none;
     position: absolute;
     left: 0;
     bottom: 1px;
     width: 0%;
     height: min(1.5625vw, 30px);
     min-height: 15px;
     background-color: #4d07db;
     z-index: -1;
     -webkit-transition: width .3s;
     transition: width .3s;
     -webkit-transition-delay: .45s;
     transition-delay: .45s
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-about .page-content .quote-fave dt span:before {
         display: inline
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dt span:before {
         display: inline;
         min-height: 25px
     }
     html.static-mode .page-section.page-about .page-content .quote-fave dt span:before {
         min-height: 25px
     }
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dt span:before {
     background-color: rgba(86, 63, 135, .5)
 }
 
 .page-section.page-about .page-content .quote-fave dt span:before.show:before {
     width: 100%
 }
 
 .page-section.page-about .page-content .quote-fave dd {
     font-size: min(1.875vw, 36px);
     font-weight: 300;
     line-height: 1.2
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-about .page-content .quote-fave dd {
         font-size: min(2.0833333333vw, 16px);
         line-height: 1.25
     }
     html:not(.static-mode) .page-section.page-about .page-content .quote-fave dd br {
         display: none
     }
 }
 
 html.lang-ko .page-section.page-about .page-content .quote-fave dd {
     font-weight: 400
 }
 
 html.static-mode .page-section.page-about .page-content .quote-fave dd {
     margin-bottom: 0
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .quote-fave dd {
         font-size: 4.6936114733vw
     }
 }
 
 .page-section.page-about .page-content .quote-fave .point {
     font-weight: bold
 }
 
 html.dark-mode .page-section.page-about .page-content .quote-fave .point {
     color: #a080ff
 }
 
 html:not(.static-mode) .page-section.page-about .page-content .quote-fave .point {
     padding: 0.3125vw 1px 0px 1px
 }
 
 html:not(.static-mode).color-mode.lang-ko .page-section.page-about .page-content .quote-fave .point {
     background: var(--primary-pink);
     padding: 0.5208333333vw 0.4166666667vw 0
 }
 
 html:not(.static-mode).color-mode.lang-en .page-section.page-about .page-content .quote-fave .point {
     background: var(--primary-pink);
     padding: 0.3645833333vw 0.4166666667vw 0
 }
 
 .page-section.page-about .page-content .dots {
     position: relative;
     width: min(9.375vw, 180px);
     height: min(1.0416666667vw, 20px);
     margin-bottom: min(2.4479166667vw, 47px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-about .page-content .dots {
         margin-bottom: 5.2151238592vw
     }
     html.static-mode .page-section.page-about .page-content .dots {
         margin-bottom: 5.2151238592vw
     }
 }
 
 .page-section.page-about .page-content .dots .dot {
     display: inline-block;
     width: min(1.0416666667vw, 20px);
     height: min(1.0416666667vw, 20px);
     border-radius: 50%;
     -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4588235294);
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4588235294);
     margin-right: min(0.8854166667vw, 17px);
     background: #fff;
     -webkit-animation: wave 2s ease-in-out infinite;
     animation: wave 2s ease-in-out infinite
 }
 
 .page-section.page-about .page-content .dots .dot:nth-child(2) {
     -webkit-animation-delay: -0.15s;
     animation-delay: -0.15s
 }
 
 .page-section.page-about .page-content .dots .dot:nth-child(3) {
     -webkit-animation-delay: -0.3s;
     animation-delay: -0.3s
 }
 
 html.static-mode .page-section.page-about .page-content .dots .dot {
     background-color: #000;
     -webkit-box-shadow: none;
     box-shadow: none
 }
 
 html.static-mode.dark-mode .page-section.page-about .page-content .dots .dot {
     background-color: #949494
 }
 
 html:not(.static-mode).light-mode .page-section.page-about .page-content .dots .dot {
     background-color: #000;
     text-shadow: 0 0 6px rgba(255, 255, 255, .46)
 }
 
 @-webkit-keyframes wave {
     0% {
         -webkit-transform: initial;
         transform: initial
     }
     15% {
         -webkit-transform: translateY(-1.0416666667vw);
         transform: translateY(-1.0416666667vw)
     }
     35% {
         -webkit-transform: translateY(0.2604166667vw);
         transform: translateY(0.2604166667vw)
     }
     50% {
         -webkit-transform: initial;
         transform: initial
     }
     100% {
         -webkit-transform: initial;
         transform: initial
     }
 }
 
 @keyframes wave {
     0% {
         -webkit-transform: initial;
         transform: initial
     }
     15% {
         -webkit-transform: translateY(-1.0416666667vw);
         transform: translateY(-1.0416666667vw)
     }
     35% {
         -webkit-transform: translateY(0.2604166667vw);
         transform: translateY(0.2604166667vw)
     }
     50% {
         -webkit-transform: initial;
         transform: initial
     }
     100% {
         -webkit-transform: initial;
         transform: initial
     }
 }
 
 html.static-mode .page-section.page-about svg {
     display: none
 }
 
 .page-gap {
     pointer-events: none
 }
 
 .page-gap.gap-g2 {
     margin-top: -80vh;
     padding-top: 80vh
 }
 
 html:not(.static-mode) .quote-block:hover .alive {
     -webkit-animation: squiggly_anim .34s linear infinite;
     animation: squiggly_anim .34s linear infinite
 }
 
 @-webkit-keyframes squiggly_anim {
     0% {
         -webkit-filter: url("#squiggly-0");
         filter: url("#squiggly-0")
     }
     25% {
         -webkit-filter: url("#squiggly-1");
         filter: url("#squiggly-1")
     }
     50% {
         -webkit-filter: url("#squiggly-2");
         filter: url("#squiggly-2")
     }
     75% {
         -webkit-filter: url("#squiggly-3");
         filter: url("#squiggly-3")
     }
     100% {
         -webkit-filter: url("#squiggly-4");
         filter: url("#squiggly-4")
     }
 }
 
 @keyframes squiggly_anim {
     0% {
         -webkit-filter: url("#squiggly-0");
         filter: url("#squiggly-0")
     }
     25% {
         -webkit-filter: url("#squiggly-1");
         filter: url("#squiggly-1")
     }
     50% {
         -webkit-filter: url("#squiggly-2");
         filter: url("#squiggly-2")
     }
     75% {
         -webkit-filter: url("#squiggly-3");
         filter: url("#squiggly-3")
     }
     100% {
         -webkit-filter: url("#squiggly-4");
         filter: url("#squiggly-4")
     }
 }
 
 @-webkit-keyframes rainbow {
     0%,
     100% {
         -webkit-transform: translatey(var(--axis-y));
         transform: translatey(var(--axis-y))
     }
     50% {
         -webkit-transform: translatey(calc(var(--axis-y) * -1));
         transform: translatey(calc(var(--axis-y) * -1))
     }
 }
 
 @keyframes rainbow {
     0%,
     100% {
         -webkit-transform: translatey(var(--axis-y));
         transform: translatey(var(--axis-y))
     }
     50% {
         -webkit-transform: translatey(calc(var(--axis-y) * -1));
         transform: translatey(calc(var(--axis-y) * -1))
     }
 }
 
 html:not(.static-mode) .c-rainbow {
     counter-reset: rainbow;
     position: relative;
     display: block;
     list-style: none;
     padding: 0;
     margin: 0;
     height: 10.4166666667vw
 }
 
 html:not(.static-mode) .c-rainbow__layer {
     --text-color: var(--color-foreground);
     counter-increment: rainbow;
     color: var(--text-color);
     text-shadow: -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black), 1px 1px 0 var(--color-black), 4px 4px 0 rgba(0, 0, 0, .2)
 }
 
 html:not(.static-mode) .c-rainbow__layer:not(:first-child) {
     position: absolute;
     top: 0
 }
 
 html:not(.static-mode) .c-rainbow__layer--white {
     --text-color: var(--color-white);
     position: absolute;
     z-index: 10
 }
 
 html:not(.static-mode) .c-rainbow__layer--orange {
     --text-color: var(--color-orange)
 }
 
 html:not(.static-mode) .c-rainbow__layer--red {
     --text-color: var(--color-red)
 }
 
 html:not(.static-mode) .c-rainbow__layer--violet {
     --text-color: var(--color-violet)
 }
 
 html:not(.static-mode) .c-rainbow__layer--blue {
     --text-color: var(--color-blue)
 }
 
 html:not(.static-mode) .c-rainbow__layer--green {
     --text-color: var(--color-green)
 }
 
 html:not(.static-mode) .c-rainbow__layer--yellow {
     --text-color: var(--color-yellow)
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer {
     -webkit-animation: rainbow 1.5s ease-in-out infinite;
     animation: rainbow 1.5s ease-in-out infinite
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(1) {
     -webkit-animation-delay: calc(1 / var(--delay) * 1s);
     animation-delay: calc(1 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 1);
     z-index: -10
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(2) {
     -webkit-animation-delay: calc(2 / var(--delay) * 1s);
     animation-delay: calc(2 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 2);
     z-index: -20
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(3) {
     -webkit-animation-delay: calc(3 / var(--delay) * 1s);
     animation-delay: calc(3 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 3);
     z-index: -30
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(4) {
     -webkit-animation-delay: calc(4 / var(--delay) * 1s);
     animation-delay: calc(4 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 4);
     z-index: -40
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(5) {
     -webkit-animation-delay: calc(5 / var(--delay) * 1s);
     animation-delay: calc(5 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 5);
     z-index: -50
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(6) {
     -webkit-animation-delay: calc(6 / var(--delay) * 1s);
     animation-delay: calc(6 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 6);
     z-index: -60
 }
 
 html:not(.static-mode) .c-rainbow:hover .c-rainbow__layer:nth-child(7) {
     -webkit-animation-delay: calc(7 / var(--delay) * 1s);
     animation-delay: calc(7 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 7);
     z-index: -70
 }
 
 html:not(.static-mode) .about-transition {
     opacity: 0;
     -webkit-transform: matrix(1, 0, 0.2, 0.1, 1, 5);
     transform: matrix(1, 0, 0.2, 0.1, 1, 5);
     -webkit-transition: opacity .3s, -webkit-transform .3s;
     transition: opacity .3s, -webkit-transform .3s;
     transition: transform .3s, opacity .3s;
     transition: transform .3s, opacity .3s, -webkit-transform .3s;
     -webkit-transform-origin: center;
     transform-origin: center
 }
 
 html:not(.static-mode) .about-transition.show {
     opacity: 1;
     -webkit-transform: none;
     transform: none
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer {
     -webkit-animation: rainbow 1.5s ease-in-out infinite;
     animation: rainbow 1.5s ease-in-out infinite
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(1) {
     -webkit-animation-delay: calc(1 / var(--delay) * 1s);
     animation-delay: calc(1 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 1);
     z-index: -10
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(2) {
     -webkit-animation-delay: calc(2 / var(--delay) * 1s);
     animation-delay: calc(2 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 2);
     z-index: -20
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(3) {
     -webkit-animation-delay: calc(3 / var(--delay) * 1s);
     animation-delay: calc(3 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 3);
     z-index: -30
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(4) {
     -webkit-animation-delay: calc(4 / var(--delay) * 1s);
     animation-delay: calc(4 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 4);
     z-index: -40
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(5) {
     -webkit-animation-delay: calc(5 / var(--delay) * 1s);
     animation-delay: calc(5 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 5);
     z-index: -50
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(6) {
     -webkit-animation-delay: calc(6 / var(--delay) * 1s);
     animation-delay: calc(6 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 6);
     z-index: -60
 }
 
 html:not(.static-mode) .about-transition.show .c-rainbow__layer:nth-child(7) {
     -webkit-animation-delay: calc(7 / var(--delay) * 1s);
     animation-delay: calc(7 / var(--delay) * 1s);
     left: calc(var(--axis-x) * 7);
     z-index: -70
 }
 
 html:not(.static-mode) .about-transition.show .alive {
     -webkit-animation: squiggly_anim .34s linear infinite;
     animation: squiggly_anim .34s linear infinite
 }
 
 html.static-mode .about-transition {
     opacity: 0;
     -webkit-transform: matrix(1, 0, 0.25, 1, 0, 0);
     transform: matrix(1, 0, 0.25, 1, 0, 0);
     -webkit-transition: opacity .5s, -webkit-transform .5s;
     transition: opacity .5s, -webkit-transform .5s;
     transition: transform .5s, opacity .5s;
     transition: transform .5s, opacity .5s, -webkit-transform .5s;
     z-index: 1
 }
 
 html.static-mode .about-transition.show {
     opacity: 1;
     -webkit-transform: none;
     transform: none
 }
 
 html.static-mode .about-transition .visuallyhidden {
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
     font-size: 0
 }
 
 html.static-mode .quote-image {
     -webkit-transform: translateX(80%);
     transform: translateX(80%);
     -webkit-transition: opacity 1s, -webkit-transform 1s;
     transition: opacity 1s, -webkit-transform 1s;
     transition: transform 1s, opacity 1s;
     transition: transform 1s, opacity 1s, -webkit-transform 1s
 }
 
 html.static-mode .quote-image.left {
     -webkit-transform: translateX(-80%);
     transform: translateX(-80%)
 }
 
 html.static-mode .quote-image.left.show {
     -webkit-transform: translateX(0%);
     transform: translateX(0%)
 }
 
 html.static-mode .quote-image.show {
     -webkit-transform: translateX(0%);
     transform: translateX(0%)
 }
 
 html.static-mode .page-section.page-faves {
     overflow: hidden;
     height: auto;
     margin-bottom: min(8.8541666667vw, 170px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves {
         margin-bottom: 29.9869621904vw
     }
     html.static-mode .page-section.page-faves {
         margin-bottom: 0
     }
 }
 
 .page-section.page-faves .sticky-wrap {
     pointer-events: none
 }
 
 .page-section.page-faves .sticky-wrap.sticky-on {
     pointer-events: auto
 }
 
 html.static-mode .page-section.page-faves .sticky-content {
     height: auto
 }
 
 html.static-mode .page-section.page-faves .sticky-content::after {
     content: "";
     position: absolute;
     bottom: -2px;
     display: block;
     width: 100%;
     height: min(26.0416666667vw, 500px);
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgb(255, 255, 255)));
     background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
     z-index: 1
 }
 
 html.static-mode.dark-mode .page-section.page-faves .sticky-content::after {
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgb(0, 0, 0)));
     background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0))
 }
 
 .page-section.page-faves .swiper-text {
     display: none
 }
 
 html.static-mode .page-section.page-faves .swiper-text {
     display: inline-block;
     position: absolute;
     top: 0;
     left: 50%;
     z-index: 999;
     max-width: 1920px;
     margin-left: min(-5vw, -96px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-faves .swiper-text {
         right: 5%
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .swiper-text {
         position: static;
         padding: 0 7.8226857888vw;
         margin-bottom: 13.037809648vw
     }
     html.static-mode .page-section.page-faves .swiper-text {
         position: static;
         margin-bottom: 0;
         margin-left: 0
     }
 }
 
 html.static-mode .page-section.page-faves .swiper-text .swiper-text-title {
     font-size: min(6.25vw, 120px);
     font-weight: bold;
     color: #000
 }
 
 html.static-mode.dark-mode .page-section.page-faves .swiper-text .swiper-text-title {
     background: #000;
     color: #fff;
     text-shadow: min(0.3125vw, 6px) min(0.3125vw, 6px) 0 var(--primary-pink)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .swiper-text .swiper-text-title {
         display: block;
         font-size: 8.8657105606vw;
         margin-bottom: 4.1720990874vw
     }
     html.static-mode .page-section.page-faves .swiper-text .swiper-text-title {
         font-size: 8.8657105606vw
     }
     html.static-mode.dark-mode .page-section.page-faves .swiper-text .swiper-text-title {
             text-shadow: 0.7822685789vw 0.7822685789vw 0 var(--primary-pink)
     }
 }
 
 html.static-mode .page-section.page-faves .swiper-text .swiper-text-p {
     margin-top: 0.78125vw;
     font-size: min(1.875vw, 36px);
     font-weight: 300;
     color: #000
 }
 
 html.static-mode.dark-mode .page-section.page-faves .swiper-text .swiper-text-p {
     background: #000;
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .swiper-text .swiper-text-p {
         font-size: 5.2151238592vw
     }
     html.static-mode .page-section.page-faves .swiper-text .swiper-text-p {
         font-size: 5.2151238592vw
     }
 }
 
 .page-section.page-faves .sticky-member {
     height: 4000px;
     background-color: #e8e8e6
 }
 
 html.dark-mode .page-section.page-faves .sticky-member {
     background-color: #222;
     color: #fff
 }
 
 html.static-mode .page-section.page-faves .sticky-member {
     height: auto !important;
     background-color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member {
         height: 200vh
     }
 }
 
 html.static-mode.dark-mode .page-section.page-faves .sticky-member {
     background: #000;
     color: #fff
 }
 
 .page-section.page-faves .sticky-member .content-wrapper {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: end;
     -ms-flex-pack: end;
     justify-content: flex-end;
     height: 100%;
     color: #000
 }
 
 html.static-mode .page-section.page-faves .sticky-member .content-wrapper {
     padding-top: min(23.4375vw, 450px);
     padding-bottom: min(15.625vw, 300px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .content-wrapper {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column
     }
 }
 
 .page-section.page-faves .sticky-member .member-img {
     position: relative;
     max-width: 450px;
     max-height: 100%;
     top: 50%;
     width: 23.4375vw;
     overflow: visible;
     -ms-flex-item-align: start;
     align-self: flex-start;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%)
 }
 
 html.static-mode .page-section.page-faves .sticky-member .member-img {
     -webkit-transform: translateY(0);
     transform: translateY(0)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img {
         right: -50%;
         width: 41.6666666667vw;
         -webkit-transform: translate(-50%, -58%);
         transform: translate(-50%, -58%)
     }
     html.static-mode .page-section.page-faves .sticky-member .member-img {
         -webkit-transform: translateX(-50%);
         transform: translateX(-50%)
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper {
     overflow: visible
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide {
     visibility: hidden;
     text-align: center;
     overflow: visible
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=yk] img.original {
     background: url("../images/faves/faves_character-yk.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=one] img.original {
     background: url("../images/faves/faves_character-one.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=valancer] img.original {
     background: url("../images/faves/faves_character-valancer.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=simon] img.original {
     background: url("../images/faves/faves_character-simon.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=satang] img.original {
     background: url("../images/faves/faves_character-satang.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=rowan] img.original {
     background: url("../images/faves/faves_character-rowan.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=pub] img.original {
     background: url("../images/faves/faves_character-pub.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=psy] img.original {
     background: url("../images/faves/faves_character-psy.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=linda] img.original {
     background: url("../images/faves/faves_character-linda.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=gong] img.original {
     background: url("../images/faves/faves_character-gong.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=go] img.original {
     background: url("../images/faves/faves_character-go.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=girgir] img.original {
     background: url("../images/faves/faves_character-girgir.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=dori] img.original {
     background: url("../images/faves/faves_character-dori.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=cu] img.original {
     background: url("../images/faves/faves_character-cu.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=chloe] img.original {
     background: url("../images/faves/faves_character-chloe.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=bottle] img.original {
     background: url("../images/faves/faves_character-bottle.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=peter] img.original {
     background: url("../images/faves/faves_character-peter.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=bibi] img.original {
     background: url("../images/faves/faves_character-bibi.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=aspyn] img.original {
     background: url("../images/faves/faves_character-aspyn.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=camila] img.original {
     background: url("../images/faves/faves_character-camila.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=hye] img.original {
     background: url("../images/faves/faves_character-hye.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=violet] img.original {
     background: url("../images/faves/faves_character-violet.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=yk] img.blur {
     background: url("../images/faves/faves_character-yk-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=one] img.blur {
     background: url("../images/faves/faves_character-one-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=valancer] img.blur {
     background: url("../images/faves/faves_character-valancer-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=simon] img.blur {
     background: url("../images/faves/faves_character-simon-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=satang] img.blur {
     background: url("../images/faves/faves_character-satang-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=rowan] img.blur {
     background: url("../images/faves/faves_character-rowan-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=pub] img.blur {
     background: url("../images/faves/faves_character-pub-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=psy] img.blur {
     background: url("../images/faves/faves_character-psy-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=linda] img.blur {
     background: url("../images/faves/faves_character-linda-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=gong] img.blur {
     background: url("../images/faves/faves_character-gong-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=go] img.blur {
     background: url("../images/faves/faves_character-go-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=girgir] img.blur {
     background: url("../images/faves/faves_character-girgir-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=dori] img.blur {
     background: url("../images/faves/faves_character-dori-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=cu] img.blur {
     background: url("../images/faves/faves_character-cu-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=chloe] img.blur {
     background: url("../images/faves/faves_character-chloe-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=bottle] img.blur {
     background: url("../images/faves/faves_character-bottle-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=peter] img.blur {
     background: url("../images/faves/faves_character-peter-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=bibi] img.blur {
     background: url("../images/faves/faves_character-bibi-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=aspyn] img.blur {
     background: url("../images/faves/faves_character-aspyn-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=camila] img.blur {
     background: url("../images/faves/faves_character-camila-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=hye] img.blur {
     background: url("../images/faves/faves_character-hye-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide figure[data-img=violet] img.blur {
     background: url("../images/faves/faves_character-violet-blur.png") center no-repeat;
     background-size: contain
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-prev {
     visibility: visible;
     z-index: 2
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-prev figure {
     -webkit-transform: scale(1.7);
     transform: scale(1.7)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-slide-prev figure {
         -webkit-transform: scale(1.5);
         transform: scale(1.5)
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-prev img.blur {
     opacity: .8
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-next {
     visibility: visible;
     z-index: 0
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-next figure {
     -webkit-transform: scale(0.6);
     transform: scale(0.6)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-slide-next figure {
         -webkit-transform: scale(0.7);
         transform: scale(0.7)
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-next img.blur {
     opacity: .4
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-active {
     z-index: 1;
     visibility: visible
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-active figure {
     -webkit-transform: scale(1);
     transform: scale(1)
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-active img.original {
     opacity: 1
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-slide-active img.blur {
     opacity: 0
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-buttons {
     position: absolute;
     top: 50%;
     left: -12%;
     z-index: 10;
     width: 115%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between
 }
 
 html.static-mode .page-section.page-faves .sticky-member .member-img .swiper-buttons {
     pointer-events: auto
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-buttons {
         top: 46%;
         width: 120%
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-prev,
 .page-section.page-faves .sticky-member .member-img .swiper-next {
     font-size: 0;
     color: rgba(0, 0, 0, 0);
     padding: 1.3020833333vw
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-prev,
     .page-section.page-faves .sticky-member .member-img .swiper-next {
         padding: 3.259452412vw;
         width: 100%
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-prev i,
 .page-section.page-faves .sticky-member .member-img .swiper-next i {
     display: inline-block;
     background-repeat: no-repeat;
     background-size: contain
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-prev i,
     .page-section.page-faves .sticky-member .member-img .swiper-next i {
         width: 13.037809648vw;
         height: 7.8226857888vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-prev i {
     max-width: 110px;
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='82' width='131' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231d1d1b'%3E%3Cpath d='M45.038.575c-3.3 3.7-6.6 7.4-9.9 11l-10 11-10.1 10.8-10.2 10.9v-4.1c3.4 3.2 6.9 6.2 10.3 9.4 3.4 3.1 6.6 6.4 9.8 9.9 3.1 3.4 6.2 6.9 9.1 10.5s5.8 7.3 8.3 11.3c.1.2.1.4-.1.5-.1.1-.3.1-.4 0-4-2.6-7.6-5.4-11.3-8.3-3.6-2.9-7.1-6-10.5-9.1s-6.7-6.4-9.9-9.8c-3.1-3.5-6.2-7-9.3-10.3l-.1-.1c-1-1.1-1-2.9.1-3.9l10.8-10.1 10.9-10.2 11-10c3.6-3.3 7.3-6.7 11-9.9.1-.1.4-.1.5 0 .1.2.1.4 0 .5z'/%3E%3Cpath d='M2.938 41.875c10.9 2.8 22.1 4.5 33.3 5.3 5.6.4 11.2.6 16.8.4 5.6-.1 11.1-.5 16.6-1.3s10.9-2.1 16.1-3.6l3.9-1.2c1.3-.4 2.6-.9 3.9-1.3s2.6-.9 3.8-1.4c1.3-.5 2.6-.9 3.8-1.4l3.8-1.5 3.7-1.7c1.3-.5 2.4-1.2 3.7-1.8l1.8-1 .9-.5.9-.5 3.6-2.1c1.2-.7 2.3-1.5 3.5-2.3l1.8-1.1c.6-.4 1.1-.8 1.7-1.2 1.2-.8 2.3-1.6 3.5-2.4.2-.1.4-.1.6.1.1.1.1.3 0 .4-.8 1.2-1.6 2.4-2.5 3.6-.4.6-.9 1.2-1.3 1.8l-1.4 1.6c-1 1.1-1.9 2.2-3 3.2s-2.1 2-3.2 3-2.3 1.8-3.5 2.8c-1.2.9-2.4 1.8-3.6 2.6s-2.5 1.6-3.8 2.3l-3.9 2.1c-5.3 2.6-10.9 4.6-16.7 5.7-5.8 1.2-11.6 1.8-17.4 2.3-5.8.4-11.6.5-17.3.2-5.8-.3-11.5-.9-17.2-1.7-5.7-.9-11.3-2-16.8-3.4s-11-3-16.3-5.1c-.2-.1-.3-.3-.2-.5 0-.4.2-.5.4-.4z'/%3E%3C/g%3E%3C/svg%3E");
     -webkit-animation: buttonLeft 1.5s linear .6s infinite;
     animation: buttonLeft 1.5s linear .6s infinite;
     -webkit-transform-origin: right top;
     transform-origin: right top
 }
 
 @media screen and (min-width: 768px) {
     .page-section.page-faves .sticky-member .member-img .swiper-prev i {
         width: 6.7708333333vw;
         height: 4.2708333333vw
     }
 }
 
 html.dark-mode .page-section.page-faves .sticky-member .member-img .swiper-prev i {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='82' width='131' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='M45.038.575c-3.3 3.7-6.6 7.4-9.9 11l-10 11-10.1 10.8-10.2 10.9v-4.1c3.4 3.2 6.9 6.2 10.3 9.4 3.4 3.1 6.6 6.4 9.8 9.9 3.1 3.4 6.2 6.9 9.1 10.5s5.8 7.3 8.3 11.3c.1.2.1.4-.1.5-.1.1-.3.1-.4 0-4-2.6-7.6-5.4-11.3-8.3-3.6-2.9-7.1-6-10.5-9.1s-6.7-6.4-9.9-9.8c-3.1-3.5-6.2-7-9.3-10.3l-.1-.1c-1-1.1-1-2.9.1-3.9l10.8-10.1 10.9-10.2 11-10c3.6-3.3 7.3-6.7 11-9.9.1-.1.4-.1.5 0 .1.2.1.4 0 .5z'/%3E%3Cpath d='M2.938 41.875c10.9 2.8 22.1 4.5 33.3 5.3 5.6.4 11.2.6 16.8.4 5.6-.1 11.1-.5 16.6-1.3s10.9-2.1 16.1-3.6l3.9-1.2c1.3-.4 2.6-.9 3.9-1.3s2.6-.9 3.8-1.4c1.3-.5 2.6-.9 3.8-1.4l3.8-1.5 3.7-1.7c1.3-.5 2.4-1.2 3.7-1.8l1.8-1 .9-.5.9-.5 3.6-2.1c1.2-.7 2.3-1.5 3.5-2.3l1.8-1.1c.6-.4 1.1-.8 1.7-1.2 1.2-.8 2.3-1.6 3.5-2.4.2-.1.4-.1.6.1.1.1.1.3 0 .4-.8 1.2-1.6 2.4-2.5 3.6-.4.6-.9 1.2-1.3 1.8l-1.4 1.6c-1 1.1-1.9 2.2-3 3.2s-2.1 2-3.2 3-2.3 1.8-3.5 2.8c-1.2.9-2.4 1.8-3.6 2.6s-2.5 1.6-3.8 2.3l-3.9 2.1c-5.3 2.6-10.9 4.6-16.7 5.7-5.8 1.2-11.6 1.8-17.4 2.3-5.8.4-11.6.5-17.3.2-5.8-.3-11.5-.9-17.2-1.7-5.7-.9-11.3-2-16.8-3.4s-11-3-16.3-5.1c-.2-.1-.3-.3-.2-.5 0-.4.2-.5.4-.4z'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-prev i {
         margin-left: -5.2151238592vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-next {
     position: relative;
     top: -6.25vw
 }
 
 .page-section.page-faves .sticky-member .member-img .swiper-next i {
     max-width: 100px;
     -webkit-animation: buttonRight 1.5s linear infinite;
     animation: buttonRight 1.5s linear infinite;
     -webkit-transform-origin: left bottom;
     transform-origin: left bottom;
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='92' viewBox='0 0 120 92' width='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231d1d1b'%3E%3Cpath d='m118.561 43.6091c-2.204-2.8993-4.35-5.9282-6.461-8.8639l-6.366-8.9004-6.2726-8.9367-6.3449-9.12315 3.7411 1.01618c-4.1005 2.23357-8.1648 4.56037-12.2652 6.79397-4.1005 2.2336-8.2732 4.2807-12.5183 6.1413s-8.6202 3.6644-12.9737 5.2453c-4.4474 1.6173-8.8371 3.105-13.4291 4.3494-.1877.0728-.3538-.0773-.4261-.2638-.0362-.0932-.0146-.3161.0792-.3525 3.7174-2.943 7.6732-5.5495 11.5713-8.0264 3.992-2.5133 7.9625-4.8037 12.0268-7.1305 4.1004-2.2336 8.237-4.3739 12.4821-6.23455 4.2451-1.86063 8.6201-3.66442 12.829-5.61828l.1878-.07279c1.2778-.60276 2.8018-.01391 3.4595 1.12537l5.4061 9.48715 5.349 9.6167 5.255 9.6532c1.77 3.1745 3.484 6.4786 5.161 9.6895.072.1865.05.4094-.137.4822-.094.0364-.224-.0205-.354-.0773z'/%3E%3Cpath d='m92.9045 5.29267c1.7862 4.88463 2.5038 10.07643 2.4559 15.24323-.0117 5.26-.7889 10.4951-2.4038 15.5188s-3.8437 9.8564-6.7226 14.4049c-2.9151 4.4553-6.3863 8.59-10.1321 12.2949l-2.9304 2.7451c-.9455.9029-2.021 1.749-3.0027 2.5587-1.0755.8461-2.021 1.749-3.1326 2.5018l-3.1689 2.4086c-2.1871 1.5989-4.4828 2.9181-6.7784 4.2373-2.3318 1.226-4.6636 2.452-7.1039 3.3982-2.4402.9463-4.8443 1.9858-7.3569 2.7456-1.2563.3799-2.5126.7598-3.7689 1.1397-1.2562.3799-2.5125.7598-3.805 1.0464-2.5848.5734-5.0758 1.1103-7.6969 1.5904-2.5633.3504-5.1266.7009-7.7623.8649-.2238-.0205-.39-.1706-.4623-.357-.0723-.1865.0792-.3525.1731-.3889 2.2956-1.3192 4.6636-2.452 6.9377-3.5483s4.6059-2.3223 6.88-3.4187c2.2741-1.0963 4.512-2.2859 6.7861-3.3822 1.0901-.53 2.2741-1.0963 3.3281-1.7196l3.328-1.7195c2.2379-1.1896 4.3459-2.436 6.5261-3.4959 1.054-.6233 2.1441-1.1532 3.1981-1.7764 1.0539-.6232 2.144-1.1532 3.198-1.7764l3.1619-1.8696c1.054-.6233 2.0718-1.3397 3.0896-2.0561 2.0718-1.3397 3.9412-2.9227 5.9407-4.4488 3.7389-3.1659 7.1093-6.7252 10.1474-10.5847s5.4839-8.1328 7.3734-12.7267c1.9257-4.5006 3.1652-9.3787 3.6393-14.2818.237-2.4515.344-4.9599.2272-7.4887-.1169-2.5288-.3276-5.02123-.9499-7.4613-.0723-.18648.0431-.44574.267-.42529.2816-.10918.4477.04089.52.22736z'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 @media screen and (min-width: 768px) {
     .page-section.page-faves .sticky-member .member-img .swiper-next i {
         width: 5.7291666667vw;
         height: 100%
     }
 }
 
 html.dark-mode .page-section.page-faves .sticky-member .member-img .swiper-next i {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='92' viewBox='0 0 120 92' width='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Cpath d='m118.561 43.6091c-2.204-2.8993-4.35-5.9282-6.461-8.8639l-6.366-8.9004-6.2726-8.9367-6.3449-9.12315 3.7411 1.01618c-4.1005 2.23357-8.1648 4.56037-12.2652 6.79397-4.1005 2.2336-8.2732 4.2807-12.5183 6.1413s-8.6202 3.6644-12.9737 5.2453c-4.4474 1.6173-8.8371 3.105-13.4291 4.3494-.1877.0728-.3538-.0773-.4261-.2638-.0362-.0932-.0146-.3161.0792-.3525 3.7174-2.943 7.6732-5.5495 11.5713-8.0264 3.992-2.5133 7.9625-4.8037 12.0268-7.1305 4.1004-2.2336 8.237-4.3739 12.4821-6.23455 4.2451-1.86063 8.6201-3.66442 12.829-5.61828l.1878-.07279c1.2778-.60276 2.8018-.01391 3.4595 1.12537l5.4061 9.48715 5.349 9.6167 5.255 9.6532c1.77 3.1745 3.484 6.4786 5.161 9.6895.072.1865.05.4094-.137.4822-.094.0364-.224-.0205-.354-.0773z'/%3E%3Cpath d='m92.9045 5.29267c1.7862 4.88463 2.5038 10.07643 2.4559 15.24323-.0117 5.26-.7889 10.4951-2.4038 15.5188s-3.8437 9.8564-6.7226 14.4049c-2.9151 4.4553-6.3863 8.59-10.1321 12.2949l-2.9304 2.7451c-.9455.9029-2.021 1.749-3.0027 2.5587-1.0755.8461-2.021 1.749-3.1326 2.5018l-3.1689 2.4086c-2.1871 1.5989-4.4828 2.9181-6.7784 4.2373-2.3318 1.226-4.6636 2.452-7.1039 3.3982-2.4402.9463-4.8443 1.9858-7.3569 2.7456-1.2563.3799-2.5126.7598-3.7689 1.1397-1.2562.3799-2.5125.7598-3.805 1.0464-2.5848.5734-5.0758 1.1103-7.6969 1.5904-2.5633.3504-5.1266.7009-7.7623.8649-.2238-.0205-.39-.1706-.4623-.357-.0723-.1865.0792-.3525.1731-.3889 2.2956-1.3192 4.6636-2.452 6.9377-3.5483s4.6059-2.3223 6.88-3.4187c2.2741-1.0963 4.512-2.2859 6.7861-3.3822 1.0901-.53 2.2741-1.0963 3.3281-1.7196l3.328-1.7195c2.2379-1.1896 4.3459-2.436 6.5261-3.4959 1.054-.6233 2.1441-1.1532 3.1981-1.7764 1.0539-.6232 2.144-1.1532 3.198-1.7764l3.1619-1.8696c1.054-.6233 2.0718-1.3397 3.0896-2.0561 2.0718-1.3397 3.9412-2.9227 5.9407-4.4488 3.7389-3.1659 7.1093-6.7252 10.1474-10.5847s5.4839-8.1328 7.3734-12.7267c1.9257-4.5006 3.1652-9.3787 3.6393-14.2818.237-2.4515.344-4.9599.2272-7.4887-.1169-2.5288-.3276-5.02123-.9499-7.4613-.0723-.18648.0431-.44574.267-.42529.2816-.10918.4477.04089.52.22736z'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-img .swiper-next i {
         top: -16.9491525424vw;
         margin-right: -7.8226857888vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-img .arc-text {
     position: absolute;
     top: 0px;
     left: 0;
     z-index: 2;
     width: 100%;
     pointer-events: none
 }
 
 html.lang-ko .page-section.page-faves .sticky-member .member-img .arc-text {
     width: 80%
 }
 
 .page-section.page-faves .sticky-member .member-img .arc-text svg {
     overflow: visible
 }
 
 html.dark-mode .page-section.page-faves .sticky-member .member-img .arc-text svg {
     fill: #fff
 }
 
 .page-section.page-faves .sticky-member .member-img .arc-text text {
     font-size: 40px;
     font-weight: bold
 }
 
 .page-section.page-faves .sticky-member .member-img figure {
     position: relative;
     display: inline-block;
     height: 100%;
     -webkit-transform: scale(0.6);
     transform: scale(0.6);
     -webkit-transition: opacity ease .15s, -webkit-transform ease .35s;
     transition: opacity ease .15s, -webkit-transform ease .35s;
     transition: opacity ease .15s, transform ease .35s;
     transition: opacity ease .15s, transform ease .35s, -webkit-transform ease .35s
 }
 
 .page-section.page-faves .sticky-member .member-img img {
     display: block;
     max-width: 100%;
     -webkit-transition: opacity .2s;
     transition: opacity .2s
 }
 
 .page-section.page-faves .sticky-member .member-img img.original {
     opacity: 0;
     z-index: 1
 }
 
 .page-section.page-faves .sticky-member .member-img img.blur {
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     width: 100%
 }
 
 .page-section.page-faves .sticky-member .member-info {
     width: 40%;
     min-height: 220px;
     margin-left: 5%
 }
 
 html.dark-mode .page-section.page-faves .sticky-member .member-info {
     color: #fff
 }
 
 html.static-mode .page-section.page-faves .sticky-member .member-info {
     z-index: 2
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-align: center;
         -ms-flex-align: center;
         align-items: center;
         z-index: 2;
         width: 80%;
         height: 50%;
         padding-top: 25vw;
         margin-left: 0;
         padding: 13.037809648vw 12.2555410691vw 6.518904824vw;
         background: -webkit-gradient(linear, left top, left bottom, from(rgba(232, 232, 230, 0)), color-stop(45%, rgba(232, 232, 230, 0.5)), color-stop(60%, rgb(232, 232, 230)));
         background: linear-gradient(rgba(232, 232, 230, 0) 0%, rgba(232, 232, 230, 0.5) 45%, rgb(232, 232, 230) 60%);
         pointer-events: none
     }
     html:not(.static-mode).dark-mode .page-section.page-faves .sticky-member .member-info {
         background: -webkit-gradient(linear, left top, left bottom, from(rgba(34, 34, 34, 0)), color-stop(45%, rgba(34, 34, 34, 0.5)), color-stop(60%, rgb(34, 34, 34)));
         background: linear-gradient(rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.5) 45%, rgb(34, 34, 34) 60%)
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info {
         background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(45%, rgba(255, 255, 255, 0.5)), color-stop(60%, rgb(255, 255, 255)));
         background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 45%, rgb(255, 255, 255) 60%);
         padding: 0 12.3859191656vw;
         margin-top: -13.037809648vw
     }
     html.static-mode.dark-mode .page-section.page-faves .sticky-member .member-info {
         background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(45%, rgba(0, 0, 0, 0.5)), color-stop(60%, rgb(0, 0, 0)));
         background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 45%, rgb(0, 0, 0) 60%)
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper-wrapper {
     pointer-events: none
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide {
     visibility: hidden
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide .title span {
         overflow: hidden
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide .title span:before {
     content: "";
     width: 0%;
     height: min(2.0833333333vw, 40px);
     min-height: 15px;
     background: var(--primary-pink);
     display: none;
     position: absolute;
     left: 0;
     top: calc(-1*min(0.15625vw, 3px));
     z-index: -1;
     -webkit-transition: width .3s;
     transition: width .3s;
     -webkit-transition-delay: .3s;
     transition-delay: .3s;
     width: 100%
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide .title span:before {
         height: 11.7340286832vw
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide .title span:before {
         height: 100%
     }
 }
 
 html.color-mode .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide .title span {
     color: #fff
 }
 
 html.color-mode .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide .title span:before {
     width: 100%
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active {
     visibility: visible
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title>strong {
     margin-bottom: min(1.09375vw, 21px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title>strong {
         marign-bottom: 1.5645371578vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title>strong,
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title>span {
     opacity: 1;
     -webkit-transition: ease opacity .3s, margin-top .3s;
     transition: ease opacity .3s, margin-top .3s;
     margin-top: 0
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title span {
     position: relative;
     padding: min(0.5208333333vw, 10px);
     -webkit-transition-delay: .03s;
     transition-delay: .03s;
     display: none;
     background: var(--primary-pink);
     word-break: keep-all
 }
 
 html.lang-en .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title span.lang-en {
     display: inline
 }
 
 html.lang-ko .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title span.lang-ko {
     display: inline
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title span {
         padding: 1.3037809648vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .title span:before {
     width: 100%
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p {
     opacity: 1;
     -webkit-transition: ease opacity .3s, margin-top .3s;
     transition: ease opacity .3s, margin-top .3s;
     margin-top: 0;
     font-weight: 400
 }
 
 html.lang-ko .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p {
     font-family: "Noto Sans KR";
     font-weight: 500
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p {
         line-height: 5.4758800522vw;
         margin-bottom: 1.3037809648vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(1) {
     -webkit-transition-delay: .12s;
     transition-delay: .12s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(2) {
     -webkit-transition-delay: .24s;
     transition-delay: .24s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(3) {
     -webkit-transition-delay: .36s;
     transition-delay: .36s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(4) {
     -webkit-transition-delay: .48s;
     transition-delay: .48s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(5) {
     -webkit-transition-delay: .6s;
     transition-delay: .6s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(6) {
     -webkit-transition-delay: .72s;
     transition-delay: .72s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(7) {
     -webkit-transition-delay: .84s;
     transition-delay: .84s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(8) {
     -webkit-transition-delay: .96s;
     transition-delay: .96s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(9) {
     -webkit-transition-delay: 1.08s;
     transition-delay: 1.08s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .swiper-slide-active .desc p:nth-child(10) {
     -webkit-transition-delay: 1.2s;
     transition-delay: 1.2s
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .title strong {
     display: block;
     opacity: 0;
     margin-top: 10px;
     font-size: 2.0833333333vw;
     font-weight: bold;
     display: none
 }
 
 html.lang-ko .page-section.page-faves .sticky-member .member-info .swiper .title strong.lang-ko {
     display: block
 }
 
 html.lang-en .page-section.page-faves .sticky-member .member-info .swiper .title strong.lang-en {
     display: block
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-faves .sticky-member .member-info .swiper .title strong {
         font-size: min(3.6458333333vw, 28px)
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info .swiper .title strong {
         font-size: 2.9325513196vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .title strong {
         font-size: 6.258148631vw;
         margin-bottom: 1.5645371578vw
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info .swiper .title strong {
         font-size: 6.258148631vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .title span {
     display: block;
     opacity: 0;
     margin-top: 10px;
     margin-top: 0.5208333333vw;
     font-size: 1.3541666667vw;
     font-weight: bold;
     letter-spacing: -0.05em
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-faves .sticky-member .member-info .swiper .title span {
         font-size: min(2.6041666667vw, 20px)
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info .swiper .title span {
         font-size: min(1.6927083333vw, 13px);
         margin-top: 0.9775171065vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .title span {
         font-size: 4.6936114733vw;
         margin-bottom: 3.259452412vw
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info .swiper .title span {
         font-size: 4.6936114733vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .desc {
     width: 60%;
     line-height: 1.5;
     margin-top: 1.1458333333vw;
     padding-left: 1em;
     font-size: 1.0416666667vw
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-faves .sticky-member .member-info .swiper .desc {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info .swiper .desc {
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-faves .sticky-member .member-info .swiper .desc {
         margin-top: 3.3898305085vw;
         font-size: 4.1720990874vw;
         width: 90%
     }
     html.static-mode .page-section.page-faves .sticky-member .member-info .swiper .desc {
         font-size: 4.1720990874vw
     }
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .desc p {
     opacity: 0
 }
 
 .page-section.page-faves .sticky-member .member-info .swiper .desc p:before {
     content: "-";
     position: absolute;
     margin-left: -1em
 }
 
 @-webkit-keyframes buttonRight {
     0% {
         -webkit-transform: skewY(0deg);
         transform: skewY(0deg)
     }
     10% {
         -webkit-transform: skewY(-8deg);
         transform: skewY(-8deg)
     }
     30% {
         -webkit-transform: skewY(8deg);
         transform: skewY(8deg)
     }
     50% {
         -webkit-transform: skewY(0deg);
         transform: skewY(0deg)
     }
     100% {
         -webkit-transform: skewY(0deg);
         transform: skewY(0deg)
     }
 }
 
 @keyframes buttonRight {
     0% {
         -webkit-transform: skewY(0deg);
         transform: skewY(0deg)
     }
     10% {
         -webkit-transform: skewY(-8deg);
         transform: skewY(-8deg)
     }
     30% {
         -webkit-transform: skewY(8deg);
         transform: skewY(8deg)
     }
     50% {
         -webkit-transform: skewY(0deg);
         transform: skewY(0deg)
     }
     100% {
         -webkit-transform: skewY(0deg);
         transform: skewY(0deg)
     }
 }
 
 @-webkit-keyframes buttonLeft {
     0% {
         -webkit-transform: skewX(0deg);
         transform: skewX(0deg)
     }
     10% {
         -webkit-transform: skewX(-10deg);
         transform: skewX(-10deg)
     }
     30% {
         -webkit-transform: skewX(8deg);
         transform: skewX(8deg)
     }
     50% {
         -webkit-transform: skewX(0deg);
         transform: skewX(0deg)
     }
     100% {
         -webkit-transform: skewX(0deg);
         transform: skewX(0deg)
     }
 }
 
 @keyframes buttonLeft {
     0% {
         -webkit-transform: skewX(0deg);
         transform: skewX(0deg)
     }
     10% {
         -webkit-transform: skewX(-10deg);
         transform: skewX(-10deg)
     }
     30% {
         -webkit-transform: skewX(8deg);
         transform: skewX(8deg)
     }
     50% {
         -webkit-transform: skewX(0deg);
         transform: skewX(0deg)
     }
     100% {
         -webkit-transform: skewX(0deg);
         transform: skewX(0deg)
     }
 }
 
 html.static-mode .page-section.page-projects {
     background: #fff;
     padding-bottom: min(14.21875vw, 273px)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects {
         padding-bottom: 0
     }
 }
 
 html.static-mode.dark-mode .page-section.page-projects {
     background: #000;
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects .page-content {
         max-width: none;
         width: 100%;
         padding: 0 7.8226857888vw 29.9869621904vw
     }
 }
 
 .page-section.page-projects .sticky-work {
     height: 3000px
 }
 
 html:not(.static-mode) .page-section.page-projects .sticky-work {
     max-width: 1700px;
     width: 100%;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%)
 }
 
 html.static-mode .page-section.page-projects .sticky-work {
     background: #fff;
     overflow: hidden;
     height: 1080px;
     min-height: auto;
     color: #000
 }
 
 html.static-mode .page-section.page-projects .sticky-work .sticky-content {
     height: 1080px
 }
 
 html.static-mode.dark-mode .page-section.page-projects .sticky-work {
     background: #000;
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .sticky-work {
         height: 2000px
     }
     html.static-mode .page-section.page-projects .sticky-work {
         height: auto
     }
 }
 
 .page-section.page-projects .sticky-work .content-wrapper {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     height: 100%;
     overflow: hidden
 }
 
 html:not(.static-mode) .page-section.page-projects .sticky-work .content-wrapper {
     width: 50%
 }
 
 html.static-mode .page-section.page-projects .sticky-work .content-wrapper {
     height: min(62.5vw, 1200px)
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode) .page-section.page-projects .sticky-work .content-wrapper {
         min-height: unset;
         width: 100%
     }
     html.static-mode .page-section.page-projects .sticky-work .content-wrapper {
         height: auto;
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse
     }
 }
 
 .page-section.page-projects .sticky-work .content-wrapper .static-work-image {
     width: 960px;
     height: 570px;
     background: #eee;
     -ms-flex-negative: 0;
     flex-shrink: 0;
     margin-top: -140px
 }
 
 html.static-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image {
     width: min(50vw, 960px);
     height: min(29.6875vw, 570px);
     margin-top: 0
 }
 
 html.static-mode.dark-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image {
     background-color: #6835fc
 }
 
 .page-section.page-projects .sticky-work .content-wrapper .static-work-image img {
     width: 100%;
     height: 100%
 }
 
 html.static-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image img {
     -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
     box-shadow: 1px 1px 3px rgba(0, 0, 0, .15);
     -webkit-transition: -webkit-transform .5s;
     transition: -webkit-transform .5s;
     transition: transform .5s;
     transition: transform .5s, -webkit-transform .5s
 }
 
 html.static-mode.dark-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image img {
     -webkit-transition: -webkit-transform .5s, -webkit-filter .5s ease-in-out;
     transition: -webkit-transform .5s, -webkit-filter .5s ease-in-out;
     transition: transform .5s, filter .5s ease-in-out;
     transition: transform .5s, filter .5s ease-in-out, -webkit-transform .5s, -webkit-filter .5s ease-in-out;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%);
     -webkit-transform: translate3d(calc(-1 * min(1.5625vw, 30px)), calc(-1 * min(1.5625vw, 30px)), 0);
     transform: translate3d(calc(-1 * min(1.5625vw, 30px)), calc(-1 * min(1.5625vw, 30px)), 0)
 }
 
 html.static-mode.dark-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image img:hover {
     -webkit-transition: -webkit-transform .5s, -webkit-filter .2s ease-in-out;
     transition: -webkit-transform .5s, -webkit-filter .2s ease-in-out;
     transition: transform .5s, filter .2s ease-in-out;
     transition: transform .5s, filter .2s ease-in-out, -webkit-transform .5s, -webkit-filter .2s ease-in-out;
     -webkit-filter: grayscale(0%);
     filter: grayscale(0%)
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image img:hover {
         -webkit-transform: none;
         transform: none
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image {
         width: 100%;
         height: auto;
         margin-top: 5.9973924381vw
     }
     html.static-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image img {
         width: 100%;
         height: auto
     }
     html.static-mode.dark-mode .page-section.page-projects .sticky-work .content-wrapper .static-work-image img {
         -webkit-transform: none;
         transform: none
     }
 }
 
 html.static-mode .page-section.page-projects .page-project-title {
     font-size: min(6.25vw, 120px);
     font-weight: bold;
     color: #000;
     position: absolute;
     top: min(5.7291666667vw, 110px);
     right: min(22.3958333333vw, 430px)
 }
 
 html.static-mode.dark-mode .page-section.page-projects .page-project-title {
     background: #000;
     color: #fff;
     text-shadow: min(0.3125vw, 6px) min(0.3125vw, 6px) 0 var(--primary-pink)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .page-project-title {
         top: -4px
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects .page-project-title {
         position: relative;
         right: auto;
         left: 0;
         margin-bottom: 5.9973924381vw;
         font-size: 10.4302477184vw
     }
     html.static-mode.dark-mode .page-section.page-projects .page-project-title {
             text-shadow: 0.7822685789vw 0.7822685789vw 0 var(--primary-pink)
     }
 }
 
 .page-section.page-projects .works-wrapper {
     position: relative;
     width: 90%;
     height: 100vh;
     height: 50vw;
     max-height: 950px;
     overflow: hidden
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-projects .works-wrapper {
         height: 56vw
     }
 }
 
 html.static-mode .page-section.page-projects .works-wrapper {
     overflow: visible;
     z-index: 2
 }
 
 @media screen and (min-width: 768px) {
     html.static-mode .page-section.page-projects .works-wrapper {
         height: 55vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-wrapper {
         width: 100%;
         height: 100%
     }
     html:not(.static-mode) .page-section.page-projects .works-wrapper {
         max-height: unset
     }
 }
 
 .page-section.page-projects .works-list {
     height: 100%;
     position: relative;
     height: 100%
 }
 
 html.static-mode .page-section.page-projects .works-list {
     position: absolute;
     width: 140%;
     left: min(8.3854166667vw, 161px);
     max-height: min(20.8333333333vw, 400px);
     top: 410px
 }
 
 @media screen and (min-width: 768px)and (max-width: 1440px) {
     html.static-mode .page-section.page-projects .works-list {
         top: min(25vw, 360px)
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .works-list {
         max-height: 24.4379276637vw
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects .works-list {
         width: 100%;
         max-height: none;
         height: auto;
         position: relative;
         top: 0;
         left: 0
     }
 }
 
 .page-section.page-projects .works-list .swiper {
     height: 100%;
     overflow: visible
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode) .page-section.page-projects .works-list .swiper {
         position: absolute;
         left: 0;
         bottom: 0;
         width: 100%;
         height: auto;
         min-height: min(29.0625vw, 558px)
     }
     html.static-mode .page-section.page-projects .works-list .swiper {
         -webkit-transform: translateY(0);
         transform: translateY(0)
     }
 }
 
 html.static-mode .page-section.page-projects .works-list .swiper:after {
     background: none !important;
     top: min(-1.8229166667vw, -35px);
     left: min(-2.8645833333vw, -55px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-projects .works-list .swiper:after {
         width: 120%;
         height: 100%
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper:after {
         content: "";
         position: absolute;
         top: 0px;
         left: 0px;
         z-index: -1;
         width: 100%;
         height: 100%;
         display: block;
         background: rgba(37, 37, 37, .2);
         border-radius: 0;
         -webkit-transform: skewX(0);
         transform: skewX(0);
         -webkit-transition: none;
         transition: none
     }
 }
 
 html:not(.static-mode).color-mode .page-section.page-projects .works-list .swiper:after {
     background: rgba(0, 0, 0, .6)
 }
 
 .page-section.page-projects .works-list .swiper-slide {
     width: 100%;
     -webkit-transition: -webkit-transform .3s;
     transition: -webkit-transform .3s;
     transition: transform .3s;
     transition: transform .3s, -webkit-transform .3s;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: self-start;
     -ms-flex-align: self-start;
     align-items: self-start
 }
 
 html.static-mode .page-section.page-projects .works-list .swiper-slide {
     -webkit-box-align: self-start;
     -ms-flex-align: self-start;
     align-items: self-start;
     color: rgba(0, 0, 0, .5)
 }
 
 html.static-mode.dark-mode .page-section.page-projects .works-list .swiper-slide {
     color: rgba(255, 255, 255, .5)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .works-list .swiper-slide {
         margin-top: 0 !important
     }
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide {
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse;
         margin-top: 0 !important;
         margin-bottom: 0 !important;
         -webkit-transition: none;
         transition: none
     }
     html.static-mode .page-section.page-projects .works-list .swiper-slide {
         margin-top: 0 !important;
         margin-bottom: 0 !important;
         -webkit-transition: none;
         transition: none
     }
 }
 
 html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide-prev,
 html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide-next {
     -webkit-transition: margin .1s, -webkit-transform .1s;
     transition: margin .1s, -webkit-transform .1s;
     transition: margin .1s, transform .1s;
     transition: margin .1s, transform .1s, -webkit-transform .1s
 }
 
 html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide-prev .info,
 html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide-next .info {
     -webkit-transition: margin .1s, opacity .1s;
     transition: margin .1s, opacity .1s
 }
 
 html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide-next {
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     padding-bottom: 200px
 }
 
 .page-section.page-projects .works-list .swiper-buttons {
     position: absolute;
     z-index: 10;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     top: 31.2%;
     left: 80%
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper-buttons {
         top: 0;
         right: 0;
         left: auto;
         -webkit-transform: rotate(90deg);
         transform: rotate(90deg)
     }
     html:not(.static-mode) .page-section.page-projects .works-list .swiper-buttons {
         top: -1.9556714472vw;
         right: 14.0808344198vw;
         left: auto;
         -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
         bottom: auto
     }
     html.static-mode .page-section.page-projects .works-list .swiper-buttons {
         left: auto;
         right: 10.4302477184vw;
         top: -4.5632333768vw;
         -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
         bottom: auto
     }
 }
 
 @media screen and (min-width: 1024px)and (max-width: 1920px) {
     html:not(.static-mode) .page-section.page-projects .works-list .swiper-buttons {
         top: 29.8%
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-projects .works-list .swiper-buttons {
         top: 20%
     }
 }
 
 @media(min-width: 2300px) {
     html:not(.static-mode) .page-section.page-projects .works-list .swiper-buttons {
         top: 29.5%
     }
 }
 
 @media screen and (min-width: 768px) {
     html.static-mode .page-section.page-projects .works-list .swiper-buttons {
         top: min(-7.2916666667vw, -140px);
         left: min(33.3333333333vw, 640px);
         -webkit-transform: none;
         transform: none;
         margin-top: 0
     }
 }
 
 @media screen and (min-width: 1024px)and (max-width: 1440px) {
     html.static-mode .page-section.page-projects .works-list .swiper-buttons {
         top: min(-4.8958333333vw, -94px)
     }
 }
 
 .page-section.page-projects .works-list .swiper-prev,
 .page-section.page-projects .works-list .swiper-next {
     position: relative;
     color: rgba(0, 0, 0, 0);
     font-size: 0px;
     overflow: visible;
     width: 1.8229166667vw;
     height: 3.2291666667vw;
     padding: 1.3541666667vw 2.0833333333vw
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-projects .works-list .swiper-prev,
     .page-section.page-projects .works-list .swiper-next {
         width: 4.8875855327vw;
         height: 9.7751710655vw;
         padding: 1.9550342131vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper-prev,
     .page-section.page-projects .works-list .swiper-next {
         width: 3.259452412vw;
         height: 8.6049543677vw;
         padding: 3.9113428944vw;
         -webkit-transition: none;
         transition: none
     }
 }
 
 .page-section.page-projects .works-list .swiper-prev:after,
 .page-section.page-projects .works-list .swiper-next:after {
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     bottom: 0;
     left: 0;
     background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 25 60' viewBox='0 0 25 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='2'%3E%3Cpath d='m12.5 60v-57.7'/%3E%3Cpath d='m20.6 10.8-8.1-8.5-8.1 8.5'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 1.1458333333vw;
     -webkit-transition: height .2s, margin-bottom .3s, margin-top .3s;
     transition: height .2s, margin-bottom .3s, margin-top .3s
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-projects .works-list .swiper-prev:after,
     .page-section.page-projects .works-list .swiper-next:after {
         background-size: 2.1505376344vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper-prev:after,
     .page-section.page-projects .works-list .swiper-next:after {
         background-size: 2.8683181226vw
     }
 }
 
 html.static-mode .page-section.page-projects .works-list .swiper-prev:after,
 html.static-mode .page-section.page-projects .works-list .swiper-next:after {
     background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 25 60' viewBox='0 0 25 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='2'%3E%3Cpath d='m12.5 60v-57.7'/%3E%3Cpath d='m20.6 10.8-8.1-8.5-8.1 8.5'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 html.static-mode.dark-mode .page-section.page-projects .works-list .swiper-prev:after,
 html.static-mode.dark-mode .page-section.page-projects .works-list .swiper-next:after {
     background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 25 60' viewBox='0 0 25 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23fff' stroke-miterlimit='10' stroke-width='2'%3E%3Cpath d='m12.5 60v-57.7'/%3E%3Cpath d='m20.6 10.8-8.1-8.5-8.1 8.5'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 .page-section.page-projects .works-list .swiper-next {
     margin-top: min(2.6041666667vw, 50px)
 }
 
 html.static-mode .page-section.page-projects .works-list .swiper-next {
     margin-top: min(5.2083333333vw, 100px)
 }
 
 .page-section.page-projects .works-list .swiper-next:after {
     -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
     top: 0;
     bottom: auto
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper-next {
         margin-top: 6.518904824vw
     }
     html.static-mode .page-section.page-projects .works-list .swiper-next {
         margin-top: 6.518904824vw
     }
 }
 
 html.static-mode .page-section.page-projects .works-list .swiper-slide-active {
     margin-top: min(-5.2083333333vw, -100px);
     margin-bottom: min(3.125vw, 60px);
     color: #000
 }
 
 @media screen and (min-width: 768px)and (max-width: 1440px) {
     html.static-mode .page-section.page-projects .works-list .swiper-slide-active {
         margin-top: min(-3.125vw, 1440px, -60px)
     }
 }
 
 html.static-mode.dark-mode .page-section.page-projects .works-list .swiper-slide-active {
     color: #fff
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .works-list .swiper-slide-active {
         margin-top: min(-3.6458333333vw, -70px) !important
     }
 }
 
 @media screen and (max-height: 950px) {
     html:not(.static-mode) .page-section.page-projects .works-list .swiper-slide-active {
         opacity: 1
     }
 }
 
 .page-section.page-projects .works-list .swiper-slide-active .info {
     width: min(32.3958333333vw, 622px);
     opacity: 1;
     padding-left: min(0.5208333333vw, 10px)
 }
 
 html.lang-ko .page-section.page-projects .works-list .swiper-slide-active .info[data-img*=_showroom] .desc {
     padding-right: min(1.5625vw, 30px);
     -webkit-box-sizing: border-box;
     box-sizing: border-box
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper-slide-active .info {
         width: 100%
     }
 }
 
 .page-section.page-projects .works-list .swiper-slide-active .info .title {
     font-size: min(3.125vw, 60px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .swiper-slide-active .info .title {
         font-size: 5.2151238592vw
     }
 }
 
 .page-section.page-projects .works-list .swiper-slide-active .info .year:after {
     width: 145%;
     left: -15px;
     -webkit-transition-delay: .2s;
     transition-delay: .2s;
     background: #fff
 }
 
 html.static-mode .page-section.page-projects .works-list .swiper-slide-active .info .year:after {
     width: min(44.2708333333vw, 850px);
     left: 0
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-projects .works-list .swiper-slide-active .info .year:after {
         width: 145%
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-projects .works-list .swiper-slide-active .info .year:after {
         width: 125%
     }
 }
 
 .page-section.page-projects .works-list .swiper-slide-active .info .desc {
     margin-top: 0;
     -webkit-transition-delay: .1s;
     transition-delay: .1s;
     opacity: 1;
     padding-bottom: 1.25vw;
     display: block;
     height: auto;
     visibility: visible;
     display: none
 }
 
 html.lang-ko .page-section.page-projects .works-list .swiper-slide-active .info .desc.lang-ko {
     display: block;
     font-family: "Noto Sans KR"
 }
 
 html.lang-en .page-section.page-projects .works-list .swiper-slide-active .info .desc.lang-en {
     display: block
 }
 
 .page-section.page-projects .works-list .swiper-slide-active .info .btns {
     display: block;
     opacity: 1;
     visibility: visible;
     margin-top: 0;
     -webkit-transition-delay: .2s;
     transition-delay: .2s;
     display: none
 }
 
 html.lang-ko .page-section.page-projects .works-list .swiper-slide-active .info .btns.lang-ko {
     display: block
 }
 
 html.lang-en .page-section.page-projects .works-list .swiper-slide-active .info .btns.lang-en {
     display: block
 }
 
 .page-section.page-projects .works-list .info {
     -webkit-transition: opacity .4s, margin .3s;
     transition: opacity .4s, margin .3s;
     opacity: .65;
     position: relative;
     max-width: min(32.3958333333vw, 622px);
     font-weight: bold;
     font-size: min(2.7083333333vw, 52px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info {
         max-width: none
     }
 }
 
 @media screen and (min-width: 768px) {
     .page-section.page-projects .works-list .info[data-img=projects_preview-semiconductor_ch] .title,
     .page-section.page-projects .works-list .info[data-img=projects_preview-semiconductor] .title,
     .page-section.page-projects .works-list .info[data-img*=_showroom] .title,
     .page-section.page-projects .works-list .info[data-img*=_showroom] .title {
         font-size: min(2.7083333333vw, 52px)
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .works-list .info[data-img=projects_preview-semiconductor_ch] .title,
     html.static-mode .page-section.page-projects .works-list .info[data-img=projects_preview-semiconductor] .title,
     html.static-mode .page-section.page-projects .works-list .info[data-img*=_showroom] .title,
     html.static-mode .page-section.page-projects .works-list .info[data-img*=_showroom] .title {
         font-size: min(2.7370478983vw, 28px)
     }
 }
 
 html.static-mode .page-section.page-projects .works-list .info {
     opacity: 1;
     width: 50%
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode) .page-section.page-projects .works-list .info {
         width: 100%;
         padding: 8vw 7.8226857888vw 13.037809648vw;
         padding-bottom: 0;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         -webkit-transition: none;
         transition: none
     }
     html.static-mode .page-section.page-projects .works-list .info {
         margin-top: 25px;
         width: 100%
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info {
         width: 60%;
         font-size: 4.6936114733vw;
         -webkit-transition: none;
         transition: none
     }
 }
 
 .page-section.page-projects .works-list .info .year {
     position: relative;
     padding-bottom: 6px;
     line-height: 1;
     z-index: 1;
     font-weight: 600
 }
 
 html.static-mode .page-section.page-projects .works-list .info .year {
     padding-bottom: min(0.3125vw, 6px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .year {
         font-size: 6.258148631vw;
         line-height: 7.6923076923vw
     }
 }
 
 .page-section.page-projects .works-list .info .year:after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     mix-blend-mode: difference;
     width: 100%;
     height: 2px;
     -webkit-transition: width .5s, left .5s;
     transition: width .5s, left .5s;
     background-color: rgba(255, 255, 255, .5)
 }
 
 html.static-mode .page-section.page-projects .works-list .info .year:after {
     background-color: rgba(0, 0, 0, .5)
 }
 
 html.dark-mode .page-section.page-projects .works-list .info .year:after {
     background: rgba(255, 255, 255, .5)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .year:after {
         height: 1px
     }
 }
 
 .page-section.page-projects .works-list .info .title {
     padding: 12px 0 18px;
     line-height: 1.17;
     font-weight: 600;
     -webkit-transition: font-size .2s;
     transition: font-size .2s;
     font-size: min(3.125vw, 60px)
 }
 
 html.static-mode .page-section.page-projects .works-list .info .title {
     padding: min(0.625vw, 12px) 0 min(0.9375vw, 18px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .works-list .info .title {
         letter-spacing: -1px
     }
     html:not(.static-mode) .page-section.page-projects .works-list .info .title {
         padding: min(1.8229166667vw, 14px) 0 min(1.3020833333vw, 10px)
     }
     html.static-mode .page-section.page-projects .works-list .info .title {
         font-size: 3.3235581623vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .title {
         font-size: 6.258148631vw;
         line-height: 7.6923076923vw;
         margin-top: 0.9126466754vw
     }
 }
 
 .page-section.page-projects .works-list .info .desc {
     max-width: 550px;
     height: 0;
     font-weight: 200;
     font-size: min(1.25vw, 24px);
     opacity: 0;
     -webkit-transition: margin .2s, padding .2s, opacity .4s, display .4s;
     transition: margin .2s, padding .2s, opacity .4s, display .4s;
     margin-top: min(-0.625vw, -12px);
     visibility: hidden
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-projects .works-list .info .desc {
         font-size: min(1.8229166667vw, 14px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .desc {
         -webkit-transition: none;
         transition: none
     }
 }
 
 html.static-mode .page-section.page-projects .works-list .info .desc {
     width: 92%
 }
 
 html.lang-ko .page-section.page-projects .works-list .info .desc {
     font-weight: 500;
     word-break: keep-all
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-projects .works-list .info .desc {
         font-size: 1.7595307918vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .desc {
         font-size: 2.3468057366vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .desc {
         max-width: 78.2268578879vw;
         margin-top: 4.6936114733vw;
         opacity: 1;
         font-size: 4.6936114733vw;
         line-height: 5.7366362451vw
     }
     html:not(.static-mode) .page-section.page-projects .works-list .info .desc {
         max-width: none
     }
 }
 
 .page-section.page-projects .works-list .info .btns {
     opacity: 0;
     visibility: hidden;
     font-size: 0;
     -webkit-transition: margin .2s, opacity .4s, display .4s;
     transition: margin .2s, opacity .4s, display .4s;
     margin-top: -0.625vw;
     display: none
 }
 
 .page-section.page-projects .works-list .info .btns .btn-more {
     display: inline-block;
     font-weight: 300;
     font-size: min(1.25vw, 24px);
     background-color: rgba(0, 0, 0, .4);
     -webkit-transition: background-color .2s;
     transition: background-color .2s;
     padding: min(0.46875vw, 9px) min(0.8854166667vw, 17px) min(0.2604166667vw, 5px);
     border-radius: min(0.4166666667vw, 8px)
 }
 
 html.dark-mode .page-section.page-projects .works-list .info .btns .btn-more:hover {
     background-color: #431db6
 }
 
 html.color-mode .page-section.page-projects .works-list .info .btns .btn-more:hover {
     background-color: #6835fc
 }
 
 html.static-mode.color-mode .page-section.page-projects .works-list .info .btns .btn-more:hover {
     color: #fff;
     background-color: var(--primary-pink);
     border-color: rgba(0, 0, 0, 0)
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode).color-mode .page-section.page-projects .works-list .info .btns .btn-more:hover {
         color: #6835fc
     }
 }
 
 html.static-mode.color-mode .page-section.page-projects .works-list .info .btns .btn-more:hover:after {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%23ffffff' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 @media screen and (max-width: 767px) {
     html:not(.static-mode).color-mode .page-section.page-projects .works-list .info .btns .btn-more:hover:after {
         background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%236835fc' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-projects .works-list .info .btns .btn-more {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-projects .works-list .info .btns .btn-more {
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 html.static-mode .page-section.page-projects .works-list .info .btns .btn-more {
     color: #000
 }
 
 html.static-mode.color-mode .page-section.page-projects .works-list .info .btns .btn-more {
     background-color: rgba(0, 0, 0, 0);
     border: 1px solid #000
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .btns .btn-more {
         margin-top: 4.0417209909vw;
         opacity: 1;
         font-size: 4.6936114733vw;
         line-height: 5.7366362451vw;
         padding: 1.1734028683vw 2.3468057366vw 1.0430247718vw 2.2164276402vw;
         border-radius: 1.0430247718vw
     }
     html:not(.static-mode).color-mode .page-section.page-projects .works-list .info .btns .btn-more {
         padding: 0;
         background-color: rgba(0, 0, 0, 0)
     }
 }
 
 html.dark-mode .page-section.page-projects .works-list .info .btns .btn-more {
     color: #fff;
     background-color: #6835fc
 }
 
 .page-section.page-projects .works-list .info .btns .btn-more:after {
     content: "";
     display: inline-block;
     width: min(0.9375vw, 18px);
     height: min(0.9375vw, 18px);
     margin-left: min(0.4166666667vw, 8px);
     vertical-align: middle;
     background: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%23ffffff' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain
 }
 
 html.static-mode .page-section.page-projects .works-list .info .btns .btn-more:after {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%23000' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 html.static-mode.dark-mode .page-section.page-projects .works-list .info .btns .btn-more:after {
     background-image: url("data:image/svg+xml,%3Csvg fill='none' height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3CclipPath id='a'%3E%3Cpath d='m0 0h16v16h-16z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)' stroke='%23fff' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5'%3E%3Cpath d='m15.4375 8.60287v6.83413h-14.793945v-14.793934h6.592965'/%3E%3Cpath d='m10.5322.643066h4.9046v4.663314'/%3E%3Cpath d='m15.4373.643066-9.40703 9.326634' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-projects .works-list .info .btns .btn-more:after {
         width: 3.9113428944vw;
         height: 3.9113428944vw;
         margin-left: 1.3037809648vw;
         background-size: 3.9113428944vw
     }
 }
 
 .page-section.page-contact.fixed {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999
 }
 
 html.static-mode .page-section.page-contact {
     background-color: #fff
 }
 
 html.static-mode.dark-mode .page-section.page-contact {
     background: #000;
     color: #fff
 }
 
 .page-section.page-contact .sticky-contact {
     height: 1600px
 }
 
 html.static-mode .page-section.page-contact .sticky-contact {
     height: auto;
     min-height: auto
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .sticky-contact {
         height: 100% !important
     }
 }
 
 .page-section.page-contact .sticky-content {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     height: min(67.7083333333vw, 1300px)
 }
 
 html.static-mode .page-section.page-contact .sticky-content {
     height: auto;
     min-height: auto
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .sticky-content {
         height: 100% !important;
         padding-top: 100px;
         position: relative
     }
     html.static-mode .page-section.page-contact .sticky-content {
         display: block
     }
 }
 
 .page-section.page-contact .section-contact {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     height: 100%;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     width: 100%;
     padding: 40vh 82px 20vh
 }
 
 .page-section.page-contact .section-contact.active {
     padding: 0
 }
 
 html.static-mode .page-section.page-contact .section-contact {
     padding: 0 8.3333333333vw;
     margin-bottom: 0
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-contact .section-contact {
         padding: 0 7.8226857888vw
     }
 }
 
 @media screen and (min-width: 768px) {
     html.static-mode .page-section.page-contact .section-contact {
         min-height: 100vh
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-contact {
         display: block;
         width: auto;
         padding: 30vh 7.8226857888vw 5vh
     }
     html.static-mode .page-section.page-contact .section-contact {
         padding: 0 7.8226857888vw
     }
 }
 
 .page-section.page-contact .section-inner {
     display: grid;
     -ms-flex-line-pack: justify;
     align-content: space-between;
     justify-items: start;
     grid-gap: min(5.46875vw, 105px);
     text-shadow: 0 0 7px #000;
     -webkit-transition: opacity .5s ease-out;
     transition: opacity .5s ease-out
 }
 
 html.static-mode .page-section.page-contact .section-inner {
     width: min(44.2708333333vw, 850px);
     text-shadow: none;
     color: #000;
     -ms-flex-line-pack: center;
     align-content: center
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner {
         display: block;
         width: 100%;
         padding-bottom: 50vh;
         padding-left: 0
     }
     html.static-mode .page-section.page-contact .section-inner {
         width: 100%;
         padding-bottom: 0;
         padding-left: 0
     }
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner {
     color: #fff
 }
 
 .page-section.page-contact .section-inner.hide {
     opacity: 0
 }
 
 .page-section.page-contact .section-inner.remove {
     display: none
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex
 }
 
 .page-section.page-contact .section-inner .contact-title {
     font-size: min(6.25vw, 120px);
     line-height: min(5.8333333333vw, 112px);
     font-weight: 700
 }
 
 @media(min-width: 1024px)and (max-width: 1240px) {
     html.static-mode .page-section.page-contact .section-inner .contact-title {
         line-height: min(0.2604166667vw, 80px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-title {
         display: block;
         font-size: 10.4302477184vw;
         line-height: 10.4302477184vw;
         margin-bottom: 8.8657105606vw
     }
     html.static-mode .page-section.page-contact .section-inner .contact-title {
         font-size: 8.8657105606vw
     }
     html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-title {
             text-shadow: 0.7822685789vw 0.7822685789vw 0 var(--primary-pink)
     }
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-title {
     text-shadow: 6px 6px 0 #6835fc;
     text-shadow: min(0.3125vw, 6px) min(0.3125vw, 6px) 0 var(--primary-pink)
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-title span {
     display: inline-block
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-title span {
     color: #fff
 }
 
 .page-section.page-contact .section-inner .contact-wrap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-wrap {
         display: block
     }
 }
 
 @media screen and (max-height: 1160px) {
     html.static-mode .page-section.page-contact .section-inner .contact-wrap {
         padding-bottom: 100px
     }
 }
 
 .page-section.page-contact .section-inner .contact-desc {
     position: relative;
     display: inline-block;
     text-transform: uppercase;
     font-size: min(1.4583333333vw, 28px);
     font-weight: 700;
     letter-spacing: -0.67px;
     margin-bottom: min(1.0416666667vw, 20px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-contact .section-inner .contact-desc {
         font-size: min(2.0833333333vw, 16px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-desc {
         font-size: 5.2151238592vw;
         letter-spacing: -0.1003911343vw;
         margin-bottom: 4.6936114733vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-desc:before {
     content: "";
     width: 0%;
     height: 2px;
     background: #a084ff;
     display: block;
     position: absolute;
     left: 0;
     bottom: 0;
     -webkit-transition: width .3s;
     transition: width .3s;
     -webkit-transition-delay: .3s;
     transition-delay: .3s
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-desc:before {
     background: #6835fc
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-desc:before {
     width: 0
 }
 
 html:not(.static-mode).color-mode .page-section.page-contact .section-inner .contact-desc:before {
     width: 0
 }
 
 .page-section.page-contact .section-inner .contact-desc.show:before {
     width: 100%
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-left {
         margin-bottom: 14.3415906128vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-left [class*=sns_] {
     font-size: min(1.25vw, 24px);
     line-height: 1;
     display: inline-block;
     font-weight: 300;
     letter-spacing: -0.67px
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-left [class*=sns_] {
     color: #000
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-left [class*=sns_] {
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-left [class*=sns_] {
         font-size: 4.6936114733vw;
         letter-spacing: -0.1003911343vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-left .sns_insta {
     margin-right: min(0.9375vw, 18px);
     display: inline-block;
     font-weight: 300;
     font-size: min(1.25vw, 24px);
     padding: min(0.625vw, 12px) min(0.5208333333vw, 10px) min(0.4166666667vw, 8px);
     border-radius: min(0.4166666667vw, 8px);
     background-color: rgba(0, 0, 0, .4);
     -webkit-transition: opacity .3s, background-color .3s, -webkit-transform ease .3s;
     transition: opacity .3s, background-color .3s, -webkit-transform ease .3s;
     transition: transform ease .3s, opacity .3s, background-color .3s;
     transition: transform ease .3s, opacity .3s, background-color .3s, -webkit-transform ease .3s
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-left .sns_insta:hover {
     background-color: #431db6
 }
 
 html.color-mode .page-section.page-contact .section-inner .contact-left .sns_insta:hover {
     background-color: #6835fc
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-left .sns_insta:hover {
     color: #fff;
     background-color: var(--primary-pink);
     border-color: rgba(0, 0, 0, 0)
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-left .sns_insta:hover:before {
     background-image: url("../images/contact/contact_icon-instagram.svg")
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-contact .section-inner .contact-left .sns_insta {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-contact .section-inner .contact-left .sns_insta {
         font-size: min(1.6927083333vw, 13px);
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         height: min(3.515625vw, 27px)
     }
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-left .sns_insta {
     color: #000
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-left .sns_insta {
     background-color: rgba(0, 0, 0, 0);
     border: 1px solid #000
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-left .sns_insta {
     color: #fff;
     background-color: #6835fc
 }
 
 html:not(.static-mode).light-mode .page-section.page-contact .section-inner .contact-left .sns_insta {
     color: #000
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-left .sns_insta {
         font-size: 4.6936114733vw;
         padding: 1.1734028683vw 2.3468057366vw 1.0430247718vw 2.2164276402vw;
         border-radius: 1.0430247718vw;
         border-radius: 1.0430247718vw
     }
     html.static-mode .page-section.page-contact .section-inner .contact-left .sns_insta {
         margin-right: 6.518904824vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-left .sns_insta:before {
     content: "";
     width: min(1.25vw, 24px);
     height: min(1.25vw, 24px);
     display: inline-block;
     background: url("../images/contact/contact_icon-instagram.svg") no-repeat center;
     background-size: contain;
     margin-right: min(0.3125vw, 6px);
     margin-bottom: min(-0.15625vw, -3px)
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-left .sns_insta:before {
     background-image: url("../images/contact/contact_icon-instagram-black.svg")
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-left .sns_insta:before {
     background-image: url("../images/contact/contact_icon-instagram.svg")
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-contact .section-inner .contact-left .sns_insta:before {
         margin-right: min(0.293255132vw, 3px);
         margin-bottom: min(-0.1955034213vw, -2px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-left .sns_insta:before {
         width: 4.6936114733vw;
         height: 4.6936114733vw;
         margin-right: 10px
     }
 }
 
 .page-section.page-contact .section-inner .contact-left .linkedin {
     margin-right: 0
 }
 
 .page-section.page-contact .section-inner .contact-left .linkedin:before {
     background: url("../images/contact/contact_icon-linkedin.svg") no-repeat center;
     background-size: contain
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-left .linkedin:before {
     background-image: url("../images/contact/contact_icon-linkedin-black.svg")
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-left .linkedin:before {
     background-image: url("../images/contact/contact_icon-linkedin.svg")
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-left .linkedin:hover:before {
     background-image: url("../images/contact/contact_icon-linkedin.svg")
 }
 
 .page-section.page-contact .section-inner .contact-info {
     margin-left: min(7.3958333333vw, 142px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html.static-mode .page-section.page-contact .section-inner .contact-info {
         margin-left: min(1.3020833333vw, 1024px, 25px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info {
         margin-left: 0
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dl {
     font-weight: 300;
     margin-bottom: min(4.1666666667vw, 80px)
 }
 
 .page-section.page-contact .section-inner .contact-info dl:last-child {
     margin-bottom: 0
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dl {
         width: 100%;
         margin-bottom: 15.6453715776vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dl.office {
     margin-bottom: min(1.0416666667vw, 20px)
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dl.office {
         margin-bottom: 10.4302477184vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dl.office dd {
     width: min(15.625vw, 300px)
 }
 
 html.lang-ko .page-section.page-contact .section-inner .contact-info dl.office dd {
     width: 100%
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dl.office dd {
         width: 72.7509778357vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dt {
     position: relative;
     display: inline-block;
     text-transform: uppercase;
     font-size: min(1.4583333333vw, 28px);
     font-weight: 700;
     letter-spacing: -0.67px
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-contact .section-inner .contact-info dt {
         font-size: min(2.0833333333vw, 16px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dt {
         font-size: 5.2151238592vw;
         letter-spacing: -0.1003911343vw;
         margin-bottom: 4.6936114733vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dt:before {
     content: "";
     width: 0%;
     height: 2px;
     background: #a084ff;
     display: block;
     position: absolute;
     left: 0;
     bottom: 0;
     -webkit-transition: width .3s;
     transition: width .3s;
     -webkit-transition-delay: .3s;
     transition-delay: .3s
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-info dt:before {
     background: #6835fc
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-info dt:before {
     width: 0
 }
 
 html:not(.static-mode).color-mode .page-section.page-contact .section-inner .contact-info dt:before {
     width: 0
 }
 
 .page-section.page-contact .section-inner .contact-info dt.show:before {
     width: 100%
 }
 
 .page-section.page-contact .section-inner .contact-info dd {
     font-weight: 200;
     font-size: min(1.4583333333vw, 28px);
     line-height: 1.2;
     letter-spacing: -0.016em;
     margin-top: min(0.46875vw, 9px);
     width: min(18.2291666667vw, 350px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-contact .section-inner .contact-info dd {
         font-size: min(4.1666666667vw, 32px)
     }
     html.static-mode .page-section.page-contact .section-inner .contact-info dd {
         width: 23.4604105572vw
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dd {
         width: 100%;
         font-size: 2.8683181226vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dd p {
     font-size: min(1.1458333333vw, 22px);
     font-weight: 300;
     letter-spacing: -0.67px;
     margin-bottom: min(1.0416666667vw, 20px);
     word-break: keep-all
 }
 
 html.lang-ko .page-section.page-contact .section-inner .contact-info dd p {
     font-weight: 400
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .page-section.page-contact .section-inner .contact-info dd p {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-contact .section-inner .contact-info dd p {
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dd p {
         font-size: 4.1720990874vw;
         letter-spacing: -0.1003911343vw;
         margin-bottom: 4.9543676662vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dd p strong {
     font-weight: bold
 }
 
 .page-section.page-contact .section-inner .contact-info dd p span {
     font-size: min(1.25vw, 24px);
     font-weight: 300;
     margin-bottom: min(0.7291666667vw, 14px)
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-contact .section-inner .contact-info dd p span {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-contact .section-inner .contact-info dd p span {
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dd p span {
         font-size: 4.6936114733vw;
         letter-spacing: -0.1003911343vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dd a {
     display: inline-block;
     font-size: min(1.25vw, 24px);
     font-weight: 300;
     letter-spacing: -0.67px
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-contact .section-inner .contact-info dd a {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-contact .section-inner .contact-info dd a {
         font-size: min(1.6927083333vw, 13px)
     }
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-info dd a {
     color: #000
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-info dd a {
     color: #fff
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dd a {
         font-size: 4.6936114733vw;
         letter-spacing: -0.1003911343vw
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dd a.mail {
     position: relative;
     font-weight: bold
 }
 
 .page-section.page-contact .section-inner .contact-info dd a.mail:after {
     content: "";
     width: 100%;
     height: 2px;
     background: #fff;
     display: block;
     position: absolute;
     left: 0;
     bottom: 2px
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dd a.mail:after {
         height: 1px
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dd a.mail:before {
     content: "";
     width: 0%;
     height: 2px;
     background: var(--primary-pink);
     display: block;
     position: absolute;
     left: 0;
     bottom: 2px;
     -webkit-transition: width .3s;
     transition: width .3s;
     z-index: 1
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-info dd a.mail:before {
     content: none
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info dd a.mail:before {
         height: 1px
     }
 }
 
 @media screen and (max-width: 767px) {
     html.dark-mode .page-section.page-contact .section-inner .contact-info dd a.mail.show:before {
         width: 100%
     }
 }
 
 .page-section.page-contact .section-inner .contact-info dd a.mail:hover:before {
     width: 100%
 }
 
 .page-section.page-contact .section-inner .contact-info .btn-map {
     display: inline-block;
     font-weight: 300;
     font-size: min(1.25vw, 24px);
     line-height: 1;
     padding: min(0.625vw, 12px) min(0.5208333333vw, 10px);
     border-radius: min(0.4166666667vw, 8px);
     background-color: rgba(0, 0, 0, .4);
     -webkit-transition: opacity .3s, background-color .3s, -webkit-transform ease .3s;
     transition: opacity .3s, background-color .3s, -webkit-transform ease .3s;
     transition: transform ease .3s, opacity .3s, background-color .3s;
     transition: transform ease .3s, opacity .3s, background-color .3s, -webkit-transform ease .3s
 }
 
 .page-section.page-contact .section-inner .contact-info .btn-map.hide {
     visibility: hidden
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-info .btn-map:hover {
     background-color: #431db6
 }
 
 html.color-mode .page-section.page-contact .section-inner .contact-info .btn-map:hover {
     background-color: #6835fc
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-info .btn-map:hover {
     color: #fff;
     background-color: var(--primary-pink);
     border-color: rgba(0, 0, 0, 0)
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-info .btn-map:hover:before {
     background-image: url("../images/contact/contact_icon-map.svg")
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-info .btn-map {
     color: #000
 }
 
 html.static-mode.color-mode .page-section.page-contact .section-inner .contact-info .btn-map {
     background-color: rgba(0, 0, 0, 0);
     border: 1px solid #000
 }
 
 html.dark-mode .page-section.page-contact .section-inner .contact-info .btn-map {
     color: #fff;
     background-color: #6835fc
 }
 
 html:not(.static-mode).light-mode .page-section.page-contact .section-inner .contact-info .btn-map {
     color: #000
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info .btn-map {
         font-size: 4.6936114733vw;
         letter-spacing: -0.1003911343vw;
         padding: 1.1734028683vw 2.3468057366vw 1.0430247718vw 2.2164276402vw;
         border-radius: 1.0430247718vw;
         border-radius: 1.0430247718vw
     }
     html.static-mode .page-section.page-contact .section-inner .contact-info .btn-map {
         margin-right: 6.518904824vw;
         margin-bottom: 10.9517601043vw
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     html:not(.static-mode) .page-section.page-contact .section-inner .contact-info .btn-map {
         font-size: min(1.8229166667vw, 14px)
     }
     html.static-mode .page-section.page-contact .section-inner .contact-info .btn-map {
         font-size: min(1.6927083333vw, 13px);
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         height: min(3.515625vw, 27px)
     }
 }
 
 .page-section.page-contact .section-inner .contact-info .btn-map:before {
     content: "";
     width: min(1.25vw, 24px);
     height: min(1.25vw, 24px);
     display: inline-block;
     background: url("../images/contact/contact_icon-map.svg") no-repeat center;
     background-size: contain;
     margin-right: min(0.4166666667vw, 8px);
     vertical-align: middle
 }
 
 html.static-mode .page-section.page-contact .section-inner .contact-info .btn-map:before {
     background-image: url("../images/contact/contact_icon-map-black.svg")
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-inner .contact-info .btn-map:before {
     background-image: url("../images/contact/contact_icon-map.svg")
 }
 
 @media screen and (max-width: 767px) {
     .page-section.page-contact .section-inner .contact-info .btn-map:before {
         width: 4.6936114733vw;
         height: 4.6936114733vw;
         margin-top: -0.6518904824vw;
         margin-right: 1.3037809648vw
     }
 }
 
 html.static-mode .page-section.page-contact .section-image {
     width: min(57.8645833333vw, 1111px);
     height: 100%;
     -webkit-transform: translateX(min(16.6666666667vw, 320px));
     transform: translateX(min(16.6666666667vw, 320px));
     -webkit-transition: width 2s opacity 2s;
     transition: width 2s opacity 2s;
     background-image: url(../images/contact/contact_skateboard-leaning-on-wall.png);
     background-size: cover
 }
 
 @media screen and (min-width: 768px) {
     html.static-mode .page-section.page-contact .section-image {
         position: absolute;
         right: 0;
         top: 0;
         height: 100%
     }
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-contact .section-image {
         width: 100.1303780965vw;
         height: 135.593220339vw;
         -webkit-transform: translateX(min(-3.125vw, -60px));
         transform: translateX(min(-3.125vw, -60px))
     }
 }
 
 html.static-mode .page-section.page-contact .section-image.show {
     -webkit-transform: translateX(min(16.6666666667vw, 320px));
     transform: translateX(min(16.6666666667vw, 320px))
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-contact .section-image.show {
         -webkit-transform: translate(0);
         transform: translate(0)
     }
     html.static-mode html.static-mode .page-section.page-contact .section-image.show {
         -webkit-transform: translate(0);
         transform: translate(0)
     }
 }
 
 html.static-mode .page-section.page-contact .section-image.active {
     -webkit-transform: none;
     transform: none;
     width: 100%
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .page-section.page-contact .section-image.active {
         position: fixed;
         top: 50%;
         left: 50%;
         -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
         margin: 0;
         background-color: #fff;
         width: 92%;
         height: 100%;
         z-index: 999
     }
     html.dark-mode html.static-mode .page-section.page-contact .section-image.active {
         background-color: #000
     }
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-image {
     background-color: #000
 }
 
 .page-section.page-contact .section-image img {
     width: 100%;
     height: 100%
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-image img {
     -webkit-transition: -webkit-filter .5s ease-in-out;
     transition: -webkit-filter .5s ease-in-out;
     transition: filter .5s ease-in-out;
     transition: filter .5s ease-in-out, -webkit-filter .5s ease-in-out;
     -webkit-filter: grayscale(100%);
     filter: grayscale(100%)
 }
 
 html.static-mode.dark-mode .page-section.page-contact .section-image img:hover {
     -webkit-transition: -webkit-filter .2s ease-in-out;
     transition: -webkit-filter .2s ease-in-out;
     transition: filter .2s ease-in-out;
     transition: filter .2s ease-in-out, -webkit-filter .2s ease-in-out;
     -webkit-filter: grayscale(0%);
     filter: grayscale(0%)
 }
 
 .google-map {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     z-index: -1;
     visibility: hidden;
     background-color: #fff
 }
 
 html.dark-mode .google-map {
     background-color: #000
 }
 
 .google-map.display {
     z-index: 999;
     visibility: visible
 }
 
 .google-map.show {
     opacity: 1
 }
 
 .google-map.show .btn-map {
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
     -webkit-transition-delay: 0s;
     transition-delay: 0s
 }
 
 html:not(.static-mode) .google-map {
     -webkit-transition-delay: .5s;
     transition-delay: .5s;
     -webkit-transition: opacity .5s, -webkit-transform .5s;
     transition: opacity .5s, -webkit-transform .5s;
     transition: opacity .5s, transform .5s;
     transition: opacity .5s, transform .5s, -webkit-transform .5s
 }
 
 .google-map .map-wrap {
     position: relative;
     width: 100%;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center
 }
 
 html.dark-mode .google-map .map-wrap {
     background-color: #000
 }
 
 .google-map iframe {
     border: 0;
     border-radius: 20px
 }
 
 html.dark-mode .google-map iframe {
     background-color: #000;
     mix-blend-mode: luminosity
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .google-map iframe {
         width: 100%
     }
 }
 
 .google-map .btn-map {
     position: absolute;
     left: 50%;
     -webkit-transform: translate(-50%, -100%);
     transform: translate(-50%, -100%);
     top: 100px;
     z-index: 1;
     background-color: #000;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     -webkit-transition: -webkit-transform .5s;
     transition: -webkit-transform .5s;
     transition: transform .5s;
     transition: transform .5s, -webkit-transform .5s;
     -webkit-transition-delay: .5s;
     transition-delay: .5s
 }
 
 .google-map .btn-map::before,
 .google-map .btn-map::after {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%) rotate(45deg);
     transform: translate(-50%, -50%) rotate(45deg);
     width: 2px;
     height: 20px;
     background: #fff
 }
 
 .google-map .btn-map::after {
     -webkit-transform: translate(-50%, -50%) rotate(-45deg);
     transform: translate(-50%, -50%) rotate(-45deg)
 }
 
 .google-map .btn-map:hover,
 .google-map .btn-map:focus {
     -webkit-transform: translate(-50%, 0) rotate(90deg);
     transform: translate(-50%, 0) rotate(90deg)
 }
 
 html.static-mode .google-map .map-wrap {
     position: relative;
     top: 50%;
     left: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     width: 100%;
     height: 96%;
     right: 0;
     left: auto;
     z-index: 1;
     background-color: #fff
 }
 
 html.static-mode .google-map .map-wrap iframe {
     border-radius: min(2.6041666667vw, 50px);
     height: 100%
 }
 
 html.static-mode .google-map .map-wrap .btn-map {
     position: absolute;
     left: 50%;
     top: 9%;
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
     -webkit-transition: -webkit-transform .5s;
     transition: -webkit-transform .5s;
     transition: transform .5s;
     transition: transform .5s, -webkit-transform .5s
 }
 
 html.static-mode .google-map .map-wrap .btn-map:hover,
 html.static-mode .google-map .map-wrap .btn-map:focus {
     -webkit-transform: translate(-50%, 0) rotate(90deg);
     transform: translate(-50%, 0) rotate(90deg)
 }
 
 html.static-mode.dark-mode .google-map .map-wrap {
     background-color: #000
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .google-map .btn-map {
         left: 50% !important;
         top: 0 !important;
         -webkit-transform: translate(-30px, 30px) !important;
         transform: translate(-30px, 30px) !important
     }
 }
 
 .google-map,
 .dev-tools {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     z-index: -1;
     visibility: hidden
 }
 
 html:not(.static-mode) .google-map,
 html:not(.static-mode) .dev-tools {
     -webkit-transition-delay: .5s;
     transition-delay: .5s;
     -webkit-transition: opacity .5s, -webkit-transform .5s;
     transition: opacity .5s, -webkit-transform .5s;
     transition: opacity .5s, transform .5s;
     transition: opacity .5s, transform .5s, -webkit-transform .5s
 }
 
 .google-map.display,
 .dev-tools.display {
     z-index: 999;
     visibility: visible
 }
 
 .google-map.show,
 .dev-tools.show {
     opacity: 1
 }
 
 .google-map.show .btn-tools,
 .dev-tools.show .btn-tools {
     -webkit-transform: translate(-50%, 0);
     transform: translate(-50%, 0);
     -webkit-transition-delay: 0s;
     transition-delay: 0s
 }
 
 .google-map .map-wrap,
 .dev-tools .map-wrap {
     position: relative;
     width: 100%;
     height: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center
 }
 
 .google-map .btn-tools,
 .dev-tools .btn-tools {
     position: absolute;
     left: 50%;
     -webkit-transform: translate(-50%, -100%);
     transform: translate(-50%, -100%);
     top: 100px;
     z-index: 1;
     background-color: #000;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     -webkit-transition: -webkit-transform .5s;
     transition: -webkit-transform .5s;
     transition: transform .5s;
     transition: transform .5s, -webkit-transform .5s;
     -webkit-transition-delay: .5s;
     transition-delay: .5s
 }
 
 .google-map .btn-tools::before,
 .google-map .btn-tools::after,
 .dev-tools .btn-tools::before,
 .dev-tools .btn-tools::after {
     content: "";
     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%) rotate(45deg);
     transform: translate(-50%, -50%) rotate(45deg);
     width: 2px;
     height: 20px;
     background: #fff
 }
 
 .google-map .btn-tools::after,
 .dev-tools .btn-tools::after {
     -webkit-transform: translate(-50%, -50%) rotate(-45deg);
     transform: translate(-50%, -50%) rotate(-45deg)
 }
 
 .google-map .btn-tools:hover,
 .google-map .btn-tools:focus,
 .dev-tools .btn-tools:hover,
 .dev-tools .btn-tools:focus {
     -webkit-transform: translate(-50%, 0) rotate(90deg);
     transform: translate(-50%, 0) rotate(90deg)
 }
 
 html.static-mode .google-map .map-wrap,
 html.static-mode .dev-tools .map-wrap {
     background-color: #fff
 }
 
 html.dark-mode html.static-mode .google-map .map-wrap,
 html.dark-mode html.static-mode .dev-tools .map-wrap {
     background-color: #000
 }
 
 @media screen and (max-width: 767px) {
     html.static-mode .google-map .btn-tools,
     html.static-mode .dev-tools .btn-tools {
         left: 50% !important;
         top: 0 !important;
         -webkit-transform: translate(-30px, 30px) !important;
         transform: translate(-30px, 30px) !important
     }
 }
 
 .contact-cover {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     mix-blend-mode: hard-light;
     background: linear-gradient(125deg, rgba(6, 0, 20, 0.5) 30%, rgba(4, 31, 60, 0.15) 55%, rgba(255, 171, 0, 0.3) 120%);
     opacity: 0
 }
 
 html.static-mode .contact-cover {
     display: none
 }
 
 .contact-transition {
     opacity: 0;
     -webkit-transform: translateY(10px);
     transform: translateY(10px);
     -webkit-transition: opacity .3s, -webkit-transform ease .3s;
     transition: opacity .3s, -webkit-transform ease .3s;
     transition: transform ease .3s, opacity .3s;
     transition: transform ease .3s, opacity .3s, -webkit-transform ease .3s
 }
 
 .contact-transition.show {
     opacity: 1;
     -webkit-transform: none;
     transform: none
 }
 
 .page-section .loading {
     position: fixed;
     left: 50%;
     bottom: 50px;
     margin-left: -25px;
     z-index: 999;
     opacity: 0;
     -webkit-transition: opacity .3s;
     transition: opacity .3s;
     pointer-events: none;
     bottom: -100%
 }
 
 .page-section .loading.on {
     opacity: 1;
     bottom: 50px
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading {
         margin-left: -3.259452412vw
     }
     .page-section .loading.on {
         bottom: 6.518904824vw
     }
 }
 
 .page-section .loading .circle_progress {
     position: relative;
     width: 50px;
     height: 50px
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress {
         width: 6.518904824vw;
         height: 6.518904824vw
     }
 }
 
 .page-section .loading .circle_progress:before {
     content: "";
     position: absolute;
     left: -6px;
     top: -6px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background-color: rgba(0, 0, 0, 0);
     border: 3px solid #c8c8c8
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress:before {
         left: -0.7822685789vw;
         top: -0.7822685789vw;
         width: 7.3011734029vw;
         height: 7.3011734029vw;
         border: 0.3911342894vw solid #c8c8c8
     }
 }
 
 .page-section .loading .circle_progress:after {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     content: ""
 }
 
 .page-section .loading .circle_progress .left,
 .page-section .loading .circle_progress .right {
     position: absolute;
     top: 0;
     width: 25px;
     height: 50px;
     overflow: hidden;
     z-index: 10
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress .left,
     .page-section .loading .circle_progress .right {
         width: 3.259452412vw;
         height: 6.518904824vw
     }
 }
 
 .page-section .loading .circle_progress .left .bar,
 .page-section .loading .circle_progress .right .bar {
     position: absolute;
     top: 0;
     width: 25px;
     height: 50px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background-color: #c8c8c8
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress .left .bar,
     .page-section .loading .circle_progress .right .bar {
         width: 3.259452412vw;
         height: 6.518904824vw
     }
 }
 
 .page-section .loading .circle_progress .left {
     left: 0
 }
 
 .page-section .loading .circle_progress .left .bar {
     left: 25px;
     border-top-right-radius: 50px;
     border-bottom-right-radius: 50px;
     border-left: 0;
     -webkit-transform-origin: center left;
     transform-origin: center left
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress .left .bar {
         left: 3.3246414602vw;
         border-top-right-radius: 6.518904824vw;
         border-bottom-right-radius: 6.518904824vw
     }
 }
 
 .page-section .loading .circle_progress .right {
     right: 0
 }
 
 .page-section .loading .circle_progress .right .bar {
     right: 25px;
     border-top-left-radius: 50px;
     border-bottom-left-radius: 50px;
     border-right: 0;
     -webkit-transform-origin: center right;
     transform-origin: center right
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress .right .bar {
         right: 3.3246414602vw;
         border-top-left-radius: 6.518904824vw;
         border-bottom-left-radius: 6.518904824vw
     }
 }
 
 .page-section .loading .circle_progress .value {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     font-size: 5px;
     color: #888;
     line-height: 50px;
     text-align: center;
     position: absolute
 }
 
 @media screen and (max-width: 767px) {
     .page-section .loading .circle_progress .value {
         width: 6.518904824vw;
         height: 6.518904824vw;
         font-size: 0.6518904824vw;
         line-height: 6.518904824vw
     }
 }
 
 *::-moz-selection {
     background: var(--primary-pink);
     color: #fff
 }
 
 *::selection {
     background: var(--primary-pink);
     color: #fff
 }
 
 html,
 body {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overscroll-behavior-y: none
 }
 
 html .static-mode,
 body .static-mode {
     display: none
 }
 
 html.static-mode html .sticky-wrap,
 html.static-mode body .sticky-wrap {
     opacity: 1;
     height: auto !important;
     min-height: auto !important
 }
 
 html.static-mode html .sticky-content,
 html.static-mode body .sticky-content {
     position: relative;
     height: auto !important
 }
 
 html.static-mode html .static-mode,
 html.static-mode body .static-mode {
     display: block
 }
 
 html.static-mode html .motion-mode,
 html.static-mode body .motion-mode {
     display: none
 }
 
 html.mouse-hover,
 body.mouse-hover {
     cursor: pointer
 }
 
 html.top #fave,
 body.top #fave {
     visibility: hidden
 }
 
 html:not(.static-mode) {
     overflow: hidden
 }
 
 html:not(.static-mode).hide-cursor * {
     cursor: none
 }
 
 html .lang-en {
     display: none
 }
 
 html.lang-en .lang-en {
     display: block
 }
 
 html .lang-ko {
     display: none
 }
 
 html.lang-ko .lang-ko {
     display: block
 }
 
 body,
 textarea,
 input,
 select,
 textarea,
 button,
 a {
     font-family: "Helvetica Neue", "Noto Sans KR", sans-serif;
     color: #fff;
     line-height: 1.2;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale
 }
 
 .hidden {
     visibility: hidden
 }
 
 .screenshot {
     position: fixed;
     left: 0;
     top: 0;
     width: 0;
     height: 0;
     visibility: hidden
 }
 
 #fave {
     position: fixed;
     top: 0;
     left: 0;
     outline: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     pointer-events: none;
     -webkit-touch-callout: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     z-index: 0
 }
 
 html.static-mode #fave {
     display: none
 }
 
 .screen-canvas {
     position: absolute;
     left: 50%;
     bottom: 0;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%)
 }
 
 .screen-canvas-wrap {
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background-color: #fff;
     opacity: 0;
     overflow: hidden;
     pointer-events: none;
     z-index: 1
 }
 
 html.dark-mode .screen-canvas-wrap {
     background-color: #000
 }
 
 .blind {
     position: absolute;
     clip: rect(0 0 0 0);
     font-size: 1px;
     color: rgba(0, 0, 0, 0);
     width: 1px;
     height: 1px;
     margin: -1px;
     overflow: hidden
 }
 
 .dg.a {
     margin-right: 10vw !important
 }
 
 .dg.ac {
     z-index: 100 !important
 }
 
 .lang-ko {
     font-family: "Helvetica Neue", "Noto Sans KR", sans-serif;
     font-weight: 400;
 }
 
 @media screen and (max-width: 767px) {
     .header {
         padding: 6.258148631vw;
     }
     .header .mode {
         height: 5.8670143416vw;
     }
     .header .mode-wrap {
         margin-right: 2.6075619296vw;
         margin-top: 0;
         border-radius: 80px;
     }
     .header .mode .nav-btn {
         width: 5.2151238592vw;
         height: 5.2151238592vw;
         background-size: contain;
     }
     .header .nav-menu {
         width: 6.258148631vw;
         height: 6.258148631vw;
     }
     .header .nav-menu span.nav-menu--toggle {
         width: 4.5632333768vw;
     }
     .header .nav-menu span.nav-menu--toggle::before,
     .header .nav-menu span.nav-menu--toggle::after {
         width: 4.5632333768vw;
     }
     .header .nav-menu span.nav-menu--toggle::before {
         margin-top: -7px;
     }
     .header .nav-menu span.nav-menu--toggle::after {
         margin-top: 7px;
     }
     #faveHeader .header-wrap {
         position: static;
         padding: 6.258148631vw;
     }
     #faveHeader .logo {
         width: 15.6453715776vw;
         height: 5.8670143416vw;
     }
     #faveHeader .nav-panel {
         min-height: 139.5045632334vw;
     }
     #faveHeader .nav-text-rolling {
         padding: 2.8683181226vw 0;
     }
     #faveHeader .nav-text-rolling .text {
         height: 8.4745762712vw;
         font-size: 8.3441981747vw;
         line-height: 1.35;
     }
     #faveHeader .nav-text-rolling .text .eyes {
         width: 11.3807040417vw;
         height: 8.0573663625vw;
         margin-right: 1.5645371578vw;
     }
     #faveHeader .nav-text-rolling .text .star {
         width: 8.5358539765vw;
         height: 8.4602346806vw;
         margin-right: 1.5645371578vw;
     }
     #faveHeader .nav-text-rolling .text .boom {
         width: 6.6179921773vw;
         height: 6.8787483703vw;
         margin: 1.0430247718vw 1.5645371578vw 0 1.5645371578vw;
     }
     #faveHeader .nav-text-rolling .text .hart {
         width: 9.778357236vw;
         height: 9.778357236vw;
         margin-top: -1.0430247718vw;
         margin-right: 1.5645371578vw;
     }
     #faveHeader .nav-wrap {
         position: relative;
         height: 100%;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-align: start;
         -ms-flex-align: start;
         align-items: flex-start;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
         padding: 15.6453715776vw 5.2151238592vw 4.1720990874vw;
         margin: 0;
     }
     #faveHeader .nav-wrap .nav-wrap02 {
         height: 100%;
     }
     #faveHeader .nav-wrap .text_lang-wrap {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: reverse;
         -ms-flex-direction: column-reverse;
         flex-direction: column-reverse;
     }
     #faveHeader .nav-wrap .footer-wrap {
         margin-top: 7.8226857888vw;
     }
     #faveHeader .nav-wrap .footer-wrap .contact-list {
         margin-bottom: 1.0430247718vw;
     }
     #faveHeader .nav-wrap .footer-wrap .contact-list a {
         font-size: 3.3898305085vw;
         margin-right: 3.3898305085vw;
     }
     #faveHeader .nav-wrap .text-wrap {
         position: static;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-align: baseline;
         -ms-flex-align: baseline;
         align-items: baseline;
         height: 100%;
     }
     #faveHeader .nav-link {
         width: 100%;
         max-height: 720px;
         height: auto;
         margin-bottom: 0;
     }
     #faveHeader .nav-link .link {
         margin-bottom: 3.1290743155vw;
     }
     #faveHeader .nav-link .link:last-child {
         margin-bottom: 0;
     }
     #faveHeader .nav-link .link a {
         font-size: 8.3441981747vw;
         letter-spacing: 0.3911342894vw;
     }
     #faveHeader .nav-figure {
         display: none;
     }
     #faveHeader .nav-figure .banner {
         width: auto;
     }
     #faveHeader .nav-figure .nav-image {
         width: 92.1773142112vw;
     }
 }
 
 @media screen and (min-width: 768px)and (max-width: 1023px) {
     .header {
         padding: 4.6920821114vw;
     }
     .header .mode {
         height: 4.3988269795vw;
     }
     .header .mode-wrap {
         margin-right: 1.9550342131vw;
         margin-top: 0;
     }
     .header .mode .nav-btn {
         width: 2.7370478983vw;
         height: 2.7370478983vw;
         background-size: contain;
     }
     .header .nav-menu {
         width: 2.7370478983vw;
         height: 2.7370478983vw;
     }
     .header .nav-menu span.nav-menu--toggle {
         width: 2.7370478983vw;
     }
     .header .nav-menu span.nav-menu--toggle::before,
     .header .nav-menu span.nav-menu--toggle::after {
         width: 2.7370478983vw;
     }
     .header .nav-menu.on span.nav-menu--toggle {
         width: 2.7370478983vw;
     }
     .header .nav-menu.on span.nav-menu--toggle::before,
     .header .nav-menu.on span.nav-menu--toggle::after {
         width: 2.7370478983vw;
     }
     #faveHeader .header-wrap {
         padding: 4.6920821114vw;
     }
     #faveHeader .logo {
         width: 11.7302052786vw;
         height: 4.3988269795vw;
     }
     #faveHeader .nav-panel {
         min-height: 97.7517106549vw;
     }
     #faveHeader .nav-text-rolling {
         padding: 2.1505376344vw 0;
     }
     #faveHeader .nav-text-rolling .text {
         font-size: 6.5493646139vw;
         height: 6.5493646139vw;
         line-height: 1.3;
     }
     #faveHeader .nav-text-rolling .text .eyes {
         width: 8.5327468231vw;
         height: 6.0410557185vw;
         margin-right: 1.1730205279vw;
     }
     #faveHeader .nav-text-rolling .text .star {
         width: 6.3998044966vw;
         height: 6.3431085044vw;
         margin-right: 1.1730205279vw;
     }
     #faveHeader .nav-text-rolling .text .boom {
         width: 4.9618768328vw;
         height: 5.1573802542vw;
         margin: 0.7820136852vw 1.1730205279vw 0 1.1730205279vw;
     }
     #faveHeader .nav-text-rolling .text .hart {
         width: 7.3313782991vw;
         height: 7.3313782991vw;
         margin-top: -0.7820136852vw;
         margin-right: 1.1730205279vw;
     }
     #faveHeader .nav-wrap .nav-wrap02 {
         height: 51.4173998045vw;
     }
     #faveHeader .nav-wrap .footer-wrap .contact-list {
         margin-bottom: 0.9775171065vw;
     }
     #faveHeader .nav-wrap .footer-wrap .contact-list a {
         font-size: 1.9550342131vw;
         margin-right: 1.9550342131vw;
     }
     #faveHeader .nav-wrap .text-wrap {
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-align: baseline;
         -ms-flex-align: baseline;
         align-items: baseline;
     }
     #faveHeader .nav-link .link a {
         font-size: 5.0830889541vw;
         letter-spacing: 0.293255132vw;
         -webkit-transform: translate3d(0px, 200%, 0px);
         transform: translate3d(0px, 200%, 0px);
     }
     #faveHeader .nav-figure .bannerWrap {
         height: 51.4173998045vw;
     }
     #faveHeader .nav-figure .banner {
         width: 34.2130987292vw;
         height: 100%;
     }
     #faveHeader .nav-figure .nav-image {
         height: 100%;
         left: 50%;
         -webkit-transform: translateX(-50%);
         transform: translateX(-50%);
     }
 }
 
 /* Raw to Real Header Styles */
 /* .rtr-header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 1000;
     background: transparent;
     padding: 20px 40px;
 
 } */
 .rtr-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 40px; 
    transition: all 0.3s ease;
    /* Allow scroll events to pass through header to page content */
    pointer-events: none;
}

/* Scroll hone pe effect */
.rtr-header.scrolled {
    background: rgba(0, 0, 0, 0.85);
    padding: 15px 40px; /* header thoda chhota dikhaye */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

 
 .rtr-header-container {
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     position: relative;
     /* Re-enable pointer events for interactive elements */
     pointer-events: auto;
 }
 
 .rtr-logo-container {
     display: flex;
     align-items: center;
     gap: 12px;
     z-index: 1001;
 }

 .rtr-logo-container {
     position: relative;
     display: inline-block;
 }
 
.rtr-logo-img {
    width: 140px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 1;
}
 
 /* When on white/light background, make logo text black */
 .rtr-header.logo-on-light-bg .rtr-logo-img {
     filter: brightness(0) invert(0); /* Make logo black */
 }
 
 /* When on dark background, keep logo as is (white) */
 .rtr-header.logo-on-dark-bg .rtr-logo-img {
     filter: none; /* No filter, keep original logo colors */
 }
 
 .rtr-rocket-icon {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
 }
 
 .rtr-logo-text {
     font-size: 20px;
     font-weight: 700;
     color: #ffffff;
     letter-spacing: 0.5px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
 /* Hamburger Menu Button */
 .rtr-hamburger {
     display: none;
     flex-direction: column;
     justify-content: space-around;
     width: 30px;
     height: 30px;
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
     z-index: 1001;
     position: relative;
 }
 
 .rtr-hamburger-line {
     width: 100%;
     height: 3px;
     background: #ffffff;
     border-radius: 3px;
     transition: all 0.3s ease;
     transform-origin: center;
 }
 
 .rtr-hamburger.active .rtr-hamburger-line:nth-child(1) {
     transform: rotate(45deg) translate(8px, 8px);
 }
 
 .rtr-hamburger.active .rtr-hamburger-line:nth-child(2) {
     opacity: 0;
 }
 
 .rtr-hamburger.active .rtr-hamburger-line:nth-child(3) {
     transform: rotate(-45deg) translate(8px, -8px);
 }
 
 .rtr-header-nav {
     display: flex;
     align-items: center;
     gap: 32px;
     position: relative;
 }
 
 /* Mobile overlay when menu is open */
 .rtr-menu-overlay {
     display: none;
 }
 
 @media (max-width: 768px) {
     .rtr-menu-overlay {
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.7);
         z-index: 999;
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.3s ease, visibility 0.3s ease;
     }
 
     .rtr-menu-overlay.active {
         opacity: 1;
         visibility: visible;
     }
 
 }
 
 .rtr-nav-link {
     color: #B0B0B0;
     text-decoration: none;
     font-size: 16px;
     font-weight: 400;
     transition: color 0.3s ease;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
 .rtr-nav-link:hover {
     color: #ffffff;
 }
.rtr-btn-quote {
    background: #000000;
    color: #ffffff;
    border: 2px solid var(--brand-purple);
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5),
                0 0 40px rgba(139, 92, 246, 0.3),
                inset 0 0 20px rgba(139, 92, 246, 0.1);
    position: relative;
    overflow: visible;
    /* Ensure button doesn't block scroll events outside its bounds */
    touch-action: manipulation;
}
 
 .rtr-btn-quote::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--brand-purple), var(--brand-purple-light), var(--brand-purple));
    border-radius: 8px;
    z-index: -1;
    opacity: 0.6;
    filter: blur(8px);
    transition: opacity 0.3s ease, filter 0.3s ease;
 }
 
 .rtr-btn-quote:hover {
    background: #1a1a1a;
    border-color: var(--brand-purple-light);
    /* Box-shadow animation will override this, but we keep it for fallback */
    transform: translateY(-2px);
 }
 
 /* Enhanced pulse on hover - animation continues with stronger effect */
 .rtr-btn-quote:hover {
    animation: pulseButtonShadowHover 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 @keyframes pulseButtonShadowHover {
    0% {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.7),
                    0 0 60px rgba(139, 92, 246, 0.4),
                    inset 0 0 30px rgba(139, 92, 246, 0.15),
                    0 0 0 0 rgba(139, 92, 246, 0.8),
                    0 0 0 0 rgba(139, 92, 246, 0.6),
                    0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.7),
                    0 0 60px rgba(139, 92, 246, 0.4),
                    inset 0 0 30px rgba(139, 92, 246, 0.15),
                    0 0 0 12px rgba(139, 92, 246, 0.5),
                    0 0 0 24px rgba(139, 92, 246, 0.4),
                    0 0 0 36px rgba(139, 92, 246, 0.3);
    }
    100% {
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.7),
                    0 0 60px rgba(139, 92, 246, 0.4),
                    inset 0 0 30px rgba(139, 92, 246, 0.15),
                    0 0 0 25px rgba(139, 92, 246, 0),
                    0 0 0 50px rgba(139, 92, 246, 0),
                    0 0 0 75px rgba(139, 92, 246, 0);
    }
 }
 
 .rtr-btn-quote:hover::before {
    opacity: 0.8;
    filter: blur(12px);
 }
 
 .rtr-btn-quote:active {
    transform: translateY(0);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5),
                0 0 30px rgba(139, 92, 246, 0.3),
                inset 0 0 15px rgba(139, 92, 246, 0.1);
 }
 
 /* Animated Pulse Lines Effect - Continuous Expanding Rings */
.rtr-btn-quote::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border: 2px solid var(--brand-purple);
    border-radius: 10px;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
    animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    pointer-events: none !important;
    touch-action: none;
    z-index: -1;
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.8),
                0 0 0 0 rgba(139, 92, 246, 0.6),
                0 0 0 0 rgba(139, 92, 246, 0.4);
}
 
 /* Keyframe Animation for Pulse Rings - Expanding Border with Shadow */
 @keyframes pulseRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.8),
                    0 0 0 0 rgba(139, 92, 246, 0.6),
                    0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
        box-shadow: 0 0 0 15px rgba(139, 92, 246, 0),
                    0 0 0 30px rgba(139, 92, 246, 0),
                    0 0 0 45px rgba(139, 92, 246, 0);
    }
 }
 
 /* Enhanced pulse effect with multiple overlapping rings */
 .rtr-btn-quote::after {
    animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 /* Create second pulse ring using box-shadow animation on the button itself */
 /* This preserves original box-shadow and adds expanding pulse rings */
 .rtr-btn-quote {
    animation: pulseButtonShadow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 @keyframes pulseButtonShadow {
    0% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5),
                    0 0 40px rgba(139, 92, 246, 0.3),
                    inset 0 0 20px rgba(139, 92, 246, 0.1),
                    0 0 0 0 rgba(139, 92, 246, 0.7),
                    0 0 0 0 rgba(139, 92, 246, 0.5),
                    0 0 0 0 rgba(139, 92, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5),
                    0 0 40px rgba(139, 92, 246, 0.3),
                    inset 0 0 20px rgba(139, 92, 246, 0.1),
                    0 0 0 10px rgba(139, 92, 246, 0.4),
                    0 0 0 20px rgba(139, 92, 246, 0.3),
                    0 0 0 30px rgba(139, 92, 246, 0.2);
    }
    100% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.5),
                    0 0 40px rgba(139, 92, 246, 0.3),
                    inset 0 0 20px rgba(139, 92, 246, 0.1),
                    0 0 0 20px rgba(139, 92, 246, 0),
                    0 0 0 40px rgba(139, 92, 246, 0),
                    0 0 0 60px rgba(139, 92, 246, 0);
    }
 }
 
 /* Responsive Logo Styles */
 @media (max-width: 1200px) {
     .rtr-logo-img {
         width: 260px;
         max-height: 140px;
     }
 }

 @media (max-width: 968px) {
     .rtr-logo-img {
         width: 210px;
         max-height: 120px;
     }
 }
 
 /* Mobile Styles */
 @media (max-width: 768px) {
     .rtr-header {
         padding: 16px 20px;
     }

     .rtr-logo-img {
         width: 170px;
         max-height: 100px;
     }
 
     .rtr-hamburger {
         display: flex;
     }
 
     .rtr-header-nav {
         position: fixed;
         top: 0;
         right: -100%;
         width: 280px;
         max-width: 85vw;
         height: 100vh;
         background: #000000;
         flex-direction: column;
         align-items: flex-start;
         justify-content: flex-start;
         padding: 80px 30px 30px;
         gap: 0;
         transition: right 0.3s ease, box-shadow 0.3s ease, visibility 0.3s ease, opacity 0.3s ease;
         box-shadow: none;
         z-index: 1000;
         overflow-y: auto;
         overflow-x: hidden;
         visibility: hidden;
         opacity: 0;
         pointer-events: none;
     }
 
     .rtr-header-nav.active {
         right: 0;
         box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
         visibility: visible;
         opacity: 1;
         pointer-events: auto;
     }
 
     .rtr-nav-link {
         width: 100%;
         padding: 16px 0;
         font-size: 18px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         display: block;
     }
 
     .rtr-nav-link:hover {
         color: var(--primary-pink);
     }
 
     .rtr-btn-quote {
         width: 100%;
         margin-top: 20px;
         padding: 14px 24px;
         font-size: 16px;
         display: block;
     }
 }
 
 @media (max-width: 480px) {
     .rtr-header {
         padding: 14px 16px;
     }

     .rtr-logo-img {
         width: 100px;
         max-height: 60px;
     }
 
     .rtr-logo-text {
         font-size: 18px;
     }
 
     .rtr-rocket-icon {
         width: 22px;
         height: 22px;
     }
 
     .rtr-hamburger {
         width: 28px;
         height: 28px;
     }
 
     .rtr-header-nav {
         width: 100%;
         right: -100%;
     }
 }
 
 /* Hide fave icon only on index page where hero section is present */
 /* This targets the logo-circle that links to page-index (where hero section is) */
 .page-container > .logo-circle[data-jump="page-index"] {
     display: none !important;
 }
 
 /* Authentication and Quote Form Modal Styles */
 .rtr-modal {
     display: none;
     position: fixed;
     z-index: 10000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     align-items: center;
     justify-content: center;
     animation: fadeIn 0.3s ease;
 }
 
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
 
.rtr-modal-content {
    background-color: #000000;
    margin: auto;
    padding: 40px;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideDown 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
 
 @keyframes slideDown {
     from {
         transform: translateY(-50px);
         opacity: 0;
     }
     to {
         transform: translateY(0);
         opacity: 1;
     }
 }
 
.rtr-modal-close {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    line-height: 1;
    transition: color 0.3s ease;
    z-index: 10002;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
}

.rtr-modal-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}
 
.rtr-auth-container h2,
.rtr-quote-container h2 {
    color: #ffffff;
    margin-bottom: 12px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.rtr-quote-description,
.rtr-auth-description {
    color: #B0B0B0;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 30px;
    font-weight: 400;
}

.rtr-auth-container {
    width: 100%;
}

/* Auth Steps */
.rtr-auth-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.rtr-auth-step.active {
    display: block;
}

.rtr-error-text {
    color: #ef4444;
    font-size: 14px;
    margin-top: 8px;
    min-height: 20px;
}

.rtr-form-help {
    display: block;
    color: #888;
    font-size: 12px;
    margin-top: 4px;
}

.rtr-btn-link {
    background: transparent;
    border: none;
    color: var(--primary-pink);
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
    padding: 8px 0;
    margin-top: 12px;
    width: 100%;
    transition: color 0.3s ease;
}

.rtr-btn-link:hover {
    color: var(--primary-pink-light);
}
 
 .rtr-auth-tabs {
     display: flex;
     gap: 0;
     margin-bottom: 30px;
     border-bottom: none;
     background: rgba(61, 26, 26, 0.05);
     border-radius: 8px;
     padding: 4px;
 }
 
 .rtr-tab-btn {
     background: transparent;
     border: none;
     color: #B0B0B0;
     padding: 12px 24px;
     cursor: pointer;
     font-size: 16px;
     font-weight: 500;
     transition: all 0.3s ease;
     border-radius: 6px;
     flex: 1;
     text-align: center;
 }
 
 .rtr-tab-btn.active {
     background: #1a1a1a;
     color: #ffffff;
     font-weight: 600;
 }
 
 .rtr-tab-btn:not(.active):hover {
     color: #ffffff;
     background: rgba(255, 255, 255, 0.05);
 }
 
 .rtr-auth-tab {
     display: none;
 }
 
 .rtr-auth-tab.active {
     display: block;
 }
 
 .rtr-form-group {
     margin-bottom: 20px;
 }

.rtr-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.rtr-form-row .rtr-form-group {
    flex: 1;
    margin-bottom: 0;
}
 
 .rtr-form-group label {
     display: block;
     color: #ffffff;
     margin-bottom: 8px;
     font-size: 14px;
     font-weight: 500;
 }
 
 .rtr-form-group input,
 .rtr-form-group select,
 .rtr-form-group textarea {
     width: 100%;
     padding: 12px 16px;
     background: #2a2a2a;
     border: 1px solid #444;
    border-radius: 8px;
     color: #ffffff;
     font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: all 0.3s ease;
     box-sizing: border-box;
 }

.rtr-form-group input::placeholder,
.rtr-form-group textarea::placeholder {
    color: #888;
    opacity: 1;
}
 
.rtr-form-group input:focus,
.rtr-form-group select:focus,
.rtr-form-group textarea:focus {
    outline: none;
    border-color: var(--primary-pink);
    box-shadow: 0 0 0 3px rgba(237, 45, 133, 0.1);
}

/* Remove any error/success border styling */
.rtr-form-group input.error,
.rtr-form-group select.error,
.rtr-form-group textarea.error {
    border-color: #444 !important;
}

.rtr-form-group input.success,
.rtr-form-group select.success,
.rtr-form-group textarea.success {
    border-color: #444 !important;
}
 
 .rtr-form-group textarea {
     resize: vertical;
     min-height: 100px;
 }
 
.rtr-btn-submit {
    width: 100%;
    padding: 16px 24px;
    background: var(--primary-pink);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-shadow: 0 4px 12px rgba(237, 45, 133, 0.3);
}

.rtr-btn-submit:hover {
    background: var(--primary-pink-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(237, 45, 133, 0.4);
}

.rtr-btn-submit:active {
    transform: translateY(0);
}
 
/* Toast Notification Styles */
.rtr-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.rtr-toast {
    background: #1a1a1a;
    color: #ffffff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.rtr-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.rtr-toast-success {
    border-left: 4px solid #10b981;
}

.rtr-toast-error {
    border-left: 4px solid #ef4444;
}

.rtr-toast-success::before {
    content: '✓';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}

.rtr-toast-error::before {
    content: '✕';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #ef4444;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
}

.rtr-toast-success,
.rtr-toast-error {
    padding-left: 48px;
}

@media (max-width: 768px) {
    .rtr-toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .rtr-toast {
        min-width: auto;
        max-width: 100%;
        transform: translateY(-100px);
    }

    .rtr-toast.show {
        transform: translateY(0);
    }
}
 
@media (max-width: 768px) {
    .rtr-modal-content {
        width: 95%;
        padding: 30px 20px;
        max-height: 85vh;
    }

    .rtr-form-row {
        flex-direction: column;
        gap: 0;
    }

    .rtr-form-row .rtr-form-group {
        margin-bottom: 20px;
    }

    .rtr-quote-container h2 {
        font-size: 24px;
    }

    .rtr-quote-description {
        font-size: 14px;
        margin-bottom: 25px;
    }

    .rtr-auth-tabs {
        flex-direction: row;
        gap: 0;
    }

    .rtr-tab-btn {
        flex: 1;
        text-align: center;
        padding: 10px 16px;
        font-size: 14px;
    }
}
 
 /* Raw to Real Hero Section Styles */
.rtr-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    /* overflow: hidden; */
    padding: 0;
    margin: 0;
    border: none;
    transform: translateZ(0);
    contain: strict;
    -webkit-transform: translateZ(0);
    scroll-margin-top: 80px;
    /* Optimized for smooth scrolling */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    isolation: isolate;
}

/* Subtle overlay for text readability */
.rtr-hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 2;
    pointer-events: none;
 }
 
.rtr-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    overflow: hidden;
    transform: translateZ(0);
    contain: layout style paint;
    -webkit-transform: translateZ(0);
    isolation: isolate;
    /* Optimized for performance */
    will-change: auto;
    backface-visibility: hidden;
}

/* WebP Background Layer - Optimized for performance */
.rtr-hero-bg-gif {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: url('../videos/bg1.gif') center center / cover no-repeat;
    opacity: 0.4;
    z-index: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: strict;
    /* No will-change needed for static image */
}
 
/* Static Background - Animation disabled for smooth performance */
 .rtr-hero-bg::before {
     content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse 800px 600px at 20% 30%, rgba(237, 45, 133, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 700px 800px at 80% 70%, rgba(139, 92, 246, 0.1) 0%, transparent 65%);
    background-size: 100% 100%;
    opacity: 0.5;
    /* Animation disabled - causes hanging */
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: strict;
    z-index: 1;
}

/* Static Light Beams - Animation disabled for smooth performance */
.rtr-hero-bg::after {
     content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-image: 
        linear-gradient(90deg, transparent 0%, rgba(237, 45, 133, 0.08) 50%, transparent 100%);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    opacity: 0.3;
    /* Animation disabled - causes hanging */
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: strict;
    z-index: 2;
}

/* Additional animated layers using child elements */
.rtr-hero-bg-animated {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Static cloud layer - Animation disabled for smooth performance */
.rtr-hero-bg-animated::before {
     content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 150%;
    height: 150%;
    background: radial-gradient(ellipse 600px 500px at 60% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
    /* Animation disabled - causes hanging */
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: strict;
}

/* Removed second cloud layer for performance */
.rtr-hero-bg-animated::after {
    display: none;
}

/* Static Gradient Wave - Animation disabled for smooth performance */
.rtr-hero-gradient-wave-1 {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 150%;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(237, 45, 133, 0.06) 0%, transparent 50%);
    /* Animation disabled - causes hanging */
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: strict;
}

/* Hide other wave layers for performance */
.rtr-hero-gradient-wave-2,
.rtr-hero-gradient-wave-3 {
    display: none;
}

/* Removed morphing blobs for performance - too heavy */
.rtr-hero-morphing-blob-1,
.rtr-hero-morphing-blob-2 {
    display: none;
}

/* Particles completely disabled for smooth performance */
.rtr-hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    display: none; /* Completely disabled - causes hanging */
}

.rtr-hero-particles::before {
    display: none; /* Disabled for performance */
}

/* Removed particles::after for performance */
.rtr-hero-particles::after {
    display: none;
}

/* Optimized Animation - Simplified for GPU acceleration */
@keyframes rtr-swirlNebula {
    0%, 100% {
        transform: translate(0%, 0%) translateZ(0);
    }
    50% {
        transform: translate(-5%, -5%) translateZ(0);
    }
}


/* Optimized Light Beam Animation - GPU accelerated */
@keyframes rtr-lightBeamsFlow {
    0% {
        transform: translateX(0) translateZ(0);
    }
    100% {
        transform: translateX(-50%) translateZ(0);
    }
}

/* Smooth opacity pulsing for depth - Enhanced */

/* Optimized Float Animation - Simplified for performance */
@keyframes rtr-float1 {
    0%, 100% {
        transform: translate(0%, 0%) translateZ(0);
    }
    50% {
        transform: translate(-10%, 10%) translateZ(0);
    }
}

/* Removed rtr-float2 - not needed */

/* Blob Morphing Animations - Shape Morphing */
@keyframes rtr-blobMorph1 {
    0% {
        border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    }
    25% {
        border-radius: 60% 40% 50% 50% / 40% 50% 60% 50%;
    }
    50% {
        border-radius: 40% 60% 70% 30% / 60% 40% 50% 60%;
    }
    75% {
        border-radius: 50% 50% 40% 60% / 50% 60% 50% 40%;
    }
    100% {
        border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    }
}

@keyframes rtr-blobMorph2 {
    0% {
        border-radius: 60% 40% 50% 50% / 40% 50% 60% 50%;
    }
    25% {
        border-radius: 40% 60% 70% 30% / 60% 40% 50% 60%;
    }
    50% {
        border-radius: 50% 50% 40% 60% / 50% 60% 50% 40%;
    }
    75% {
        border-radius: 30% 70% 60% 40% / 50% 60% 40% 50%;
    }
    100% {
        border-radius: 60% 40% 50% 50% / 40% 50% 60% 50%;
    }
}

/* Continuous Rotation */
@keyframes rtr-rotateContinuous {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Wave Flow Animations */
/* Optimized Wave Flow Animation - GPU accelerated, simplified */
@keyframes rtr-waveFlow1 {
    0%, 100% {
        transform: translateX(0%) translateZ(0);
    }
    50% {
        transform: translateX(-20%) translateZ(0);
    }
}

/* Removed - not used */
@keyframes rtr-waveFlow2 {
    0% {
        transform: rotate(-20deg) translateX(0%) translateY(0%);
    }
    50% {
        transform: rotate(-15deg) translateX(25%) translateY(-15%);
    }
    100% {
        transform: rotate(-20deg) translateX(0%) translateY(0%);
    }
}

/* Removed - not used */
@keyframes rtr-waveFlow3 {
    0% {
        transform: rotate(10deg) translateX(0%) translateY(0%);
    }
    50% {
        transform: rotate(5deg) translateX(-20%) translateY(20%);
    }
    100% {
        transform: rotate(10deg) translateX(0%) translateY(0%);
    }
}


/* Blob Float Animations */
/* Removed - blobs not used */
@keyframes rtr-blobFloat1 {
    0% {
        transform: translate(0%, 0%);
    }
    33% {
        transform: translate(-20%, 30%);
    }
    66% {
        transform: translate(15%, -25%);
    }
    100% {
        transform: translate(0%, 0%);
    }
}

/* Removed - blobs not used */
@keyframes rtr-blobFloat2 {
    0% {
        transform: translate(0%, 0%);
    }
    33% {
        transform: translate(25%, -20%);
    }
    66% {
        transform: translate(-18%, 28%);
    }
    100% {
        transform: translate(0%, 0%);
    }
}

/* Blob Rotation */
@keyframes rtr-blobRotate1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rtr-blobRotate2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/* Enhanced Particles Animation - More Dynamic Movement */
@keyframes rtr-particlesFloat {
    0% {
        transform: translateY(110vh) translateX(0) scale(0.8);
        opacity: 0;
    }
    5% {
        opacity: 0.6;
    }
    15% {
        transform: translateY(80vh) translateX(20px) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(50vh) translateX(-15px) scale(1.1);
        opacity: 0.9;
    }
    85% {
        transform: translateY(20vh) translateX(30px) scale(1);
        opacity: 0.8;
    }
    95% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(-150px) translateX(60px) scale(0.9);
        opacity: 0;
    }
}

/* Particles Pulsing Animation */
@keyframes rtr-particlesPulse {
     0%, 100% {
        opacity: 1;
        transform: scale(1);
     }
     50% {
        opacity: 0.7;
        transform: scale(0.95);
     }
 }
 
 .rtr-hero-content {
     position: relative;
    z-index: 10;
     max-width: 900px;
     text-align: center;
     color: #ffffff;
    animation: rtr-contentFadeIn 1.5s ease-out;
}

@keyframes rtr-contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
 }
 
 .rtr-hero-headline {
     font-size: 64px;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 24px;
     color: #ffffff;
     letter-spacing: -1px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 
        0 0 20px rgba(237, 45, 133, 0.5),
        0 0 40px rgba(237, 45, 133, 0.3),
        0 0 60px rgba(237, 45, 133, 0.2);
    animation: rtr-headlineGlow 3s ease-in-out infinite;
}

@keyframes rtr-headlineGlow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(237, 45, 133, 0.5),
            0 0 40px rgba(237, 45, 133, 0.3),
            0 0 60px rgba(237, 45, 133, 0.2);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(237, 45, 133, 0.6),
            0 0 50px rgba(139, 92, 246, 0.4),
            0 0 70px rgba(237, 45, 133, 0.3),
            0 0 20px rgba(139, 92, 246, 0.5);
    }
 }
 
 .rtr-hero-description {
     font-size: 18px;
     line-height: 1.6;
     margin-bottom: 48px;
    color: #E5E7EB;
     max-width: 700px;
     margin-left: auto;
     margin-right: auto;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: rtr-contentFadeIn 1.5s ease-out 0.3s both;
 }
 
 .rtr-hero-buttons {
     display: flex;
     gap: 24px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 20px;
    animation: rtr-contentFadeIn 1.5s ease-out 0.5s both;
 }
 
 .rtr-btn-watch-story {
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
     color: #ffffff;
     border: none;
     padding: 18px 36px;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 10px;
     transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    box-shadow: 0 6px 20px rgba(237, 45, 133, 0.4);
     position: relative;
     overflow: hidden;
     /* Performance optimizations */
     transform: translate3d(0, 0, 0);
     will-change: transform;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     contain: layout style paint;
 }
 
 .rtr-btn-watch-story::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     transform: translate3d(-50%, -50%, 0);
     transition: width 0.6s ease, height 0.6s ease;
     will-change: width, height;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }
 
 .rtr-btn-watch-story:hover::before {
     width: 300px;
     height: 300px;
 }
 
 .rtr-btn-watch-story:hover {
    background: linear-gradient(135deg, var(--primary-pink-light) 0%, var(--primary-pink) 100%);
     transform: translate3d(0, -3px, 0) scale(1.02);
    box-shadow: 0 12px 40px rgba(237, 45, 133, 0.6), 0 0 30px rgba(237, 45, 133, 0.4);
    /* Optimized: Slower animation (3s instead of 2s) and reduced frequency for better performance */
    animation: rtr-buttonPulse 3s ease-in-out infinite;
    /* Pause animation when not in viewport for better performance */
    animation-play-state: running;
}

@keyframes rtr-buttonPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 12px 40px rgba(237, 45, 133, 0.6), 0 0 30px rgba(237, 45, 133, 0.4);
    }
    50% {
        opacity: 0.95;
        box-shadow: 0 12px 45px rgba(237, 45, 133, 0.7), 0 0 35px rgba(237, 45, 133, 0.5);
    }
 }
 
 .rtr-btn-watch-story:active {
     transform: translate3d(0, -1px, 0) scale(1);
     will-change: auto;
 }
 
 .rtr-arrow-icon {
     width: 16px;
     height: 16px;
     transform: translate3d(0, 0, 0) rotate(90deg);
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     z-index: 1;
     /* Performance optimizations */
     will-change: transform;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     /* Use GPU acceleration */
     transform-style: preserve-3d;
 }
 
 .rtr-btn-watch-story:hover .rtr-arrow-icon {
     transform: translate3d(0, 3px, 0) rotate(90deg);
 }
 
 /* Reset will-change when not hovering for better performance */
 .rtr-btn-watch-story:not(:hover) .rtr-arrow-icon {
     will-change: auto;
 }
 
 .rtr-btn-quote-hero {
     background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
     color: #ffffff;
     border: 2px solid rgba(255, 255, 255, 0.1);
     padding: 18px 36px;
     border-radius: 10px;
     font-size: 16px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
     position: relative;
     overflow: hidden;
 }
 
 .rtr-btn-quote-hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
     transition: left 0.5s ease;
 }
 
 .rtr-btn-quote-hero:hover::before {
     left: 100%;
 }
 
 .rtr-btn-quote-hero:hover {
     background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
     border-color: rgba(255, 255, 255, 0.3);
     transform: translateY(-3px) scale(1.02);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
 }
 
 .rtr-btn-quote-hero:active {
     transform: translateY(-1px) scale(1);
 }
 
 @media (max-width: 768px) {
     .rtr-hero-section {
         padding: 100px 20px 60px;
     }
 
     .rtr-hero-headline {
         font-size: 36px;
         margin-bottom: 20px;
     }
 
     .rtr-hero-description {
         font-size: 16px;
         margin-bottom: 40px;
     }
 
     .rtr-hero-buttons {
         flex-direction: column;
         align-items: stretch;
     }
 
     .rtr-btn-watch-story,
     .rtr-btn-quote-hero {
         width: 100%;
         justify-content: center;
     }
 }
 
 @media (max-width: 480px) {
     .rtr-hero-headline {
         font-size: 28px;
     }
 
     .rtr-hero-description {
         font-size: 14px;
     }
 }
 
 /* Raw to Real Scene Sections */
 .rtr-scene-section {
     min-height: 100vh;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     margin: 0;
     overflow: hidden;
     border: none;
     will-change: transform, opacity;
 }
 
 .rtr-scene-section + .rtr-scene-section {
     margin-top: 0;
     border-top: none;
     padding-top: 0;
 }
 
 /* Smooth transitions between sections */
 .rtr-scene-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
 .rtr-scene-section:hover::before {
     opacity: 1;
 }
 
 .rtr-3d-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }
 
 .rtr-scene-overlay {
     position: relative;
     z-index: 2;
     text-align: center;
     color: #ffffff;
     padding: 0 40px;
 }
 
 .rtr-scene-title {
     font-size: 56px;
     font-weight: 700;
     margin-bottom: 24px;
     color: #ffffff;
     text-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
     letter-spacing: 1px;
 }
 
 .rtr-scene-subtitle {
     font-size: 22px;
     color: #B0B0B0;
     font-weight: 400;
 }
 
 /* Avatar Styles */
 .rtr-avatar-container {
     position: relative;
     width: 100%;
     max-width: 1400px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     padding: 60px 40px;
     z-index: 10;
 }
 
 .rtr-avatar {
     width: 220px;
     height: 220px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow: 0 15px 50px rgba(237, 45, 133, 0.4);
     opacity: 1;
     transform: translateY(0) scale(1);
     transition: all 0.3s ease;
     border: 4px solid rgba(237, 45, 133, 0.3);
     z-index: 10;
 }
 
 .rtr-avatar:hover {
     transform: scale(1.05);
     box-shadow: 0 20px 60px rgba(237, 45, 133, 0.5);
 }
 
 .rtr-avatar-image {
     width: 85%;
     height: 85%;
     background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 90px;
     font-weight: 700;
     color: var(--primary-pink);
     box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
     position: relative;
     line-height: 1;
 }
 
 .rtr-customer-avatar {
     background: linear-gradient(135deg, var(--brand-dark-blue-light) 0%, var(--brand-dark-blue) 100%);
 }
 
 .rtr-vendor-avatar {
     background: linear-gradient(135deg, #10B981 0%, #059669 100%);
 }
 
 .rtr-company-rep-avatar {
     background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
 }
 
 /* Speech Bubbles */
 .rtr-speech-bubbles {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 8;
     pointer-events: none;
 }
 
 .rtr-bubble {
     position: absolute;
     background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
     color: #1a1a1a;
     padding: 18px 24px;
     border-radius: 24px;
     font-size: 16px;
     font-weight: 500;
     max-width: 320px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
     opacity: 0;
     transform: scale(0.8) translateY(10px);
     pointer-events: none;
     line-height: 1.5;
     border: 2px solid rgba(139, 92, 246, 0.2);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     z-index: 5;
     backdrop-filter: blur(10px);
 }
 
 .rtr-bubble.active {
     opacity: 1;
     transform: scale(1) translateY(0);
 }
 
 .rtr-bubble::before {
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
 }
 
 .rtr-customer-scene .rtr-bubble {
     left: 300px;
 }
 
 .rtr-customer-scene .rtr-bubble::before {
     left: -14px;
     top: 50%;
     transform: translateY(-50%);
     border-width: 14px 14px 14px 0;
     border-color: transparent rgba(255, 255, 255, 0.95) transparent transparent;
 }
 
 .rtr-vendor-scene .rtr-bubble {
     right: 300px;
     text-align: right;
 }
 
 .rtr-vendor-scene .rtr-bubble::before {
     right: -14px;
     top: 50%;
     transform: translateY(-50%);
     border-width: 14px 0 14px 14px;
     border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
 }
 
 .rtr-company-scene .rtr-bubble {
     left: 50%;
     transform: translateX(-50%);
     text-align: center;
 }
 
 .rtr-company-scene .rtr-bubble::before {
     bottom: -14px;
     left: 50%;
     transform: translateX(-50%);
     border-width: 14px 14px 0 14px;
     border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
 }
 
 .rtr-bubble-1 { top: 8%; }
 .rtr-bubble-2 { top: 18%; }
 .rtr-bubble-3 { top: 28%; }
 .rtr-bubble-4 { top: 38%; }
 .rtr-bubble-5 { top: 48%; }
 .rtr-bubble-6 { top: 58%; }
 .rtr-bubble-7 { top: 68%; }
 .rtr-bubble-8 { top: 78%; }
 .rtr-bubble-9 { top: 88%; }
 
 /* Scene Backgrounds */
 .rtr-scene-background {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #1a1a1a;
     z-index: 0;
 }
 
 .rtr-customer-scene {
     background: linear-gradient(to bottom, #1a1a1a 0%, #0f0f0f 100%);
     position: relative;
 }
 
 .rtr-customer-scene::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: 
         radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
     z-index: 1;
     pointer-events: none;
 }
 
 .rtr-vendor-scene {
     background: linear-gradient(to bottom, #0f0f0f 0%, #1a1a1a 100%);
     position: relative;
 }
 
 .rtr-vendor-scene::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: 
         radial-gradient(circle at 80% 30%, rgba(16, 185, 129, 0.1) 0%, transparent 50%),
         radial-gradient(circle at 20% 70%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
     z-index: 1;
     pointer-events: none;
 }
 
 .rtr-road-scene {
     background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 50%, #0f0f0f 100%);
     position: relative;
 }
 
 .rtr-road-scene::before {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 30%;
     background: repeating-linear-gradient(
         90deg,
         transparent,
         transparent 50px,
         rgba(59, 130, 246, 0.15) 50px,
         rgba(59, 130, 246, 0.15) 100px
     );
     opacity: 0.4;
     z-index: 1;
 }
 
 .rtr-road-scene::after {
     content: '';
     position: absolute;
     top: 20%;
     left: 10%;
     width: 80px;
     height: 80px;
     background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
     border-radius: 50%;
     animation: rtr-float 6s ease-in-out infinite;
 }
 
 @keyframes rtr-float {
     0%, 100% {
         transform: translateY(0);
     }
     50% {
         transform: translateY(-20px);
     }
 }
 
 .rtr-warehouse-scene {
     background: linear-gradient(to bottom, #0f0f0f 0%, #1a1a1a 50%, #2a2a2a 100%);
     position: relative;
 }
 
 .rtr-warehouse-scene::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 40%;
     background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
     z-index: 1;
 }
 
 .rtr-warehouse-scene::after {
     content: '';
     position: absolute;
     bottom: 20%;
     right: 15%;
     width: 100px;
     height: 100px;
     background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
     border-radius: 50%;
     animation: rtr-float 8s ease-in-out infinite;
     animation-delay: 1s;
     z-index: 1;
 }
 
 /* Scene Elements (Icons) */
 .rtr-scene-elements {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 2;
     pointer-events: none;
 }
 
 .rtr-truck-icon,
 .rtr-box-icon {
     position: absolute;
     font-size: 60px;
     opacity: 0.3;
     animation: rtr-float 6s ease-in-out infinite;
 }
 
 .rtr-truck-icon {
     top: 20%;
     left: 15%;
     animation-delay: 0s;
 }
 
 .rtr-truck-2 {
     top: 60%;
     right: 20%;
     animation-delay: 2s;
 }
 
 .rtr-box-icon {
     top: 25%;
     right: 25%;
     animation-delay: 0.5s;
 }
 
 .rtr-box-2 {
     top: 55%;
     left: 20%;
     animation-delay: 1.5s;
 }
 
 .rtr-box-3 {
     bottom: 25%;
     right: 15%;
     animation-delay: 2.5s;
 }
 
 /* Both Characters Scene */
 .rtr-both-scene {
     background: #000000;
 }
 
 .rtr-stranger-avatar {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     box-shadow: 0 15px 50px rgba(245, 158, 11, 0.4);
     border: 4px solid rgba(255, 255, 255, 0.2);
     font-size: 80px;
 }
 
 .rtr-stranger-bubble {
     position: absolute;
     top: -90px;
     left: 50%;
     transform: translateX(-50%);
     background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
     color: #1a1a1a;
     padding: 18px 28px;
     border-radius: 24px;
     font-size: 18px;
     font-weight: 600;
     white-space: nowrap;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
     border: 2px solid rgba(139, 92, 246, 0.2);
     animation: rtr-bubblePulse 2s ease-in-out infinite;
 }
 
 @keyframes rtr-bubblePulse {
     0%, 100% {
         transform: translateX(-50%) scale(1);
     }
     50% {
         transform: translateX(-50%) scale(1.05);
     }
 }
 
 /* Company Building Transition */
 .rtr-building-transition {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000000;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
 }
 
 .rtr-building-logo {
     font-size: 96px;
     font-weight: 800;
     color: var(--primary-pink);
     opacity: 0;
     transform: scale(0.5);
     text-shadow: 0 0 50px rgba(139, 92, 246, 0.8);
     letter-spacing: 4px;
 }
 
 /* Network Map */
 .rtr-network-map {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     opacity: 0;
     pointer-events: none;
 }
 
 .rtr-network-nodes {
     width: 100%;
     height: 100%;
     position: relative;
     background: radial-gradient(circle at center, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
 }
 
 .rtr-network-nodes::before,
 .rtr-network-nodes::after {
     content: '';
     position: absolute;
     width: 200px;
     height: 200px;
     border: 2px solid rgba(139, 92, 246, 0.3);
     border-radius: 50%;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     animation: rtr-networkPulse 3s ease-in-out infinite;
 }
 
 .rtr-network-nodes::after {
     width: 300px;
     height: 300px;
     animation-delay: 1s;
 }
 
 @keyframes rtr-networkPulse {
     0%, 100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 0.3;
     }
     50% {
         transform: translate(-50%, -50%) scale(1.2);
         opacity: 0.6;
     }
 }
 
 /* Products Section */
 .rtr-products-scene {
     background: #000000;
     padding: 80px 40px !important;
 }
 
 .rtr-products-header {
     text-align: center;
     color: #ffffff;
     margin-bottom: 60px;
     z-index: 2;
     position: relative;
     padding: 0 20px;
 }
 
 .rtr-products-header h2 {
     font-size: 52px;
     font-weight: 800;
     margin-bottom: 24px;
     color: #ffffff;
     text-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
     letter-spacing: 1px;
 }
 
 .rtr-products-header p {
     font-size: 18px;
     color: #B0B0B0;
     margin-bottom: 10px;
 }
 
 .rtr-cpg-text {
     font-size: 24px;
     font-weight: 600;
     color: #8B5CF6 !important;
     margin-top: 20px;
 }
 
 .rtr-products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
     z-index: 2;
     position: relative;
 }
 
 .rtr-product-card {
     background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
     border-radius: 16px;
     padding: 40px 30px;
     cursor: pointer;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     border: 2px solid transparent;
     position: relative;
     overflow: hidden;
 }
 
 .rtr-product-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
     transition: left 0.5s ease;
 }
 
 .rtr-product-card:hover::before {
     left: 100%;
 }
 
 .rtr-product-card:hover {
     border-color: #8B5CF6;
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4);
     background: linear-gradient(135deg, #1f1f1f 0%, #141414 100%);
 }
 
 .rtr-product-image {
     width: 100%;
     height: 220px;
     background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
     border-radius: 12px;
     margin-bottom: 25px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 8px 20px rgba(237, 45, 133, 0.3);
 }
 
 .rtr-product-image::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     opacity: 0;
     transition: all 0.3s ease;
 }
 
 .rtr-product-card:hover .rtr-product-image::after {
     width: 100px;
     height: 100px;
     opacity: 1;
 }
 
 .rtr-product-card h3 {
     color: #ffffff;
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 12px;
     transition: color 0.3s ease;
 }
 
 .rtr-product-card:hover h3 {
     color: var(--primary-pink);
 }
 
 .rtr-product-card p {
     color: #B0B0B0;
     font-size: 16px;
     line-height: 1.6;
     transition: color 0.3s ease;
 }
 
 .rtr-product-card:hover p {
     color: #D0D0D0;
 }
 
 .rtr-product-detail {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.95);
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .rtr-product-cover {
     width: 80%;
     max-width: 800px;
     height: 80%;
     background: #1a1a1a;
     border-radius: 12px;
     border: 2px solid #8B5CF6;
 }
 
 /* Services Section */
 .rtr-services-scene {
     background: #000000;
     padding: 80px 40px !important;
 }
 
 .rtr-services-wall {
     width: 100%;
     height: 100%;
     min-height: 600px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .rtr-services-screen {
     width: 90%;
     max-width: 1200px;
     min-height: 400px;
     background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
     border: 4px solid #8B5CF6;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     box-shadow: 0 25px 70px rgba(139, 92, 246, 0.4), inset 0 0 50px rgba(139, 92, 246, 0.1);
     overflow: hidden;
 }
 
 .rtr-services-screen h2 {
     font-size: 42px;
     font-weight: 700;
     color: var(--primary-pink);
     text-align: center;
     padding: 60px 40px;
     text-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
     letter-spacing: 1px;
 }
 
 .rtr-services-items {
     position: absolute;
     width: 100%;
     height: 100%;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 25px;
     padding: 50px;
     box-sizing: border-box;
 }
 
 .rtr-service-item {
     background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-pink-dark) 100%);
     color: #ffffff;
     padding: 35px 25px;
     border-radius: 14px;
     font-size: 22px;
     font-weight: 700;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
     transition: all 0.3s ease;
     border: 2px solid rgba(255, 255, 255, 0.1);
     cursor: pointer;
 }
 
 .rtr-service-item:hover {
     transform: translateY(-5px) scale(1.05);
     box-shadow: 0 12px 30px rgba(139, 92, 246, 0.6);
     background: linear-gradient(135deg, #9d6af7 0%, #8c4aee 100%);
 }
 
 .rtr-services-final {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 10;
 }
 
 .rtr-services-final h3 {
     font-size: 56px;
     font-weight: 700;
     color: var(--primary-pink);
     text-align: center;
     text-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
     letter-spacing: 2px;
     animation: pulse 2s ease-in-out infinite;
 }
 
 @keyframes pulse {
     0%, 100% {
         transform: scale(1);
         opacity: 1;
     }
     50% {
         transform: scale(1.05);
         opacity: 0.9;
     }
 }
 
 /* Glass Shatter Effect */
 .rtr-glass-shatter {
     position: absolute;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }
 
 .rtr-glass-fragment {
     position: absolute;
     background: rgba(139, 92, 246, 0.1);
     border: 1px solid rgba(139, 92, 246, 0.3);
 }
 
 @media (max-width: 768px) {
     .rtr-hero-headline {
         font-size: 42px;
     }
 
     .rtr-hero-description {
         font-size: 18px;
     }
 
     .rtr-scene-title {
         font-size: 36px;
     }
 
     .rtr-scene-subtitle {
         font-size: 18px;
     }
 
     .rtr-avatar {
         width: 160px;
         height: 160px;
     }
 
     .rtr-avatar-image {
         font-size: 50px;
     }
 
     .rtr-bubble {
         max-width: 250px;
         font-size: 14px;
         padding: 14px 18px;
     }
 
     .rtr-customer-scene .rtr-bubble {
         left: 180px;
     }
 
     .rtr-vendor-scene .rtr-bubble {
         right: 180px;
     }
 
     .rtr-products-scene {
         padding: 60px 20px !important;
     }
 
     .rtr-products-grid {
         grid-template-columns: 1fr;
         gap: 20px;
     }
 
     .rtr-services-scene {
         padding: 60px 20px !important;
     }
 
     .rtr-services-items {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
         padding: 20px;
     }
 
     .rtr-services-screen h2 {
         font-size: 28px;
         padding: 40px 20px;
     }
 
     .rtr-services-final h3 {
         font-size: 36px;
     }
 
     .rtr-building-logo {
         font-size: 56px;
     }
 
     .rtr-stranger-avatar {
         width: 140px;
         height: 140px;
         font-size: 60px;
     }
 }
 
 /* Story Canvas Styles */
 #story-canvas {
     position: relative;
     width: 100%;
     overflow: hidden;
     background: #000;
 }
 
 #story-canvas-inner {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
 }
 
 .speech-bubble {
     position: absolute;
     background: white;
     color: #1a1a1a;
     text-align: center;
     border-radius: 8px;
     padding: 8px 12px;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.1));
     font-size: 12px;
     max-width: 200px;
 }
 
 @media (min-width: 768px) {
     .speech-bubble {
         padding: 12px 16px;
         font-size: 16px;
         max-width: 300px;
     }
 }
 
 .speech-bubble::after {
     content: '';
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     bottom: -8px;
     width: 0;
     height: 0;
     border-left: 8px solid transparent;
     border-right: 8px solid transparent;
     border-top: 8px solid white;
 }
 
 .customer-character,
 .vendor-character,
 .rep-character,
 .passerby-character {
     position: absolute;
     z-index: 10;
 }
 
 .customer-truck {
     position: absolute;
     z-index: 5;
 }
 
 .office-building {
     position: absolute;
     z-index: 15;
 }
 
 .outdoor-bg {
     position: absolute;
     inset: 0;
     z-index: -20;
 }
 
 .office-interior {
     position: absolute;
     inset: 0;
     z-index: -30;
 }
 
 .hills-container,
 .road-container {
     width: 100%;
     height: auto;
 }
 
 .network-map {
     position: absolute;
     inset: 0;
     z-index: 20;
 }
 
 .network-map .node {
     position: absolute;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #ffd6a5;
     border: 2px solid white;
     box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
 @media (min-width: 768px) {
     .network-map .node {
         width: 24px;
         height: 24px;
     }
 }
 
 .products-section {
     position: absolute;
     inset: 0;
     z-index: 25;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
 }
 
 @media (min-width: 768px) {
     .products-section {
         gap: 32px;
     }
 }
 
 .product-card {
     width: 100%;
     max-width: 280px;
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
     border-radius: 8px;
     padding: 16px;
     transition: all 0.3s ease;
 }
 
 @media (min-width: 768px) {
     .product-card {
         max-width: 384px;
     }
 }
 
 .product-card:hover {
     transform: scale(1.05);
     box-shadow: 0 20px 40px rgba(0,0,0,0.3);
 }
 
 .final-scene {
     position: absolute;
     inset: 0;
     z-index: 30;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 16px;
 }
 
 .rep-bubbles {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 8px;
     max-width: 1024px;
 }
 
 @media (min-width: 768px) {
     .rep-bubbles {
         gap: 16px;
     }
 }
 
 .intro-title {
     z-index: 100;
 }
 
 /* Responsive adjustments for story canvas */
 @media (min-width: 768px) {
     .intro-title {
         font-size: 4.5rem !important;
     }
     
     .customer-character,
     .vendor-character,
     .rep-character,
     .passerby-character {
         width: 96px !important;
         height: 192px !important;
     }
     
     .customer-truck {
         width: 192px !important;
         height: 96px !important;
     }
     
     .office-building {
         width: 550px !important;
         height: 550px !important;
     }
     
     .products-section > div {
         grid-template-columns: repeat(3, 1fr) !important;
         gap: 32px !important;
     }
     
     .product-card {
         max-width: 384px !important;
     }
     
     .final-logo svg {
         width: 96px !important;
         height: 96px !important;
     }
     
     .final-tagline {
         font-size: 3.75rem !important;
     }
     
     .mobile-break {
         display: none !important;
     }
 }

/* ============================================
   2x2 Grid Section: Customer & Vendor Confusion
   Enhanced with Animated Brand Theme Background
   ============================================ */

/* Animated Background Layers */
.confusion-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Swirling Background Layer 1 - Pink & Purple */
.confusion-grid-bg-layer-1 {
    position: absolute;
    top: -30%;
    left: -20%;
    width: 150%;
    height: 150%;
    background: 
        radial-gradient(ellipse 1200px 1000px at 30% 40%, rgba(237, 45, 133, 0.4) 0%, transparent 65%),
        radial-gradient(ellipse 1000px 1200px at 70% 60%, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
    border-radius: 50%;
    animation: confusion-float1 25s linear infinite, confusion-rotate1 30s linear infinite;
    filter: blur(80px);
    will-change: transform;
    transform: translateZ(0);
}

/* Swirling Background Layer 2 - Dark Blue & Mehrun */
.confusion-grid-bg-layer-2 {
    position: absolute;
    bottom: -40%;
    right: -25%;
    width: 180%;
    height: 180%;
    background: 
        radial-gradient(ellipse 1300px 1100px at 40% 50%, rgba(30, 58, 138, 0.35) 0%, transparent 65%),
        radial-gradient(ellipse 1100px 1300px at 60% 45%, rgba(114, 47, 55, 0.3) 0%, transparent 68%);
    border-radius: 45%;
    animation: confusion-float2 30s linear infinite, confusion-rotate2 35s linear infinite reverse;
    filter: blur(90px);
    will-change: transform;
    transform: translateZ(0);
}

/* Swirling Background Layer 3 - Center Mix */
.confusion-grid-bg-layer-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(ellipse 1400px 1200px at 50% 50%, rgba(237, 45, 133, 0.25) 0%, transparent 75%),
        radial-gradient(ellipse 1200px 1400px at 30% 70%, rgba(139, 92, 246, 0.2) 0%, transparent 72%);
    border-radius: 50%;
    animation: confusion-float3 28s linear infinite, confusion-rotate3 33s linear infinite;
    filter: blur(85px);
    will-change: transform;
    transform: translateZ(0);
}

/* Floating Particles */
.confusion-grid-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.confusion-grid-particles::before,
.confusion-grid-particles::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(237, 45, 133, 0.6);
    border-radius: 50%;
    box-shadow: 
        150px 300px 0 rgba(237, 45, 133, 0.4),
        450px 200px 0 rgba(139, 92, 246, 0.5),
        750px 400px 0 rgba(30, 58, 138, 0.3),
        1050px 150px 0 rgba(114, 47, 55, 0.4),
        300px 500px 0 rgba(237, 45, 133, 0.35),
        600px 550px 0 rgba(139, 92, 246, 0.4),
        900px 600px 0 rgba(237, 45, 133, 0.3),
        1200px 450px 0 rgba(30, 58, 138, 0.4);
    animation: confusion-particlesFloat 25s linear infinite;
}

.confusion-grid-particles::after {
    animation-delay: -12s;
    opacity: 0.7;
}

/* Section Container - Enhanced */
.confusion-grid-section {
    width: 100%;
    padding: 4rem 1rem;
    background: #0a0a0f;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.confusion-grid-container {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.confusion-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.confusion-grid-row:last-child {
    margin-bottom: 0;
}

.confusion-grid-item {
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(237, 45, 133, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    position: relative;
    box-sizing: border-box;
}

.confusion-grid-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 16px 48px rgba(237, 45, 133, 0.4),
        0 0 0 2px rgba(237, 45, 133, 0.3),
        0 0 60px rgba(237, 45, 133, 0.2);
}

.confusion-grid-video {
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.confusion-grid-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(237, 45, 133, 0.1) 0%, 
        transparent 50%, 
        rgba(139, 92, 246, 0.1) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.confusion-grid-video:hover::before {
    opacity: 1;
}

.confusion-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 0;
    transition: transform 0.4s ease;
}
@media (max-width: 768px) {
    .confusion-video {
       margin-right: 30px;
    }
    .abc{
         margin-right: 30px;
    }
    .defg{
         margin-right: 10px;
    }
}
.confusion-grid-video:hover .confusion-video {
    transform: scale(1.05);
}

.confusion-grid-text {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    position: relative;
    transition: all 0.4s ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.confusion-grid-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--primary-pink) 0%, 
        var(--brand-purple) 50%, 
        var(--primary-pink) 100%);
    background-size: 200% 100%;
    animation: confusion-gradientShift 3s linear infinite;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.confusion-grid-item:hover .confusion-grid-text::before {
    opacity: 1;
}

.confusion-text-content {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 600px;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.5) transparent;
}

.confusion-text-content::-webkit-scrollbar {
    width: 6px;
}

.confusion-text-content::-webkit-scrollbar-track {
    background: transparent;
}

.confusion-text-content::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.5);
    border-radius: 3px;
}

.confusion-text-content::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.7);
}

.confusion-title {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2rem;
    line-height: 1.2;
    position: relative;
    transition: color 0.3s ease;
    letter-spacing: 1px;
}

.confusion-subtitle {
    font-family: 'Orbitron', 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3748;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    position: relative;
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
}

.confusion-grid-item:hover .confusion-title {
    color: var(--primary-pink);
    text-shadow: 0 0 20px rgba(237, 45, 133, 0.3);
}

.confusion-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.confusion-list li {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: #4a5568;
    line-height: 1.75;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-10px);
    animation: confusion-fadeInUp 0.6s ease forwards;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.confusion-list li:nth-child(1) { animation-delay: 0.1s; }
.confusion-list li:nth-child(2) { animation-delay: 0.2s; }
.confusion-list li:nth-child(3) { animation-delay: 0.3s; }
.confusion-list li:nth-child(4) { animation-delay: 0.4s; }
.confusion-list li:nth-child(5) { animation-delay: 0.5s; }
.confusion-list li:nth-child(6) { animation-delay: 0.6s; }
.confusion-list li:nth-child(7) { animation-delay: 0.7s; }
.confusion-list li:nth-child(8) { animation-delay: 0.8s; }

.confusion-list li:hover {
    color: var(--primary-pink);
    transform: translateX(5px);
    padding-left: 2rem;
}

.confusion-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-pink);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.confusion-list li:hover:before {
    color: var(--brand-purple);
    transform: scale(1.3);
}

.confusion-list li:last-child {
    margin-bottom: 0;
}

/* Solution Section - Big Bold Text */
.solution-section {
    position: relative;
    min-height: 90vh;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    overflow: hidden;
}

.solution-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
}

.solution-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.solution-brands {
    font-family: 'Space Grotesk', 'Orbitron', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    color: #ED2D85;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 3rem 0;
    transform: rotate(-1.5deg) skew(-3deg, 0deg);
    line-height: 1;
    text-shadow: 0 0 30px rgba(237, 45, 133, 0.5);
    transition: transform 0.3s ease;
}

.solution-brands:hover {
    transform: rotate(-1deg) skew(-2deg, 0deg) scale(1.02);
}

.solution-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.solution-text {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
    font-size: clamp(2.5rem, 7vw, 6rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 3px #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 0.9;
    margin: 0;
    transform: rotate(-1.5deg) skew(-3deg, 0deg);
    text-shadow: 
        0 0 20px rgba(255, 255, 255, 0.3),
        0 0 40px rgba(255, 255, 255, 0.2);
    font-style: italic;
    transition: transform 0.3s ease, -webkit-text-stroke 0.3s ease;
}

.solution-text:hover {
    transform: rotate(-1deg) skew(-2deg, 0deg) scale(1.02);
    -webkit-text-stroke: 3.5px #ffffff;
}

.solution-text-1 {
    transform: rotate(-1deg) skew(-2.5deg, 0deg);
}

.solution-text-1:hover {
    transform: rotate(-0.5deg) skew(-1.5deg, 0deg) scale(1.02);
}

.solution-text-2 {
    transform: rotate(-1.5deg) skew(-3deg, 0deg);
}

.solution-text-2:hover {
    transform: rotate(-1deg) skew(-2deg, 0deg) scale(1.02);
}

.solution-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.social-icons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.social-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-icon:hover {
    color: #ED2D85;
    transform: scale(1.15) translateY(-2px);
    background: rgba(237, 45, 133, 0.2);
    box-shadow: 0 0 25px rgba(237, 45, 133, 0.6);
    border-color: rgba(237, 45, 133, 0.4);
}

.social-icon svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
}

.social-icon:hover svg {
    transform: scale(1.1);
}

.follow-me {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 0;
    transform: rotate(180deg);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.follow-me:hover {
    opacity: 1;
}

/* Tablet and Medium Screens */
@media (max-width: 1200px) {
    .solution-container {
        gap: 4rem;
    }
    
    .solution-brands {
        font-size: clamp(2rem, 5.5vw, 4rem);
        margin-bottom: 2.5rem;
    }
    
    .solution-text {
        font-size: clamp(2rem, 6vw, 5rem);
        -webkit-text-stroke: 2.5px #ffffff;
    }
}

@media (max-width: 1024px) {
    .solution-section {
        min-height: 85vh;
        padding: 4rem 2rem;
    }
    
    .solution-container {
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        text-align: center;
    }
    
    .solution-content {
        width: 100%;
        max-width: 800px;
    }
    
    .solution-brands {
        transform: rotate(-1deg) skew(-2deg, 0deg);
    }
    
    .solution-text {
        transform: rotate(-1deg) skew(-2deg, 0deg);
    }
    
    .solution-text-1,
    .solution-text-2 {
        transform: rotate(-1deg) skew(-2deg, 0deg);
    }
    
    .solution-social {
        flex-direction: row;
        justify-content: center;
        gap: 2.5rem;
    }
    
    .social-icons {
        flex-direction: row;
        gap: 1.25rem;
    }
    
    .follow-me {
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        transform: none;
        margin-top: 0.5rem;
    }
}

/* Mobile Screens */
@media (max-width: 768px) {
    .solution-section {
        min-height: 75vh;
        padding: 3rem 1.5rem;
    }
    
    .solution-container {
        gap: 2.5rem;
    }
    
    .solution-brands {
        font-size: clamp(1.75rem, 8vw, 3rem);
        margin-bottom: 2rem;
        transform: rotate(-0.5deg) skew(-1deg, 0deg);
        letter-spacing: 0.06em;
    }
    
    .solution-text-wrapper {
        gap: 1.25rem;
    }
    
    .solution-text {
        font-size: clamp(1.75rem, 9vw, 3.5rem);
        -webkit-text-stroke: 2px #ffffff;
        transform: rotate(-0.5deg) skew(-1deg, 0deg);
        letter-spacing: 0.06em;
        line-height: 0.95;
    }
    
    .solution-text-1,
    .solution-text-2 {
        transform: rotate(-0.5deg) skew(-1deg, 0deg);
    }
    
    .solution-social {
        gap: 2rem;
    }
    
    .social-icon {
        width: 45px;
        height: 45px;
    }
    
    .social-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .follow-me {
        font-size: 0.75rem;
        letter-spacing: 0.25em;
    }
}

/* Small Mobile Screens */
@media (max-width: 480px) {
    .solution-section {
        min-height: 70vh;
        padding: 2.5rem 1rem;
    }
    
    .solution-container {
        gap: 2rem;
    }
    
    .solution-brands {
        font-size: clamp(1.5rem, 7vw, 2.5rem);
        margin-bottom: 1.5rem;
    }
    
    .solution-text-wrapper {
        gap: 1rem;
    }
    
    .solution-text {
        font-size: clamp(1.5rem, 8vw, 3rem);
        -webkit-text-stroke: 1.5px #ffffff;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
    }
    
    .social-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .social-icons {
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .confusion-text-content {
        max-height: 500px;
    }
    
    .confusion-subtitle {
        font-size: 1.25rem;
        margin-top: 2rem;
        margin-bottom: 1.25rem;
    }
}

/* Animations */
@keyframes confusion-float1 {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }
    100% {
        transform: translate(-15%, 20%) rotate(360deg);
    }
}

@keyframes confusion-rotate1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes confusion-float2 {
    0% {
        transform: translate(0%, 0%) rotate(0deg);
    }
    100% {
        transform: translate(18%, -12%) rotate(-360deg);
    }
}

@keyframes confusion-rotate2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes confusion-float3 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) translate(-10%, 15%) rotate(360deg);
    }
}

@keyframes confusion-rotate3 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes confusion-particlesFloat {
    0% {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}

@keyframes confusion-gradientShift {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

@keyframes confusion-fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Tablet: Two rows, each row stacks left → right */
@media (max-width: 1024px) {
    .confusion-grid-section {
        padding: 3rem 1.5rem;
    }
    
    .confusion-grid-row {
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .confusion-grid-item {
        min-height: 350px;
    }
    
    .confusion-grid-text {
        padding: 2.5rem 2rem;
    }
    
    .confusion-title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }
    
    .confusion-list li {
        font-size: 1rem;
        margin-bottom: 0.875rem;
    }
}

/* Mobile: All four blocks stack vertically */
@media (max-width: 768px) {
    .confusion-grid-section {
        padding: 2rem 1rem;
    }
    
    .confusion-grid-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .confusion-grid-item {
        min-height: 300px;
    }
    
    .confusion-grid-text {
        padding: 2rem 1.5rem;
    }
    
    .confusion-title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }
    
    .confusion-list li {
        font-size: 0.9375rem;
        margin-bottom: 0.75rem;
        padding-left: 1.25rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .confusion-grid-section {
        padding: 1.5rem 0.75rem;
    }
    
    .confusion-grid-item {
        min-height: 250px;
    }
    
    .confusion-grid-text {
        padding: 1.5rem 1.25rem;
    }
    
    .confusion-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .confusion-list li {
        font-size: 0.875rem;
        margin-bottom: 0.625rem;
        padding-left: 1rem;
     }
 }
 
 /* ============================================
    Scroll Reveal Animations
    GPU-optimized, smooth, professional
    ============================================ */
 
 /* Base reveal styles - Visible by default, then animated when script loads */
 [data-reveal] {
     opacity: 1; /* Changed from 0 to 1 - content visible by default */
     will-change: transform, opacity;
     transform: translateZ(0);
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
 }
 
 /* Only hide if JS is loaded and element hasn't been revealed yet */
 .js-loaded [data-reveal]:not(.rtr-revealed) {
     opacity: 0;
 }
 
 /* Exclude specific elements from animations */
 .contact-content-text .contact-paragraph,
 .contact-content-text p,
 .contact-paragraph:not([data-reveal]) {
     opacity: 1 !important;
     transform: none !important;
     transition: none !important;
     animation: none !important;
     will-change: auto !important;
 }
 
 /* Ensure contact paragraphs are always visible */
 .contact-content-text [data-reveal] {
     opacity: 1 !important;
     transform: none !important;
     transition: none !important;
     animation: none !important;
 }
 
 /* Revealed state - Animation triggers */
 [data-reveal].rtr-revealed {
     opacity: 1;
     animation-fill-mode: both;
 }
 
 /* Fade In Animation */
 .rtr-reveal-fade-in {
     opacity: 0;
     transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     transition-delay: calc(var(--stagger-delay, 0) * 1s);
 }
 
 .rtr-reveal-fade-in.rtr-revealed {
     opacity: 1;
 }
 
  /* Slide Up Animation */
  .rtr-reveal-slide-up {
      opacity: 0;
      transform: translateY(40px) translateZ(0);
      transition: opacity 0.6s ease-out,
                  transform 0.6s ease-out;
      transition-delay: calc(var(--stagger-delay, 0) * 0.5s);
      /* will-change removed - causes GPU overhead */
      backface-visibility: hidden;
  }
  
  .rtr-reveal-slide-up.rtr-revealed {
      opacity: 1;
      transform: translateY(0) translateZ(0);
      will-change: auto;
  }
 
 /* Slide Left Animation */
 .rtr-reveal-slide-left {
     opacity: 0;
     transform: translateX(-40px) translateZ(0);
     transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                 transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     transition-delay: calc(var(--stagger-delay, 0) * 1s);
     will-change: transform, opacity;
     backface-visibility: hidden;
 }
 
 .rtr-reveal-slide-left.rtr-revealed {
     opacity: 1;
     transform: translateX(0) translateZ(0);
 }
 
 /* Slide Right Animation */
 .rtr-reveal-slide-right {
     opacity: 0;
     transform: translateX(40px) translateZ(0);
     transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                 transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     transition-delay: calc(var(--stagger-delay, 0) * 1s);
     will-change: transform, opacity;
     backface-visibility: hidden;
 }
 
 .rtr-reveal-slide-right.rtr-revealed {
     opacity: 1;
     transform: translateX(0) translateZ(0);
 }
 
 /* Scale In Animation */
 .rtr-reveal-scale-in {
     opacity: 0;
     transform: scale(0.9) translateZ(0);
     transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                 transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
     transition-delay: calc(var(--stagger-delay, 0) * 1s);
     will-change: transform, opacity;
     backface-visibility: hidden;
     transform-origin: center;
 }
 
 .rtr-reveal-scale-in.rtr-revealed {
     opacity: 1;
     transform: scale(1) translateZ(0);
 }
 
 /* Fade Scale Animation (for images and cards) */
 .rtr-reveal-fade-scale {
     opacity: 0;
     transform: scale(0.95) translateZ(0);
     transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
                 transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
     transition-delay: calc(var(--stagger-delay, 0) * 1s);
     will-change: transform, opacity;
     backface-visibility: hidden;
     transform-origin: center;
 }
 
 .rtr-reveal-fade-scale.rtr-revealed {
     opacity: 1;
     transform: scale(1) translateZ(0);
 }
 
 /* Stagger delay support for child elements */
 [data-reveal] > * {
     --stagger-delay: 0;
 }
 
 [data-reveal][data-stagger] > *:nth-child(1) { --stagger-delay: 0.1; }
 [data-reveal][data-stagger] > *:nth-child(2) { --stagger-delay: 0.2; }
 [data-reveal][data-stagger] > *:nth-child(3) { --stagger-delay: 0.3; }
 [data-reveal][data-stagger] > *:nth-child(4) { --stagger-delay: 0.4; }
 [data-reveal][data-stagger] > *:nth-child(5) { --stagger-delay: 0.5; }
 [data-reveal][data-stagger] > *:nth-child(6) { --stagger-delay: 0.6; }
 [data-reveal][data-stagger] > *:nth-child(7) { --stagger-delay: 0.7; }
 [data-reveal][data-stagger] > *:nth-child(8) { --stagger-delay: 0.8; }
 
 /* Disable animations for users who prefer reduced motion */
 @media (prefers-reduced-motion: reduce) {
     [data-reveal] {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important;
         animation: none !important;
     }
     
     .rtr-reveal-fade-in,
     .rtr-reveal-slide-up,
     .rtr-reveal-slide-left,
     .rtr-reveal-slide-right,
     .rtr-reveal-scale-in,
     .rtr-reveal-fade-scale {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important;
     }
 }
 
 /* Performance optimizations */
 [data-reveal].rtr-revealed {
     will-change: auto;
 }
 
 /* Responsive animation timing adjustments */
 @media (max-width: 768px) {
     .rtr-reveal-fade-in,
     .rtr-reveal-slide-up,
     .rtr-reveal-slide-left,
     .rtr-reveal-slide-right,
     .rtr-reveal-scale-in,
     .rtr-reveal-fade-scale {
         transition-duration: 0.6s;
     }
 }