/** * Swiper 11.2.10 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 28, 2025 */ /** * Swiper 11.2.10 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 28, 2025 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/D/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;700;900&display=swap'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); @import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSans.css'); /* Smooth Scroll */ html { scroll-padding-top: 0px; scroll-behavior: smooth; background-color: #050505; } @keyframes slow-breathe { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.03); opacity: 1; text-shadow: 0 0 20px rgba(255,255,255,0.4); } } .animate-slow-breathe { animation: slow-breathe 4s ease-in-out infinite; } .animate-slow-breathe-delayed { animation: slow-breathe 4s ease-in-out infinite; animation-delay: 2s; } section { /* scroll-snap removed for natural scrolling */ } /* Kyowon Red Pen Style Cards */ .kyowon-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; width: 100%; } .kyowon-card { background: #ffffff; border-radius: 24px; padding: 40px 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; align-items: center; text-align: center; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); border: 1px solid rgba(0,0,0,0.03); cursor: pointer; } .kyowon-card:hover, .kyowon-card.active { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); border-color: rgba(0, 0, 0, 0.08); transform: translateY(-8px); } .kyowon-card-badge { padding: 6px 18px; border-radius: 30px; font-size: 0.9rem; font-weight: 700; margin-bottom: 30px; display: inline-block; } .kyowon-card-badge.orange { background: #fff3e0; color: #ff8f00; } .kyowon-card-badge.green { background: #e8f5e9; color: #43a047; } .kyowon-card-graphic { width: 100px; height: 100px; background: #f8f9fa; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; font-size: 2.5rem; color: #333; transition: transform 0.3s ease; } .kyowon-card:hover .kyowon-card-graphic, .kyowon-card.active .kyowon-card-graphic { transform: scale(1.05); } .kyowon-card-title { font-size: 1.4rem; font-weight: 800; color: #111; margin-bottom: 12px; font-family: var(--font-heading); } .kyowon-card-desc { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 40px; flex-grow: 1; word-break: keep-all; } .kyowon-card-cta { display: inline-block; padding: 14px 28px; border-radius: 40px; font-size: 1rem; font-weight: 700; background: #f1f3f5; color: #495057; transition: all 0.3s ease; text-decoration: none; width: 100%; } .kyowon-card:hover .kyowon-card-cta, .kyowon-card.active .kyowon-card-cta { background: #1a1a2e; color: #ffffff; box-shadow: 0 6px 15px rgba(26, 26, 46, 0.2); } @media screen and (max-width: 768px) { .kyowon-cards-grid { grid-template-columns: 1fr; } } :root { --primary-color: #e8eaed; /* Modern Silver */ --accent-color: #bdc1c6; --text-dark: #111111; --text-muted: #555555; --bg-light: #ffffff; --bg-gray: #f8f9fa; --bg-dark: #1a1a1a; --font-heading: 'Outfit', 'Pretendard', sans-serif; --font-body: 'Pretendard', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent !important; } body { font-family: var(--font-body); background-color: #050505 !important; color: var(--text-dark); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } /* ================================================================ HEADER & MEGA NAVIGATION ??????占썩닪???????占썩닪???????占?(????占썩닪?????????占썩닪??繹먭퍒??? ================================================================ */ /* --- ???占쏙옙????????占썩닪???--- */ .header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; background: transparent; display: flex; justify-content: space-between; align-items: center; padding: 0 4rem; z-index: 1000; transition: background 0.3s, box-shadow 0.3s, border-bottom 0.3s; } /* ?占썬꺂????????占썩닪?????占???????*/ .header:hover, .header.scrolled:hover { background: #ffffff; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1); border-bottom: 1px solid #e5e5e5; } /* --- ?占??占??--- */ .logo { font-size: 1.8rem; font-weight: 800; color: #fff; font-family: var(--font-heading); transition: color 0.3s; } .header.scrolled .logo, .header:hover .logo { color: #111111; } /* ?占??占??????占썩닪占???占썬꺂???: hover/scrolled+hover ??????占썩닪?管占?占쏙옙怨룸닍??*/ .header:hover .logo img, .header.scrolled:hover .logo img { /* removed to keep colored logo */ /* removed to keep colored logo */ } /* --- ????占썩닪?????????--- */ .mega-nav { height: 100%; } .nav-list { display: flex; list-style: none; height: 100%; margin: 0; padding: 0; } .nav-item { height: 100%; display: flex; align-items: center; position: relative; } .nav-link { color: #fff; text-decoration: none; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.5px; padding: 0 1.2rem; height: 100%; display: flex; align-items: center; transition: color 0.3s, padding 0.4s cubic-bezier(0.25, 1, 0.5, 1); position: relative; } /* ????????占? ?占썬꺂??袁ㅻ븶???nav-link ?嚥▲굧????*/ .header:hover .nav-link, .header.scrolled:hover .nav-link { color: #111111; text-shadow: none; padding: 0 2rem; } /* nav-item hover ????占썩닪???active-menu ??????占썩닪?管??(???????????占썬꺂??袁ㅻ븶???????占? */ .nav-item:hover .nav-link, .nav-link.active-menu, .header:hover .nav-item:hover .nav-link, .header.scrolled:hover .nav-item:hover .nav-link { color: #e63946 !important; text-shadow: none !important; } /* ????占썩닪???????占썩닪??????占썩닪?????*/ .nav-link::after { content: ''; position: absolute; bottom: 20px; left: 1.2rem; right: 1.2rem; height: 2.5px; background: #e63946; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease, left 0.4s cubic-bezier(0.25, 1, 0.5, 1), right 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .header:hover .nav-link::after { left: 2rem; right: 2rem; } .nav-item:hover .nav-link::after, .nav-link.active-menu::after { transform: scaleX(1); } /* --- ?占썬꺂????? ????占썩닪??????占썩닪???--- */ .mega-dropdown { position: absolute; top: 80px; left: 50%; transform: translateX(-50%) translateY(-15px); width: max-content; padding: 1.2rem 0 0.8rem 0; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s; z-index: 1001; } .mega-nav:hover .mega-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition: opacity 0.4s ease 0.05s, transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) 0.05s, visibility 0.45s 0.05s; } .mega-dropdown ul { list-style: none; padding: 0; margin: 0; text-align: center; } .mega-dropdown li { margin-bottom: 0.45rem; white-space: nowrap; } .mega-dropdown a { color: #64748b; text-decoration: none; font-size: 0.9rem; font-weight: 500; transition: all 0.25s ease; } .mega-dropdown a:hover { color: #e63946; font-weight: 600; } /* ?占썬꺂????? ?熬곣뫖占???占썬걤?????占썩닪???*/ .mega-bg { position: absolute; top: 80px; left: 0; width: 100%; height: 0; opacity: 0; visibility: hidden; background: #fff; z-index: 1000; transition: opacity 0.2s ease, visibility 0.2s, height 0s 0.2s; overflow: hidden; } .mega-nav:hover ~ .mega-bg { height: 305px; opacity: 1; visibility: visible; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08); transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1) 0.05s, opacity 0.4s ease 0.05s, visibility 0s 0.05s; } /* --- KOR|ENG ?嶺뚮ㅎ????怨뚮뼚???--- */ .header-utils { display: flex; align-items: center; gap: 12px; z-index: 1001; } .header-utils a { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: color 0.3s; } /* ??占쎌삀???hover: ???占승€?占쎈룿 (??占??袁⑸즲??占쎈き? */ .header-utils a:hover, .header-utils a.active { color: #fff; } /* ????占쎈쭬 ??占???????占쎄컼?? ???占?????????占쏙옙??*/ .header:hover .header-utils a, .header.scrolled:hover .header-utils a { color: #555555; } /* ????占쎈쭬 ??占???????占쎄컼?? active ?嶺뚮ㅎ?????占쎈즴占??*/ .header:hover .header-utils a.active, .header.scrolled:hover .header-utils a.active { color: #111111; font-weight: 700; } /* ????占쎈쭬 ??占???????占쎄컼?? hover ????筌륁슕???*/ .header:hover .header-utils a:hover, .header.scrolled:hover .header-utils a:hover { color: #e63946 !important; } /* ????占쏙옙???(|) */ .header-utils .divider { color: rgba(255, 255, 255, 0.3); font-size: 0.8rem; transition: color 0.3s; cursor: default; } /* ????????占? ????????????占썩닪?管占?占쏙옙怨룸닍??*/ .header:hover .header-utils .divider, .header.scrolled:hover .header-utils .divider { color: rgba(0, 0, 0, 0.2); } /* ????????hover ??????占썩닪?管??*/ .header:hover .header-utils .divider:hover { color: #e63946; } /* ????占썩닪??????占????? ????????占????占썩닪????嚥▲굧????*/ body.sub-page .header:hover .mobile-menu-toggle span, body.sub-page .header.scrolled:hover .mobile-menu-toggle span { background: #111111; } /* --- ?占썬꺂?????????占썩닪????占쎌탳?? ????占썩닪???(body.main-page) --- */ /* ?????濡ろ뜐?????scrolled, hover ????占썩닪???: ????占썩닪??占쎈춴?????占썩닪????*/ /* --- ????占썩닪???????占썩닪????占쎌탳?? ????占썩닪???(body.sub-page) --- */ body.sub-page .header { background: rgba(10, 10, 10, 0.95) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 9999 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important; } body.sub-page { padding-top: 56px !important; } body.sub-page .header .nav-link, body.sub-page .header.scrolled .nav-link { color: #ffffff !important; text-shadow: none !important; } body.sub-page .header .header-utils a { color: rgba(255, 255, 255, 0.85) !important; } /* ????占썩닪???????占썩닪????占쎌탳?? hover: ????占썩닪??????占썩닪???????*/ body.sub-page .header:hover, body.sub-page .header.scrolled:hover { background: #ffffff !important; box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1) !important; border-bottom: 1px solid #e5e5e5 !important; } body.sub-page .header:hover .logo img { /* removed to keep colored logo */ } body.sub-page .header:hover .nav-link, body.sub-page .header.scrolled:hover .nav-link { color: #111111 !important; text-shadow: none !important; } body.sub-page .header:hover .nav-item:hover .nav-link, body.sub-page .header.scrolled:hover .nav-item:hover .nav-link, body.sub-page .header:hover .nav-link.active-menu { color: #e63946 !important; } body.sub-page .header:hover .header-utils a { color: #555555 !important; } body.sub-page .header:hover .header-utils a.active { color: #111111 !important; font-weight: 700 !important; } body.sub-page .header:hover .header-utils a:hover { color: #e63946 !important; } /* --- force-black-text (JS???熬곣뫖占??? ????占썩닪?????醫딆┫??? ?? --- */ .header.force-black-text .nav-link, .header.force-black-text .header-utils a { color: #111111 !important; text-shadow: none !important; } .header.force-black-text .header-utils .divider { color: rgba(0, 0, 0, 0.3) !important; } body.sub-page .header.force-black-text .mobile-menu-toggle span { background: #111111 !important; } .header.force-black-text .nav-item:hover .nav-link, .header.force-black-text .nav-link.active-menu, .header.force-black-text .header-utils a:hover { color: #e63946 !important; } /* --- ?占썬꺂???????????濡ろ뜐???????占썩닪????????占승€??????(index.html style ????占?????占썩닪?????????占썩닪???????援온€?? --- */ .mouse-icon { width: 24px; height: 38px; border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 12px; position: relative; margin: 0 auto; transition: all 0.3s ease; } .mouse-wheel { width: 4px; height: 8px; background-color: rgba(255, 255, 255, 0.8); border-radius: 2px; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); animation: scrollWheel 1.5s infinite; } @keyframes scrollWheel { 0% { top: 6px; opacity: 1; } 100% { top: 20px; opacity: 0; } } .board-cat-tabs { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .board-cat-tabs::-webkit-scrollbar { display: none; } .board-cat-btn { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); padding: 9px 18px; border-radius: 30px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; flex-shrink: 0; } .tab-full { display: inline; } .tab-short { display: none; } .board-cat-btn:hover, .board-cat-btn.active { background: rgba(232, 234, 237, 0.15); border-color: #e8eaed; color: #e8eaed; } .board-actions { display: flex; align-items: center; gap: 12px; } .board-search-input { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 9px 18px; color: #fff; font-size: 0.9rem; outline: none; width: 240px; transition: border-color 0.2s ease; } .board-search-input:focus { border-color: #e8eaed; } .board-write-btn { background: #e8eaed; color: #000; font-weight: 800; font-size: 0.9rem; padding: 9px 22px; border-radius: 20px; border: none; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(232, 234, 237, 0.3); white-space: nowrap; flex-shrink: 0; } /* Hero Slider */ .hero-slider { position: relative; width: 100%; height: 100dvh; background: linear-gradient(135deg, #09121d 0%, #0d1c16 100%); } .myHeroSwiper { width: 100%; height: 100%; } .myHeroSwiper .swiper-slide { position: relative; display: flex; align-items: flex-end; padding-bottom: 15vh; will-change: opacity; background: #0a1713 linear-gradient(135deg, #091913 0%, #11281f 100%); } .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .slide-bg video { width: 100%; height: 100%; object-fit: cover; display: block; backface-visibility: hidden; transform: translateZ(0); /* ??????占썩닪占???????占썩닪???占???占쎈맪????????占썩닪???????????占썩닪??占쎌땡??????占썩닪?????: ?饔낅떽???壤굿€??占쎈㎍??????? ????????占썩닪?????關??濡녹춻????????????占썩닪???占쏙옙????fade-in */ opacity: 0; transition: opacity 0.6s ease; } .slide-bg video.video-ready { opacity: 1; } .myHeroSwiper .swiper-slide:first-child .slide-bg video, #heroVideo1 { opacity: 1 !important; background-color: transparent !important; } .slide-bg .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; } .slide-content { position: relative; z-index: 2; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 4rem; display: flex; justify-content: space-between; align-items: flex-end; color: #fff; } .slide-text-left { flex: 1; } .slide-title { font-size: 4.5rem; font-family: var(--font-heading); font-weight: 500; line-height: 1.2; opacity: 0; transform: translateY(30px); transition: all 1s ease 0.3s; } .swiper-slide-active .slide-title { opacity: 1; transform: translateY(0); } .slide-text-right { margin-bottom: 2rem; opacity: 0; transform: translateX(30px); transition: all 1s ease 0.6s; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 0.85rem 1.6rem; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .swiper-slide-active .slide-text-right { opacity: 1; transform: translateX(0); } .slide-text-right p { font-size: 1.22rem; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; word-break: keep-all; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); } .p-list-text { font-size: 1.0rem; font-weight: 500; color: #eee; line-height: 1.45; font-family: 'Pretendard', sans-serif; word-break: keep-all; } .p-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media screen and (max-width: 768px) { .p-grid-2col { grid-template-columns: 1fr; } } /* Custom Pagination - Hero Slider (Vertical 3 Squares directly underneath Dot Navigator) */ .custom-pagination { position: absolute; left: 28px !important; width: 44px !important; top: calc(50vh + 225px) !important; bottom: auto !important; transform: none !important; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; z-index: 50; pointer-events: auto; } .swiper-pagination-bullet { width: 12px; height: 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.38); opacity: 1; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); margin: 0 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .swiper-pagination-bullet:hover { background: rgba(255, 255, 255, 0.9); transform: scale(1.18); } .swiper-pagination-bullet-active { background: #ff3b30; width: 12px; height: 12px; box-shadow: none; transform: scale(1.22); } /* Scroll Down Indicator */ .scroll-down-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; color: #fff; display: flex; flex-direction: column; align-items: center; font-size: 0.8rem; font-family: var(--font-heading); letter-spacing: 1px; animation: bounce 2s infinite; } .scroll-down-indicator svg { margin-top: 5px; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } /* Section Title */ .section-header { text-align: center; margin-bottom: 4rem; } .section-header h2 { font-size: 2.5rem; font-family: var(--font-heading); font-weight: 700; margin-bottom: 1rem; } .section-header p { color: var(--text-muted); font-size: 1.1rem; } /* ========================================================================= Products Showcase Section (100% Widescreen Interactive Cinematic View) ========================================================================= */ .products-cinematic-showcase { position: relative; width: 100%; height: 100dvh; background: #000000; overflow: hidden; } .cinematic-showcase-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(1.1); transition: opacity 0.6s ease; } /* Hollywood Film-Grade Color Grading & 3D Camera Motion */ .cinematic-showcase-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.15) saturate(1.2); opacity: 1; display: block; transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); transform: scale(1.02); will-change: transform, filter; } .cinematic-showcase-bg-img.active-zoom { opacity: 1; animation: hollywoodCinematicZoom 18s ease-in-out infinite alternate; } @keyframes hollywoodCinematicZoom { 0% { transform: scale(1.02) translate(0%, 0%); filter: contrast(1.15) saturate(1.2); } 50% { transform: scale(1.10) translate(-1%, -1.2%); filter: contrast(1.18) saturate(1.25); } 100% { transform: scale(1.16) translate(-1.8%, -2%); filter: contrast(1.15) saturate(1.2); } } /* Anamorphic Lens Vignette & Cinematic Lighting Overlay */ .cinematic-showcase-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; display: flex; align-items: center; z-index: 2; } .cinematic-showcase-container { max-width: 1600px; width: 100%; margin: 0 auto; padding: 0 4rem; display: flex; justify-content: space-between; align-items: center; gap: 4rem; } /* Left Info Box */ .cinematic-info-box { max-width: 620px; color: #ffffff; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .cinematic-main-title { font-family: var(--font-heading); font-size: 5rem; font-weight: 900; color: #ffffff; line-height: 1; letter-spacing: 1.5px; margin-top: 0.8rem; margin-bottom: 1.2rem; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 50px rgba(232, 234, 237, 0.25); } .cinematic-main-desc { font-size: 1.2rem; line-height: 1.8; color: rgba(255, 255, 255, 0.9); margin-bottom: 2.5rem; word-break: keep-all; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); } /* Right Translucent Glassmorphism Tab Stack */ .cinematic-tabs-stack { display: flex; flex-direction: column; gap: 0.65rem; width: 320px; flex-shrink: 0; } .c-tab-btn { display: flex; align-items: center; gap: 1rem; width: 100%; background: rgba(45, 45, 45, 0.75); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; padding: 0.95rem 1.3rem; cursor: pointer; text-align: left; transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } .c-tab-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); transform: translateX(4px); } .c-tab-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #ffffff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; } .c-tab-text { font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); font-family: var(--font-heading); } /* Active Glassmorphism Tab State (Cyan Teal Glow) */ .c-tab-btn.active { background: rgba(255, 59, 48, 0.15); border-color: #ff3b30; box-shadow: 0 8px 25px rgba(255, 59, 48, 0.25); transform: translateX(6px); } .c-tab-btn.active .c-tab-icon { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%); color: #0b1521; } .c-tab-btn.active .c-tab-text { color: #ffffff; font-weight: 800; } .c-tab-btn .c-tab-link { margin-left: auto; font-size: 0.75rem; color: rgba(255, 255, 255, 0.4); letter-spacing: 0.5px; text-decoration: none; transition: color 0.3s ease; } .c-tab-btn:hover .c-tab-link, .c-tab-btn.active .c-tab-link { color: rgba(255, 255, 255, 0.9); } /* Responsive Cinematic Showcase */ @media screen and (max-width: 1024px) { .products-cinematic-showcase { height: auto; min-height: auto; } .cinematic-showcase-overlay { position: relative; height: auto; padding: 6rem 0 4rem 0; background: transparent; } .cinematic-showcase-container { flex-direction: column; align-items: center; padding: 0 5% !important; width: 100% !important; box-sizing: border-box !important; overflow: hidden; gap: 2rem !important; } .cinematic-info-box { text-align: center; display: flex; flex-direction: column; align-items: center; } .cinematic-main-title { font-size: 2.8rem; text-shadow: 0 4px 10px rgba(0,0,0,0.5); } .cinematic-main-desc { font-size: 1rem; text-shadow: 0 2px 5px rgba(0,0,0,0.5); white-space: nowrap; } html body .hero-text-block, html body .hero-text-block.hero-align-right, html body .hero-text-block.hero-align-center { width: 85% !important; max-width: 85% !important; padding: 15px 12px !important; } html body .hero-eyebrow { font-size: 0.6rem !important; padding: 4px 8px !important; margin-bottom: 6px !important; } html body .hero-headline { font-size: 1.15rem !important; line-height: 1.25 !important; word-break: keep-all !important; margin-bottom: 6px !important; } html body .hero-subline { font-size: 0.65rem !important; word-break: keep-all !important; margin-bottom: 12px !important; } html body .slide-cta-group { flex-wrap: nowrap !important; gap: 8px !important; } html body .slide-cta-btn { padding: 10px 16px !important; font-size: 0.8rem !important; white-space: nowrap !important; flex: 1 !important; justify-content: center !important; } /* 4???????占썩닪???????????占쏙┼???????????占쏙┼??????????????????????????????占썩닪???????????????????占쎈봿占?????(iPad & Mobile) */ .cinematic-tabs-stack { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 0.6rem !important; width: 100% !important; } .c-tab-btn { position: relative !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; padding: 1.2rem 0.5rem 1.8rem !important; aspect-ratio: 1 / 1; min-width: 0 !important; overflow: hidden !important; transform: none !important; border-radius: 12px !important; } .c-tab-btn:hover { transform: none !important; } .c-tab-btn.active { transform: none !important; } .c-tab-icon { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; border-radius: 8px !important; } .c-tab-icon svg { width: 18px !important; height: 18px !important; } .c-tab-text { font-size: 0.8rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; width: 100% !important; text-align: center !important; letter-spacing: -0.3px !important; font-weight: 700 !important; } .c-tab-btn .c-tab-link { display: block !important; opacity: 1 !important; pointer-events: auto !important; position: absolute !important; bottom: 8px !important; right: 10px !important; font-size: 0.6rem !important; color: rgba(255,255,255,0.45) !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; } } @media screen and (max-width: 640px) { .cinematic-showcase-overlay { padding: 5rem 0 3rem 0; background: transparent; } .cinematic-showcase-container { gap: 1.5rem !important; } .cinematic-main-title { font-size: 2.2rem; } .cinematic-main-desc { font-size: 0.88rem; } .cinematic-tabs-stack { gap: 0.4rem !important; } .c-tab-btn { gap: 0.3rem !important; padding: 0.75rem 0.3rem 1.4rem !important; border-radius: 8px !important; } .c-tab-icon { width: 26px !important; height: 26px !important; border-radius: 6px !important; } .c-tab-icon svg { width: 13px !important; height: 13px !important; } .c-tab-text { font-size: 0.58rem !important; } .c-tab-btn .c-tab-link { bottom: 5px !important; right: 7px !important; font-size: 0.5rem !important; } } @media screen and (max-width: 640px) { .split-sidebar-nav { grid-template-columns: 1fr; } .split-details-bar { flex-direction: column; align-items: flex-start; gap: 1rem; } } .btn-blue .arrow { background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; margin-left: 10px; font-size: 1.1rem; font-weight: 400; transition: transform 0.3s ease; } .btn-blue:hover { background: #1a73e8; color: #fff; box-shadow: 0 6px 15px rgba(26, 115, 232, 0.2); } .btn-blue:hover .arrow { transform: translateX(4px); } /* ========================================================================= REMO-Style Sections ========================================================================= */ .remo-section { padding: 8rem 4rem; background: #ffffff; } .remo-container { width: 100%; max-width: 1400px; margin: 0 auto; } /* Common Header Styles */ .remo-header { margin-bottom: 4rem; } .remo-header.text-center { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } .remo-header.flex-between { display: flex; justify-content: space-between; align-items: flex-end; } .remo-badge { display: inline-block; padding: 0.5rem 1.2rem; background: #ffffff; border: 1px solid #e1e4e8; border-radius: 30px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; color: #1a233a; margin-bottom: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.02); } .remo-header h2 { font-size: 3.5rem; font-family: var(--font-heading); color: #0d1b2a; margin-bottom: 1.5rem; line-height: 1.2; font-weight: 700; } .remo-header p { font-size: 1.1rem; color: #5c6c7b; margin-bottom: 2rem; } .remo-btn-dark { display: inline-block; background: #0d1b2a; color: #fff; padding: 1rem 2rem; border-radius: 30px; font-weight: 600; transition: all 0.3s; } .remo-btn-dark:hover { background: #1a365d; transform: translateY(-2px); } /* 1. Core Technology Cards */ .remo-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .remo-card { background: #ffffff; border-radius: 20px; padding: 2.5rem 2rem; transition: all 0.4s ease; cursor: pointer; border: 1px solid rgba(0,0,0,0.05); } .remo-card .card-icon { color: #1a365d; margin-bottom: 2rem; transition: color 0.4s; } .remo-card h3, .clean-card h3 { font-size: 1.4rem; font-family: var(--font-heading); color: #0d1b2a; margin-bottom: 1rem; transition: color 0.4s; } .remo-card p { color: #5c6c7b; font-size: 0.95rem; line-height: 1.6; transition: color 0.4s; } /* Hover & Active States */ .remo-card:hover, .remo-card.active { background: #0d1b2a; transform: translateY(-10px); box-shadow: 0 20px 40px rgba(13,27,42,0.2); } .remo-card:hover .card-icon, .remo-card.active .card-icon { color: #fff; } .remo-card:hover h3, .remo-card.active h3, .remo-card:hover p, .remo-card.active p { color: #fff; } /* 2. Expanding Gallery (Snapshot) */ .snapshot-section { background: #ffffff; } .expanding-gallery { display: flex; gap: 1.5rem; height: 450px; width: 100%; } .gallery-item { position: relative; flex: 1; /* Default width */ border-radius: 20px; overflow: hidden; cursor: pointer; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); background-color: #eee; } .gallery-item .bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; filter: brightness(1); } .gallery-item:hover, .gallery-item.active { flex: 3; /* Expanded width */ } .gallery-item:hover .bg-video, .gallery-item.active .bg-video { transform: scale(1.05); filter: brightness(1); } .gallery-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); pointer-events: none; z-index: 1; } .gallery-title { position: absolute; bottom: 2rem; left: 2rem; color: #fff; z-index: 2; opacity: 0; transform: translateY(20px); transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); white-space: nowrap; } .gallery-title h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5); } .gallery-title p { font-size: 1rem; opacity: 0.8; } .gallery-item:hover .gallery-title, .gallery-item.active .gallery-title { opacity: 1; transform: translateY(0); } .view-more-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 120px; height: 120px; background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #333; font-weight: 600; font-size: 0.9rem; opacity: 0; transition: all 0.6s; } .gallery-item:hover .view-more-circle, .gallery-item.active .view-more-circle { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* 3. Application Industries */ .app-industries-section { background: #ffffff; } .app-cards-wrapper { display: flex; gap: 2rem; } .app-card { flex: 1; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; } .app-card .app-img { width: 100%; height: 220px; overflow: hidden; border-radius: 24px; background: #000; } .app-card .app-img video { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; } .app-card.dark { background: #0d1b2a; padding: 1.5rem; } .app-card.dark .app-text { padding: 2.5rem 1rem 1rem 1rem; color: #fff; } .app-card.dark .app-text h3 { color: #fff; } .app-card.dark .app-text p { color: #bbb; } .app-card.light { background: #ffffff; padding: 1rem; border: 1px solid #eee; border-radius: 24px; } .app-card.light .app-text { padding: 1.5rem 0.5rem 0.5rem 0.5rem; } .app-card .app-text h3 { font-size: 1.4rem; font-family: var(--font-heading); margin-bottom: 0.6rem; color: #0d1b2a; } .app-card .app-text p { color: #555; font-size: 0.95rem; line-height: 1.5; } .board-view-actions { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .board-view-manage-actions { display: flex; gap: 10px; } .btn-edit, .btn-delete { background: rgba(255, 255, 255, 0.1); color: #fff; border: none; padding: 12px 24px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease; } .btn-edit:hover { background: #e8eaed; color: #000; } .btn-delete:hover { background: #e74c3c; color: #fff; } .btn-list { } /* ========================================================================== Modern Premium Dark Footer Redesign ========================================================================== */ .footer { background: #ffffff; border-top: 1px solid #eaeaea; padding: 1.5rem 0 1.5rem 0; /* Reduced padding for compact fit */ color: #666666; font-family: var(--font-body); position: relative; z-index: 10; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 5rem 0 3rem; } .footer-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.5rem; } .footer-brand { display: flex; align-items: center; gap: 1.2rem; } .footer-logo-img { height: 28px; width: auto; object-fit: contain; filter: brightness(1.2); } .footer-brand-tag { font-size: 0.85rem; font-weight: 500; color: #888888; letter-spacing: 0.5px; padding-left: 1.2rem; border-left: 1px solid rgba(255, 255, 255, 0.15); } .footer-links { display: flex; align-items: center; gap: 2.2rem; } .footer-links a { color: #555555; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: #111111; } .footer-links a.privacy-link { color: #e8eaed; font-weight: 700; } .footer-divider { width: 100%; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.03) 100%); margin-bottom: 1.8rem; } .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; } .footer-comp-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: #111111; margin-bottom: 0.8rem; letter-spacing: 0.5px; } .footer-address { font-size: 0.9rem; color: #666666; margin-bottom: 0.4rem; line-height: 1.6; } .footer-contact-details { font-size: 0.88rem; color: #666666; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem; } .footer-contact-details .sep { color: #cccccc; } .footer-copyright { font-size: 0.82rem; color: #888888; letter-spacing: 0.3px; margin-top: 0.5rem; } .footer-addons select { appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.04) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e8eaed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center; color: #444444; font-size: 0.88rem; font-weight: 500; padding: 10px 40px 10px 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12); outline: none; cursor: pointer; width: 220px; transition: all 0.3s ease; } .footer-addons select:hover, .footer-addons select:focus { border-color: rgba(232, 234, 237, 0.6); color: #111111; background-color: rgba(0, 0, 0, 0.04); box-shadow: 0 0 15px rgba(232, 234, 237, 0.15); } .footer-addons select option { background-color: #ffffff; color: #333333; padding: 10px; } /* Duplicate footer rule cleaned up */ /* Single Floating Inquiry Badge Button (100% Flat, Blurless & Crisp) */ .icon-inquiry { display: block; width: 19px; height: 19px; background-color: #ffffff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; margin-bottom: 2px; transition: background-color 0.25s ease, transform 0.25s ease; } .icon-top { display: block; width: 26px; height: 26px; background-color: #ffffff; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: background-color 0.25s ease, transform 0.25s ease; } /* Top Button (100% Flat, Blurless & Crisp) */ .btn-top { position: fixed; right: 25px; bottom: 25px; width: 62px; height: 62px; background: #0f141c; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.35s ease, visibility 0.35s ease; } .btn-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .btn-top:hover { background: #ffffff; border-color: #0f141c; color: #0f141c; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35) !important; transform: translateY(-4px); } .btn-top:hover .icon-top { background-color: #0f141c; } @media screen and (max-width: 900px) { .btn-top { right: 16px !important; bottom: 85px !important; width: 54px !important; height: 54px !important; } .scroll-down-indicator { bottom: 150px !important; } } /* Main Video Popup */ .main-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0.3s; } .main-popup-overlay.hidden { opacity: 0; visibility: hidden; } .main-popup-content { position: relative; width: 90%; max-width: 1000px; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.6); animation: popupSmoothIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes popupSmoothIn { 0% { transform: translateY(40px) scale(0.98); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } .main-popup-content video { width: 100%; aspect-ratio: 16 / 9; display: block; } .popup-footer-bar { display: flex; justify-content: space-between; align-items: center; background: #000; padding: 15px 20px; color: #fff; font-size: 0.85rem; font-family: var(--font-body); } .footer-left label { cursor: pointer; display: flex; align-items: center; gap: 8px; color: #666666; } .footer-center { display: flex; gap: 30px; } .footer-center button, .footer-right button { background: transparent; border: none; color: #555555; font-size: 0.85rem; font-weight: 500; letter-spacing: 1px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: color 0.3s; } .footer-center button:hover, .footer-right button:hover { color: #111111; } /* Main Popup Mobile Responsiveness */ @media screen and (max-width: 768px) { /* --- SVG / Layout Component Style --- */ /* .main-popup-overlay { display: none !important; } */ .main-popup-content { width: 90% !important; max-width: 440px !important; border-radius: 12px !important; overflow: hidden !important; } .popup-footer-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; padding: 12px 16px !important; background: #0d0e12 !important; } .footer-left { flex: initial !important; padding-bottom: 0 !important; border-bottom: none !important; } .footer-left label { white-space: nowrap !important; font-size: 0.70rem !important; color: #aaa !important; } .footer-center { display: none !important; } .footer-right button { font-size: 0.82rem !important; font-weight: 700 !important; color: #e8eaed !important; letter-spacing: 0.5px !important; } } /* ========================================================================== Responsive Design (Media Queries) ========================================================================== */ /* --- SVG / Layout Component Style --- */ .mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; z-index: 1100; padding: 0; gap: 0; position: relative; } .mobile-menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.25s ease, top 0.35s cubic-bezier(0.23, 1, 0.32, 1); position: absolute; } .mobile-menu-toggle span:nth-child(1) { top: 14px; } .mobile-menu-toggle span:nth-child(2) { top: 21px; } .mobile-menu-toggle span:nth-child(3) { top: 28px; } .mobile-menu-toggle.active span:nth-child(1) { top: 21px; transform: rotate(45deg); } .mobile-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .mobile-menu-toggle.active span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* body scroll lock when menu is open */ body.mobile-nav-open { overflow: hidden; } /* --- SVG / Layout Component Style --- */ @media screen and (max-width: 1024px) { .p-hero-mask { padding-top: 80px; align-items: flex-start; overflow-y: auto; } .p-hero-inner { margin-top: auto; margin-bottom: auto; } .header { padding: 0 1.5rem; height: 68px; /* Remove transparent!important so JS scrolled class can apply background */ box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; } /* 筌롫뗀????占??????占쎈쐭 ?占?占쏙옙??fixed占??占쎌쥙??(KOR/ENG, 筌띾맧?占? 嚥≪뮄????占?癰귣똻?? */ .header.menu-open { background: #ffffff !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1100 !important; } .header.menu-open .logo img { /* colored logo maintained */ } .header.menu-open .mobile-menu-toggle span { background: #000000 !important; } /* Hide desktop mega-nav and bg, but keep header-utils (KOR/ENG) */ .mega-nav, .mega-bg { display: none !important; } .header-utils { display: flex !important; align-items: center !important; margin-left: auto !important; margin-right: 4px !important; } .header-utils a { font-size: 0.78rem !important; } /* When mobile menu is open, switch color to dark */ .header.menu-open .header-utils a { color: #333333 !important; } .header.menu-open .header-utils a.active { color: #e63946 !important; font-weight: 700; } .header.menu-open .header-utils .divider { color: rgba(0,0,0,0.25) !important; } /* 筌뤴뫀占???占? 甕곌쑵??(筌띾맧?占?3占?/ X ?袁⑹뵠?? ?占쎌쥙??獄쏄퀣??*/ .mobile-menu-toggle { display: flex !important; position: relative !important; z-index: 1200 !important; flex-shrink: 0 !important; margin-left: 8px !important; } /* === Mobile Drawer Panel (순수 여백형 심플 클린 & 하단 여백 최소화) === */ .header.menu-open .mega-nav { display: block !important; position: fixed; top: 68px; left: 0; width: 100%; height: calc(100dvh - 68px); background: #ffffff !important; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.5rem 1.6rem 90px !important; z-index: 999; animation: drawerSlideIn 0.22s ease-out both; } @keyframes drawerSlideIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* === Nav List === */ .header.menu-open .nav-list { display: flex !important; flex-direction: column !important; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* === Nav Item (순차 등장 스태거 페이드업 모션) === */ .header.menu-open .nav-item { display: block !important; width: 100% !important; height: auto !important; position: static !important; background: transparent !important; border: none !important; border-bottom: none !important; padding: 0 0 1.5rem 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; text-align: left !important; opacity: 0; animation: navItemFadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .header.menu-open .nav-item:nth-child(1) { animation-delay: 0.04s; } .header.menu-open .nav-item:nth-child(2) { animation-delay: 0.08s; } .header.menu-open .nav-item:nth-child(3) { animation-delay: 0.12s; } .header.menu-open .nav-item:nth-child(4) { animation-delay: 0.16s; } .header.menu-open .nav-item:nth-child(5) { animation-delay: 0.20s; } .header.menu-open .nav-item:nth-child(6) { animation-delay: 0.24s; } .header.menu-open .nav-item:nth-child(7) { animation-delay: 0.28s; } @keyframes navItemFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .header.menu-open .nav-item:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* === 모바일 대메뉴 카테고리 (Inter/Montserrat 볼드 산세리프) === */ .header.menu-open .nav-link { display: block !important; width: 100% !important; height: auto !important; padding: 0 0 0.65rem 0 !important; font-family: "Inter", "Montserrat", -apple-system, sans-serif !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.12em !important; color: #888888 !important; text-transform: uppercase !important; line-height: 1 !important; cursor: default !important; pointer-events: none !important; border: none !important; border-bottom: none !important; margin: 0 !important; background: transparent !important; text-align: left !important; } .header.menu-open .nav-link::before, .header.menu-open .nav-link::after { display: none !important; } /* === 모바일 서브메뉴 리스트 === */ .header.menu-open .mega-dropdown { display: block !important; position: static !important; top: auto !important; left: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; width: 100% !important; z-index: auto !important; } .header.menu-open .mega-dropdown ul { display: block !important; list-style: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; } .header.menu-open .mega-dropdown li { display: block !important; margin: 0 !important; border: none !important; text-align: left !important; } /* === 모바일 서브메뉴 텍스트 (터치/호버 부드러운 우측 슬라이드 & 컬러 모션) === */ .header.menu-open .mega-dropdown a { display: inline-block !important; padding: 0.16rem 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif !important; font-size: 1.02rem !important; font-weight: 600 !important; color: #111111 !important; letter-spacing: -0.035em !important; line-height: 1.25 !important; text-decoration: none !important; border: none !important; border-radius: 0 !important; background: transparent !important; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease !important; cursor: pointer !important; text-align: left !important; -webkit-tap-highlight-color: transparent !important; outline: none !important; transform: translateX(0); } .header.menu-open .mega-dropdown a::before, .header.menu-open .mega-dropdown a::after { display: none !important; } /* 호버 & 터치 인터랙션 모션 (손가락 터치/마우스오버 즉시 반응) */ .header.menu-open .mega-dropdown a:hover, .header.menu-open .mega-dropdown a:focus, .header.menu-open .mega-dropdown a:active, .header.menu-open .mega-dropdown a.touch-active { color: #e63946 !important; transform: translateX(8px) !important; background: transparent !important; box-shadow: none !important; } /* 대메뉴(ABOUT, PRODUCT 등) 클릭/터치 시 인터랙션 */ .header.menu-open .nav-link { transition: color 0.2s ease, transform 0.2s ease !important; pointer-events: auto !important; } .header.menu-open .nav-link:hover, .header.menu-open .nav-link:active, .header.menu-open .nav-link.touch-active { color: #e63946 !important; transform: translateX(5px) !important; } /* Hero Responsive Typography */ .slide-content { flex-direction: column; align-items: center; padding: 0 2rem; } .slide-title { font-size: 2.2rem; } br.hide-on-mobile { display: none !important; } @media screen and (max-width: 480px) { .slide-title { font-size: 1.6rem !important; } } .slide-text-right { margin-top: 1rem; margin-bottom: 0; transform: translateY(30px); padding: 0.6rem 1.2rem; text-align: center; } .slide-text-right p { font-size: 0.98rem; text-align: center; } .swiper-slide-active .slide-text-right { transform: translateY(0); } .swiper-slide { padding-bottom: 26vh !important; } .custom-pagination { left: 50% !important; transform: translateX(-50%) !important; bottom: 18vh !important; /* Adjusted to sit between text and scroll indicator */ top: auto !important; justify-content: center; } /* Products V2 */ .products-section-v2 { padding: 4rem 1.5rem; } .products-header h2 { font-size: 2.2rem; } .horizontal-menu { width: 100%; overflow-x: auto; justify-content: flex-start; padding: 6px; -webkit-overflow-scrolling: touch; } .product-tab { padding: 0.6rem 1.2rem; font-size: 0.95rem; flex-shrink: 0; } .product-info-panel { flex-direction: column; align-items: flex-start; text-align: left; padding: 1.5rem; gap: 1.2rem; } /* Core Tech */ .remo-section { padding: 4rem 2rem; } .remo-header h2 { font-size: 1.8rem; line-height: 1.3; } .remo-header.flex-between { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .remo-header.flex-between .remo-btn-dark { align-self: flex-start; width: auto; font-size: 0.9rem; } } /* ========================================================================== Interview Page Redesign (Clean Premium Editorial) ========================================================================== */ /* --- Interview Section (Obsidian Dark - 2x2 Height Balance) --- */ .interview-section { padding: 90px 5%; max-width: 1440px; margin: 0 auto; background: #050505; display: grid; grid-template-columns: 1fr 1.25fr; gap: 4.5rem; align-items: center; /* Perfect vertical height alignment between left cards and right video */ } .interview-text { width: 100%; } .interview-text h2 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: #ffffff; line-height: 1.35; margin-bottom: 0.8rem; letter-spacing: -0.02em; word-break: keep-all; } .interview-text h2 span { color: #e8eaed; } .interview-text p.sub { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 2rem; } /* 2x2 Balanced Compact Feature Grid */ .interview-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); /* 2 Columns x 2 Rows */ gap: 1.1rem; } .interview-features li { position: relative; padding: 1.2rem 1.5rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.92); font-weight: 600; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); word-break: keep-all; display: flex; align-items: center; justify-content: flex-start; gap: 0.8rem; text-align: left; line-height: 1.4; min-height: 72px; } .interview-features li:hover { border-color: rgba(232, 234, 237, 0.45); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 234, 237, 0.18); } .interview-features li .icon-check-inline { width: 24px; height: 24px; flex-shrink: 0; color: #e8eaed; margin-top: 0; } .interview-image { flex: 1; width: 100%; } /* Premium HTML5 Video Player container */ .interview-video-container { position: relative; width: 100%; aspect-ratio: 16/9; /* 16:9 widescreen player */ background: #050505; border-radius: 24px; overflow: hidden; border: 1px solid rgba(232, 234, 237, 0.35); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 25px rgba(232, 234, 237, 0.15); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .interview-video-container:hover { border-color: rgba(232, 234, 237, 0.65); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(232, 234, 237, 0.3); } .interview-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Custom Play Preview Overlay */ .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(5, 5, 5, 0.65) 100%); transition: opacity 0.5s ease, background 0.5s ease; backdrop-filter: blur(2px); } .video-overlay:hover { background: radial-gradient(circle, rgba(0, 0, 0, 0.4) 0%, rgba(5, 5, 5, 0.75) 100%); } .video-overlay.hide { opacity: 0; pointer-events: none; } /* Modern Silver Frosted Glass Play Button */ .play-trigger-btn { position: relative; z-index: 2; width: 86px; height: 86px; background: rgba(232, 234, 237, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(232, 234, 237, 0.45); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(232, 234, 237, 0.3); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); animation: goldPlayPulse 3s infinite ease-in-out; } .video-overlay:hover .play-trigger-btn { transform: scale(1.12); background: rgba(232, 234, 237, 0.3); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(232, 234, 237, 0.5); border-color: rgba(232, 234, 237, 0.7); } .play-trigger-btn .vc-icon-trigger { display: inline-block; width: 32px; height: 32px; margin-left: 4px; transition: transform 0.3s ease; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); } .play-trigger-btn .vc-icon-trigger::before { content: ''; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* --- Section --- */ .video-overlay:hover .play-trigger-btn .vc-icon-trigger { transform: scale(1.08); } .video-overlay:hover .play-trigger-btn .vc-icon-trigger::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); } @keyframes goldPlayPulse { 0%, 100% { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 234, 237, 0.25); } 50% { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 35px rgba(232, 234, 237, 0.5); } } /* === Custom Video Controls Bar === */ .vc-controls { position: absolute; bottom: 0; left: 0; right: 0; z-index: 20; padding: 15px 20px 15px; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; } .vc-controls.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* --- SVG / Layout Component Style --- */ .vc-progress-wrap { padding: 6px 0 4px; cursor: pointer; } .vc-progress-bar { position: relative; height: 4px; background: rgba(255,255,255,.22); border-radius: 4px; overflow: visible; } .vc-progress-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #e8eaed, #ffe5a0); border-radius: 4px; transition: width .1s linear; } .vc-progress-thumb { position: absolute; top: 50%; left: 0%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #e8eaed; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 8px rgba(232, 234, 237,.8); transition: left .1s linear; opacity: 0; transition: opacity .2s; } .vc-progress-bar:hover .vc-progress-thumb { opacity: 1; } /* ===*/ .vc-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; } /* --- SVG / Layout Component Style --- */ .vc-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.8); border-radius: 8px; transition: color .2s, background .2s; padding: 0; flex-shrink: 0; } .vc-btn:hover { color: #e8eaed; background: rgba(232, 234, 237,.12); } /* --- SVG / Layout Component Style --- */ .vc-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* --- SVG / Layout Component Style --- */ .vc-time { font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.8); letter-spacing: 0; white-space: nowrap; margin-left: 6px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; } /* Responsive adjust */ @media screen and (max-width: 1024px) { .interview-section { display: flex; flex-direction: column; gap: 4rem; padding: 5rem 5%; margin-top: 2rem; } .interview-text h2 { font-size: 2.4rem; text-align: center; word-break: keep-all; } .interview-text p.sub { text-align: center; margin-bottom: 2.5rem; } } @media screen and (max-width: 768px) { .interview-features { gap: 1.1rem; } .interview-text h2 { font-size: 2rem; } .interview-section { padding: 28px 5% !important; gap: 2rem; } } @media screen and (max-width: 600px) { .interview-features { grid-template-columns: 1fr; gap: 1rem; } } @media screen and (max-width: 480px) { .interview-text h2 { font-size: 1.7rem; } .interview-features li { padding: 1rem 1.2rem; font-size: 0.9rem; min-height: 60px; } } /* ========================================================================== Business Philosophy Page Redesign (business.html - Obsidian Dark Glassmorphism) ========================================================================== */ .business-philosophy-section { padding: 60px 5% 4rem; max-width: 1200px; margin: 0 auto; background: #050505; } .business-container { max-width: 1600px; margin: 0 auto; } .business-header { text-align: center; } .business-motto { display: inline-block; padding: 0.5rem 1.4rem; background: rgba(232, 234, 237, 0.12); color: #e8eaed; border: 1px solid rgba(232, 234, 237, 0.3); border-radius: 30px; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 1.2rem; } .business-title { font-family: var(--font-heading); font-size: 3.2rem; font-weight: 700; color: #ffffff; letter-spacing: -0.02em; margin-bottom: 0.8rem; } .business-sub-english { font-family: var(--font-heading); font-size: 1.15rem; color: #e8eaed; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2.5rem; text-align: center; } /* Philosophy Hero Quote Card */ .philosophy-hero-card { position: relative; padding: 1rem 0; margin-bottom: 2rem; text-align: center; } .quote-symbol { font-size: 4rem; line-height: 0.7; font-family: Georgia, serif; color: #e8eaed; opacity: 0.9; user-select: none; text-align: center; margin-bottom: 0; } .main-quote { font-size: 1.25rem; line-height: 1.8; font-weight: 300; color: rgba(255, 255, 255, 0.85); margin-bottom: 2rem; position: relative; z-index: 2; padding-top: 0.5rem; word-break: keep-all; } .quote-sub-desc { font-size: 1.15rem; line-height: 1.8; color: rgba(255, 255, 255, 0.82); position: relative; z-index: 2; padding: 18px 16px; text-align: center; cursor: pointer; transition: all 0.25s ease; position: relative; } /* Pillars Grid */ .philosophy-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .pillar-card { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; padding: 2.2rem 2rem; backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .pillar-card:hover { transform: translateY(-5px); border-color: rgba(232, 234, 237, 0.35); background: rgba(255, 255, 255, 0.07); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 234, 237, 0.1); } .pillar-number { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: #e8eaed; margin-bottom: 1rem; } .pillar-card h3 { font-size: 1.35rem; font-weight: 700; color: #ffffff; margin-bottom: 0.8rem; font-family: var(--font-heading); } .pillar-card p { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.75); word-break: keep-all; } /* Section 2: Paradigm Showcase */ .business-paradigm-section { padding: 6rem 5% 6rem; max-width: 1200px; margin: 0 auto; background: #050505; } .philosophy-card-wrapper, .paradigm-card-wrapper { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 32px; padding: 4rem 3.5rem; backdrop-filter: blur(16px); box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5); } .badge-blue { display: inline-block; padding: 0.4rem 1.2rem; background: rgba(232, 234, 237, 0.15); color: #e8eaed; border: 1px solid rgba(232, 234, 237, 0.35); border-radius: 20px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 1rem; } .paradigm-header h2 { font-family: var(--font-heading); font-size: 2.8rem; font-weight: 700; color: #ffffff; margin-bottom: 1.5rem; letter-spacing: -0.02em; } .paradigm-header { text-align: center; } .paradigm-desc { font-size: 1.2rem; line-height: 1.8; color: rgba(255, 255, 255, 0.8); max-width: 900px; margin: 0 auto 3.5rem auto; word-break: keep-all; font-weight: 500; } .paradigm-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .paradigm-feature-card { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 2rem; backdrop-filter: blur(12px); transition: all 0.35s ease; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 20px; align-items: flex-start; } .paradigm-feature-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(232, 234, 237, 0.3); transform: translateY(-4px); } .paradigm-feature-card h4 { grid-column: 2; grid-row: 1; font-size: 1.2rem; font-weight: 700; color: #ffffff; margin-top: 0; margin-bottom: 0.6rem; } .paradigm-feature-card p { grid-column: 2; grid-row: 2; font-size: 0.95rem; color: rgba(255, 255, 255, 0.72); line-height: 1.6; margin: 0; } .feature-icon-box { grid-column: 1; grid-row: 1 / 3; width: 54px; height: 54px; background: rgba(232, 234, 237, 0.12); border: 1px solid rgba(232, 234, 237, 0.25); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 0; } /* Business Page Responsive */ @media screen and (max-width: 1024px) { .philosophy-pillars { grid-template-columns: 1fr; gap: 1.2rem; } .paradigm-features-grid { grid-template-columns: 1fr; gap: 1.2rem; } .business-title { font-size: 2.4rem; word-break: keep-all; } .paradigm-header h2 { font-size: 2.2rem; } .philosophy-hero-card { padding: 2rem 0; } .paradigm-card-wrapper { padding: 3rem 2rem; } } @media screen and (max-width: 768px) { .sw-hero { padding: 85px 20px 25px; } .business-philosophy-section { padding: 50px 5% 3rem; } .business-title { font-size: 2rem; } .quote-symbol { font-size: 4rem; margin-bottom: 10px !important; } .paradigm-header h2 { font-size: 1.8rem; } .business-sub-english { font-size: 1.05rem !important; margin-bottom: 1.5rem !important; } .philosophy-hero-card { padding: 1rem 0; margin-bottom: 2rem; } .main-quote { font-size: 1.15rem; margin-bottom: 1.5rem; } } @media screen and (max-width: 480px) { .sw-hero { padding: 75px 15px 20px; } .business-philosophy-section { padding: 35px 5% 2rem; } .business-title { font-size: 1.7rem; } .quote-symbol { font-size: 3rem; margin-bottom: 5px !important; } .paradigm-header h2 { font-size: 1.5rem; } .business-sub-english { font-size: 0.85rem !important; margin-bottom: 1rem !important; } .philosophy-hero-card { padding: 0.5rem 0; margin-bottom: 1.5rem; } .main-quote { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1rem; } .sw-hero-title { font-size: 2.1rem !important; margin-bottom: 12px; } .sw-tag { font-size: 0.7rem; padding: 5px 10px; } } /* ========================================================================== 100% Widescreen Cinematic Video Banner Sections (PERFECT REALISM & LUXURY EXPERIENCE) ========================================================================== */ .cinematic-video-section { position: relative; width: 100vw; left: 0; right: auto; margin-left: 0; margin-right: 0; height: 100dvh; min-height: 600px; background: #000000; overflow: hidden; } .cinematic-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.3); /* Increased brightness for a more vivid look */ } .cinematic-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 max(4rem, calc(50vw - 800px + 4rem)); z-index: 2; } .cinematic-overlay.left-align { justify-content: flex-start; background: transparent; } .cinematic-overlay.right-align { justify-content: flex-end; background: transparent; } .cinematic-content { max-width: 600px; color: #ffffff; text-shadow: 0px 3px 18px rgba(0,0,0,0.85), 0px 0px 6px rgba(0,0,0,0.6); } .gold-motto-badge, .red-motto-badge { display: inline-block; color: #ff3b30; /* High-End Tech Cyan Teal Point */ font-size: 0.75rem; font-weight: 800; letter-spacing: 3px; padding: 6px 18px; border: 1px solid rgba(255, 59, 48, 0.3); border-radius: 30px; background: rgba(255, 59, 48, 0.06); margin-bottom: 1.2rem; text-transform: uppercase; font-family: var(--font-heading); } .cinematic-title { font-family: var(--font-heading); font-size: 4.2rem; font-weight: 300; /* Thin high-fashion luxury typography */ line-height: 1.1; letter-spacing: 2px; color: #ffffff; margin-bottom: 2rem; text-transform: uppercase; } .cinematic-desc { font-size: 1.25rem; line-height: 1.8; color: rgba(255, 255, 255, 0.85); font-weight: 400; margin-bottom: 2.5rem; word-break: keep-all; } .btn-outline-gold { display: inline-flex; align-items: center; gap: 8px; padding: 0.9rem 2.2rem; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); color: #ffffff; font-size: 0.9rem; font-weight: 600; letter-spacing: 1px; text-decoration: none; border-radius: 50px; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .btn-outline-gold:hover { border-color: #ff3b30; color: #ff3b30; background: rgba(255, 59, 48, 0.12); box-shadow: 0 0 20px rgba(255, 59, 48, 0.2); transform: translateY(-3px); } /* Cinematic Responsive */ @media screen and (max-width: 1024px) { .cinematic-video-section { height: 70vh; min-height: 500px; } .cinematic-title { font-size: 3.2rem; } .cinematic-desc { font-size: 1.1rem; } } @media screen and (max-width: 768px) { .cinematic-video-section { height: 40vh; min-height: 300px; } .cinematic-overlay { padding: 0 6%; align-items: flex-end !important; padding-bottom: 50px !important; justify-content: center !important; text-align: center; } .cinematic-overlay.left-align, .cinematic-overlay.right-align { background: transparent; } .gold-motto-badge, .red-motto-badge { margin-bottom: 1rem; } .cinematic-title { font-size: 2.1rem; line-height: 1.25; margin-bottom: 1.2rem; } .cinematic-desc { font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.8rem; } .btn-outline-gold { font-size: 0.75rem; padding: 0.7rem 1.6rem; } } /* ========================================================================== Product Detail Page Styles (product/udr.html - Modern Apple / Titleist Style) ========================================================================== */ .product-container { max-width: 1300px; margin: 0 auto; padding: 0 4%; } .bg-light-gray { background: #f8fafc; } /* Sub Page Navigation Bar (Segmented Control Tab Bar) */ .sub-page-nav { position: sticky; top: 80px; width: 100%; background: rgba(10, 12, 16, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(232, 234, 237, 0.25); z-index: 100; padding: 0.75rem 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); text-align: center; } .sub-nav-inner, .sub-nav-container { max-width: 1200px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 6px 8px; background: rgba(22, 26, 36, 0.92); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1); } .sub-nav-inner::-webkit-scrollbar, .sub-nav-container::-webkit-scrollbar { display: none; } .sub-nav-item { font-size: 0.95rem; font-weight: 700; color: #ffffff !important; text-decoration: none; padding: 0.65rem 1.6rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; font-family: var(--font-heading); display: inline-flex; align-items: center; justify-content: center; letter-spacing: -0.01em; cursor: pointer; } .sub-nav-item:hover { color: #ffe6a3 !important; background: rgba(232, 234, 237, 0.2); border-color: rgba(232, 234, 237, 0.5); box-shadow: 0 3px 12px rgba(232, 234, 237, 0.25); transform: translateY(-1px); } .sub-nav-item.active { color: #000000 !important; background: linear-gradient(135deg, #fff0c7 0%, #e8eaed 50%, #d49e43 100%) !important; font-weight: 800; font-size: 0.95rem; border: 1px solid #ffffff !important; box-shadow: 0 4px 18px rgba(232, 234, 237, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; transform: none; } /* Sub-page nav: tablet horizontal scroll */ @media screen and (max-width: 1024px) { .sub-nav-inner, .sub-nav-container { height: auto; min-height: 48px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; justify-content: safe center; flex-wrap: nowrap; gap: 0.5rem; padding: 6px 12px; scrollbar-width: none; } .sub-nav-inner::-webkit-scrollbar, .sub-nav-container::-webkit-scrollbar { display: none; } .sub-nav-item { font-size: 0.9rem; white-space: nowrap; flex-shrink: 0; padding: 0.5rem 1.1rem; margin: 0; display: inline-flex; align-items: center; justify-content: center; } .sub-nav-item:hover::after, .sub-nav-item.active::after { width: 100%; left: 0; } } /* Product Hero Section */ .product-hero-section { position: relative; width: 100vw; left: 0; right: auto; margin-left: 0; margin-right: 0; height: 85vh; min-height: 650px; background: #000000; overflow: hidden; } .product-hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1); } .product-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: 0 8%; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%); z-index: 2; } .product-hero-content { max-width: 700px; color: #ffffff; } .product-tag-gold { display: inline-block; color: #e63946; font-size: 0.85rem; font-weight: 800; letter-spacing: 3px; margin-bottom: 1rem; font-family: var(--font-heading); } .product-hero-title { font-size: 5rem; font-weight: 900; font-family: var(--font-heading); letter-spacing: 2px; line-height: 1; margin-bottom: 1rem; color: #ffffff; } .product-hero-slogan { font-size: 1.8rem; font-weight: 700; color: #ffffff; margin-bottom: 1rem; word-break: keep-all; } .product-hero-desc { font-size: 1.1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.85); margin-bottom: 2.5rem; word-break: keep-all; } .product-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .metric-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; } .metric-val { font-size: 1.8rem; font-weight: 900; color: #ffffff; font-family: var(--font-heading); } .metric-lbl { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-top: 0.2rem; } /* Product Lineup Studio Bar */ .product-lineup-bar-section { background: #ffffff; border-bottom: 1px solid rgba(15, 23, 42, 0.08); position: sticky; top: 80px; z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,0.03); } .product-lineup-bar { display: flex; align-items: center; gap: 2rem; overflow-x: auto; padding: 1rem 0; } .p-bar-item { font-size: 1.05rem; font-weight: 700; color: #64748b; text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 20px; transition: all 0.3s ease; white-space: nowrap; font-family: var(--font-heading); } .p-bar-item:hover, .p-bar-item.active { color: #1a73e8; background: rgba(26, 115, 232, 0.08); } /* Feature Sections */ .product-feature-section { padding: 7rem 0; } /* Product Gallery Grid (udr1_1, udr1_2, udr1_3) */ .product-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; } .p-gallery-card { background: #ffffff; border-radius: 24px; overflow: hidden; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); border: 1px solid rgba(15, 23, 42, 0.08); transition: transform 0.3s ease; } .p-gallery-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(15, 23, 42, 0.1); } .p-gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Core Highlights Box & Grid */ .core-highlights-box { background: #f8fafc; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 28px; padding: 3rem; } .feature-check-grid { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; } .feature-check-grid li { display: flex; gap: 1.2rem; align-items: flex-start; } .feature-check-grid li p { font-size: 1.05rem; color: #334155; line-height: 1.6; margin: 0; } .feature-check-grid li.full-width-highlight { grid-column: 1 / -1; background: #ffffff; border: 2px solid #d4af37; border-radius: 20px; padding: 1.5rem 2rem; box-shadow: 0 8px 25px rgba(230, 57, 70, 0.06); } .feature-check-grid li.full-width-highlight p { font-size: 1.15rem; color: #0f172a; } .gold-check { background: #d4af37 !important; color: #0b1521 !important; } /* Feature Image Card */ .feature-image-card { position: relative; width: 100%; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12); border: 1px solid rgba(15, 23, 42, 0.08); } .feature-image-card img { width: 100%; display: block; object-fit: cover; } /* Hardware Main Card (udr1_6) */ .hardware-main-card { background: #ffffff; border-radius: 32px; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08); padding: 2rem; text-align: center; } .hw-main-img-box img { max-width: 100%; height: auto; border-radius: 20px; } @media screen and (max-width: 1024px) { .product-gallery-grid { grid-template-columns: 1fr; } .feature-check-grid { grid-template-columns: 1fr; } } .feature-split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .feature-split-layout.reverse { grid-template-columns: 1fr 1fr; } .feature-video-frame { position: relative; width: 100%; background: #0f172a; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); aspect-ratio: 16 / 9; } .feature-bg-video { width: 100%; height: 100%; object-fit: cover; } .media-badge { position: absolute; top: 1.5rem; left: 1.5rem; background: rgba(11, 21, 33, 0.8); backdrop-filter: blur(5px); color: #ffffff; padding: 0.4rem 1rem; border-radius: 20px; font-weight: 800; font-size: 0.75rem; letter-spacing: 1px; } .feature-sub-badge { display: inline-block; color: #1a73e8; font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; margin-bottom: 0.8rem; font-family: var(--font-heading); } .feature-heading { font-size: 2.8rem; font-weight: 800; color: #0f172a; line-height: 1.25; margin-bottom: 1.2rem; font-family: var(--font-heading); letter-spacing: -1px; } .feature-lead { font-size: 1.15rem; color: #64748b; line-height: 1.7; margin-bottom: 2.5rem; word-break: keep-all; } .feature-check-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; } .feature-check-list li { display: flex; gap: 1.2rem; align-items: flex-start; } .check-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(232, 234, 237, 0.15); border: 1px solid rgba(232, 234, 237, 0.35); color: #e8eaed; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; margin-top: 2px; box-shadow: 0 0 12px rgba(232, 234, 237, 0.25); } .check-content h4 { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin-bottom: 0.3rem; } .check-content p { font-size: 0.95rem; color: #64748b; line-height: 1.5; } /* Physics Cards Grid */ .physics-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; } .p-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 20px; padding: 1.5rem 1.8rem; box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.3s; } .p-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); } .p-card-number { font-size: 0.85rem; font-weight: 900; color: #1a73e8; font-family: var(--font-heading); margin-bottom: 0.4rem; } .p-card h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 0.4rem; } .p-card p { font-size: 0.95rem; color: #64748b; line-height: 1.5; } /* Hardware Ecosystem */ .product-hardware-section { padding: 7rem 0; } .section-header { max-width: 700px; margin: 0 auto 3.5rem auto; } .section-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-top: 0.5rem; margin-bottom: 1rem; font-family: var(--font-heading); } .section-header p { font-size: 1.15rem; color: #64748b; } .hardware-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .hw-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 24px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.03); transition: transform 0.3s ease; } .hw-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); } .hw-img-box { width: 100%; height: 220px; background: #f1f5f9; overflow: hidden; } .hw-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .hw-card:hover .hw-img-box img { transform: scale(1.05); } .hw-info { padding: 1.8rem; } .hw-tag { display: inline-block; font-size: 0.75rem; font-weight: 900; color: #1a73e8; letter-spacing: 1px; margin-bottom: 0.4rem; font-family: var(--font-heading); } .hw-info h3 { font-size: 1.35rem; font-weight: 800; color: #0f172a; margin-bottom: 0.6rem; } .hw-info p { font-size: 0.95rem; } /* ========================================================================= Next-Gen Ultra-Modern Product Detail Styles (Deep Luxury Obsidian Black Theme) ========================================================================= */ .product-page-body { background-color: #111113; color: #ffffff; } .p-container { max-width: 1400px; margin: 0 auto; padding: 0 5%; } .bg-light { background-color: #070709; } /* 1. Widescreen Hero Cinema Stage */ .p-hero-cinema { position: relative; width: 100vw; left: 0; right: auto; margin-left: 0; margin-right: 0; height: 42vh; min-height: 350px; background: #050505; overflow: hidden; display: flex; align-items: center; } .p-hero-cinema:has(.p-hero-bg-video) { height: 86vh; min-height: 680px; } .p-hero-bg-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1); } .p-hero-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.5) 60%, transparent 100%); display: flex; align-items: center; padding: 60px 8% 0 8%; box-sizing: border-box; z-index: 2; } .p-hero-inner { max-width: 820px; color: #ffffff; } .p-badge-gold { display: inline-block; color: #e63946; font-size: 0.9rem; font-weight: 800; letter-spacing: 4px; margin-bottom: 1.2rem; font-family: var(--font-heading); } .p-hero-title { font-size: 3.2rem; font-weight: 800; font-family: var(--font-heading); letter-spacing: -0.5px; line-height: 1.25; margin-bottom: 0.8rem; color: #ffffff; } .p-hero-sub { font-size: 1.15rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); margin-bottom: 1.8rem; line-height: 1.6; } .p-hero-chips { display: flex; gap: 1.4rem; } .p-chip { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 1.2rem 1.6rem; display: flex; flex-direction: column; } .p-chip-num { font-size: 1.8rem; font-weight: 900; color: #ffffff; font-family: var(--font-heading); } .p-chip-label { font-size: 0.88rem; color: rgba(255, 255, 255, 0.78); margin-top: 3px; } /* 2. Sticky Product Studio Bar (Dark Glass) */ .p-sticky-nav { position: sticky; top: 80px; background: rgba(5, 5, 5, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); z-index: 100; box-shadow: 0 4px 25px rgba(0,0,0,0.4); } .p-sticky-container { max-width: 1400px; margin: 0 auto; display: flex; gap: 1.5rem; justify-content: center; overflow-x: auto; padding: 0.9rem 5%; } .p-nav-link { font-size: 1rem; font-weight: 600; color: rgba(255, 255, 255, 0.65); text-decoration: none; padding: 0.55rem 1.2rem; border-radius: 30px; transition: all 0.3s ease; white-space: nowrap; font-family: var(--font-heading); border: 1px solid transparent; } .p-nav-link:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } .p-nav-link.active { color: #e8eaed; background: rgba(232, 234, 237, 0.12); border-color: rgba(232, 234, 237, 0.35); box-shadow: 0 4px 15px rgba(232, 234, 237, 0.18); } /* 4. Apple Bento Box Grid System (Dark Obsidian Glass) */ .p-bento-section { padding: 3rem 0 5rem 0; background: #161618; border-top: 1px solid rgba(255, 255, 255, 0.05); } .p-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } .bento-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(20px); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .bento-card:hover { transform: translateY(-10px); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* Digital Kiosk Display Header Frame */ .monitor-bezel { width: 100%; background: #020407; border-bottom: 1px solid rgba(255, 255, 255, 0.03); overflow: hidden; } .monitor-bar { background: transparent; padding: 1.2rem 1.5rem 0.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: none; position: relative; } .monitor-bar::before { display: none; } .m-status-live { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 800; color: #38bdf8; letter-spacing: 1px; font-family: var(--font-heading); } .m-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8; } .m-title-pill { font-size: 0.8rem; font-weight: 800; color: #ffffff; background: transparent; border: none; padding: 0; letter-spacing: 1px; font-family: var(--font-heading); opacity: 0.9; } .m-spec-tag { font-size: 0.68rem; font-weight: 800; color: rgba(255, 255, 255, 0.45); letter-spacing: 1px; font-family: var(--font-heading); } .monitor-img-wrap { width: 100%; aspect-ratio: 16 / 9; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; } .monitor-img-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; transition: transform 0.4s ease; } .bento-card:hover .monitor-img-wrap img { transform: scale(1.03); } .bento-content { padding: 2.5rem; } .bento-tag { display: inline-block; font-size: 0.78rem; font-weight: 900; color: #38bdf8; letter-spacing: 2px; margin-bottom: 0.6rem; font-family: var(--font-heading); } .bento-content h3 { font-size: 1.55rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; line-height: 1.35; } .bento-content p { font-size: 1.02rem; color: rgba(255, 255, 255, 0.72); line-height: 1.65; } /* Golden Bento Banner (Split 2-Column High Impact Layout) */ .bento-full-gold { grid-column: 1 / -1; background: radial-gradient(circle at 80% 50%, rgba(230, 57, 70, 0.06) 0%, transparent 60%), linear-gradient(135deg, #111d2e 0%, #070c14 100%); border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 36px; color: #ffffff; padding: 4.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(212, 175, 55, 0.08); } .gold-bento-layout { display: flex; justify-content: space-between; align-items: center; gap: 4rem; } .gold-bento-info { flex: 1; } .gold-badge-pill { display: inline-block; background: #d4af37; color: #0b1521; font-weight: 900; font-size: 0.88rem; padding: 0.45rem 1.25rem; border-radius: 24px; letter-spacing: 1.5px; margin-bottom: 1.4rem; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3); } .gold-bento-info h2 { font-size: 2.6rem; font-weight: 900; color: #ffffff; margin-bottom: 1.2rem; line-height: 1.3; letter-spacing: -1px; } .gold-bento-info p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); line-height: 1.75; } .gold-bento-stats { display: flex; gap: 1.5rem; flex-shrink: 0; } .gold-stat-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(212, 175, 55, 0.3); backdrop-filter: blur(12px); border-radius: 24px; padding: 2rem 2.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 170px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .g-stat-num { font-size: 2.5rem; font-weight: 900; color: #e63946; font-family: var(--font-heading); line-height: 1.1; margin-bottom: 0.4rem; } .g-stat-label { font-size: 0.88rem; font-weight: 700; color: rgba(255, 255, 255, 0.8); white-space: nowrap; } @media screen and (max-width: 1024px) { .gold-bento-layout { flex-direction: column; align-items: flex-start; gap: 2.5rem; } .gold-bento-stats { width: 100%; justify-content: flex-start; } } /* 5 & 6. Feature Split Rows */ .p-feature-section { padding: 5rem 0; background: #161618; border-top: 1px solid rgba(255, 255, 255, 0.05); } .p-feature-section.bg-light { background: #050505; } .p-feature-section.bg-white { background: #161618; } .p-split-media { display: flex; align-items: stretch; } .p-split-text { display: flex; flex-direction: column; justify-content: center; } .p-split-row { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 6rem; align-items: center; } .p-split-row.reverse { grid-template-columns: 0.9fr 1.1fr; } .p-card-media { position: relative; border-radius: 32px; overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); } .p-card-media img { width: 100%; display: block; object-fit: cover; } /* Crop top/bottom black letterbox margins from embedded screenshot images */ .p-card-media.crop-letterbox { overflow: hidden; } .p-card-media.crop-letterbox img { transform: scale(1.18); transform-origin: center center; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .p-card-media.crop-letterbox:hover img { transform: scale(1.23); } .p-media-label { position: absolute; top: 1.8rem; left: 1.8rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); color: #ffffff; padding: 0.5rem 1.2rem; border-radius: 30px; font-weight: 800; font-size: 0.8rem; letter-spacing: 1.5px; border: 1px solid rgba(255, 255, 255, 0.15); } .p-feature-title { font-size: 3.2rem; font-weight: 800; color: #ffffff; line-height: 1.25; margin-bottom: 1.2rem; font-family: var(--font-heading); letter-spacing: -1.5px; word-break: keep-all; } .p-feature-lead { font-size: 1.2rem; color: rgba(255, 255, 255, 0.78); line-height: 1.75; margin-bottom: 2.8rem; word-break: keep-all; } /* Clean Pill Badge Grid (Dark Theme) */ .p-pill-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .p-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 1.1rem 1.5rem; display: flex; align-items: center; gap: 1.2rem; font-size: 1.1rem; font-weight: 700; color: #ffffff; transition: transform 0.25s, background 0.25s; } .p-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(212, 175, 55, 0.4); transform: translateX(4px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .pill-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #f3e5ab); box-shadow: 0 0 12px rgba(212, 175, 55, 0.6); flex-shrink: 0; } /* Dark Feature Card */ .p-dark-feature-card { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 2.5rem; color: #ffffff; display: flex; flex-direction: column; gap: 1.8rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .p-dark-card-item h4 { font-size: 1.3rem; font-weight: 800; color: #ffffff; margin-bottom: 0.4rem; } .p-dark-card-item p { font-size: 0.98rem; color: rgba(255, 255, 255, 0.75); line-height: 1.6; } /* 7. Hardware Panorama Theater */ .p-hardware-theater { padding: 4rem 0; background: #050505; border-top: 1px solid rgba(255, 255, 255, 0.05); } .p-header-center h2 { font-size: 2.8rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; font-family: var(--font-heading); } .p-header-center p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 3rem; } .p-theater-card { background: #000000; border-radius: 32px; overflow: hidden; border: 1px solid rgba(212, 175, 55, 0.25); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4); padding: 2.5rem; text-align: center; } .p-theater-card img { max-width: 100%; border-radius: 20px; } /* 8. Spec Table (Dark Theme) */ .p-spec-section { padding: 4rem 0; background: #161618; border-top: 1px solid rgba(255, 255, 255, 0.05); } .p-spec-card { background: #000000; border: 1px solid rgba(212, 175, 55, 0.25); border-radius: 24px; padding: 2.5rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); max-width: 1000px; margin: 0 auto; } .p-spec-table { width: 100%; border-collapse: collapse; } .p-spec-table th, .p-spec-table td { padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.98rem; } .p-spec-table th { width: 20%; background: rgba(255, 255, 255, 0.06); color: #ffffff; font-weight: 800; text-align: left; } .p-spec-table td { color: rgba(255, 255, 255, 0.8); line-height: 1.6; } /* 9. CTA Box */ .p-btn-gold { display: inline-flex; align-items: center; gap: 8px; background: #d4af37; color: #0b1521; padding: 1.1rem 2.2rem; border-radius: 50px; font-weight: 800; font-size: 1rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); white-space: nowrap; box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3); } .p-btn-gold:hover { background: #f3cf65; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4); } /* Responsive */ @media screen and (max-width: 1024px) { .p-hero-title { font-size: 4rem; } .p-statement-heading { font-size: 2.4rem; } .p-bento-grid { grid-template-columns: 1fr; } .bento-span-2 { grid-column: span 1; } .p-split-row, .p-split-row.reverse { grid-template-columns: 1fr; gap: 2.5rem; } } @media screen and (max-width: 768px) { .p-hero-title { font-size: 3rem; } /* removed column flex for p-hero-chips */ .p-spec-table th, .p-spec-table td { display: block; width: 100%; } } /* Spec Sheet */ .product-spec-section { padding: 7rem 0; } .spec-table-card { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 24px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.03); } .spec-table { width: 100%; border-collapse: collapse; } .spec-table th, .spec-table td { padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(15, 23, 42, 0.06); font-size: 0.98rem; } .spec-table th { width: 18%; background: #f8fafc; color: #0f172a; font-weight: 800; text-align: left; } .spec-table td { color: #475569; line-height: 1.6; } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; } /* Product CTA Banner */ .product-cta-section { padding: 6rem 0 8rem 0; } .cta-card { background: linear-gradient(135deg, #111113 0%, #1a1a1f 100%); border-radius: 32px; padding: 4rem; display: flex; justify-content: space-between; align-items: center; gap: 3rem; box-shadow: 0 25px 50px rgba(11, 21, 33, 0.25); color: #ffffff; } .cta-content h2 { font-size: 2.6rem; font-weight: 900; margin-bottom: 1rem; font-family: var(--font-heading); } .cta-content p { font-size: 1.15rem; color: rgba(255, 255, 255, 0.8); word-break: keep-all; } .cta-btn-gold { display: inline-flex; align-items: center; gap: 8px; background: #d4af37; color: #0b1521; padding: 1.1rem 2.2rem; border-radius: 50px; font-weight: 800; font-size: 1rem; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); white-space: nowrap; box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3); } .cta-btn-gold:hover { background: #f3cf65; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4); } /* Product Page Responsive */ @media screen and (max-width: 1024px) { .product-hero-title { font-size: 3.8rem; } .feature-split-layout, .feature-split-layout.reverse { grid-template-columns: 1fr; gap: 2.5rem; } .hardware-cards-grid { grid-template-columns: 1fr; } .cta-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 3rem 2rem; } .spec-table th { width: 30%; } } @media screen and (max-width: 768px) { .product-hero-title { font-size: 2.8rem; } .product-hero-slogan { font-size: 1.3rem; } .product-metrics-grid { grid-template-columns: 1fr; } .spec-table th, .spec-table td { display: block; width: 100%; } .spec-table th { border-bottom: none; background: transparent; padding-bottom: 0.2rem; } } /* --- Custom Vision Styles (Moved from vision.html) --- */ /* --- Custom Vision Styles (Moved from vision.html) --- */ /* --- Custom Vision Styles (Moved from vision.html) --- */ /* --- SVG / Layout Component Style --- */ .vision-grand-hero { position: relative; height: 70vh; min-height: 500px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; } .hero-bg-anim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('../img/hero_history_bg.png'); background-size: cover; background-position: center; z-index: 0; /* --- SVG / Layout Component Style --- */ animation: zoomBg 15s forwards ease-out; } .hero-bg-anim::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } @keyframes zoomBg { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } .vision-hero-content { position: relative; z-index: 1; padding: 0 5%; opacity: 0; /* --- SVG / Layout Component Style --- */ animation: fadeUp 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s; will-change: opacity, transform; } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } .vision-hero-content h2 { font-size: 4.5rem; font-weight: 800; margin-bottom: 20px; letter-spacing: -2px; line-height: 1.2; } .vision-hero-content h2 span { color: #d1121b; } .vision-hero-content p.en-sub { font-size: 1.8rem; font-weight: 300; letter-spacing: 1px; opacity: 0.9; } /* --- SVG / Layout Component Style --- */ .vision-message-section { padding: 120px 5%; background: #fff; text-align: center; } .vision-message-section .main-message { font-size: 2.2rem; font-weight: 700; color: #111; line-height: 1.5; margin-bottom: 40px; word-break: keep-all; } .vision-message-section .sub-message { font-size: 1.2rem; font-weight: 400; color: #666; line-height: 1.8; max-width: 900px; margin: 0 auto; word-break: keep-all; } /* --- SVG / Layout Component Style --- */ .vision-core-section { padding: 0 5% 150px; background: #fff; max-width: 1200px; margin: 0 auto; } .vm-row { display: flex; align-items: flex-start; padding: 60px 0; border-top: 1px solid #ddd; } .vm-row:last-child { border-bottom: 1px solid #ddd; } .vm-title { flex: 0 0 300px; } .vm-title h3 { font-size: 2.5rem; font-weight: 800; color: #111; margin: 0; position: relative; } .vm-title h3::after { content: ''; display: block; width: 40px; height: 4px; background: #d1121b; margin-top: 20px; } .vm-desc { flex: 1; padding-left: 50px; } .vm-desc p { font-size: 1.25rem; line-height: 1.8; color: #444; font-weight: 400; word-break: keep-all; margin: 0; } /* --- SVG / Layout Component Style --- */ .animate-on-scroll { opacity: 0; transform: translateY(30px); transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* ====*/ .delay-1 { transition-delay: 0.3s; } .delay-2 { transition-delay: 0.6s; } .delay-3 { transition-delay: 0.9s; } @media (max-width: 992px) { .vision-grand-hero { height: 50vh; } .vision-hero-content h2 { font-size: 3rem; } .vision-hero-content p.en-sub { font-size: 1.4rem; } .vision-message-section { padding: 80px 5%; } .vision-message-section .main-message { font-size: 1.6rem; } .vision-core-section { padding: 0 5% 80px; } .vm-row { flex-direction: column; padding: 40px 0; } .vm-title { flex: none; margin-bottom: 30px; } .vm-title h3::after { margin-top: 15px; } .vm-desc { padding-left: 0; } .vm-desc p { font-size: 1.1rem; } } /* ========================================================================== UDR Custom Helpers to Eliminate Inline & Internal Styles ========================================================================== */ /* Custom Header and Footer Logos */ .header .logo img { height: 35px; width: auto; /* removed to keep colored logo */ transition: filter 0.3s ease; } .header.scrolled .logo img, .header:hover .logo img { /* removed to keep colored logo */ } .footer-logo .logo img { height: 35px; width: auto; filter: none; } /* Product Hero Logo */ .hero-product-logo { height: 120px; width: auto; object-fit: contain; } /* Scroll To Top Button Background */ .icon-circle.bg-light { background: #f1f1f1; } @keyframes { 0% { transform: scale(1); } 100% { transform: scale(1.15); } } { animation: 15s ease-in-out infinite alternate; transform-origin: center center; } /* ========================================================================== UDR Program Pages Custom Centered Styles ========================================================================== */ /* Centered Hero Section Layout */ .p-contained-hero.centered-layout { flex-direction: column; justify-content: center; text-align: center; padding: 100px 20px 60px; min-height: auto; max-width: 1200px; margin: 80px auto 40px; } .p-contained-hero.centered-layout .p-contained-hero-text { display: flex; flex-direction: column; align-items: center; width: 100%; } .p-contained-hero.centered-layout .p-ch-title { font-size: 4.8rem; letter-spacing: -1px; margin: 15px 0 25px; font-weight: 900; } .p-contained-hero.centered-layout .p-ch-sub { max-width: 750px; font-size: 1.2rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 50px; line-height: 1.8; } /* Square Glassmorphic Cards (Row) */ .p-contained-hero.centered-layout .p-hero-chips { display: flex; justify-content: center; gap: 20px; margin: 30px auto 60px; width: 100%; flex-wrap: wrap; } .p-contained-hero.centered-layout .p-chip { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: 160px; height: 160px; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: all 0.3s ease; backdrop-filter: blur(10px); padding: 0; } .p-contained-hero.centered-layout .p-chip:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } .p-contained-hero.centered-layout .p-chip-num { font-size: 2.4rem; font-weight: 800; color: #fff; margin-bottom: 12px; letter-spacing: -0.5px; display: block; } .p-contained-hero.centered-layout .p-chip-label { font-size: 0.95rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; display: block; } /* Capsule Tab Menu */ .program-tab-menu { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 40px; padding: 6px; margin: 0 auto; backdrop-filter: blur(15px); flex-wrap: wrap; justify-content: center; gap: 2px; } .program-tab-item { color: rgba(255, 255, 255, 0.6); font-size: 1rem; font-weight: 600; padding: 10px 18px; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; } .program-tab-item:hover { color: #fff; } .program-tab-item.active { color: #c9a05b; border: 1px solid #c9a05b; background: rgba(201, 160, 91, 0.05); padding: 9px 17px; } /* ========================================================================== UDR Indiantv and General Layout Helpers ========================================================================== */ .p-card-media.no-frame { box-shadow: none; border: none; background: transparent; } .p-pill-grid { margin-top: 30px; } .p-hardware-theater.bg-dark-custom { background-color: #111; padding-top: 100px; padding-bottom: 100px; } .p-sec-tag.gold { color: #c9a05b; border-color: #c9a05b; } .p-hardware-theater.bg-dark-custom h2 { color: #fff; } .p-hardware-theater.bg-dark-custom p { color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; } .p-theater-card.no-frame { margin-top: 50px; background: transparent; border: none; box-shadow: none; } .p-theater-card img { width: 100%; height: auto; } /* ========================================================================== UDR Shot Page Feature Grid Styles ========================================================================== */ .p-features-grid-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 40px; } .p-features-grid-3col .bento-card { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05); } .p-features-grid-3col .bento-card .bento-img-wrap { height: 220px; overflow: hidden; background: #f8f9fa; display: flex; align-items: center; justify-content: center; } .p-features-grid-3col .bento-card .bento-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .p-features-grid-3col .bento-card .bento-content-pad { padding: 30px; } .p-features-grid-3col .bento-card .bento-tag { background: #eee; color: #555; padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; } .p-features-grid-3col .bento-card h3 { font-size: 1.3rem; margin: 15px 0 10px; } .p-features-grid-3col .bento-card p { color: #666; font-size: 0.95rem; margin: 0; } /* ========================================================================== Merged from bento.css ========================================================================== */ /* bento.css (Extended with missing styles) */ /* Trendy Floating Pill Sticky Nav */ .p-sticky-nav { position: sticky; top: 90px; /* Floating cleanly below header */ z-index: 100; display: flex; justify-content: center; padding: 30px 0; pointer-events: none; /* Let clicks pass through empty space */ } .p-sticky-container { pointer-events: auto; display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.03); /* Lighter glass */ border: 1px solid rgba(255, 255, 255, 0.08); /* Clearer border */ backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 50px; padding: 8px; /* More breathing room */ box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1); max-width: 90vw; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .p-sticky-container::-webkit-scrollbar { display: none; } .p-nav-link { color: #888; text-decoration: none; padding: 12px 28px; white-space: nowrap; font-size: 1rem; /* Slightly larger for readability */ font-weight: 500; letter-spacing: 0.5px; border-radius: 30px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid transparent; /* Prepare for active border */ } .p-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .p-nav-link.active { color: #e8eaed; /* Gold text */ background: rgba(232, 234, 237, 0.1); /* Subtle gold glass */ border: 1px solid rgba(232, 234, 237, 0.3); /* Thin gold border */ font-weight: 700; box-shadow: 0 4px 15px rgba(232, 234, 237, 0.1); } /* Bento Grid */ .p-bento-section { padding: 100px 5%; background: #0a0a0a; } .p-bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; } .bento-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 40px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); grid-column: span 6; /* Default half width for sub cards */ /* Scroll Reveal Animation Initial State */ opacity: 0; transform: translateY(40px); } .bento-card.reveal-active { opacity: 1; transform: translateY(0); } .bento-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.5); } .bento-tag { display: inline-block; color: #e8eaed; font-size: 0.85rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; } .bento-content h3 { font-size: 1.8rem; font-weight: 700; color: #fff; margin: 0 0 15px 0; } .bento-content p { font-size: 1.1rem; color: #999; line-height: 1.6; margin: 0; } /* Responsive Grid */ @media (max-width: 991px) { .bento-card, .p-bento-grid > div { grid-column: span 12 !important; flex-direction: column !important; } } /* NEW: Contained Hero Section (Not full width) */ .p-contained-hero { display: flex; align-items: center; max-width: 1400px; margin: 100px auto 50px; padding: 0 5%; min-height: 60vh; gap: 50px; } .p-contained-hero-text { flex: 1; } .p-contained-hero-image { flex: 1; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.8); } .p-contained-hero-image img { width: 100%; height: auto; display: block; } .p-ch-title { font-size: 4rem; font-weight: 900; color: #fff; margin: 10px 0 20px; } .p-ch-sub { font-size: 1.2rem; color: #888; line-height: 1.6; margin-bottom: 40px; } @media (max-width: 991px) { .p-contained-hero { flex-direction: column; margin-top: 120px; text-align: center; } .p-ch-title { font-size: 3rem; } } @media (max-width: 640px) { .p-badge-gold { font-size: 0.75rem; padding: 4px 12px; margin-bottom: 12px; letter-spacing: 0.5px; } .p-ch-title { font-size: 1.6rem !important; letter-spacing: -0.3px; margin: 10px 0 15px; } .p-ch-sub { font-size: 0.85rem; word-break: keep-all; line-height: 1.5; margin-bottom: 30px; padding: 0 10px; } .p-contained-hero.centered-layout .p-ch-title { font-size: 1.6rem !important; } .p-contained-hero.centered-layout { margin: 0 auto 20px; padding: 108px 16px 30px; width: 100%; max-width: 100vw; box-sizing: border-box; overflow: hidden; } .p-contained-hero.centered-layout .p-chip { flex: 1; max-width: 115px; aspect-ratio: 1/1; height: auto; padding: 15px 5px; } .p-contained-hero.centered-layout .p-chip-num { font-size: 1.6rem; } .p-contained-hero.centered-layout .p-hero-chips { flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 12px; margin: 20px auto 40px; width: 100%; max-width: 380px; } .p-nav-link { font-size: 0.85rem; padding: 8px 16px; border-radius: 20px; } .program-tab-menu { display: flex; flex-wrap: wrap; justify-content: center; border-radius: 20px; padding: 10px; width: 100%; max-width: 100%; box-sizing: border-box; gap: 6px; } .program-tab-item { font-size: 0.85rem; padding: 8px 14px; white-space: nowrap; } } /* ========================================================================== Dynamic Dark Theme & Helpers for Product and Program Pages ========================================================================== */ /* Automatically apply dark theme to body if it contains product/program elements */ body:has(.p-contained-hero), body:has(.p-sticky-nav), body:has(.program-tab-menu), body:has(.p-bento-section), body:has(.p-statement-section) { background-color: #050505; color: #ffffff; } /* Premium Gold Badge */ .p-badge-gold { display: inline-block; padding: 6px 16px; background: rgba(232, 234, 237, 0.1); border: 1px solid rgba(232, 234, 237, 0.3); color: #e8eaed; font-size: 0.85rem; font-weight: 700; border-radius: 30px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; } /* Section Tag */ .p-sec-tag { display: inline-block; width: fit-content; color: #e8eaed; font-size: 0.9rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; border: 1px solid rgba(232, 234, 237, 0.3); padding: 4px 12px; border-radius: 4px; background: rgba(232, 234, 237, 0.05); } /* Statement Section */ .p-statement-section { padding: 100px 5%; background: #0d0d0d; text-align: center; } .p-statement-heading { font-size: 2.8rem; font-weight: 800; line-height: 1.4; color: #ffffff; margin: 20px 0; } .p-statement-desc { font-size: 1.15rem; color: rgba(255, 255, 255, 0.6); line-height: 1.8; max-width: 800px; margin: 0 auto; } .text-gradient { background: linear-gradient(90deg, #fff 0%, #e8eaed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ========================================================================== UDR Core Helpers (Header/Footer Logos, Zoom Animations) ========================================================================== */ .header .logo img { height: 35px; width: auto; display: block; } .footer-logo .logo img { height: 35px; width: auto; filter: none; display: block; } .hero-product-logo { height: 120px; width: auto; object-fit: contain; } /* Set background image for subpage hero headers */ /* ========================================================================== Sub Hero Section (About/Product sub pages) ========================================================================== */ .sub-hero { position: relative; width: 100%; height: 360px; background: #080f18; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding-top: 80px; overflow: hidden; } .sub-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../../img/hero_history_bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.1); animation: zoomOutHero 2s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .sub-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(11,21,33,0.35) 0%, rgba(8,15,24,0.9) 100%); z-index: 1; } @keyframes zoomOutHero { to { transform: scale(1); } } .sub-hero-content { position: relative; z-index: 2; transform: translateY(30px); opacity: 0; animation: fadeUpIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.2s; } @keyframes fadeUpIn { to { transform: translateY(0); opacity: 1; } } .sub-hero-title { font-size: clamp(1.8rem, 8vw, 3.8rem); font-family: var(--font-heading); font-weight: 800; margin-bottom: 12px; letter-spacing: -2px; background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .breadcrumb { font-size: 0.9rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 2px; } .breadcrumb span { margin: 0 8px; } .breadcrumb a { color: rgba(255,255,255,0.8); transition: color 0.3s; } .breadcrumb a:hover { color: #1a73e8; } @media screen and (max-width: 1024px) { .sub-hero { padding-top: 68px; height: 300px; } } @media screen and (max-width: 640px) { .sub-hero { height: 260px; } .sub-hero-title { letter-spacing: -0.5px; } .breadcrumb { font-size: 0.78rem; letter-spacing: 1px; } } /* ========================================================================== Responsive Fixes for Cards (Added) ========================================================================== */ @media screen and (max-width: 1024px) { .remo-cards-grid { grid-template-columns: repeat(2, 1fr); } .app-cards-wrapper { flex-wrap: wrap; } .app-card { flex: 1 1 calc(50% - 1rem); } } @media screen and (max-width: 640px) { .remo-cards-grid { grid-template-columns: 1fr; } .app-cards-wrapper { flex-wrap: wrap; } .app-card { flex: 1 1 calc(50% - 1rem); } .remo-header.flex-between { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; } .remo-header.flex-between .remo-btn-dark { align-self: center; width: auto; font-size: 0.9rem; } .remo-cards-grid { grid-template-columns: 1fr; } .app-card { flex: 1 1 100%; } } /* ========================================================================== Responsive Fixes for Footer (Added) ========================================================================== */ @media screen and (max-width: 768px) { .footer { padding: 3rem 1.5rem 8rem 1.5rem; } .footer-container { padding: 0 1rem; } .footer-top { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .footer-brand-tag { display: none; } .footer-links { flex-wrap: nowrap; gap: 0.6rem; } .footer-links a { font-size: 0.8rem; white-space: nowrap; } .footer-bottom { flex-direction: column; gap: 2rem; } .footer-contact-details { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .footer-contact-details .sep { display: none; } .footer-addons select { width: 100%; max-width: 240px; } } /* ========================================================================== About Subpages (History, Store, etc.) Additional CSS ========================================================================== */ /* --- History Section --- */ .history-section { padding: 90px 5% 120px 5%; background: #050505; font-family: var(--font-body); } .history-container { max-width: 960px; margin: 0 auto; } .history-tabs { display: flex; justify-content: center; gap: 16px; margin-bottom: 60px; flex-wrap: wrap; } .history-tab { padding: 12px 36px; font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .history-tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); } .history-tab.active { color: #e8eaed; background: rgba(232, 234, 237, 0.15); border-color: rgba(232, 234, 237, 0.45); box-shadow: 0 6px 20px rgba(232, 234, 237, 0.25); transform: translateY(-2px); } .timeline-group { display: none; animation: fadeIn 0.5s ease; } .timeline-group.active { display: block; } .timeline-list-wrap { position: relative; padding-left: 48px; } .timeline-line { position: absolute; left: 15px; top: 20px; bottom: 0; width: 2px; z-index: 1; background: linear-gradient(180deg, #e8eaed 0%, rgba(232, 234, 237, 0.35) 70%, rgba(232, 234, 237, 0.05) 100%); transform-origin: top; transform: scaleY(0); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 0 10px rgba(232, 234, 237, 0.4); } .timeline-row { position: relative; margin-bottom: 50px; z-index: 2; } .timeline-year-label { position: relative; font-size: 2.1rem; font-weight: 700; color: #ffffff; font-family: var(--font-heading); margin-bottom: 18px; letter-spacing: -0.02em; line-height: 1.2; } .timeline-year-label::before { content: ''; position: absolute; left: -40px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #050505; border: 3px solid #e8eaed; box-shadow: 0 0 14px rgba(232, 234, 237, 0.8); transition: all 0.3s ease; z-index: 2; } .timeline-row:hover .timeline-year-label::before { background: #e8eaed; box-shadow: 0 0 20px rgba(232, 234, 237, 1); } .timeline-desc { list-style: none; } .app-card { flex: 1 1 calc(50% - 1rem); } } @media screen and (max-width: 640px) { .remo-cards-grid { grid-template-columns: 1fr; } .app-cards-wrapper { flex-wrap: wrap; } .app-card { flex: 1 1 calc(50% - 1rem); } .remo-header.flex-between { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; } .remo-header.flex-between .remo-btn-dark { align-self: center; width: auto; font-size: 0.9rem; } .remo-cards-grid { grid-template-columns: 1fr; } .app-card { flex: 1 1 100%; } } /* ========================================================================== Responsive Fixes for Footer (Added) ========================================================================== */ @media screen and (max-width: 768px) { .footer { padding: 3rem 1.5rem 8rem 1.5rem; } .footer-container { padding: 0 1rem; } .footer-top { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .footer-brand-tag { display: none; } .footer-links { flex-wrap: nowrap; gap: 0.6rem; } .footer-links a { font-size: 0.8rem; white-space: nowrap; } .footer-bottom { flex-direction: column; gap: 2rem; } .footer-contact-details { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .footer-contact-details .sep { display: none; } .footer-addons select { width: 100%; max-width: 240px; } } /* ========================================================================== About Subpages (History, Store, etc.) Additional CSS ========================================================================== */ /* --- History Section --- */ .history-section { padding: 90px 5% 120px 5%; background: radial-gradient(circle at 50% -20%, rgba(232, 234, 237, 0.08) 0%, #050505 70%); font-family: var(--font-body); } .history-container { max-width: 960px; margin: 0 auto; } .history-tabs { display: flex; justify-content: center; gap: 16px; margin-bottom: 60px; flex-wrap: wrap; } .history-tab { padding: 12px 36px; font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .history-tab:hover { color: #ffffff; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.28); transform: translateY(-2px); } .history-tab.active { color: #e8eaed; background: rgba(232, 234, 237, 0.15); border-color: rgba(232, 234, 237, 0.45); box-shadow: 0 6px 20px rgba(232, 234, 237, 0.25); transform: translateY(-2px); } .timeline-group { display: none; animation: fadeIn 0.5s ease; } .timeline-group.active { display: block; } .timeline-list-wrap { position: relative; padding-left: 48px; } .timeline-line { position: absolute; left: 15px; top: 20px; bottom: 0; width: 2px; z-index: 1; background: linear-gradient(180deg, #e8eaed 0%, rgba(232, 234, 237, 0.35) 70%, rgba(232, 234, 237, 0.05) 100%); transform-origin: top; transform: scaleY(0); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 0 10px rgba(232, 234, 237, 0.4); } .timeline-row { position: relative; margin-bottom: 50px; z-index: 2; } .timeline-year-label { position: relative; font-size: 2.1rem; font-weight: 700; color: #ffffff; font-family: var(--font-heading); margin-bottom: 18px; letter-spacing: -0.02em; line-height: 1.2; } .timeline-year-label::before { content: ''; position: absolute; left: -40px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #050505; border: 3px solid rgba(232, 234, 237, 0.4); box-shadow: 0 0 10px rgba(232, 234, 237, 0.1); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 2; } .timeline-row:hover .timeline-year-label::before { background: #e8eaed; border-color: #ffffff; box-shadow: 0 0 20px rgba(232, 234, 237, 0.8), 0 0 40px rgba(232, 234, 237, 0.4); transform: translateY(-50%) scale(1.25); } .timeline-desc { list-style: none; padding: 26px 30px; margin: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 20px; backdrop-filter: blur(20px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); } .timeline-row:hover .timeline-desc { border-color: rgba(232, 234, 237, 0.25); background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(232, 234, 237, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.1); transform: translateY(-4px); } .timeline-desc li { position: relative; padding-left: 20px; margin-bottom: 12px; color: rgba(255, 255, 255, 0.88); font-size: 1.05rem; line-height: 1.65; } .timeline-desc li:last-child { margin-bottom: 0; } .timeline-desc li::before { content: ''; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: #e8eaed; box-shadow: 0 0 6px rgba(232, 234, 237, 0.6); } /* --- Installation Section (Store) --- */ .installation-section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; background: #050505; color: #fff; } .install-header { text-align: center; margin-bottom: 50px; } .install-motto { font-size: 1.2rem; color: #e8eaed; font-weight: 700; margin-bottom: 10px; } .install-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 15px; color: #fff; } .install-subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.7); line-height: 1.6; } .counter-desc { text-align: center; font-size: 1.2rem; margin-bottom: 40px; font-weight: 600; color: #fff; } .highlight-total { font-size: 1.8rem; color: #e8eaed; font-weight: 800; } .dual-donut-grid { display: flex; justify-content: center; gap: 40px; margin-bottom: 50px; flex-wrap: wrap; } .donut-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 30px; display: flex; align-items: center; gap: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); min-width: 350px; } .donut-chart-box { width: 120px; height: 120px; position: relative; } .donut-chart { width: 100%; height: 100%; transform: rotate(-90deg); } .donut-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 12; } .donut-segment { fill: none; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset 2s ease-out; } .segment-overseas { stroke: #e8eaed; } .segment-domestic { stroke: #38bdf8; } .donut-center-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; } .center-ratio { font-size: 1.2rem; font-weight: 800; color: #fff; } .color-blue { color: #e8eaed; } .color-slate { color: #38bdf8; } .center-label { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin-top: 2px; } .donut-card-info { display: flex; flex-direction: column; } .card-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; margin-bottom: 8px; width: max-content; } .blue-badge { background: rgba(232, 234, 237,0.15); color: #e8eaed; } .slate-badge { background: rgba(56,189,248,0.15); color: #38bdf8; } .card-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 5px; color: #fff; } .card-count { font-size: 2rem; font-weight: 800; color: #fff; } .card-count .unit { font-size: 1rem; font-weight: 600; margin-left: 4px; color: rgba(255,255,255,0.8); } .distribution-bar-wrap { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 20px 30px; border-radius: 12px; } .bar-header { display: flex; justify-content: space-between; font-size: 0.95rem; font-weight: 600; margin-bottom: 15px; color: rgba(255,255,255,0.8); } .bar-ratio-text { color: #e8eaed; } .distribution-bar { height: 12px; border-radius: 6px; background: rgba(255,255,255,0.1); display: flex; overflow: hidden; } .bar-fill { height: 100%; transition: width 2s ease-out; } .overseas-fill { background: #e8eaed; width: 0; } .domestic-fill { background: #38bdf8; width: 0; } .install-quote { margin-top: 60px; padding: 40px; background: rgba(255,255,255,0.04); border-left: 4px solid #e8eaed; border-radius: 0 12px 12px 0; font-size: 1.15rem; line-height: 1.7; color: rgba(255,255,255,0.85); font-style: italic; } @media screen and (max-width: 768px) { .history-section { padding: 40px 16px; } .history-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; gap: 6px; padding: 4px 40px 12px 2px; margin-bottom: 40px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .history-tabs::-webkit-scrollbar { display: none; } .history-tab { flex-shrink: 0; padding: 8px 14px; font-size: 0.88rem; white-space: nowrap; } /* --- SVG / Layout Component Style --- */ .timeline-list-wrap { padding-left: 36px; } .timeline-line { left: 13px !important; /* --- SVG / Layout Component Style --- */ top: 13px !important; z-index: 1; } .timeline-year-label { width: auto !important; font-size: 1.5rem !important; line-height: 1.2 !important; padding-left: 0 !important; } .timeline-year-label::before { left: -29px !important; /* --- SVG / Layout Component Style --- */ top: 50% !important; transform: translateY(-50%) !important; width: 14px !important; height: 14px !important; box-sizing: border-box !important; border: 3px solid #e8eaed !important; z-index: 2; } .timeline-desc { padding: 14px 16px; } .timeline-desc li { font-size: 0.9rem; word-break: keep-all; } .donut-card { min-width: 100%; padding: 20px; } .dual-donut-grid { gap: 20px; } } @media screen and (max-width: 768px) { .btn-top { right: 16px; /* Align with quick-menu */ bottom: 85px; width: 44px; height: 44px; } } /* Responsive utilities for hiding elements */ .mobile-only { display: none !important; } @media screen and (max-width: 768px) { .desktop-only { display: none !important; } .mobile-only { display: block !important; } } @media screen and (max-width: 768px) { .p-hero-sub { font-size: 1.1rem; white-space: nowrap; word-break: keep-all; } } /* Mobile Sticky Nav Fix (Edge-to-Edge like native apps) */ @media screen and (max-width: 768px) { .p-sticky-nav { padding: 0; top: 68px; /* Below the mobile header */ width: 100%; } .p-sticky-container { max-width: 100vw; width: 100vw; border-radius: 0; border-left: none; border-right: none; padding: 10px 0; justify-content: space-evenly !important; /* Automatically distribute space! */ } } @media screen and (max-width: 768px) { .p-sticky-container { gap: 0px !important; padding: 8px 0px !important; justify-content: space-evenly !important; } .p-nav-link { padding: 6px 8px !important; font-size: 0.82rem !important; letter-spacing: -0.3px !important; } } /* Mobile Hero Redesign - Premium Centered Look */ @media screen and (max-width: 768px) { .p-hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; width: 100%; } .hero-product-logo { display: none !important; /* Completely hide logo on mobile for a cleaner look */ } .p-hero-chips { flex-direction: row !important; justify-content: space-evenly; align-items: stretch; gap: 0 !important; flex-wrap: nowrap; width: 100%; background: rgba(0, 0, 0, 0.04) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; padding: 16px 0 !important; margin-top: 20px; } .p-chip { flex: 1; padding: 0 5px !important; background: none !important; border: none !important; backdrop-filter: none !important; border-radius: 0 !important; align-items: center; justify-content: flex-start; text-align: center; min-width: 0; } .p-chip:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.12) !important; } .p-chip-num { font-size: 1.3rem !important; color: #e8eaed !important; margin-bottom: 6px; } .p-chip-label { font-size: 0.75rem !important; word-break: keep-all; line-height: 1.3; color: rgba(255, 255, 255, 0.85); } } @media screen and (max-width: 768px) { .p-badge-gold { font-size: 0.75rem !important; letter-spacing: 2px !important; margin-bottom: 4px !important; /* Extremely tight gap */ opacity: 0.9; } .p-hero-sub { font-size: 1.6rem !important; /* Make it the hero headline */ font-weight: 800 !important; line-height: 1.35 !important; letter-spacing: -0.5px !important; white-space: normal !important; /* Allow wrapping for long titles */ word-break: keep-all !important; margin-bottom: 30px !important; text-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Subtle pop */ } } @media screen and (max-width: 768px) { .p-hero-cinema { height: auto !important; min-height: 280px !important; } .header.scrolled { background: transparent !important; } .header.scrolled .logo img { /* removed to keep colored logo */ } .p-hero-bg-video { display: none !important; } .p-hero-mask { position: relative !important; height: auto !important; padding-top: 80px !important; padding-bottom: 40px !important; background: none !important; } } @media screen and (max-width: 768px) { /* Hide the h1 container completely to remove its empty margins */ .p-hero-title { display: none !important; } } @media screen and (max-width: 768px) { /* Make statement heading fit beautifully in 2-3 lines without ugly wrapping */ .p-statement-heading { font-size: 1.7rem !important; /* Reduced from massive 2.8rem */ line-height: 1.4 !important; letter-spacing: -0.5px !important; word-break: keep-all !important; } } /* --- Vision & Interview Sections (Obsidian Dark) --- */ .vision-message-section { padding: 90px 5%; text-align: center; background: #050505; color: #fff; } .vision-message-section .main-message { font-size: 2.5rem; font-weight: 800; line-height: 1.35; margin-bottom: 25px; color: #fff; font-family: var(--font-heading); } .vision-message-section .sub-message { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); line-height: 1.7; } .vision-core-section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; background: #050505; } .vm-row { display: flex; gap: 40px; margin-bottom: 60px; align-items: flex-start; } .vm-title h3 { font-size: 2.2rem; font-weight: 700; color: #e8eaed; font-family: var(--font-heading); min-width: 180px; } .vm-desc p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.85); line-height: 1.7; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); padding: 30px; border-radius: 16px; } /* ========================================================================== Apple/Porsche Style Premium Dark Glass Design System (About Subpages) ========================================================================== */ .about-hero-stage { position: relative; padding: 110px 5% 50px 5%; text-align: center; background: #050505; overflow: hidden; } .hero-glow-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; background: radial-gradient(circle, rgba(232, 234, 237, 0.16) 0%, rgba(5, 5, 5, 0) 70%); pointer-events: none; z-index: 1; } .about-hero-inner { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; } .about-hero-title { font-size: 3rem; font-weight: 700; color: #ffffff; font-family: var(--font-heading); letter-spacing: -0.03em; line-height: 1.2; margin: 12px 0 16px; } .about-hero-sub { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; } .about-section { padding: 70px 5% 100px 5%; background: #050505; } .about-container { max-width: 1200px; margin: 0 auto; } /* Glass Executive Statement Card */ .glass-statement-card { position: relative; padding: 1.5rem 0; text-align: center; margin-bottom: 40px; } .quote-mark-icon { margin-bottom: 15px; opacity: 0.9; } .glass-statement-title { font-size: 2.3rem; font-weight: 700; color: #ffffff; line-height: 1.35; margin-bottom: 22px; font-family: var(--font-heading); letter-spacing: -0.02em; } .glass-statement-desc { font-size: 1.1rem; color: rgba(255, 255, 255, 0.75); line-height: 1.75; max-width: 900px; margin: 0 auto; } /* 2-Column VM Glass Grid */ .vm-glass-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .vm-card { position: relative; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; padding: 40px; transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); backdrop-filter: blur(14px); display: flex; flex-direction: column; } .vm-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.05); border-color: rgba(232, 234, 237, 0.35); box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(232, 234, 237, 0.1); } .vm-card-badge { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } .badge-number { font-size: 1.6rem; font-weight: 900; color: #e8eaed; font-family: var(--font-heading); } .badge-label { font-size: 0.85rem; font-weight: 800; color: rgba(255, 255, 255, 0.6); letter-spacing: 2px; font-family: var(--font-heading); } .vm-card-title { font-size: 1.5rem; font-weight: 800; color: #ffffff; margin-bottom: 16px; line-height: 1.35; } .vm-card-body { font-size: 1.05rem; color: rgba(255, 255, 255, 0.75); line-height: 1.7; margin-bottom: 30px; flex-grow: 1; } .vm-tags { display: flex; gap: 10px; flex-wrap: wrap; } .vm-tag { font-size: 0.82rem; font-weight: 600; color: #e8eaed; background: rgba(232, 234, 237, 0.1); border: 1px solid rgba(232, 234, 237, 0.25); padding: 6px 14px; border-radius: 20px; } @media screen and (max-width: 768px) { .about-hero-stage { padding: 90px 16px 35px 16px; } .about-hero-title { font-size: 2.2rem; } .about-hero-sub { font-size: 0.95rem; } .about-section { padding: 30px 16px 60px 16px; } .glass-statement-card { padding: 20px 0; margin-bottom: 30px; } .glass-statement-title { font-size: 1.5rem; } .glass-statement-desc { font-size: 0.92rem; word-break: keep-all; } .vm-glass-grid { grid-template-columns: 1fr; gap: 20px; } .vm-card { padding: 28px 20px; border-radius: 18px; } .vm-card-title { font-size: 1.3rem; } } /* ========================================================================== UDR Smart Chatbot Modal Widget Styles (Obsidian Dark Glassmorphism) ========================================================================== */ .udr-chat-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000; display: flex; justify-content: flex-end; align-items: flex-end; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } .udr-chat-modal-overlay.active { opacity: 1; visibility: visible; } .udr-chat-window { width: 400px; max-width: 92vw; height: auto; min-height: 200px; max-height: 85vh; background: rgba(14, 14, 18, 0.94); border: 1px solid rgba(232, 234, 237, 0.35); border-radius: 24px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(232, 234, 237, 0.2); display: flex; flex-direction: column; overflow: hidden; transform: translateY(30px) scale(0.95); transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); } .udr-chat-modal-overlay.active .udr-chat-window { transform: translateY(0) scale(1); } /* Chat Header */ .udr-chat-header { background: linear-gradient(135deg, rgba(30, 30, 36, 0.9) 0%, rgba(12, 12, 15, 0.95) 100%); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .udr-chat-brand { display: flex; align-items: center; gap: 12px; } .udr-avatar { position: relative; width: 42px; height: 42px; border-radius: 50%; background: rgba(232, 234, 237, 0.15); border: 1px solid rgba(232, 234, 237, 0.4); display: flex; align-items: center; justify-content: center; } .udr-avatar img { width: 26px; height: auto; object-fit: contain; } .udr-avatar .status-dot { position: absolute; bottom: 2px; right: 2px; width: 10px; height: 10px; background: #10b981; border: 2px solid #0e0e12; border-radius: 50%; } .udr-chat-title-group { display: flex; flex-direction: column; } .udr-chat-title-group .title { font-size: 0.98rem; font-weight: 700; color: #ffffff; } .udr-chat-title-group .subtitle { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); } .udr-chat-close-btn { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; padding: 6px; border-radius: 50%; transition: all 0.25s; } .udr-chat-close-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); } /* Notice Banner */ .udr-chat-banner { background: rgba(232, 234, 237, 0.1); border-bottom: 1px solid rgba(232, 234, 237, 0.2); padding: 8px 16px; font-size: 0.78rem; color: #e8eaed; display: flex; align-items: center; gap: 8px; font-weight: 500; } /* Chat Body */ .udr-chat-body { flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; } .chat-msg { display: flex; flex-direction: column; max-width: 85%; } .chat-msg.bot-msg { align-self: flex-start; } .chat-msg.user-msg { align-self: flex-end; } .msg-bubble { padding: 14px 16px; border-radius: 18px; font-size: 0.92rem; line-height: 1.55; word-break: keep-all; } .bot-msg .msg-bubble { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border-top-left-radius: 4px; } .user-msg .msg-bubble { background: linear-gradient(135deg, #e8eaed 0%, #d49f43 100%); color: #0b0b0d; font-weight: 600; border-top-right-radius: 4px; box-shadow: 0 4px 15px rgba(232, 234, 237, 0.3); } .chat-link-btn { display: inline-block; margin-top: 10px; padding: 8px 14px; background: #fae100; color: #3c1e1e; font-weight: 700; font-size: 0.85rem; border-radius: 12px; text-decoration: none; box-shadow: 0 4px 12px rgba(250, 225, 0, 0.25); transition: transform 0.2s; } .chat-link-btn:hover { transform: translateY(-2px); } /* FAQ Chips */ .chat-faq-chips { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .faq-chip { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); padding: 10px 18px; border-radius: 20px; font-size: 0.9rem; font-weight: 500; text-align: left; cursor: pointer; transition: all 0.25s ease; } .faq-chip:hover { background: rgba(232, 234, 237, 0.15); border-color: rgba(232, 234, 237, 0.45); color: #ffffff; transform: translateX(4px); } .faq-chip.gold-chip { border-color: rgba(232, 234, 237, 0.35); color: #e8eaed; background: rgba(232, 234, 237, 0.08); } /* Chat Footer */ .udr-chat-footer { padding: 14px 16px; background: rgba(18, 18, 22, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; gap: 10px; } .udr-chat-footer input { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 10px 16px; color: #ffffff; font-size: 0.88rem; outline: none; transition: border-color 0.25s; } .udr-chat-footer input:focus { border-color: rgba(232, 234, 237, 0.6); } .udr-chat-footer .send-btn { width: 38px; height: 38px; border-radius: 50%; background: #e8eaed; border: none; color: #0b0b0d; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s; } .udr-chat-footer .send-btn:hover { background: #ffffff; transform: scale(1.05); } @media screen and (max-width: 480px) { .udr-chat-modal-overlay { padding: 10px; } .udr-chat-window { width: 100%; height: 90vh; border-radius: 20px; } } /* ========================================================================= Premium UDR System Overview (Redesign) ========================================================================= */ .p-overview-section { position: relative; padding-bottom: 120px; } .p-overview-header { text-align: center; max-width: 900px; margin: 0 auto 3rem auto; } .p-overview-maintitle { font-size: clamp(1.5rem, 4vw, 2.5rem); font-family: var(--font-heading); font-weight: 800; line-height: 1.4; margin-bottom: 2rem; color: #fff; word-break: keep-all; } @media screen and (max-width: 768px) { .p-overview-maintitle { font-size: 1.45rem; } .p-overview-maintitle .highlight-gold { display: block; margin-top: 5px; } } .p-overview-maintitle .highlight-gold { background: linear-gradient(135deg, #d4af37 0%, #f3e5ab 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* Glassmorphism Feature Grid */ .p-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 4rem; } .p-overview-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); text-align: left; } .p-overview-card:hover { transform: translateY(-6px); background: rgba(212, 175, 55, 0.08); border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(212, 175, 55, 0.2); } .p-overview-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05)); border: 1px solid rgba(212, 175, 55, 0.2); display: flex; align-items: center; justify-content: center; color: #e63946; margin-bottom: 0.5rem; transition: all 0.4s ease; } .p-overview-card:hover .p-overview-icon { transform: scale(1.1); border-color: #e63946; background: rgba(212, 175, 55, 0.2); } .p-overview-card h3 { font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.4; word-break: keep-all; } .p-overview-card p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); line-height: 1.6; word-break: keep-all; } /* Dynamic Expanding Image Gallery */ .p-dynamic-gallery { display: flex; gap: 1.2rem; height: 450px; width: 100%; max-width: 1100px; margin: 0 auto; } .p-dynamic-item { position: relative; flex: 1; border-radius: 20px; overflow: hidden; cursor: pointer; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease; background-color: #111; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); } .p-dynamic-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease; filter: brightness(0.95) grayscale(0%); } .p-dynamic-item:hover, .p-dynamic-item:first-child { flex: 2.5; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.2); border-color: rgba(212, 175, 55, 0.5); } .p-dynamic-item:hover img, .p-dynamic-item:first-child img { transform: scale(1.03); filter: brightness(1) grayscale(0%); } @media screen and (max-width: 768px) { .p-dynamic-gallery { flex-direction: column; height: 650px; } .p-dynamic-item:hover, .p-dynamic-item:first-child { flex: 2; } } /* Background Utilities for Alternating Sections */ .bg-black { background-color: #050505 !important; } .bg-dark-gray { background-color: #141414 !important; } /* Premium List Cards */ .p-list-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.0) 100%); background-color: #111; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 1.25rem 1.2rem; display: flex; align-items: center; gap: 1.2rem; transition: all 0.3s ease; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.3); } .p-list-card:hover { background-color: #1a1a1a; border-color: rgba(212, 175, 55, 0.3); transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.05); } .p-list-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(230, 57, 70, 0.06); color: #e63946; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; border: 1px solid rgba(212, 175, 55, 0.2); } .p-list-card:hover .p-list-icon { background: #d4af37; color: #111; } .p-list-text { font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.4; font-family: var(--font-heading); } /* Premium Image Container */ .p-premium-img-box { border-radius: 20px; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); background: #000; } .p-premium-img-box::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05); pointer-events: none; } .p-premium-img-box img { width: 100%; display: block; transition: transform 0.6s ease; } .p-premium-img-box:hover img { transform: scale(1.02); } /* Refined Two Column Layout */ .p-premium-split { display: flex; align-items: center; gap: 4rem; flex-wrap: wrap; } .p-premium-split > div { flex: 1; min-width: 280px; } .p-premium-split > div:first-child { flex: 1.25; } @media screen and (max-width: 768px) { .p-premium-split { gap: 2.5rem; flex-direction: column; } .p-premium-split > div, .p-premium-split > div:first-child { flex: none; width: 100%; min-width: 0; } } /* Video Control Button & Overlay */ .video-controls-overlay { position: absolute; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 12px; z-index: 10; } .video-control-btn { position: relative; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all 0.3s ease; z-index: 10; } .video-control-btn:hover { background: rgba(232, 234, 237, 0.9); border-color: #e8eaed; transform: scale(1.08); } .video-control-btn svg { width: 20px; height: 20px; } /* Icon Toggling Rules */ .video-mute-btn .icon-sound { display: none !important; } .video-mute-btn .icon-mute { display: block !important; } .video-mute-btn.is-sound-on .icon-sound { display: block !important; } .video-mute-btn.is-sound-on .icon-mute { display: none !important; } .video-play-btn .icon-play { display: none !important; } .video-play-btn .icon-pause { display: block !important; } .video-play-btn.is-paused .icon-play { display: block !important; } .video-play-btn.is-paused .icon-pause { display: none !important; } /* ========================================================================= Interactive Hotspots for Hardware Showcase ========================================================================= */ .p-hotspot-container { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .p-hotspot-container img { display: block; width: 100%; height: auto; } .p-hotspot-dot { position: absolute; width: 24px; height: 24px; background-color: var(--primary-color); border-radius: 50%; cursor: pointer; z-index: 10; transform: translate(-50%, -50%); box-shadow: 0 0 0 rgba(232, 234, 237, 0.4); animation: pulse-ring 2s infinite; } .p-hotspot-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: #fff; border-radius: 50%; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(232, 234, 237, 0.7); } 70% { box-shadow: 0 0 0 20px rgba(232, 234, 237, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 234, 237, 0); } } .p-hotspot-card { position: absolute; top: 35px; left: 50%; transform: translateX(-50%) translateY(10px); width: 220px; background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(232, 234, 237, 0.3); border-radius: 12px; padding: 1rem; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 11; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); pointer-events: none; } .p-hotspot-card::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: rgba(20, 20, 20, 0.85); border-top: 1px solid rgba(232, 234, 237, 0.3); border-left: 1px solid rgba(232, 234, 237, 0.3); } .p-hotspot-dot:hover .p-hotspot-card, .p-hotspot-dot:active .p-hotspot-card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .p-hotspot-title { font-size: 1.1rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.3rem; font-family: var(--font-heading); } .p-hotspot-desc { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.4; word-break: keep-all; } /* ========================================================================= Bento Box Grid for Hardware Showcase ========================================================================= */ .p-bento-grid:has(.p-bento-card) { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1400px; margin: 0 auto; } .p-bento-card { background: rgba(25, 25, 25, 0.8); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 10px 30px rgba(0,0,0,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .p-bento-card:hover { transform: translateY(-6px); position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.5); border-color: rgba(232, 234, 237, 0.3); } .p-bento-img-wrapper { width: auto; align-self: stretch; height: 240px; display: flex; align-items: center; justify-content: center; margin: 2rem 2rem 1.5rem 2rem; border-radius: 12px; overflow: visible; background: rgba(0, 0, 0, 0.2); } .p-bento-img-wrapper > img { max-width: 90%; max-height: 90%; object-fit: contain; transition: transform 0.5s ease, scale 0.5s ease, filter 0.5s ease; } .p-bento-img-wrapper.fill-box { background: #000000; padding: 0; overflow: hidden; height: auto; margin: 1.5rem 1.5rem 1rem 1.5rem; width: auto; align-self: stretch; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); aspect-ratio: 16 / 9; } .p-bento-img-wrapper.fill-box > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } .p-bento-card:hover .p-bento-img-wrapper.fill-box > img { scale: 1.05; } .p-bento-card:hover .p-bento-img-wrapper > img { scale: 1.05; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5)); } .p-bento-content { text-align: center; width: 100%; padding: 0 1.2rem 1.8rem 1.2rem; } .p-bento-content .p-badge-gold { font-size: 0.72rem; font-weight: 500; letter-spacing: 1.5px; padding: 0.35rem 0.9rem; border: 1px solid rgba(232, 234, 237, 0.25); background: transparent; color: rgba(232, 234, 237, 0.9); border-radius: 30px; margin-bottom: 1.2rem !important; display: inline-block; } .p-bento-title { font-size: 1.15rem; font-weight: 600; color: #f5f5f5; margin-bottom: 0.9rem; font-family: var(--font-heading); letter-spacing: -0.2px; line-height: 1.35; } .p-bento-desc { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.6; word-break: keep-all; font-weight: 300; letter-spacing: -0.3px; } /* Responsive adjustments */ @media screen and (max-width: 1024px) { .p-bento-grid:has(.p-bento-card) { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 640px) { .p-bento-grid:has(.p-bento-card) { grid-template-columns: 1fr; } .p-bento-img-wrapper { height: 200px; } } /* UDR S PRO Additions for inline style removal */ .p-hero-chips.center { justify-content: center; margin-top: 2rem; } .p-card-media.premium-box { position: relative; border-radius: 24px; padding: 2.5rem; text-align: center; background: linear-gradient(145deg, #16161a, #0a0a0c); border: 1px solid rgba(255,255,255,0.04); box-shadow: inset 0 0 40px rgba(0,0,0,0.5); } .p-card-media.premium-box img { width: 90%; max-width: 420px; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8)); } .p-badge-outline { display: inline-block; margin-bottom: 1.5rem; color: #e63946; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; border: 1px solid rgba(212,175,55,0.3); padding: 0.3rem 0.8rem; border-radius: 30px; } .p-badge-outline.square { border-radius: 4px; border-color: rgba(212,175,55,0.4); } .p-feature-title.large { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 1.2rem; line-height: 1.3; } .p-feature-title.xl { font-size: 3rem; margin-bottom: 1rem; color: #fff; } .p-grid-2col.mt-3 { margin-top: 3rem; } .p-feature-card { text-align: center; padding: 1.8rem 1.2rem; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 20px; transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); cursor: pointer; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .p-feature-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(232, 234, 237, 0.4); transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(232, 234, 237, 0.15); } .p-feature-card img { width: 70px; height: 70px; border-radius: 12px; object-fit: cover; margin-bottom: 1rem; border: 1px solid rgba(255, 255, 255, 0.1); } .p-feature-card h4 { color: #ffffff; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; line-height: 1.35; } .p-feature-card p { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; margin: 0; line-height: 1.45; } .p-feature-card .icon-box { width: 64px; height: 64px; margin: 0 auto 1.2rem; background: linear-gradient(135deg, rgba(232, 234, 237, 0.2), rgba(232, 234, 237, 0.05)); border-radius: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(232, 234, 237, 0.4); box-shadow: 0 8px 20px rgba(0,0,0,0.35); transition: transform 0.35s ease, background 0.35s ease; } .p-feature-card:hover .icon-box { transform: scale(1.08); background: linear-gradient(135deg, rgba(232, 234, 237, 0.3), rgba(232, 234, 237, 0.1)); border-color: rgba(232, 234, 237, 0.6); } .p-list-box { margin-top: 2rem; background: rgba(0,0,0,0.3); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); } .p-list-text.bulleted { list-style-type: disc; margin-left: 1.2rem; color: rgba(255,255,255,0.7); line-height: 1.8; margin-bottom: 0; } .p-feature-lead.highlight { font-size: 1.5rem; font-weight: 600; color: #e63946; line-height: 1.6; } /* Unified Classes for Cleaner HTML */ .p-feature-section-dark { padding: 5rem 0; background-color: #050505; color: #fff; } .p-feature-section-darker { padding: 5rem 0; background-color: #0a0a0c; color: #fff; } .p-hardware-theater-light { padding: 5rem 0; background-color: #f8f9fa; color: #111; } .p-header-center { text-align: center; margin-bottom: 3rem; } /* ========================================================================== UDR MEMBERS & Interactive Hotspot / Popover Styles ========================================================================== */ /* Hotspot positioning helpers */ .hotspot-pos-1 { top: 22%; left: 42%; } .hotspot-pos-2 { top: 55%; left: 78%; } .hotspot-pos-3 { top: 85%; left: 78%; } /* Image scaling & utility helpers */ .img-scale-12 { transform: scale(1.2); } .img-scale-135 { transform: scale(1.35); } .img-scale-14 { transform: scale(1.4); } .img-scale-07-contain { transform: scale(0.7); object-fit: contain; } .p-video-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; align-items: start; } .p-card-media.video-box { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; background: #000; } .p-video-fit { width: 100%; height: 100%; object-fit: cover; display: block; } .bg-transparent-img-wrapper { background: transparent !important; } .pos-relative { position: relative !important; } .mb-4px { margin-bottom: 4px; } .mt-0-lh-tight { margin-top: 0; line-height: 1.35; } .flex-center-y { display: flex; align-items: center; } .p-card-media-hw-box { width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center; } .img-max-280 { max-height: 280px; object-fit: contain; } .overflow-visible { overflow: visible !important; } .w-fit { width: fit-content !important; } .w-full { width: 100% !important; } .sub-tag-gradient { font-size: 1.15rem; font-weight: 700; margin-top: 6px; margin-bottom: 4px; } .p-feature-title-nowrap { margin-bottom: 24px; white-space: nowrap; } .cursor-pointer { cursor: pointer !important; } .icon-box-img-wrapper { padding: 0 !important; overflow: hidden !important; } .icon-box-img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: none; margin: 0; } .border-top-subtle { border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } .p-sec-tag-gold-fit { color: #e8eaed !important; border-color: #e8eaed !important; width: fit-content !important; } .mb-6px { margin-bottom: 6px !important; } .p-feature-lead-gold { color: #e8eaed !important; font-weight: 700 !important; font-size: 1.1rem !important; margin-bottom: 24px !important; } .pill-text-sm { font-size: 0.95rem; line-height: 1.3; } .no-scroll { overflow: hidden !important; } .max-1100 { max-width: 1100px !important; } .mt-35 { margin-top: 3.5rem !important; } .glow-box { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 30px rgba(232, 234, 237,0.25); border: 1px solid rgba(232, 234, 237,0.3); } /* Gallery Grid & Card Styles for Indiantv.html */ .p-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 0; } .p-gallery-card { border-radius: 16px; overflow: hidden; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); background: #111; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); } .p-gallery-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(232, 234, 237, 0.25); border-color: rgba(232, 234, 237, 0.45); } .p-gallery-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.5s ease; } .p-gallery-card:hover img { transform: scale(1.06); } /* Feature Card Top Hover Popover */ .p-feature-card.feature-hover-card { position: relative; overflow: visible !important; } .card-hover-popover { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%) translateY(10px) scale(0.92); width: 230px; background: rgba(15, 20, 26, 0.96); border: 1px solid rgba(232, 234, 237, 0.5); border-radius: 14px; padding: 9px; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(232, 234, 237, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease; z-index: 99999; } .card-hover-popover::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: rgba(15, 20, 26, 0.96); border-right: 1px solid rgba(232, 234, 237, 0.5); border-bottom: 1px solid rgba(232, 234, 237, 0.5); } .p-feature-card.feature-hover-card:hover .card-hover-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); } /* Prevent Bento Card Clipping for Hotspots */ .p-bento-card.has-hotspots { overflow: visible !important; position: relative; z-index: 10; } .p-bento-card.has-hotspots:hover { z-index: 1000; } .p-bento-card.has-hotspots .p-bento-img-wrapper { overflow: visible !important; height: 240px; } /* Hotspot Styles */ .hotspot-dot { position: absolute; width: 20px; height: 20px; background: #e8eaed; border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); z-index: 100; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 10px rgba(232, 234, 237, 0.7); } .hotspot-dot:hover { background: #ffffff; border-color: #e8eaed; transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 20px rgba(232, 234, 237, 0.95); z-index: 99999; } .hotspot-pulse { position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid #e8eaed; animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; pointer-events: none; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .has-hotspots .p-bento-img-wrapper > img { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } /* Small Smooth Hover Popover */ .grass-popover { position: absolute; left: 18px; width: 160px; background: rgba(15, 20, 26, 0.96); border: 1px solid rgba(232, 234, 237, 0.45); border-radius: 3px; padding: 6px; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 15px rgba(232, 234, 237, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease; z-index: 99999; } .grass-popover::before { content: ''; position: absolute; left: -6px; transform: rotate(45deg); width: 10px; height: 10px; background: rgba(15, 20, 26, 0.96); border-left: 1px solid rgba(232, 234, 237, 0.45); border-bottom: 1px solid rgba(232, 234, 237, 0.45); } .popover-top { top: -15px; transform: translateX(10px) scale(0.92); } .popover-top::before { top: 22px; } .popover-mid { top: 50%; transform: translateY(-50%) translateX(10px) scale(0.92); } .popover-mid::before { top: 50%; margin-top: -5px; } .popover-bot { bottom: -15px; transform: translateX(10px) scale(0.92); } .popover-bot::before { bottom: 22px; } .hotspot-dot:hover .grass-popover { opacity: 1; visibility: visible; } .hotspot-dot:hover .popover-top { transform: translateX(0) scale(1); } .hotspot-dot:hover .popover-mid { transform: translateY(-50%) translateX(0) scale(1); } .hotspot-dot:hover .popover-bot { transform: translateX(0) scale(1); } .grass-popover.flip-left { left: auto; right: 18px; } .grass-popover.flip-left::before { left: auto; right: -6px; border-left: none; border-bottom: none; border-right: 1px solid rgba(232, 234, 237, 0.45); border-top: 1px solid rgba(232, 234, 237, 0.45); } .popover-top.flip-left { transform: translateX(-10px) scale(0.92); } .popover-mid.flip-left { transform: translateY(-50%) translateX(-10px) scale(0.92); } .popover-bot.flip-left { transform: translateX(-10px) scale(0.92); } .hotspot-dot:hover .popover-top.flip-left { transform: translateX(0) scale(1); } .hotspot-dot:hover .popover-mid.flip-left { transform: translateY(-50%) translateX(0) scale(1); } .hotspot-dot:hover .popover-bot.flip-left { transform: translateX(0) scale(1); } .popover-header { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 5px 5px 5px; padding: 0 0 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .popover-badge { font-size: 0.62rem; font-weight: 700; color: #e8eaed; letter-spacing: 0.5px; } .popover-title { font-size: 0.78rem; font-weight: 700; color: #ffffff; font-family: 'Pretendard', sans-serif; } .popover-img { width: 100%; display: flex; justify-content: center; align-items: center; } .popover-img img { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 3px; } /* Full Modal Overlay (Click Backup & Lightbox) */ .grass-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(0, 0, 0, 0.88); z-index: 999999 !important; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .grass-modal-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; } .grass-modal-content { position: relative; width: 90%; max-width: 850px; background: transparent; border-radius: 12px; padding: 10px; transform: translateY(20px) scale(0.94); opacity: 0; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .grass-modal-overlay.show .grass-modal-content { transform: translateY(0) scale(1); opacity: 1; } .grass-modal-content img { width: 100%; max-height: 85vh; object-fit: contain; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(232, 234, 237,0.3); border: 1px solid rgba(232, 234, 237, 0.4); } .grass-modal-close { position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; background: #e8eaed; color: #111; border: none; border-radius: 50%; font-size: 1.3rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.2s ease, background 0.2s ease; z-index: 100; } .grass-modal-close:hover { transform: scale(1.15); background: #fff; } /* Spotlight Glow for Dark Hardware */ .dark-hw-spotlight { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 60%) !important; } .dark-hw-spotlight img { filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)) drop-shadow(0 0 15px rgba(255,255,255,0.08)); } /* Unified Product Layout Helper Classes */ .p-statement-pb120 { padding-bottom: 120px !important; } .mt-5rem { margin-top: 5rem !important; } .max-1200 { max-width: 1200px !important; } .py-6rem { padding-top: 6rem !important; padding-bottom: 6rem !important; } .py-4rem { padding-top: 4rem !important; padding-bottom: 4rem !important; } .flex-col-center { display: flex; flex-direction: column; align-items: center; } .sec-tag-gold-pill { display: inline-block; margin-bottom: 1.5rem; color: #e8eaed; font-weight: 700; letter-spacing: 2px; border: 1px solid rgba(232, 234, 237,0.4); padding: 0.4rem 1.2rem; border-radius: 30px; background: rgba(232, 234, 237,0.05); } .sec-tag-gold-box { display: inline-block; margin-bottom: 1rem; color: #e8eaed; font-weight: 700; letter-spacing: 2px; border: 1px solid rgba(232, 234, 237,0.4); padding: 0.3rem 0.8rem; border-radius: 4px; } .title-clamp-lg { font-size: clamp(2.2rem, 5vw, 3.5rem); margin-bottom: 1.5rem; text-align: center; line-height: 1.3; font-family: var(--font-heading); font-weight: 800; } .title-clamp-md { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.2rem; text-align: left; line-height: 1.3; font-family: var(--font-heading); } .lead-centered-max650 { font-size: 1.15rem; color: rgba(255,255,255,0.7); max-width: 650px; text-align: center; margin-bottom: 4rem; line-height: 1.6; word-break: keep-all; } .lead-left-max600 { font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 600px; text-align: left; margin-bottom: 0; line-height: 1.6; word-break: keep-all; } .grid-fit-280 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1100px; } .grid-fit-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; width: 100%; max-width: 1200px; margin: 0 auto; } .grid-card-300 { border-radius: 16px; overflow: hidden; height: 400px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); position: relative; } .grid-card-img-fit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .grid-card-300:hover .grid-card-img-fit { transform: scale(1.05); } .grid-card-badge { position: absolute; top: 1.5rem; left: 1.5rem; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(10px); padding: 0.5rem 1.2rem; border-radius: 30px; font-weight: 800; font-family: var(--font-heading); font-size: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; letter-spacing: 1.5px; } .list-card-centered { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 18px; padding: 2.5rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .list-card-centered:hover { background: rgba(232, 234, 237,0.08); border-color: rgba(232, 234, 237,0.4); transform: translateY(-6px); box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 20px rgba(232, 234, 237,0.2); } .list-card-flex-left { display: flex; align-items: center; gap: 1.2rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 1.5rem 1.8rem; transition: all 0.3s ease; } .list-card-flex-left:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); } .list-icon-gold-circle { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(232, 234, 237,0.4); background: rgba(232, 234, 237,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 1.2rem; box-shadow: 0 4px 12px rgba(232, 234, 237,0.12); transition: all 0.3s ease; } .list-card-centered:hover .list-icon-gold-circle { transform: scale(1.1); border-color: #e8eaed; background: rgba(232, 234, 237,0.2); } /* --- SVG / Layout Component Style --- */ .list-icon-check::after { content: ''; display: block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* --- SVG / Layout Component Style --- */ .icon-inquiry::before { content: ''; display: inline-block; width: 17px; height: 17px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; } .icon-top::before { content: ''; display: inline-block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; vertical-align: middle; } /* --- SVG / Layout Component Style --- */ .icon-chart::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V10'/%3E%3Cpath d='M18 20V4'/%3E%3Cpath d='M6 20v-4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V10'/%3E%3Cpath d='M18 20V4'/%3E%3Cpath d='M6 20v-4'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-monitor::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-clock::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-file::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-star::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-target::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-video::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3V9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='3'/%3E%3Cpath d='M10 9l5 3-5 3V9z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-dual::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cline x1='12' y1='3' x2='12' y2='21'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-compass::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .icon-phone::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='3'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='3'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* --- SVG / Layout Component Style --- */ .vc-icon-play::before { content: ''; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-pause::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-vol::before { content: ''; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-mute::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-full::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-exit::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='10' y1='14' x2='3' y2='21'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='10' y1='14' x2='3' y2='21'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .list-text-white-nowrap { font-size: 1rem; font-weight: 600; color: #ffffff; line-height: 1.5; letter-spacing: -0.01em; white-space: nowrap; } /* ========================================================================= Unified Product Pages (prod/*.html) Comprehensive Layout & Alignment CSS ========================================================================= */ /* Hero Stage Alignment & Spacing */ .about-hero-stage { position: relative; padding: 140px 20px 80px 20px !important; text-align: center !important; background: #050505 !important; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero-glow-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 450px; background: radial-gradient(circle, rgba(232, 234, 237, 0.18) 0%, rgba(5, 5, 5, 0) 70%); pointer-events: none; z-index: 1; } .about-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center !important; } .p-badge-gold { display: inline-flex; align-items: center; justify-content: center; padding: 6px 20px; border-radius: 30px; border: 1px solid rgba(232, 234, 237, 0.45); background: rgba(232, 234, 237, 0.08); color: #e8eaed; font-size: 0.82rem; font-weight: 700; letter-spacing: 1.5px; margin-bottom: 24px; text-transform: uppercase; box-shadow: 0 4px 15px rgba(232, 234, 237, 0.1); } .about-hero-title { font-size: clamp(2.8rem, 6vw, 4.2rem) !important; font-weight: 800 !important; color: #ffffff !important; font-family: var(--font-heading) !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; margin: 0 0 18px 0 !important; text-align: center !important; width: 100%; } .about-hero-sub { font-size: 1.2rem !important; color: rgba(255, 255, 255, 0.75) !important; line-height: 1.6 !important; text-align: center !important; margin: 0 0 44px 0 !important; max-width: 700px; word-break: keep-all; font-weight: 400; } .p-hero-chips, .p-hero-chips.centered, .p-hero-chips.center { display: flex !important; justify-content: center !important; align-items: stretch !important; gap: 20px !important; width: 100%; max-width: 900px; margin: 0 auto !important; flex-wrap: wrap; text-align: center !important; } .p-chip { flex: 1 1 220px; max-width: 270px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 24px 20px; text-align: center !important; display: flex; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; } .p-chip:hover { transform: translateY(-6px); border-color: rgba(232, 234, 237, 0.5); background: rgba(232, 234, 237, 0.08); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(232, 234, 237, 0.2); } .p-chip-num { display: block; font-size: 1.75rem; font-weight: 800; color: #ffffff; margin-bottom: 6px; font-family: var(--font-heading); text-align: center !important; letter-spacing: -0.01em; line-height: 1.2; } .p-chip-label { display: block; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); text-align: center !important; font-weight: 500; line-height: 1.4; word-break: keep-all; } /* Statement Section Spacing & Alignment */ .p-statement-section { padding: 100px 20px !important; background: #050505; text-align: center !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .p-statement-heading { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 24px; text-align: center !important; font-family: var(--font-heading); letter-spacing: -0.02em; } .p-statement-desc { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); line-height: 1.75; max-width: 800px; margin: 0 auto; text-align: center !important; word-break: keep-all; } /* Feature Sections Padding & Centering */ .p-feature-section { padding: 100px 20px !important; } .p-feature-section .p-container { max-width: 1200px; margin: 0 auto; } /* Hardware Theater Section Spacing & Centering */ .p-hardware-theater { padding: 100px 20px !important; background: #0d0d0d; } .p-header-center { text-align: center !important; max-width: 800px; margin: 0 auto 60px auto !important; display: flex; flex-direction: column; align-items: center; } .p-header-center h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #ffffff; margin: 16px 0 14px 0; text-align: center !important; font-family: var(--font-heading); } .p-header-center p { font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); text-align: center !important; line-height: 1.6; margin: 0; word-break: keep-all; } /* CTA Wrapper Spacing & Centering (Simpler, Sleeker Modern Design) */ /* ========================================================================== Comprehensive Mobile & Tablet Responsive Optimizations ========================================================================== */ @media screen and (max-width: 1024px) { /* Sub Page Sticky Navigation Bar Optimization */ .sub-page-nav { top: 68px !important; padding: 0.5rem 0.5rem !important; } .sub-nav-inner, .sub-nav-container { justify-content: center !important; padding: 6px 10px !important; gap: 0.5rem !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .sub-nav-item { flex-shrink: 0 !important; font-size: 0.88rem !important; padding: 0.5rem 1rem !important; white-space: nowrap !important; scroll-snap-align: start; border-radius: 8px !important; } /* Tablet Grid Adjustments */ .p-overview-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem !important; } } @media screen and (max-width: 768px) { /* Mobile Sub Navigation: 2-Row Wrapped Layout */ .sub-nav-inner, .sub-nav-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 0.4rem 0.35rem !important; padding: 0.6rem 0.5rem !important; overflow-x: visible !important; } .sub-nav-item { font-size: 0.78rem !important; padding: 0.32rem 0.68rem !important; white-space: nowrap !important; border-radius: 20px !important; } /* Prevent Heading & Text Truncation / Overflow */ .p-overview-maintitle, .p-statement-heading, .title-clamp-lg, .title-clamp-md { font-size: clamp(1.25rem, 5vw, 1.65rem) !important; line-height: 1.4 !important; word-break: keep-all !important; overflow-wrap: break-word !important; padding: 0 0.5rem; } .p-overview-maintitle br, .p-statement-heading br { display: none !important; /* Hide hardcoded
on mobile so text wraps naturally */ } .p-overview-maintitle .highlight-gold { display: inline !important; word-break: keep-all !important; } /* Single column layout for mobile cards */ .p-overview-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .p-overview-card { padding: 1.5rem 1.25rem !important; } /* Hero Chip spacing on Mobile & Tablet (Web Consistency) */ .header-utils { display: flex !important; margin-left: auto; margin-right: 6px; } .p-hero-chips { display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; gap: 0.5rem !important; width: 100% !important; max-width: 720px; margin-left: auto; margin-right: auto; } .p-chip { flex: 1 1 0 !important; min-width: 0 !important; min-height: 68px !important; /* Preserve card depth like desktop */ padding: 0.75rem 0.35rem !important; border-radius: 12px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; background: rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important; } .p-chip-num { font-size: clamp(0.82rem, 3.1vw, 1.15rem) !important; font-weight: 800 !important; white-space: nowrap !important; letter-spacing: -0.5px !important; margin-bottom: 2px !important; line-height: 1.15 !important; } .p-chip-label { font-size: clamp(0.62rem, 2vw, 0.75rem) !important; white-space: nowrap !important; letter-spacing: -0.3px !important; line-height: 1.2 !important; opacity: 0.8; } /* CTA Section Mobile Padding */ /* Floating Buttons Mobile Stacking */ .btn-top { bottom: 85px !important; right: 16px !important; width: 54px !important; height: 54px !important; } } /* ========================================================================== Clean Responsive Layout System for Feature Split & Core Highlights ========================================================================== */ .p-statement-hero-spacing { padding-top: 6rem; padding-bottom: 3rem; } .p-bg-dark-blue { background: #0b1521 !important; } .p-tag-center { margin: 0 auto 1rem !important; } .p-tag-gold-bg { color: #e8eaed !important; border-color: rgba(232, 234, 237,0.4) !important; background: rgba(232, 234, 237,0.08) !important; } .mt-1rem { margin-top: 1rem !important; } .text-nowrap-tight { white-space: normal; letter-spacing: -0.3px; word-break: break-word; } .mt-08 { margin-top: 0.8rem !important; } /* Split Row Layout */ .p-split-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; } .p-sensor-card { padding: 2.5rem 1.5rem; border-radius: 24px; border: 1px solid rgba(232, 234, 237,0.35); background: #000; box-shadow: 0 20px 40px rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; position: relative; width: 100%; } .p-sensor-img { width: 100%; max-width: 480px; height: auto; object-fit: contain; transform: scale(1.05); } .p-split-title { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.35; margin-top: 0.8rem; margin-bottom: 1.5rem; color: #ffffff; } /* Pill List Grid */ .p-pill-grid { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; } .p-pill { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 0.85rem 1.3rem; border-radius: 12px; display: flex; align-items: center; gap: 0.8rem; transition: all 0.3s ease; width: 100%; white-space: nowrap; word-break: keep-all; } .p-pill:hover { background: rgba(255,255,255,0.07); border-color: rgba(232, 234, 237,0.3); } .pill-dot { width: 8px; height: 8px; background: #e8eaed; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 8px rgba(232, 234, 237,0.6); } .p-pill-text { color: #ffffff; font-size: 0.95rem; font-weight: 500; letter-spacing: -0.2px; word-break: keep-all; line-height: 1.4; } /* Core Features Grid */ .p-core-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 0; } .p-core-feature-item { text-align: center; display: flex; flex-direction: column; align-items: center; } .p-core-img-box { width: 100%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; background: #111; box-shadow: 0 4px 20px rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; } .p-core-img-box img { width: 100%; height: 100%; object-fit: cover; } .p-core-img-box.p-img-pad img { object-fit: contain; padding: 1.5rem; } .p-core-text-box { display: flex; flex-direction: column; gap: 4px; align-items: center; } .p-core-text-box h3 { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; } .p-core-sub { font-size: 1rem; font-weight: 600; color: #e8eaed; margin: 0; line-height: 1.3; } .p-core-text-box p { font-size: 0.85rem; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; margin: 0; line-height: 1.3; word-break: keep-all; } .img-scale-102 { transform: scale(1.02); } /* Mobile & Tablet Overrides for Split Row & Core Features */ @media screen and (max-width: 1024px) { .p-split-row { grid-template-columns: 1fr !important; gap: 2.5rem !important; } .p-sensor-card { max-width: 600px; margin: 0 auto; padding: 2rem 1.5rem; } .p-core-features-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem !important; } } @media screen and (max-width: 640px) { .p-split-row { gap: 2rem !important; } .p-sensor-card { padding: 1.5rem 1rem; border-radius: 18px; } .p-pill { padding: 0.75rem 1rem; } .p-pill-text { font-size: 0.88rem; } .p-core-features-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem !important; } .p-core-text-box h3 { font-size: 1rem; } .p-core-text-box p { font-size: 0.8rem; } } /* ========================================================================== Mobile-Only 2-Row Sub Navigation (Guaranteed Multi-row Wrap) ========================================================================== */ @media screen and (max-width: 768px) { .sub-page-nav { top: 68px !important; padding: 0.4rem 0.3rem !important; } .sub-nav-inner, .sub-nav-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 0.45rem 0.4rem !important; padding: 6px 8px !important; overflow: visible !important; max-width: 100% !important; white-space: normal !important; background: rgba(22, 26, 36, 0.95) !important; border-radius: 12px !important; } .sub-nav-item { flex-shrink: 1 !important; font-size: 0.85rem !important; font-weight: 700 !important; padding: 0.45rem 0.85rem !important; white-space: nowrap !important; border-radius: 8px !important; margin: 0 !important; line-height: 1.3 !important; } } /* Top Sticky Sub Navigation Position Helper */ .sub-page-nav.top-nav-sticky { position: sticky; top: 80px; z-index: 999; } @media screen and (max-width: 1024px) { .sub-page-nav.top-nav-sticky { top: 68px !important; } } /* ========================================================================== Hyper-Modern Apple/Linear Style Visual Extensions for Swing Page ========================================================================== */ /* Hero Stage Aura & Typography */ .p-hero-hyper { position: relative; padding: 110px 20px 90px !important; background: #050507; overflow: hidden; text-align: center; } @media screen and (max-width: 768px) { .p-hero-hyper { padding: 85px 16px 50px !important; } } /* ========================================================================== Real Dynamic Swing Line & Motion Scan Animations ========================================================================== */ .swing-screen-box { position: relative; width: 100%; height: 100%; overflow: hidden; } .laser-line-red { position: absolute; top: 10%; left: 27%; width: 2.5px; height: 42%; background: linear-gradient(180deg, rgba(255, 59, 48, 0.3) 0%, #ff3b30 50%, rgba(255, 59, 48, 0.3) 100%); box-shadow: 0 0 10px #ff3b30, 0 0 20px rgba(255, 59, 48, 0.8); z-index: 10; animation: scanRedLine var(--anim-speed, 2.5s) ease-in-out infinite alternate; } .laser-line-red-2 { position: absolute; top: 10%; left: 36%; width: 2.5px; height: 42%; background: linear-gradient(180deg, rgba(255, 59, 48, 0.3) 0%, #ff3b30 50%, rgba(255, 59, 48, 0.3) 100%); box-shadow: 0 0 10px #ff3b30, 0 0 20px rgba(255, 59, 48, 0.8); z-index: 10; animation: scanRedLine var(--anim-speed, 2.5s) ease-in-out infinite alternate-reverse; } @keyframes scanRedLine { 0% { transform: translateY(-4px) scaleY(0.95); opacity: 0.6; } 50% { transform: translateY(4px) scaleY(1.05); opacity: 1; box-shadow: 0 0 16px #ff3b30, 0 0 28px #ff3b30; } 100% { transform: translateY(-4px) scaleY(0.95); opacity: 0.6; } } .dynamic-arc-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .dynamic-arc-path { stroke: #ff3b30; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 500; stroke-dashoffset: 500; filter: drop-shadow(0 0 8px #ff3b30); animation: drawArc var(--anim-speed, 2.5s) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .dynamic-arc-path-gold { stroke: #e8eaed; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; filter: drop-shadow(0 0 10px #e8eaed); animation: drawArc var(--anim-speed, 2.5s) cubic-bezier(0.4, 0, 0.2, 1) infinite 0.3s; } @keyframes drawArc { 0% { stroke-dashoffset: 500; opacity: 0; } 20% { opacity: 1; } 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* 3D Motion Scanner Target Pulses */ .motion-target-dot { position: absolute; top: 28%; right: 23%; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #00e5ff; box-shadow: 0 0 14px #00e5ff; z-index: 10; animation: pulseTarget var(--anim-speed, 2.5s) ease-out infinite; } .motion-target-dot::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: #00e5ff; border-radius: 50%; } .motion-target-dot-2 { position: absolute; top: 70%; right: 25%; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #e8eaed; box-shadow: 0 0 12px #e8eaed; z-index: 10; animation: pulseTarget var(--anim-speed, 2.5s) ease-out infinite 0.5s; } @keyframes pulseTarget { 0% { transform: scale(0.6); opacity: 1; } 60% { transform: scale(1.6); opacity: 0.4; } 100% { transform: scale(2.2); opacity: 0; } } /* Slow Motion Speed Indicator Badge */ .speed-status-indicator { background: rgba(232, 234, 237, 0.15); border: 1px solid #e8eaed; color: #e8eaed; padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px; transition: all 0.3s ease; } /* ========================================================================== Additional Rich Swing Motion Animations (Wave Ripples & Joint Scans) ========================================================================== */ .impact-wave-ripple { position: absolute; top: 65%; left: 32%; width: 50px; height: 50px; border-radius: 50%; border: 2px solid #e8eaed; box-shadow: 0 0 20px #e8eaed; animation: waveRipple var(--anim-speed, 2.2s) cubic-bezier(0.1, 0.8, 0.3, 1) infinite; pointer-events: none; z-index: 10; } @keyframes waveRipple { 0% { transform: scale(0.2); opacity: 1; border-color: #ff3b30; } 50% { opacity: 0.8; border-color: #e8eaed; } 100% { transform: scale(3.2); opacity: 0; } } .spine-angle-line { stroke: #4cd964; stroke-width: 2.5; stroke-dasharray: 6 4; animation: spinePulse var(--anim-speed, 2.5s) ease-in-out infinite alternate; } @keyframes spinePulse { 0% { opacity: 0.4; stroke-width: 2; } 100% { opacity: 1; stroke-width: 3.5; filter: drop-shadow(0 0 10px #4cd964); } } .skeleton-joint { position: absolute; width: 8px; height: 8px; background: #00e5ff; border-radius: 50%; box-shadow: 0 0 10px #00e5ff, 0 0 20px #00e5ff; z-index: 11; animation: jointBlink var(--anim-speed, 1.8s) ease-in-out infinite alternate; } .joint-shoulder { top: 22%; right: 24%; } .joint-elbow { top: 32%; right: 27%; } .joint-wrist { top: 40%; right: 29%; } .joint-hip { top: 48%; right: 24%; } .joint-knee { top: 68%; right: 26%; } @keyframes jointBlink { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px #00e5ff, 0 0 28px #00e5ff; } } .p-hero-hyper::before { content: ''; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(circle, rgba(232, 234, 237, 0.18) 0%, rgba(232, 234, 237, 0.03) 45%, transparent 70%); filter: blur(80px); pointer-events: none; z-index: 0; } .hyper-tag-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 30px; background: rgba(232, 234, 237, 0.08); border: 1px solid rgba(232, 234, 237, 0.3); color: #e8eaed; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 24px; box-shadow: 0 0 20px rgba(232, 234, 237, 0.15); white-space: nowrap; width: fit-content; } .hyper-hero-title { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 900; letter-spacing: -0.03em; color: #ffffff; line-height: 1.15; margin-bottom: 20px; font-family: var(--font-heading); } .hyper-hero-title span { background: linear-gradient(135deg, #ffffff 0%, #e8eaed 50%, #f7d598 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hyper-hero-desc { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.7); max-width: 720px; margin: 0 auto 36px auto; line-height: 1.65; word-break: keep-all; } /* Swing Studio Showcase Player UI & Dashboard */ .showcase-header-bar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .showcase-status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; background: rgba(232, 234, 237, 0.12); border: 1px solid rgba(232, 234, 237, 0.3); border-radius: 50px; font-size: 0.75rem; font-weight: 700; color: #e8eaed; letter-spacing: 0.5px; margin-bottom: 0.5rem; } .status-dot-pulse { width: 6px; height: 6px; border-radius: 50%; background: #e8eaed; box-shadow: 0 0 8px #e8eaed; animation: pulseGlow 2s infinite ease-in-out; } @keyframes pulseGlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .showcase-section-title { font-size: 1.6rem; font-weight: 800; color: #ffffff; margin: 0; } .showcase-quick-features { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .showcase-feature-chip { font-size: 0.85rem; font-weight: 700; color: #ffffff; padding: 0.4rem 0.95rem; background: rgba(232, 234, 237, 0.12); border: 1px solid rgba(232, 234, 237, 0.3); border-radius: 8px; letter-spacing: -0.01em; } .swing-player-wrapper { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(232, 234, 237, 0.4) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(232, 234, 237, 0.2) 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(232, 234, 237, 0.15); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; } .swing-player-wrapper:hover { box-shadow: 0 35px 90px rgba(0, 0, 0, 0.95), 0 0 65px rgba(232, 234, 237, 0.25); } .swing-player-screen { background: #0d0f12; border-radius: 19px; overflow: hidden; display: flex; flex-direction: column; width: 100%; } .swing-screen-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.2rem; background: rgba(20, 22, 26, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .swing-screen-dots { display: flex; gap: 6px; } .swing-screen-dot { width: 10px; height: 10px; border-radius: 50%; } .swing-screen-dot.red { background-color: #ff5f56; } .swing-screen-dot.yellow { background-color: #ffbd2e; } .swing-screen-dot.green { background-color: #27c93f; } .swing-screen-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; } .swing-screen-status { font-size: 0.72rem; font-weight: 700; color: #e8eaed; display: flex; align-items: center; gap: 0.4rem; letter-spacing: 0.5px; } .live-rec-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff5f56; box-shadow: 0 0 8px #ff5f56; animation: pulseGlow 1.5s infinite ease-in-out; } .swing-screen-body { position: relative; width: 100%; background: #000; } .swing-screen-body img { display: block; width: 100%; max-height: 540px; height: auto; object-fit: contain; margin: 0 auto; } /* Floating HUD Overlay Badges */ .swing-data-badge { position: absolute; background: rgba(13, 15, 18, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(232, 234, 237, 0.35); border-radius: 10px; padding: 8px 14px; color: #fff; font-size: 0.8rem; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); z-index: 2; } .swing-data-badge.top-left { top: 16px; left: 16px; } .swing-data-badge.top-right { top: 16px; right: 16px; } .swing-data-badge .label { color: #e8eaed; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.5px; } .swing-data-badge .val { font-weight: 800; font-size: 0.95rem; font-family: var(--font-heading); color: #ffffff; } @media screen and (max-width: 768px) { .swing-data-badge { padding: 5px 10px !important; gap: 1px !important; line-height: 1.2 !important; } .swing-data-badge .label { font-size: 0.55rem !important; letter-spacing: 0px !important; } .swing-data-badge .val { font-size: 0.75rem !important; } .swing-data-badge.top-left { top: 8px !important; left: 8px !important; } .swing-data-badge.top-right { top: 62px !important; left: 8px !important; right: auto !important; } } /* Interactive Speed Control Bar */ .swing-control-bar { background: rgba(16, 18, 22, 0.95); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .swing-control-info { display: flex; align-items: center; gap: 0.8rem; } .swing-status-indicator { font-size: 0.8rem; font-weight: 700; color: #27c93f; letter-spacing: 0.5px; } .swing-mode-name { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); padding-left: 0.8rem; border-left: 1px solid rgba(255, 255, 255, 0.15); } .speed-selector { display: flex; align-items: center; gap: 0.5rem; } .speed-label { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); margin-right: 0.3rem; font-weight: 600; } .speed-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); padding: 5px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.25s ease; } .speed-btn:hover, .speed-btn.active { background: #e8eaed; color: #000; border-color: #e8eaed; box-shadow: 0 0 12px rgba(232, 234, 237, 0.3); } /* Showcase Quick Metrics Cards below player */ .showcase-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; } .showcase-metric-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.4rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 14px; transition: all 0.3s ease; } .showcase-metric-card:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(232, 234, 237, 0.3); transform: translateY(-3px); } .showcase-metric-card .metric-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; background: rgba(232, 234, 237, 0.08); border: 1px solid rgba(232, 234, 237, 0.2); border-radius: 12px; box-shadow: inset 0 0 12px rgba(232, 234, 237, 0.05); transition: all 0.3s ease; } .showcase-metric-card:hover .metric-icon { background: rgba(232, 234, 237, 0.2); border-color: rgba(232, 234, 237, 0.4); box-shadow: 0 0 15px rgba(232, 234, 237, 0.25); transform: scale(1.05); } .hitech-pillar-card { transition: all 0.35s ease !important; } .hitech-pillar-card:hover { background: rgba(0, 0, 0, 0.04) !important; border-color: rgba(232, 234, 237, 0.45) !important; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(232, 234, 237, 0.2) !important; } .showcase-metric-card .metric-info h4 { font-size: 0.95rem; font-weight: 700; color: #ffffff; margin-bottom: 0.3rem; } .showcase-metric-card .metric-info p { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin: 0; line-height: 1.5; } @media screen and (max-width: 900px) { .showcase-metrics-grid { grid-template-columns: 1fr; } } /* Hyper Bento Cards */ .hyper-bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 0; } .hyper-bento-card { position: relative; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 2.2rem 1.8rem; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .hyper-bento-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(232, 234, 237, 0.08), transparent 40%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .hyper-bento-card:hover::before { opacity: 1; } .hyper-bento-card:hover { transform: translateY(-8px); border-color: rgba(232, 234, 237, 0.45); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(232, 234, 237, 0.12); background: rgba(0, 0, 0, 0.04); } .hyper-card-num { font-size: 2.5rem; font-weight: 900; color: rgba(232, 234, 237, 0.25); font-family: var(--font-heading); line-height: 1; margin-bottom: 1rem; transition: color 0.3s ease; } .hyper-bento-card:hover .hyper-card-num { color: rgba(232, 234, 237, 0.8); } .hyper-card-title { font-size: 1.3rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; line-height: 1.3; } .hyper-card-desc { font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); line-height: 1.65; word-break: keep-all; } @media screen and (max-width: 1024px) { .hyper-bento-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 768px) { .hyper-bento-grid { grid-template-columns: 1fr; } .hyper-card-title { font-size: 1.1rem !important; } .hyper-card-desc { font-size: 0.82rem !important; } } @media screen and (max-width: 640px) { .hyper-bento-grid { grid-template-columns: 1fr; } .swing-control-bar { flex-direction: column; gap: 10px; } } /* Unified Spec Strip (Clean Text Line to differentiate from Tab Menu Buttons) */ .hero-spec-strip { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; backdrop-filter: none; flex-wrap: wrap; } .spec-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; color: #ffffff; text-transform: uppercase; } .spec-item.highlight { color: #f3c66b; font-weight: 800; } .spec-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #e8eaed; box-shadow: 0 0 8px #e8eaed; } .spec-divider { color: rgba(255, 255, 255, 0.18); font-size: 0.8rem; font-weight: 300; user-select: none; } /* Swing Player Device Showcase Frame */ .swing-player-wrapper { position: relative; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(232, 234, 237, 0.4) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(232, 234, 237, 0.2) 100%); box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 50px rgba(232, 234, 237, 0.15); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; } .swing-player-wrapper:hover { box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.9), 0 0 65px rgba(232, 234, 237, 0.25); } .swing-player-screen { background: #0d0f12; border-radius: 19px; overflow: hidden; } .swing-screen-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.2rem; background: rgba(20, 22, 26, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .swing-screen-dots { display: flex; gap: 6px; } .swing-screen-dot { width: 10px; height: 10px; border-radius: 50%; } .swing-screen-dot.red { background-color: #ff5f56; } .swing-screen-dot.yellow { background-color: #ffbd2e; } .swing-screen-dot.green { background-color: #27c93f; } .swing-screen-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; } .swing-player-screen img { display: block; width: 100%; height: auto; } .sw-hero-title { font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 24px; font-family: var(--font-heading, 'Outfit', sans-serif); } .sw-hero-desc { font-size: 1.05rem; color: rgba(255,255,255,.65); line-height: 1.75; margin: 0 0 32px; word-break: keep-all; } .sw-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } @media screen and (max-width: 992px) { .sw-tags { display: none !important; } } .sw-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; letter-spacing: 1px; color: rgba(255,255,255,.65); border: 1px solid rgba(255,255,255,.12); padding: 6px 14px; border-radius: 20px; text-transform: uppercase; } .sw-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: #E63946; box-shadow: 0 0 8px rgba(230, 57, 70, 0.6); } .sw-subnav { position: sticky; top: 72px; z-index: 200; background: transparent !important; border-bottom: none !important; padding-bottom: 20px; display: flex; justify-content: center; transition: background 0.25s ease, border-color 0.25s ease; } @media screen and (max-width: 768px) { .sw-subnav { justify-content: flex-start; padding-left: 16px; padding-right: 16px; } } .sw-subnav.is-stuck { background: #18191d; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .sw-subnav-inner { position: relative; max-width: fit-content; margin: 0; padding: 6px 6px !important; display: inline-flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 40px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); margin: 0 auto !important; } .sw-subnav-inner::after { content: ''; display: none; } .sw-subnav-inner::-webkit-scrollbar { display: none !important; } .sw-subnav-inner::-webkit-scrollbar-track { background: transparent; } .sw-subnav-inner::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; } .sw-subnav-inner:hover::-webkit-scrollbar-thumb { background: rgba(232, 234, 237, 0.5); } /* Custom horizontal scrollbar track and thumb dynamically generated by tabNav.js */ .sw-subnav-scrollbar-track { display: none !important; } .sw-snav { position: relative; padding: 10px 24px !important; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.6); text-decoration: none; white-space: nowrap; transition: all .3s ease; flex-shrink: 0; border-radius: 30px; } .sw-snav::after { display: none !important; } .sw-snav:hover { color: #ffffff; background: rgba(255,255,255,0.1); } .sw-snav.active { color: #ffffff !important; background: #E63946 !important; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); } /* === Inquiry & Purchase Contact Form Shared === */ .contact-section, .purchase-section { background: #0a0c0f; padding: 80px 20px 100px; color: #fff; } .contact-container, .purchase-container { max-width: 1240px; margin: 0 auto; } /* Inquiry Top Cards */ .contact-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .contact-info-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 36px 28px; text-align: center; transition: all 0.3s ease; } .contact-icon-box { width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .contact-info-card h4 { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); font-weight: 500; margin-bottom: 6px; } .contact-info-card p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); line-height: 1.6; margin: 0; } .contact-info-card p.card-subtext { font-size: 0.85rem; margin-top: 8px; } .contact-info-card strong { color: #ffffff; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; } .p-statement-section { padding: 80px 20px; } .p-statement-heading { font-size: 2.5rem; font-weight: 800; line-height: 1.3; margin-bottom: 20px; letter-spacing: -0.02em; } .p-statement-desc { font-size: 1.15rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-top: 15px; } /* Purchase Product Grid */ .product-select-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; } .prod-card-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.25s ease; position: relative; } .prod-card-item:hover { background: rgba(232, 234, 237, 0.06); border-color: rgba(232, 234, 237, 0.35); transform: translateY(-3px); } .prod-card-item.selected { background: rgba(232, 234, 237, 0.12); border-color: #e8eaed; box-shadow: 0 0 25px rgba(232, 234, 237, 0.25); } .prod-card-item .badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; color: #e8eaed; background: rgba(232, 234, 237, 0.15); padding: 4px 12px; border-radius: 20px; display: inline-block; margin-bottom: 12px; } .prod-card-item h4 { font-size: 1.2rem; color: #fff; font-weight: 800; margin-bottom: 8px; } .prod-card-item p { font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); line-height: 1.5; margin: 0; } .prod-card-item .check-icon { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0.75rem; transition: all 0.2s ease; } .prod-card-item.selected .check-icon { background: #e8eaed; border-color: #e8eaed; color: #000; font-weight: 900; } /* Common Form Box & Fields */ .contact-form-box, .purchase-form-box { background: rgba(18, 22, 28, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: 56px 48px; backdrop-filter: blur(16px); } .form-header { text-align: center; margin-bottom: 40px; } .form-header h3 { font-size: 1.85rem; font-weight: 800; color: #fff; margin-top: 10px; } .form-header p { color: rgba(255, 255, 255, 0.6); font-size: 0.98rem; margin-top: 8px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .form-group { display: flex; flex-direction: column; gap: 8px; } .form-group.full { grid-column: span 2; } .form-group label { font-size: 0.9rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); } .form-group label span { color: #ff3b30; } .form-input, .form-select, .form-textarea { background-color: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 15px 18px; color: #ffffff; font-size: 0.95rem; transition: all 0.25s ease; width: 100%; outline: none; box-sizing: border-box; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #ff3b30; box-shadow: 0 0 14px rgba(255, 59, 48, 0.25); background-color: rgba(0, 0, 0, 0.65); } .submit-btn { display: block; min-width: 320px; margin: 28px auto 0; padding: 18px 40px; background: #ffffff; color: #050505; font-weight: 800; font-size: 1.05rem; border: none; border-radius: 12px; cursor: pointer; transition: all 0.25s ease; } .submit-btn:hover { background: #e63946 !important; color: #ffffff !important; box-shadow: none !important; filter: none !important; transform: none !important; opacity: 1 !important; } .form-select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; cursor: pointer; background-color: rgba(0, 0, 0, 0.45); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 20px center !important; background-size: 16px 16px !important; padding-right: 48px !important; } .form-select:focus { background-color: rgba(0, 0, 0, 0.65) !important; } .form-select option { background: #14181e; color: #fff; padding: 10px; } .form-textarea { resize: vertical; min-height: 150px; } .privacy-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .privacy-check input[type="checkbox"] { accent-color: #e8eaed; width: 18px; height: 18px; cursor: pointer; } /* === Board Section === */ .board-section { background: #0a0c0f; padding: 80px 20px 100px; color: #fff; } .board-container { max-width: 1240px; margin: 0 auto; } .board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .board-cat-tabs { display: flex; gap: 8px; overflow-x: auto; } .board-cat-btn { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); padding: 9px 18px; border-radius: 30px; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .board-cat-btn:hover, .board-cat-btn.active { background: rgba(232, 234, 237, 0.15); border-color: #e8eaed; color: #e8eaed; } .board-actions { display: flex; align-items: center; gap: 12px; } .board-search-input { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 9px 18px; color: #fff; font-size: 0.9rem; outline: none; width: 240px; transition: border-color 0.2s ease; } .board-search-input:focus { border-color: #e8eaed; } .board-search-wrapper { position: relative; display: flex; align-items: center; } .board-search-clear-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.18); border: none; color: rgba(255, 255, 255, 0.85); width: 18px; height: 18px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 13px; line-height: 1; cursor: pointer; transition: all 0.2s ease; padding: 0; } .board-search-clear-btn:hover { background: rgba(232, 234, 237, 0.6); color: #fff; } /* Empty Search Results Message */ .board-no-results { display: none; padding: 50px 20px; text-align: center; color: rgba(255, 255, 255, 0.6); } .no-results-title { font-size: 1.1rem; font-weight: 700; color: #ffffff; margin-bottom: 6px; } .no-results-sub { font-size: 0.88rem; color: rgba(255, 255, 255, 0.5); } .board-write-btn { background: #e8eaed; color: #000; font-weight: 800; font-size: 0.9rem; padding: 9px 22px; border-radius: 20px; border: none; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(232, 234, 237, 0.3); } .board-write-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 234, 237, 0.5); } .board-table-container { background: rgba(18, 22, 28, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; overflow: hidden; backdrop-filter: blur(16px); } .board-list { display: flex; flex-direction: column; } .board-header-row { display: grid; grid-template-columns: 80px 140px 1fr 130px 120px 110px; padding: 18px 28px; background: rgba(0, 0, 0, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.88rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); text-align: center; } .board-header-row .title-col { text-align: left; } .board-item-row { display: grid; grid-template-columns: 80px 140px 1fr 130px 120px 110px; padding: 20px 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.93rem; color: rgba(255, 255, 255, 0.85); align-items: center; text-align: center; cursor: pointer; transition: background 0.2s ease; } .board-item-row.hidden { display: none !important; } .board-item-row:hover { background: rgba(232, 234, 237, 0.06); } .board-item-row .title-col { text-align: left; font-weight: 600; color: #ffffff; display: flex; align-items: center; gap: 8px; } .board-item-row .secret-icon { color: #e8eaed; font-size: 0.85rem; } .status-chip { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 700; } .status-chip.done { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.35); } .status-chip.waiting { background: rgba(255, 171, 0, 0.15); color: #ffab00; border: 1px solid rgba(255, 171, 0, 0.35); } .board-answer-box { display: none; padding: 24px 28px 24px 248px; background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.93rem; color: rgba(255, 255, 255, 0.8); line-height: 1.75; } .board-answer-box.open { display: block; } .answer-reply { margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(232, 234, 237, 0.25); color: #e8eaed; } /* admin toggle & modal extracted from board.html */ .admin-toggle-label { display: flex; align-items: center; gap: 5px; color: #fff; font-size: 14px; cursor: pointer; } .admin-toggle-input { accent-color: #e8eaed; cursor: pointer; } .board-modal-content.pw-modal-content { max-width: 400px; } .pw-modal-title { text-align: center; } .pw-modal-desc { text-align: center; margin-bottom: 20px; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; font-size: 14px; } .pw-modal-hint { font-size: 12px; color: #888; } .board-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .board-modal-overlay.active { display: flex; } .board-modal-content { background: #14181e; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; width: 100%; max-width: 540px; padding: 32px 28px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.8); box-sizing: border-box !important; max-height: 90vh; overflow-y: auto; margin: auto !important; } .board-modal-content.pw-modal-content { max-width: 400px; } .board-modal-content *, .board-modal-content *::before, .board-modal-content *::after { box-sizing: border-box !important; } .modal-close-btn { position: absolute; top: 20px; right: 20px; background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 1.6rem; cursor: pointer; } .modal-close-btn:hover { color: #fff; } .board-modal-title { font-size: 1.4rem; color: #fff; font-weight: 800; margin-bottom: 20px; } .board-modal-form { display: flex; flex-direction: column; gap: 16px; } .board-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 500px) { .board-modal-row { grid-template-columns: 1fr; } } .board-modal-label { font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); font-weight: 600; } .board-modal-field { margin-top: 6px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 12px; color: #fff; width: 100%; outline: none; } .board-modal-field option { background: #14181e; } .board-modal-textarea { min-height: 120px; } .board-modal-submit-btn, .board-modal-content .submit-btn { margin-top: 16px; width: 100% !important; min-width: 0 !important; max-width: 100% !important; padding: 14px 20px; background: #e8eaed; color: #000; font-weight: 800; font-size: 1rem; border: none; border-radius: 12px; cursor: pointer; box-sizing: border-box !important; display: block; } /* Password Toggle UI */ .password-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .password-input-wrapper input { padding-right: 64px !important; } .pw-clear-btn { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; cursor: pointer; display: none; align-items: center; justify-content: center; color: #888; transition: color 0.2s; } .pw-clear-btn:hover { color: #e8eaed; } .icon-x { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; } .pw-toggle-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #888; transition: color 0.2s; } .pw-toggle-btn:hover { color: #e8eaed; } .icon-eye { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; } .icon-eye-off { display: inline-block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.88 9.88a3 3 0 1 0 4.24 4.24'/%3E%3Cpath d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E"); -webkit-mask-size: cover; mask-size: cover; } /* Responsive Styles */ @media (max-width: 900px) { .contact-card-grid { display: none !important; } .form-grid { grid-template-columns: 1fr; } .form-group.full { grid-column: span 1; } .contact-form-box, .purchase-form-box { padding: 32px 24px; } .product-select-grid { grid-template-columns: repeat(2, 1fr); } .board-toolbar { width: 100% !important; max-width: 100% !important; flex-direction: column; align-items: stretch; gap: 14px; overflow: hidden; } .board-cat-tabs { display: flex !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 6px !important; margin-bottom: -4px !important; scrollbar-width: none !important; } .board-cat-tabs::-webkit-scrollbar { display: none !important; } .board-cat-btn { flex-shrink: 0 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .board-actions { width: 100%; display: flex; gap: 10px; } .board-search-wrapper { flex: 1; width: 100%; } .board-search-input { width: 100%; } .board-write-btn { flex-shrink: 0; white-space: nowrap; } .board-header-row { display: none !important; } .board-item-row { display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; text-align: left !important; padding: 16px 18px !important; width: 100% !important; box-sizing: border-box !important; } .board-item-row.hidden { display: none !important; } .board-item-row .num-col, .board-item-row .cat-col, .board-item-row .date-col { display: none !important; } .board-item-row .title-col { flex: 1 1 auto !important; min-width: 0 !important; max-width: calc(100% - 150px) !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .board-item-row .author-col { display: inline-block !important; color: rgba(255, 255, 255, 0.65) !important; font-size: 0.88rem !important; font-weight: 500 !important; white-space: nowrap !important; flex-shrink: 0 !important; margin-left: auto !important; } .board-item-row > span:last-child { flex-shrink: 0 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; } .status-chip { white-space: nowrap !important; flex-shrink: 0 !important; } .board-answer-box { padding: 20px; } .sw-hero { padding: 100px 16px 60px; } } @media (max-width: 600px) { .tab-full { display: none !important; } .tab-short { display: inline !important; } .product-select-grid { grid-template-columns: 1fr; } .board-modal-overlay { padding: 12px !important; } .board-modal-content { padding: 24px 18px !important; border-radius: 16px !important; width: calc(100% - 16px) !important; } } /* === Overseas Partner Pages Styles (wjgolf & sportech) === */ .partner-link-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(20, 24, 30, 0.95) 100%); border: 1px solid rgba(232, 234, 237, 0.25); border-radius: 20px; padding: 3rem; text-align: center; position: relative; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; } .partner-link-card:hover { border-color: #e8eaed; box-shadow: 0 20px 50px rgba(232, 234, 237, 0.2); transform: translateY(-4px); } .partner-flag-badge { font-size: 3rem; margin-bottom: 1rem; display: inline-block; } .part-section-header { text-align: center; margin-bottom: 3rem; } .hyper-tag-pill.gold { background: rgba(232, 234, 237,0.15); color: #e8eaed; } .hyper-tag-pill.mb-12 { margin-bottom: 12px; } .hyper-tag-pill.mb-1rem { margin-bottom: 1rem; } .part-section-title { font-size: 2.2rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; } .part-section-desc { color: rgba(255,255,255,0.65); font-size: 0.95rem; } .part-video-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .part-video-single { max-width: 900px; margin: 0 auto; } .part-video-screen { width: 100%; aspect-ratio: 16 / 10; background: #000; overflow: hidden; position: relative; } .part-video-screen-16-9 { width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; position: relative; } .part-video-element { width: 100%; height: 100%; object-fit: cover; display: block; } .part-video-info { padding: 1.2rem 1.5rem; background: rgba(20,22,26,0.95); border-top: 1px solid rgba(255,255,255,0.08); } .part-video-title { font-size: 1.05rem; color: #fff; font-weight: 700; margin-bottom: 0.4rem; } .part-video-sub { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } .partner-link-bar-wrapper { margin-top: 3rem; } .partner-link-bar { background: rgba(26, 26, 26, 0.95); border: 1px solid rgba(232, 234, 237, 0.25); border-radius: 16px; padding: 1.2rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 900px; margin: 0 auto; backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .partner-link-left { display: flex; align-items: center; gap: 1rem; } .partner-badge { background: rgba(232, 234, 237,0.12); border: 1px solid rgba(232, 234, 237,0.3); border-radius: 50px; padding: 0.35rem 0.82rem; font-size: 0.78rem; font-weight: 700; color: #e8eaed; display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .flag-icon { display: inline-block; width: 18px; height: 12px; border-radius: 2px; background-size: cover; background-repeat: no-repeat; background-position: center; } .flag-icon.canada { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 480'%3E%3Cpath fill='%23d80027' d='M0 0h640v480H0z'/%3E%3Cpath fill='%23ffffff' d='M160 0h320v480H160z'/%3E%3Cpath fill='%23d80027' d='M336 298.7l15.5 8.4-5.4-16.8 14.5-9.9h-17.5l-6.1-17.7-6.1 17.7h-17.5l14.5 9.9-5.4 16.8 15.5-8.4zm-16-226.7l14.8 54 13.9-30.8 18 10.4-14.8 45.5 35.8-19 4.3 19.3-33 34.5 45.1 13-14 17.4-44.4-18 8.8 48-18.7-8.1-4.8 38.6h-14l-4.8-38.6-18.7 8.1 8.8-48-44.4 18-14-17.4 45.1-13-33-34.5 4.3-19.3 35.8 19-14.8-45.5 18-10.4 13.9 30.8 14.8-54z'/%3E%3C/svg%3E"); } .flag-icon.usa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 741 390'%3E%3Crect width='741' height='390' fill='%23b22234'/%3E%3Cpath d='M0 30h741v30H0zm0 60h741v30H0zm0 60h741v30H0zm0 60h741v30H0zm0 60h741v30H0zm0 60h741v30H0z' fill='%23fff'/%3E%3Crect width='296.4' height='210' fill='%233c3b6e'/%3E%3C/svg%3E"); } .partner-link-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 0.2rem 0; } .partner-link-desc { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } .partner-link-btn { padding: 0.6rem 1.4rem; font-size: 0.88rem; flex-shrink: 0; border-radius: 8px; } @media (max-width: 900px) { .part-video-grid-2 { grid-template-columns: 1fr; } } /* === Product Pages Styles (prod/*.html) === */ .text-red-bold { color: #ff3b30; font-weight: 700; } .flex-col-center { display: flex; flex-direction: column; align-items: center; } .spro-trophy-box { width: 100%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; overflow: hidden; margin-bottom: 1rem; background: #111; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .img-cover-scale { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); } .flex-col-gap-4 { display: flex; flex-direction: column; gap: 4px; align-items: center; } .prod-title-sm { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.3; } .prod-desc-sm { font-size: 0.9rem; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; margin: 0; line-height: 1.4; word-break: keep-all; } .max-1100-mt-35 { max-width: 1100px; margin-top: 0; } .video-glow-box { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 25px 50px rgba(0,0,0,0.8), 0 0 30px rgba(232, 234, 237,0.25); border: 1px solid rgba(232, 234, 237,0.3); } .w-100-block { width: 100%; display: block; } .inline-mb-08 { margin-bottom: 0.8rem; display: inline-block; } .split-list-gap-5 { display: flex; flex-direction: column; gap: 5rem; margin-top: 4rem; } .align-items-center { align-items: center; } .media-card-box { border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 40px rgba(0,0,0,0.5); } .sec-tag-fit { width: fit-content; margin-bottom: 0.8rem; font-size: 0.75rem; } .feature-title-22 { font-size: 2.2rem; margin-bottom: 1.5rem; } .feature-title-22-mb12 { font-size: 2.2rem; margin-bottom: 1.2rem; } .feature-lead-105 { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.8rem; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; } .text-lh-14 { font-size: 1rem; line-height: 1.4; } .flex-1 { flex: 1; } .ws-nowrap { white-space: nowrap !important; } .py-statement-custom { padding-top: 6rem; padding-bottom: 3rem; } .tag-center-mb1 { margin: 0 auto 1rem; } .bg-dark-blue { background: #0b1521; } .split-grid-sclassic { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center; } .spotlight-sclassic { padding: 2.5rem 1.5rem; border-radius: 24px; border: 1px solid rgba(232, 234, 237,0.35); background: #000; box-shadow: 0 20px 40px rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; position: relative; } .img-contain-480 { width: 100%; max-width: 480px; height: auto; object-fit: contain; } .sec-tag-gold-subtle { color: #e8eaed; border-color: rgba(232, 234, 237,0.4); background: rgba(232, 234, 237,0.08); } .feature-title-clamp { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.35; margin-top: 0.8rem; margin-bottom: 1.5rem; color: #ffffff; } .pill-grid-col { display: flex; flex-direction: column; gap: 0.85rem; } .pill-card-glass { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 0.85rem 1.3rem; border-radius: 12px; display: flex; align-items: center; gap: 0.8rem; transition: all 0.3s ease; } .pill-dot-gold { width: 8px; height: 8px; background: #e8eaed; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 8px rgba(232, 234, 237,0.6); } /* Feature Card Top Hover Popover & Bento Hotspots */ .p-feature-card.feature-hover-card { position: relative; overflow: visible !important; } .card-hover-popover { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%) translateY(10px) scale(0.92); width: 230px; background: rgba(15, 20, 26, 0.96); border: 1px solid rgba(232, 234, 237, 0.5); border-radius: 14px; padding: 9px; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(232, 234, 237, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease; z-index: 99999; } .card-hover-popover::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: rgba(15, 20, 26, 0.96); border-right: 1px solid rgba(232, 234, 237, 0.5); border-bottom: 1px solid rgba(232, 234, 237, 0.5); } .p-feature-card.feature-hover-card:hover .card-hover-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); } .p-bento-card.has-hotspots { overflow: visible !important; position: relative; z-index: 10; } .p-bento-card.has-hotspots:hover { z-index: 1000; } .p-bento-card.has-hotspots .p-bento-img-wrapper { overflow: visible !important; height: 240px; } .hotspot-dot { position: absolute; width: 20px; height: 20px; background: #e8eaed; border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); z-index: 100; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 10px rgba(232, 234, 237, 0.7); } .hotspot-dot:hover { background: #ffffff; border-color: #e8eaed; transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 20px rgba(232, 234, 237, 0.95); z-index: 99999; } .hotspot-pulse { position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid #e8eaed; animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; pointer-events: none; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .grass-popover { position: absolute; left: 18px; width: 160px; background: rgba(15, 20, 26, 0.96); border: 1px solid rgba(232, 234, 237, 0.45); border-radius: 3px; padding: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 15px rgba(232, 234, 237, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease; z-index: 99999; } .grass-popover::before { content: ''; position: absolute; left: -6px; transform: rotate(45deg); width: 10px; height: 10px; background: rgba(15, 20, 26, 0.96); border-left: 1px solid rgba(232, 234, 237, 0.45); border-bottom: 1px solid rgba(232, 234, 237, 0.45); } .popover-top { top: -15px; transform: translateX(10px) scale(0.92); } .popover-top::before { top: 22px; } .popover-mid { top: 50%; transform: translateY(-50%) translateX(10px) scale(0.92); } .popover-mid::before { top: 50%; margin-top: -5px; } .popover-bot { bottom: -15px; transform: translateX(10px) scale(0.92); } .popover-bot::before { bottom: 22px; } .hotspot-dot:hover .grass-popover { opacity: 1; visibility: visible; } .hotspot-dot:hover .popover-top { transform: translateX(0) scale(1); } .hotspot-dot:hover .popover-mid { transform: translateY(-50%) translateX(0) scale(1); } .hotspot-dot:hover .popover-bot { transform: translateX(0) scale(1); } .grass-popover.flip-left { left: auto; right: 18px; } .grass-popover.flip-left::before { left: auto; right: -6px; border-left: none; border-bottom: none; border-right: 1px solid rgba(232, 234, 237, 0.45); border-top: 1px solid rgba(232, 234, 237, 0.45); } .popover-top.flip-left { transform: translateX(-10px) scale(0.92); } .popover-mid.flip-left { transform: translateY(-50%) translateX(-10px) scale(0.92); } .popover-bot.flip-left { transform: translateX(-10px) scale(0.92); } .hotspot-dot:hover .popover-top.flip-left { transform: translateX(0) scale(1); } .hotspot-dot:hover .popover-mid.flip-left { transform: translateY(-50%) translateX(0) scale(1); } .hotspot-dot:hover .popover-bot.flip-left { transform: translateX(0) scale(1); } .popover-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .popover-badge { font-size: 0.62rem; font-weight: 700; color: #e8eaed; letter-spacing: 0.5px; } .popover-title { font-size: 0.78rem; font-weight: 700; color: #ffffff; font-family: 'Pretendard', sans-serif; } .popover-img { width: 100%; display: flex; justify-content: center; align-items: center; } .popover-img img { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; } .grass-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(0, 0, 0, 0.88); z-index: 999999 !important; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .grass-modal-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; } .grass-modal-content { position: relative; width: 90%; max-width: 850px; background: transparent; border-radius: 12px; padding: 10px; transform: translateY(20px) scale(0.94); opacity: 0; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .grass-modal-overlay.show .grass-modal-content { transform: translateY(0) scale(1); opacity: 1; } .grass-modal-content img { width: 100%; max-height: 85vh; object-fit: contain; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(232, 234, 237,0.3); border: 1px solid rgba(232, 234, 237, 0.4); } .grass-modal-close { position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; background: #e8eaed; color: #111; border: none; border-radius: 50%; font-size: 1.3rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.2s ease, background 0.2s ease; z-index: 100; } .grass-modal-close:hover { transform: scale(1.15); background: #fff; } .dark-hw-spotlight { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 60%) !important; } .dark-hw-spotlight img { filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)) drop-shadow(0 0 15px rgba(255,255,255,0.08)); } .card-hover-popover { position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%) translateY(10px) scale(0.92); width: 230px; background: rgba(15, 20, 26, 0.96); border: 1px solid rgba(232, 234, 237, 0.5); border-radius: 14px; padding: 9px; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(232, 234, 237, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease; z-index: 99999; } .card-hover-popover::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 10px; height: 10px; background: rgba(15, 20, 26, 0.96); border-right: 1px solid rgba(232, 234, 237, 0.5); border-bottom: 1px solid rgba(232, 234, 237, 0.5); } .p-feature-card.feature-hover-card:hover .card-hover-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); } .p-bento-card.has-hotspots { overflow: visible !important; position: relative; z-index: 10; } .p-bento-card.has-hotspots:hover { z-index: 1000; } .p-bento-card.has-hotspots .p-bento-img-wrapper { overflow: visible !important; height: 240px; } .hotspot-dot { position: absolute; width: 20px; height: 20px; background: #e8eaed; border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); z-index: 100; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 0 10px rgba(232, 234, 237, 0.7); } .hotspot-dot:hover { background: #ffffff; border-color: #e8eaed; transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 20px rgba(232, 234, 237, 0.95); z-index: 99999; } .hotspot-pulse { position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; border: 2px solid #e8eaed; animation: pulse-ring 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; pointer-events: none; } @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .grass-popover { position: absolute; left: 18px; width: 160px; background: rgba(15, 20, 26, 0.96); border: 1px solid rgba(232, 234, 237, 0.45); border-radius: 3px; padding: 8px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65), 0 0 15px rgba(232, 234, 237, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease; z-index: 99999; } .grass-popover::before { content: ''; position: absolute; left: -6px; transform: rotate(45deg); width: 10px; height: 10px; background: rgba(15, 20, 26, 0.96); border-left: 1px solid rgba(232, 234, 237, 0.45); border-bottom: 1px solid rgba(232, 234, 237, 0.45); } .popover-top { top: -15px; transform: translateX(10px) scale(0.92); } .popover-top::before { top: 22px; } .popover-mid { top: 50%; transform: translateY(-50%) translateX(10px) scale(0.92); } .popover-mid::before { top: 50%; margin-top: -5px; } .popover-bot { bottom: -15px; transform: translateX(10px) scale(0.92); } .popover-bot::before { bottom: 22px; } .hotspot-dot:hover .grass-popover { opacity: 1; visibility: visible; } .hotspot-dot:hover .popover-top { transform: translateX(0) scale(1); } .hotspot-dot:hover .popover-mid { transform: translateY(-50%) translateX(0) scale(1); } .hotspot-dot:hover .popover-bot { transform: translateX(0) scale(1); } .grass-popover.flip-left { left: auto; right: 18px; } .grass-popover.flip-left::before { left: auto; right: -6px; border-left: none; border-bottom: none; border-right: 1px solid rgba(232, 234, 237, 0.45); border-top: 1px solid rgba(232, 234, 237, 0.45); } .popover-top.flip-left { transform: translateX(-10px) scale(0.92); } .popover-mid.flip-left { transform: translateY(-50%) translateX(-10px) scale(0.92); } .popover-bot.flip-left { transform: translateX(-10px) scale(0.92); } .hotspot-dot:hover .popover-top.flip-left { transform: translateX(0) scale(1); } .hotspot-dot:hover .popover-mid.flip-left { transform: translateY(-50%) translateX(0) scale(1); } .hotspot-dot:hover .popover-bot.flip-left { transform: translateX(0) scale(1); } .popover-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .popover-badge { font-size: 0.62rem; font-weight: 700; color: #e8eaed; letter-spacing: 0.5px; } .popover-title { font-size: 0.78rem; font-weight: 700; color: #ffffff; font-family: 'Pretendard', sans-serif; } .popover-img { width: 100%; display: flex; justify-content: center; align-items: center; } .popover-img img { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; } .grass-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100dvh; background: rgba(0, 0, 0, 0.88); z-index: 999999 !important; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .grass-modal-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; } .grass-modal-content { position: relative; width: 90%; max-width: 850px; background: transparent; border-radius: 12px; padding: 10px; transform: translateY(20px) scale(0.94); opacity: 0; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .grass-modal-overlay.show .grass-modal-content { transform: translateY(0) scale(1); opacity: 1; } .grass-modal-content img { width: 100%; max-height: 85vh; object-fit: contain; border-radius: 12px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(232, 234, 237,0.3); border: 1px solid rgba(232, 234, 237, 0.4); } .grass-modal-close { position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; background: #e8eaed; color: #111; border: none; border-radius: 50%; font-size: 1.3rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.2s ease, background 0.2s ease; z-index: 100; } .grass-modal-close:hover { transform: scale(1.15); background: #fff; } .dark-hw-spotlight { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 60%) !important; } /* Clean Pure CSS Icons */ .icon-quote { display: inline-block; width: 36px; height: 36px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-2 6-4 6z'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-2 6-4 6z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2H4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-2 6-4 6z'/%3E%3Cpath d='M15 21c3 0 7-1 7-8V5c0-1.25-.75-2-2-2h-4c-1.25 0-2 .75-2 2v6c0 1.25.75 2 2 2h3c0 4-2 6-4 6z'/%3E%3C/svg%3E") center/contain no-repeat; color: #e8eaed; } .icon-check-inline { display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat; color: #e8eaed; flex-shrink: 0; } .icon-feat-smile { display: inline-block; width: 28px; height: 28px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") center/contain no-repeat; color: #e8eaed; } .icon-feat-layers { display: inline-block; width: 28px; height: 28px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E") center/contain no-repeat; color: #e8eaed; } .icon-feat-trend { display: inline-block; width: 28px; height: 28px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E") center/contain no-repeat; color: #e8eaed; } .icon-top-arrow { display: inline-block; width: 22px; height: 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-target-cross { display: inline-block; width: 18px; height: 18px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-clock-history { display: inline-block; width: 18px; height: 18px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-cpu-chip { display: inline-block; width: 18px; height: 18px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 15h3M1 9h3M1 15h3'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-bulb-idea { display: inline-block; width: 18px; height: 18px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A5 5 0 0 0 8 8c0 1 .3 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A5 5 0 0 0 8 8c0 1 .3 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-mobile-app { display: inline-block; width: 18px; height: 18px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-trophy-cup { display: inline-block; width: 19px; height: 19px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2z'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-diamond-gem { display: inline-block; width: 19px; height: 19px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='6 3 18 3 22 9 12 22 2 9 6 3'/%3E%3Cline x1='11' y1='3' x2='8' y2='9'/%3E%3Cline x1='13' y1='3' x2='16' y2='9'/%3E%3Cline x1='2' y1='9' x2='22' y2='9'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='6 3 18 3 22 9 12 22 2 9 6 3'/%3E%3Cline x1='11' y1='3' x2='8' y2='9'/%3E%3Cline x1='13' y1='3' x2='16' y2='9'/%3E%3Cline x1='2' y1='9' x2='22' y2='9'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-layout-grid { display: inline-block; width: 19px; height: 19px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 21V9'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M9 21V9'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-lightning-zap { display: inline-block; width: 19px; height: 19px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E") center/contain no-repeat; } .icon-shield-check { display: inline-block; width: 24px; height: 24px; background: currentColor; color: #e8eaed; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/contain no-repeat; } /* Helper Utilities */ .text-gold { color: #e8eaed !important; } .hyper-tag-pill-gold { margin-bottom: 0.8rem; background: rgba(232, 234, 237,0.12); color: #e8eaed; align-self: flex-start; } .hyper-tag-pill-gold-lg { margin-bottom: 1rem; background: rgba(232, 234, 237,0.15); color: #e8eaed; } .mb-12 { margin-bottom: 12px !important; } .mb-3-5 { margin-bottom: 3.5rem !important; } /* Store Case Page (case.html) */ .store-tab-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); padding: 8px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: all 0.25s ease; } .store-tab-btn:hover, .store-tab-btn.active { background: linear-gradient(135deg, #e8eaed 0%, #b8860b 100%); color: #000; border-color: #e8eaed; box-shadow: 0 0 15px rgba(232, 234, 237, 0.35); } .store-tab-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-bottom: 3.5rem; } .case-store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } @media (max-width: 992px) { .case-store-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .case-store-grid { grid-template-columns: 1fr; } } .case-store-card { background: rgba(20, 24, 30, 0.85); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; } .case-store-card:hover { border-color: rgba(232, 234, 237, 0.4); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); transform: translateY(-3px); } .case-store-card.playing { border-color: #e8eaed; box-shadow: 0 0 25px rgba(232, 234, 237, 0.3); } .case-screen-body { width: 100%; aspect-ratio: 16 / 10; background: #000; overflow: hidden; position: relative; } .case-video-el { width: 100%; height: 100%; object-fit: cover; display: block; } .case-card-info { padding: 1.2rem; background: rgba(20,22,26,0.95); border-top: 1px solid rgba(255,255,255,0.08); flex: 1; } .case-card-title { font-size: 1.05rem; color: #fff; font-weight: 700; margin-bottom: 0.4rem; } .case-card-desc { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } /* Business Showcase Layout (business.html) */ .busi-showcase-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 3rem; align-items: stretch; margin-bottom: 5.5rem; } .busi-showcase-grid.reverse { grid-template-columns: 0.85fr 1.35fr; margin-bottom: 0; } @media (max-width: 992px) { .busi-showcase-grid, .busi-showcase-grid.reverse { grid-template-columns: 1fr; } } .busi-player-wrapper, .sys-player-wrapper { margin: 0; height: 100%; display: flex; flex-direction: column; } .swing-player-screen-full { height: 100%; display: flex; flex-direction: column; flex: 1; } .busi-screen-body, .sys-screen-body { flex: 1; display: flex; align-items: center; justify-content: center; background: #08090b; min-height: 320px; } .busi-screen-body .busi-screen-img, .sys-screen-body .sys-screen-img { width: 100%; height: 100%; max-height: 400px; object-fit: cover; display: block; margin: 0 auto; } .busi-text-col, .sys-text-col { display: flex; flex-direction: column; justify-content: center; } .busi-text-col.pad-left, .sys-text-col.pad-left { padding-left: 0.5rem; } .busi-text-col.pad-right, .sys-text-col.pad-right { padding-right: 0.5rem; } .busi-title, .sys-title { font-size: 1.7rem; font-weight: 800; color: #ffffff; margin-bottom: 0.9rem; line-height: 1.35; } .busi-desc, .sys-desc { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.65; margin-bottom: 1.6rem; } /* System Showcase Layout (system.html) */ .sys-showcase-grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 3rem; align-items: stretch; margin-bottom: 5.5rem; } .sys-showcase-grid.reverse { grid-template-columns: 0.85fr 1.35fr; margin-bottom: 0; } @media (max-width: 992px) { .sys-showcase-grid, .sys-showcase-grid.reverse { grid-template-columns: 1fr; } } .sys-feature-list { display: flex; flex-direction: column; gap: 0.75rem; } .sys-feature-item { display: flex; align-items: center; gap: 0.7rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.8rem 1rem; } .sys-feature-item.wide-pad { padding: 0.8rem 1.2rem; } .sys-feature-icon { font-size: 1.15rem; } .sys-feature-text { font-size: 0.88rem; font-weight: 700; color: #fff; } .sys-video-section { border-top: 1px solid rgba(255,255,255,0.06); } .sys-video-title { font-size: 2.2rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; } .sys-video-desc { color: rgba(255,255,255,0.65); font-size: 0.95rem; } .sys-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } @media (max-width: 768px) { .sys-video-grid { grid-template-columns: 1fr; } } .sys-video-box { width: 100%; aspect-ratio: 16 / 10; background: #000; overflow: hidden; position: relative; } .sys-video-el { width: 100%; height: 100%; object-fit: cover; display: block; } .sys-video-info { padding: 1.2rem; background: rgba(20,22,26,0.95); border-top: 1px solid rgba(255,255,255,0.08); } .sys-video-info-title { font-size: 1.05rem; color: #fff; font-weight: 700; margin-bottom: 0.4rem; } .sys-video-info-desc { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } /* ========================================================================== PROMO Section Styles (korea.html, sportech.html, wjgolf.html) ========================================================================== */ .promo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } @media (max-width: 991px) { .promo-grid { grid-template-columns: 1fr; gap: 2rem; } } .promo-grid-single { display: grid; grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; } .swing-player-wrapper.no-margin { margin: 0; } .promo-video-box { width: 100%; aspect-ratio: 16 / 10; background: #000; overflow: hidden; position: relative; } .promo-video-box-16-9 { width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; position: relative; } .promo-video-el { width: 100%; height: 100%; object-fit: cover; display: block; } .promo-video-info { padding: 1.2rem; background: rgba(20,22,26,0.95); border-top: 1px solid rgba(255,255,255,0.08); } .promo-video-info.wide-pad { padding: 1.2rem 1.5rem; } .promo-video-title { font-size: 1.05rem; color: #fff; font-weight: 700; margin-bottom: 0.4rem; } .promo-video-title-lg { font-size: 1.1rem; color: #fff; font-weight: 700; margin-bottom: 0.4rem; } .promo-video-desc { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } .promo-video-desc-lg { font-size: 0.88rem; color: rgba(255,255,255,0.65); margin: 0; } .promo-bento-section { border-top: 1px solid rgba(255,255,255,0.06); } .mt-3rem { margin-top: 3rem !important; } .text-left { text-align: left; } .partner-link-bar { background: rgba(26, 26, 26, 0.95); border: 1px solid rgba(232, 234, 237, 0.25); border-radius: 16px; padding: 1.2rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 900px; margin: 0 auto; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .partner-link-left { display: flex; align-items: center; gap: 1rem; } .partner-badge { background: rgba(232, 234, 237,0.12); border: 1px solid rgba(232, 234, 237,0.3); border-radius: 50px; padding: 0.35rem 0.82rem; font-size: 0.78rem; font-weight: 700; color: #e8eaed; display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .flag-svg { border-radius: 2px; } .partner-link-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 0.2rem 0; } .partner-link-desc { font-size: 0.82rem; color: rgba(255,255,255,0.65); margin: 0; } .partner-btn { padding: 0.6rem 1.4rem; font-size: 0.88rem; flex-shrink: 0; border-radius: 8px; } .practice-video-el { width: 100%; display: block; object-fit: contain; } /* Split & AI Feature Showcase Layouts */ .mb-3-5rem { margin-bottom: 3.5rem !important; } .split-grid-left-wide { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 3rem; align-items: center; margin-bottom: 5.5rem; } .split-grid-right-wide { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: 3rem; align-items: center; } @media (max-width: 991px) { .split-grid-sclassic, .split-grid-left-wide, .split-grid-right-wide { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; } } .full-h-col { margin: 0; height: 100%; display: flex; flex-direction: column; } .full-h-flex { height: 100%; display: flex; flex-direction: column; flex: 1; } .ai-body-box { flex: 1; display: flex; align-items: center; justify-content: center; background: #08090b; min-height: auto; } .ai-img-fit { width: 100%; height: auto; max-height: 520px; object-fit: contain; display: block; margin: 0 auto; } .split-desc-col-left { display: flex; flex-direction: column; justify-content: center; padding-left: 0.5rem; } .split-desc-col-right { display: flex; flex-direction: column; justify-content: center; padding-right: 0.5rem; } .split-col-title { font-size: 1.7rem; font-weight: 800; color: #ffffff; margin-bottom: 0.9rem; line-height: 1.35; } .split-col-desc { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.65; margin-bottom: 1.6rem; } .feature-item-list { display: flex; flex-direction: column; gap: 0.75rem; } .feature-item-card { display: flex; align-items: center; gap: 0.7rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 0.8rem 1rem; } .feature-icon-badge { width: 38px; height: 38px; border-radius: 10px; background: rgba(232, 234, 237, 0.12); border: 1px solid rgba(232, 234, 237, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(232, 234, 237, 0.15); } .feature-item-text { font-size: 0.88rem; font-weight: 700; color: #fff; } .club-video-el { width: 100%; display: block; object-fit: contain; max-height: 520px; margin: 0 auto; } /* FUNGOLF Section Styles */ .patent-banner-section { background: radial-gradient(ellipse at 50% 50%, rgba(232, 234, 237, 0.1) 0%, rgba(15, 17, 21, 0.98) 75%); border-top: 1px solid rgba(232, 234, 237, 0.2); border-bottom: 1px solid rgba(232, 234, 237, 0.2); } .patent-gold-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 2.5rem; background: linear-gradient(135deg, rgba(232, 234, 237,0.25) 0%, rgba(20,22,26,0.95) 100%); border: 1px solid rgba(232, 234, 237,0.6); border-radius: 50px; box-shadow: 0 0 35px rgba(232, 234, 237,0.25); margin-bottom: 2rem; } .patent-icon-el { margin-right: 10px; } .patent-badge-text { font-size: 1.05rem; font-weight: 800; color: #e8eaed; letter-spacing: 0.8px; } .patent-ribbon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: center; background: rgba(20,24,30,0.95); border: 1px solid rgba(232, 234, 237,0.3); border-radius: 20px; padding: 1.6rem 1.2rem; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transform: translateZ(0); } @media (max-width: 991px) { .patent-ribbon-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 600px) { .patent-ribbon-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0.5rem; padding: 1.2rem 0.8rem; } .patent-ribbon-item { justify-content: center !important; width: 100%; margin: 0; gap: 0.5rem; } .ribbon-icon { font-size: 1.2rem; } .ribbon-title { font-size: 0.82rem; } .ribbon-sub-label { font-size: 0.65rem; } } .patent-ribbon-item { display: flex; align-items: center; justify-content: center; gap: 0.8rem; } .patent-ribbon-item.border-l { border-left: 1px solid rgba(255,255,255,0.1); } @media (max-width: 991px) { .patent-ribbon-item.border-l { border-left: none; } } .ribbon-icon { font-size: 1.4rem; } .ribbon-sub-label { display: block; font-size: 0.72rem; color: #e8eaed; font-weight: 800; letter-spacing: 1px; } .ribbon-title { font-size: 0.98rem; color: #fff; } .fungolf-game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.8rem; } @media (max-width: 991px) { .fungolf-game-grid { grid-template-columns: 1fr; } } .flex-col-h { margin: 0; display: flex; flex-direction: column; height: 100%; } .flex-col-h1 { display: flex; flex-direction: column; height: 100%; flex: 1; } .fungolf-card-info { padding: 1.4rem; background: rgba(20,22,26,0.95); border-top: 1px solid rgba(255,255,255,0.08); flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .fungolf-card-title { font-size: 1.15rem; color: #e8eaed; margin-bottom: 0.6rem; font-weight: 800; } .fungolf-card-ul { padding-left: 1rem; margin: 0; color: rgba(255,255,255,0.75); font-size: 0.85rem; line-height: 1.7; } .fungolf-pillars-section { background: linear-gradient(180deg, rgba(13,15,18,0.98) 0%, rgba(20,24,30,0.95) 50%, rgba(13,15,18,0.98) 100%); border-top: 1px solid rgba(255,255,255,0.06); } .pillars-section-title { font-size: 2.2rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; letter-spacing: -0.5px; } @media screen and (max-width: 768px) { .pillars-section-title { font-size: 1.45rem !important; line-height: 1.35; } } .pillars-section-desc { color: rgba(255,255,255,0.65); font-size: 0.95rem; } .fungolf-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } @media (max-width: 991px) { .fungolf-pillars-grid { grid-template-columns: 1fr; } } .fungolf-pillar { position: relative; border-radius: 24px; padding: 2.5rem 1.6rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .fungolf-pillar.pillar-kids { background: radial-gradient(circle at 50% 0%, rgba(249,115,22,0.12) 0%, rgba(20,22,26,0.9) 70%); border: 1px solid rgba(249,115,22,0.35); } .fungolf-pillar.pillar-beginner { background: radial-gradient(circle at 50% 0%, rgba(6,182,212,0.12) 0%, rgba(20,22,26,0.9) 70%); border: 1px solid rgba(6,182,212,0.35); } .fungolf-pillar.pillar-event { background: radial-gradient(circle at 50% 0%, rgba(232, 234, 237,0.15) 0%, rgba(20,22,26,0.9) 70%); border: 1px solid rgba(232, 234, 237,0.4); } .pillar-badge { display: inline-block; padding: 0.35rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; margin-bottom: 1.4rem; } .pillar-badge.badge-kids { background: rgba(249,115,22,0.2); border: 1px solid rgba(249,115,22,0.5); color: #fb923c; } .pillar-badge.badge-beginner { background: rgba(6,182,212,0.2); border: 1px solid rgba(6,182,212,0.5); color: #38bdf8; } .pillar-badge.badge-event { background: rgba(232, 234, 237,0.2); border: 1px solid rgba(232, 234, 237,0.5); color: #e8eaed; } .pillar-title { font-size: 1.2rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; } .pillar-desc { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.65; margin: 0; } /* HIT Analysis Section Styles */ .hit-img-main { max-height: 520px; object-fit: contain; width: 100%; display: block; margin: 0 auto; } .hit-dual-grid { margin-top: 2.5rem; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 991px) { .hit-dual-grid { grid-template-columns: 1fr; } } .hit-card-col { flex-direction: column; align-items: stretch; padding: 1.5rem; } .hit-card-col.space-between { justify-content: space-between; } .hit-sub-img-wrap { border-radius: 10px; overflow: hidden; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.08); background: #000; } .hit-img-sub { width: 100%; height: auto; max-height: 260px; object-fit: contain; display: block; margin: 0 auto; } .hit-card-title { font-size: 1.05rem; color: #e8eaed; margin-bottom: 0.4rem; } .hit-card-desc { font-size: 0.85rem; line-height: 1.6; } .hit-card-desc.mb-1rem { margin-bottom: 1rem; } .hit-pills-label { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 0.6rem; } .hit-pills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .hit-pill-item { background: rgba(232, 234, 237,0.08); border: 1px solid rgba(232, 234, 237,0.2); padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; color: #fff; text-align: center; } /* Privacy Policy Page Styles */ .privacy-card { background: rgba(20, 24, 30, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 3rem 2.5rem; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); } .privacy-intro-box { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .privacy-chapter-title { font-size: 1.4rem; font-weight: 800; color: #e8eaed; margin-bottom: 1rem; } .privacy-p { font-size: 0.95rem; line-height: 1.75; color: rgba(255, 255, 255, 0.8); margin-bottom: 1rem; word-break: keep-all; } .privacy-date-badge { font-size: 0.85rem; font-weight: 700; color: #e8eaed; background: rgba(232, 234, 237, 0.1); border: 1px solid rgba(232, 234, 237, 0.25); display: inline-block; padding: 0.4rem 1rem; border-radius: 30px; margin-top: 0.8rem; } .privacy-item { margin-bottom: 2.2rem; } .privacy-item-title { font-size: 1.15rem; font-weight: 800; color: #ffffff; margin-bottom: 0.8rem; padding-left: 0.8rem; border-left: 3px solid #e8eaed; } .privacy-list { list-style: none; padding-left: 1.2rem; margin-top: 0.5rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; line-height: 1.7; } .privacy-list li { margin-bottom: 0.4rem; } .privacy-contact-card { background: rgba(232, 234, 237, 0.08); border: 1px solid rgba(232, 234, 237, 0.25); border-radius: 12px; padding: 1.2rem 1.5rem; margin-top: 0.8rem; } .privacy-contact-card p { margin-bottom: 0.4rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); } .privacy-contact-card p:last-child { margin-bottom: 0; } .store-tab-bar-scroll { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; white-space: nowrap !important; gap: 10px !important; padding-bottom: 15px !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; width: max-content !important; max-width: 100% !important; margin: 0 auto 40px auto !important; } .store-tab-bar-scroll::-webkit-scrollbar { display: none !important; } .store-tab-bar-scroll .store-tab-btn { flex-shrink: 0 !important; } /* ========================================= BOARD VIEW & INLINE EXTRACTED STYLES ========================================= */ .board-view-section { padding: 80px 20px; background-color: #0f1012; min-height: 60vh; } .board-view-container { max-width: 1240px; margin: 0 auto; background: #1a1c20; border: 1px solid #2a2c30; border-radius: 12px; padding: 40px; color: #ccc; } .board-view-header { border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 30px; } .board-view-title { font-size: 24px; color: #fff; margin: 0 0 15px 0; font-weight: 600; } .board-view-meta { display: flex; gap: 20px; font-size: 14px; color: #888; } .board-view-meta span { display: flex; align-items: center; gap: 5px; } .board-view-meta strong { color: #bbb; } .board-view-content { font-size: 16px; line-height: 1.8; color: #ddd; margin-bottom: 50px; white-space: pre-line; } .board-view-answer { background: rgba(232, 234, 237, 0.05); border-left: 4px solid #e8eaed; padding: 30px; border-radius: 0 8px 8px 0; margin-top: 40px; } .board-view-answer-title { font-size: 18px; color: #e8eaed; margin-top: 0; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .board-view-answer-content { line-height: 1.7; font-size: 15px; } .board-view-actions { margin-top: 40px; text-align: right; border-top: 1px solid #333; padding-top: 20px; } .btn-list { display: inline-block; padding: 12px 30px; background: #333; color: #fff; text-decoration: none; border-radius: 6px; font-size: 15px; transition: all 0.3s ease; } .btn-list:hover { background: #444; } /* Cinematic Product Defaults */ #cinematicProductVideo { display: block; } #cinematicProductImg { display: none; } /* Gallery Items */ .gallery-cheongdam { background-image: url('../img/gallery_cheongdam.jpg'); } .gallery-jamsil { background-image: url('../img/gallery_jamsil.jpg'); } .gallery-usa { background-image: url('../img/gallery_usa.jpg'); } .gallery-canada { background-image: url('../img/gallery_canada.jpg'); } /* ========================================================================= Store Installation Section ========================================================================= */ .installation-section { padding: 3.5rem 2rem 5rem 2rem; color: #fff; font-family: var(--font-body); } .install-container { width: 100%; max-width: 1200px; margin: 0 auto; } .install-header { text-align: center; margin-bottom: 2rem; } .install-motto { font-size: 1.2rem; color: #e8eaed; margin-bottom: 0.5rem; } .swing-player-screen img { display: block; width: 100%; height: auto; } /* Bento Asymmetric Span */ .hyper-bento-card.span-2 { grid-column: span 2; background: linear-gradient(135deg, rgba(232, 234, 237, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%); border-color: rgba(232, 234, 237, 0.3); } .hyper-bento-tag { display: inline-block; padding: 0.25rem 0.65rem; background: rgba(232, 234, 237, 0.15); color: #e8eaed; border: 1px solid rgba(232, 234, 237, 0.3); border-radius: 6px; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.8rem; letter-spacing: 0.5px; } @media screen and (max-width: 1024px) { .hyper-bento-card.span-2 { grid-column: span 2; } } @media screen and (max-width: 640px) { .hyper-bento-card.span-2 { grid-column: span 1; } } /* === Contact, Purchase & Board Pages Styles === */ /* === Header Hero & Subnav === */ .sw-hero { position: relative; background: #050505; overflow: hidden; text-align: center !important; padding: 60px 0 20px 0 !important; } @media screen and (max-width: 768px) { .sw-hero { padding: 40px 0 15px 0 !important; } } @media screen and (max-width: 480px) { .sw-hero { padding: 30px 0 10px 0 !important; } } .sw-hero-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 600px; height: 320px; background: radial-gradient(ellipse, rgba(232, 234, 237,.10) 0%, transparent 60%); pointer-events: none; } @media screen and (max-width: 768px) { .sw-hero-glow { display: none; } } .sw-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; align-items: center !important; padding: 0 5%; } .sw-eyebrow { display: inline-flex !important; font-size: 1rem; font-weight: 700; letter-spacing: 2px; color: #aaaaaa; text-transform: uppercase; margin: 0 0 12px; justify-content: center; } .sw-tags { display: none !important; } .sw-eyebrow-dot { display: none; } @keyframes sw-pulse { 0%,100% { box-shadow: 0 0 6px #e8eaed, 0 0 14px rgba(232, 234, 237,.4); } 50% { box-shadow: 0 0 14px #e8eaed, 0 0 30px rgba(232, 234, 237,.7); } } .sw-hero-title { font-size: 2.8rem; font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.02em; } .sw-hero-title-sub { font-size: 0.55em; font-weight: 500; opacity: 0.85; vertical-align: middle; margin-left: 0.3em; white-space: nowrap; } .install-title { font-size: 3.5rem; font-family: var(--font-heading); font-weight: 700; margin-bottom: 1rem; } .install-subtitle { color: #a0a3a9; font-size: 1.1rem; line-height: 1.6; } .counter-desc { font-size: 1.4rem; font-weight: 700; text-align: center; margin-bottom: 2rem; } .highlight-total { color: #e8eaed; font-size: 2.2rem; margin: 0 0.5rem; font-variant-numeric: tabular-nums; } .dual-donut-grid { display: flex; justify-content: center; gap: 2.5rem; margin-bottom: 2.5rem; } @media (max-width: 768px) { .dual-donut-grid { flex-direction: column; align-items: center; } } .donut-card { padding: 2rem; display: flex; align-items: center; gap: 2rem; width: 100%; max-width: 400px; } .donut-chart-box { position: relative; width: 130px; height: 130px; flex-shrink: 0; } .donut-svg-wrapper { width: 100%; height: 100%; position: relative; } .donut-chart { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .donut-bg { fill: none; stroke: #2a2e35; stroke-width: 10; } .donut-segment { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 2s cubic-bezier(0.25, 1, 0.5, 1); } .segment-overseas { stroke: #e8eaed; } .segment-domestic { stroke: #3db8f5; } .donut-center-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; } .center-ratio { font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .center-ratio.color-gold { color: #e8eaed; } .center-ratio.color-blue { color: #3db8f5; } .center-label { font-size: 0.8rem; color: #8a8d93; white-space: nowrap; } .donut-card-info { display: flex; flex-direction: column; align-items: flex-start; } .card-badge { font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 4px; margin-bottom: 0.8rem; } .card-badge.gold-badge { background-color: rgba(232, 234, 237, 0.15); color: #e8eaed; } .card-badge.blue-badge { background-color: rgba(61, 184, 245, 0.15); color: #3db8f5; } .card-title { font-size: 1.15rem; font-weight: 500; color: #ffffff; margin-bottom: 0.2rem; } .quote-sub-desc { font-size: 1.15rem; line-height: 1.8; color: rgba(255, 255, 255, 0.82); position: relative; z-index: 2; padding-top: 1.8rem; word-break: keep-all; } /* Value Pillars Grid */ .card-count { font-size: 2.2rem; font-weight: 800; color: #ffffff; font-family: var(--font-heading); font-variant-numeric: tabular-nums; } .card-count .unit { font-size: 1.1rem; font-weight: 400; margin-left: 0.3rem; } .distribution-bar-wrap { padding: 1.5rem 2rem; max-width: 832px; margin: 0 auto 4rem auto; } .bar-header { display: flex; justify-content: space-between; margin-bottom: 1rem; color: #a0a3a9; font-size: 0.95rem; } .bar-ratio-text { font-weight: 700; color: #ffffff; } .distribution-bar { display: flex; height: 14px; background-color: #2a2e35; border-radius: 7px; overflow: hidden; } .bar-fill { height: 100%; transition: width 2s cubic-bezier(0.25, 1, 0.5, 1); width: 0%; } .bar-fill.overseas-fill { background-color: #e8eaed; border-top-left-radius: 7px; border-bottom-left-radius: 7px; } .bar-fill.domestic-fill { background-color: #3db8f5; border-top-right-radius: 7px; border-bottom-right-radius: 7px; } .install-quote blockquote { text-align: center; max-width: 800px; margin: 0 auto; font-size: 1.25rem; line-height: 1.8; color: #d1d5db; font-style: italic; border: none; padding: 0; } /* ========================================================================== SVG Icon CSS Masks (merged from icons.css) ========================================================================== */ /* SVG Icons converted to CSS masks */ .icon { display: inline-block; background-color: currentColor; mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; vertical-align: middle; } .icon-pause { width: 12px; height: 12px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E"); } .icon-unmute { width: 12px; height: 12px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='2' y1='22' x2='22' y2='2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='2' y1='22' x2='22' y2='2' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); } .icon-chevron-down { width: 24px; height: 24px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); } .icon-udr { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .icon-udr-ai { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"); } .icon-udr-spro { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3C/svg%3E"); } .icon-udr-sclassic { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); } .icon-udr-members { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 1-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 1-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } .icon-udr-shot { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' y1='12' x2='18' y2='12'/%3E%3Cline x1='6' y1='12' x2='2' y2='12'/%3E%3Cline x1='12' y1='6' x2='12' y2='2'/%3E%3Cline x1='12' y1='22' x2='12' y2='18'/%3E%3C/svg%3E"); } .icon-okongolf { width: 18px; height: 18px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E"); } .icon-tech-1 { width: 40px; height: 40px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); } .icon-tech-2 { width: 40px; height: 40px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E"); } .icon-tech-3 { width: 40px; height: 40px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12 2 2 7 12 12 22 7 12 2'/%3E%3Cpolyline points='2 17 12 22 22 17'/%3E%3Cpolyline points='2 12 12 17 22 12'/%3E%3C/svg%3E"); } .icon-tech-4 { width: 40px; height: 40px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E"); } /* Marking ball - small size, hover slightly bigger */ .img-ball-small { transform: scale(0.42); object-fit: contain; transition: transform 0.5s ease; max-width: 100%; max-height: 100%; } .p-bento-card:hover .img-ball-small { transform: scale(0.5) !important; } /* Business Feature Card (business.html, system.html) */ .busi-feature-list { display: flex; flex-direction: column; gap: 0.85rem; } .busi-feature-card { display: flex; align-items: center; gap: 0.9rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 0.85rem 1.1rem; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .busi-feature-card:hover { border-color: rgba(232, 234, 237, 0.5); background: linear-gradient(135deg, rgba(232, 234, 237, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(232, 234, 237, 0.15); transform: translateX(4px); } .busi-icon-badge { width: 38px; height: 38px; border-radius: 10px; background: rgba(232, 234, 237, 0.12); border: 1px solid rgba(232, 234, 237, 0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(232, 234, 237, 0.15); } .busi-feature-text { font-size: 0.9rem; font-weight: 700; color: #ffffff; letter-spacing: -0.01em; } .sw-tag { color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.25) !important; transition: all 0.3s ease; } .prod-card-item { padding: 18px 16px !important; } .prod-card-item { padding: 12px 16px !important; } .prod-card-item .badge { margin-bottom: 6px !important; } .prod-card-item h4 { margin-bottom: 4px !important; } .prod-card-item p { display: none !important; } .prod-card-item p { display: block !important; font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.45) !important; margin-top: 4px !important; margin-bottom: 0 !important; line-height: 1.3 !important; letter-spacing: -0.5px !important; } .form-header h3 { margin-bottom: 0 !important; } .form-header p { margin-top: 6px !important; } .purchase-form-box .form-header h3 { margin-bottom: -4px !important; line-height: 1.2 !important; } .purchase-form-box .form-header p { margin-top: 0 !important; } .purchase-form-box .form-header h3 { margin-bottom: 2px !important; line-height: 1.2 !important; } .purchase-form-box .form-header p { margin-top: 4px !important; } .purchase-form-box .form-header .hyper-tag-pill { display: none !important; } .form-header .hyper-tag-pill { display: none !important; } .contact-info-card { padding: 24px 28px !important; } .contact-icon-box { margin-bottom: 12px !important; } .contact-info-card h4 { margin-bottom: 4px !important; } .contact-info-card { padding: 16px 24px !important; } .contact-icon-box { width: 48px !important; height: 48px !important; margin: 0 auto 10px !important; } .contact-info-card h4 { margin-bottom: 4px !important; font-size: 1.05rem !important; } .contact-info-card p.card-subtext { margin-top: 4px !important; } .prod-card-item .badge { font-size: 0.62rem !important; padding: 2px 8px !important; letter-spacing: 0.5px !important; } .swing-player-wrapper .swing-screen-bar { display: none !important; } .busi-text-col .hyper-tag-pill, .sys-text-col .hyper-tag-pill, .sys-video-section .hyper-tag-pill { display: none !important; } .swing-player-screen { border-radius: 10px !important; } .swing-player-wrapper { border-radius: 11px !important; } .live-photo-badge { flex-direction: row !important; background: rgba(0,0,0,0.6) !important; border: 1px solid rgba(255,255,255,0.1) !important; padding: 6px 14px !important; border-radius: 50px !important; display: flex !important; align-items: center !important; } .live-badge-label { color: #ff4757 !important; font-weight: 800 !important; font-size: 0.85rem !important; display: flex !important; align-items: center !important; line-height: 1 !important; } .live-badge-label .live-rec-dot { display: inline-block !important; margin-right: 6px !important; width: 8px !important; height: 8px !important; margin-top: -1px !important; } .live-badge-val { margin-left: 8px !important; font-weight: 500 !important; font-size: 0.9rem !important; color: #fff !important; line-height: 1 !important; } .hyper-card-title { word-break: keep-all !important; } .hyper-card-desc { word-break: keep-all !important; } .sys-desc { word-break: keep-all !important; } .pt-2rem { padding-top: 2rem !important; } .pb-2rem { padding-bottom: 2rem !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } /* 9-Shot Data Visual Capsule Grid (1-Line & Static No-Hover) */ .hit-capsule-grid { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 0.5rem; max-width: 100%; margin: 1.5rem auto 0; overflow-x: auto; padding-bottom: 2px; } .hit-data-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50px; font-size: 0.88rem; font-weight: 700; color: #ffffff; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; pointer-events: none; } .hit-data-badge.highlight { background: rgba(255, 71, 87, 0.09); border-color: rgba(255, 71, 87, 0.35); } .hit-data-dot { width: 5px; height: 5px; border-radius: 50%; background: #cbd5e1; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); flex-shrink: 0; } .hit-data-dot.red { background: #ff4757; box-shadow: 0 0 6px rgba(255, 71, 87, 0.8); } /* ========================================================================== Cinematic Installation Section (Main Page & Sub Page) ========================================================================== */ .installation-cinematic-section { position: relative; padding: 5.5rem 2rem; color: #fff; font-family: var(--font-body); overflow: hidden; background: #040711; border-top: none; border-bottom: none; box-shadow: inset 0 20px 30px rgba(0, 0, 0, 0.5), inset 0 -20px 30px rgba(0, 0, 0, 0.5); } .installation-cinematic-section .cinematic-bg-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1.05); z-index: 1; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .installation-cinematic-section.is-active .cinematic-bg-video { transform: translate(-50%, -50%) scale(1.0); } .installation-cinematic-section .cinematic-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; z-index: 2; } .installation-cinematic-section .install-container { position: relative; max-width: 1050px; margin: 0 auto; z-index: 3; } .install-cinematic-header { text-align: center; margin-bottom: 2.2rem; transition: transform 0.8s ease, opacity 0.8s ease; } .install-cinematic-title { font-size: clamp(2.4rem, 4vw, 3.4rem); font-family: var(--font-heading); font-weight: 900; margin: 0.4rem 0; letter-spacing: -0.5px; background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .install-cinematic-subtitle { font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); font-weight: 500; } .install-cinematic-subtitle .highlight-total { color: #e8eaed; font-size: 2.2rem; font-weight: 900; margin: 0 0.4rem; font-variant-numeric: tabular-nums; text-shadow: 0 0 15px rgba(232, 234, 237, 0.5); } .install-cinematic-grid { display: flex; justify-content: center; gap: 3rem; margin-bottom: 0; } .install-stat-col { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 1.8rem; background: rgba(12, 18, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 20px 36px; min-width: 330px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .install-stat-col:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6); } .install-stat-col .donut-chart-box { position: relative; width: 175px; height: 175px; background: rgba(8, 12, 20, 0.7); border: none; border-radius: 50%; padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.02); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .installation-cinematic-section.is-active .install-stat-col:nth-child(1) .donut-chart-box { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(232, 234, 237, 0.3); } .installation-cinematic-section.is-active .install-stat-col:nth-child(2) .donut-chart-box { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(61, 184, 245, 0.3); } .install-stat-col:hover .donut-chart-box { transform: scale(1.04); } .install-stat-col .donut-chart { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .install-stat-col .donut-bg { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 10; } .install-stat-col .donut-segment { fill: transparent; stroke-width: 10; stroke-linecap: round; transition: all 1.5s ease; } .install-stat-col .segment-overseas { stroke: #e8eaed; filter: drop-shadow(0 0 10px rgba(232, 234, 237, 0.7)); } .install-stat-col .segment-domestic { stroke: #e63946; filter: drop-shadow(0 0 10px rgba(230, 57, 70, 0.7)); } .install-stat-col .center-ratio { font-size: 2.2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .install-stat-col .center-ratio.color-gold { color: #e8eaed; } .install-stat-col .center-ratio.color-blue { color: #e63946; } .install-stat-col .center-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin-top: 4px; white-space: nowrap; letter-spacing: -0.5px; } .install-stat-col .stat-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .install-stat-col .stat-badge { font-size: 0.7rem; font-weight: 800; padding: 0.25rem 0.7rem; border-radius: 20px; margin-bottom: 0.4rem; letter-spacing: 1.5px; width: max-content; } .install-stat-col .stat-badge.gold-badge { background-color: rgba(232, 234, 237, 0.15); color: #e8eaed; border: 1px solid rgba(232, 234, 237, 0.35); } .install-stat-col .stat-badge.blue-badge { background-color: rgba(230, 57, 70, 0.15); color: #e63946; border: 1px solid rgba(230, 57, 70, 0.35); } .install-stat-col .stat-title { font-size: 1.15rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 0.2rem; } .install-stat-col .stat-count { font-size: 2.3rem; font-weight: 900; color: #ffffff; font-family: var(--font-heading); font-variant-numeric: tabular-nums; } .install-stat-col .stat-count .unit { font-size: 1.1rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); margin-left: 0.3rem; } /* Responsive adjustments */ @media screen and (max-width: 768px) { .installation-cinematic-section { padding: 5rem 1.5rem; } .install-cinematic-grid { gap: 3.5rem; } .install-stat-col .donut-chart-box { width: 180px; height: 180px; } .install-stat-col .center-ratio { font-size: 2.2rem; } .install-stat-col .stat-count { font-size: 2.2rem; } .install-cinematic-title { font-size: 2.2rem; } .install-cinematic-subtitle { font-size: 1.1rem; } .install-cinematic-subtitle .highlight-total { font-size: 1.8rem; } .install-stat-col .donut-bg { stroke-width: 8; } } .install-stat-col .donut-segment { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 408.4; stroke-dashoffset: 408.4; transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1); } .install-stat-col .segment-overseas { stroke: #e8eaed; filter: drop-shadow(0 0 8px rgba(232, 234, 237, 0.6)); } .install-stat-col .segment-domestic { stroke: #e63946; filter: drop-shadow(0 0 8px rgba(230, 57, 70, 0.6)); } /* Responsive adjustments */ @media screen and (max-width: 768px) { .installation-cinematic-section { padding: 5rem 1.5rem; } .install-cinematic-grid { gap: 2rem; } .install-cinematic-title { font-size: 2.2rem; } .install-cinematic-subtitle { font-size: 1.1rem; } .install-cinematic-subtitle .highlight-total { font-size: 1.8rem; } .install-stat-col .stat-count { font-size: 2rem; } .installation-cinematic-section .distribution-bar-wrap { padding: 1.5rem; } } @media screen and (max-width: 600px) { .install-cinematic-grid { gap: 3.5rem; } } /* ========================================================================= Footer CTA Section (3-Column Contact Banner) ========================================================================= */ .footer-cta-section { padding: 4rem 2rem; background: #ffffff; color: #111111; font-family: var(--font-body); position: relative; } .footer-cta-container { max-width: 1200px; margin: 0 auto; } .footer-cta-header { text-align: center; margin-bottom: 3.5rem; } .footer-cta-eyebrow { font-size: 0.9rem; color: #e8eaed; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block; } .footer-cta-title { font-size: 2.4rem; font-weight: 600; font-family: var(--font-heading); margin: 0; word-break: keep-all; } .footer-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .footer-cta-card { background: #ffffff; border: 1px solid #eaeaea; border-radius: 18px; padding: 1.8rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease; height: 100%; } .footer-cta-card:hover { transform: translateY(-6px); border-color: #cccccc; background: #ffffff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);} .footer-cta-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(232, 234, 237, 0.1); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; color: #e8eaed; border: 1px solid rgba(232, 234, 237, 0.2); transition: transform 0.4s ease; } .footer-cta-card:hover .footer-cta-icon { transform: scale(1.1) rotate(5deg); background: rgba(232, 234, 237, 0.18); border-color: rgba(232, 234, 237, 0.4); } .footer-cta-card h4 { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.5rem 0; color: #222222; } .footer-cta-card p { font-size: 0.95rem; color: #666666; line-height: 1.5; margin: 0 0 1rem 0; word-break: keep-all; } .footer-cta-btn { display: inline-flex; align-items: center; padding: 0.8rem 1.8rem; background: #e8eaed; border: 1px solid #e8eaed; color: #050505; border-radius: 50px; font-size: 0.9rem; font-weight: 600; transition: all 0.3s ease; text-decoration: none; } .footer-cta-card:hover .footer-cta-btn { background: #f5c46e; border-color: #f5c46e; color: #050505; box-shadow: 0 4px 15px rgba(232, 234, 237, 0.3); } /* Responsive adjustments */ @media screen and (max-width: 992px) { .footer-cta-grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer-cta-card { padding: 2rem; } .footer-cta-section { padding: 4rem 1.5rem; } } /* ========================================================================= UDR Smart Store Ecosystem Section (Dark Luxury Cinematic Glassmorphism) ========================================================================= */ /* ========================================================================= REMO Style 1 Clean Minimalist Section (1:1 Match with Core AI Tech Section) ========================================================================= */ .remo-section { padding: 100px 0 115px; background: #ffffff; color: #0f172a; border-top: 1px solid #f1f5f9; border-bottom: 1px solid #e2e8f0; } .remo-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; text-align: center; } .remo-header { text-align: center; margin-bottom: 56px; } .remo-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; color: #0f172a; border: 1px solid #e2e8f0; padding: 6px 22px; border-radius: 50px; margin-bottom: 20px; background: #f8fafc; text-transform: uppercase; } .remo-header h2 { font-size: 42px; font-weight: 900; color: #0f172a; margin-bottom: 16px; letter-spacing: -0.5px; font-family: var(--font-heading); line-height: 1.25; } .remo-header p { font-size: 16px; color: #475569; max-width: 820px; margin: 0 auto 28px; line-height: 1.6; font-weight: 500; } .remo-btn-dark { display: inline-flex; align-items: center; gap: 6px; background: #0f172a; color: #ffffff; font-size: 13.5px; font-weight: 700; padding: 12px 34px; border-radius: 50px; text-decoration: none; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15); } .remo-btn-dark:hover { background: #e63946; color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(230, 57, 70, 0.35); } .remo-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .remo-cards-grid.eco-grid-3 { grid-template-columns: repeat(3, 1fr); } .remo-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 40px 34px; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02); } .remo-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; } .remo-card .card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #0f172a; margin-bottom: 24px; } .remo-card h3, .clean-card h3 { font-size: 21px; font-weight: 700; color: #1e293b; margin-bottom: 8px; letter-spacing: -0.02em; word-break: keep-all; } .remo-card .remo-card-sub { font-size: 13.5px; font-weight: 600; color: #3b82f6; margin-bottom: 16px; letter-spacing: -0.01em; } .remo-card p { font-family: var(--font-body), 'Pretendard', 'Noto Sans KR', sans-serif; font-size: 14px; font-weight: 400; color: #64748b; line-height: 1.65; margin: 0; word-break: keep-all; } @media (max-width: 1024px) { .remo-cards-grid, .remo-cards-grid.eco-grid-3 { grid-template-columns: 1fr; gap: 20px; } } .clean-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; } .clean-card-visual { display: flex; align-items: center; gap: 12px; } .card-icon-circle { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease; background: rgba(232, 234, 237, 0.12); color: #e5c158; border: 1px solid rgba(232, 234, 237, 0.3); box-shadow: 0 4px 16px rgba(232, 234, 237, 0.15); } .clean-card:hover .card-icon-circle { transform: scale(1.08) translateY(-2px); background: rgba(232, 234, 237, 0.22); border-color: rgba(232, 234, 237, 0.6); box-shadow: 0 6px 20px rgba(232, 234, 237, 0.3); } .visual-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; padding: 5px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.05); color: #e5c158; border: 1px solid rgba(232, 234, 237, 0.25); } .clean-num { display: inline-block; font-size: 16px; font-weight: 900; color: rgba(255, 255, 255, 0.3); letter-spacing: 1px; font-family: var(--font-heading); } .clean-num.highlight-num { color: #e5c158; } .clean-card-title { font-size: 22px; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 8px; letter-spacing: -0.4px; } .clean-card-subtitle { font-size: 14px; font-weight: 700; color: #e5c158; margin-bottom: 16px; } .clean-card-desc { font-size: 14.5px; color: rgba(255, 255, 255, 0.65); line-height: 1.65; margin-bottom: 24px; font-weight: 400; } .clean-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #e5c158; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; } .clean-card:hover .clean-card-link { color: #ffffff; transform: translateX(6px); } .clean-more-wrapper { display: flex; justify-content: center; } .btn-clean-more { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #e5c158; border: 1px solid rgba(232, 234, 237, 0.6); font-size: 13px; font-weight: 800; letter-spacing: 2.5px; padding: 14px 48px; text-decoration: none; text-transform: uppercase; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); border-radius: 50px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .btn-clean-more:hover { background: #e5c158; color: #060a12; border-color: #e5c158; box-shadow: 0 0 25px rgba(232, 234, 237, 0.45); transform: translateY(-3px); } @media (max-width: 1024px) { .clean-cards-grid { grid-template-columns: 1fr; gap: 18px; } .clean-card { min-height: auto; } } /* ========================================================================= Crea-m.com Style Asymmetric Video Showcase Grid (Clean Off-White Theme) ========================================================================= */ .cream-video-section { padding: 100px 0 120px; background: #f8fafc; color: #0f172a; width: 100%; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #cbd5e1; } .cream-container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 36px; } .cream-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 36px; } .cream-badge { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #b45309; margin-bottom: 8px; display: block; } .cream-title { font-size: 40px; font-weight: 900; color: #0f172a; letter-spacing: -0.5px; font-family: var(--font-heading); } .btn-dark-pill { display: inline-flex; align-items: center; gap: 8px; background: #0f172a; color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; padding: 12px 28px; border-radius: 30px; text-decoration: none; transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 4px 15px rgba(15, 23, 42, 0.15); } .btn-dark-pill:hover { background: #1e293b; color: #ffffff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25); } .btn-cream-more { font-size: 13px; font-weight: 800; color: #0f172a; text-decoration: none; letter-spacing: 0.5px; transition: color 0.25s ease; } .btn-cream-more:hover { color: #b45309; } /* Asymmetric Masonry Bento Grid */ .cream-video-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 16px; width: 100%; } .cream-video-item { position: relative; border-radius: 16px; overflow: hidden; background: #090e1a; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); } /* Grid Layout Spans */ .item-large-left { grid-column: span 2; grid-row: span 2; } .item-small { grid-column: span 1; grid-row: span 1; } .item-medium-wide { grid-column: span 2; grid-row: span 1; } .item-bottom-wide { grid-column: span 2; grid-row: span 1; } /* Video & Vignette Overlay */ .cream-bg-video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cream-video-item:hover .cream-bg-video { transform: scale(1.06); } .cream-item-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(9, 14, 26, 0.88) 100%); padding: 20px 20px 16px 20px; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; } .cream-item-title { font-size: 18px; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .item-large-left .cream-item-title { font-size: 20px; } .cream-item-sub { font-size: 13px; color: rgba(255, 255, 255, 0.75); font-weight: 500; } @media (max-width: 1024px) { .cream-video-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .item-large-left { grid-column: span 2; grid-row: span 1; } .item-large-left .cream-item-title { font-size: 18px; } .item-medium-wide, .item-bottom-wide { grid-column: span 2; } .cream-item-overlay { padding: 16px 16px 12px 16px; } } @media (max-width: 768px) { .cream-video-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; } .cream-video-item, .item-large-left, .item-small, .item-medium-wide, .item-bottom-wide { width: 100% !important; grid-column: auto !important; grid-row: auto !important; height: 120px !important; border-radius: 16px !important; } .cream-item-overlay { padding: 16px 20px !important; } .cream-item-title { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 4px !important; word-break: keep-all !important; line-height: 1.3 !important; } .cream-item-sub { font-size: 12px !important; opacity: 0.85 !important; } } @media (max-width: 640px) { .cream-video-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; gap: 10px; } .item-large-left { grid-column: span 2; grid-row: span 1; } .item-small { grid-column: span 1; grid-row: span 1; } .item-medium-wide, .item-bottom-wide { grid-column: span 2; grid-row: span 1; } .cream-item-title { font-size: 15px; margin-bottom: 2px; } .item-large-left .cream-item-title { font-size: 15px; } .cream-item-sub { font-size: 11px; } .cream-item-overlay { padding: 12px 12px 8px 12px; } } .udr-innovation-motion-section { padding: 100px 0; background: radial-gradient(circle at 50% 50%, #0d1627 0%, #050810 100%); color: #ffffff; position: relative; overflow: hidden; border-top: 1px solid rgba(0, 240, 255, 0.15); border-bottom: 1px solid rgba(0, 240, 255, 0.15); } .udr-motion-container { max-width: 1300px; margin: 0 auto; padding: 0 30px; } .udr-motion-header { margin-bottom: 60px; } .udr-motion-title { font-size: clamp(30px, 4vw, 48px); font-weight: 900; margin: 16px 0; letter-spacing: -1px; } .udr-motion-title .highlight-cyan { background: linear-gradient(135deg, #00f0ff 0%, #0070f3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .udr-motion-subtitle { color: #94a3b8; font-size: 17px; max-width: 700px; margin: 0 auto; } .udr-interactive-stage { display: grid; grid-template-columns: 420px 1fr; gap: 40px; align-items: center; } .udr-tech-nav-list { display: flex; flex-direction: column; gap: 20px; } .udr-tech-nav-item { background: rgba(18, 25, 41, 0.7); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 28px; display: flex; align-items: center; gap: 20px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); backdrop-filter: blur(10px); } .udr-tech-nav-item:hover { background: rgba(25, 36, 58, 0.85); border-color: rgba(0, 240, 255, 0.4); transform: translateX(8px); } .udr-tech-nav-item.active { background: linear-gradient(135deg, rgba(0, 240, 255, 0.12), rgba(0, 112, 243, 0.15)); border-color: #00f0ff; box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15); transform: translateX(12px); } .tech-num { font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 800; color: #64748b; transition: color 0.3s; } .udr-tech-nav-item.active .tech-num { color: #00f0ff; text-shadow: 0 0 15px rgba(0, 240, 255, 0.6); } .tech-info h3 { font-size: 19px; font-weight: 800; color: #ffffff; margin-bottom: 6px; } .tech-info p { font-size: 13px; color: #94a3b8; line-height: 1.5; } .active-indicator-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #00f0ff; opacity: 0; transition: opacity 0.3s; box-shadow: 0 0 10px #00f0ff; } .udr-tech-nav-item.active .active-indicator-bar { opacity: 1; } /* Canvas Stage */ .udr-visual-canvas-stage { position: relative; width: 100%; height: 520px; background: rgba(10, 14, 23, 0.9); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 28px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 240, 255, 0.05); } #udrTechCanvas { width: 100%; height: 100%; display: block; } .udr-hud-overlay { position: absolute; top: 24px; left: 24px; right: 24px; display: flex; justify-content: space-between; pointer-events: none; z-index: 10; } .hud-item { background: rgba(8, 12, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 18px; border-radius: 12px; backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 2px; } .hud-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #64748b; } .hud-value { font-size: 16px; font-weight: 800; font-family: 'Outfit', sans-serif; } .color-cyan { color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.5); } .color-gold { color: #e8eaed; text-shadow: 0 0 10px rgba(232, 234, 237, 0.5); } .color-blue { color: #0070f3; text-shadow: 0 0 10px rgba(0, 112, 243, 0.5); } .udr-hud-detail-box { position: absolute; bottom: 24px; left: 24px; right: 24px; background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(8, 12, 20, 0.95)); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 20px; padding: 24px 30px; backdrop-filter: blur(12px); z-index: 10; transition: all 0.4s ease; } .detail-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #00f0ff; letter-spacing: 1px; margin-bottom: 8px; background: rgba(0, 240, 255, 0.1); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(0, 240, 255, 0.3); } .udr-hud-detail-box h4 { font-size: 20px; font-weight: 800; color: #ffffff; margin-bottom: 8px; } .udr-hud-detail-box p { font-size: 14px; color: #94a3b8; line-height: 1.6; margin: 0; } @media (max-width: 1024px) { .udr-interactive-stage { grid-template-columns: 1fr; } .udr-visual-canvas-stage { height: 420px; } } .full-contain-video { width: 100%; display: block; object-fit: contain; } /* Chatbot Widget Overrides (from extracted inline styles) */ .udr-chat-header { padding: 18px 20px !important; } .udr-chat-brand .title { font-size: 1.05rem; font-weight: 700; color: #ffffff; } .chat-msg .msg-bubble { padding-bottom: 20px; line-height: 1.5; } .primary-inquiry-btn { margin-top: 20px; width: 100%; background: #e41f3e; color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 1.05rem; box-shadow: 0 4px 10px rgba(228, 31, 62, 0.3); transition: background 0.3s; } .primary-inquiry-btn:hover { background: #c31833; } .chat-faq-chips { margin-top: 15px; flex-direction: column; align-items: flex-end; } .faq-chip.gold-chip { background: rgba(212, 175, 55, 0.06) !important; border: 1px solid rgba(212, 175, 55, 0.6) !important; color: #e5c158 !important; box-shadow: 0 2px 10px rgba(212, 175, 55, 0.1); } .faq-chip.gold-chip:hover { background: rgba(230, 57, 70, 0.06) !important; border-color: #d4af37 !important; color: #fff !important; transform: translateX(4px); } .faq-chip.kakao-chip { background: linear-gradient(90deg, #ecdcc8 0%, #cda055 100%) !important; border: none !important; color: #111111 !important; font-weight: 700 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; } .faq-chip.kakao-chip:hover { background: linear-gradient(90deg, #e1cbb3 0%, #b88f49 100%) !important; color: #000000 !important; transform: translateX(4px); } .chat-link-text { color: #e8eaed; text-decoration: none; } .chat-link-text strong { font-weight: bold; } .chat-btn-group { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .chat-link-btn.center-btn { text-align: center; } .chat-link-btn.kakao-btn { background: #FEE500; color: #3c1e1e; border: none; font-weight: 700; text-align: center; } /* Flag Icons */ .flag-icon { display: inline-block; width: 18px; height: 12px; background-size: cover; background-position: center; background-repeat: no-repeat; vertical-align: middle; } .flag-canada { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTgnIGhlaWdodD0nMTInIHZpZXdCb3g9JzAgMCA2NDAgNDgwJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGZpbGw9JyNkODAwMjcnIGQ9J00wIDBoNjQwdjQ4MEgweicvPjxwYXRoIGZpbGw9JyNmZmZmZmYnIGQ9J00xNjAgMGgzMjB2NDgwSDE2MHonLz48cGF0aCBmaWxsPScjZDgwMDI3JyBkPSdNMzM2IDI5OC43bDE1LjUgOC40LTUuNC0xNi44IDE0LjUtOS45aC0xNy41bC02LjEtMTcuNy02LjEgMTcuN2gtMTcuNWwxNC41IDkuOS01LjQgMTYuOCAxNS41LTguNHptLTE2LTIyNi43bDE0LjggNTQgMTMuOS0zMC44IDE4IDEwLjQtMTQuOCA0NS41IDM1LjgtMTkgNC4zIDE5LjMtMzMgMzQuNSA0NS4xIDEzLTE0IDE3LjQtNDQuNC0xOCA4LjggNDgtMTguNy04LjEtNC44IDM4LjZoLTE0bC00LjgtMzguNi0xOC43IDguMSA4LjgtNDgtNDQuNCAxOC0xNC0xNy40IDQ1LjEtMTMtMzMtMzQuNSA0LjMtMTkuMyAzNS44IDE5LTE0LjgtNDUuNSAxOC0xMC40IDEzLjkgMzAuOCAxNC44LTU0eicvPjwvc3ZnPg=='); } .flag-usa { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTgnIGhlaWdodD0nMTInIHZpZXdCb3g9JzAgMCA3NDEgMzkwJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxyZWN0IHdpZHRoPSc3NDEnIGhlaWdodD0nMzkwJyBmaWxsPScjYjIyMjM0Jy8+PHBhdGggZD0nTTAgMzBoNzQxdjMwSDB6bTAgNjBoNzQxdjMwSDB6bTAgNjBoNzQxdjMwSDB6bTAgNjBoNzQxdjMwSDB6bTAgNjBoNzQxdjMwSDB6bTAgNjBoNzQxdjMwSDB6JyBmaWxsPScjZmZmJy8+PHJlY3Qgd2lkdGg9JzI5Ni40JyBoZWlnaHQ9JzIxMCcgZmlsbD0nIzNjM2I2ZScvPjwvc3ZnPg=='); } /* ========================================================================= Floating Quick Menu (Desktop Right Side & Mobile Bottom Bar) ========================================================================= */ .floating-quick-menu { position: fixed; right: 25px; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 12px 10px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .fqm-item { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: #ffffff; text-decoration: none; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; cursor: pointer; } .fqm-item i { width: 20px; height: 20px; background-color: #ffffff; transition: all 0.3s ease; } .icon-counseling { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); } .icon-cart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); } .icon-mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E"); } .icon-instagram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5' ry='5'/%3E%3Cpath d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/%3E%3Cline x1='17.5' y1='6.5' x2='17.51' y2='6.5'/%3E%3C/svg%3E"); } .icon-board { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); } .fqm-text { position: absolute; right: 55px; background: #e8eaed; color: #000000; padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(15px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(232, 234, 237, 0.3); pointer-events: none; } .fqm-item:hover { background: #e8eaed; } .fqm-item:hover i { background-color: #000000; } .fqm-item:hover .fqm-text { opacity: 1; visibility: visible; transform: translateX(0); } @media screen and (max-width: 1024px) { .floating-quick-menu { top: auto; bottom: 0; right: 0; left: 0; position: fixed !important; top: auto !important; bottom: 12px !important; right: 16px !important; left: 16px !important; transform: none !important; flex-direction: row !important; border-radius: 30px !important; padding: 8px 12px !important; gap: 16px !important; background: rgba(15, 20, 28, 0.94) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(232, 234, 237, 0.3) !important; z-index: 99999 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; } .fqm-item { flex: 1 !important; width: auto !important; height: 54px !important; border-radius: 20px !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: none !important; padding: 0 4px !important; } .fqm-text { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; color: #ffffff !important; padding: 0 !important; font-size: 0.65rem !important; letter-spacing: -0.5px !important; white-space: nowrap !important; font-weight: 700 !important; box-shadow: none !important; pointer-events: auto !important; white-space: nowrap !important; } .fqm-item i { width: 18px !important; right: 16px !important; } } /* --- Dark Footer Overrides --- */ .footer { background: #1e1e1e !important; border-top: 1px solid #2a2a2a !important; color: #a0a0a0 !important; position: static !important; z-index: auto !important; } .footer-logo-img { /* removed to keep colored logo */ } .footer-links a { color: #a0a0a0 !important; } .footer-links a:hover { color: #ffffff !important; } .footer-comp-title { color: #ffffff !important; } .footer-address, .footer-contact-details { color: #888888 !important; } .footer-contact-details .sep { color: #444444 !important; } .footer-copyright { color: #777777 !important; } .footer-addons select { background-color: rgba(255, 255, 255, 0.05) !important; color: #cccccc !important; border-color: rgba(255, 255, 255, 0.12) !important; } .footer-addons select:hover, .footer-addons select:focus { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.08) !important; } .footer-addons select option { background-color: #2a2a2a !important; color: #ffffff !important; } /* --- Top Button Transparent Overrides + Z-index Fix --- */ .btn-top { background: rgba(20, 20, 20, 0.65) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; } .btn-top:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: #0f141c !important; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35) !important; } /* --- Z-index Fix for Floating Quick Menu --- */ .floating-quick-menu { z-index: 99999 !important; } /* --- Footer CTA Button Dark Mode --- */ .footer-cta-btn { background-color: #111111 !important; color: #ffffff !important; border: 1px solid #333333 !important; } .footer-cta-btn:hover { background-color: #000000 !important; border-color: #555555 !important; color: #e8eaed !important; } /* ========================================================================= Sub-Page Compact Footer CTA Section (Pure Neutral Black / Dark Gray Theme) ========================================================================= */ .sub-footer-cta-section { padding: 3.5rem 0; background: #121212; /* Pure Neutral Deep Black/Dark Gray BG (No Blue Tint) */ border-top: 1px solid #242424; } .sub-footer-cta-container { max-width: 100%; padding: 0 1.5rem; box-sizing: border-box; margin: 0 auto; } .sub-footer-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .sub-footer-cta-card { background: #1c1c1c; /* Pure Neutral Dark Gray Card BG */ border: 1px solid #2e2e2e; border-radius: 20px; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .sub-footer-cta-card:hover { transform: translateY(-4px); background: #252525; border-color: #444444; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } .sub-footer-cta-card .sub-cta-title { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0 0 0.5rem 0; letter-spacing: -0.02em; } .sub-footer-cta-card .sub-cta-desc { font-size: 0.88rem; color: #d3d3d3; /* Light Gray Text */ margin: 0 0 1.25rem 0; line-height: 1.4; word-break: keep-all; } opacity: 1; visibility: visible; transform: translateX(0); } @media screen and (max-width: 1024px) { .floating-quick-menu { top: auto; bottom: 0; right: 0; left: 0; position: fixed !important; top: auto !important; bottom: 12px !important; right: 16px !important; left: 16px !important; transform: none !important; flex-direction: row !important; border-radius: 30px !important; padding: 8px 12px !important; gap: 6px !important; background: rgba(15, 20, 28, 0.94) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(232, 234, 237, 0.3) !important; z-index: 99999 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; } .fqm-item { flex: 1 !important; width: auto !important; height: 54px !important; border-radius: 20px !important; background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: none !important; padding: 0 4px !important; } .fqm-text { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; color: #ffffff !important; padding: 0 !important; font-size: 0.65rem !important; letter-spacing: -0.5px !important; white-space: nowrap !important; font-weight: 700 !important; box-shadow: none !important; pointer-events: auto !important; white-space: nowrap !important; } .fqm-item i { width: 18px !important; right: 16px !important; } } /* --- Dark Footer Overrides --- */ .footer { background: #1e1e1e !important; border-top: 1px solid #2a2a2a !important; color: #a0a0a0 !important; position: static !important; z-index: auto !important; } .footer-logo-img { /* removed to keep colored logo */ } .footer-links a { color: #a0a0a0 !important; } .footer-links a:hover { color: #ffffff !important; } .footer-comp-title { color: #ffffff !important; } .footer-address, .footer-contact-details { color: #888888 !important; } .footer-contact-details .sep { color: #444444 !important; } .footer-copyright { color: #777777 !important; } .footer-addons select { background-color: rgba(255, 255, 255, 0.05) !important; color: #cccccc !important; border-color: rgba(255, 255, 255, 0.12) !important; } .footer-addons select:hover, .footer-addons select:focus { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.08) !important; } .footer-addons select option { background-color: #2a2a2a !important; color: #ffffff !important; } /* --- Top Button Transparent Overrides + Z-index Fix --- */ .btn-top { background: rgba(20, 20, 20, 0.65) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; } .btn-top:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: #0f141c !important; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35) !important; } /* --- Z-index Fix for Floating Quick Menu --- */ .floating-quick-menu { z-index: 99999 !important; } /* --- Footer CTA Button Dark Mode --- */ .footer-cta-btn { background-color: #111111 !important; color: #ffffff !important; border: 1px solid #333333 !important; } .footer-cta-btn:hover { background-color: #000000 !important; border-color: #555555 !important; color: #e8eaed !important; } /* ========================================================================= Sub-Page Compact Footer CTA Section (Pure Neutral Black / Dark Gray Theme) ========================================================================= */ .sub-footer-cta-section { padding: 3.5rem 0; background: #121212; /* Pure Neutral Deep Black/Dark Gray BG (No Blue Tint) */ border-top: 1px solid #242424; } .sub-footer-cta-container { max-width: 100%; padding: 0 1.5rem; box-sizing: border-box; margin: 0 auto; } .sub-footer-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .sub-footer-cta-card { background: #1c1c1c; /* Pure Neutral Dark Gray Card BG */ border: 1px solid #2e2e2e; border-radius: 20px; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .sub-footer-cta-card:hover { transform: translateY(-4px); background: #252525; border-color: #444444; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } .sub-footer-cta-card .sub-cta-title { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0 0 0.5rem 0; letter-spacing: -0.02em; } .sub-footer-cta-card .sub-cta-desc { font-size: 0.88rem; color: #d3d3d3; /* Light Gray Text */ margin: 0 0 1.25rem 0; line-height: 1.4; word-break: keep-all; } .sub-footer-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.5rem; background: #ffffff !important; color: #121212 !important; border: 1px solid #ffffff !important; border-radius: 50px; font-size: 0.85rem; font-weight: 700; transition: all 0.25s ease; text-decoration: none; letter-spacing: -0.01em; } .sub-footer-cta-card:hover .sub-footer-cta-btn { background: #e0e0e0 !important; border-color: #e0e0e0 !important; color: #000000 !important; box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); } @media screen and (max-width: 992px) { .sub-footer-cta-grid { grid-template-columns: 1fr !important; gap: 1.2rem !important; } .sub-footer-cta-card { padding: 1.5rem 1.2rem; } .sub-footer-cta-section { padding: 2.5rem 1.5rem; } .fqm-item i { width: 18px !important; height: 18px !important; background-color: #e8eaed !important; flex-shrink: 0 !important; } .fqm-item:hover, .fqm-item:active { background: rgba(255, 255, 255, 0.1) !important; } .fqm-item:hover i, .fqm-item:active i { background-color: #ffffff !important; } .fqm-item:hover .fqm-text, .fqm-item:active .fqm-text { color: #ffffff !important; background-color: transparent !important; } } } /* --- Dark Footer Overrides --- */ .footer { background: #1e1e1e !important; border-top: 1px solid #2a2a2a !important; color: #a0a0a0 !important; position: static !important; z-index: auto !important; } .footer-logo-img { /* removed to keep colored logo */ } .footer-links a { color: #a0a0a0 !important; } .footer-links a:hover { color: #ffffff !important; } .footer-comp-title { color: #ffffff !important; } .footer-address, .footer-contact-details { color: #888888 !important; } .footer-contact-details .sep { color: #444444 !important; } .footer-copyright { color: #777777 !important; } .footer-addons select { background-color: rgba(255, 255, 255, 0.05) !important; color: #cccccc !important; border-color: rgba(255, 255, 255, 0.12) !important; } .footer-addons select:hover, .footer-addons select:focus { color: #ffffff !important; background-color: rgba(255, 255, 255, 0.08) !important; } .footer-addons select option { background-color: #2a2a2a !important; color: #ffffff !important; } /* --- Top Button Transparent Overrides + Z-index Fix --- */ .btn-top { background: rgba(20, 20, 20, 0.65) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; z-index: 99999 !important; } .btn-top:hover { background: rgba(255, 255, 255, 0.95) !important; border-color: #0f141c !important; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.35) !important; } /* --- Z-index Fix for Floating Quick Menu --- */ .floating-quick-menu { z-index: 99999 !important; } /* --- Footer CTA Button Dark Mode --- */ .footer-cta-btn { background-color: #111111 !important; color: #ffffff !important; border: 1px solid #333333 !important; } .footer-cta-btn:hover { background-color: #000000 !important; border-color: #555555 !important; color: #e8eaed !important; } /* ========================================================================= Sub-Page Compact Footer CTA Section (Pure Neutral Black / Dark Gray Theme) ========================================================================= */ .sub-footer-cta-section { padding: 3.5rem 0; background: #121212; /* Pure Neutral Deep Black/Dark Gray BG (No Blue Tint) */ border-top: 1px solid #242424; } .sub-footer-cta-container { max-width: 100%; padding: 0 1.5rem; box-sizing: border-box; margin: 0 auto; } .sub-footer-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; } .sub-footer-cta-card { background: #1c1c1c; /* Pure Neutral Dark Gray Card BG */ border: 1px solid #2e2e2e; border-radius: 20px; padding: 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } .sub-footer-cta-card:hover { transform: translateY(-4px); background: #252525; border-color: #444444; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6); } .sub-footer-cta-card .sub-cta-title { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin: 0 0 0.5rem 0; letter-spacing: -0.02em; } .sub-footer-cta-card .sub-cta-desc { font-size: 0.88rem; color: #d3d3d3; /* Light Gray Text */ margin: 0 0 1.25rem 0; line-height: 1.4; word-break: keep-all; } .sub-footer-cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.5rem; background: #ffffff !important; color: #121212 !important; border: 1px solid #ffffff !important; border-radius: 50px; font-size: 0.85rem; font-weight: 700; transition: all 0.25s ease; text-decoration: none; letter-spacing: -0.01em; } .sub-footer-cta-card:hover .sub-footer-cta-btn { background: #e0e0e0 !important; border-color: #e0e0e0 !important; color: #000000 !important; box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); } @media screen and (max-width: 992px) { .sub-footer-cta-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1.2rem !important; } .sub-footer-cta-card { padding: 1.5rem 1.2rem; } .sub-footer-cta-section { padding: 2.5rem 1.5rem; } } @media screen and (max-width: 640px) { .hide-on-mobile { display: none !important; } } .history-section { padding: 80px 5% 80px 5% !important; background: #000000 !important; } .timeline-row:last-child { margin-bottom: 0 !important; } .history-tabs { display: inline-flex !important; background: transparent !important; border: none !important; border-bottom: none !important; border-radius: 0 !important; padding: 0 !important; margin-bottom: 60px !important; gap: 20px; } .history-tab { font-size: 1.15rem !important; font-family: 'Outfit', 'Pretendard', sans-serif !important; font-weight: 500 !important; letter-spacing: 1px !important; padding: 10px 10px 28px !important; background: transparent !important; border: none !important; border-radius: 0 !important; color: rgba(255, 255, 255, 0.35) !important; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important; cursor: pointer !important; } .history-tab.active, .history-tab:hover { background: transparent !important; color: #ffffff !important; text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; box-shadow: none !important; border-color: transparent !important; border-bottom: none !important; transform: none !important; } /* --- Structural Timeline --- */ .timeline-line { width: 2px !important; background: linear-gradient(180deg, #E63946 0%, #333333 100%) !important; left: 19px !important; box-shadow: 0 0 15px rgba(230, 57, 70, 0.5) !important; } .timeline-year-label { font-size: 2.2rem !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: -0.02em !important; margin-bottom: 24px !important; } .timeline-year-label::before { width: 16px !important; height: 16px !important; left: -39px !important; border: 4px solid #ffffff !important; background: #000000 !important; box-shadow: 0 0 0 6px #000000 !important; /* Creates a cut-out gap over the line */ transition: all 0.4s ease !important; margin-top: 0 !important; } .timeline-row:hover .timeline-year-label::before { background: #E63946 !important; border-color: #E63946 !important; transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 0 25px rgba(230, 57, 70, 0.6), 0 0 0 6px #000000 !important; } /* --- Solid Content Boxes --- */ .timeline-desc { background: #111111 !important; border: 1px solid #2a2a2a !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important; padding: 30px 35px !important; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; } .timeline-row:hover .timeline-desc { background: #161616 !important; border-color: #444444 !important; transform: translateX(8px) !important; /* Slide in slightly */ box-shadow: 0 15px 40px rgba(0, 0, 0, 1) !important; } /* --- Split Layout for Timeline (Desktop) --- */ @media screen and (min-width: 769px) { .timeline-row { display: flex !important; align-items: flex-start !important; gap: 30px !important; } .timeline-year-label { flex: 0 0 160px !important; margin-bottom: 0 !important; margin-top: 15px !important; padding-top: 0 !important; font-size: 3rem !important; } .timeline-year-label::before { margin-top: 0 !important; } .timeline-desc { flex: 1 !important; } } /* --- Crisp Typography --- */ .timeline-desc li { font-size: 1.1rem !important; font-weight: 400 !important; color: #aaaaaa !important; line-height: 1.7 !important; margin-bottom: 16px !important; padding-left: 22px !important; transition: color 0.4s ease !important; } .timeline-desc li::before { width: 5px !important; height: 5px !important; background: #555555 !important; top: 13px !important; box-shadow: none !important; border-radius: 50% !important; transition: background 0.4s ease !important; } .timeline-row:hover .timeline-desc li { color: #ffffff !important; } .timeline-row:hover .timeline-desc li::before { background: #E63946 !important; box-shadow: 0 0 10px rgba(230, 57, 70, 0.5) !important; } @media screen and (max-width: 768px) { .timeline-year-label { font-size: 1.8rem !important; } .timeline-desc li { font-size: 1rem !important; } .timeline-line { left: 17px !important; } .timeline-year-label::before { left: -33px !important; } } /* ========================================================================== GLOBAL PREMIUM GLASSMORPHISM OVERRIDES (Applies sleeker, thinner, and cleaner UI site-wide) ========================================================================== */ /* 1. Global Backgrounds (Pure black instead of murky dark grays) */ body, .wrapper, .main, section { background-color: #000000 !important; } /* 2. Global Typography Reductions (Slimmer & sleeker) */ h1, h2, h3, .section-title, .sw-hero-title { font-weight: 600 !important; letter-spacing: -0.02em !important; } .section-title { font-size: 2.2rem !important; } /* 3. Sleek Glassmorphism Cards */ .app-card, .remo-card, .feature-card, .board-wrap, .info-box { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(12px) !important; transition: all 0.4s ease !important; } .app-card:hover, .remo-card:hover, .feature-card:hover { transform: translateY(-4px) !important; background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.15) !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important; } /* 4. Elegant Pill Buttons */ .board-write-btn, .remo-btn, .remo-btn-dark, .btn { background: rgba(255, 255, 255, 0.05) !important; color: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 50px !important; box-shadow: none !important; backdrop-filter: blur(8px) !important; font-weight: 500 !important; transition: all 0.3s ease !important; } .board-write-btn:hover, .remo-btn:hover, .remo-btn-dark:hover, .btn:hover { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2) !important; transform: translateY(-2px) !important; } /* 5. Input Fields (Glassy) */ input, textarea, select, .board-search-input { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; color: #fff !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important; transition: border-color 0.3s ease !important; } input:focus, textarea:focus, select:focus, .board-search-input:focus { border-color: rgba(255, 255, 255, 0.3) !important; background: rgba(255, 255, 255, 0.05) !important; outline: none !important; } /* 6. Kill Noise (Heavy Glows and Dropshadows) */ .sw-hero-glow, .remo-glow, .feature-glow, .bg-glow { background: radial-gradient(ellipse, rgba(230, 57, 70, 0.25) 0%, transparent 60%) !important; opacity: 0.5 !important; filter: blur(70px) !important; } .board-cat-btn { border-radius: 50px !important; } /* 7. CTA & Footer Premium Dark Mode */ .sub-footer-cta-section { background-color: #000000 !important; } .sub-footer-cta-card { background: #111111 !important; border: 1px solid #222222 !important; border-radius: 16px !important; transition: all 0.3s ease !important; } .sub-footer-cta-card:hover { background: #161616 !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; transform: translateY(-4px) !important; } .sub-footer-cta-btn { background: #222222 !important; color: #aaaaaa !important; border: 1px solid #333333 !important; border-radius: 50px !important; font-weight: 500 !important; transition: all 0.3s ease !important; } .sub-footer-cta-card:hover .sub-footer-cta-btn { background: #E63946 !important; color: #ffffff !important; border-color: #E63946 !important; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important; } .footer { background-color: #050505 !important; border-top: 1px solid #1a1a1a !important; } .footer-logo img, .footer-logo-img { filter: grayscale(1) brightness(2) !important; opacity: 0.8 !important; transition: opacity 0.3s ease !important; } .footer-logo img:hover, .footer-logo-img:hover { opacity: 1 !important; } .footer-links a, .footer-address, .footer-copyright, .footer-contact-details { color: #999999 !important; font-weight: 500 !important; letter-spacing: -0.2px !important; } .footer-links a:hover { color: #ffffff !important; } .footer-comp-title { color: #dddddd !important; } /* --- RESTORED AND FIXED INSTALL STAT COL --- */ .install-stat-col .donut-segment { fill: none; stroke-width: 11; stroke-linecap: round; stroke-dasharray: 408.4; stroke-dashoffset: 408.4; transition: stroke-dashoffset 1.8s cubic-bezier(0.16, 1, 0.3, 1); } .install-stat-col .segment-overseas { stroke: #e8eaed; filter: drop-shadow(0 0 10px rgba(232, 234, 237, 0.7)); } .install-stat-col .segment-domestic { stroke: #e63946 !important; filter: drop-shadow(0 0 10px rgba(230, 57, 70, 0.7)) !important; } .install-stat-col .donut-center-info { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: flex; flex-direction: column; } .install-stat-col .center-ratio.color-blue { color: #e63946 !important; } .install-stat-col .stat-badge.blue-badge { background-color: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.35) !important; } /* --- RESTORE MORE DELETED STYLES AND FIX BLUR --- */ /* Fix DOMESTIC blue blur background */ .installation-cinematic-section.is-active .install-stat-col:nth-child(2) .donut-chart-box { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(230, 57, 70, 0.3) !important; } /* Restore stat-info alignment */ .install-stat-col .stat-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; margin-top: 0; } /* Restore stat-badge pill shape */ .install-stat-col .stat-badge { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 20px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 0.5rem; } /* Restore OVERSEAS gold badge */ .install-stat-col .stat-badge.gold-badge { background-color: rgba(230, 57, 70, 0.06); color: #e63946; border: 1px solid rgba(212, 175, 55, 0.35); } /* Ensure DOMESTIC red badge is perfectly shaped */ .install-stat-col .stat-badge.blue-badge { background-color: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.35) !important; border-radius: 20px !important; padding: 0.3rem 0.9rem !important; } /* --- RED THEME UPDATES FOR BUSINESS, INTERVIEW, VISION --- */ /* 1. business.html: UDR MEMBERS badge */ .badge-blue { background-color: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border-color: rgba(230, 57, 70, 0.35) !important; } /* 2. interview.html: Video progress bar & check marks */ .vc-progress-fill { background: linear-gradient(90deg, #e63946, #ff7b89) !important; } .interview-features li .icon-check-inline { color: #e63946 !important; } /* 3. vision.html: Number badges & Tags */ .vm-card-badge .badge-number { color: #e63946 !important; } .vm-tag:hover { color: #e63946 !important; border-color: rgba(230, 57, 70, 0.5) !important; background: rgba(230, 57, 70, 0.1) !important; } /* --- FIX TIMELINE CIRCLE ALIGNMENT --- */ .timeline-year-label::before { left: -34px !important; } @media screen and (max-width: 768px) { .timeline-year-label::before { left: -30px !important; } } /* --- SMOOTH SLIDING TABS FIX --- */ .history-tabs { position: relative !important; gap: 0 !important; /* Ensure no gap for perfect 50% split */ z-index: 1; flex-wrap: nowrap !important; } .history-tabs .history-tab { position: relative !important; z-index: 2 !important; flex: 1 1 50% !important; /* Force equal width */ text-align: center !important; } /* Remove instant background changes */ .history-tabs .history-tab.active { background: transparent !important; box-shadow: none !important; color: #ffffff !important; text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; border-bottom: none !important; } .history-tabs .history-tab::after { content: '' !important; position: absolute !important; bottom: 4px !important; left: 50% !important; width: 6px !important; height: 6px !important; background-color: #E63946 !important; border-radius: 50% !important; box-shadow: 0 0 14px 4px rgba(230, 57, 70, 0.8) !important; transform: translateX(-50%) translateY(10px) scale(0) !important; opacity: 0 !important; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease !important; } .history-tabs .history-tab.active::after, .history-tabs .history-tab:hover::after { transform: translateX(-50%) translateY(0) scale(1) !important; opacity: 1 !important; } .history-tabs .history-tab:hover { background: transparent !important; box-shadow: none !important; color: #ffffff !important; text-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important; } /* Sliding pill element HIDE */ .history-tabs::before { display: none !important; } /* Move pill to the second tab when active HIDE */ .history-tabs:has(.history-tab:nth-child(2).active)::before { display: none !important; } /* --- FIX SLIDING PILL TORN EDGES (BACKDROP FILTER CONFLICT) --- */ .history-tabs .history-tab { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* --- MOBILE HISTORY TABS & CONTENT COMPACT VIEW --- */ @media screen and (max-width: 768px) { /* 1. Pull tabs higher by restoring smaller section padding */ .history-section { padding: 40px 16px 40px 16px !important; } /* 2. Reduce gap below tabs and container padding */ .history-tabs { margin-bottom: 30px !important; padding: 4px !important; } /* 3. Make number tab buttons smaller */ .history-tabs .history-tab { padding: 8px 12px 24px !important; font-size: 0.88rem !important; } /* 4. Make content smaller to show more information */ .timeline-year-label { font-size: 1.25rem !important; margin-bottom: 12px !important; } .timeline-desc li { font-size: 0.82rem !important; margin-bottom: 8px !important; line-height: 1.4 !important; } /* 5. Fix overall top padding for all subpages */ .interview-section, .installation-section, .vision-section, .history-section { padding-top: 30px !important; padding-bottom: 30px !important; } /* 6. Reorder Interview Section so Video comes before features */ .interview-section { display: flex !important; flex-direction: column !important; padding-top: 15px !important; } .interview-text { display: contents !important; } .interview-badge { order: 1 !important; align-self: center !important; margin-bottom: 6px !important; } .interview-text h2 { order: 2 !important; font-size: 1.25rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; } .interview-text p.sub { order: 3 !important; margin-top: 0 !important; margin-bottom: 0.8rem !important; font-size: 0.9rem !important; line-height: 1.4 !important; } .interview-image { order: 4 !important; margin-bottom: 2rem !important; width: 100% !important; height: auto !important; } .interview-video-container { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; } .interview-features { order: 5 !important; } /* Decrease padding on feature items for compactness */ .interview-features { gap: 0.8rem !important; } .interview-features li { padding: 14px 16px !important; font-size: 0.85rem !important; } } /* --- RED THEME UPDATES FOR PRODUCT PAGES (PROD) --- */ /* 1. Hyper Tag Pills */ .hyper-tag-pill, .hyper-tag-pill.gold, .hyper-tag-pill-gold, .hyper-tag-pill-gold-lg { background-color: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border-color: rgba(230, 57, 70, 0.35) !important; } .hyper-tag-pill:hover, .hyper-tag-pill-gold:hover, .hyper-tag-pill-gold-lg:hover { background-color: rgba(230, 57, 70, 0.25) !important; border-color: rgba(230, 57, 70, 0.5) !important; } /* 2. Product Badge (Gold -> Red) */ .p-badge-gold, .p-bento-content .p-badge-gold { background-color: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border-color: rgba(230, 57, 70, 0.35) !important; } /* 3. Popover Badges */ .popover-badge { background-color: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; } /* 4. Live Badge Overrides */ .live-badge-label { color: #e63946 !important; } .live-badge-label .live-rec-dot { background-color: #e63946 !important; box-shadow: 0 0 8px rgba(230, 57, 70, 0.8) !important; } /* 5. List Icon Circles */ .list-icon-gold-circle { border-color: rgba(230, 57, 70, 0.4) !important; background: transparent !important; box-shadow: 0 4px 12px rgba(230, 57, 70, 0.12) !important; } .list-card-centered:hover .list-icon-gold-circle { border-color: #e63946 !important; background: rgba(230, 57, 70, 0.2) !important; } /* 6. Overview Icons */ .p-overview-icon { background: linear-gradient(135deg, rgba(230, 57, 70, 0.2), rgba(230, 57, 70, 0.05)) !important; border-color: rgba(230, 57, 70, 0.2) !important; } .p-overview-card:hover .p-overview-icon { border-color: #e63946 !important; background: rgba(230, 57, 70, 0.2) !important; } /* --- RED THEME FIX FOR COLOR HARMONY --- */ /* Change the main title highlight from gold to red */ .p-overview-maintitle .highlight-gold { background: linear-gradient(135deg, #e63946 0%, #ff7b89 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* Ensure the SVG icons inherit the red color instead of gold */ .p-overview-icon, .list-icon-gold-circle { color: #e63946 !important; } /* On hover, make the icon white so it pops against the red background */ .p-overview-card:hover .p-overview-icon, .list-card-centered:hover .list-icon-gold-circle { color: #ffffff !important; } /* --- RED THEME FIX FOR REMAINING GOLD TAGS --- */ /* Section Tag Pills */ .sec-tag-gold-pill, .p-sec-tag-gold-fit { color: #e63946 !important; border-color: rgba(230, 57, 70, 0.4) !important; background: rgba(230, 57, 70, 0.05) !important; } /* Section Tag Boxes & Subtle */ .sec-tag-gold-box, .sec-tag-gold-subtle { color: #e63946 !important; border-color: rgba(230, 57, 70, 0.3) !important; background: rgba(230, 57, 70, 0.05) !important; } /* Other Background tags */ .p-tag-gold-bg { background: rgba(230, 57, 70, 0.1) !important; color: #e63946 !important; } /* Patent Badge */ .patent-gold-badge { background: rgba(230, 57, 70, 0.15) !important; color: #e63946 !important; border-color: rgba(230, 57, 70, 0.3) !important; } /* --- UNIFY SEC-TAG-GOLD-PILL WITH HYPER-TAG-PILL SIZING --- */ .sec-tag-gold-pill, .p-sec-tag-gold-fit { font-size: 0.8rem !important; letter-spacing: normal !important; padding: 6px 16px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* --- UNIFY PILL GLOW EFFECT --- */ .sec-tag-gold-pill, .p-sec-tag-gold-fit, .hyper-tag-pill, .hyper-tag-pill.gold, .hyper-tag-pill-gold, .hyper-tag-pill-gold-lg { background-color: rgba(230, 57, 70, 0.15) !important; border-color: rgba(230, 57, 70, 0.35) !important; box-shadow: 0 0 15px rgba(230, 57, 70, 0.2) !important; } /* --- ABSOLUTE UNIFICATION OF ALL TAG PILLS --- */ .sec-tag-gold-pill, .p-sec-tag-gold-fit, .hyper-tag-pill, .hyper-tag-pill.gold, .hyper-tag-pill-gold, .hyper-tag-pill-gold-lg { background-color: rgba(230, 57, 70, 0.15) !important; border-color: rgba(230, 57, 70, 0.35) !important; box-shadow: 0 0 15px rgba(230, 57, 70, 0.2) !important; color: #e63946 !important; font-size: 0.8rem !important; letter-spacing: 0.5px !important; font-weight: 700 !important; padding: 6px 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Pretendard', sans-serif !important; border-radius: 30px !important; text-transform: uppercase !important; line-height: 1.5 !important; opacity: 1 !important; backdrop-filter: none !important; } /* --- FIX OVERVIEW CARD HOVER EFFECT --- */ .p-overview-card:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important; } @media (min-width: 992px) { .pill-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } } .align-center-y { align-items: center !important; } /* Image Toggle Container */ .image-toggle-container { position: relative; cursor: pointer; overflow: hidden; border-radius: 12px; } .image-toggle-container img { width: 100%; display: block; transition: opacity 0.4s ease; } .image-toggle-container .img-detail { position: absolute; top: 0; left: 0; opacity: 0; } .image-toggle-container.show-detail .img-detail { opacity: 1; } .image-toggle-container.show-detail .img-base { opacity: 0; } .click-hint { position: absolute; bottom: 20px; right: 20px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; pointer-events: none; transition: opacity 0.3s; z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.3); } .image-toggle-container.show-detail .click-hint { opacity: 0; } /* Interactive Hotspots */ .interactive-img-container { position: relative; display: inline-block; width: 100%; overflow: visible !important; } .interactive-img-container > img { width: 100%; display: block; border-radius: 12px; } .hotspot { position: absolute; z-index: 10; cursor: pointer; transform: translate(-50%, -50%) !important; } .hotspot:hover { z-index: 30; } .hotspot-dot { position: absolute !important; width: 22px !important; height: 22px !important; background: rgba(255,204,0,0.88) !important; border: 2.5px solid #ffffff !important; border-radius: 50% !important; box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 12px rgba(255,204,0,0.6) !important; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important; animation: pulse-hotspot 2s infinite !important; transform: scale(1) !important; transform-origin: center center !important; } .hotspot:hover .hotspot-dot, .hotspot-dot:hover { transform: scale(1.18) !important; animation: none !important; background: rgba(255,204,0,1) !important; box-shadow: 0 0 16px rgba(255,204,0,0.9) !important; } @keyframes pulse-hotspot { 0% { box-shadow: 0 0 0 0 rgba(255,204,0,0.7); } 70% { box-shadow: 0 0 0 10px rgba(255,204,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); } } .hotspot-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; background: rgba(22, 22, 24, 0.96); backdrop-filter: blur(12px); color: #fff; padding: 14px 18px; border-radius: 12px; width: max-content; max-width: 250px; text-align: left; box-shadow: 0 15px 35px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); } .hotspot-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: rgba(22, 22, 24, 0.96) transparent transparent transparent; } .hotspot:hover .hotspot-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .hotspot-tooltip h4 { color: #fff; margin: 0 0 6px 0; font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .hotspot-tooltip h4::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ffcc00; } .hotspot-tooltip p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: #a0a0a5; } .tooltip-zoom-circle { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto 10px auto; background-image: url('../img/Indiantv01_clean.jpg'); background-size: 400%; background-repeat: no-repeat; box-shadow: 0 4px 10px rgba(0,0,0,0.5); } @media (min-width: 992px) { .p-split-row.img-large { grid-template-columns: 2.2fr 1fr !important; gap: 3rem !important; } } .p-pill-grid.mt-4 { margin-top: 1.2rem !important; } /* Full-width Bento Card Images */ .p-bento-card { overflow: hidden !important; } .p-bento-img-wrapper.fill-box { margin: 0 0 1.2rem 0 !important; border-radius: 0 !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9; background: transparent !important; } .p-bento-img-wrapper.fill-box > img { border-radius: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: 100% !important; max-height: 100% !important; } /* Remove Glow/Blur Effects on Badges */ .p-badge-gold, .hyper-tag-pill, .p-badge-outline, .sw-tag, .p-chip, .p-bento-content .p-badge-gold { box-shadow: none !important; filter: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Interactive World Map Section */ .global-map-section { background: #0a0a0c; position: relative; overflow: visible; padding: 4rem 0 6rem 0 !important; } .map-summary-banner { display: flex; align-items: center; justify-content: center; gap: 3rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1.5rem 2rem; max-width: 650px; margin: 0 auto 3rem auto; } .summary-stat-box { text-align: center; } .summary-num { font-size: 2.2rem; font-weight: 800; color: #ffffff; display: block; line-height: 1; } .summary-num.color-gold { color: #e63946; background: linear-gradient(135deg, #d4af37, #f3e5ab); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .summary-num small { font-size: 1rem; font-weight: 500; margin-left: 4px; -webkit-text-fill-color: #ffffff; } .summary-label { font-size: 0.85rem; color: #888; margin-top: 6px; display: block; } .summary-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.1); } .interactive-world-map-wrapper { position: relative; width: 100%; aspect-ratio: 2.1 / 1; min-height: 400px; background: #000000 !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; overflow: hidden !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important; } .world-map-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.88; background-image: url('../img/clean_world_map.png'); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 24px !important; pointer-events: none; } .map-hotspot { position: absolute; z-index: 10; cursor: pointer; transform: translate(-50%, -50%); } .map-hotspot:hover, .map-hotspot.active { z-index: 100; } .map-pin-dot { width: 14px; height: 14px; background: #e63946; border: 2px solid #ffffff; border-radius: 50%; box-shadow: 0 0 14px #e63946; transition: transform 0.3s; } .map-hotspot:hover .map-pin-dot, .map-hotspot.active .map-pin-dot { transform: scale(1.3); background: #ff4d5a; box-shadow: 0 0 20px #e63946; } .map-pin-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: rgba(230, 57, 70, 0.4); border-radius: 50%; animation: map-pulse 2s infinite; } @keyframes map-pulse { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } } .map-tooltip { position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%) scale(0.85); opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: rgba(20, 20, 25, 0.75) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; padding: 14px 22px !important; border-radius: 12px !important; width: max-content !important; min-width: auto !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } .map-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: rgba(20, 20, 25, 0.75) transparent transparent transparent !important; } .map-hotspot:hover .map-tooltip, .map-hotspot.active .map-tooltip { opacity: 1; transform: translateX(-50%) scale(1); } .map-tooltip h4 { color: rgba(255, 255, 255, 0.95) !important; font-size: 0.95rem !important; font-weight: 600 !important; letter-spacing: 1px !important; margin: 0 0 10px 0 !important; text-align: center !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 8px !important; } .tooltip-count { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 6px !important; line-height: 1 !important; margin: 0 !important; } .tooltip-count strong { color: #e63946 !important; font-size: 2.2rem !important; font-weight: 900 !important; font-family: 'Outfit', sans-serif !important; text-shadow: 0 0 15px rgba(230, 57, 70, 0.4) !important; } .tooltip-count small { font-size: 0.9rem !important; color: rgba(255, 255, 255, 0.6) !important; font-weight: 500 !important; } .region-cards-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 1.5rem !important; margin-top: 3.5rem !important; padding: 1.8rem 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } @media (max-width: 992px) { .region-cards-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 576px) { .region-cards-grid { grid-template-columns: repeat(3, 1fr); } } .region-card { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0.8rem 0.5rem !important; text-align: center !important; transition: transform 0.3s ease !important; box-shadow: none !important; backdrop-filter: none !important; } .region-card:hover { background: transparent !important; border: none !important; transform: translateY(-4px) !important; box-shadow: none !important; } .region-card h5 { color: #94a3b8 !important; font-size: 0.85rem !important; margin: 0 0 6px 0 !important; font-weight: 500 !important; letter-spacing: -0.2px !important; } .region-val { color: #ffffff !important; font-size: 1.8rem !important; font-weight: 900 !important; letter-spacing: -0.5px !important; } .region-val span { font-size: 0.85rem !important; font-weight: 700 !important; color: #e63946 !important; margin-left: 4px !important; } /* Store Filter Buttons Refined (case.html) */ .store-tab-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; height: 38px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; padding: 0 17px !important; border-radius: 30px !important; font-size: 0.88rem !important; font-weight: 600 !important; letter-spacing: -0.2px !important; transition: all 0.3s ease !important; box-shadow: none !important; } .store-tab-btn:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.35) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .store-tab-btn.active { background: #ffffff !important; border-color: #ffffff !important; color: #000000 !important; -webkit-text-fill-color: #000000 !important; font-weight: 800 !important; box-shadow: 0 4px 15px rgba(255, 255, 255, 0.25) !important; } /* Fix Horizontal Scroll Tab Bar Edge Truncation/Clipping */ .store-tab-bar-scroll { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: visible !important; white-space: nowrap !important; gap: 9px !important; padding: 6px 0 12px 0 !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; margin: 0 auto 1.5rem auto !important; box-sizing: border-box !important; } .store-tab-bar-scroll::before, .store-tab-bar-scroll::after { content: '' !important; display: block !important; width: 16px !important; height: 1px !important; flex-shrink: 0 !important; } .store-tab-bar-scroll::-webkit-scrollbar { display: none !important; } .store-tab-bar-scroll .store-tab-btn { flex-shrink: 0 !important; } @media (min-width: 1180px) { .store-tab-bar-scroll { justify-content: space-between !important; } .store-tab-bar-scroll::before, .store-tab-bar-scroll::after { display: none !important; } } /* Shift case.html tab bar upwards dramatically - Perfect Balanced Middle Ground */ .p-feature-section.bg-dark { padding-top: 2rem !important; } .p-statement-section { padding-bottom: 3rem !important; } /* Fungolf Patent Gold Badge Luxury Redesign (fungolf.html) */ .patent-banner-section { background: #0a0a0c !important; border-top: 1px solid rgba(255, 255, 255, 0.05) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; padding: 3.5rem 0 !important; } .patent-gold-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 24px !important; background: rgba(212, 175, 55, 0.08) !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; border-radius: 30px !important; box-shadow: none !important; filter: none !important; backdrop-filter: none !important; margin-bottom: 2.5rem !important; } .patent-badge-icon { color: #e63946; margin-right: 8px; display: inline-block; vertical-align: middle; } .patent-badge-text { font-size: 0.88rem !important; font-weight: 700 !important; color: #ffffff !important; letter-spacing: 0.5px !important; } .patent-divider { color: #e63946; margin: 0 8px; font-weight: 400; opacity: 0.7; } .patent-ribbon-grid { background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 20px !important; padding: 1.8rem 1.4rem !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; } /* Feature Item Dot Replacement (aimodule.html & product features) */ .feature-item-dot { width: 7px !important; height: 7px !important; background: #d4af37 !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-right: 14px !important; box-shadow: 0 0 8px rgba(212, 175, 55, 0.6) !important; } .feature-item-card { display: flex !important; align-items: center !important; padding: 14px 20px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-radius: 14px !important; margin-bottom: 10px !important; transition: all 0.3s ease !important; } .feature-item-card:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(212, 175, 55, 0.3) !important; } .feature-item-text { color: #ffffff !important; font-size: 0.92rem !important; font-weight: 600 !important; letter-spacing: -0.2px !important; } /* Language Switcher Red Hover Effect (KOR / ENG) */ .header-utils a { transition: color 0.25s ease !important; } .header-utils a:hover, .header.scrolled .header-utils a:hover, .header:hover .header-utils a:hover { color: #e63946 !important; } /* ========================================================================= Enforce Clean Crisp White Background Sections (remo-section & cream-video-section) ========================================================================= */ .remo-section { background: #ffffff !important; color: #0f172a !important; border-top: 1px solid #f1f5f9 !important; border-bottom: 1px solid #e2e8f0 !important; } .remo-section .remo-badge { background: #ffffff !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important; } .remo-section .remo-header h2 { color: #0f172a !important; } .remo-section .remo-header p { color: #475569 !important; } .remo-section .remo-btn-dark { background: #0f172a !important; color: #ffffff !important; border: none !important; backdrop-filter: none !important; } .remo-section .remo-btn-dark:hover { background: #e63946 !important; color: #ffffff !important; box-shadow: 0 8px 22px rgba(230, 57, 70, 0.35) !important; } .remo-section .remo-card { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; backdrop-filter: none !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important, box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important, border-color 0.4s ease !important, background 0.4s ease !important; } .remo-section .remo-card:hover { transform: translateY(-10px) !important; background: #ffffff !important; border-color: #e63946 !important; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12) !important; } .remo-section .remo-card h3, .clean-card h3 { color: #0f172a !important; } .remo-section .remo-card .card-icon { color: #0f172a !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important, color 0.3s ease !important; } .remo-section .remo-card:hover .card-icon { transform: scale(1.15) translateY(-3px) !important; color: #e63946 !important; } .remo-section .remo-card .card-icon svg { stroke: #0f172a !important; transition: stroke 0.3s ease !important; } .remo-section .remo-card:hover .card-icon svg { stroke: #e63946 !important; } .remo-section .remo-card .remo-card-sub { color: #e63946 !important; font-weight: 700 !important; } .remo-section .remo-card p { color: #475569 !important; } /* Cream Video Section (Promotional Video) White Background */ .cream-video-section { background: #f8fafc !important; color: #0f172a !important; border-top: 1px solid #e2e8f0 !important; border-bottom: none !important; } .cream-video-section .clean-pill-badge, .clean-pill-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 18px !important; border-radius: 50px !important; background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; margin-bottom: 14px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important; } .cream-video-section .cream-title { color: #0f172a !important; } .cream-video-section .btn-dark-pill { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; font-weight: 700 !important; padding: 10px 22px !important; border-radius: 50px !important; text-decoration: none !important; transition: all 0.3s ease !important; } .cream-video-section .btn-dark-pill:hover { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; } /* Main Video Popup Footer Bar Bold & Bright Text Enhancement */ .popup-footer-bar { background: #000000 !important; padding: 16px 22px !important; } .footer-left label { cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; color: #ffffff !important; font-weight: 400 !important; font-size: 0.78rem !important; letter-spacing: -0.2px !important; -webkit-font-smoothing: antialiased !important; } .footer-center button, .footer-right button, .popup-close-text { background: transparent !important; border: none !important; color: #ffffff !important; font-size: 0.88rem !important; font-weight: 400 !important; letter-spacing: 0.8px !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; transition: color 0.3s ease !important; -webkit-font-smoothing: antialiased !important; } .footer-center button:hover, .footer-right button:hover, .popup-close-text:hover { color: #e63946 !important; } /* Footer CTA Refined (Deep Dark Luxury Glassmorphism Theme) */ .footer-cta-section { background: #08090c !important; color: #ffffff !important; padding: 5.5rem 2rem 6rem !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; border-bottom: none !important; flex: 1; display: flex; flex-direction: column; justify-content: center; } .footer-cta-header { text-align: center !important; margin-bottom: 3.5rem !important; } .footer-cta-header .red-motto-badge, .footer-cta-header .gold-motto-badge { display: inline-block !important; font-size: 0.78rem !important; font-weight: 800 !important; letter-spacing: 2px !important; color: #e63946 !important; background: rgba(230, 57, 70, 0.1) !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; padding: 6px 20px !important; border-radius: 50px !important; margin-bottom: 0.8rem !important; text-transform: uppercase !important; } .footer-cta-title { font-size: 2.2rem !important; font-weight: 600 !important; color: #ffffff !important; letter-spacing: -0.5px !important; margin: 0 !important; } .footer-cta-card { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; border-radius: 20px !important; padding: 2.5rem 2rem !important; backdrop-filter: blur(16px) !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .footer-cta-card:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.4) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important; transform: translateY(-8px) !important; } .footer-cta-icon-box { width: 54px !important; height: 54px !important; border-radius: 16px !important; background: rgba(230, 57, 70, 0.1) !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; color: #e63946 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 1.4rem !important; transition: all 0.3s ease !important; } .footer-cta-card:hover .footer-cta-icon-box { background: #e63946 !important; border-color: #e63946 !important; color: #ffffff !important; transform: scale(1.08) !important; } .footer-cta-card h4 { color: #ffffff !important; font-weight: 800 !important; font-size: 1.35rem !important; margin-bottom: -2px !important; } .footer-cta-card .cta-desc { color: #d3d3d3 !important; font-size: 0.94rem !important; margin-bottom: 24px !important; } .footer-cta-btn { background: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; font-weight: 700 !important; font-size: 0.88rem !important; padding: 12px 28px !important; border-radius: 50px !important; text-decoration: none !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .footer-cta-card:hover .footer-cta-btn { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; box-shadow: 0 6px 20px rgba(230, 57, 70, 0.4) !important; } /* Fix donut chart SVG drop-shadow & blur clipping */ .donut-svg-wrapper, .donut-chart, .install-stat-col .donut-chart, .install-stat-col .donut-chart-box { overflow: visible !important; } /* --- GLOBAL UDR LUXURY REDESIGN --- */ .premium-motto-badge { display: inline-block !important; padding: 6px 16px !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 50px !important; color: #ffffff !important; font-size: 0.75rem !important; letter-spacing: 2px !important; margin-bottom: 24px !important; font-weight: 600 !important; } .install-cinematic-title { font-size: 4.2rem !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #ffffff !important; } .install-cinematic-subtitle { font-weight: 400 !important; color: rgba(255,255,255,0.8) !important; } .install-cinematic-subtitle .highlight-total { font-weight: 500 !important; color: #ffffff !important; } /* Glassmorphism / Matte Cards (Targeting the whole column, not the donut box) */ .install-stat-col { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 24px !important; box-shadow: 0 20px 40px rgba(0,0,0,0.2) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; padding: 40px 50px !important; min-width: 460px !important; justify-content: center !important; gap: 3rem !important; } /* Reset inner donut box to be transparent */ .install-stat-col .donut-chart-box, .installation-cinematic-section.is-active .install-stat-col:nth-child(1) .donut-chart-box, .installation-cinematic-section.is-active .install-stat-col:nth-child(2) .donut-chart-box { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Elegant Thick SVG */ .install-stat-col .donut-bg { stroke: rgba(255,255,255,0.08) !important; stroke-width: 8px !important; } .install-stat-col .donut-segment { stroke-width: 8px !important; filter: none !important; /* Remove muddy glows */ } .install-stat-col .segment-overseas { stroke: #ffffff !important; } .install-stat-col .segment-domestic { stroke: rgba(255,255,255,0.4) !important; } /* Clean Typography inside donut */ .install-stat-col .center-ratio { font-size: 2.6rem !important; font-weight: 700 !important; color: #ffffff !important; text-shadow: none !important; letter-spacing: -1px !important; } .install-stat-col .center-label { font-weight: 500 !important; color: rgba(255,255,255,0.6) !important; letter-spacing: 1px !important; } /* Redesigned Stat Badges & Numbers */ .install-stat-col .stat-info { margin-top: 16px !important; align-items: center !important; text-align: center !important; } .install-stat-col .stat-badge { background: transparent !important; border: 1px solid rgba(255,255,255,0.3) !important; color: rgba(255,255,255,0.8) !important; font-weight: 600 !important; letter-spacing: 1.5px !important; border-radius: 4px !important; padding: 6px 14px !important; } .install-stat-col .stat-title { font-size: 1.25rem !important; font-weight: 600 !important; color: rgba(255,255,255,0.95) !important; margin-top: 20px !important; margin-bottom: -2px !important; } .install-stat-col .stat-count { font-size: 3rem !important; font-weight: 700 !important; color: #ffffff !important; margin-top: 0 !important; letter-spacing: -1px !important; } .install-stat-col .stat-count .unit { font-size: 1.2rem !important; font-weight: 500 !important; color: rgba(255,255,255,0.6) !important; margin-left: 8px !important; } .bar-fill.domestic-fill { background-color: #e63946 !important; } /* Store Page: North America single line & Korea Gray Tone Hotspot */ .region-card h5, .tooltip-header h4, .tooltip-count { white-space: nowrap !important; } .map-tooltip { min-width: 160px !important; width: auto !important; } .map-hotspot-pos-1 { top: 38%; left: 81.5%; } .map-hotspot-pos-2 { top: 40%; left: 74%; } .map-hotspot-pos-3 { top: 36%; left: 86%; } .map-hotspot-pos-4 { top: 32%; left: 24%; } .map-hotspot-pos-5 { top: 56%; left: 77%; } .map-hotspot-pos-6 { top: 30%; left: 52%; } .map-hotspot-pos-1 .map-pin-dot { background: #94a3b8 !important; border-color: #ffffff !important; box-shadow: 0 0 14px #94a3b8 !important; } .map-hotspot-pos-1 .map-pin-pulse { background: rgba(148, 163, 184, 0.4) !important; } .map-hotspot-pos-1:hover .map-pin-dot { background: #cbd5e1 !important; box-shadow: 0 0 20px #94a3b8 !important; } /* Premium High-Tech World Map & Metric Cards Redesign */ .interactive-world-map-wrapper { background: radial-gradient(circle at 50% 40%, #151f32 0%, #060911 100%) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 28px !important; box-shadow: 0 35px 80px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; overflow: hidden !important; position: relative !important; } .world-map-bg { opacity: 0.55 !important; background-size: cover !important; background-position: center !important; filter: brightness(1.25) contrast(1.2) drop-shadow(0 0 20px rgba(230, 57, 70, 0.15)) !important; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.15) 98%) !important; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.15) 98%) !important; } /* Tooltip overrides removed for cleaner design */ .tooltip-tag { background: rgba(230, 57, 70, 0.15) !important; color: #ff4d5a !important; border: 1px solid rgba(230, 57, 70, 0.4) !important; white-space: nowrap !important; } /* Sleek Bento Glassmorphism Metric Cards at Bottom -> Premium Glass Panel */ .region-cards-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; align-items: center !important; margin-top: 3.5rem !important; padding: 1.8rem 0 !important; background: rgba(255, 255, 255, 0.015) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 20px !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; position: relative !important; overflow: hidden !important; } .region-cards-grid::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(230, 57, 70, 0.6), transparent) !important; } .region-card { text-align: center !important; padding: 0 1rem !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; cursor: pointer !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; transform: translateZ(0); } .region-card:last-child { border-right: none !important; } .region-card:hover { transform: translateY(-4px) translateZ(0) !important; background: transparent !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: none !important; } .region-card:hover .region-val { text-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important; } .region-card:hover .region-val span { text-shadow: 0 0 15px rgba(230, 57, 70, 0.5) !important; } .region-card h5 { color: rgba(255, 255, 255, 0.55) !important; font-size: 0.76rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; margin: 0 0 10px 0 !important; white-space: nowrap !important; } .region-val { color: #ffffff !important; font-size: 1.95rem !important; font-weight: 800 !important; letter-spacing: -0.5px !important; transition: text-shadow 0.3s ease !important; white-space: nowrap !important; } .region-val span { font-size: 0.82rem !important; font-weight: 600 !important; color: #e63946 !important; margin-left: 3px !important; transition: text-shadow 0.3s ease !important; } @media (max-width: 991px) { .region-cards-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem 0 !important; padding: 2rem 0 !important; } .region-card:nth-child(3n) { border-right: none !important; } } @media (max-width: 767px) { html body .hero-ticker-wrap { display: none !important; } .region-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem 0 !important; } .region-card:nth-child(3n) { border-right: 1px solid rgba(255, 255, 255, 0.06) !important; } .region-card:nth-child(2n) { border-right: none !important; } } .hide-on-desktop { display: none !important; } @media (max-width: 1024px) { .cream-header { flex-direction: row !important; align-items: flex-end !important; gap: 12px !important; margin-bottom: 24px !important; } .cream-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; white-space: nowrap !important; letter-spacing: -0.5px !important; } .cream-header .cream-title { margin: 0 !important; line-height: 1 !important; } /* Mobile spacing adjustments for cream-video-section */ .cream-video-section { padding: 50px 0 60px !important; } .cream-container { padding: 0 48px !important; } /* Mobile spacing adjustments for remo-section */ .remo-section { padding: 50px 0 60px !important; } .remo-header { margin-bottom: 32px !important; } .remo-badge { margin-bottom: 12px !important; } .remo-header h2 { margin-bottom: 12px !important; font-size: 28px !important; } .remo-header p { margin-bottom: 20px !important; font-size: 14px !important; } /* Mobile card padding reduction & horizontal layout (1?????????????????????????????????????? */ .remo-cards-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .clean-cards-grid { grid-template-columns: repeat(3, 1fr); gap: 8px !important; } .remo-card, .app-card, .clean-card, .feature-card { padding: 16px 8px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .remo-card h3, .clean-card h3 { font-size: clamp(0.7rem, 2.8vw, 0.95rem) !important; margin-bottom: 0 !important; word-break: keep-all !important; } .remo-card .card-icon { margin-bottom: -2px !important; } .remo-card .card-icon svg { width: 24px !important; height: 24px !important; } /* ?????????????????????????????????????????????????占쏙┼?? ???????????????占썩닪占????????????????????????占쏙┼???????????????? */ .remo-card .remo-card-sub, .remo-card p, .clean-card p { display: none !important; } .install-stat-col { /* overridden below */ } /* Mobile CTA Card spacing reduction & horizontal layout (1??????????????????? */ .footer-cta-section { padding: 3rem 1.5rem !important; } .sub-footer-cta-section { padding: 2rem 1.5rem !important; } .footer-cta-header { margin-bottom: 1.5rem !important; } .footer-cta-header .red-motto-badge, .footer-cta-header .gold-motto-badge { margin-bottom: 0.4rem !important; } .footer-cta-title { font-size: clamp(1.4rem, 5vw, 1.8rem) !important; white-space: nowrap !important; letter-spacing: -0.5px !important; } .footer-cta-grid, .sub-footer-cta-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.5rem !important; } .footer-cta-card, .sub-footer-cta-card { padding: 16px 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .footer-cta-card .footer-cta-icon-box { display: none !important; } .footer-cta-card h4, .sub-cta-title { font-size: clamp(0.7rem, 3.2vw, 1rem) !important; margin-bottom: -2px !important; white-space: nowrap !important; text-align: center !important; } .footer-cta-card .cta-desc, .sub-cta-desc { display: none !important; } .footer-cta-card .footer-cta-btn, .sub-footer-cta-btn { padding: 6px 12px !important; font-size: clamp(0.55rem, 2.4vw, 0.8rem) !important; white-space: nowrap !important; width: auto !important; text-align: center !important; display: inline-block !important; letter-spacing: -0.5px !important; } /* Mobile GLOBAL UDR spacing & horizontal layout */ .install-cinematic-header { margin-bottom: 20px !important; } .install-cinematic-header .install-cinematic-title { font-size: 2.5rem !important; margin: 4px 0 8px !important; line-height: 1.1 !important; } .install-cinematic-subtitle { margin-top: 0 !important; font-size: clamp(0.75rem, 3.3vw, 0.95rem) !important; white-space: nowrap !important; letter-spacing: -0.5px !important; } .install-cinematic-subtitle .highlight-total { font-size: clamp(1.1rem, 4.5vw, 1.3rem) !important; } .install-cinematic-grid { flex-direction: row !important; gap: 12px !important; } .install-stat-col { padding: 24px 10px !important; flex: 1; min-width: 0 !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0 !important; gap: 0 !important; } .install-stat-col .donut-chart-box { width: 100px !important; height: 100px !important; } .install-stat-col .stat-info { margin-top: 16px !important; } .install-stat-col .center-ratio { font-size: 1.3rem !important; } .install-stat-col .center-label { display: none !important; } .install-stat-col .stat-badge { font-size: 0.6rem !important; padding: 0.25rem 0.5rem !important; margin-bottom: 12px !important; } .install-stat-col .stat-title { font-size: 0.85rem !important; margin: 0 0 6px !important; color: rgba(255, 255, 255, 0.7) !important; } .install-stat-col .stat-count { font-size: 1.35rem !important; line-height: 1 !important; margin-top: 4px !important; } .cream-video-section .btn-dark-pill { font-size: 11px !important; padding: 8px 16px !important; white-space: nowrap !important; } .mobile-nowrap { white-space: normal !important; word-break: keep-all; line-height: 1.4; font-size: clamp(0.8rem, 3.5vw, 0.95rem) !important; letter-spacing: -0.5px !important; } .hide-on-mobile { display: none !important; } .hide-on-desktop { display: inline-block !important; } /* Map layout and popup fixes for mobile */ .interactive-world-map-wrapper { min-height: auto !important; border-radius: 16px !important; overflow: visible !important; } .map-tooltip { min-width: 120px !important; padding: 10px 12px !important; } .tooltip-header h4 { font-size: 0.8rem !important; } .tooltip-count strong { font-size: 1.1rem !important; } .tooltip-count small { font-size: 0.7rem !important; } /* Fix pointer-events so tooltips never block touch/click on nearby pins */ .map-tooltip, .map-hotspot:hover .map-tooltip, .map-hotspot.active .map-tooltip { pointer-events: none !important; } /* Korea tooltip shifts left towards China */ .map-hotspot-pos-1 .map-tooltip { transform: translateX(-75%) scale(0.85) !important; } .map-hotspot-pos-1:hover .map-tooltip, .map-hotspot-pos-1.active .map-tooltip { transform: translateX(-75%) scale(1) !important; } .map-hotspot-pos-1 .map-tooltip::after { left: 75% !important; } /* Japan tooltip shifts right towards map edge */ .map-hotspot-pos-3 .map-tooltip { transform: translateX(-35%) scale(0.85) !important; } .map-hotspot-pos-3:hover .map-tooltip, .map-hotspot-pos-3.active .map-tooltip { transform: translateX(-35%) scale(1) !important; } .map-hotspot-pos-3 .map-tooltip::after { left: 35% !important; } /* Mobile header logo visibility on scroll */ .header .logo img, .header.scrolled .logo img { /* removed to keep colored logo */ } .header.menu-open, .header.menu-open.scrolled { background: #ffffff !important; } .header.menu-open .logo img, .header.menu-open.scrolled .logo img { /* removed to keep colored logo */ } .header.menu-open .mobile-menu-toggle span, .header.menu-open.scrolled .mobile-menu-toggle span { background: #000000 !important; } } /* ===================================================== PROD PAGE MOBILE GLOBAL FIXES (max-width: 767px) Applies to: prod/ai, prod/udr, prod/spro, prod/sclassic, prod/shot, prod/member, prod/Indiantv (and eng equivalents) ===================================================== */ @media (max-width: 767px) { html body .hero-ticker-wrap { display: none !important; } /* Prevent horizontal overflow without creating scroll containers */ section, .p-feature-section, .p-container { max-width: 100% !important; } /* ---- Grid layouts with fixed minmax ??force 1 column ---- */ .grid-fit-280 { grid-template-columns: 1fr !important; } .grid-fit-300 { grid-template-columns: 1fr !important; } .grid-card-300 { height: 240px !important; } /* ---- Split rows: always single column on mobile ---- */ .p-split-row, .p-split-row.reverse, .split-grid-sclassic { grid-template-columns: 1fr !important; gap: 2rem !important; } /* ---- p-premium-split: stack vertically ---- */ .p-premium-split { flex-direction: column !important; gap: 2rem !important; } .p-premium-split > div, .p-premium-split > div:first-child { flex: none !important; width: 100% !important; min-width: 0 !important; } /* ---- pill text: always wrap ---- */ .text-nowrap-tight, .text-lh-14 { white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* ---- Heading font sizes ---- */ .p-feature-title, .feature-title-clamp, .title-clamp-lg, .title-clamp-md { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* ---- p-container padding ---- */ .p-container { padding-left: 1.2rem !important; padding-right: 1.2rem !important; } /* ---- p-bento-grid: single column ---- */ .p-bento-grid { grid-template-columns: 1fr !important; } /* ---- section padding reduction ---- */ .py-6rem { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-4rem { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-statement-custom { padding-top: 3rem !important; padding-bottom: 2rem !important; } .mt-5rem { margin-top: 2.5rem !important; } .mt-2rem { margin-top: 1rem !important; } } /* ===================================================== SW-SUBNAV: Mobile horizontal swipe scroll Allows users to swipe left/right to reach all menu items ===================================================== */ @media screen and (max-width: 1024px) { .sw-hero-title { font-size: 2.2rem; } .sw-hero-desc { font-size: .95rem; } .sw-snav { padding: 14px 12px; font-size: .82rem; } .sw-subnav { top: 68px; } /* Make inner nav scrollable horizontally ??no wrap */ .sw-subnav-inner { padding: 0 8px !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; /* Hide scrollbar visually but keep it functional */ scrollbar-width: none !important; } .sw-subnav-inner::-webkit-scrollbar { display: none !important; } .sw-subnav-scrollbar-track { width: calc(100% - 16px) !important; margin: 0 auto 6px auto !important; } /* Each tab stays on one line and doesn't shrink */ .sw-snav { flex-shrink: 0 !important; white-space: nowrap !important; scroll-snap-align: start; padding: 13px 14px !important; } } /* ===================================================== MOBILE MENU OPEN HEADER SCROLLED OVERRIDES Guarantees header stays white and icons stay visible (dark) even if the page is scrolled when the menu drawer is opened. ===================================================== */ .header.menu-open, .header.menu-open.scrolled { background: #ffffff !important; } .header.menu-open .logo img, .header.menu-open.scrolled .logo img { /* removed to keep colored logo */ } .header.menu-open .mobile-menu-toggle span, .header.menu-open.scrolled .mobile-menu-toggle span { background: #000000 !important; } .header.menu-open .header-utils a, .header.menu-open.scrolled .header-utils a { color: #333333 !important; } .header.menu-open .header-utils a.active, .header.menu-open.scrolled .header-utils a.active { color: #e63946 !important; } /* ===================================================== Partner Link Bar: Mobile Responsive Optimization ===================================================== */ @media screen and (max-width: 768px) { .partner-link-bar { flex-direction: column !important; align-items: stretch !important; text-align: center !important; padding: 1.5rem 1.2rem !important; gap: 1.2rem !important; } .partner-link-left { flex-direction: column !important; align-items: center !important; gap: 0.8rem !important; } .partner-link-left .text-left, .partner-link-left > div { text-align: center !important; } .partner-link-left h4 { font-size: 1.05rem !important; margin-bottom: 0.3rem !important; } .partner-link-left p { font-size: 0.8rem !important; line-height: 1.45 !important; } /* Mobile header logo visibility on scroll */ .header .logo img, .header.scrolled .logo img { /* removed to keep colored logo */ } .header.menu-open, .header.menu-open.scrolled { background: #ffffff !important; } .header.menu-open .logo img, .header.menu-open.scrolled .logo img { /* removed to keep colored logo */ } .header.menu-open .mobile-menu-toggle span, .header.menu-open.scrolled .mobile-menu-toggle span { background: #000000 !important; } } /* ===================================================== PROD PAGE MOBILE GLOBAL FIXES (max-width: 767px) Applies to: prod/ai, prod/udr, prod/spro, prod/sclassic, prod/shot, prod/member, prod/Indiantv (and eng equivalents) ===================================================== */ @media (max-width: 767px) { html body .hero-ticker-wrap { display: none !important; } /* Prevent horizontal overflow without creating scroll containers */ section, .p-feature-section, .p-container { max-width: 100% !important; } /* ---- Grid layouts with fixed minmax ??force 1 column ---- */ .grid-fit-280 { grid-template-columns: 1fr !important; } .grid-fit-300 { grid-template-columns: 1fr !important; } .grid-card-300 { height: 240px !important; } /* ---- Split rows: always single column on mobile ---- */ .p-split-row, .p-split-row.reverse, .split-grid-sclassic { grid-template-columns: 1fr !important; gap: 2rem !important; } /* ---- p-premium-split: stack vertically ---- */ .p-premium-split { flex-direction: column !important; gap: 2rem !important; } .p-premium-split > div, .p-premium-split > div:first-child { flex: none !important; width: 100% !important; min-width: 0 !important; } /* ---- pill text: always wrap ---- */ .text-nowrap-tight, .text-lh-14 { white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; } /* ---- Heading font sizes ---- */ .p-feature-title, .feature-title-clamp, .title-clamp-lg, .title-clamp-md { font-size: clamp(1.2rem, 5vw, 1.8rem) !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* ---- p-container padding ---- */ .p-container { padding-left: 1.2rem !important; padding-right: 1.2rem !important; } /* ---- p-bento-grid: single column ---- */ .p-bento-grid { grid-template-columns: 1fr !important; } /* ---- section padding reduction ---- */ .py-6rem { padding-top: 3rem !important; padding-bottom: 3rem !important; } .py-4rem { padding-top: 2rem !important; padding-bottom: 2rem !important; } .py-statement-custom { padding-top: 3rem !important; padding-bottom: 2rem !important; } .mt-5rem { margin-top: 2.5rem !important; } .mt-2rem { margin-top: 1rem !important; } } /* ===================================================== SW-SUBNAV: Mobile horizontal swipe scroll Allows users to swipe left/right to reach all menu items ===================================================== */ @media screen and (max-width: 1024px) { .sw-hero-title { font-size: 2.2rem; } .sw-hero-desc { font-size: .95rem; } .sw-snav { padding: 14px 12px; font-size: .82rem; } .sw-subnav { top: 68px; } /* Make inner nav scrollable horizontally ??no wrap */ .sw-subnav-inner { padding: 0 8px !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; /* Hide scrollbar visually but keep it functional */ scrollbar-width: none !important; } .sw-subnav-inner::-webkit-scrollbar { display: none !important; } .sw-subnav-scrollbar-track { width: calc(100% - 16px) !important; margin: 0 auto 6px auto !important; } /* Each tab stays on one line and doesn't shrink */ .sw-snav { flex-shrink: 0 !important; white-space: nowrap !important; scroll-snap-align: start; padding: 13px 14px !important; } } /* ===================================================== MOBILE MENU OPEN HEADER SCROLLED OVERRIDES Guarantees header stays white and icons stay visible (dark) even if the page is scrolled when the menu drawer is opened. ===================================================== */ .header.menu-open, .header.menu-open.scrolled { background: #ffffff !important; } .header.menu-open .logo img, .header.menu-open.scrolled .logo img { /* removed to keep colored logo */ } .header.menu-open .mobile-menu-toggle span, .header.menu-open.scrolled .mobile-menu-toggle span { background: #000000 !important; } .header.menu-open .header-utils a, .header.menu-open.scrolled .header-utils a { color: #333333 !important; } .header.menu-open .header-utils a.active, .header.menu-open.scrolled .header-utils a.active { color: #e63946 !important; } /* ===================================================== Responsive Fixes for Footer (Added) ===================================================== */ @media screen and (max-width: 768px) { .footer { padding: 2rem 1.5rem 1.5rem 1.5rem; } } /* ===================================================== Partner Link Bar: Mobile Responsive Optimization ===================================================== */ @media screen and (max-width: 768px) { .partner-link-bar { flex-direction: column !important; align-items: stretch !important; text-align: center !important; padding: 1.5rem 1.2rem !important; gap: 1.2rem !important; } .partner-link-left { flex-direction: column !important; align-items: center !important; gap: 0.8rem !important; } .partner-link-left .text-left, .partner-link-left > div { text-align: center !important; } .partner-link-left h4 { font-size: 1.05rem !important; margin-bottom: 0.3rem !important; } .partner-link-left p { font-size: 0.8rem !important; line-height: 1.45 !important; } .partner-link-bar a.partner-link-btn, .partner-link-bar a.partner-btn { width: 100% !important; text-align: center !important; justify-content: center !important; padding: 10px 0 !important; margin: 0 !important; } } /* Sticky Split Layout for Core Tech Section (White Theme) */ @media screen and (min-width: 1024px) { .core-tech-section .remo-container { display: flex; align-items: flex-start; gap: 4rem; max-width: 1400px; margin: 0 auto; } .core-tech-section .remo-header { text-align: left; flex: 0 0 40%; position: sticky; top: 15vh; /* Sticks to the screen */ padding-bottom: 2rem; } .core-tech-section .remo-header p { margin: 1.5rem 0 2rem; } .core-tech-section .remo-cards-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media screen and (max-width: 1023px) { .core-tech-section .remo-header { text-align: left; margin-bottom: 3rem; } } /* Red Pen Highlight Effect */ .red-pen-highlight { position: relative; display: inline-block; z-index: 1; font-weight: 800; } .products-cinematic-showcase { position: relative; width: 100%; height: 100dvh; background: #000; overflow: hidden; background-size: cover; background-position: center; } .red-pen-highlight::after { content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 12px; background-color: #ff3b3b; z-index: -1; border-radius: 3px; transform: scaleX(0); transform-origin: left; animation: drawHighlight 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; animation-delay: 0.5s; opacity: 0.8; } @keyframes drawHighlight { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .footer-wrapper { height: auto !important; display: flex !important; flex-direction: column !important; scroll-snap-align: stretch; box-sizing: border-box !important; overflow: visible !important; } .footer-cta-section, .sub-footer-cta-section { flex: none !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; min-height: 0 !important; padding: 3rem 2rem !important; } /* Full height for sections from products to bottom */ .products-cinematic-showcase, .cinematic-video-section, .remo-section, .installation-cinematic-section, .cream-video-section, #ecosystem , #ecosystem-2 { height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; box-sizing: border-box !important; margin: 0 !important; display: flex !important; flex-direction: column; justify-content: center; scroll-snap-align: start; } /* ========================================== Extracted Inline Styles from index.html ========================================== */ .vc-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; } .flex-spacer { flex: 1; } .sw-hero { position: relative; background: #050505; overflow: hidden; text-align: center; padding: 90px 20px 40px; min-height: 160px; display: flex; align-items: center; justify-content: center; } /* Scroll Zoom Section - High End Cinematic Motion */ #scroll-zoom { height: 200vh; position: relative; background: #000; } #zoom-sticky { position: sticky; top: 0; height: 100dvh; width: 100vw; overflow: hidden; will-change: opacity; } #horizontal-list { display: flex; width: 200vw; height: 100dvh; will-change: transform; } .scroll-item { width: 100vw; height: 100dvh; position: relative; flex-shrink: 0; overflow: hidden; } .scroll-item img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: filter 0.5s ease; filter: none !important; /* Remove dark overlay/shadow from photo completely */ } #first-img, #second-img { will-change: transform; } .cinematic-vignette-overlay { position: absolute; inset: 0; background: transparent !important; /* Remove dark shadow overlay completely */ pointer-events: none; z-index: 1; } .text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 90%; max-width: 680px; padding: 40px 48px !important; opacity: 0; z-index: 2; will-change: transform, opacity, filter; display: flex; flex-direction: column; align-items: center; background: rgba(10, 15, 24, 0.68) !important; /* Translucent glass background card */ backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(212, 175, 55, 0.25) !important; /* Elegant gold border */ border-radius: 28px !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45) !important; } .text-overlay .zoom-badge { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 7px 22px; border: 1px solid rgba(212, 175, 55, 0.45); border-radius: 50px; color: #dfba6b; font-size: 0.78rem; font-weight: 700; letter-spacing: 4px; margin-bottom: 22px; background: rgba(212, 175, 55, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); text-transform: uppercase; } .text-overlay h2.zoom-heading { font-family: 'Pretendard', -apple-system, sans-serif !important; font-size: clamp(2.8rem, 6vw, 5.2rem) !important; margin-bottom: 18px !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -1.5px; color: #ffffff; word-break: keep-all; word-wrap: break-word; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.5) !important; } .text-overlay h2.zoom-heading .gold-highlight { font-family: 'Pretendard', -apple-system, sans-serif !important; background: linear-gradient(135deg, #FFF0D0 0%, #D4AF37 50%, #B38F24 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: #D4AF37 !important; filter: drop-shadow(0 2px 15px rgba(212, 175, 55, 0.35)); text-shadow: none !important; font-weight: 900; display: inline-block; white-space: nowrap; } .text-overlay p.zoom-desc { font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.95) !important; letter-spacing: -0.5px; line-height: 1.6 !important; border-left: none; padding-left: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85) !important; margin-bottom: 24px !important; word-break: keep-all; } /* Scroll Hint Line Animation */ .scroll-hint-indicator { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 15px; opacity: 0.8; } .scroll-hint-indicator span { font-size: 0.75rem; letter-spacing: 2px; color: #dfba6b; font-weight: 600; } .scroll-hint-line { width: 2px; height: 35px; background: linear-gradient(to bottom, #D4AF37, transparent); animation: scrollLinePulse 2s infinite ease-in-out; } @keyframes scrollLinePulse { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform: scaleY(1); transform-origin: bottom; } 100% {transform: scaleY(0); transform-origin: bottom; } } @media screen and (max-width: 768px) { .history-section { padding: 40px 16px 40px 20px !important; } .timeline-row { margin-bottom: 28px !important; } .timeline-row:last-child { margin-bottom: 0 !important; } .timeline-list-wrap { padding-left: 24px !important; } .timeline-line { left: 10px !important; } .timeline-year-label { font-size: 1.5rem !important; margin-bottom: 14px !important; } .timeline-year-label::before { left: -21px !important; } .timeline-desc { padding: 16px 14px !important; margin-right: 16px !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important; } .timeline-row:hover .timeline-desc { transform: none !important; } .timeline-desc li { font-size: 0.88rem !important; padding-left: 16px !important; margin-bottom: 10px !important; line-height: 1.5 !important; word-break: keep-all !important; overflow-wrap: break-word !important; } .timeline-desc li::before { top: 9px !important; } } /* Tablet Responsive Optimization for Zoom Overlay */ @media screen and (max-width: 1024px) { .text-overlay { padding: 30px 36px !important; max-width: 540px !important; border-radius: 24px !important; width: 90% !important; } .text-overlay .zoom-badge { font-size: 0.72rem !important; letter-spacing: 3px !important; padding: 6px 18px !important; margin-bottom: 16px !important; } .text-overlay h2.zoom-heading { font-size: clamp(2.4rem, 5vw, 3.4rem) !important; margin-bottom: 14px !important; letter-spacing: -1px !important; line-height: 1.22 !important; } .text-overlay p.zoom-desc { font-size: clamp(1.0rem, 1.6vw, 1.2rem) !important; line-height: 1.55 !important; margin-bottom: 18px !important; } .scroll-hint-indicator { margin-top: 12px !important; } .scroll-hint-line { height: 28px !important; } } /* Mobile Responsive Optimization for Zoom Overlay */ @media screen and (max-width: 576px) { .text-overlay { padding: 24px 20px !important; max-width: 90% !important; border-radius: 20px !important; width: 90% !important; } .text-overlay .zoom-badge { font-size: 0.65rem !important; letter-spacing: 2px !important; padding: 4px 12px !important; margin-bottom: 10px !important; } .text-overlay h2.zoom-heading { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; margin-bottom: 10px !important; letter-spacing: -0.6px !important; line-height: 1.25 !important; } .text-overlay p.zoom-desc { font-size: 0.9rem !important; line-height: 1.5 !important; margin-bottom: 12px !important; } .scroll-hint-indicator { margin-top: 8px !important; } .scroll-hint-line { height: 20px !important; } } /* Ecosystem Section Link & Card */ .ecosystem-link { text-decoration: none; color: inherit; display: block; } .ecosystem-link .modern-card { cursor: pointer; } /* ========================================== Premium Dark Bento Grid Section ========================================== */ .premium-tech-section { background: #0b1521; padding: 120px 0; position: relative; overflow: hidden; } /* Glow behind the section */ .premium-tech-section::before { content: ''; position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 60%); pointer-events: none; z-index: 0; } .sub-footer-cta-container { max-width: 100%; margin: 0 auto; padding: 0 1.5rem; box-sizing: border-box; } .tech-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } .tech-header { margin-bottom: 60px; } .text-gradient-gold { background: linear-gradient(135deg, #d4af37, #f3e5ab); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .hyper-bento-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; padding: 40px 30px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* JS Mouse Glow Effect (handled via --mouse-x, --mouse-y from script.js) */ .hyper-bento-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(230, 57, 70, 0.06), transparent 40%); opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: 0; } .hyper-bento-card:hover { transform: translateY(-12px); background: rgba(255, 255, 255, 0.05); border-color: rgba(212, 175, 55, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(230, 57, 70, 0.06); } .hyper-bento-card:hover::before { opacity: 1; } .bento-content { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } .bento-header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 25px; } .bento-icon-wrapper { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05)); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #e63946; border: 1px solid rgba(212, 175, 55, 0.3); margin-bottom: 20px; } .bento-badge { background: rgba(230, 57, 70, 0.06); color: #e63946; padding: 6px 14px; border-radius: 30px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; border: 1px solid rgba(212, 175, 55, 0.3); } .bento-title { font-size: 1.4rem; font-weight: 700; color: #fff; margin-bottom: 16px; font-family: var(--font-heading); line-height: 1.3; } .bento-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.65); line-height: 1.6; margin-bottom: 30px; flex-grow: 1; } .bento-cta { color: #e63946; font-weight: 600; text-decoration: none; font-size: 0.95rem; display: inline-flex; align-items: center; transition: opacity 0.3s ease; margin-top: auto; } .bento-cta:hover { opacity: 0.8; } @media screen and (max-width: 1200px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 768px) { .bento-grid { grid-template-columns: 1fr; } } /* ========================================================================= AETERNA High-End 3D Cinematic Tech Section ========================================================================= */ .premium-tech-section { padding: 120px 0; background: #000000; position: relative; overflow: hidden; font-family: var(--font-body); } .premium-tech-section::before { content: ''; position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 70%); z-index: 0; pointer-events: none; } .premium-tech-container { max-width: 1400px; margin: 0 auto; padding: 0 4rem; position: relative; z-index: 1; } .premium-tech-header { margin-bottom: 4rem; text-align: left; } .premium-tech-header .gold-motto-badge { display: inline-block; padding: 8px 22px; border: 1px solid rgba(255, 59, 48, 0.3); border-radius: 30px; color: #ff3b30; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 25px; background: rgba(255, 59, 48, 0.06); text-transform: uppercase; } .premium-tech-title { font-size: 3.5rem; font-weight: 800; color: #ffffff !important; font-family: var(--font-heading); margin-bottom: 1.5rem; line-height: 1.1; } .premium-tech-title .gold-highlight { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(255, 59, 48, 0.25); } .premium-tech-desc { color: rgba(255, 255, 255, 0.6) !important; font-size: 1.15rem; line-height: 1.7; margin-bottom: 2.5rem; } .premium-tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; } .premium-glass-card { background: linear-gradient(145deg, rgba(30, 30, 30, 0.4) 0%, rgba(10, 10, 10, 0.6) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 40px 30px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1); cursor: pointer; } .vc-icon-play::before { content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.22 4.1C5.55 3.65 4.5 4.13 4.5 5v14c0 .87 1.05 1.35 1.72.9l11.83-7c.65-.39.65-1.41 0-1.8L6.22 4.1z'/%3E%3C/svg%3E"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; } .vc-icon-mute::before { content: ''; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-full::before { content: ''; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cpolyline points='9 21 3 21 3 15'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3Cline x1='3' y1='21' x2='10' y2='14'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .vc-icon-exit::before { content: ''; display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='10' y1='14' x2='3' y2='21'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 14 10 14 10 20'/%3E%3Cpolyline points='20 10 14 10 14 4'/%3E%3Cline x1='10' y1='14' x2='3' y2='21'/%3E%3Cline x1='21' y1='3' x2='14' y2='10'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .premium-glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; padding: 2px; background: linear-gradient(135deg, rgba(212,175,55,0.4) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.1) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.3; transition: opacity 0.4s ease; } .premium-glass-card:hover::before { opacity: 1; } .premium-glass-card:hover { transform: translateY(-8px); border-color: rgba(212, 175, 55, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(212, 175, 55, 0.1); } .premium-card-badge { padding: 6px 14px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; margin-bottom: 25px; background: rgba(255, 255, 255, 0.05); color: #aaaaaa !important; border: 1px solid rgba(255, 255, 255, 0.1); letter-spacing: 1px; transition: all 0.3s ease; text-transform: uppercase; } .premium-glass-card:hover .premium-card-badge { background: rgba(212, 175, 55, 0.1); color: #d4af37 !important; border-color: rgba(212, 175, 55, 0.3); } .premium-card-icon { width: 60px; height: auto; margin-bottom: 25px; opacity: 0.8; transition: all 0.3s ease; } .premium-glass-card:hover .premium-card-icon { opacity: 1; transform: scale(1.05); } .premium-card-title { font-size: 1.5rem; font-weight: 800; color: #ffffff !important; margin-bottom: 15px; font-family: var(--font-heading); line-height: 1.3; } .premium-card-desc { font-size: 0.95rem; color: rgba(255, 255, 255, 0.5) !important; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; word-break: break-word; transition: color 0.3s ease; } .premium-glass-card:hover .premium-card-desc { color: rgba(255, 255, 255, 0.8) !important; } .premium-card-cta { font-size: 0.9rem; font-weight: 600; color: #d4af37 !important; text-decoration: none; display: flex; align-items: center; transition: all 0.3s ease; position: relative; padding-bottom: 5px; } .premium-card-cta::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #d4af37; transition: width 0.3s ease; } .premium-glass-card:hover .premium-card-cta::after { width: 100%; } @media screen and (max-width: 900px) { .premium-tech-container { padding: 0 16px !important; } .premium-tech-header { text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-bottom: 2.5rem !important; } .premium-tech-title { font-size: 2.2rem !important; text-align: center !important; } .premium-tech-desc { font-size: 0.85rem !important; margin-bottom: 0 !important; text-align: center !important; word-break: keep-all !important; } /* 2 square cards per row side-by-side on mobile with center-aligned card contents */ .premium-tech-grid { grid-template-columns: repeat(3, 1fr); gap: 12px !important; } .premium-glass-card { padding: 22px 12px !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; justify-content: space-between !important; min-height: 140px !important; } .premium-card-badge { margin-bottom: 12px !important; font-size: 0.7rem !important; padding: 4px 10px !important; text-align: center; } .premium-card-title { font-size: 1.15rem !important; margin-bottom: 12px !important; word-break: keep-all !important; line-height: 1.3 !important; text-align: center !important; } /* Mobile & Tablet 2-Column Grid Layout for Video Gallery */ @media (max-width: 768px) { .cream-container { padding: 0 36px !important; } .cream-video-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto !important; row-gap: 14px !important; column-gap: 10px !important; gap: 14px 10px !important; width: 100% !important; } .cream-video-item { width: 100% !important; grid-column: span 1 !important; grid-row: auto !important; height: 130px !important; border-radius: 14px !important; margin-bottom: 0 !important; } .item-large-left { grid-column: span 2 !important; grid-row: auto !important; height: 170px !important; } /* 잠실점 프리미엄 스튜디오: 왼쪽 동영상(item-large-left)과 높이 동일하게 일치 */ .cream-video-grid .cream-video-item:nth-child(2) { grid-column: span 1 !important; grid-row: auto !important; height: 170px !important; } .item-small, .item-medium-wide, .item-bottom-wide { grid-column: span 1 !important; grid-row: auto !important; height: 130px !important; } /* PGA 배상문 프로: 가로값 전체(3컬럼) 꽉 채워 여백 없이 맞춤 */ .cream-video-grid .cream-video-item:last-child { grid-column: 1 / -1 !important; width: 100% !important; height: 160px !important; } .cream-item-overlay { padding: 10px 10px 8px 10px !important; width: 100% !important; box-sizing: border-box !important; } .cream-item-title { font-size: 11px !important; font-weight: 700 !important; margin-bottom: 0 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; max-width: 100% !important; } .cream-item-sub { font-size: 10px !important; opacity: 0.85 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } } /* Mobile Phone Widescreen Video Gallery Height Optimization */ @media (max-width: 576px) { .cream-container { padding: 0 16px !important; } .cream-video-item { height: 95px !important; } .item-large-left { height: 120px !important; } /* 576px 이하에서도 잠실점 프리미엄 스튜디오와 청담 본점 높이 동일하게 일치 */ .cream-video-grid .cream-video-item:nth-child(2) { height: 120px !important; } .item-small, .item-medium-wide, .item-bottom-wide { height: 95px !important; } /* 576px 이하에서도 PGA 배상문 프로 가로 꽉 채움 */ .cream-video-grid .cream-video-item:last-child { grid-column: 1 / -1 !important; width: 100% !important; height: 120px !important; } .cream-item-title { font-size: 10px !important; } } /* Hide card description subtext on mobile for clean 2-column square tile layout */ .premium-card-desc { display: none !important; } .premium-card-cta { font-size: 0.8rem !important; margin-top: auto !important; text-align: center !important; justify-content: center !important; } } /* ========================================================================= UDR Total Cloud & Management Ecosystem Section ========================================================================= */ #ecosystem , /* ========================================================================= UDR Total Cloud & Management Ecosystem Section ========================================================================= */ #ecosystem-2 { background-color: #ffffff !important; padding: 100px 0; height: auto; } #ecosystem .remo-header h2 , #ecosystem-2 .remo-header h2 { font-size: 38px !important; font-weight: 800 !important; color: #111111 !important; margin-bottom: 15px !important; line-height: 1.3 !important; } #ecosystem .remo-header p , #ecosystem-2 .remo-header p { font-size: 18px !important; color: #555555 !important; margin-bottom: 40px !important; } #ecosystem .modern-card , #ecosystem-2 .modern-card { background: #ffffff; border: 1px solid #e5e5e5; border-radius: 20px; padding: 40px 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; text-align: left; height: 100%; } #ecosystem .modern-card:hover , #ecosystem-2 .modern-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); border-color: #d1d1d1; } #ecosystem .card-icon-box , #ecosystem-2 .card-icon-box { width: 52px; height: 52px; background: #f4f5f7; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; color: #111; } #ecosystem .modern-card h3 , #ecosystem-2 .modern-card h3 { font-size: 22px !important; font-weight: 700 !important; color: #111111 !important; margin-bottom: 12px !important; } #ecosystem .modern-card .desc , #ecosystem-2 .modern-card .desc { font-size: 16px !important; color: #555555 !important; line-height: 1.6 !important; margin-bottom: 0 !important; flex-grow: 1; word-break: keep-all; } .app-btn-group { margin-top: 24px; display: flex; gap: 10px; width: 100%; } .app-btn-modern { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 14px 0; background-color: #f4f5f7 !important; color: #111111 !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 40px !important; text-decoration: none !important; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } .app-btn-modern:hover { background-color: #e6e8ec !important; transform: translateY(-1px); } .app-btn-modern svg { margin-right: 8px; } .ecosystem-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .ecosystem-header { text-align: center; } .ecosystem-badge { background: #f1f2f4; color: #333; font-weight: 700; padding: 6px 16px; border-radius: 30px; display: inline-block; margin-bottom: 20px; font-size: 13px; letter-spacing: 0.5px; } .ecosystem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } /* Ecosystem Header Subtitle - No Clipping Rule */ .one-line-sub { word-break: keep-all !important; font-size: 15px !important; color: #666666 !important; margin-top: 10px !important; line-height: 1.5 !important; text-align: center !important; } @media screen and (max-width: 900px) { .one-line-sub { font-size: 12px !important; white-space: normal !important; word-break: keep-all !important; padding: 0 10px !important; line-height: 1.4 !important; margin-top: 6px !important; } .ecosystem-header h2 { font-size: 19px !important; letter-spacing: -0.5px !important; word-break: keep-all !important; } .ecosystem-badge { font-size: 15px !important; padding: 3px 12px !important; margin-bottom: 6px !important; } } /* Ecosystem Grid Cards: Title inline next to Icon Box */ .ecosystem-container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; } .ecosystem-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 30px !important; margin-top: 40px !important; width: 100% !important; box-sizing: border-box !important; } .ecosystem-grid .modern-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 38px 24px 34px 24px !important; border-radius: 20px !important; background: #ffffff !important; border: 1px solid #edf0f5 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; height: 100% !important; } .ecosystem-grid .modern-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important; } .ecosystem-grid .modern-card .card-icon-box { margin-bottom: 16px !important; flex-shrink: 0 !important; width: 50px !important; height: 50px !important; background: rgba(17, 17, 17, 0.04) !important; color: #111111 !important; border-radius: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ecosystem-grid .modern-card h3 { margin-bottom: 0 !important; font-size: 19px !important; font-weight: 700 !important; color: #111111 !important; word-break: keep-all !important; text-align: center !important; line-height: 1.3 !important; } .ecosystem-grid .app-btn-group { width: 100% !important; margin-top: 22px !important; display: flex !important; gap: 10px !important; justify-content: center !important; } gap: 10px !important; } .mobile-br { display: none; } @media screen and (max-width: 900px) { .mobile-br { display: inline !important; } .ecosystem-container { padding: 0 10px !important; } .ecosystem-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; margin-top: 16px !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } .ecosystem-grid .modern-card, .ecosystem-grid .ecosystem-link { flex: none !important; width: 100% !important; max-width: 100% !important; } .ecosystem-grid .modern-card { padding: 24px 16px !important; gap: 6px !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; height: 100% !important; } .ecosystem-grid .modern-card .card-icon-box { width: 44px !important; height: 44px !important; margin-bottom: 0 !important; } .ecosystem-grid .modern-card h3 { font-size: 10px !important; font-weight: 700 !important; text-align: center !important; line-height: 1.25 !important; letter-spacing: -0.4px !important; word-break: keep-all !important; } .ecosystem-grid .app-btn-group { display: flex !important; flex-direction: column !important; gap: 4px !important; margin-top: 6px !important; width: 100% !important; } .ecosystem-grid .app-btn-modern { background-color: #0f172a !important; color: #ffffff !important; padding: 5px 0 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: -0.2px !important; border-radius: 16px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; } .ecosystem-grid .app-btn-modern svg { width: 12px !important; height: 12px !important; margin-right: 3px !important; } } /* Desktop Widescreen Expansion for Sub Footer CTA */ .sub-footer-cta-section { width: 100% !important; padding: 1.8rem 0 1.8rem 0 !important; overflow: visible !important; } .sub-footer-cta-container { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding: 0 3rem !important; box-sizing: border-box !important; overflow: visible !important; } .sub-footer-cta-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; width: 100% !important; overflow: visible !important; } /* Tablet / iPad Optimization (769px to 1024px) */ @media screen and (min-width: 769px) and (max-width: 1024px) { .sub-footer-cta-section { padding: 16px 0 16px 0 !important; width: 100% !important; overflow: visible !important; } .sub-footer-cta-container { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 2rem !important; box-sizing: border-box !important; overflow: visible !important; } .sub-footer-cta-grid { gap: 20px !important; grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; overflow: visible !important; } .sub-footer-cta-card { padding: 18px 10px !important; border-radius: 16px !important; width: 100% !important; } .sub-footer-cta-card .sub-cta-title { font-size: clamp(12.5px, 1.5vw, 14.5px) !important; font-weight: 700 !important; margin-bottom: 6px !important; } .sub-footer-cta-card .sub-cta-desc { display: block !important; font-size: clamp(10.5px, 1.1vw, 12px) !important; color: #a1a1aa !important; margin-bottom: 10px !important; } .sub-footer-cta-btn { padding: 6px 12px !important; font-size: clamp(10.5px, 1.1vw, 11.5px) !important; border-radius: 20px !important; } .premium-footer-cta { padding-top: 50px !important; padding-bottom: 40px !important; } .premium-footer-cta .premium-cta-box { padding: 40px 36px !important; gap: 24px !important; border-radius: 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .premium-footer-cta .premium-cta-left { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } .premium-footer-cta .premium-cta-badge { font-size: 11px !important; padding: 4px 14px !important; margin-bottom: 14px !important; } .premium-footer-cta .premium-cta-title { font-size: 25px !important; line-height: 1.35 !important; margin-bottom: 18px !important; word-break: keep-all !important; text-align: center !important; } .premium-footer-cta .premium-cta-desc { display: none !important; } .premium-footer-cta .premium-cta-primary-btn { padding: 12px 24px !important; font-size: 15px !important; margin-bottom: 16px !important; border-radius: 40px !important; } .premium-footer-cta .premium-cta-right { display: flex !important; flex-direction: row !important; gap: 14px !important; width: 100% !important; justify-content: center !important; margin-top: 10px !important; } .premium-footer-cta .premium-cta-sub-card { flex: 1 !important; max-width: 320px !important; padding: 14px 20px !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } .premium-footer-cta .premium-cta-icon { width: 36px !important; height: 36px !important; margin-right: 8px !important; flex-shrink: 0 !important; } .premium-footer-cta .premium-cta-icon svg { width: 18px !important; height: 18px !important; } .premium-footer-cta .premium-cta-sub-card h4 { margin-bottom: 0 !important; font-size: 14px !important; font-weight: 600 !important; } .premium-footer-cta .premium-cta-sub-card p { display: none !important; } } /* Smartphone Optimization (max-width: 768px) */ @media screen and (max-width: 768px) { .sub-footer-cta-section { padding: 10px 0 10px 0 !important; width: 100% !important; overflow: visible !important; } .sub-footer-cta-container { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 1rem !important; box-sizing: border-box !important; overflow: visible !important; } .sub-footer-cta-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; overflow: visible !important; } .sub-footer-cta-card { padding: 12px 3px !important; border-radius: 12px !important; background: #141414 !important; border: 1px solid #262626 !important; min-height: 74px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .sub-footer-cta-card .sub-cta-title { font-size: clamp(10px, 2.7vw, 12px) !important; font-weight: 700 !important; color: #ffffff !important; margin-bottom: 5px !important; white-space: nowrap !important; letter-spacing: -0.5px !important; } .sub-footer-cta-card .sub-cta-desc { display: none !important; } .sub-footer-cta-btn { padding: 4px 6px !important; font-size: clamp(8.5px, 2.4vw, 10px) !important; font-weight: 600 !important; color: #ffffff !important; background: #262626 !important; border: 1px solid #383838 !important; border-radius: 20px !important; white-space: nowrap !important; letter-spacing: -0.4px !important; display: inline-block !important; text-align: center !important; } .premium-footer-cta { padding-top: 30px !important; padding-bottom: 24px !important; } .premium-footer-cta .premium-cta-desc { display: none !important; } .premium-footer-cta .premium-cta-sub-card p { display: none !important; } .premium-footer-cta .premium-cta-box { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 24px 18px !important; gap: 14px !important; border-radius: 20px !important; } .premium-footer-cta .premium-cta-left { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; } .premium-footer-cta .premium-cta-badge { font-size: 9.5px !important; padding: 3px 10px !important; margin-bottom: 14px !important; } .premium-footer-cta .premium-cta-title { font-size: 17px !important; line-height: 1.4 !important; margin-bottom: 12px !important; word-break: keep-all !important; } .premium-footer-cta .premium-cta-primary-btn { padding: 10px 16px !important; font-size: 13px !important; margin-bottom: 10px !important; border-radius: 30px !important; } .premium-footer-cta .premium-cta-right { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px !important; width: 100% !important; margin-top: 6px !important; } .premium-footer-cta .premium-cta-sub-card { padding: 10px 8px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; text-align: center !important; } .premium-footer-cta .premium-cta-icon { width: 28px !important; height: 28px !important; margin-right: 2px !important; flex-shrink: 0 !important; } .premium-footer-cta .premium-cta-icon svg { width: 14px !important; height: 14px !important; } .premium-footer-cta .premium-cta-sub-card h4 { margin-bottom: 0 !important; font-size: 11px !important; font-weight: 600 !important; word-break: keep-all !important; line-height: 1.25 !important; } } /* ===================================================== store.html ????????????????????????????????????? ?????????????????? ===================================================== */ /* Cinematic Section: ???????????????????????????????*/ .installation-cinematic-section { padding-top: 0; padding-bottom: 1rem; } /* ??????????占쏙┼???????????????????占쏙┼???????????? ?????????????????????????????????????*/ .installation-cinematic-section .install-container { padding-top: 0; padding-bottom: 0; margin-top: -7rem; } /* ????????????????????????????????????????????????*/ .installation-cinematic-section .install-cinematic-header { margin-top: 0; margin-bottom: 0; } /* ????????????????????? ?????????? ???????????????????*/ .installation-cinematic-section .install-cinematic-grid { margin-top: 2.5rem; display: flex; flex-direction: row; gap: 1.5rem; } /* ????????????占썩닪??????????????????????????? ???????????占쏙┼??????????+ ???????轅붽틓????????????占쏙┼????+ ????????????????????????????????????& ???????????占쏙┼???????獄쏅챷占?????占썩닪?????*/ .installation-cinematic-section .install-stat-col { flex: 1; display: flex; flex-direction: row; align-items: center; gap: 1.5rem; } /* ??????????????????耀붾굝?????????占썩닪???????????占쏙┼???? ??耀붾굝????????占쎌뵰占?????????& ?????獄쏅챷占?????占썩닪???????耀붾굝????????*/ .installation-cinematic-section .stat-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } /* ?????????? ???????????????????????????????*/ .installation-cinematic-section .stat-badge { margin-bottom: 0.5rem; } /* ????????????????????????????? ?????*/ .installation-cinematic-section .stat-title { margin: 0; line-height: 1.2; } /* ?????????????????占쏙┼?????????????????*/ /* ========================================================================= Simple Footer ========================================================================= */ .footer-wrapper { scroll-snap-align: end; } .simple-footer { background-color: #111; color: #999; padding: 50px 0 30px; font-family: var(--font-body, 'Inter', sans-serif); font-size: 14px; border-top: 1px solid #222; } .simple-footer-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; } .simple-footer-left { flex: 1; min-width: 300px; } .simple-footer-logo { font-family: var(--font-heading, 'Inter', sans-serif); font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 25px; letter-spacing: 1px; } .simple-footer-info { line-height: 1.8; margin-bottom: 25px; color: #888; } .simple-footer-info span { display: inline-block; margin-right: 15px; } .simple-footer-info span::after { content: '|'; margin-left: 15px; color: #333; } .simple-footer-info span:last-child::after, .simple-footer-info br + span::before { display: none; } .simple-footer-info span:nth-of-type(2)::after { display: none; } .simple-footer-contact { font-size: 14px; color: #999; } .simple-footer-contact strong { font-size: 20px; color: #ff3b30; margin-right: 12px; letter-spacing: 0.5px; } .simple-footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 25px; } .simple-footer-links { display: flex; gap: 24px; } .simple-footer-links a { color: #bbb; text-decoration: none; transition: color 0.2s; } .simple-footer-links a:hover { color: #fff; } .simple-footer-links a.privacy { font-weight: 700; color: #fff; } .custom-family-dropdown { position: relative; display: inline-block; min-width: 200px; font-size: 13px; color: #888; user-select: none; cursor: pointer; } .custom-family-selected { border: 1px solid #333; padding: 8px 36px 8px 16px; border-radius: 25px; position: relative; background: transparent; } .custom-family-selected::after { content: ''; position: absolute; top: 50%; right: 16px; width: 7px; height: 7px; border-bottom: 1.5px solid #999; border-right: 1.5px solid #999; transform: translateY(-75%) rotate(45deg); transition: transform 0.3s; } .custom-family-dropdown.active .custom-family-selected::after { transform: translateY(-25%) rotate(-135deg); /* Point up when open */ } .custom-family-options { position: absolute; bottom: 100%; /* Open upwards from footer */ left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 15px; margin: 0 0 5px 0; padding: 0; list-style: none; display: none; z-index: 100; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); overflow: hidden; } .custom-family-dropdown.active .custom-family-options { display: block; } .custom-family-options li { padding: 10px 16px; color: #111; font-weight: 500; transition: background 0.2s; } .custom-family-options li:hover { background: #f0f0f0; /* GRAY HOVER */ } .simple-footer-bottom { width: 100%; margin-top: 15px; padding-top: 15px; border-top: 1px solid #222; display: flex; justify-content: space-between; align-items: center; color: #666; font-size: 13px; } @media (max-width: 768px) { .simple-footer-container { flex-direction: column; gap: 40px; } .simple-footer-right { align-items: flex-start; width: 100%; } .simple-footer-info span::after { display: none; } .simple-footer-info span { display: block; margin-bottom: 5px; } } /* ========================================================================= Quick Contact Banner (index.html) ========================================================================= */ .quick-contact-banner { background-color: #050505; padding: 80px 0; text-align: center; border-top: 1px solid #1a1a1a; color: #ffffff; } .qcb-title { font-size: 26px; font-weight: 700; margin-bottom: 60px; letter-spacing: -0.5px; font-family: var(--font-heading, 'Inter', sans-serif); } .qcb-container { display: flex; justify-content: center; align-items: center; gap: 0; max-width: 1000px; margin: 0 auto; } .qcb-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 15px; text-decoration: none; color: #d1d5db; transition: color 0.3s ease, transform 0.3s ease; } .qcb-item:hover { color: #ffffff; transform: translateY(-3px); } .qcb-icon { color: #ffffff; display: flex; justify-content: center; align-items: center; margin-bottom: 12px; transition: transform 0.3s ease; } .qcb-item:hover .qcb-icon { transform: scale(1.1); } .qcb-item span { font-size: 15px; font-weight: 400; letter-spacing: -0.3px; } .qcb-divider { width: 1px; height: 60px; background-color: rgba(255, 255, 255, 0.15); } @media screen and (max-width: 768px) { .qcb-container { flex-direction: column; gap: 40px; } .qcb-divider { width: 60px; height: 1px; } } /* ========================================================================= Premium Tech Section (index.html) ========================================================================= */ .premium-tech-section { min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #2c2d33 0%, #131417 100%); width: 100%; } .premium-tech-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px; } .core-grid-new { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 50px; width: 100%; } .core-card { background: #111111; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; text-decoration: none; color: #fff; position: relative; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px; z-index: 1; } /* Exclusive Border Light Beam (???????占쏙┼?? 1.5px '?????????占쏙┼????????????????????????>???????????????????占썩닪占?? ???????占쏙┼????????????? */ .core-card::before { content: ''; position: absolute; inset: -1px; border-radius: 28px; padding: 2px; background: linear-gradient( 135deg, transparent 0%, transparent 35%, rgba(255, 59, 48, 0.5) 44%, #ffffff 50%, rgba(255, 59, 48, 0.95) 55%, transparent 65%, transparent 100% ); background-size: 300% 300%; background-position: 0% 0%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; z-index: 5; } /* ????????占쏙┼?????????占쏙┼?? ????????????????縕ョ댚?? ?????-> ???????????????????占썩닪占?? ???????占쏙┼???饔낅떽??????????????*/ .core-card:hover::before { opacity: 1 !important; animation: borderBeamHover 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important; } /* ???????4??????占썩닪??占쎈꺌??????占썩닪占???節뗭쓠?棺???占??????占썩닪??????占썩닪占?????????????????????????縕ョ댚?? ?????????????占쏙┼?????(8??????占썩닪??????占썩닪??? */ .core-grid-new .core-card:nth-child(1)::before { animation: borderBeamLoop 8s infinite 0s ease-in-out; } .core-grid-new .core-card:nth-child(2)::before { animation: borderBeamLoop 8s infinite 2s ease-in-out; } .core-grid-new .core-card:nth-child(3)::before { animation: borderBeamLoop 8s infinite 4s ease-in-out; } .core-grid-new .core-card:nth-child(4)::before { animation: borderBeamLoop 8s infinite 6s ease-in-out; } @keyframes borderBeamHover { 0% { background-position: 0% 0%; opacity: 0; } 10% { opacity: 1; } 100% { background-position: 100% 100%; opacity: 0.9; } } @keyframes borderBeamLoop { 0%, 10% { background-position: 0% 0%; opacity: 0; } 15% { opacity: 1; } 30% { background-position: 100% 100%; opacity: 0; } 100% { background-position: 100% 100%; opacity: 0; } } .core-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(0,0,0,0.75), 0 0 30px rgba(255, 59, 48, 0.2); border-color: rgba(255, 59, 48, 0.45); } .core-label { background: rgba(255, 59, 48, 0.12); color: #ff5252; font-size: 13px; font-weight: 700; padding: 6px 18px; margin-top: 40px; letter-spacing: 0.5px; border-radius: 20px; border: 1px solid rgba(255, 59, 48, 0.3); transition: all 0.3s ease; display: inline-block; } .core-card:hover .core-label { background: rgba(255, 59, 48, 0.22); color: #ffffff; border-color: #ff3b30; } .core-icon { margin: 35px 0 25px; display: flex; align-items: center; justify-content: center; color: #fff; transition: color 0.3s ease; } .core-card:hover .core-icon { color: #ff3b30; } .core-title { font-size: 20px; font-weight: 800; margin-bottom: 12px; color: #fff; } .core-desc { font-size: 14px; color: #a0a0a0; line-height: 1.6; margin-bottom: 35px; padding: 0 20px; word-break: keep-all; } .core-btn { width: calc(100% - 32px); background: rgba(255, 59, 48, 0.16); color: #ffffff; padding: 12px 0; font-size: 15px; font-weight: 700; margin: auto 16px 16px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease; border: 1px solid rgba(255, 59, 48, 0.45); border-radius: 12px; box-sizing: border-box; } .core-card:hover .core-btn { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%); color: #ffffff; border-color: #ff3b30; font-weight: 800; box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4); } @media screen and (max-width: 1024px) { .core-grid-new { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 600px) { .core-grid-new { grid-template-columns: 1fr; gap: 16px; } } /* ========================================================================= Sci-Fi Section Styles (index.html) ========================================================================= */ .sci-fi-globe-section { position: relative; width: 100vw; height: 100dvh; background-color: #020617; /* Very dark deep blue/black */ overflow: hidden; font-family: 'Inter', -apple-system, sans-serif; color: #fff; display: flex; align-items: center; justify-content: center; } /* Deep Space Background */ .sf-bg { position: absolute; inset: 0; background: #050505; z-index: 1; } .sf-stars { position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.8) 100%, transparent), radial-gradient(1.5px 1.5px at 80% 40%, rgba(255, 255, 255, 0.6) 100%, transparent), radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.9) 100%, transparent), radial-gradient(1px 1px at 90% 90%, rgba(255, 255, 255, 0.5) 100%, transparent), radial-gradient(1px 1px at 30% 10%, rgba(255, 255, 255, 0.7) 100%, transparent); background-size: 300px 300px; opacity: 0.5; animation: sf-twinkle 10s linear infinite; } @keyframes sf-twinkle { 0% { transform: translateY(0); } 100% { transform: translateY(-300px); } } /* Glowing Earth */ .sf-earth-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60vh; height: 60vh; z-index: 2; display: flex; align-items: center; justify-content: center; } .sf-earth-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle closest-side, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%); mask-image: radial-gradient(circle closest-side, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 85%); animation: sf-pulse 4s ease-in-out infinite alternate, sf-float 10s ease-in-out infinite; filter: contrast(1.2) brightness(1.1); } @keyframes sf-pulse { 0% { filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.8)) contrast(1.2); } 100% { filter: drop-shadow(0 0 80px rgba(0, 0, 0, 1)) contrast(1.2); } } @keyframes sf-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.02); } } /* Orbits */ .sf-orbit { position: absolute; border: 1px solid rgba(0, 200, 255, 0.15); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sf-orbit-1 { width: 110%; height: 110%; border-top-color: rgba(255,255,255,0.05); animation: sf-spin 20s linear infinite; } .sf-orbit-2 { width: 130%; height: 130%; border-right-color: rgba(255,255,255,0.03); animation: sf-spin 35s linear infinite reverse; } .sf-orbit-3 { width: 150%; height: 150%; border-bottom-color: rgba(255,255,255,0.02); animation: sf-spin 50s linear infinite; } @keyframes sf-spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* Content Layout */ .sf-content-wrapper { position: relative; z-index: 10; width: 100%; max-width: 1600px; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; pointer-events: none; } /* Left Panel */ .sf-left-panel { max-width: 520px; padding-left: 2%; } .sf-main-title { font-size: clamp(48px, 5vw, 80px); font-weight: 900; line-height: 1.0; margin-bottom: 32px; letter-spacing: -2.5px; text-transform: uppercase; background: linear-gradient(160deg, #ffffff 0%, #e2e8f0 55%, #94a3b8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sf-desc { font-size: 17px; color: rgba(255,255,255,0.82); line-height: 1.9; margin-top: 20px; margin-bottom: 60px; font-weight: 400; word-break: keep-all; letter-spacing: 0.1px; } .sf-hud-line-left { position: relative; display: flex; flex-direction: column; gap: 8px; } .sf-hud-label { font-size: 12px; letter-spacing: 1.5px; color: #e2e8f0; display: flex; align-items: center; gap: 6px; } .sf-hud-line { width: 0; height: 1px; background: rgba(255,255,255,0.2); position: relative; transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; } .sf-hud-line::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff; opacity: 0; transition: opacity 0.5s ease 2s; } /* Right Panel Premium Redesign */ .sf-right-panel { width: 380px; display: flex; flex-direction: column; gap: 16px; } .sf-data-header { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #ff3b30; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; text-transform: uppercase; } .sf-stat-block { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 24px; position: relative; opacity: 0; transform: translateX(20px); transition: all 0.5s ease; } .sf-stat-block:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 59, 48, 0.25); transform: translateX(-5px) !important; } .sf-stat-title { font-size: 13px; font-weight: 700; color: #ffffff; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px; } .sf-dot { display: none; } /* Hide old dots */ .sf-stat-value { font-size: 64px; font-weight: 700; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; letter-spacing: -2px; font-family: var(--font-heading, 'Inter', sans-serif); } .sf-stat-block:nth-child(1) .sf-stat-value, .sf-stat-block .sf-stat-value.sf-val-red { color: #ff3b30; } .sf-stat-block:nth-child(2) .sf-stat-value, .sf-stat-block:nth-child(3) .sf-stat-value { color: #ffffff; } .sf-unit { font-size: 16px; font-weight: 600; color: #94a3b8; letter-spacing: 0; } .sf-stat-sub { font-size: 13px; color: #64748b; } .sf-stat-note { font-size: 12px; color: #475569; margin-top: 15px; font-style: italic; } /* Animations on Active */ .sci-fi-globe-section.is-active .sf-hud-line { width: 220%; } .sci-fi-globe-section.is-active .sf-hud-line::after { opacity: 1; } .sci-fi-globe-section.is-active .sf-stat-block { opacity: 1; transform: translateX(0); } .sci-fi-globe-section.is-active .sf-stat-block:nth-child(2) { transition-delay: 0.3s; } .sci-fi-globe-section.is-active .sf-stat-block:nth-child(3) { transition-delay: 0.5s; } .sci-fi-globe-section.is-active .sf-stat-block:nth-child(4) { transition-delay: 0.7s; } @media screen and (max-width: 1024px) { .sf-content-wrapper { flex-direction: column; justify-content: space-between; padding: 100px 5% 50px; height: 100%; } .sf-earth-container { width: 80vw; height: 80vw; } .sf-hud-line-left { display: none; } .sf-right-panel { width: 100%; gap: 15px; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding: 20px; border-radius: 16px; } .sf-stat-block { padding-bottom: 15px; } .sf-stat-value { font-size: 40px; } } /* ========================================================================= Ecosystem Section (index.html) ========================================================================= */ .ecosystem-grid-new { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; width: 100%; } .eco-card { background: #f4f5f7; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: #111; position: relative; box-sizing: border-box; overflow: hidden; border-radius: 28px; } .eco-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); } .eco-label { background: #000; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 24px; margin-top: 40px; letter-spacing: 1px; border-radius: 99px; } .eco-icon { margin: 40px 0 30px; display: flex; align-items: center; justify-content: center; color: #111; } .eco-title { font-size: 22px; font-weight: 800; margin-bottom: 12px; color: #000; } .eco-desc { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 45px; padding: 0 20px; word-break: keep-all; } .eco-btn { width: 100%; background: #000; color: #fff; padding: 18px 0; font-size: 16px; font-weight: 700; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; } .eco-card:hover .eco-btn { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%); color: #050505; } @media screen and (max-width: 767px) { .ecosystem-grid-new { grid-template-columns: 1fr; gap: 16px; } } /* ========================================================================= Dark Mode Overrides for Index.html (Ecosystem & Promotional Video) ========================================================================= */ section.dark-mode-override { background: #050505 !important; color: #ffffff !important; border-color: #1a1a1a !important; } section.dark-mode-override h2, section.dark-mode-override h3, section.dark-mode-override .cream-title { color: #ffffff !important; } section.dark-mode-override p, section.dark-mode-override .one-line-sub, section.dark-mode-override .cream-desc { color: #a0aec0 !important; } /* Ecosystem Specific Dark Mode */ .dark-mode-override .eco-card { background: #111111 !important; border: 1px solid #222222; color: #ffffff !important; transition: all 0.3s ease; } .dark-mode-override .eco-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.7), 0 0 25px rgba(255, 59, 48, 0.15) !important; border-color: rgba(255, 59, 48, 0.35) !important; } .dark-mode-override .eco-label { background: rgba(255, 59, 48, 0.08) !important; color: #ff3b30 !important; border: 1px solid rgba(255, 59, 48, 0.25) !important; transition: all 0.3s ease; } .dark-mode-override .eco-card:hover .eco-label { background: rgba(255, 59, 48, 0.18) !important; color: #ffffff !important; border-color: #ff3b30 !important; } .dark-mode-override .eco-card:hover .eco-icon { color: #ff3b30 !important; } .dark-mode-override .eco-title { color: #ffffff !important; } .dark-mode-override .eco-desc { color: #888888 !important; } .dark-mode-override .eco-icon { color: #ffffff !important; transition: color 0.3s ease; } .dark-mode-override .eco-card:hover .eco-btn { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%) !important; color: #050505 !important; font-weight: 800 !important; } .dark-mode-override .eco-btn { border-top: 1px solid #222222; } /* Promotional Video Specific Dark Mode */ .dark-mode-override .cream-header .clean-pill-badge { background: rgba(255, 59, 48, 0.08) !important; color: #ff3b30 !important; border: 1px solid rgba(255, 59, 48, 0.25) !important; } .dark-mode-override .cream-vid-card { border: 1px solid #222222; } .dark-mode-override .cream-vid-title { color: #ffffff !important; } .dark-mode-override .cream-vid-date { color: #888888 !important; } .dark-mode-override .cream-more-btn { border: 1px solid rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; transition: all 0.3s ease !important; } .dark-mode-override .cream-more-btn:hover { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%) !important; color: #050505 !important; border-color: #ff3b30 !important; font-weight: 700 !important; } /* --- Extracted from index.html --- */ /* scroll-snap: html??????????占쏙┼??????????占쏙┼??????????????占쏙┼?????????占쏙┼???????html???耀붾굝梨루땟?????占썩닪占?嶺뚳옙?占??????占?????*/ /* ?耀붾굝??????????占썩닪占????????????占쏙┼??占쏙옙?占??????占?占쏙옙??????占쎌춸?snap, ????????????????占쏙┼??占쏙옙?占??(sub-page)???????????*/ html { background-color: #050505; scroll-snap-type: y mandatory; /* ?????占썩닪占??????占썩닪占????? ?耀붾굝??????????占썩닪占????????????占쏙┼??占쏙옙?占????snap */ } html:has(body.sub-page) { scroll-snap-type: none; /* ????????????????占쏙┼??占쏙옙?占????????snap ?????*/ } .snap-section { scroll-snap-align: start; } /* ?????占썩닪占??????占썩닪占????????????????????????????占쏙┼??占쏙옙?占??(?耀붾굝??????????占썩닪占????????????????????????占쎈븶筌믩끃??????占썩닪????????????????占쏙┼????????????????????????????? (?? force-black-text ??????????????? ???????????????????? */ .header.scrolled:not(.force-black-text):not(:hover) .logo, .header.scrolled:not(.force-black-text):not(:hover) .nav-link { color: #ffffff !important; } .header.scrolled:not(.force-black-text):not(:hover) .logo img { filter: none !important; -webkit-filter: none !important; } .header.scrolled:not(.force-black-text):not(:hover) .header-utils a { color: rgba(255, 255, 255, 0.8) !important; } .header.scrolled:not(.force-black-text):not(:hover) .header-utils a.active { color: #ffffff !important; } .header.scrolled:not(.force-black-text):not(:hover) .header-utils .divider { color: rgba(255, 255, 255, 0.3) !important; } /* ??????????? ?????占쎈븶筌믩끃??????占썩닪?????????????????????????????????????????????????????? ????????????????????占썩닪?管占?紐껊샬??占쏀€ョ㎉怨ㅼ춻?占쎈뿪????????*/ .header.force-black-text:not(:hover) .logo, .header.force-black-text:not(:hover) .nav-link { color: #111111 !important; } .header.force-black-text:not(:hover) .mobile-menu-toggle span { background: #111111 !important; } .header.force-black-text:not(:hover) .header-utils a { color: #111111 !important; } .header.force-black-text:not(:hover) .header-utils a.active { color: #000000 !important; font-weight: 700; } .header.force-black-text:not(:hover) .header-utils .divider { color: rgba(0, 0, 0, 0.2) !important; } /* Grandiose Typography Styles (Combined with Horizontal Scroll) */ .grandiose-typography-section { font-family: 'Inter', -apple-system, sans-serif; } .grandiose-item { position: relative; width: 100vw; height: 100dvh; overflow: hidden; display: flex; align-items: center; } .grandiose-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .grandiose-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transform: scale(1.03); transition: transform 3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 2s ease; filter: grayscale(0%) contrast(1.02) brightness(1.15); } .grandiose-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: none; z-index: 2; } .grandiose-grid-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 10%; z-index: 3; pointer-events: none; } .g-line { width: 1px; height: 100%; background: rgba(255, 255, 255, 0.03); } .grandiose-content { position: relative; z-index: 4; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 10%; display: flex; flex-direction: column; height: 100%; justify-content: center; color: #fff; } .grandiose-top-info { position: absolute; top: 15vh; left: 10%; opacity: 0; transform: translateY(20px); transition: all 1s ease 0.3s; } .g-title { font-size: 16px; font-weight: 800; letter-spacing: 2px; margin: 0 0 4px 0; } .g-subtext { font-size: 12px; color: #888; letter-spacing: 1px; margin: 0 0 16px 0; } .g-divider { width: 40px; height: 1px; background-color: #555; } .grandiose-massive-text { display: flex; flex-direction: column; margin-top: 5vh; } .g-text-row { line-height: 1; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .g-thin-text { font-size: clamp(60px, 9vw, 150px); font-weight: 200; letter-spacing: -2px; color: #ddd; display: inline-block; transform: translateY(100%); opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; } .g-bold-text { font-size: clamp(60px, 10vw, 180px); font-weight: 900; letter-spacing: -4px; color: #fff; display: inline-block; transform: translateY(100%); opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; } .g-outline-text { font-size: clamp(50px, 8vw, 140px); font-weight: 300; color: transparent; -webkit-text-stroke: 1px #888; margin: 0 20px; font-family: 'Times New Roman', serif; font-style: italic; display: inline-block; transform: scale(0.5) rotate(-10deg); opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } .grandiose-bottom-info { position: absolute; bottom: 15vh; left: 10%; display: flex; align-items: center; gap: 20px; opacity: 0; transform: translateY(20px); transition: all 1s ease 0.8s; } .g-scroll-icon { width: 24px; height: 40px; border: 1px solid #ff3b30; border-radius: 20px; position: relative; box-shadow: 0 0 10px rgba(255, 59, 48, 0.2); } .g-scroll-icon::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 6px; background-color: #ff3b30; border-radius: 2px; animation: g-scroll-anim 1.5s infinite; } @keyframes g-scroll-anim { 0% { top: 8px; opacity: 1; } 100% { top: 20px; opacity: 0; } } .g-hint-title { font-size: 15px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; margin: 0 0 2px 0; line-height: 1.1; letter-spacing: -0.3px; } .g-hint-gold { font-size: 16px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; font-weight: 700; color: #ff3b30; margin: 0; line-height: 1.1; letter-spacing: -0.3px; } .grandiose-item.is-active .grandiose-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transform: scale(1.03); transition: transform 3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 2s ease; filter: grayscale(0%) contrast(1.02) brightness(1.15); } .grandiose-item.is-active .grandiose-top-info, .grandiose-item.is-active .grandiose-bottom-info { opacity: 1; transform: translateY(0); } .grandiose-item.is-active .g-thin-text, .grandiose-item.is-active .g-bold-text { transform: translateY(0); opacity: 1; } .grandiose-item.is-active .g-outline-text { transform: scale(1) rotate(0); opacity: 1; } /* --- Inline Style Replacements --- */ /* snap-anchor???耀붾굝??????????占썩닪占????????????占쏙┼??占쏙옙?占??(main-page)????占?占쏙옙??????占쎌춸?scroll-snap ??????*/ .snap-anchor { position: absolute; height: 100dvh; width: 100%; scroll-snap-align: start; pointer-events: none; z-index: 10; } .snap-anchor-top { top: 0; } .snap-anchor-bottom { top: 100dvh; } .grandiose-top-info-offset { top: 16vh !important; left: 5% !important; } .grandiose-bottom-info-offset { bottom: 7vh !important; left: 5% !important; } .g-row-1-offset { margin-bottom: 2vh; } .g-outline-text-custom { font-family: 'Inter', sans-serif !important; font-style: normal !important; margin: 0 40px !important; } .static-visible { opacity: 1 !important; transform: translateY(0) !important; bottom: 7vh !important; left: 5% !important; z-index: 10 !important; } .core-icon-large { font-size: 48px; } .glass-pill-dark { background: rgba(15, 15, 15, 0.7) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px) !important; color: #fff !important; } /* Grandiose Typography Styles (Combined with Horizontal Scroll) */ .grandiose-typography-section { font-family: "Inter", -apple-system, sans-serif; } .grandiose-item { position: relative; width: 100vw; height: 100dvh; overflow: hidden; display: flex; align-items: center; } /* Background & Overlay */ .grandiose-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .grandiose-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transform: scale(1.03); transition: transform 3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 2s ease; filter: grayscale(0%) contrast(1.02) brightness(1.15); } .grandiose-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: none; z-index: 2; } /* Editorial Grid Lines */ .grandiose-grid-lines { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 10%; z-index: 3; pointer-events: none; } .g-line { width: 1px; height: 100%; background: rgba(255, 255, 255, 0.03); } /* Content Container */ .grandiose-content { position: relative; z-index: 4; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 10%; display: flex; flex-direction: column; height: 100%; justify-content: center; color: #fff; } /* Top Left Info */ .grandiose-top-info { position: absolute; top: 15vh; left: 10%; opacity: 0; transform: translateY(20px); transition: all 1s ease 0.3s; } .g-title { font-size: 16px; font-weight: 800; letter-spacing: 2px; margin: 0 0 4px 0; } .g-subtext { font-size: 12px; color: #888; letter-spacing: 1px; margin: 0 0 16px 0; } .g-divider { width: 40px; height: 1px; background-color: #555; } /* Massive Typography */ .grandiose-massive-text { display: flex; flex-direction: column; margin-top: 5vh; } .g-text-row { line-height: 1; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; } .g-thin-text { font-size: clamp(60px, 9vw, 150px); font-weight: 200; letter-spacing: -2px; color: #ddd; display: inline-block; transform: translateY(100%); opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; } .g-bold-text { font-size: clamp(60px, 10vw, 180px); font-weight: 900; letter-spacing: -4px; color: #fff; display: inline-block; transform: translateY(100%); opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s; } .g-outline-text { font-size: clamp(50px, 8vw, 140px); font-weight: 300; color: transparent; -webkit-text-stroke: 1px #888; margin: 0 20px; font-family: "Times New Roman", serif; font-style: italic; display: inline-block; transform: scale(0.5) rotate(-10deg); opacity: 0; transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s; } /* Bottom Left Info */ .grandiose-bottom-info { position: absolute; bottom: 15vh; left: 10%; display: flex; align-items: center; gap: 20px; opacity: 0; transform: translateY(20px); transition: all 1s ease 0.8s; } .g-scroll-icon { width: 24px; height: 40px; border: 1px solid #ff3b30; border-radius: 20px; position: relative; box-shadow: 0 0 10px rgba(255, 59, 48, 0.2); } .g-scroll-icon::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 6px; background-color: #ff3b30; border-radius: 2px; animation: g-scroll-anim 1.5s infinite; } @keyframes g-scroll-anim { 0% { top: 8px; opacity: 1; } 100% { top: 20px; opacity: 0; } } .g-hint-title { font-size: 15px; font-family: "Pretendard", "Noto Sans KR", sans-serif; color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; margin: 0 0 2px 0; line-height: 1.1; letter-spacing: -0.3px; } .g-hint-gold { font-size: 16px; font-family: "Pretendard", "Noto Sans KR", sans-serif; font-weight: 700; color: #ff3b30; margin: 0; line-height: 1.1; letter-spacing: -0.3px; } /* Animation Active State */ .grandiose-item.is-active .grandiose-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transform: scale(1.03); transition: transform 3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 2s ease; filter: grayscale(0%) contrast(1.02) brightness(1.15); } .grandiose-item.is-active .grandiose-top-info, .grandiose-item.is-active .grandiose-bottom-info { opacity: 1; transform: translateY(0); } .grandiose-item.is-active .g-thin-text, .grandiose-item.is-active .g-bold-text { transform: translateY(0); opacity: 1; } .grandiose-item.is-active .g-outline-text { transform: scale(1) rotate(0); opacity: 1; } /* Force Transparent Button & Badge for Promotional Video Section */ .cream-video-section .clean-pill-badge, .dark-mode-override .cream-header .clean-pill-badge { background: rgba(255, 59, 48, 0.06) !important; color: #ff3b30 !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; backdrop-filter: blur(10px) !important; } .cream-video-section .btn-dark-pill, .dark-mode-override .cream-header .btn-dark-pill { background: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px) !important; transition: all 0.3s ease !important; } .cream-video-section .btn-dark-pill:hover, .dark-mode-override .cream-header .btn-dark-pill:hover { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.6) !important; } /* Helper utility classes to eliminate inline styles */ .snap-anchor { position: absolute; height: 100dvh; width: 100%; scroll-snap-align: start; pointer-events: none; z-index: 10; } .snap-anchor-top { top: 0; } .snap-anchor-next { top: 100dvh; } .core-card .core-icon i { font-size: 48px !important; } .grandiose-top-info.adjusted { top: 16vh !important; left: 5% !important; } .grandiose-bottom-info.adjusted { bottom: max(7vh, 90px) !important; left: 5% !important; } .grandiose-bottom-info.static-visible { opacity: 1 !important; transform: translateY(0) !important; bottom: max(7vh, 85px) !important; /* Ensure it stays above sticky CTA bar */ left: 5% !important; z-index: 10 !important; } .g-row-1.mb-2vh { margin-bottom: 2vh !important; } .g-outline-text.as-word { font-family: "Inter", sans-serif !important; font-style: normal !important; margin: 0 40px !important; } /* ===================================================================== ????????????????????????????(Reveal, Glow, Magnetic) ===================================================================== */ /* 1. Scroll Reveal ??????????????????????*/ .reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); } .reveal-up.is-revealed { opacity: 1; transform: translateY(0); } /* 2. ????占썩닪?????????占썩닪?瓘占???????????占썩닪?瓘?占?????????????????占썩닪????????(Bento Glow) */ .core-card, .eco-card { position: relative; overflow: hidden; } .core-card::before, .eco-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.3s ease; background: radial-gradient( 800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.04), transparent 40% ); } .core-card:hover::before, .eco-card:hover::before { opacity: 1; } .core-card > *, .eco-card > * { position: relative; z-index: 1; } /* 3. ??????????饔낅떽???????????占썩닪???& ????占썩닪???????????????????????占쏙┼?? */ .qcb-item { transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease, border-color 0.3s ease; will-change: transform; } .qcb-item:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 215, 0, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 15px rgba(255,215,0,0.1); } /* ===================================================================== [2026-09-10] ?饔낅떽??????????/ ??????????????占썩닪占???????????????????????占쏙┼?? ????占썩닪??????占썩닪?????????????占썩닪?????????? ===================================================================== */ @media (hover: none) and (pointer: coarse), (max-width: 1024px) { /* ?饔낅떽?????????????????????????????占쏙┼?? ????占썩닪?????? ???????????????????(???????占쏙┼?????????????占쎈㎍??????????占쏙┼?? ???????占쏙┼?? ????占썩닪??????) */ .core-card::before, .eco-card::before { display: none !important; } /* ?饔낅떽???????????????????????饔낅떽???????????占썩닪???????????????????????占썩닪?????(????????????????占썩닪??????) */ .qcb-item { transform: none !important; will-change: auto; } /* ??????占썩뼯占???????????占쏙┼????????????????????????????占썩닪????????????*/ .reveal-up { transform: translateY(20px); } } /* ===================================================================== [2026-09-10] ?饔낅떽??????????????????????????占쏙┼???????????占쏙┼?????????占쏙┼???????????????????????????占쏙┼?? ???????占쏙┼??(????占썩닪?瓘占????????????占쏙┼???????????? ===================================================================== */ @media (max-width: 768px) { /* 1. ??????????????????????????占쏙┼??Cut-off) ?????????占썩닪?????? */ .grandiose-top-info { left: 5% !important; top: 10vh !important; } .grandiose-bottom-info { left: 5% !important; bottom: 10vh !important; } /* 2. ????????????????占쏙┼??BEYOND LIMITS & REALITY) ?饔낅떽????????????????(??????關???占쎈き???占쎌넂??????????占썩닪?????????占썩닪??????) */ .g-thin-text, .g-bold-text { font-size: clamp(40px, 12vw, 60px) !important; /* ?饔낅떽????????????????饔낅떽???????占썩닪???????*/ letter-spacing: -1px !important; } .g-outline-text { font-size: clamp(35px, 10vw, 50px) !important; margin: 0 10px !important; transform: scale(0.7) rotate(-10deg) !important; } /* ?關???占쎈き???占쎌넂?????????????占썩닪??????????占썩닪???????????占썩닪?????????????占쏙┼???????????????????????占쏀뱼?? */ .g-text-row { gap: 5px; } } @media (max-width: 768px) { /* ???????????占쏙┼?? ?????????占쏙┼?? ????占썩닪????????????????????*/ .g-row-2 { flex-direction: column !important; align-items: flex-start !important; gap: 0px !important; } .g-outline-text { margin: 5px 0 !important; transform: scale(0.6) rotate(0deg) !important; text-align: left; } .g-thin-text, .g-bold-text { font-size: 14vw !important; line-height: 1 !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽??????????????????????????占쏙┼???????????占쏙┼?????????占쏙┼?????????占쏙┼?????????占쏙┼??(JS ????????????????占썩닪?????? ===================================================================== */ @media (max-width: 768px) { /* 1. ?饔낅떽???????????????????????????占썩닪????????占썩닪???????????占썩닪????????????????????JS ??????占썩뼯占???????????????占쎈㎍??????????占쏙┼??????????????????占쏙┼?? ????占썩닪?????????? ?????饔낅떽??癰귥옕?占썽뇦猿뗫닑???*/ /* JS????占썩닪???????????????????????????占썩닪???style(transform)????????占썩닪???????????????????????????????????????????? */ #text-1, #text-2 { transform: translateY(0) scale(1) !important; opacity: 1 !important; filter: none !important; } /* 2. Top/Bottom Info????占썩닪???????????占쏙┼??????????占쏙┼?? ?????????????????????占썩닪?????? (????占썩닪?????.adjusted ???????????????????-5%???????占썩닪????? */ html body .horizontal-scroll-section .grandiose-top-info.adjusted, html body .horizontal-scroll-section .grandiose-bottom-info.adjusted, html body .horizontal-scroll-section .grandiose-top-info, html body .horizontal-scroll-section .grandiose-bottom-info { left: 20px !important; padding-right: 20px !important; } /* 3. ????????????????占쏙┼?????????占쏙┼?? ????????????????占썩닪??????????占썩닪???????占승€?占????????占쎄컯????(????占썩닪??????占썩닪??????????占쏙┼??????占썩닪??????) */ html body .horizontal-scroll-section .grandiose-massive-text .g-text-row { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } html body .horizontal-scroll-section .g-thin-text, html body .horizontal-scroll-section .g-bold-text { font-size: 14vw !important; line-height: 1 !important; } html body .horizontal-scroll-section .g-outline-text { font-size: 10vw !important; margin: 5px 0 !important; transform: scale(0.6) rotate(0deg) !important; transform-origin: left center !important; text-align: left !important; } } /* ===================================================================== [2026-09-10] ????占썩닪占??????????????????????(Fluid & Safe Area) ===================================================================== */ /* ????????????????占썩닪??????占썩닪????????????占쏙┼?? ????????? ?饔낅떽???????占썩닪???)???????????????????????縕ョ댚?? ??????????????????????????????????占쏙┼??*/ :root { --safe-padding-x: clamp(20px, 5vw, 5vw); } .horizontal-scroll-section .grandiose-content { padding-left: var(--safe-padding-x) !important; padding-right: var(--safe-padding-x) !important; box-sizing: border-box !important; } html body .horizontal-scroll-section .grandiose-top-info, html body .horizontal-scroll-section .grandiose-bottom-info, html body .horizontal-scroll-section .grandiose-top-info.adjusted, html body .horizontal-scroll-section .grandiose-bottom-info.adjusted { left: var(--safe-padding-x) !important; } /* ?饔낅떽?????????????????????????占쎈㎍?????????(????占썩닪????????????占썩닪?????????占썩닪??????) */ @media (max-width: 1024px) { html body .horizontal-scroll-section .grandiose-massive-text .g-text-row { flex-direction: column !important; align-items: flex-start !important; } html body .horizontal-scroll-section .g-thin-text, html body .horizontal-scroll-section .g-bold-text { font-size: clamp(40px, 12vw, 150px) !important; } html body .horizontal-scroll-section .g-outline-text { transform: scale(0.6) rotate(0deg) !important; transform-origin: left center !important; margin: 5px 0 !important; } html body .horizontal-scroll-section .grandiose-overlay { background: none !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽????????????????????????占썩닪占?????????????占쏙┼????QCB) ????占썩닪?????????占썩닪?????? (???????占쏙┼?? ?????? ===================================================================== */ @media (max-width: 1024px) { /* ????占썩닪?????7vh???15vh???????占썩닪??????占썩닪??????????????????????占쏙┼?????????????占쏙┼??????80px)???????占썩닪??????????占쏙┼?? ????????*/ /* ?????????????????????占쏙┼???????????????????占썩닪??? ?????????????占쏀뢾??????????????????????(????110px) ????*/ html body .horizontal-scroll-section .grandiose-bottom-info, html body .horizontal-scroll-section .grandiose-bottom-info.adjusted, html body .horizontal-scroll-section .grandiose-bottom-info.static-visible { bottom: max(12vh, 110px) !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽????????????????????????占썩닪占??????占썩닪??????占썩닪??占쎌땡???????????? ???????占쏙┼??????占썩닪???釉랃폍?????? ???????占쏙┼?????????占쏙┼?? ===================================================================== */ @media (max-width: 1024px) { /* ????????????????????????100dvh ?????????????? ????占쎈툖??野껊갭????占승€????????????縕ョ댚??????????????戮깃틦???占쎈뼕????? ??????占썩닪占???????占썩닪占????100dvh???????????占쏙┼??????????占썩닪??????占썩닪??占쎌땡???????????????100dvh??????饔낅떽???????????占썩닪???釉랃폍???????????? ???????占쏙┼?? ????????????????占쏙┼??????height: auto !important???????????占쏙┼?? ??????占썩닪占???????占썩닪占?????饔낅떽???????占썩닪????????????占쏙┼??. */ html body .products-cinematic-showcase { height: auto !important; min-height: 100dvh !important; overflow: visible !important; } /* ????占썩닪??????占썩닪??占쎌땡????????????/??????????占쏙┼?? ???繹먮굟??????????占썩닪占?????????????????????????????????????占쏙┼??????auto)?? ?????????????占썩닪占????100% ????????????????? */ html body .cinematic-showcase-bg, html body .cinematic-showcase-bg-img, html body .cinematic-showcase-bg-video { height: 100% !important; min-height: 100% !important; object-fit: cover !important; } /* ????占썩닪?瓘占????????占썩닪?????????????占쏙┼??????????????????????????占썩닪???? ??????????????????*/ html body .cinematic-showcase-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0.8) 100%) !important; } } /* ===================================================================== [2026-09-10] ????占썩닪??????占썩닪??占쎌땡?????????????????占쏙┼?????????占쏙┼??(???????占쏙┼?????????占쏙┼??????????????? ===================================================================== */ @media (max-width: 1024px) { /* ??????占썩닪占??????????????占썩닪??占쎈춴??횠???肉됬툞????????占썩닪占????轅붽틓????? ?????占썩닪???????占썩닪??????????????????占썩닪??????????????*/ html body .products-cinematic-showcase { min-height: 100dvh !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ????占썩닪??????占썩닪??占쎌땡????????????/??????????占쏙┼?? ?????????????占쎈㎍????????????Pin) ????*/ html body .cinematic-showcase-bg, html body .cinematic-showcase-bg-img, html body .cinematic-showcase-bg-video { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; padding: 0 !important; } /* ????占썩닪?瓘占????????占썩닪?????????????占쏙┼??????????????????占썩닪??????占썩닪??占쎌땡????占썩닪?????????????????????占쏙┼??100% ?????????????????????????????饔낅떽???????*/ html body .cinematic-showcase-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.8) 100%) !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ????????????????占썩닪占???????占썩닪占????????????????????占쏙┼?????????????????????*/ html body .cinematic-showcase-container { position: relative; z-index: 10; width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 2rem 5% !important; box-sizing: border-box !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽????????????UX ?????? 2x2 ????????????????????鰲€???????????????????占썩닪????占쏙옙?占??? ===================================================================== */ @media screen and (max-width: 1024px) { html body .premium-tech-section { height: 100dvh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column; justify-content: center; overflow: hidden !important; } html body .premium-tech-container { padding: 0 4vw !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } html body .premium-tech-header { margin-bottom: 2vh !important; } html body .premium-tech-title { font-size: 1.5rem !important; margin-bottom: 5px !important; } html body .premium-tech-desc { font-size: 0.8rem !important; line-height: 1.4 !important; margin-bottom: 0 !important; } html body .core-grid-new { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-top: 10px !important; padding: 0 !important; width: 100% !important; } /* 1. ????占썩닪??占쎈꺌?????????占썩닪???????????????????????????? ???????占쏙┼?? ????????????????????????????繹먮굟????????????????饔낅떽??癰귥옕???占쎈궙????????????占썩닪?????*/ html body .core-grid-new .core-card { padding: 15px 0 0 0 !important; /* ????????????????占썩닪??占쎈춴?? ?????????, ??????????????占쏙┼??*/ height: 100% !important; min-height: 140px !important; /* ????占썩닪???????????????????????????????占썩닪?????*/ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; border-radius: 12px !important; overflow: hidden !important; } /* 2. ??????????占썩닪占???????占썩닪占?????????????????*/ html body .core-grid-new .core-label { font-size: 0.65rem !important; padding: 4px 10px !important; margin: 0 0 10px 0 !important; line-height: 1.2 !important; } html body .core-grid-new .core-icon i { font-size: 1.4rem !important; } html body .core-grid-new .core-icon { margin: 0 0 8px 0 !important; } html body .core-grid-new .core-title { font-size: 0.85rem !important; line-height: 1.35 !important; margin: 0 10px !important; /* ????占썩닪??占쎈꺌??????????占쏙┼???????????占썩닪?????????????? ???????占쏙┼?? ?????????????????????????????占쏀뱼?? */ word-break: keep-all; padding-bottom: 12px !important; /* ??????????????????占썩닪??? ??????????????占쏙┼?????????????占쎈슦???占?占쏙옙?*/ } html body .core-grid-new .core-desc { display: none !important; } /* 3. ??????????占쏙┼?????????????????占썩닪????占쏙옙?占???(???????饔낅떽??癰귥옕???占쎈궙?????????占썩닪占????????? */ html body .core-grid-new .core-btn { margin-top: auto !important; width: 100% !important; background: #000 !important; /* ???????????鰲€???????????*/ color: #fff !important; /* ???????????鰲€????????????????占쏙┼???????????占쏙┼??*/ padding: 12px 0 !important; /* ???????????????????????*/ font-size: 0.8rem !important; border: none !important; /* ?????????????????占쏙┼???饔낅떽????占쎄낄?占썽뇡??????????占쏙┼??*/ border-top: 1px solid #222 !important; /* ???????????鰲€??????????????*/ display: flex !important; justify-content: center !important; align-items: center !important; transition: all 0.3s ease !important; } /* 4. ?饔낅떽?????????????????占쏙┼??/???????占쏙┼?? ??????????占썩닪????????占썩닪????占쏙옙?占???(!important ????? */ html body .core-grid-new .core-card:hover .core-btn, html body .core-grid-new .core-card:active .core-btn { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%) !important; color: #050505 !important; font-weight: 800 !important; border-color: #ff3b30 !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽????????????UX ?????? ???????占썩닪????(Dead Space) ???????占쏙┼??????(???????占쏙┼??????????????? ===================================================================== */ @media screen and (max-width: 1024px) { /* 100dvh ??????????????饔낅떽?????????占썩닪???*/ html body .premium-tech-section { height: 100dvh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column; justify-content: center; overflow: hidden !important; } /* ??????占썩닪占??????????????占썩닪??占쎈춴??횠???肉됬툞?????????占썩닪????????饔낅떽??癰귥옕?占썽뇦猿뗫닑?????????????????????饔낅떽?????????????????????????*/ html body .premium-tech-container { padding: 0 5vw !important; margin: 0 !important; width: 100% !important; height: 85vh !important; /* ???????????????占썩닪????????????????饔낅떽??癰귥옕?占썽뇦猿뗫닑?????????????????*/ display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; } /* ??????? ?????????占쏙┼??????????????占썩닪???????????占쏙┼??????????????????????????????? (?????占썩닪???? ???? */ html body .premium-tech-header { margin-bottom: 4vh !important; } html body .premium-tech-title { font-size: clamp(1.8rem, 5vw, 2.5rem) !important; margin-bottom: 8px !important; } html body .premium-tech-desc { font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important; line-height: 1.5 !important; } /* 4??????占썩닪??占쎈꺌??????占썩닪占???節뗭쓠?棺???占???????????????????占쏙┼??/????占썩닪??????占썩닪????????占썩닪??????????????????????占쏙┼?????????????占쎈㎍???????????????????????*/ html body .core-grid-new { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(2, 1fr) !important; /* ????????????????????????????*/ gap: 16px !important; /* ???????????? ?????????占썩닪??????*/ margin-top: 10px !important; padding: 0 !important; width: 100% !important; flex-grow: 1 !important; /* ??????占썩닪占?????????????????????????????占썩닪???? ??????????*/ max-height: 52vh !important; /* ?????????????????????占쏙┼???????????占쏙┼?? ??????????????????占쏙┼??????占썩닪?????櫻뗫봾?????????占쏙┼???饔낅떽?????????????????*/ } /* ????占썩닪??占쎈꺌??????占썩닪占???節뗭쓠?棺???占????????占?????????占썩닪占??? ?????????????????100% ?饔낅떽??癰귥옕?占썽뇦猿뗫닑??????????????????????????*/ html body .core-grid-new .core-card { padding: 0 !important; height: 100% !important; /* ??????????占쏙┼????????*/ min-height: unset !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; border-radius: 16px !important; /* ???繹먮굟???????????占쏙┼??????????????*/ overflow: hidden !important; } /* ??????????占썩닪占???????占썩닪占?????????占쏙┼?????????????占쏙┼?? ????????????占썩닪??????????????????????????????占쏙┼?????????????????*/ html body .core-grid-new .core-label { font-size: clamp(0.7rem, 2vw, 0.95rem) !important; padding: 6px 14px !important; margin: auto 0 10px 0 !important; /* ???????占쏙┼?????????占썩닪???? ??????*/ } html body .core-grid-new .core-icon i { font-size: clamp(1.8rem, 4vw, 2.8rem) !important; /* ???????占쏙┼??????????????占쏙┼?? */ } html body .core-grid-new .core-icon { margin: 0 0 10px 0 !important; } html body .core-grid-new .core-title { font-size: clamp(1rem, 3vw, 1.35rem) !important; /* ???????占쏙┼????????????占쏙┼??*/ line-height: 1.4 !important; margin: 0 10px auto 10px !important; /* ?????????占쏙┼?????????占썩닪???? ??????*/ word-break: keep-all; } /* ???????占쏙┼???????占썩닪????????????????? */ html body .core-grid-new .core-desc { display: none !important; } /* ??????????????占쎈슦?節낆젂?? ???????占쏙┼???????????????????????? ???????占쏙┼????????????????????? */ html body .core-grid-new .core-btn { margin-top: 0 !important; width: 100% !important; background: #000 !important; color: #fff !important; padding: 10px 0 !important; /* ?饔낅떽?????????????????????????????????????????????????*/ font-size: clamp(0.85rem, 2.5vw, 1.15rem) !important; border: none !important; border-top: 1px solid #222 !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: all 0.3s ease !important; } html body .core-grid-new .core-card:hover .core-btn, html body .core-grid-new .core-card:active .core-btn { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%) !important; color: #050505 !important; font-weight: 800 !important; border-color: #ff3b30 !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽????????????UX ?????? ?饔낅떽?????????占썩닪?管占??占??????????????饔낅떽???????????????占썩닪?????? (???????????占쎈㎍?????????????????????????? ===================================================================== */ @media screen and (max-width: 1024px) { /* 1. ?饔낅떽?????????占썩닪?管占??占??????????????占쎈슦?節낆젂??????????????????????????????占썩닪??????????*/ html body .sf-earth-container { width: 60vw !important; height: 60vw !important; max-width: 300px !important; max-height: 300px !important; margin: -10px auto 10px auto !important; /* ??????????????????占쏙┼?? ????占썩닪???????????????占승€????*/ } /* 2. ????????????????????????????????????????????????????????????????占쏙┼??& ???????????占쏙┼????110px) ???????????????????????????占썩닪???*/ html body .sf-content-wrapper { padding: 50px 5vw 120px 5vw !important; /* ????120px ?????????????????占쏙┼?? ???????占쏙┼????????占썩닪????占??? ????占썩닪?????? */ justify-content: center !important; gap: 10px !important; } /* 3. ??????? ?????????????????????????????????*/ html body .sf-title-group { text-align: center !important; /* ?饔낅떽?????????????????????????????????占쏙┼??????*/ } html body .sf-title-group .sf-main-title { font-size: clamp(1.5rem, 5vw, 2rem) !important; margin-bottom: 5px !important; line-height: 1.2 !important; } html body .sf-title-group .sf-desc { font-size: clamp(0.75rem, 3vw, 0.9rem) !important; line-height: 1.4 !important; } /* 4. ????????????????????????????????(??????????????占썩닪占??????????占쏙┼???????占썩닪?瓘?占???饔낅떽??????????????占썩닪??????) */ html body .sf-right-panel { padding: 15px !important; gap: 8px !important; margin-top: 0 !important; } html body .sf-stat-block { padding-bottom: 8px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; display: flex !important; flex-direction: column !important; align-items: center !important; /* ????占썩닪??????????占쏙┼??????*/ } html body .sf-stat-block:last-child { border-bottom: none !important; padding-bottom: 0 !important; } html body .sf-stat-label { font-size: 0.75rem !important; margin-bottom: 0 !important; color: #888 !important; } html body .sf-stat-value { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; /* ????占썩닪?????40px?????????????????????????????????????????????占썩닪????占쎌럶????*/ line-height: 1.2 !important; } } /* ===================================================================== [2026-09-14] ?占썬꺂??袁ㅻ븶?????占썬꺂????占쏙옙??? ??????占썩닪占?? + 3???熬곣뫖利당뵓????占쎈㈇??????占썬럸? ??????占썩닪?????占썬꺂??袁ㅻ븶?占???占쎈슢???????占썩닪?菅占?????占썩닪?瓘占???????占썩닪?????占쎈슦???? ===================================================================== */ @media screen and (max-width: 767px) { html body .remo-section#ecosystem , html body .remo-section#ecosystem-2 { height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; } html body .remo-section#ecosystem .ecosystem-container , html body .remo-section#ecosystem-2 .ecosystem-container { padding: 55px 4vw 65px 4vw !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } html body .remo-section#ecosystem .ecosystem-header , html body .remo-section#ecosystem-2 .ecosystem-header { margin-bottom: 6px !important; flex-shrink: 0 !important; text-align: center !important; } html body .remo-section#ecosystem .ecosystem-badge , html body .remo-section#ecosystem-2 .ecosystem-badge { margin: 0 auto 10px auto !important; font-size: 0.65rem !important; padding: 4px 10px !important; } html body .remo-section#ecosystem .ecosystem-header h2 , html body .remo-section#ecosystem-2 .ecosystem-header h2 { font-size: clamp(1.2rem, 4.5vw, 1.45rem) !important; margin: 0 0 10px 0 !important; line-height: 1.35 !important; } html body .remo-section#ecosystem .ecosystem-header .one-line-sub , html body .remo-section#ecosystem-2 .ecosystem-header .one-line-sub { font-size: 0.8rem !important; line-height: 1.55 !important; margin: 0 !important; } html body .ecosystem-grid-new { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 6px 0 0 0 !important; padding: 0 !important; flex-grow: 0 !important; } html body .ecosystem-grid-new .eco-card { padding: 8px 0 0 0 !important; height: 102px !important; min-height: 102px !important; max-height: 102px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; border-radius: 12px !important; } html body .ecosystem-grid-new .eco-label { font-size: 0.55rem !important; margin: 0 !important; padding: 2px 8px !important; line-height: 1 !important; } html body .ecosystem-grid-new .eco-icon { width: 28px !important; height: 28px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body .ecosystem-grid-new .eco-icon svg { width: 18px !important; height: 18px !important; } html body .ecosystem-grid-new .eco-title { font-size: 0.88rem !important; margin: 0 !important; line-height: 1 !important; } html body .ecosystem-grid-new .eco-desc { display: none !important; } html body .ecosystem-grid-new .eco-btn { padding: 0 !important; font-size: 0.78rem !important; margin: 0 !important; width: 100% !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } } @media screen and (max-width: 767px) and (max-height: 700px) { html body .remo-section#ecosystem .ecosystem-container , html body .remo-section#ecosystem-2 .ecosystem-container { padding: 48px 4vw 58px 4vw !important; } html body .remo-section#ecosystem .ecosystem-header h2 , html body .remo-section#ecosystem-2 .ecosystem-header h2 { font-size: 1.15rem !important; } html body .ecosystem-grid-new { gap: 6px !important; margin-top: 4px !important; } html body .ecosystem-grid-new .eco-card { height: 94px !important; min-height: 94px !important; max-height: 94px !important; padding-top: 6px !important; } html body .ecosystem-grid-new .eco-icon { width: 24px !important; height: 24px !important; } html body .ecosystem-grid-new .eco-icon svg { width: 16px !important; height: 16px !important; } html body .ecosystem-grid-new .eco-title { font-size: 0.82rem !important; } html body .ecosystem-grid-new .eco-btn { height: 28px !important; font-size: 0.72rem !important; } } /* ===================================================================== [2026-09-10] ?饔낅떽????????????UX ?????? ?????占썩닪??占쎌땡????占썩닪????????占썬럪???Quick Contact) ????占썩닪??????占썩닪???3?????? ===================================================================== */ @media screen and (max-width: 1024px) { /* ?饔낅떽??????????????????????????????饔낅떽????占쎄낄?占썽뇡???????占썩닪??????占썩닪???????????*/ html body .qcb-container { flex-direction: row !important; justify-content: space-around !important; gap: 5px !important; width: 100% !important; } html body .qcb-item { flex: 1 !important; gap: 10px !important; /* ?????????占쏙┼?????????????占쏙┼??????占썩닪??????????*/ } html body .qcb-icon svg { width: 28px !important; /* ?饔낅떽???????????????????饔낅떽???????占썩닪????????????占쏙┼?? ???????占쏙┼?? ????*/ height: 28px !important; } html body .qcb-item span { font-size: 0.75rem !important; /* ?????????占쏙┼????????????????????????占썩닪???????????占쏙┼??????*/ word-break: keep-all !important; text-align: center !important; } /* ???????占쏙┼??????????占썩닪??????????????占쏙┼?? ??????????????占썩닪?????*/ html body .qcb-divider { width: 1px !important; height: 40px !important; margin: auto 0 !important; background: rgba(255, 255, 255, 0.1) !important; /* ???????占쏙┼??????????????????????????占썩닪????*/ } } /* ===================================================================== [2026-09-10] ???????????????????? - Hero CTA / ???????占쏙┼????????????/ ????占썩닪?????????占썩닪???占???????????????/ ?饔낅떽???????????????????占쏙┼?? ===================================================================== */ /* ?????1. Hero Slide CTA Buttons ?????????????????????????????????????????????????????????????????????????????*/ .slide-cta-group { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .slide-cta-btn { display: inline-flex; align-items: center; padding: 12px 28px; border-radius: 4px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: all 0.3s ease; cursor: pointer; } .slide-cta-btn.primary { background: #e63946; color: #ffffff; border: 2px solid #e63946; } .slide-cta-btn.primary:hover { background: transparent; color: #ffffff; border-color: #ffffff; } .slide-cta-btn.secondary { background: transparent; color: rgba(255,255,255,0.9); border: 2px solid rgba(255,255,255,0.5); } .slide-cta-btn.secondary:hover { background: rgba(255,255,255,0.1); border-color: #ffffff; color: #ffffff; } @media (max-width: 768px) { .slide-cta-group { margin-top: 16px; gap: 8px; } .slide-cta-btn { padding: 9px 18px; font-size: 0.75rem; } } /* ?????2. Global Network Stat Ratio ???????????????????????????????????????????????????????????????????????*/ .sf-stat-ratio { font-size: 0.7rem; color: rgba(255,255,255,0.45); margin-top: 2px; letter-spacing: 0.03em; } .sf-stat-ratio strong { color: rgba(255,255,255,0.7); } /* ?????3. Testimonial Section ???????????????????????????????????????????????????????????????????????????????????*/ .testimonial-section { min-height: 100dvh; background: #0a0a0f; display: flex; align-items: center; justify-content: center; padding: 0; } .testimonial-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 40px; } .testimonial-header { text-align: center; margin-bottom: 60px; } .testimonial-title { font-size: clamp(1.75rem, 5vw, 3.2rem); font-weight: 800; color: #ffffff; margin: 12px 0 16px; letter-spacing: -0.02em; } .testimonial-sub { font-size: 1rem; color: rgba(255,255,255,0.5); } .testimonial-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 24px; align-items: start; } .testimonial-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 36px 32px; transition: border-color 0.3s ease, background 0.3s ease; position: relative; } .testimonial-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); } .testimonial-card.featured { background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.3); padding-top: 44px; } .testimonial-card.featured:hover { background: rgba(230,57,70,0.12); border-color: rgba(230,57,70,0.5); } .testimonial-quote-icon { font-size: 3.5rem; line-height: 1; color: rgba(230,57,70,0.4); font-family: Georgia, serif; margin-bottom: 12px; } .testimonial-card.featured .testimonial-quote-icon { color: rgba(230,57,70,0.7); } .testimonial-text { font-size: 0.95rem; line-height: 1.75; color: rgba(255,255,255,0.75); margin-bottom: 28px; word-break: keep-all; } .testimonial-card.featured .testimonial-text { color: rgba(255,255,255,0.9); font-size: 1rem; } .testimonial-author { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(230,57,70,0.15); border: 1px solid rgba(230,57,70,0.3); display: flex; align-items: center; justify-content: center; color: #e63946; font-size: 1.2rem; flex-shrink: 0; } .testimonial-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .testimonial-info strong { font-size: 0.9rem; color: #ffffff; font-weight: 700; } .testimonial-info span { font-size: 0.75rem; color: rgba(255,255,255,0.4); } .testimonial-stars { font-size: 0.7rem; color: #f4c430; letter-spacing: 2px; } @media (max-width: 1024px) { .testimonial-grid { grid-template-columns: 1fr; gap: 16px; max-width: 560px; margin: 0 auto; } .testimonial-card.featured { padding-top: 36px; } html body .testimonial-section { height: auto !important; min-height: 100dvh !important; padding: 40px 0 !important; } .testimonial-container { padding: 40px 20px; } .testimonial-header { margin-bottom: 32px; } } /* ?????4. ?饔낅떽??????????Grandiose ?????????占쏙┼??????占썩닪??????????????????????????????????????????????????????????????????*/ @media (max-width: 768px) { .grandiose-massive-text { overflow: hidden; } .g-text-row { overflow: hidden; line-height: 1 !important; } .g-bold-text { font-size: clamp(2.8rem, 12vw, 5rem) !important; letter-spacing: -0.03em !important; } .g-thin-text { font-size: clamp(2.5rem, 11vw, 4.5rem) !important; letter-spacing: 0.1em !important; } .g-outline-text { font-size: clamp(2rem, 9vw, 4rem) !important; } } /* ===================================================================== [2026-09-10] ???????占쏙┼?????????????????????? v2 ===================================================================== */ /* ?????1. Hero ??????????????????(???????????????占썩닪???蹂Β€???????????? ???????????????????????????????????????????????????????*/ .slide-text-right { max-width: 600px !important; } @media (min-width: 1024px) { .slide-content { padding-left: 8vw !important; padding-right: 8vw !important; } .slide-text-left { display: flex !important; align-items: flex-end !important; padding-bottom: 60px !important; min-width: 160px !important; opacity: 0.15 !important; font-size: 0.7rem !important; letter-spacing: 0.15em !important; color: #fff !important; text-transform: uppercase !important; writing-mode: vertical-rl !important; text-orientation: mixed !important; } .slide-text-left::before { content: "UDR SYSTEM ???SCREEN GOLF SIMULATOR"; } } /* ?????2. Core Card Featured ?????????????????????????????????????????????????????????????????????????????????????????*/ .core-card.featured-card { background: linear-gradient(135deg, rgba(230,57,70,0.12) 0%, rgba(0,0,0,0.8) 100%) !important; border-color: rgba(230,57,70,0.35) !important; box-shadow: 0 0 30px rgba(230,57,70,0.12), inset 0 0 0 1px rgba(230,57,70,0.2) !important; } .core-card.featured-card .core-label { background: rgba(230,57,70,0.9) !important; color: #fff !important; } .core-card.featured-card .core-icon { color: #e63946 !important; } .core-card.featured-card::before { content: "FEATURED"; position: absolute; top: -1px; right: 20px; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.15em; color: #e63946; background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.3); border-top: none; padding: 3px 10px 4px; border-radius: 0 0 6px 6px; } .core-card.featured-card:hover { border-color: rgba(230,57,70,0.6) !important; box-shadow: 0 0 50px rgba(230,57,70,0.2), 0 20px 60px rgba(0,0,0,0.5) !important; } /* ?????3. Vertical Dot Navigator ?????????????????????????????????????????????????????????????????????????????????*/ .dot-navigator { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 9000; pointer-events: auto; } .dot-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; } .dot-nav-item { display: flex; align-items: center; gap: 8px; text-decoration: none; position: relative; cursor: pointer; } .dot-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.5); transition: all 0.3s ease; display: block; flex-shrink: 0; } .dot-nav-item.active .dot-nav-dot { background: #e63946; border-color: #e63946; width: 10px; height: 10px; box-shadow: 0 0 8px rgba(230,57,70,0.6); } .dot-nav-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; color: rgba(255,255,255,0.4); white-space: nowrap; opacity: 0; transform: translateX(4px); transition: all 0.25s ease; pointer-events: none; } .dot-nav-item:hover .dot-nav-label, .dot-nav-item.active .dot-nav-label { opacity: 1; transform: translateX(0); color: rgba(255,255,255,0.85); } .dot-nav-item.active .dot-nav-label { color: #e63946; } /* Light section variant */ .dot-navigator.on-light .dot-nav-dot { background: rgba(0,0,0,0.25); border-color: rgba(0,0,0,0.4); } .dot-navigator.on-light .dot-nav-item.active .dot-nav-dot { background: #e63946; border-color: #e63946; } .dot-navigator.on-light .dot-nav-label { color: rgba(0,0,0,0.4); } .dot-navigator.on-light .dot-nav-item:hover .dot-nav-label, .dot-navigator.on-light .dot-nav-item.active .dot-nav-label { color: rgba(0,0,0,0.7); } @media (max-width: 768px) { .dot-navigator { right: 10px; } .dot-nav-label { display: none; } } /* ?????4. Quick Contact ??????????????占쎄컯?遺븐땡????????????????????????????????????????????????????????????????????????????*/ .quick-contact-banner.qcb-enhanced { position: relative; overflow: hidden; background: #0a0a12 !important; display: flex; align-items: center; justify-content: center; } .qcb-bg-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(230,57,70,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(230,57,70,0.04) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } .qcb-bg-lines::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(230,57,70,0.08) 0%, transparent 70%); } .qcb-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 80px 40px; width: 100%; max-width: 900px; } .qcb-text-group { text-align: center; } .qcb-eyebrow { display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; color: #e63946; margin-bottom: 16px; opacity: 0.9; } .qcb-subtitle { font-size: 1rem; color: rgba(255,255,255,0.45); line-height: 1.7; margin: 12px 0 0; word-break: keep-all; } .qcb-main-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 48px; background: #e63946; color: #fff; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; border: 2px solid #e63946; } .qcb-main-cta:hover { background: transparent; color: #e63946; } @media (max-width: 768px) { .qcb-inner { padding: 50px 20px; gap: 32px; } .qcb-main-cta { padding: 14px 32px; font-size: 0.85rem; width: 100%; justify-content: center; max-width: 320px; } } /* ?????5. Promotional Video Grid ??????????????占썩닪占????????????????????????????????????????????????????????????? */ @media (min-width: 769px) and (max-width: 1024px) { .cream-video-grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important; } .cream-video-item { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 16/9 !important; height: auto !important; } .item-large-left { grid-column: span 2 !important; aspect-ratio: 21/9 !important; } } /* ===================================================================== [2026-09-10] Dot Navigator ???????????????(?????????????占썩닪??????????占쏙┼??????嚥▲굧?占썹춯???????????????????????????? + Quick Contact ?????????占쏙┼?? ??????????????占썩닪?????????? ===================================================================== */ /* ?????Dot Navigator: ????????????????占쏙┼?? ??????????& ?????????占쏙┼?????????????*/ html body .dot-navigator { right: auto !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 9000 !important; background: rgba(0,0,0,0.25) !important; backdrop-filter: blur(8px) !important; border-radius: 30px !important; padding: 12px 10px !important; border: 1px solid rgba(255,255,255,0.1) !important; } /* Dot navigator - ?????????????????????????占썩닪占????????占썩닪占??? ?????(??????????????占썩닪????????????????? */ html body .dot-nav-item { flex-direction: row !important; justify-content: flex-start !important; } html body .dot-nav-label { transform: translateX(-4px) !important; } html body .dot-nav-item:hover .dot-nav-label, html body .dot-nav-item.active .dot-nav-label { transform: translateX(0) !important; } /* ????????????????????????占쏙┼?? */ html body .dot-nav-dot { width: 10px !important; height: 10px !important; background: rgba(255,255,255,0.45) !important; border: 1px solid rgba(255,255,255,0.6) !important; } html body .dot-nav-item.active .dot-nav-dot { width: 12px !important; height: 12px !important; background: #e63946 !important; border-color: #e63946 !important; box-shadow: 0 0 10px rgba(230,57,70,0.7) !important; } /* ???????????占쎈슦?節낆젂???饔낅떽????占쎄낄?占썽뇡???dot */ html body .dot-navigator.on-light { background: rgba(255,255,255,0.6) !important; border-color: rgba(0,0,0,0.12) !important; } html body .dot-navigator.on-light .dot-nav-dot { background: rgba(0,0,0,0.25) !important; border-color: rgba(0,0,0,0.4) !important; } /* ?饔낅떽?????????????????????????????占쏙┼?? (???????占쏙┼?????????占쏙┼?? ???????占쏙┼?? ????????????? */ @media (max-width: 1024px) { html body .dot-navigator { display: none !important; } } /* ?????Quick Contact ?????????占쏙┼??/???????占쏙┼???????????????????????*/ html body .qcb-enhanced .qcb-container { gap: 0 !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 700px !important; } html body .qcb-enhanced .qcb-item { flex: 1 !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; padding: 24px 20px !important; border-radius: 12px !important; transition: background 0.3s ease !important; color: #ffffff !important; text-decoration: none !important; } html body .qcb-enhanced .qcb-item:hover { background: rgba(255,255,255,0.06) !important; } html body .qcb-enhanced .qcb-icon { width: 60px !important; height: 60px !important; border-radius: 50% !important; background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.15) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; } html body .qcb-enhanced .qcb-item:hover .qcb-icon { background: rgba(230,57,70,0.15) !important; border-color: rgba(230,57,70,0.4) !important; } html body .qcb-enhanced .qcb-icon svg { width: 28px !important; height: 28px !important; stroke: rgba(255,255,255,0.8) !important; transition: stroke 0.3s ease !important; } html body .qcb-enhanced .qcb-item:hover .qcb-icon svg { stroke: #e63946 !important; } html body .qcb-enhanced .qcb-item span { font-size: 0.9rem !important; font-weight: 600 !important; color: rgba(255,255,255,0.75) !important; letter-spacing: 0.03em !important; } html body .qcb-enhanced .qcb-divider { width: 1px !important; height: 60px !important; background: rgba(255,255,255,0.1) !important; flex-shrink: 0 !important; } /* ===================================================================== [2026-09-10] featured-card ??dot-navigator ???????????????蹂졻뀳? ===================================================================== */ /* featured-card ???????????占썩닪????*/ html body .core-card.featured-card, html body .core-card.featured-card:hover { background: inherit !important; border-color: inherit !important; box-shadow: inherit !important; } html body .core-card.featured-card::before { display: none !important; } /* dot-navigator ????????????占쏙┼?? */ html body .dot-navigator { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ===================================================================== [2026-09-10] Dot Navigator ????占쎄컯?遺븐땡????????????占쎈툖??獄쏅챷占?????占썩닪????& ?????????? ????占썩닪??????占썩닪??占쎌땡??????????????????占쏙┼?? ???????????????????????????????????????????????????????占썩닪??? ????占썩닪?????? ===================================================================== */ /* ????占썩닪?????????????????????????????占썩닪????*/ html body .dot-navigator { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; /* ?????????? ??????????????????????????right:25px)????占썩닪?????????????????????占썩닪?????? */ position: fixed !important; right: 62px !important; left: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 100001 !important; /* ????占썩닪??????占썩닪??占쎌땡???????????????????????占쏙┼??*/ background: transparent !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; border: none !important; } /* ????????占쎄컯????占쏀렠???*/ html body .dot-nav-list { display: flex !important; flex-direction: column !important; gap: 11px !important; align-items: flex-end !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* ??????????*/ html body .dot-nav-item { display: flex !important; align-items: center !important; flex-direction: row-reverse !important; /* ?????????占쏙┼????????????????????*/ gap: 8px !important; text-decoration: none !important; position: relative !important; } /* ???????????占쏙┼??????????????占쎈툖??獄쏅챷占?????占썩닪????*/ html body .dot-nav-dot { display: block !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important; } /* ????????*/ html body .dot-nav-item.active .dot-nav-dot { width: 8px !important; height: 8px !important; background: #ffffff !important; border-color: #ffffff !important; box-shadow: 0 0 6px rgba(255,255,255,0.5) !important; } /* ???????占쏙┼?? ????*/ html body .dot-nav-item:hover .dot-nav-dot { background: rgba(255, 255, 255, 0.7) !important; border-color: rgba(255, 255, 255, 0.9) !important; } /* ?????????占쏙┼?? ???????占썩닪????????????占쏙┼??, ???????占쏙┼??/??????????????????????????*/ html body .dot-nav-label { font-size: 0.6rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.75) !important; white-space: nowrap !important; opacity: 0 !important; transform: translateX(6px) !important; transition: opacity 0.25s ease, transform 0.25s ease !important; pointer-events: none !important; text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important; } html body .dot-nav-item:hover .dot-nav-label { opacity: 1 !important; transform: translateX(0) !important; } html body .dot-nav-item.active .dot-nav-label { opacity: 0.85 !important; transform: translateX(0) !important; } /* ????????占썩닪??????占썩닪??占쎌땡?ecosystem) ??????????????????占쏙┼?? ????????蒻멤넀占?筌뤿떥??占쏙폍??? */ html body .dot-navigator.on-light .dot-nav-dot { background: rgba(0, 0, 0, 0.25) !important; border-color: rgba(0, 0, 0, 0.5) !important; } html body .dot-navigator.on-light .dot-nav-item.active .dot-nav-dot { background: #111 !important; border-color: #111 !important; box-shadow: 0 0 6px rgba(0,0,0,0.3) !important; } html body .dot-navigator.on-light .dot-nav-label { color: rgba(0, 0, 0, 0.7) !important; text-shadow: none !important; } /* ?饔낅떽????????????????????????占썩닪占??????????????????????????占쏙┼?? ????????占썩닪??????占썩닪占??????????????dot nav ???????占쏙┼?? */ @media (max-width: 1024px) { html body .dot-navigator { display: none !important; } } /* ===================================================================== [2026-09-10] ????占썩닪?????????占썩닪?????????????????????? ?????????占쏙┼??????????????????????????? ===================================================================== */ /* ?饔낅떽????????? ????????占썩닪占????????*/ .sf-dot-gold { background: #f4c430 !important; box-shadow: 0 0 6px rgba(244, 196, 48, 0.6) !important; } /* stat ?????占썩닪???????*/ .sf-stat-block.sf-stat-divider { margin-top: 10px !important; padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } /* ??? ?????????占쏙┼?????????占쏙┼????????占썩닪占????????????*/ .sf-country-flags { margin-top: 18px !important; padding-top: 30px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } /* GLOBAL PARTNERS ?????????占쏙┼?? */ .sf-flags-label { font-size: 0.58rem !important; font-weight: 700 !important; letter-spacing: 0.18em !important; color: rgba(255, 255, 255, 0.3) !important; margin-bottom: 10px !important; } /* ?????????占쏙┼?????*/ .sf-flags-row { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } /* ????占썩닪???占쎈챶?????????????占쏙┼?????????占쏙┼??*/ .sf-flag-tag { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 0.68rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.65) !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 4px !important; padding: 4px 8px !important; transition: all 0.2s ease !important; cursor: default !important; } .sf-flag-tag:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.9) !important; } /* +76????占썩닪???占쎈챶???????????占썩닪???????占썩닪占?????????占쏙┼??*/ .sf-flag-tag.sf-flag-more { color: #7dd3fc !important; border-color: rgba(125, 211, 252, 0.25) !important; background: rgba(125, 211, 252, 0.06) !important; cursor: pointer !important; text-decoration: none !important; } .sf-flag-tag.sf-flag-more:hover { background: rgba(125, 211, 252, 0.12) !important; border-color: rgba(125, 211, 252, 0.4) !important; } /* ?饔낅떽???????????????*/ @media (max-width: 768px) { .sf-country-flags { margin-top: 12px !important; padding-top: 12px !important; } .sf-flag-tag { font-size: 0.62rem !important; padding: 3px 6px !important; } } /* ===================================================================== [2026-09-10] ?????????????占쏙┼?? ???????占쏙┼?? ?????占썩닪???????????????#e63946)?????????占쏙┼?? ===================================================================== */ /* ???????????????占쎈툖?????????占썩닪????????????????????????*/ html body .sf-flag-tag.sf-flag-more { color: #e63946 !important; border-color: rgba(230, 57, 70, 0.3) !important; background: rgba(230, 57, 70, 0.06) !important; cursor: pointer !important; } html body .sf-flag-tag.sf-flag-more:hover { background: rgba(230, 57, 70, 0.12) !important; border-color: rgba(230, 57, 70, 0.5) !important; color: #e63946 !important; } /* ???????占쏙┼?? flag ???????占쏙┼?????????占쏙┼???????????????????????占썩닪???*/ html body .sf-flag-tag:hover { color: rgba(255, 255, 255, 0.95) !important; border-color: rgba(255, 255, 255, 0.25) !important; background: rgba(255, 255, 255, 0.09) !important; } /* ===================================================================== [2026-09-10] ??? ?????????占쏙┼????????+ ?饔낅떽????占쎄낄?占썽뇡???hover ????????????占쏙┼?? ===================================================================== */ /* ????Full-Width ?????????占쏙┼????*/ .sf-flags-bottom-bar { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; border-top: 1px solid rgba(255,255,255,0.07) !important; background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; z-index: 10 !important; padding: 0 !important; } .sf-flags-bar-inner { display: flex !important; align-items: center !important; gap: 16px !important; padding: 14px 40px !important; overflow-x: auto !important; scrollbar-width: none !important; } .sf-flags-bar-inner::-webkit-scrollbar { display: none !important; } .sf-flags-bar-label { font-size: 0.55rem !important; font-weight: 700 !important; letter-spacing: 0.18em !important; color: rgba(255,255,255,0.25) !important; white-space: nowrap !important; flex-shrink: 0 !important; padding-right: 12px !important; border-right: 1px solid rgba(255,255,255,0.1) !important; } .sf-flags-bar-row { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; } /* ?饔낅떽????占쎄낄?占썽뇡???flag-tag ???????占쏙┼?? ???????????????占쏙┼??*/ html body .sf-flag-tag:hover { background: rgba(230, 57, 70, 0.1) !important; border-color: rgba(230, 57, 70, 0.4) !important; color: #e63946 !important; } /* +76????占썩닪???占쎈챶??????????????占쏙┼??*/ html body .sf-flag-tag.sf-flag-more { color: #e63946 !important; border-color: rgba(230, 57, 70, 0.3) !important; background: rgba(230, 57, 70, 0.07) !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; cursor: pointer !important; } html body .sf-flag-tag.sf-flag-more:hover { background: rgba(230, 57, 70, 0.15) !important; border-color: rgba(230, 57, 70, 0.6) !important; color: #e63946 !important; } /* sci-fi globe section???position:relative ?????*/ .sci-fi-globe-section { position: relative !important; } /* ?饔낅떽?????????????????????????????占쏙┼?? ???????占쏙┼?????????????*/ @media (max-width: 768px) { .sf-flags-bar-inner { padding: 10px 20px !important; gap: 8px !important; } .sf-flags-bar-label { display: none !important; } } /* ===================================================================== [2026-09-10] UDR Smart Store Ecosystem Modern Dark Glassmorphism Red Accent ===================================================================== */ html body #ecosystem , /* ===================================================================== [2026-09-10] UDR Smart Store Ecosystem Modern Dark Glassmorphism Red Accent ===================================================================== */ html body #ecosystem-2 { background: #08090d !important; background-image: radial-gradient(circle at 50% 35%, rgba(230, 57, 70, 0.09) 0%, transparent 65%) !important; padding: 100px 0; } html body #ecosystem .remo-header h2 , html body #ecosystem-2 .remo-header h2 { font-size: 38px !important; font-weight: 800 !important; color: #ffffff !important; margin-bottom: 15px !important; line-height: 1.3 !important; } html body #ecosystem .remo-header p , html body #ecosystem-2 .remo-header p { font-size: 18px !important; color: #94a3b8 !important; margin-bottom: 40px !important; } html body .eco-card, html body .dark-mode-override .eco-card { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; color: #ffffff !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 15px 35px rgba(0,0,0,0.4) !important; position: relative !important; overflow: hidden !important; border-radius: 24px !important; } html body .eco-card:hover, html body .dark-mode-override .eco-card:hover { transform: translateY(-8px) !important; background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(230, 57, 70, 0.45) !important; box-shadow: 0 25px 50px rgba(0,0,0,0.7), 0 0 30px rgba(230, 57, 70, 0.25) !important; } html body .eco-label, html body .dark-mode-override .eco-label { background: rgba(230, 57, 70, 0.12) !important; color: #ff4d4d !important; border: 1px solid rgba(230, 57, 70, 0.3) !important; transition: all 0.3s ease !important; } html body .eco-card:hover .eco-label, html body .dark-mode-override .eco-card:hover .eco-label { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; } html body .eco-icon, html body .dark-mode-override .eco-icon { color: #ffffff !important; transition: all 0.3s ease !important; } html body .eco-card:hover .eco-icon, html body .dark-mode-override .eco-card:hover .eco-icon { color: #ff4d4d !important; transform: scale(1.08) !important; } html body .eco-title, html body .dark-mode-override .eco-title { color: #ffffff !important; } html body .eco-desc, html body .dark-mode-override .eco-desc { color: #94a3b8 !important; } html body .eco-btn, html body .dark-mode-override .eco-btn { background: rgba(255, 255, 255, 0.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; transition: all 0.3s ease !important; } html body .eco-card:hover .eco-btn, html body .dark-mode-override .eco-card:hover .eco-btn { background: linear-gradient(135deg, #e63946 0%, #b81d24 100%) !important; color: #ffffff !important; border-top-color: transparent !important; font-weight: 700 !important; } /* ===================================================================== [2026-09-10] Dot Navigator Left Placement (No Overlap with Quick Menu) ===================================================================== */ @media screen and (min-width: 1025px) { html body .dot-navigator { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; position: fixed !important; left: 30px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 100001 !important; background: transparent !important; backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; border: none !important; } html body .dot-nav-list { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } html body .dot-nav-item { display: flex !important; align-items: center !important; flex-direction: row !important; gap: 10px !important; text-decoration: none !important; position: relative !important; } html body .dot-nav-dot { display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; box-shadow: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important; } html body .dot-nav-item.active .dot-nav-dot { width: 9px !important; height: 9px !important; background: #e63946 !important; border-color: #ff4d4d !important; box-shadow: 0 0 10px rgba(230, 57, 70, 0.7) !important; } html body .dot-nav-item:hover .dot-nav-dot { background: rgba(230, 57, 70, 0.8) !important; border-color: #ff4d4d !important; } html body .dot-nav-label { font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; color: rgba(255, 255, 255, 0.85) !important; white-space: nowrap !important; opacity: 0 !important; transform: translateX(-6px) !important; transition: opacity 0.25s ease, transform 0.25s ease !important; pointer-events: none !important; text-shadow: 0 1px 4px rgba(0,0,0,0.9) !important; } html body .dot-nav-item:hover .dot-nav-label { opacity: 1 !important; transform: translateX(0) !important; color: #ffffff !important; } html body .dot-nav-item.active .dot-nav-label { opacity: 1 !important; transform: translateX(0) !important; color: #ff4d4d !important; font-weight: 800 !important; } } /* ===================================================================== [2026-09-10] Clean Minimal Left Dot Navigator (Remove Gray Box & Clipping) ===================================================================== */ html body #dotNavigator, html body .dot-navigator, html body .dot-navigator.on-light, html body .dot-navigator.on-dark { position: fixed !important; left: 28px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 100001 !important; /* ?????????占썩닪??????占썩닪??占쎌땡????????????????占쏙┼??*/ background: transparent !important; background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; width: auto !important; height: auto !important; overflow: visible !important; } html body .dot-nav-list { display: flex !important; flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; list-style: none !important; overflow: visible !important; } html body .dot-nav-item { display: flex !important; align-items: center !important; flex-direction: row !important; gap: 10px !important; text-decoration: none !important; position: relative !important; overflow: visible !important; } html body .dot-nav-dot { display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; box-shadow: none !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important; } html body .dot-nav-item.active .dot-nav-dot { width: 9px !important; height: 9px !important; background: #e63946 !important; border-color: #ff4d4d !important; box-shadow: 0 0 10px rgba(230, 57, 70, 0.8) !important; } html body .dot-nav-item:hover .dot-nav-dot { background: rgba(230, 57, 70, 0.8) !important; border-color: #ff4d4d !important; } html body .dot-nav-label { font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.05em !important; color: rgba(255, 255, 255, 0.85) !important; white-space: nowrap !important; opacity: 0 !important; transform: translateX(-6px) !important; transition: opacity 0.25s ease, transform 0.25s ease !important; pointer-events: none !important; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8) !important; } html body .dot-nav-item:hover .dot-nav-label { opacity: 1 !important; transform: translateX(0) !important; color: #ffffff !important; } html body .dot-nav-item.active .dot-nav-label { opacity: 1 !important; transform: translateX(0) !important; color: #ff4d4d !important; font-weight: 800 !important; } @media (max-width: 1024px) { html body #dotNavigator, html body .dot-navigator { display: none !important; } } /* ===================================================================== [2026-09-10] Technology Section (#technology) Luxury Glassmorphism & Red Accent ===================================================================== */ html body #technology.premium-tech-section { background: #06070a !important; background-image: radial-gradient(circle at 50% 30%, rgba(230, 57, 70, 0.08) 0%, transparent 65%) !important; } html body #technology .premium-tech-header .gold-motto-badge { background: rgba(230, 57, 70, 0.12) !important; color: #ff4d4d !important; border: 1px solid rgba(230, 57, 70, 0.3) !important; letter-spacing: 2.5px !important; box-shadow: 0 0 15px rgba(230, 57, 70, 0.15) !important; } html body #technology .premium-tech-title { color: #ffffff !important; } html body #technology .premium-tech-title .gold-highlight { background: linear-gradient(135deg, #ffffff 30%, #ff4d4d 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 25px rgba(230, 57, 70, 0.3) !important; } html body #technology .premium-tech-desc { color: #94a3b8 !important; } html body #technology .premium-tech-title .red-highlight { background: none !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; text-shadow: none !important; } /* Core Cards Glassmorphism */ html body .core-grid-new .core-card, html body .core-card { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; color: #ffffff !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important; position: relative !important; overflow: hidden !important; border-radius: 24px !important; } html body .core-grid-new .core-card:hover, html body .core-card:hover { transform: translateY(-8px) !important; background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(230, 57, 70, 0.45) !important; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(230, 57, 70, 0.25) !important; } /* Border Light Beam (Red Accent) */ html body .core-card::before { background: linear-gradient( 135deg, transparent 0%, transparent 35%, rgba(230, 57, 70, 0.5) 44%, #ffffff 50%, rgba(230, 57, 70, 0.95) 55%, transparent 65%, transparent 100% ) !important; } html body .core-grid-new .core-label, html body .core-label { background: rgba(230, 57, 70, 0.12) !important; color: #ff4d4d !important; border: 1px solid rgba(230, 57, 70, 0.3) !important; transition: all 0.3s ease !important; } html body .core-grid-new .core-card:hover .core-label, html body .core-card:hover .core-label { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; } html body .core-grid-new .core-icon, html body .core-icon { color: #ffffff !important; transition: all 0.3s ease !important; } html body .core-grid-new .core-card:hover .core-icon, html body .core-card:hover .core-icon { color: #ff4d4d !important; transform: scale(1.08) !important; } html body .core-grid-new .core-title, html body .core-title { color: #ffffff !important; } html body .core-grid-new .core-desc, html body .core-desc { color: #94a3b8 !important; } html body .core-grid-new .core-btn, html body .core-btn { background: rgba(255, 255, 255, 0.05) !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; transition: all 0.3s ease !important; } html body .core-grid-new .core-card:hover .core-btn, html body .core-card:hover .core-btn, html body .core-grid-new .core-card:active .core-btn { background: linear-gradient(135deg, #e63946 0%, #b81d24 100%) !important; color: #ffffff !important; border-top-color: transparent !important; border-color: transparent !important; font-weight: 700 !important; } /* ===================================================================== [2026-09-10] Glass Light Beam Reflection Effect on Hover (???????占쏙┼??????占쎌€ル럯???????????????? ===================================================================== */ html body .core-card, html body .eco-card { position: relative !important; overflow: hidden !important; } /* 1. ?????????占쏙┼?????????占쏙┼?????關???占쎈き???占?占???????(Border Glass Light Beam) */ html body .core-card::before, html body .eco-card::before { content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1.5px !important; background: linear-gradient( 135deg, transparent 0%, transparent 32%, rgba(255, 255, 255, 0.4) 42%, #ffffff 50%, rgba(255, 77, 77, 0.95) 58%, transparent 68%, transparent 100% ) !important; background-size: 300% 300% !important; background-position: 0% 0% !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.3s ease !important; z-index: 10 !important; } html body .core-card:hover::before, html body .eco-card:hover::before { opacity: 1 !important; animation: glassBorderReflect 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes glassBorderReflect { 0% { background-position: 0% 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { background-position: 100% 100%; opacity: 0.85; } } /* 2. ????占썩닪??占쎈꺌??????????占쏙┼?????????????????????占쏙┼?????????(Surface Glass Sheen Sweep) */ html body .core-card::after, html body .eco-card::after { content: '' !important; position: absolute !important; top: -50% !important; left: -150% !important; width: 200% !important; height: 200% !important; background: linear-gradient( 115deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.04) 46%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 77, 77, 0.15) 54%, transparent 60%, transparent 100% ) !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.2s ease !important; z-index: 2 !important; } html body .core-card:hover::after, html body .eco-card:hover::after { opacity: 1 !important; animation: glassSurfaceSweep 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes glassSurfaceSweep { 0% { transform: translate(-30%, -30%); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(50%, 50%); opacity: 0; } } /* ===================================================================== [2026-09-10] Remove Yellow Mouse Glow (???????????????????????占쏙┼??& ??????????????????????????占썩닪?????????????占썩닪??????) ===================================================================== */ html body .core-card::before, html body .eco-card::before { background: radial-gradient( 600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.05), transparent 50% ) !important; } /* ===================================================================== [2026-09-10] UDR Ecosystem Modern Light Studio Section (?????????占쏙┼??????????????????占썩닪????) ===================================================================== */ html body #ecosystem , /* ===================================================================== [2026-09-10] UDR Ecosystem Modern Light Studio Section (?????????占쏙┼??????????????????占썩닪????) ===================================================================== */ html body #ecosystem-2 { background: #f8fafc !important; background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; padding: 100px 0 !important; } html body #ecosystem .remo-header h2 , html body #ecosystem-2 .remo-header h2 { font-size: 38px !important; font-weight: 800 !important; color: #0f172a !important; margin-bottom: 15px !important; line-height: 1.3 !important; } html body #ecosystem .remo-header p , html body #ecosystem-2 .remo-header p { font-size: 18px !important; color: #64748b !important; margin-bottom: 40px !important; } html body #ecosystem .ecosystem-badge , html body #ecosystem-2 .ecosystem-badge { background: transparent !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; font-weight: 700 !important; letter-spacing: 1.5px !important; } /* Crisp Modern White Cards */ html body .ecosystem-grid-new .eco-card, html body .eco-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; color: #0f172a !important; border-radius: 24px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; } html body .ecosystem-grid-new .eco-card:hover, html body .eco-card:hover { transform: translateY(-8px) !important; background: #ffffff !important; border-color: rgba(230, 57, 70, 0.4) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12), 0 0 25px rgba(230, 57, 70, 0.15) !important; } html body .eco-card .eco-label { background: transparent !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.2) !important; transition: all 0.3s ease !important; font-weight: 700 !important; } html body .eco-card:hover .eco-label { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; } html body .eco-card .eco-icon { color: #0f172a !important; transition: all 0.3s ease !important; } html body .eco-card:hover .eco-icon { color: #e63946 !important; transform: scale(1.08) !important; } html body .eco-card .eco-title { color: #0f172a !important; font-weight: 800 !important; } html body .eco-card .eco-desc { color: #475569 !important; } html body .eco-card .eco-btn { background: linear-gradient(135deg, #e63946 0%, #b81d24 100%) !important; color: #ffffff !important; border: none !important; border-radius: 12px !important; transition: all 0.3s ease !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35) !important; width: calc(100% - 32px) !important; margin: 12px 16px 16px 16px !important; } html body .eco-card:hover .eco-btn { background: linear-gradient(135deg, #ff4d5a 0%, #cc1b23 100%) !important; color: #ffffff !important; border-top-color: transparent !important; font-weight: 700 !important; box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5) !important; transform: translateY(-2px) !important; } /* Light Mode Dot Navigator adjustments for ecosystem section */ html body #dotNavigator.on-light .dot-nav-dot { background: rgba(15, 23, 42, 0.3) !important; border-color: rgba(15, 23, 42, 0.5) !important; } html body #dotNavigator.on-light .dot-nav-item.active .dot-nav-dot { background: #e63946 !important; border-color: #e63946 !important; box-shadow: 0 0 8px rgba(230, 57, 70, 0.6) !important; } html body #dotNavigator.on-light .dot-nav-label { color: #334155 !important; text-shadow: none !important; } html body #dotNavigator.on-light .dot-nav-item.active .dot-nav-label { color: #e63946 !important; } /* ===================================================================== [2026-09-10] Strict Border-Only Light Reflection (???????占쏙┼???????????????& ???????占쏙┼?? 1.5px ????????????????占썩닪????占쎈뭶??????? ===================================================================== */ /* 1. ???????占쏙┼?????::after) ??????????*/ html body .core-card::after, html body .eco-card::after, html body .core-card:hover::after, html body .eco-card:hover::after { display: none !important; content: none !important; opacity: 0 !important; animation: none !important; } /* 2. ???????占쏙┼?? 1.5px ?????????????::before)???????????????????????????????????????*/ html body .core-card::before, html body .eco-card::before { content: '' !important; position: absolute !important; inset: -1px !important; border-radius: inherit !important; padding: 1.5px !important; /* ???????占쏙┼?? 1.5px ?????????占쏙┼???????????????占썩닪???*/ background: linear-gradient( 135deg, transparent 0%, transparent 35%, rgba(255, 255, 255, 0.6) 44%, #ffffff 50%, rgba(255, 77, 77, 0.95) 56%, transparent 65%, transparent 100% ) !important; background-size: 300% 300% !important; background-position: 0% 0% !important; /* ????占썩닪??占쎈꺌??????????占쏙┼?????????????1.5px ?????????占쏙┼??????????????????????????*/ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; pointer-events: none !important; opacity: 0 !important; transition: opacity 0.25s ease !important; z-index: 10 !important; } html body .core-card:hover::before, html body .eco-card:hover::before { opacity: 1 !important; animation: borderLineReflect 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } @keyframes borderLineReflect { 0% { background-position: 0% 0%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { background-position: 100% 100%; opacity: 0.9; } } /* ===================================================================== [2026-09-10] Testimonials Section (#testimonials) Light Studio Edition ===================================================================== */ html body #testimonials.testimonial-section { background: #f8fafc !important; background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important; padding: 100px 0 !important; } html body #testimonials .clean-pill-badge { background: transparent !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; font-weight: 700 !important; letter-spacing: 1.5px !important; } html body #testimonials .testimonial-title { color: #0f172a !important; font-weight: 800 !important; } html body #testimonials .testimonial-sub { color: #64748b !important; } html body #testimonials .testimonial-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 24px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } html body #testimonials .testimonial-card:hover { transform: translateY(-6px) !important; border-color: rgba(230, 57, 70, 0.35) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important; } html body #testimonials .testimonial-card.featured { background: #ffffff !important; border: 2px solid #e63946 !important; box-shadow: 0 15px 35px rgba(230, 57, 70, 0.12) !important; } html body #testimonials .testimonial-card.featured:hover { transform: translateY(-8px) !important; box-shadow: 0 25px 50px rgba(230, 57, 70, 0.2) !important; } html body #testimonials .testimonial-quote-icon { color: rgba(230, 57, 70, 0.35) !important; } html body #testimonials .testimonial-card.featured .testimonial-quote-icon { color: #e63946 !important; } html body #testimonials .testimonial-text { color: #1e293b !important; font-weight: 500 !important; } html body #testimonials .testimonial-card.featured .testimonial-text { color: #0f172a !important; font-weight: 600 !important; } html body #testimonials .testimonial-author { border-top: 1px solid #f1f5f9 !important; } html body #testimonials .testimonial-avatar { background: rgba(230, 57, 70, 0.1) !important; border: 1px solid rgba(230, 57, 70, 0.3) !important; color: #e63946 !important; } html body #testimonials .testimonial-info strong { color: #0f172a !important; } html body #testimonials .testimonial-info span { color: #64748b !important; } html body #testimonials .testimonial-stars { color: #e63946 !important; } /* ===================================================================== [2026-09-10] Dot Navigator Light/Dark Visibility & Remove Black Text Blur ===================================================================== */ /* 1. ?????????占쏙┼?????????????????????????(?饔낅떽????占쎄낄?占썽뇡????饔낅떽????占쎄낄?占썽뇡????????占썩닪???? */ html body .dot-nav-label { text-shadow: none !important; filter: none !important; } /* 2. ??????????????????????(on-dark / ????占썩닪????? */ html body .dot-navigator.on-dark .dot-nav-dot, html body .dot-navigator:not(.on-light) .dot-nav-dot { background: rgba(255, 255, 255, 0.35) !important; border: 1px solid rgba(255, 255, 255, 0.6) !important; } html body .dot-navigator.on-dark .dot-nav-item.active .dot-nav-dot, html body .dot-navigator:not(.on-light) .dot-nav-item.active .dot-nav-dot { background: #e63946 !important; border-color: #ff4d4d !important; box-shadow: 0 0 10px rgba(230, 57, 70, 0.7) !important; } html body .dot-navigator.on-dark .dot-nav-label, html body .dot-navigator:not(.on-light) .dot-nav-label { color: rgba(255, 255, 255, 0.85) !important; } html body .dot-navigator.on-dark .dot-nav-item.active .dot-nav-label, html body .dot-navigator:not(.on-light) .dot-nav-item.active .dot-nav-label { color: #ff4d4d !important; font-weight: 800 !important; } /* 3. ?????????占쏙┼??????占썩닪??????占썩닪??占쎌땡???????????(on-light) ????????????????????????????????& ?????????占쏙┼????????????????????????占쏙┼???????*/ html body .dot-navigator.on-light .dot-nav-dot { background: rgba(15, 23, 42, 0.3) !important; border: 1.5px solid rgba(15, 23, 42, 0.5) !important; box-shadow: none !important; } html body .dot-navigator.on-light .dot-nav-item:hover .dot-nav-dot { background: rgba(15, 23, 42, 0.6) !important; border-color: rgba(15, 23, 42, 0.8) !important; } html body .dot-navigator.on-light .dot-nav-item.active .dot-nav-dot { background: #e63946 !important; border-color: #e63946 !important; box-shadow: 0 0 8px rgba(230, 57, 70, 0.5) !important; } html body .dot-navigator.on-light .dot-nav-label { color: #334155 !important; text-shadow: none !important; font-weight: 700 !important; } html body .dot-navigator.on-light .dot-nav-item:hover .dot-nav-label { color: #0f172a !important; } html body .dot-navigator.on-light .dot-nav-item.active .dot-nav-label { color: #e63946 !important; font-weight: 800 !important; } /* ===================================================================== [2026-09-10] Vertical Glass Capsule Pill Box for Dot Navigator (???????????占썩닪???????????? ===================================================================== */ html body #dotNavigator, html body .dot-navigator { position: fixed !important; left: 28px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 100001 !important; /* ????????饔낅떽??癰귨퐢?占??? ????????占쏙┼?? ??????????????占썩닪??????????占썩닪?管占??*/ border-radius: 40px !important; padding: 16px 12px !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; width: auto !important; height: auto !important; overflow: visible !important; } /* 1. ??????????????????????(Dark Glass Capsule) */ html body #dotNavigator.on-dark, html body .dot-navigator.on-dark, html body .dot-navigator:not(.on-light) { background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; } /* 2. ?????????占쏙┼??????占썩닪??????占썩닪??占쎌땡???????????(Light Glass Capsule) */ html body #dotNavigator.on-light, html body .dot-navigator.on-light { background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.04) !important; } /* ????占쎄컯????占쏀렠???????占썩닪???????????????占쏙┼?? ????????*/ html body .dot-nav-list { display: flex !important; flex-direction: column !important; gap: 11px !important; align-items: flex-start !important; padding: 0 !important; margin: 0 !important; list-style: none !important; overflow: visible !important; } html body .dot-nav-item { display: flex !important; align-items: center !important; flex-direction: row !important; gap: 10px !important; text-decoration: none !important; position: relative !important; overflow: visible !important; } @media (max-width: 1024px) { html body #dotNavigator, html body .dot-navigator { display: none !important; } } /* ===================================================================== [2026-09-10] HUD Capsule Pill Box Design Elements (????????????占썩닪??占쏙옙???, ???????占쏙┼???????????? ?????? ===================================================================== */ html body #dotNavigator, html body .dot-navigator { position: fixed !important; left: 28px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 100001 !important; display: flex !important; flex-direction: column !important; align-items: center !important; border-radius: 40px !important; padding: 16px 10px !important; width: 44px !important; height: auto !important; box-sizing: border-box !important; overflow: visible !important; } /* 1. ????????????????占썩닪??占쏙옙??? ?????????占쏙┼?? */ .capsule-header-icon { font-size: 0.95rem; color: #e63946; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 0 5px rgba(230, 57, 70, 0.6)); z-index: 5; } /* 2. ???????????????占쎈㎍????????????????????????????占쏙┼??*/ .capsule-track-line { position: absolute; top: 42px; bottom: 32px; left: 50%; transform: translateX(-50%); width: 1.5px; z-index: 1; transition: background 0.3s ease; } html body #dotNavigator.on-dark .capsule-track-line, html body .dot-navigator:not(.on-light) .capsule-track-line { background: rgba(255, 255, 255, 0.12) !important; } html body #dotNavigator.on-light .capsule-track-line { background: rgba(15, 23, 42, 0.12) !important; } /* 3. ????????????????????占썩닪占???????占썩닪?????????占쏙┼??*/ .capsule-footer-dot { width: 4px; height: 4px; border-radius: 50%; background: #e63946; margin-top: 12px; opacity: 0.7; z-index: 5; } /* 4. ????????占쎄컯????占쏀렠??????????占쏙┼??????????*/ html body .dot-nav-list { display: flex !important; flex-direction: column !important; gap: 13px !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; list-style: none !important; position: relative !important; z-index: 5 !important; width: 100% !important; } html body .dot-nav-item { display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; width: 24px !important; height: 18px !important; text-decoration: none !important; } /* 5. ???????????*/ html body .dot-nav-dot { display: block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; z-index: 5 !important; } html body #dotNavigator.on-dark .dot-nav-dot, html body .dot-navigator:not(.on-light) .dot-nav-dot { background: #000000 !important; border: 1.5px solid rgba(255, 255, 255, 0.5) !important; } html body #dotNavigator.on-light .dot-nav-dot { background: #ffffff !important; border: 1.5px solid rgba(15, 23, 42, 0.5) !important; } html body .dot-nav-item.active .dot-nav-dot, html body #dotNavigator.on-light .dot-nav-item.active .dot-nav-dot { width: 10px !important; height: 10px !important; background: #e63946 !important; border-color: #ff4d4d !important; box-shadow: 0 0 10px rgba(230, 57, 70, 0.8) !important; } /* 6. ?????????????????????????????????????????????(Glass Tooltip Pill) */ html body .dot-nav-label { position: absolute !important; left: 36px !important; top: 50% !important; transform: translateY(-50%) translateX(-6px) !important; white-space: nowrap !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; padding: 5px 12px !important; border-radius: 12px !important; opacity: 0 !important; pointer-events: none !important; transition: opacity 0.25s ease, transform 0.25s ease !important; z-index: 100 !important; } /* ???????占쏙┼???饔낅떽????占쎄낄?占썽뇡???????????????????*/ html body #dotNavigator.on-dark .dot-nav-label, html body .dot-navigator:not(.on-light) .dot-nav-label { background: rgba(10, 10, 12, 0.9) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important; } html body #dotNavigator.on-dark .dot-nav-item.active .dot-nav-label, html body .dot-navigator:not(.on-light) .dot-nav-item.active .dot-nav-label { color: #ff4d4d !important; border-color: rgba(230, 57, 70, 0.4) !important; } /* ???????????占쎈슦?節낆젂???饔낅떽????占쎄낄?占썽뇡???????????????????*/ html body #dotNavigator.on-light .dot-nav-label { background: #ffffff !important; color: #0f172a !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; } html body #dotNavigator.on-light .dot-nav-item.active .dot-nav-label { color: #e63946 !important; border-color: rgba(230, 57, 70, 0.3) !important; } /* ???????占쏙┼?? / ???????????????????????*/ html body .dot-nav-item:hover .dot-nav-label, html body .dot-nav-item.active .dot-nav-label { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } /* ===================================================================== [2026-09-10] Globe HUD Line Flags Row (GLOBAL PARTNERS ???????占쏙┼??????占썩닪??????占썩닪占????????占썩닪??????) ===================================================================== */ .sf-flags-hud-row { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 16px !important; align-items: center !important; max-width: 620px !important; z-index: 10 !important; position: relative !important; } .sf-flags-hud-row .sf-flag-tag { background: rgba(0, 0, 0, 0.55) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 8px !important; padding: 6px 12px !important; font-size: 0.8rem !important; color: #ffffff !important; transition: all 0.3s ease !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .sf-flags-hud-row .sf-flag-tag:hover { border-color: #e63946 !important; color: #ffffff !important; transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3) !important; } .sf-flags-hud-row .sf-flag-more { background: rgba(230, 57, 70, 0.15) !important; border: 1px solid rgba(230, 57, 70, 0.4) !important; color: #ff4d4d !important; text-decoration: none !important; font-weight: 700 !important; border-radius: 8px !important; padding: 6px 14px !important; font-size: 0.8rem !important; transition: all 0.3s ease !important; } .sf-flags-hud-row .sf-flag-more:hover { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important; } /* ?????????????占쏙┼?? ?饔낅떽???壤굿€??占쎈㎍??????占썩닪?????*/ .sf-flags-bottom-bar { display: none !important; } /* ===================================================================== [2026-09-10] Testimonial Cards Refined Typography & Star Rating Styling ===================================================================== */ html body #testimonials .testimonial-card { padding: 42px 36px !important; border-radius: 28px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } html body #testimonials .testimonial-quote-icon { font-size: 2.2rem !important; line-height: 1 !important; color: #e63946 !important; opacity: 0.85 !important; margin-bottom: 16px !important; font-family: Georgia, serif !important; } html body #testimonials .testimonial-text { font-size: 1.02rem !important; line-height: 1.8 !important; font-weight: 500 !important; color: #334155 !important; letter-spacing: -0.015em !important; margin-bottom: 32px !important; word-break: keep-all !important; } html body #testimonials .testimonial-card.featured .testimonial-text { font-size: 1.08rem !important; line-height: 1.85 !important; font-weight: 600 !important; color: #0f172a !important; letter-spacing: -0.015em !important; } html body #testimonials .testimonial-author { display: flex !important; align-items: center !important; gap: 14px !important; border-top: 1px solid #e2e8f0 !important; padding-top: 24px !important; margin-top: auto !important; } html body #testimonials .testimonial-avatar { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: transparent !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; color: #e63946 !important; font-size: 1.3rem !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } html body #testimonials .testimonial-info { display: flex !important; flex-direction: column !important; gap: 3px !important; flex: 1 !important; } html body #testimonials .testimonial-info strong { font-size: 1.05rem !important; font-weight: 700 !important; color: #0f172a !important; } html body #testimonials .testimonial-info span { font-size: 0.83rem !important; color: #64748b !important; font-weight: 400 !important; } /* ???????????????????占썩닪占?????????????????占쏙┼?? (Spaced Warm Gold Stars) */ html body #testimonials .testimonial-stars { font-size: 0.85rem !important; color: #f59e0b !important; letter-spacing: 3px !important; font-weight: 800 !important; filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.35)) !important; display: flex !important; align-items: center !important; } /* ===================================================================== [2026-09-10] +76????占썩닪???占쎈챶???????????????????????占쏙┼??????占썩닪???????占썩닪占????????????占쏙┼?? ?????????占썩닪?瓘占????????占썩닪??????& ??????????????占썩닪????? ===================================================================== */ html body .sf-flags-hud-row a.sf-flag-more, html body a.sf-flag-tag.sf-flag-more, html body .sf-flag-more { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: rgba(230, 57, 70, 0.2) !important; border: 1.5px solid #e63946 !important; color: #ff4d4d !important; font-weight: 700 !important; border-radius: 8px !important; padding: 6px 14px !important; font-size: 0.82rem !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 100 !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } html body .sf-flags-hud-row a.sf-flag-more:hover, html body a.sf-flag-tag.sf-flag-more:hover, html body .sf-flag-more:hover { background: linear-gradient(135deg, #e63946 0%, #b81d24 100%) !important; color: #ffffff !important; border-color: #ff4d4d !important; transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 8px 25px rgba(230, 57, 70, 0.6) !important; font-weight: 800 !important; } /* ===================================================================== [2026-09-10] Enlarge Quote Icon, Single Line Subtitle, Stars Below Subtitle ===================================================================== */ html body #testimonials .testimonial-quote-icon { font-size: 3.8rem !important; line-height: 0.8 !important; color: #e63946 !important; opacity: 0.85 !important; margin-bottom: 14px !important; font-family: Georgia, serif !important; } html body #testimonials .testimonial-info { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 !important; min-width: 0 !important; } html body #testimonials .testimonial-info strong { font-size: 1.05rem !important; font-weight: 700 !important; color: #0f172a !important; line-height: 1.2 !important; } html body #testimonials .testimonial-info span { font-size: 0.82rem !important; color: #64748b !important; font-weight: 400 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; } html body #testimonials .testimonial-stars { font-size: 0.92rem !important; color: #f59e0b !important; letter-spacing: 2px !important; font-weight: 800 !important; filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.35)) !important; margin-top: 3px !important; display: flex !important; align-items: center !important; } /* ===================================================================== [2026-09-10] Globe Section 3 Stat Blocks Vertical Alignment & Height Polish ===================================================================== */ @media screen and (min-width: 1025px) { html body .sf-content-wrapper { align-items: stretch !important; } html body .sf-right-panel { display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 16px !important; } html body .sf-stat-block { padding: 28px 28px !important; border-radius: 20px !important; background: linear-gradient(145deg, rgba(18, 18, 32, 0.9) 0%, rgba(8, 8, 16, 0.94) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } html body .sf-stat-block:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(230, 57, 70, 0.4) !important; transform: translateX(-6px) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(230, 57, 70, 0.2) !important; } } /* ===================================================================== [RED POINT UNIFICATION - ALL ACCENTS RED] ===================================================================== */ :root { --swiper-theme-color: #ff3b30 !important; --red-accent: #ff3b30 !important; --red-glow: rgba(255, 59, 48, 0.3) !important; } /* 1. Motto Badges */ .red-motto-badge, .gold-motto-badge { background: rgba(230, 57, 70, 0.15) !important; color: #ff3b30 !important; border: 1px solid rgba(230, 57, 70, 0.35) !important; font-weight: 700 !important; letter-spacing: 1.5px !important; } /* 2. Text Highlights */ .red-highlight, .gold-highlight { background: linear-gradient(135deg, #ffffff 30%, #ff4d4d 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; text-shadow: 0 0 25px rgba(230, 57, 70, 0.4) !important; } /* 3. Hint Red / Hint Gold */ .g-hint-red, .g-hint-gold { color: #ffffff !important; font-weight: 700 !important; font-size: 13px !important; } /* 4. Outline Red / Gold Buttons */ .btn-outline-red, .btn-outline-gold { border-color: #ff3b30 !important; color: #ffffff !important; background: rgba(230, 57, 70, 0.15) !important; transition: all 0.3s ease !important; } .btn-outline-red:hover, .btn-outline-gold:hover { background: #ff3b30 !important; border-color: #ff3b30 !important; color: #ffffff !important; box-shadow: 0 6px 20px rgba(255, 59, 48, 0.4) !important; } /* 5. Product Showcase Tabs (c-tab-btn active state) */ .c-tab-btn.active { background: rgba(230, 57, 70, 0.18) !important; border-color: #ff3b30 !important; box-shadow: 0 8px 25px rgba(255, 59, 48, 0.3) !important; } .c-tab-btn.active .c-tab-icon { background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; color: #ffffff !important; } .c-tab-btn.active .c-tab-text { color: #ffffff !important; } /* 6. Core Technology Cards & Buttons */ .core-card:hover .core-icon { color: #ff3b30 !important; } .core-card:hover .core-btn, .core-card:active .core-btn { background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; color: #ffffff !important; border-color: #ff3b30 !important; font-weight: 800 !important; } .core-label { background: rgba(230, 57, 70, 0.15) !important; color: #ff4d4d !important; border-color: rgba(230, 57, 70, 0.3) !important; } /* 7. Sci-Fi Globe Section & Indicator Dots */ .sf-dot, .sf-dot-red, .sf-dot-blue, .sf-dot-cyan, .sf-dot-emerald, .sf-dot-gold { display: inline-block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ff3b30 !important; box-shadow: 0 0 8px rgba(255, 59, 48, 0.8) !important; margin-right: 6px !important; } .sf-stat-block:nth-child(1) .sf-stat-value, .sf-stat-block .sf-stat-value.sf-val-red { color: #ff4d4d !important; } .sf-stat-block:nth-child(2) .sf-stat-value, .sf-stat-block:nth-child(3) .sf-stat-value { color: #ffffff !important; } .sf-hud-dot { background: #ff3b30 !important; box-shadow: 0 0 10px #ff3b30 !important; } .sf-hud-line::after { background: #ff3b30 !important; box-shadow: 0 0 10px #ff3b30 !important; } .sf-flag-tag.sf-flag-more:hover { border-color: #ff3b30 !important; color: #ff3b30 !important; } /* 8. Ecosystem Cloud Section */ .eco-card:hover .eco-label { background: rgba(230, 57, 70, 0.15) !important; color: #ff4d4d !important; border-color: rgba(230, 57, 70, 0.35) !important; } .eco-card:hover .eco-icon { color: #ff3b30 !important; } .eco-card:hover .eco-btn { background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; color: #ffffff !important; font-weight: 800 !important; } .ecosystem-badge, .remo-badge { background: rgba(230, 57, 70, 0.15) !important; color: #ff3b30 !important; border-color: rgba(230, 57, 70, 0.3) !important; } /* 9. Promotional Video Section & Badges */ .clean-pill-badge { background: rgba(230, 57, 70, 0.15) !important; color: #ff4d4d !important; border: 1px solid rgba(230, 57, 70, 0.35) !important; } .btn-dark-pill:hover, .cream-more-btn:hover { background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; color: #ffffff !important; border-color: #ff3b30 !important; } /* 10. Customer Stories / Testimonial Section Stars */ .testimonial-stars, .testimonials .testimonial-stars, html body #testimonials .testimonial-stars { font-size: 0.85rem !important; color: #ff3b30 !important; letter-spacing: 3px !important; font-weight: 800 !important; filter: drop-shadow(0 1px 4px rgba(255, 59, 48, 0.5)) !important; } .testimonial-card.featured { background: rgba(230, 57, 70, 0.1) !important; border-color: rgba(230, 57, 70, 0.4) !important; } /* 11. Quick Contact Banner */ .qcb-eyebrow { color: #ff3b30 !important; font-weight: 700 !important; letter-spacing: 1.5px !important; } .qcb-main-cta { background: #e63946 !important; color: #ffffff !important; border: none !important; transition: all 0.3s ease !important; } .qcb-main-cta:hover { background: #ff2a2a !important; box-shadow: 0 8px 25px rgba(255, 42, 42, 0.4) !important; transform: translateY(-2px) !important; } .qcb-item:hover .qcb-icon { color: #ff4d4d !important; } /* 12. Vertical Dot Navigator */ .dot-nav-item.active .dot-nav-dot { background: #ff3b30 !important; border-color: #ff3b30 !important; box-shadow: 0 0 10px rgba(255, 59, 48, 0.8) !important; } .dot-nav-item.active .dot-nav-label { color: #ff3b30 !important; } .dot-navigator.on-light .dot-nav-item.active .dot-nav-dot { background: #ff3b30 !important; border-color: #ff3b30 !important; } .dot-navigator.on-light .dot-nav-item.active .dot-nav-label { color: #ff3b30 !important; } /* ===================================================================== [EXPLICIT HIGH-SPECIFICITY OVERRIDES - RED ACCENT FOR BADGES & SCROLL MOUSE ICON] ===================================================================== */ /* 1. Promotional Video & All Pill Badges -> RED */ .clean-pill-badge, .cream-video-section .clean-pill-badge, .dark-mode-override .cream-header .clean-pill-badge, .dark-mode-override .clean-pill-badge, html body .clean-pill-badge, html body #promotional-video .clean-pill-badge { background: rgba(230, 57, 70, 0.15) !important; color: #ff4d4d !important; border: 1px solid rgba(230, 57, 70, 0.4) !important; box-shadow: 0 0 12px rgba(255, 59, 48, 0.25) !important; font-weight: 700 !important; } /* 2. Mouse Scroll Icon (g-scroll-icon) -> RED */ .g-scroll-icon, html body .g-scroll-icon, .grandiose-bottom-info .g-scroll-icon { border: 1.5px solid #ffffff !important; box-shadow: 0 0 12px rgba(255, 255, 255, 0.4) !important; } .g-scroll-icon::before, html body .g-scroll-icon::before, .grandiose-bottom-info .g-scroll-icon::before { background-color: #ffffff !important; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important; } /* 3. Scroll Down Indicator (Hero & Banner Scroll Icons) */ .scroll-down-indicator, .scroll-down-indicator i, .scroll-down-indicator span { color: #ff4d4d !important; border-color: rgba(255, 59, 48, 0.4) !important; } .scroll-down-indicator:hover { color: #ff3b30 !important; box-shadow: 0 0 15px rgba(255, 59, 48, 0.5) !important; } /* ===================================================================== [QUICK CONTACT SECTION - HIGH VISIBILITY GRID & UNIFORM GLASS CARDS] ===================================================================== */ #quick-contact.quick-contact-banner { position: relative !important; background: #06060e !important; overflow: hidden !important; padding: 160px 0 100px 0 !important; } /* Clear, Crisp Grid Pattern Background */ #quick-contact .qcb-bg-lines { position: absolute !important; inset: 0 !important; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(to right, rgba(255, 59, 48, 0.12) 1px, transparent 1px) !important; background-size: 50px 50px, 50px 50px, 200px 200px !important; pointer-events: none !important; z-index: 1 !important; } #quick-contact .qcb-bg-lines::after { content: '' !important; position: absolute !important; inset: 0 !important; background: radial-gradient(circle at 50% 50%, rgba(255, 59, 48, 0.18) 0%, rgba(6, 6, 14, 0.75) 65%, #06060e 100%) !important; pointer-events: none !important; } #quick-contact .qcb-inner { position: relative !important; z-index: 2 !important; max-width: 1100px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 40px !important; padding: 0 24px !important; } #quick-contact .qcb-container, html body #quick-contact .qcb-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; width: 100% !important; max-width: 680px !important; margin: 10px auto !important; } #quick-contact .qcb-divider { display: none !important; } /* 3 Equal Glassmorphism Cards */ #quick-contact .qcb-item.qcb-card, html body #quick-contact .qcb-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 16px !important; padding: 36px 28px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important; } #quick-contact .qcb-item:hover, html body #quick-contact .qcb-item:hover { background: rgba(255, 59, 48, 0.12) !important; border-color: rgba(255, 59, 48, 0.45) !important; transform: translateY(-8px) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 59, 48, 0.25) !important; } /* Circle Icon Container */ #quick-contact .qcb-icon, html body #quick-contact .qcb-icon { width: 64px !important; height: 64px !important; border-radius: 50% !important; background: rgba(255, 59, 48, 0.12) !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; transition: all 0.35s ease !important; } #quick-contact .qcb-icon svg { stroke: #ff4d4d !important; width: 28px !important; height: 28px !important; transition: all 0.35s ease !important; } #quick-contact .qcb-item:hover .qcb-icon, html body #quick-contact .qcb-item:hover .qcb-icon { background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; border-color: #ff3b30 !important; box-shadow: 0 0 20px rgba(255, 59, 48, 0.6) !important; } #quick-contact .qcb-item:hover .qcb-icon svg { stroke: #ffffff !important; transform: scale(1.1) !important; } /* Card Text */ #quick-contact .qcb-item span, html body #quick-contact .qcb-item span { font-size: 1.05rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.9) !important; letter-spacing: -0.3px !important; transition: color 0.3s ease !important; } #quick-contact .qcb-item:hover span { color: #ffffff !important; } /* CTA Button */ #quick-contact .qcb-main-cta, html body #quick-contact .qcb-main-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 16px 48px !important; font-size: 1rem !important; font-weight: 700 !important; color: #ffffff !important; background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; border-radius: 50px !important; border: none !important; box-shadow: 0 8px 25px rgba(255, 59, 48, 0.4) !important; transition: all 0.3s ease !important; text-decoration: none !important; margin-top: 10px !important; } #quick-contact .qcb-main-cta:hover { background: linear-gradient(135deg, #ff2a2a 0%, #d62828 100%) !important; box-shadow: 0 12px 35px rgba(255, 42, 42, 0.6) !important; transform: translateY(-3px) !important; } @media screen and (max-width: 768px) { #quick-contact .qcb-container, html body #quick-contact .qcb-container { grid-template-columns: 1fr !important; gap: 16px !important; } } /* ===================================================================== [RESPONSIVE LAYOUT OVERRIDES - TESTIMONIALS & QUICK CONTACT] ===================================================================== */ /* --- 1. Testimonial Section (#testimonials) --- */ #testimonials.testimonial-section, html body #testimonials.testimonial-section { position: relative !important; height: auto !important; min-height: auto !important; padding: 120px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #0a0a0f !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 32px !important; box-sizing: border-box !important; } #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { display: grid !important; grid-template-columns: 1fr 1.15fr 1fr !important; gap: 24px !important; align-items: stretch !important; width: 100% !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; box-sizing: border-box !important; } /* Tablet (768px ~ 1024px) Testimonials */ @media screen and (max-width: 1024px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section { padding: 90px 0 !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { padding: 0 24px !important; } #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { grid-template-columns: 1fr !important; gap: 20px !important; max-width: 640px !important; margin: 0 auto !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { padding: 30px 28px !important; } } /* Mobile (<= 767px) Testimonials */ @media screen and (max-width: 767px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section { padding: 70px 0 !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { padding: 0 20px !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { margin-bottom: 36px !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { font-size: 1.8rem !important; line-height: 1.3 !important; margin: 8px 0 12px !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { font-size: 0.9rem !important; word-break: keep-all !important; } #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { grid-template-columns: 1fr !important; gap: 16px !important; max-width: 100% !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { padding: 24px 20px !important; border-radius: 16px !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { font-size: 0.92rem !important; line-height: 1.6 !important; margin-bottom: 20px !important; word-break: keep-all !important; } #testimonials .testimonial-author, html body #testimonials .testimonial-author { display: flex !important; align-items: center !important; gap: 14px !important; } #testimonials .testimonial-avatar, html body #testimonials .testimonial-avatar { width: 44px !important; height: 44px !important; font-size: 1.2rem !important; flex-shrink: 0 !important; } } /* --- 2. Quick Contact Section (#quick-contact) --- */ #quick-contact.quick-contact-banner, html body #quick-contact.quick-contact-banner { position: relative !important; height: auto !important; min-height: auto !important; padding: 110px 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #06060e !important; overflow: hidden !important; } #quick-contact .qcb-inner, html body #quick-contact .qcb-inner { width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; padding: 0 32px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 44px !important; box-sizing: border-box !important; } #quick-contact .qcb-text-group, html body #quick-contact .qcb-text-group { text-align: center !important; max-width: 700px !important; } #quick-contact .qcb-title, html body #quick-contact .qcb-title { font-size: 2.2rem !important; font-weight: 800 !important; color: #ffffff !important; margin: 12px 0 16px !important; letter-spacing: -0.02em !important; } #quick-contact .qcb-subtitle, html body #quick-contact .qcb-subtitle { font-size: 1rem !important; color: rgba(255, 255, 255, 0.6) !important; line-height: 1.6 !important; word-break: keep-all !important; } #quick-contact .qcb-container, html body #quick-contact .qcb-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; width: 100% !important; max-width: 680px !important; margin: 0 auto !important; } #quick-contact .qcb-item.qcb-card, html body #quick-contact .qcb-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 16px !important; padding: 36px 24px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 20px !important; box-sizing: border-box !important; width: 100% !important; } /* Tablet (768px ~ 1024px) Quick Contact */ @media screen and (max-width: 1024px) { #quick-contact.quick-contact-banner, html body #quick-contact.quick-contact-banner { padding: 85px 0 !important; } #quick-contact .qcb-inner, html body #quick-contact .qcb-inner { padding: 0 24px !important; gap: 36px !important; } #quick-contact .qcb-title, html body #quick-contact .qcb-title { font-size: 1.9rem !important; } #quick-contact .qcb-container, html body #quick-contact .qcb-container { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; max-width: 580px !important; margin: 0 auto !important; } #quick-contact .qcb-item.qcb-card, html body #quick-contact .qcb-item { padding: 28px 16px !important; border-radius: 16px !important; } #quick-contact .qcb-icon, html body #quick-contact .qcb-icon { width: 54px !important; height: 54px !important; } #quick-contact .qcb-icon svg { width: 24px !important; height: 24px !important; } #quick-contact .qcb-item span, html body #quick-contact .qcb-item span { font-size: 0.85rem !important; } } /* Mobile (<= 767px) Quick Contact */ @media screen and (max-width: 767px) { #quick-contact.quick-contact-banner, html body #quick-contact.quick-contact-banner { padding: 65px 0 !important; } #quick-contact .qcb-inner, html body #quick-contact .qcb-inner { padding: 0 20px !important; gap: 28px !important; } #quick-contact .qcb-title, html body #quick-contact .qcb-title { font-size: 1.6rem !important; margin: 8px 0 10px !important; } #quick-contact .qcb-subtitle, html body #quick-contact .qcb-subtitle { font-size: 0.88rem !important; line-height: 1.5 !important; } #quick-contact .qcb-container, html body #quick-contact .qcb-container { grid-template-columns: 1fr !important; gap: 14px !important; max-width: 440px !important; } /* Mobile Clean Row Card Layout (Left Icon + Right Text) */ #quick-contact .qcb-item.qcb-card, html body #quick-contact .qcb-item { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 18px !important; padding: 18px 22px !important; border-radius: 16px !important; text-align: left !important; } #quick-contact .qcb-icon, html body #quick-contact .qcb-icon { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; } #quick-contact .qcb-icon svg { width: 22px !important; height: 22px !important; } #quick-contact .qcb-item span, html body #quick-contact .qcb-item span { font-size: 1rem !important; font-weight: 700 !important; } #quick-contact .qcb-main-cta, html body #quick-contact .qcb-main-cta { width: 100% !important; max-width: 360px !important; padding: 15px 24px !important; font-size: 0.85rem !important; justify-content: center !important; box-sizing: border-box !important; } } /* ===================================================================== [TESTIMONIALS - WHITE BACKGROUND & 100dvh FIT FOR MOBILE & PAD] ===================================================================== */ /* 1. Force Pure White Background Across All Viewports */ #testimonials.testimonial-section, html body #testimonials.testimonial-section, html body.main-page #testimonials { background: #ffffff !important; color: #0f172a !important; position: relative !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; box-sizing: border-box !important; padding: 0 !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 0 32px !important; box-sizing: border-box !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { text-align: center !important; margin-bottom: 40px !important; } #testimonials .clean-pill-badge, html body #testimonials .clean-pill-badge { background: transparent !important; color: #e63946 !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { color: #0f172a !important; font-size: clamp(1.8rem, 3.5vw, 3rem) !important; font-weight: 800 !important; margin: 8px 0 10px !important; letter-spacing: -0.02em !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { color: #64748b !important; font-size: 0.85rem !important; margin: 0 !important; } /* Card Styling on White Background */ #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { display: grid !important; grid-template-columns: 1fr 1.15fr 1fr !important; gap: 24px !important; align-items: stretch !important; width: 100% !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 32px 28px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; transition: all 0.3s ease !important; } #testimonials .testimonial-card:hover { border-color: rgba(230, 57, 70, 0.4) !important; box-shadow: 0 15px 35px rgba(230, 57, 70, 0.12) !important; transform: translateY(-4px) !important; } #testimonials .testimonial-card.featured, html body #testimonials .testimonial-card.featured { background: rgba(230, 57, 70, 0.03) !important; border: 2px solid #e63946 !important; box-shadow: 0 12px 35px rgba(230, 57, 70, 0.15) !important; } #testimonials .testimonial-quote-icon { font-size: 2.2rem !important; color: #e63946 !important; line-height: 1 !important; margin-bottom: 12px !important; font-family: Georgia, serif !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { color: #1e293b !important; font-size: 0.98rem !important; line-height: 1.6 !important; font-weight: 500 !important; margin-bottom: 24px !important; word-break: keep-all !important; } #testimonials .testimonial-author { display: flex !important; align-items: center !important; gap: 14px !important; margin-top: auto !important; } #testimonials .testimonial-avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #f1f5f9 !important; color: #e63946 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.2rem !important; flex-shrink: 0 !important; } #testimonials .testimonial-card.featured .testimonial-avatar { background: #e63946 !important; color: #ffffff !important; } #testimonials .testimonial-info strong { color: #0f172a !important; font-size: 0.85rem !important; font-weight: 700 !important; display: block !important; } #testimonials .testimonial-info span { color: #64748b !important; font-size: 0.78rem !important; display: block !important; margin-top: 2px !important; } #testimonials .testimonial-stars { color: #e63946 !important; font-size: 0.8rem !important; margin-top: 4px !important; } /* --- iPad & Tablet (768px ~ 1024px) Perfect 100dvh Fit --- */ @media screen and (max-width: 1024px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section { background: #ffffff !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; padding: 0 !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { padding: 0 24px !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { margin-bottom: 24px !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { font-size: 1.8rem !important; margin: 6px 0 6px !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { font-size: 0.88rem !important; } /* 3 Columns Horizontal Grid on iPad so it fits inside 100dvh screen height! */ #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; max-width: 100% !important; margin: 0 !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { padding: 22px 18px !important; border-radius: 16px !important; } #testimonials .testimonial-quote-icon { font-size: 1.8rem !important; margin-bottom: 8px !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { font-size: 0.85rem !important; line-height: 1.5 !important; margin-bottom: 16px !important; } #testimonials .testimonial-avatar { width: 36px !important; height: 36px !important; font-size: 1rem !important; } #testimonials .testimonial-info strong { font-size: 0.85rem !important; } #testimonials .testimonial-info span { font-size: 0.72rem !important; } } /* --- Mobile (<= 767px) Perfect 100dvh Fit --- */ @media screen and (max-width: 767px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section { background: #ffffff !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; padding: 0 !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { padding: 0 16px !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { margin-bottom: 16px !important; } #testimonials .clean-pill-badge, html body #testimonials .clean-pill-badge { padding: 4px 12px !important; font-size: 0.68rem !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { font-size: 1.45rem !important; margin: 4px 0 4px !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { font-size: 0.78rem !important; line-height: 1.35 !important; } /* Compact 3-card stack that fits inside 100dvh mobile screen height */ #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { grid-template-columns: 1fr !important; gap: 10px !important; max-width: 100% !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { padding: 14px 16px !important; border-radius: 12px !important; } #testimonials .testimonial-quote-icon { font-size: 1.3rem !important; margin-bottom: 4px !important; line-height: 1 !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { font-size: 0.8rem !important; line-height: 1.4 !important; margin-bottom: 10px !important; } #testimonials .testimonial-author { gap: 10px !important; } #testimonials .testimonial-avatar { width: 32px !important; height: 32px !important; font-size: 0.9rem !important; } #testimonials .testimonial-info strong { font-size: 0.8rem !important; } #testimonials .testimonial-info span { font-size: 0.7rem !important; } #testimonials .testimonial-stars { font-size: 0.65rem !important; margin-top: 2px !important; } } /* ===================================================================== [MOBILE TESTIMONIALS CAROUSEL - PERFECT FIT BETWEEN HEADER & BOTTOM NAV] ===================================================================== */ @media screen and (max-width: 767px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section, html body.main-page #testimonials { background: #ffffff !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; padding: 75px 16px 95px 16px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; overflow: hidden !important; position: relative !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { text-align: center !important; margin-bottom: 20px !important; width: 100% !important; } #testimonials .clean-pill-badge, html body #testimonials .clean-pill-badge { font-size: 0.65rem !important; padding: 4px 12px !important; margin-bottom: 6px !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { font-size: 1.5rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 4px 0 6px 0 !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { font-size: 0.78rem !important; color: #64748b !important; line-height: 1.4 !important; word-break: keep-all !important; } /* Horizontal Swipe Carousel for Mobile */ #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 12px !important; padding: 10px 16px 20px 16px !important; width: calc(100% + 32px) !important; margin: 0 -16px !important; scrollbar-width: none !important; box-sizing: border-box !important; } #testimonials .testimonial-grid::-webkit-scrollbar { display: none !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { flex: 0 0 85% !important; max-width: 85% !important; min-width: 85% !important; scroll-snap-align: center !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 22px 20px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; } #testimonials .testimonial-card.featured, html body #testimonials .testimonial-card.featured { background: rgba(230, 57, 70, 0.03) !important; border: 2px solid #e63946 !important; box-shadow: 0 12px 30px rgba(230, 57, 70, 0.15) !important; } #testimonials .testimonial-quote-icon { font-size: 1.6rem !important; color: #e63946 !important; line-height: 1 !important; margin-bottom: 8px !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { font-size: 0.85rem !important; line-height: 1.5 !important; color: #1e293b !important; margin-bottom: 16px !important; word-break: keep-all !important; } #testimonials .testimonial-author { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: auto !important; } #testimonials .testimonial-avatar { width: 36px !important; height: 36px !important; font-size: 1rem !important; flex-shrink: 0 !important; } #testimonials .testimonial-info strong { font-size: 0.82rem !important; color: #0f172a !important; } #testimonials .testimonial-info span { font-size: 0.7rem !important; color: #64748b !important; } #testimonials .testimonial-stars { font-size: 0.68rem !important; color: #e63946 !important; } } /* ===================================================================== [IPAD / TABLET TESTIMONIALS FIX - PERFECT FIT WITHOUT RIGHT TRUNCATION] ===================================================================== */ @media screen and (min-width: 768px) and (max-width: 1024px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section, html body.main-page #testimonials { background: #ffffff !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; padding: 70px 0 85px 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; overflow: hidden !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { width: 100% !important; max-width: 100% !important; padding: 0 24px 0 65px !important; /* Left 65px clears dot nav, right 24px prevents right cutoff */ box-sizing: border-box !important; margin: 0 auto !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { text-align: center !important; margin-bottom: 20px !important; width: 100% !important; } #testimonials .clean-pill-badge, html body #testimonials .clean-pill-badge { font-size: 0.7rem !important; padding: 4px 12px !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { font-size: 1.65rem !important; margin: 4px 0 6px 0 !important; color: #0f172a !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { font-size: 0.82rem !important; color: #64748b !important; } /* 3 Columns Grid precisely sized for iPad content width (690px) */ #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; } #testimonials .testimonial-card, html body #testimonials .testimonial-card { min-width: 0 !important; /* Critical to allow grid column shrinking without overflow */ width: 100% !important; padding: 16px 12px !important; border-radius: 14px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; } #testimonials .testimonial-card.featured, html body #testimonials .testimonial-card.featured { background: rgba(230, 57, 70, 0.03) !important; border: 2px solid #e63946 !important; box-shadow: 0 8px 25px rgba(230, 57, 70, 0.12) !important; } #testimonials .testimonial-quote-icon { font-size: 1.4rem !important; color: #e63946 !important; margin-bottom: 4px !important; line-height: 1 !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { font-size: 0.78rem !important; line-height: 1.35 !important; color: #1e293b !important; margin-bottom: 10px !important; word-break: keep-all !important; } #testimonials .testimonial-author { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: auto !important; } #testimonials .testimonial-avatar { width: 32px !important; height: 32px !important; font-size: 0.85rem !important; flex-shrink: 0 !important; } #testimonials .testimonial-info strong { font-size: 0.78rem !important; color: #0f172a !important; } #testimonials .testimonial-info span { font-size: 0.68rem !important; color: #64748b !important; } #testimonials .testimonial-stars { font-size: 0.62rem !important; color: #e63946 !important; } } /* ===================================================================== [TESTIMONIALS - HORIZONTAL SCROLLBAR CAROUSEL FOR MOBILE & PAD <= 1024px] ===================================================================== */ @media screen and (max-width: 1024px) { #testimonials.testimonial-section, html body #testimonials.testimonial-section, html body.main-page #testimonials { background: #ffffff !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; padding: 70px 0 85px 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; overflow: hidden !important; position: relative !important; } #testimonials .testimonial-container, html body #testimonials .testimonial-container { width: 100% !important; max-width: 100% !important; padding: 0 24px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; box-sizing: border-box !important; } #testimonials .testimonial-header, html body #testimonials .testimonial-header { text-align: center !important; margin-bottom: 20px !important; width: 100% !important; } #testimonials .clean-pill-badge, html body #testimonials .clean-pill-badge { font-size: 0.7rem !important; padding: 4px 12px !important; margin-bottom: 6px !important; } #testimonials .testimonial-title, html body #testimonials .testimonial-title { font-size: 1.6rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 4px 0 6px 0 !important; } #testimonials .testimonial-sub, html body #testimonials .testimonial-sub { font-size: 0.85rem !important; color: #64748b !important; line-height: 1.4 !important; word-break: keep-all !important; } /* Horizontal Scroll / Carousel Container for Mobile & iPad */ #testimonials .testimonial-grid, html body #testimonials .testimonial-grid { display: flex !important; flex-direction: row !important; grid-template-columns: none !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch !important; gap: 16px !important; padding: 10px 10px 20px 10px !important; width: 100% !important; box-sizing: border-box !important; } /* Visible Custom Red Horizontal Scrollbar for Mobile & iPad */ #testimonials .testimonial-grid::-webkit-scrollbar { height: 6px !important; display: block !important; } #testimonials .testimonial-grid::-webkit-scrollbar-track { background: #f1f5f9 !important; border-radius: 10px !important; } #testimonials .testimonial-grid::-webkit-scrollbar-thumb { background: #e63946 !important; border-radius: 10px !important; } /* Horizontal Cards for Mobile & iPad */ #testimonials .testimonial-card, html body #testimonials .testimonial-card { flex: 0 0 310px !important; width: 310px !important; max-width: 82vw !important; min-width: 270px !important; scroll-snap-align: center !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 22px 20px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-sizing: border-box !important; } #testimonials .testimonial-card.featured, html body #testimonials .testimonial-card.featured { background: rgba(230, 57, 70, 0.04) !important; border: 2px solid #e63946 !important; box-shadow: 0 10px 30px rgba(230, 57, 70, 0.12) !important; } #testimonials .testimonial-quote-icon { font-size: 1.6rem !important; color: #e63946 !important; line-height: 1 !important; margin-bottom: 8px !important; } #testimonials .testimonial-text, html body #testimonials .testimonial-text { font-size: 0.85rem !important; line-height: 1.5 !important; color: #1e293b !important; margin-bottom: 16px !important; word-break: keep-all !important; } #testimonials .testimonial-author { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: auto !important; } #testimonials .testimonial-avatar { width: 36px !important; height: 36px !important; font-size: 1rem !important; flex-shrink: 0 !important; } #testimonials .testimonial-info strong { font-size: 0.82rem !important; color: #0f172a !important; } #testimonials .testimonial-info span { font-size: 0.7rem !important; color: #64748b !important; } #testimonials .testimonial-stars { font-size: 0.68rem !important; color: #e63946 !important; } } /* ===================================================================== [ECOSYSTEM MOBILE CARDS - INCREASED HEIGHT, LINE HEIGHT & BOX SPACING] ===================================================================== */ @media screen and (max-width: 767px) { #ecosystem .ecosystem-grid-new, #ecosystem-2 .ecosystem-grid-new, html body .ecosystem-grid-new, html body #ecosystem .ecosystem-grid-new , html body #ecosystem-2 .ecosystem-grid-new { display: flex !important; flex-direction: column !important; gap: 22px !important; /* ???????占썩닪?????????????占쏙┼??(????占썩닪????????????????????占썩닪???????????????? */ width: 100% !important; max-width: 440px !important; margin: 20px auto 0 auto !important; } #ecosystem .eco-card, #ecosystem-2 .eco-card, html body .eco-card, html body #ecosystem .eco-card , html body #ecosystem-2 .eco-card { min-height: 190px !important; /* ???????占쏙┼?? ??????????????????占쏙┼??*/ padding: 24px 20px 20px 20px !important; border-radius: 18px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important; } #ecosystem .eco-label, #ecosystem-2 .eco-label, html body .eco-label { font-size: 0.68rem !important; font-weight: 700 !important; padding: 4px 12px !important; margin-bottom: 12px !important; border-radius: 20px !important; } #ecosystem .eco-icon, #ecosystem-2 .eco-icon, html body .eco-icon { margin-bottom: 12px !important; } #ecosystem .eco-icon svg, #ecosystem-2 .eco-icon svg, html body .eco-icon svg { width: 36px !important; height: 36px !important; } #ecosystem .eco-title, #ecosystem-2 .eco-title, html body .eco-title, html body .ecosystem-grid-new .eco-title { font-size: 1.15rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 4px 0 8px 0 !important; line-height: 1.35 !important; /* ?????????????占쏙┼????????????*/ text-align: center !important; } #ecosystem .eco-desc, #ecosystem-2 .eco-desc, html body .eco-desc, html body .ecosystem-grid-new .eco-desc { display: block !important; /* ???????占쏙┼?? ?????占썩닪????????占썩닪???嚥▲꺃占??*/ font-size: 0.85rem !important; line-height: 1.55 !important; /* ??????????????????????????????*/ color: #64748b !important; text-align: center !important; margin: 4px 0 16px 0 !important; word-break: keep-all !important; } #ecosystem .eco-btn, #ecosystem-2 .eco-btn, html body .eco-btn, html body .ecosystem-grid-new .eco-btn { width: 100% !important; height: 44px !important; /* ??????????占쏙┼?? ????????*/ font-size: 0.88rem !important; font-weight: 700 !important; padding: 0 !important; margin-top: auto !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } } /* ===================================================================== [ECOSYSTEM MOBILE CARDS - OMIT SMALL DESC, CLEAN BUTTON LAYOUT] ===================================================================== */ @media screen and (max-width: 767px) { #ecosystem .ecosystem-grid-new, #ecosystem-2 .ecosystem-grid-new, html body .ecosystem-grid-new, html body #ecosystem .ecosystem-grid-new , html body #ecosystem-2 .ecosystem-grid-new { display: flex !important; flex-direction: column !important; gap: 16px !important; /* ??????????????????????占썩닪??????*/ width: 100% !important; max-width: 440px !important; margin: 16px auto 0 auto !important; } #ecosystem .eco-card, #ecosystem-2 .eco-card, html body .eco-card, html body #ecosystem .eco-card , html body #ecosystem-2 .eco-card { min-height: 160px !important; /* ???????占쏙┼?? ???????占쏙┼??????????????????占쏙┼?? ????*/ padding: 22px 18px 18px 18px !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important; } #ecosystem .eco-label, #ecosystem-2 .eco-label, html body .eco-label { font-size: 0.68rem !important; font-weight: 700 !important; padding: 4px 12px !important; margin-bottom: 8px !important; border-radius: 20px !important; } #ecosystem .eco-icon, #ecosystem-2 .eco-icon, html body .eco-icon { margin-bottom: 8px !important; } #ecosystem .eco-icon svg, #ecosystem-2 .eco-icon svg, html body .eco-icon svg { width: 32px !important; height: 32px !important; } #ecosystem .eco-title, #ecosystem-2 .eco-title, html body .eco-title, html body .ecosystem-grid-new .eco-title { font-size: 1.1rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 2px 0 12px 0 !important; line-height: 1.3 !important; text-align: center !important; } /* ????????????占쏙┼????????????占쏙┼?? (??????????????? */ #ecosystem .eco-desc, /* ????????????占쏙┼????????????占쏙┼?? (??????????????? */ #ecosystem-2 .eco-desc, html body .eco-desc, html body .ecosystem-grid-new .eco-desc { display: none !important; } #ecosystem .eco-btn, #ecosystem-2 .eco-btn, html body .eco-btn, html body .ecosystem-grid-new .eco-btn { width: 100% !important; height: 42px !important; font-size: 0.88rem !important; font-weight: 700 !important; padding: 0 !important; margin-top: auto !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } } /* ===================================================================== [ECOSYSTEM MOBILE CARDS - BUTTON ATTACHED FLUSH TO BOTTOM EDGE] ===================================================================== */ @media screen and (max-width: 767px) { #ecosystem .ecosystem-grid-new, #ecosystem-2 .ecosystem-grid-new, html body .ecosystem-grid-new, html body #ecosystem .ecosystem-grid-new , html body #ecosystem-2 .ecosystem-grid-new { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100% !important; max-width: 440px !important; margin: 16px auto 0 auto !important; } #ecosystem .eco-card, #ecosystem-2 .eco-card, html body .eco-card, html body #ecosystem .eco-card , html body #ecosystem-2 .eco-card { padding: 20px 0 0 0 !important; /* ?????????占쏙┼?????????占쏙┼??0???????占쏙┼?? ???????占썩닪?????*/ overflow: hidden !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important; } #ecosystem .eco-label, #ecosystem-2 .eco-label, html body .eco-label { font-size: 0.68rem !important; font-weight: 700 !important; padding: 4px 12px !important; margin-bottom: 8px !important; border-radius: 20px !important; } #ecosystem .eco-icon, #ecosystem-2 .eco-icon, html body .eco-icon { margin-bottom: 6px !important; } #ecosystem .eco-icon svg, #ecosystem-2 .eco-icon svg, html body .eco-icon svg { width: 32px !important; height: 32px !important; } #ecosystem .eco-title, #ecosystem-2 .eco-title, html body .eco-title, html body .ecosystem-grid-new .eco-title { font-size: 1.1rem !important; font-weight: 800 !important; color: #0f172a !important; margin: 2px 0 16px 0 !important; line-height: 1.3 !important; text-align: center !important; padding: 0 16px !important; } #ecosystem .eco-desc, #ecosystem-2 .eco-desc, html body .eco-desc, html body .ecosystem-grid-new .eco-desc { display: none !important; } /* ??????????????????????????饔낅떽??癰귥옕?占썽뇦猿뗫닑??? ????占썩닪?????(Full Width Bottom Bar Button) */ #ecosystem .eco-btn, /* ??????????????????????????饔낅떽??癰귥옕?占썽뇦猿뗫닑??? ????占썩닪?????(Full Width Bottom Bar Button) */ #ecosystem-2 .eco-btn, html body .eco-btn, html body .ecosystem-grid-new .eco-btn { width: 100% !important; height: 44px !important; font-size: 0.88rem !important; font-weight: 700 !important; padding: 0 !important; margin-top: auto !important; border-radius: 0 0 15px 15px !important; /* ????????????占썩닪??????????占썩닪?????*/ border: none !important; border-top: 1px solid #e2e8f0 !important; background: #f8fafc !important; color: #0f172a !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; box-sizing: border-box !important; transition: all 0.3s ease !important; } } /* ===================================================================== [GLOBAL NETWORK SECTION (#installation) - GLOBE PUSHED DOWN V9] ===================================================================== */ #installation.sci-fi-globe-section, html body #installation.sci-fi-globe-section, html body.main-page #installation { position: relative !important; width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; background: #000005 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; box-sizing: border-box !important; z-index: 10 !important; } /* Background & Hologram Earth */ #installation .sf-bg, html body #installation .sf-bg { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 1 !important; pointer-events: none !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; pointer-events: none !important; } /* Common Dot Red Indicator */ #installation .sf-dot-red, html body #installation .sf-dot-red { display: inline-block !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: #ff3b30 !important; box-shadow: 0 0 8px #ff3b30 !important; flex-shrink: 0 !important; } /* Red Pill Button Styling for +76????占썩닪???占쎈챶???????????????????????占쏙┼??????占썩닪???????占썩닪占?????*/ #installation .sf-flag-tag.sf-flag-more, html body #installation .sf-flag-tag.sf-flag-more, html body #installation a.sf-flag-more { color: #ff4d4d !important; background: rgba(35, 8, 12, 0.85) !important; border: 1px solid #ff3b30 !important; border-radius: 20px !important; padding: 4px 12px !important; font-weight: 700 !important; text-decoration: none !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; box-shadow: 0 0 10px rgba(255, 59, 48, 0.25) !important; transition: all 0.25s ease !important; } #installation .sf-flag-tag.sf-flag-more:hover, html body #installation .sf-flag-tag.sf-flag-more:hover, html body #installation a.sf-flag-more:hover { background: #ff3b30 !important; color: #ffffff !important; border-color: #ff3b30 !important; box-shadow: 0 0 16px rgba(255, 59, 48, 0.6) !important; transform: translateY(-1px) !important; } /* Desktop (>1024px) - 100% RESTORED ORIGINAL PC LAYOUT */ @media screen and (min-width: 1025px) { #installation.sci-fi-globe-section, html body #installation.sci-fi-globe-section { padding: 90px 60px 50px 60px !important; display: flex !important; justify-content: center !important; align-items: center !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { width: 580px !important; height: 580px !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } #installation .sf-content-wrapper, html body #installation .sf-content-wrapper { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 1400px !important; height: 100% !important; position: relative !important; } #installation .sf-left-panel, html body #installation .sf-left-panel { width: 520px !important; max-width: 520px !important; height: 78% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; text-align: left !important; position: relative !important; z-index: 10 !important; } #installation .sf-main-title, html body #installation .sf-main-title { font-size: 3.8rem !important; font-weight: 900 !important; line-height: 1.05 !important; margin-bottom: 20px !important; letter-spacing: -2px !important; text-transform: uppercase !important; background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 55%, #94a3b8 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; word-break: keep-all !important; } #installation .sf-desc, html body #installation .sf-desc { display: block !important; font-size: 1.05rem !important; color: rgba(255, 255, 255, 0.85) !important; line-height: 1.8 !important; margin-top: 10px !important; margin-bottom: 0 !important; letter-spacing: -0.2px !important; font-weight: 400 !important; } #installation .sf-flags-hud-row, html body #installation .sf-flags-hud-row { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } #installation .sf-hud-line-left, html body #installation .sf-hud-line-left { font-size: 0.7rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.6) !important; letter-spacing: 2px !important; width: 380px !important; position: relative !important; padding-bottom: 6px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; } #installation .sf-hud-line-left::after { content: '' !important; position: absolute !important; right: 0 !important; bottom: -3px !important; width: 6px !important; height: 6px !important; background: #ff3b30 !important; border-radius: 50% !important; box-shadow: 0 0 8px #ff3b30 !important; } #installation .sf-flags-container, html body #installation .sf-flags-container { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; max-width: 420px !important; } #installation .sf-flag-tag, html body #installation .sf-flag-tag { font-size: 0.75rem !important; padding: 5px 12px !important; background: rgba(12, 12, 24, 0.75) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 8px !important; color: #ffffff !important; } #installation .sf-right-panel, html body #installation .sf-right-panel { position: relative !important; top: auto !important; right: auto !important; width: 280px !important; margin: 0 !important; background: transparent !important; padding: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; z-index: 10 !important; } #installation .sf-data-header, html body #installation .sf-data-header { font-size: 0.85rem !important; color: #ff3b30 !important; font-weight: 700 !important; letter-spacing: 1.5px !important; margin-bottom: 12px !important; text-align: left !important; } #installation .sf-stats-grid, html body #installation .sf-stats-grid { display: flex !important; flex-direction: column !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; } #installation .sf-stat-block, html body #installation .sf-stat-block { background: linear-gradient(145deg, rgba(18, 18, 32, 0.9) 0%, rgba(8, 8, 16, 0.94) 100%) !important; backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 16px !important; padding: 20px 24px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } #installation .sf-stat-title, html body #installation .sf-stat-title { font-size: 0.8rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.85) !important; margin-bottom: 8px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; } #installation .sf-stat-value, html body #installation .sf-stat-value { font-size: 3.2rem !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1 !important; margin: 0 !important; display: flex !important; align-items: baseline !important; justify-content: flex-start !important; gap: 4px !important; } #installation .sf-stat-block, html body #installation .sf-stat-block { position: relative !important; min-height: 116px !important; justify-content: center !important; } #installation .sf-stat-block:nth-child(1), html body #installation .sf-stat-block:nth-child(1) { border-color: rgba(230, 57, 70, 0.45) !important; box-shadow: 0 0 16px rgba(230, 57, 70, 0.25), inset 0 1px 0 rgba(230, 57, 70, 0.2) !important; } #installation .sf-stat-block:nth-child(1) .sf-stat-value, html body #installation .sf-stat-block:nth-child(1) .sf-stat-value, #installation .sf-stat-block .sf-stat-value.sf-val-red, html body #installation .sf-stat-block .sf-stat-value.sf-val-red { color: #ff3b30 !important; } #installation .sf-stat-block:nth-child(2) .sf-stat-value, #installation .sf-stat-block:nth-child(3) .sf-stat-value, html body #installation .sf-stat-block:nth-child(2) .sf-stat-value, html body #installation .sf-stat-block:nth-child(3) .sf-stat-value { color: #ffffff !important; } #installation .sf-unit, html body #installation .sf-unit { font-size: 0.9rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.6) !important; } #installation .sf-stat-ratio, html body #installation .sf-stat-ratio { font-size: 0.62rem !important; font-weight: 600 !important; color: #ff5252 !important; background: rgba(255, 59, 48, 0.15) !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; padding: 2px 6px !important; border-radius: 6px !important; position: relative !important; right: auto !important; bottom: auto !important; text-align: left !important; align-self: flex-start !important; margin-top: 6px !important; } #installation .sf-stat-ratio strong, html body #installation .sf-stat-ratio strong { color: #ffffff !important; font-weight: 800 !important; font-size: 0.7rem !important; margin-left: 2px !important; } } /* Tablet / iPad (768px ~ 1024px) */ @media screen and (min-width: 768px) and (max-width: 1024px) { #installation.sci-fi-globe-section, html body #installation.sci-fi-globe-section { padding: 70px 32px 75px 32px !important; } #installation .sf-content-wrapper, html body #installation .sf-content-wrapper { display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; height: 100% !important; } #installation .sf-left-panel, html body #installation .sf-left-panel { display: contents !important; } #installation .sf-title-group, html body #installation .sf-title-group { order: 1 !important; width: 100% !important; text-align: center !important; margin-top: 24px !important; } #installation .sf-main-title, html body #installation .sf-main-title { font-size: 1.75rem !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1.38 !important; letter-spacing: 0.5px !important; margin-bottom: 12px !important; } #installation .sf-desc, html body #installation .sf-desc { font-size: 0.85rem !important; color: rgba(255, 255, 255, 0.75) !important; line-height: 1.6 !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { width: 340px !important; height: 340px !important; top: 43% !important; } #installation .sf-right-panel, html body #installation .sf-right-panel { order: 2 !important; position: relative !important; top: auto !important; right: auto !important; width: 100% !important; margin-top: auto !important; margin-bottom: 6px !important; background: transparent !important; padding: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; } #installation .sf-data-header, html body #installation .sf-data-header { font-size: 0.75rem !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-align: center !important; margin-bottom: 5px !important; width: 100% !important; } #installation .sf-stats-grid, html body #installation .sf-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; max-width: 580px !important; margin: 0 auto !important; } #installation .sf-stat-block, html body #installation .sf-stat-block { background: linear-gradient(145deg, rgba(18, 18, 32, 0.88) 0%, rgba(8, 8, 16, 0.92) 100%) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 12px !important; padding: 10px 8px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } #installation .sf-stat-title, html body #installation .sf-stat-title { font-size: 0.72rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.85) !important; white-space: nowrap !important; margin-bottom: 3px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; text-align: center !important; } #installation .sf-stat-value, html body #installation .sf-stat-value { font-size: 1.5rem !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1.1 !important; margin: 2px 0 !important; display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 2px !important; white-space: nowrap !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.2) !important; text-align: center !important; } #installation .sf-stat-block:nth-child(1) .sf-stat-value, html body #installation .sf-stat-block:nth-child(1) .sf-stat-value, #installation .sf-stat-block .sf-stat-value.sf-val-red, html body #installation .sf-stat-block .sf-stat-value.sf-val-red { color: #ff3b30 !important; text-shadow: 0 0 12px rgba(255, 59, 48, 0.4) !important; } #installation .sf-stat-block:nth-child(2) .sf-stat-value, #installation .sf-stat-block:nth-child(3) .sf-stat-value, html body #installation .sf-stat-block:nth-child(2) .sf-stat-value, html body #installation .sf-stat-block:nth-child(3) .sf-stat-value { color: #ffffff !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.2) !important; } #installation .sf-unit, html body #installation .sf-unit { font-size: 0.7rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.65) !important; } #installation .sf-stat-ratio, html body #installation .sf-stat-ratio { font-size: 0.62rem !important; font-weight: 600 !important; color: #ff5252 !important; background: rgba(255, 59, 48, 0.15) !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; padding: 2px 6px !important; border-radius: 6px !important; margin-top: 3px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } #installation .sf-flags-hud-row, html body #installation .sf-flags-hud-row { order: 3 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-bottom: 0 !important; } #installation .sf-hud-line-left, html body #installation .sf-hud-line-left { display: none !important; } #installation .sf-flags-container, html body #installation .sf-flags-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 5px 8px !important; } } /* Mobile (<768px) */ @media screen and (max-width: 767px) { #installation.sci-fi-globe-section, html body #installation.sci-fi-globe-section { padding: 55px 16px 30px 16px !important; height: auto !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; position: relative !important; overflow: hidden !important; } #installation .sf-content-wrapper, html body #installation .sf-content-wrapper { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; height: auto !important; width: 100% !important; position: relative !important; } #installation .sf-left-panel, html body #installation .sf-left-panel { display: contents !important; } #installation .sf-title-group, html body #installation .sf-title-group { order: 1 !important; width: 100% !important; text-align: center !important; margin-top: 0 !important; margin-bottom: 290px !important; } #installation .sf-main-title, html body #installation .sf-main-title { font-size: 1.25rem !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.25 !important; letter-spacing: 0.5px !important; margin-bottom: 0 !important; } #installation .sf-main-title br { display: block !important; } #installation .sf-desc, html body #installation .sf-desc { display: none !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { width: 200px !important; height: 200px !important; position: absolute !important; top: 295px !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 2 !important; pointer-events: none !important; } #installation .sf-right-panel, html body #installation .sf-right-panel { order: 2 !important; position: relative !important; top: auto !important; right: auto !important; width: 100% !important; margin-top: -85px !important; margin-bottom: 12px !important; background: transparent !important; padding: 0 !important; border: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; z-index: 10 !important; } #installation .sf-data-header, html body #installation .sf-data-header { font-size: 0.68rem !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 700 !important; letter-spacing: 1px !important; text-align: center !important; margin-bottom: 6px !important; width: 100% !important; } #installation .sf-stats-grid, html body #installation .sf-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; width: 100% !important; max-width: 340px !important; margin: 0 auto !important; } #installation .sf-stat-block, html body #installation .sf-stat-block { background: linear-gradient(145deg, rgba(18, 18, 32, 0.9) 0%, rgba(8, 8, 16, 0.94) 100%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 10px !important; padding: 8px 4px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important; } #installation .sf-stat-title, html body #installation .sf-stat-title { font-size: 0.64rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.85) !important; white-space: nowrap !important; margin-bottom: 2px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; text-align: center !important; } #installation .sf-stat-value, html body #installation .sf-stat-value { font-size: 1.2rem !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1.1 !important; margin: 1px 0 !important; display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 2px !important; white-space: nowrap !important; text-align: center !important; } #installation .sf-stat-block:nth-child(1) .sf-stat-value, html body #installation .sf-stat-block:nth-child(1) .sf-stat-value, #installation .sf-stat-block .sf-stat-value.sf-val-red, html body #installation .sf-stat-block .sf-stat-value.sf-val-red { color: #ff3b30 !important; } #installation .sf-stat-block:nth-child(2) .sf-stat-value, #installation .sf-stat-block:nth-child(3) .sf-stat-value, html body #installation .sf-stat-block:nth-child(2) .sf-stat-value, html body #installation .sf-stat-block:nth-child(3) .sf-stat-value { color: #ffffff !important; } #installation .sf-unit, html body #installation .sf-unit { font-size: 0.6rem !important; font-weight: 600 !important; color: rgba(255, 255, 255, 0.6) !important; } #installation .sf-stat-ratio, html body #installation .sf-stat-ratio { font-size: 0.56rem !important; font-weight: 600 !important; color: #ff5252 !important; background: rgba(255, 59, 48, 0.15) !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; padding: 1px 4px !important; border-radius: 5px !important; margin-top: 2px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } #installation .sf-flags-hud-row, html body #installation .sf-flags-hud-row { order: 3 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-bottom: 0 !important; z-index: 10 !important; } #installation .sf-hud-line-left, html body #installation .sf-hud-line-left { display: none !important; } #installation .sf-flags-container, html body #installation .sf-flags-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 4px 6px !important; max-width: 340px !important; } } /* ===================================================================== [2026-09-10] ??????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????????占쏙┼????????占쏙┼??????? - ??????占쏙┼?????占썩닪???????占썩닪??????????占쏙┼?????占썩닪???????占썩닪???(Noto Sans KR + Inter) - Testimonial ???????????????占썩닪占???? ????????????占썩닪??????????占쏙┼?????????占쏙┼?? - ??????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼????????占쏙┼?????占썩닪???????占썩닪???(ri-star-fill) ===================================================================== */ /* 1. ??????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????占썩닪???????占썩닪??????????占쏙┼?????占썩닪???????占썩닪???*/ html, body { font-family: 'Noto Sans KR', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ??????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????占썩닪????Inter ?????????*/ .g-title, .g-thin-text, .g-bold-text, .g-outline-text, .red-motto-badge, .clean-pill-badge, .c-tab-text, .sf-main-title, .cinematic-title, .premium-tech-title, h1, h2, h3, h4, h5, h6 { font-family: 'Inter', 'Noto Sans KR', sans-serif; } /* 2. Testimonial ???????????????占썩닪占???? ????????????占썩닪??????????占쏙┼?????占썩닪???????占썩닪?????????占쏙┼?????????占쏙┼??*/ .testimonial-avatar-initial { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem; font-weight: 900; color: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); border: 2px solid rgba(255, 255, 255, 0.2); } .testimonial-avatar-initial span { font-family: 'Noto Sans KR', sans-serif; font-weight: 900; line-height: 1; } /* 3. ??????占쏙┼?????占썩닪???????占썩닪???ri-star-fill ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼????????占쏙┼?????占썩닪???????占썩닪???*/ .testimonial-stars { display: flex; align-items: center; gap: 2px; margin-top: 4px; } .testimonial-stars i.ri-star-fill { color: #FFD700; font-size: 0.85rem; filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.45)); } .testimonial-card.featured .testimonial-stars i.ri-star-fill { color: #ff3b30; filter: drop-shadow(0 0 6px rgba(255, 59, 48, 0.45)); } /* 4. Scroll Down Indicator ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼???????????????占썩닪占????????占쏙┼?????占썩닪???????占썩닪???*/ .scroll-down-indicator { display: flex; align-items: center; justify-content: center; } /* ===================================================================== [AI Updated] Hero Slide CTA Buttons & Text Right Benchmark Styling ===================================================================== */ .slide-text-right { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 2.2rem 3rem !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; } .slide-text-right p { font-size: 1.15rem !important; text-align: center !important; font-weight: 700 !important; } .slide-cta-group { display: flex !important; gap: 14px !important; margin-top: 1.5rem !important; flex-wrap: wrap !important; justify-content: center !important; } .slide-cta-btn { padding: 13px 26px !important; border-radius: 6px !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; } .slide-cta-btn.primary { background: #e63946 !important; color: #ffffff !important; border: 1px solid #e63946 !important; } .slide-cta-btn.primary:hover { background: #d62f3a !important; color: #ffffff !important; border-color: #d62f3a !important; } .slide-cta-btn.secondary { background: rgba(255,255,255,0.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.6) !important; } .slide-cta-btn.secondary:hover { background: rgba(255,255,255,0.2) !important; border-color: #ffffff !important; color: #ffffff !important; } /* ===================================================================== [AI Updated] Hero Slide CTA Buttons & Text Right Benchmark Styling ===================================================================== */ .slide-text-right { background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; padding: 2.2rem 3rem !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .slide-text-right p { font-size: 1.15rem !important; text-align: center !important; font-weight: 700 !important; margin: 0 0 10px 0 !important; } .slide-cta-group { display: flex !important; flex-direction: row !important; gap: 14px !important; margin-top: 0.5rem !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; } .slide-cta-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 26px !important; border-radius: 6px !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.02em !important; text-transform: none !important; box-sizing: border-box !important; line-height: 1 !important; height: 44px !important; } .slide-cta-btn.primary { background: #e63946 !important; color: #ffffff !important; border: 1px solid #e63946 !important; } .slide-cta-btn.primary:hover { background: #d62f3a !important; color: #ffffff !important; border-color: #d62f3a !important; } .slide-cta-btn.secondary { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.7) !important; } .slide-cta-btn.secondary:hover { background: rgba(255,255,255,0.2) !important; border-color: #ffffff !important; color: #ffffff !important; } /* ===================================================================== [AI Updated] Testimonial Section - Light Mode & Interactive Cards ===================================================================== */ .testimonial-section { background: #f8f9fa !important; } .testimonial-title { color: #111111 !important; } .testimonial-sub { color: #666666 !important; } .clean-pill-badge { border-color: #e63946 !important; color: #e63946 !important; } .testimonial-grid { display: flex !important; gap: 30px !important; align-items: center !important; justify-content: center !important; padding: 20px 0 !important; } .testimonial-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 40px 30px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; cursor: pointer !important; transform: scale(0.95) !important; position: relative !important; flex: 1 !important; max-width: 400px !important; min-height: 280px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; z-index: 1 !important; } .testimonial-card.featured, .testimonial-card:hover { border: 2px solid #e63946 !important; transform: scale(1.05) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; z-index: 10 !important; } .testimonial-quote-icon { font-size: 3rem !important; line-height: 1 !important; color: #ffb3b3 !important; margin-bottom: 20px !important; font-family: Georgia, serif !important; transition: all 0.3s ease !important; } .testimonial-card.featured .testimonial-quote-icon, .testimonial-card:hover .testimonial-quote-icon { color: #e63946 !important; } .testimonial-text { color: #333333 !important; font-size: 1.05rem !important; line-height: 1.6 !important; font-weight: 500 !important; margin-bottom: 30px !important; } .testimonial-author { display: flex !important; align-items: center !important; gap: 15px !important; border-top: 1px solid #f1f5f9 !important; padding-top: 20px !important; } .testimonial-avatar { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; font-weight: 800 !important; background: #ffe5e5 !important; color: #e63946 !important; transition: all 0.3s ease !important; } .testimonial-card.featured .testimonial-avatar, .testimonial-card:hover .testimonial-avatar { background: #e63946 !important; color: #ffffff !important; } .testimonial-info strong { display: block !important; color: #111111 !important; font-size: 1.05rem !important; font-weight: 700 !important; margin-bottom: 2px !important; } .testimonial-info span { display: block !important; color: #888888 !important; font-size: 0.85rem !important; } .testimonial-stars { display: none !important; /* Hide stars based on image */ } @media (max-width: 768px) { .testimonial-grid { flex-direction: column !important; } .testimonial-card { transform: scale(1) !important; padding: 20px 18px !important; min-height: auto !important; border-radius: 14px !important; } .testimonial-card.featured, .testimonial-card:hover { transform: scale(1.02) !important; } .testimonial-quote-icon { font-size: 1.8rem !important; margin-bottom: 10px !important; } .testimonial-text { font-size: 0.78rem !important; line-height: 1.55 !important; margin-bottom: 14px !important; } .testimonial-author { gap: 10px !important; padding-top: 12px !important; } .testimonial-avatar { width: 36px !important; height: 36px !important; font-size: 0.85rem !important; } .testimonial-info strong { font-size: 0.85rem !important; } .testimonial-info span { font-size: 0.72rem !important; } } /* ===================================================================== [AI Updated 2] Testimonial Section - High Specificity Fixes ===================================================================== */ html body #testimonials .testimonial-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 40px 30px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; cursor: pointer !important; transform: scale(0.95) !important; position: relative !important; z-index: 1 !important; } html body #testimonials .testimonial-card.featured, html body #testimonials .testimonial-card:hover { border: 2px solid #e63946 !important; transform: scale(1.05) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; z-index: 10 !important; } html body #testimonials .testimonial-card .testimonial-quote-icon { font-size: 3rem !important; line-height: 1 !important; color: #ffb3b3 !important; margin-bottom: 20px !important; font-family: Georgia, serif !important; transition: all 0.3s ease !important; } html body #testimonials .testimonial-card.featured .testimonial-quote-icon, html body #testimonials .testimonial-card:hover .testimonial-quote-icon { color: #e63946 !important; opacity: 1 !important; } html body #testimonials .testimonial-card .testimonial-avatar { width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.1rem !important; font-weight: 800 !important; background: #ffe5e5 !important; color: #e63946 !important; transition: all 0.3s ease !important; } html body #testimonials .testimonial-card.featured .testimonial-avatar, html body #testimonials .testimonial-card:hover .testimonial-avatar { background: #e63946 !important; color: #ffffff !important; } @media (max-width: 768px) { html body #testimonials .testimonial-card { transform: scale(1) !important; } html body #testimonials .testimonial-card.featured, html body #testimonials .testimonial-card:hover { transform: scale(1.02) !important; } } /* ===================================================================== [AI Updated 3] Testimonial Swiper Styles ===================================================================== */ .testimonialSwiper { padding-bottom: 50px !important; padding-top: 10px !important; overflow: hidden; } .testimonialSwiper .swiper-slide { height: auto !important; /* Ensure all cards stretch to same height if we use align-items stretch, or just let them fit content */ display: flex; justify-content: center; } .testimonial-pagination { bottom: 0 !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: none !important; } @media (max-width: 1024px) { .testimonial-pagination { bottom: 15px !important; } } @media (max-width: 768px) { .testimonial-pagination { bottom: 25px !important; } } .testimonial-pagination .swiper-pagination-bullet { background: #e2e8f0; opacity: 1; width: 10px; height: 10px; transition: all 0.3s ease; } .testimonial-pagination .swiper-pagination-bullet-active { background: #e63946; width: 24px; border-radius: 5px; } /* ===================================================================== [AI Updated 4] Ensure Swiper slides are correctly sized ===================================================================== */ html body #testimonials .testimonialSwiper .swiper-wrapper { display: flex !important; box-sizing: content-box !important; } html body #testimonials .testimonialSwiper .swiper-slide { /* Removed width override */ flex-shrink: 0 !important; height: auto !important; } html body #testimonials .testimonialSwiper .testimonial-card { width: 100% !important; max-width: 100% !important; flex: none !important; margin: 10px 0 !important; } /* ===================================================================== [AI Updated 5] Testimonial Swiper - Centered & Hover Logic ===================================================================== */ /* Reset normal state for all cards inside swiper */ html body #testimonials .testimonialSwiper .testimonial-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; transform: scale(0.95) !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important; z-index: 1 !important; } html body #testimonials .testimonialSwiper .testimonial-card .testimonial-quote-icon { color: #ffb3b3 !important; } html body #testimonials .testimonialSwiper .testimonial-card .testimonial-avatar { background: #ffe5e5 !important; color: #e63946 !important; } /* 1. Default state: Highlight the active (center) slide when the swiper is NOT hovered */ html body #testimonials .testimonialSwiper:not(:hover) .swiper-slide-active .testimonial-card { border: 2px solid #e63946 !important; transform: scale(1.05) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; z-index: 10 !important; } html body #testimonials .testimonialSwiper:not(:hover) .swiper-slide-active .testimonial-card .testimonial-quote-icon { color: #e63946 !important; opacity: 1 !important; } html body #testimonials .testimonialSwiper:not(:hover) .swiper-slide-active .testimonial-card .testimonial-avatar { background: #e63946 !important; color: #ffffff !important; } /* 2. Hover state: Highlight ONLY the slide being hovered (overriding active slide) */ html body #testimonials .testimonialSwiper .swiper-slide:hover .testimonial-card { border: 2px solid #e63946 !important; transform: scale(1.05) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; z-index: 10 !important; } html body #testimonials .testimonialSwiper .swiper-slide:hover .testimonial-card .testimonial-quote-icon { color: #e63946 !important; opacity: 1 !important; } html body #testimonials .testimonialSwiper .swiper-slide:hover .testimonial-card .testimonial-avatar { background: #e63946 !important; color: #ffffff !important; } /* ===================================================================== [AI Updated 6] Fix clipped cards in Swiper ===================================================================== */ html body #testimonials .testimonialSwiper { padding-top: 40px !important; padding-bottom: 80px !important; /* Extra room for pagination and scale */ margin-top: -30px !important; /* Offset the extra top padding */ overflow: visible !important; /* Allow shadow to bleed if necessary, though padding should contain it */ clip-path: inset(-50px 0 -80px 0) !important; /* Safe clipping if overflow visible causes horizontal scroll */ } html body #testimonials .testimonialSwiper .swiper-wrapper { align-items: center !important; /* Ensure they center vertically and don't stretch weirdly */ } html body #testimonials .testimonialSwiper .testimonial-card { margin: 0 !important; /* Remove margin to rely purely on swiper padding */ } /* ===================================================================== [AI Updated 7] Fix horizontal clipping ===================================================================== */ html body #testimonials .testimonialSwiper { padding: 40px 20px 80px 20px !important; /* Added 20px horizontal padding for scale/shadows */ margin: -30px -20px 0 -20px !important; /* Offset the padding so layout doesn't shrink visually */ overflow: visible !important; /* Allow slides to bleed out to the edge of the screen */ clip-path: none !important; /* Remove restrictive clip-path */ } /* ===================================================================== [AI Updated 8] Premium UI Redesign for Quick Contact & Clean Avatars ===================================================================== */ /* Testimonial Avatar Gradients (Removed inline styles from HTML) */ .avatar-grad-1 { background: linear-gradient(135deg, #ff3b30, #ff6b35) !important; color: #fff !important; } .avatar-grad-2 { background: linear-gradient(135deg, #c0392b, #e74c3c) !important; color: #fff !important; } .avatar-grad-3 { background: linear-gradient(135deg, #1a1a2e, #16213e) !important; color: #fff !important; } .avatar-grad-4 { background: linear-gradient(135deg, #2a9d8f, #21867a) !important; color: #fff !important; } .avatar-grad-5 { background: linear-gradient(135deg, #f4a261, #e76f51) !important; color: #fff !important; } /* ----------------------------------------- Premium Quick Contact Section Redesign -------------------------------------------- */ #quick-contact.quick-contact-banner, html body #quick-contact.quick-contact-banner { position: relative !important; background: #000000 !important; background-image: radial-gradient(circle at 50% -20%, rgba(230, 57, 70, 0.12), transparent 60%), linear-gradient(to bottom, transparent, rgba(230, 57, 70, 0.05)) !important; overflow: hidden !important; } /* Glassmorphism Cards */ #quick-contact .qcb-item.qcb-card, html body #quick-contact .qcb-item { background: rgba(255, 255, 255, 0.02) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 24px !important; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; position: relative !important; overflow: hidden !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; } /* Card Glow Effect on Hover */ #quick-contact .qcb-item.qcb-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(230, 57, 70, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } #quick-contact .qcb-item.qcb-card:hover, html body #quick-contact .qcb-item:hover { transform: translateY(-8px) scale(1.02) !important; border-color: rgba(230, 57, 70, 0.4) !important; box-shadow: 0 20px 40px rgba(230, 57, 70, 0.2), inset 0 0 20px rgba(230, 57, 70, 0.05) !important; } #quick-contact .qcb-item.qcb-card:hover::before { opacity: 1; } /* Premium Icons */ #quick-contact .qcb-icon, html body #quick-contact .qcb-icon { position: relative; z-index: 1; background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 50% !important; box-shadow: inset 0 2px 5px rgba(255,255,255,0.05) !important; transition: all 0.4s ease !important; } #quick-contact .qcb-icon svg { color: rgba(255, 255, 255, 0.7) !important; transition: all 0.4s ease !important; } #quick-contact .qcb-item.qcb-card:hover .qcb-icon { background: rgba(230, 57, 70, 0.15) !important; border-color: rgba(230, 57, 70, 0.5) !important; box-shadow: 0 0 20px rgba(230, 57, 70, 0.4), inset 0 2px 5px rgba(255,255,255,0.1) !important; } #quick-contact .qcb-item.qcb-card:hover .qcb-icon svg { color: #e63946 !important; filter: drop-shadow(0 0 8px rgba(230, 57, 70, 0.8)); transform: scale(1.1); } #quick-contact .qcb-item.qcb-card span { position: relative; z-index: 1; color: rgba(255, 255, 255, 0.9) !important; font-weight: 600 !important; transition: color 0.3s ease; } #quick-contact .qcb-item.qcb-card:hover span { color: #ffffff !important; } /* Premium Pulse Button */ @keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0.6); } 70% { box-shadow: 0 0 0 20px rgba(230, 57, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); } } #quick-contact .qcb-main-cta, html body #quick-contact .qcb-main-cta { background: linear-gradient(135deg, #ff4d4d 0%, #e63946 100%) !important; border-radius: 50px !important; padding: 20px 40px !important; font-size: 1.1rem !important; font-weight: 800 !important; letter-spacing: 0.5px !important; text-transform: uppercase; box-shadow: 0 8px 25px rgba(230, 57, 70, 0.4) !important; animation: pulseGlow 2.5s infinite; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,0.2) !important; } #quick-contact .qcb-main-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent); transform: skewX(-25deg); transition: all 0.5s ease; } #quick-contact .qcb-main-cta:hover::after { left: 200%; } #quick-contact .qcb-main-cta:hover { transform: translateY(-4px) scale(1.02) !important; box-shadow: 0 15px 35px rgba(230, 57, 70, 0.6) !important; background: linear-gradient(135deg, #ff2a2a 0%, #d62828 100%) !important; animation: none; /* Stop pulse on hover */ } /* ===================================================================== [AI Updated 9] Ultimate Premium Quick Contact & Footer Layout Fix ===================================================================== */ html body #quick-contact.quick-contact-banner { padding: 100px 0 40px !important; /* Reduced padding to fit screen */ background: #030305 !important; /* Deeper black */ position: relative !important; z-index: 1; } /* Glowing Orbs for Glassmorphism - Hiding these to match the clean centered radial gradient design */ html body #quick-contact.quick-contact-banner::before { display: none !important; } html body #quick-contact.quick-contact-banner::after { display: none !important; } /* Make inner content sit above orbs */ html body #quick-contact .qcb-inner { position: relative; z-index: 2; gap: 30px !important; /* Reduced gap to save vertical space */ } /* Much brighter Glassmorphism Cards */ html body #quick-contact .qcb-item.qcb-card { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-top: 1px solid rgba(255, 255, 255, 0.25) !important; /* Shine effect */ border-radius: 24px !important; box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1) !important; padding: 28px 24px !important; /* Reduced padding */ } /* Hover Enhancement */ html body #quick-contact .qcb-item.qcb-card:hover { background: rgba(255, 255, 255, 0.08) !important; transform: translateY(-8px) scale(1.03) !important; border-color: rgba(230, 57, 70, 0.5) !important; box-shadow: 0 25px 50px rgba(230, 57, 70, 0.25), inset 0 0 20px rgba(230, 57, 70, 0.1) !important; } /* Adjust Main CTA to save space */ html body #quick-contact .qcb-main-cta { padding: 18px 40px !important; margin-top: -10px !important; } /* Fix Footer overlapping */ html body .simple-footer { padding: 30px 0 20px !important; /* Shrink footer padding */ } html body .simple-footer-bottom { margin-top: 20px !important; padding-top: 15px !important; } /* ===================================================================== [AI Updated 10] Force Quick Contact to stretch and hide white gap ===================================================================== */ html body #quick-contact.quick-contact-banner { min-height: calc(100dvh - 260px) !important; /* Force section to stretch and fill screen with footer */ } /* ========================================================================== *** FINAL PREMIUM UPGRADE - ALL 12 ITEMS *** ========================================================================== */ /* ------------------------------------------------------- 1. Page Loading Intro Overlay -------------------------------------------------------- */ #udr-intro-overlay { position: fixed; inset: 0; background: #000; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; } #udr-intro-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .udr-intro-content { text-align: center; animation: introFadeIn 0.4s ease forwards; } @keyframes introFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .udr-intro-logo { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 28px; } .udr-intro-logo span { font-family: 'Inter', sans-serif; font-size: 2rem; font-weight: 900; color: #fff; letter-spacing: 0.05em; } .udr-intro-bar { width: 200px; height: 2px; background: rgba(255,255,255,0.15); border-radius: 2px; margin: 0 auto; overflow: hidden; } .udr-intro-progress { height: 100%; width: 0%; background: linear-gradient(90deg, #e63946, #ff6b35); border-radius: 2px; animation: introLoad 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: 0.3s; } @keyframes introLoad { to { width: 100%; } } /* ------------------------------------------------------- 2. Scroll Progress Bar -------------------------------------------------------- */ #scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #e63946 0%, #ff6b35 50%, #e63946 100%); background-size: 200% auto; z-index: 99998; animation: progressShimmer 2s linear infinite; box-shadow: 0 0 10px rgba(230,57,70,0.6); transition: width 0.08s ease; } @keyframes progressShimmer { to { background-position: 200% center; } } /* ------------------------------------------------------- 3. Custom Cursor -------------------------------------------------------- */ body { cursor: auto !important; } a, button, [role="button"], .c-tab-btn, .swiper-slide, .board-item-row, .custom-family-dropdown, select, .p-tab-btn, .qcb-item, .category-tab-btn, .board-tab-btn, .modal-close-btn, .pw-clear-btn, .pw-toggle-btn { cursor: pointer !important; } #udr-cursor, #udr-cursor-follower { display: none !important; } #udr-cursor { position: fixed; width: 8px; height: 8px; background: #e63946; border-radius: 50%; pointer-events: none; z-index: 99997; transform: translate(-50%, -50%); transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease; mix-blend-mode: normal; } #udr-cursor-follower { position: fixed; width: 32px; height: 32px; border: 1.5px solid rgba(230,57,70,0.5); border-radius: 50%; pointer-events: none; z-index: 99996; transform: translate(-50%, -50%); transition: transform 0.18s ease, width 0.4s ease, height 0.4s ease, border-color 0.3s ease, background 0.3s ease; } body.cursor-hover #udr-cursor { width: 12px; height: 12px; background: #ff6b35; } body.cursor-hover #udr-cursor-follower { width: 50px; height: 50px; background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.8); } @media (max-width: 1024px) { body { cursor: auto !important; } a, button, [role="button"], .c-tab-btn, .swiper-slide { cursor: pointer !important; } #udr-cursor, #udr-cursor-follower { display: none !important; } } /* ------------------------------------------------------- 4. Trust / Stats Strip -------------------------------------------------------- */ .trust-strip-section { background: #fff; padding: 0; overflow: hidden; border-bottom: 1px solid #f0f0f0; position: relative; z-index: 10; } .trust-strip-inner { display: flex; align-items: center; justify-content: center; gap: 0; padding: 40px 60px; border-bottom: 1px solid #f5f5f5; } .trust-stat-item { flex: 1; text-align: center; padding: 0 30px; } .trust-stat-number { font-family: 'Inter', sans-serif; font-size: 3.5rem; font-weight: 900; color: #0f172a; line-height: 1; letter-spacing: -0.04em; display: inline-block; } .trust-stat-unit { font-family: 'Inter', sans-serif; font-size: 1.8rem; font-weight: 700; color: #e63946; margin-left: 2px; vertical-align: top; line-height: 1.4; } .trust-stat-label { font-size: 0.85rem; color: #64748b; margin-top: 6px; font-weight: 500; letter-spacing: 0.02em; } .trust-divider { width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, #e2e8f0, transparent); flex-shrink: 0; } /* Trust Ticker (marquee-style) */ .trust-ticker-wrap { overflow: hidden; background: #0f172a; padding: 14px 0; } .trust-ticker { display: flex; gap: 0; animation: tickerScroll 30s linear infinite; width: max-content; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .trust-badge { display: inline-flex; align-items: center; padding: 0 36px; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.75); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border-right: 1px solid rgba(255,255,255,0.1); transition: color 0.3s ease; } .trust-badge:hover { color: #e63946; } @media (max-width: 768px) { .trust-strip-inner { padding: 28px 20px; gap: 0; } .trust-stat-item { padding: 0 12px; } .trust-stat-number { font-size: 2.2rem; } .trust-stat-unit { font-size: 1.2rem; } } /* ------------------------------------------------------- 5. Section Transition Dividers -------------------------------------------------------- */ /* Dark-to-Light diagonal divider */ .dark-to-light-divider { height: 60px; background: linear-gradient(to bottom right, #0a0a12 50%, #fff 50%); position: relative; z-index: 5; } .light-to-dark-divider { height: 60px; background: linear-gradient(to bottom right, #fff 50%, #0a0a12 50%); position: relative; z-index: 5; } /* ------------------------------------------------------- 6. Testimonials - Fix clipping and overflow -------------------------------------------------------- */ html body #testimonials.testimonial-section { overflow: visible !important; } html body #testimonials .testimonial-container { overflow: visible !important; } html body #testimonials .testimonialSwiper { padding: 50px 20px 80px !important; margin: -30px -20px 0 !important; overflow: visible !important; /* No clip-path - let cards breathe */ } html body #testimonials .testimonialSwiper .swiper-wrapper { align-items: center !important; overflow: visible !important; } /* ------------------------------------------------------- 7. Quick Contact - Fix white gap above -------------------------------------------------------- */ html body #quick-contact.quick-contact-banner { margin-top: 0 !important; border-top: none !important; } html body .testimonial-section + .quick-contact-banner, html body .testimonial-section.snap-section { overflow: visible !important; } /* ------------------------------------------------------- 8. Ambient Light - Testimonial Section (subtle rotation) -------------------------------------------------------- */ @keyframes ambientRotate { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.05); } 100% { transform: rotate(360deg) scale(1); } } html body #testimonials.testimonial-section { position: relative !important; } html body #testimonials.testimonial-section::after, html body #testimonials.testimonial-section::before { display: none !important; content: none !important; } html body #testimonials .testimonial-container { position: relative; z-index: 1; } /* ------------------------------------------------------- 9. Quick Contact - Pulsing orbs animation -------------------------------------------------------- */ @keyframes orbPulse { 0%, 100% { opacity: 0.18; transform: scale(1); } 50% { opacity: 0.28; transform: scale(1.08); } } html body #quick-contact.quick-contact-banner::before { animation: orbPulse 5s ease-in-out infinite !important; } html body #quick-contact.quick-contact-banner::after { animation: orbPulse 7s ease-in-out 1s infinite !important; } /* ------------------------------------------------------- 10. Hero Slide Text ? Premium Overhaul -------------------------------------------------------- */ html body .slide-content { display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; padding: 0 80px 80px !important; position: absolute !important; inset: 0 !important; } html body .slide-text-right { max-width: 480px !important; text-align: left !important; } html body .slide-text-right p { font-family: 'Noto Sans KR', sans-serif !important; font-size: clamp(1.6rem, 3vw, 2.4rem) !important; font-weight: 800 !important; color: #fff !important; line-height: 1.25 !important; text-shadow: 0 2px 30px rgba(0,0,0,0.5) !important; margin-bottom: 24px !important; letter-spacing: -0.02em !important; } html body .slide-cta-group { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; } html body .slide-cta-btn { padding: 14px 28px !important; font-size: 0.9rem !important; font-weight: 700 !important; border-radius: 50px !important; letter-spacing: 0.03em !important; transition: all 0.3s ease !important; } html body .slide-cta-btn.primary { background: #e63946 !important; color: #fff !important; border: 2px solid #e63946 !important; box-shadow: 0 8px 25px rgba(230,57,70,0.4) !important; } html body .slide-cta-btn.primary:hover { background: #d62828 !important; transform: translateY(-3px) !important; box-shadow: 0 12px 30px rgba(230,57,70,0.6) !important; } html body .slide-cta-btn.secondary { background: rgba(255,255,255,0.1) !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.4) !important; backdrop-filter: blur(10px) !important; } html body .slide-cta-btn.secondary:hover { background: rgba(255,255,255,0.2) !important; border-color: rgba(255,255,255,0.8) !important; transform: translateY(-3px) !important; } @media (max-width: 768px) { html body .slide-content { padding: 0 24px 60px !important; } html body .slide-text-right { max-width: 100% !important; } } /* ------------------------------------------------------- 11. Swiper card - FINAL fix, no more clipping -------------------------------------------------------- */ html body #testimonials .testimonialSwiper .testimonial-card { margin: 0 !important; } /* ========================================================================== DESIGN UPGRADE ? Hero, Sticky CTA, Nav Glassmorphism, Typography ========================================================================== */ /* ------------------------------------------------------- Sticky CTA Bar (always visible at bottom) -------------------------------------------------------- */ #sticky-cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; background: rgba(10, 10, 18, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(230, 57, 70, 0.3); display: flex; align-items: center; justify-content: center; gap: 28px; padding: 14px 40px; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #sticky-cta-bar.visible { transform: translateY(0); } .sticky-cta-text { font-size: 0.9rem; color: rgba(255, 255, 255, 0.8); margin: 0; letter-spacing: 0.01em; } .sticky-cta-text strong { color: #e63946; } .sticky-cta-icon { color: #ff3b30; margin-right: 6px; font-size: 1.1em; vertical-align: middle; } .sticky-cta-btn { display: inline-flex; align-items: center; padding: 10px 24px; background: linear-gradient(135deg, #e63946, #c1121f); color: #fff; font-size: 0.85rem; font-weight: 700; border-radius: 50px; text-decoration: none; white-space: nowrap; letter-spacing: 0.03em; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); } .sticky-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(230, 57, 70, 0.6); background: linear-gradient(135deg, #ff2a2a, #e63946); } @media (max-width: 768px) { #sticky-cta-bar { flex-direction: column; gap: 10px; padding: 14px 20px; } .sticky-cta-text { font-size: 0.78rem; text-align: center; } .sticky-cta-btn { padding: 10px 22px; font-size: 0.82rem; } } /* ------------------------------------------------------- Navigation Glassmorphism Upgrade -------------------------------------------------------- */ html body #topNav, html body .top-nav, html body nav.main-nav { backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important; background: rgba(0, 0, 0, 0.45) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; transition: background 0.3s ease, border-color 0.3s ease !important; } /* ------------------------------------------------------- Hero Slide Text ? New Premium Layout -------------------------------------------------------- */ html body .slide-content { position: absolute !important; inset: 0 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; padding: 0 80px 100px !important; z-index: 2 !important; } html body .slide-content.slide-content-right { justify-content: flex-end !important; } .hero-text-block { max-width: 560px; text-align: left; animation: heroTextIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; } .hero-text-block.hero-align-right { text-align: right; } .hero-text-block.hero-align-center { text-align: center; margin: 0 auto; } @keyframes heroTextIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Swiper active slide triggers animation */ .swiper-slide-active .hero-text-block, .swiper-slide-duplicate-active .hero-text-block { animation: heroTextIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.1s; } .hero-eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #e63946; background: rgba(230, 57, 70, 0.12); border: 1px solid rgba(230, 57, 70, 0.3); padding: 6px 14px; border-radius: 50px; margin-bottom: 20px; } .hero-headline { font-family: 'Noto Sans KR', sans-serif !important; font-size: clamp(2.8rem, 5.5vw, 5rem) !important; font-weight: 900 !important; color: #fff !important; line-height: 1.1 !important; letter-spacing: -0.03em !important; margin: 0 0 18px !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25) !important; } .hero-accent { color: #e63946 !important; position: relative; } .hero-accent::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #e63946; border-radius: 2px; opacity: 0.6; } .hero-subline { font-family: 'Noto Sans KR', sans-serif !important; font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.75) !important; line-height: 1.7 !important; margin: 0 0 30px !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important; } /* ------------------------------------------------------- CTA Button System ? Final -------------------------------------------------------- */ html body .slide-cta-group { display: flex !important; gap: 14px !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; } .hero-align-right .slide-cta-group { justify-content: flex-end !important; } .hero-align-center .slide-cta-group { justify-content: center !important; } html body .slide-cta-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 6px !important; padding: 15px 30px !important; font-size: 0.9rem !important; font-weight: 700 !important; border-radius: 50px !important; letter-spacing: 0.02em !important; text-decoration: none !important; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; white-space: nowrap !important; } html body .slide-cta-btn.primary { background: #e63946 !important; color: #fff !important; border: 2px solid transparent !important; box-shadow: 0 8px 25px rgba(230, 57, 70, 0.45) !important; } html body .slide-cta-btn.primary:hover { transform: translateY(-4px) scale(1.03) !important; box-shadow: 0 16px 35px rgba(230, 57, 70, 0.65) !important; background: #ff2a2a !important; } html body .slide-cta-btn.secondary { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(12px) !important; } html body .slide-cta-btn.secondary:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.7) !important; transform: translateY(-4px) !important; } /* ------------------------------------------------------- Mobile hero text -------------------------------------------------------- */ @media (max-width: 768px) { html body .slide-content { padding: 0 24px 80px !important; align-items: flex-end !important; justify-content: flex-start !important; } .hero-text-block, .hero-text-block.hero-align-right, .hero-text-block.hero-align-center { max-width: 100% !important; text-align: left !important; } .hero-align-right .slide-cta-group, .hero-align-center .slide-cta-group { justify-content: flex-start; } html body .slide-cta-btn { padding: 13px 22px !important; font-size: 0.82rem !important; } } /* ------------------------------------------------------- Grandiose Typography ? Fix "as" outline issue The g-outline-text is visually confusing, reduce opacity -------------------------------------------------------- */ html body .g-outline-text.as-word { font-size: clamp(1.2rem, 4vw, 2.5rem) !important; /* Fixed microscopic size */ font-weight: 700 !important; vertical-align: middle !important; color: transparent !important; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.7) !important; } /* ------------------------------------------------------- Section Transition ? Dark/Light Dividers Added as pseudo elements on sections -------------------------------------------------------- */ html body .testimonial-section.snap-section { position: relative !important; z-index: 2 !important; } /* Testimonial top edge shadow to separate from dark above */ html body #testimonials.testimonial-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.08) 0%, transparent 100%); pointer-events: none; z-index: 2; } /* ========================================================================== TRUST STRIP ? Complete redesign (dark premium, no overlap issues) ========================================================================== */ html body .trust-strip-section { background: #0a0a12 !important; position: relative !important; z-index: 1 !important; overflow: hidden !important; padding: 0 !important; height: auto !important; min-height: auto !important; scroll-snap-align: none !important; /* Don't snap - flows between hero and next */ } /* Stats row ? dark theme, dramatic */ html body .trust-strip-inner { display: flex !important; align-items: stretch !important; justify-content: center !important; padding: 50px 80px !important; gap: 0 !important; background: linear-gradient(135deg, #0d0d18 0%, #0a0a12 100%) !important; border-bottom: 1px solid rgba(230, 57, 70, 0.15) !important; position: relative !important; } /* Background grid lines */ html body .trust-strip-inner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(230,57,70,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(230,57,70,0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } html body .trust-stat-item { flex: 1 !important; text-align: center !important; padding: 0 40px !important; position: relative !important; z-index: 1 !important; } html body .trust-stat-number { font-family: 'Inter', sans-serif !important; font-size: clamp(2.8rem, 4vw, 4.5rem) !important; font-weight: 900 !important; color: #ffffff !important; line-height: 1 !important; letter-spacing: -0.05em !important; display: inline-block !important; } html body .trust-stat-unit { font-family: 'Inter', sans-serif !important; font-size: clamp(1.4rem, 2vw, 2rem) !important; font-weight: 700 !important; color: #e63946 !important; margin-left: 3px !important; vertical-align: top !important; line-height: 1.3 !important; } html body .trust-stat-label { font-size: 0.78rem !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.4) !important; margin-top: 10px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; } html body .trust-divider { width: 1px !important; height: auto !important; min-height: 60px !important; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.12), transparent) !important; flex-shrink: 0 !important; align-self: stretch !important; } /* Ticker strip ? cleaner design */ html body .trust-ticker-wrap { overflow: hidden !important; background: #e63946 !important; /* Solid red ? brand identity */ padding: 12px 0 !important; } html body .trust-ticker { display: flex !important; animation: tickerScroll 28s linear infinite !important; width: max-content !important; } html body .trust-badge { display: inline-flex !important; align-items: center !important; padding: 0 32px !important; font-size: 0.78rem !important; font-weight: 700 !important; color: rgba(255, 255, 255, 0.95) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; white-space: nowrap !important; border-right: 1px solid rgba(255, 255, 255, 0.25) !important; gap: 8px !important; } @media (max-width: 768px) { html body .trust-strip-inner { padding: 36px 20px !important; flex-wrap: wrap !important; gap: 24px 0 !important; } html body .trust-stat-item { padding: 0 20px !important; flex: 0 0 50% !important; } html body .trust-divider { display: none !important; } } /* Trust strip ? fix snap scroll issue, flow naturally */ html body .trust-strip-section { scroll-snap-align: none !important; height: auto !important; min-height: auto !important; max-height: none !important; } /* ========================================================================== HERO STATS BAR ? Fixed inside hero section, always visible ========================================================================== */ .hero-stats-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; background: transparent; pointer-events: none; } .hero-stats-inner { display: flex; align-items: center; justify-content: center; gap: 0; padding: 28px 80px; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); } .hero-stat-item { flex: 1; text-align: center; padding: 0 32px; } .hero-stat-num { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 900; color: #ffffff; line-height: 1; letter-spacing: -0.04em; display: inline-block; } .hero-stat-unit { font-family: 'Inter', sans-serif; font-size: clamp(1rem, 1.8vw, 1.6rem); font-weight: 700; color: #e63946; margin-left: 2px; vertical-align: top; line-height: 1.3; } .hero-stat-label { font-size: 0.7rem; font-weight: 500; color: rgba(255, 255, 255, 0.55); margin-top: 6px; letter-spacing: 0.12em; text-transform: uppercase; } .hero-stat-divider { width: 1px; height: 50px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2), transparent); flex-shrink: 0; } /* Hero ticker strip */ .hero-ticker-wrap { overflow: hidden; background: #e63946; padding: 10px 0; width: 100%; position: relative; user-select: none; } .hero-ticker { display: flex; width: max-content; animation: tickerScroll 30s linear infinite; will-change: transform; } .hero-ticker:hover { animation-play-state: paused; } .hero-ticker-track { display: flex; align-items: center; flex-shrink: 0; } .hero-badge { display: inline-flex; align-items: center; padding: 0 28px; font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, 0.25); gap: 6px; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Make sure hero section is position:relative for the stats bar */ html body .hero-slider { position: relative !important; overflow: hidden !important; } @media (max-width: 768px) { .hero-stats-inner { padding: 20px 16px; gap: 0; } .hero-stat-item { padding: 0 10px; } .hero-stat-num { font-size: 1.6rem; } .hero-stat-unit { font-size: 0.9rem; } .hero-stat-label { font-size: 0.6rem; letter-spacing: 0.05em; } .hero-stat-divider { height: 36px; } } /* ========================================================================== Fix hero text overlapping with stats bar ========================================================================== */ /* Push slide text up so it clears the stats bar (approx 150px tall) */ html body .slide-content { padding: 0 80px 180px !important; /* Increased bottom padding to clear stats bar */ align-items: flex-end !important; justify-content: flex-start !important; } html body .slide-content.slide-content-right { justify-content: flex-end !important; } /* Shrink stats bar slightly for cleaner look */ .hero-stats-inner { padding: 20px 80px !important; } .hero-stat-num { font-size: clamp(1.6rem, 2.8vw, 2.6rem) !important; } .hero-stat-unit { font-size: clamp(0.9rem, 1.4vw, 1.3rem) !important; } .hero-stat-label { font-size: 0.65rem !important; margin-top: 4px !important; } .hero-stat-divider { height: 40px !important; } @media (max-width: 768px) { html body .slide-content { padding: 0 24px 220px !important; } } /* ========================================================================== UDR DESIGN SYSTEM ? Full Visual Redesign CSS Design Tokens + Color Hierarchy + Typography Scale + Card Upgrades ========================================================================== */ /* ??????占쏙┼?????占썩닪???????占썩닪???1. DESIGN TOKENS ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ :root { /* Brand Colors */ --c-red: #e63946; --c-red-dark: #c1121f; --c-red-glow: rgba(230, 57, 70, 0.35); --c-red-soft: rgba(230, 57, 70, 0.08); --c-black: #050508; --c-dark: #0a0a14; --c-dark-mid: #111118; --c-dark-card: rgba(255,255,255,0.04); --c-white: #ffffff; --c-gray-50: #f9fafb; --c-gray-100: #f3f4f6; --c-gray-300: #d1d5db; --c-gray-500: #6b7280; --c-gray-700: #374151; --c-gold: #f59e0b; --c-gold-light: #fcd34d; /* Typography */ --font-heading: 'Noto Sans KR', sans-serif; --font-body: 'Inter', 'Noto Sans KR', sans-serif; --fs-display: clamp(3.2rem, 6vw, 6rem); --fs-h1: clamp(2.4rem, 4.5vw, 4.2rem); --fs-h2: clamp(1.8rem, 3vw, 3rem); --fs-h3: clamp(1.2rem, 2vw, 1.6rem); --fs-body: 1rem; --fs-small: 0.875rem; --fs-xs: 0.72rem; --fw-black: 900; --fw-bold: 700; --fw-medium: 500; --fw-normal: 400; --lh-tight: 1.15; --lh-normal: 1.6; --ls-tight: -0.03em; --ls-wide: 0.12em; /* Spacing */ --space-xs: 8px; --space-sm: 16px; --space-md: 32px; --space-lg: 64px; --space-xl: 120px; /* Radii */ --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 50px; /* Shadows */ --shadow-light: 0 4px 16px rgba(0,0,0,0.06); --shadow-card: 0 8px 30px rgba(0,0,0,0.10); --shadow-dark: 0 20px 60px rgba(0,0,0,0.40); --shadow-red: 0 8px 25px rgba(230, 57, 70, 0.40); --shadow-red-lg: 0 16px 40px rgba(230, 57, 70, 0.55); } /* ??????占쏙┼?????占썩닪???????占썩닪???2. GLOBAL TYPOGRAPHY RESET ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ html body { font-family: var(--font-body) !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } /* Section title / h2 ? unified across all sections */ html body .cinematic-title, html body .premium-tech-title, html body .cream-title, html body .testimonial-title, html body .qcb-title, html body .remo-header h2, html body .sf-main-title { font-family: var(--font-heading) !important; font-weight: var(--fw-black) !important; line-height: var(--lh-tight) !important; letter-spacing: var(--ls-tight) !important; } /* Section subtitle ? unified */ html body .cinematic-desc, html body .premium-tech-desc, html body .testimonial-sub, html body .qcb-subtitle, html body .one-line-sub, html body .sf-desc { font-family: var(--font-body) !important; font-weight: var(--fw-normal) !important; line-height: 1.9 !important; color: rgba(255,255,255,0.82) !important; letter-spacing: 0.1px !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???3. SECTION BADGES ? unified style ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼??*/ html body .red-motto-badge, html body .remo-badge, html body .clean-pill-badge { display: inline-block !important; font-family: var(--font-body) !important; font-size: var(--fs-xs) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-wide) !important; text-transform: uppercase !important; padding: 6px 16px !important; border-radius: var(--r-pill) !important; margin-bottom: 16px !important; } /* Dark background sections ? RED badge */ html body .cinematic-content .red-motto-badge, html body .cinematic-showcase-overlay .red-motto-badge, html body .premium-tech-header .red-motto-badge, html body .sf-content-wrapper .red-motto-badge, html body #quick-contact .red-motto-badge { background: rgba(230, 57, 70, 0.12) !important; color: var(--c-red) !important; border: 1px solid rgba(230, 57, 70, 0.3) !important; } /* CUSTOMER STORIES Badge - Soft Pink Fill + Red Border + Red Text */ html body #testimonials .clean-pill-badge { background: #fff0f2 !important; color: #e63946 !important; border: 1.5px solid #fca5a5 !important; border-radius: 50px !important; padding: 7px 22px !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; display: inline-block !important; box-shadow: none !important; } /* Cream section (promo video) ? clean pill */ html body .cream-video-section .clean-pill-badge { background: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.8) !important; border: 1px solid rgba(255,255,255,0.15) !important; } /* Ecosystem badge */ html body .ecosystem-badge { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.7) !important; border: 1px solid rgba(255,255,255,0.12) !important; font-size: var(--fs-xs) !important; letter-spacing: var(--ls-wide) !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???4. STAR RATINGS ? Gold instead of Red ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ html body .testimonial-stars i { color: var(--c-gold) !important; font-size: 0.85rem !important; filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.4)) !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???5. TESTIMONIAL SECTION ? Subtle warm background ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼??*/ html body #testimonials.testimonial-section { background: #fafafa !important; } /* Testimonial card ? cleaner typography */ html body .testimonial-card .testimonial-text { font-size: 0.85rem !important; line-height: 1.75 !important; color: #334155 !important; font-weight: var(--fw-normal) !important; } html body .testimonial-card .testimonial-info strong { font-size: 0.9rem !important; font-weight: var(--fw-bold) !important; color: #0f172a !important; } html body .testimonial-card .testimonial-info span { font-size: 0.75rem !important; color: var(--c-gray-500) !important; display: block !important; margin-top: 2px !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???6. CORE TECHNOLOGY CARDS ? Premium upgrade ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼??*/ html body .core-card { background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.06) !important; border-left: 3px solid var(--c-red) !important; border-radius: var(--r-md) !important; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; position: relative !important; overflow: hidden !important; } html body .core-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(230,57,70,0.06) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; } html body .core-card:hover::before { opacity: 1; } html body .core-card:hover { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; border-left-color: var(--c-red) !important; transform: translateY(-6px) !important; box-shadow: var(--shadow-dark), -3px 0 20px rgba(230,57,70,0.2) !important; } html body .core-label { font-size: var(--fs-xs) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-wide) !important; text-transform: uppercase !important; color: var(--c-red) !important; opacity: 0.9 !important; } html body .core-icon { color: rgba(255,255,255,0.5) !important; transition: color 0.3s ease, transform 0.3s ease !important; } html body .core-card:hover .core-icon { color: #fff !important; transform: scale(1.1) !important; } html body .core-title { font-family: var(--font-heading) !important; font-weight: var(--fw-black) !important; letter-spacing: var(--ls-tight) !important; } html body .core-desc { color: rgba(255,255,255,0.5) !important; font-size: var(--fs-small) !important; line-height: var(--lh-normal) !important; } html body .core-grid-new .core-btn, html body .core-btn { background: transparent !important; border: none !important; width: auto !important; padding: 0 !important; color: var(--c-red) !important; font-weight: var(--fw-bold) !important; font-size: var(--fs-small) !important; transition: gap 0.3s ease !important; display: inline-flex !important; justify-content: flex-start !important; align-items: center !important; gap: 4px !important; margin-top: auto !important; } html body .core-grid-new .core-card:hover .core-btn, html body .core-grid-new .core-card:active .core-btn, html body .core-card:hover .core-btn { background: transparent !important; border: none !important; color: var(--c-red) !important; gap: 10px !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???7. ECOSYSTEM CARDS ? Icon container upgrade ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ html body .eco-card { background: rgba(255,255,255,0.025) !important; border: 1px solid rgba(255,255,255,0.07) !important; border-radius: var(--r-lg) !important; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; position: relative !important; overflow: hidden !important; } html body .eco-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--c-red), transparent); transform: scaleX(0); transition: transform 0.4s ease; } html body .eco-card:hover::after { transform: scaleX(1); } html body .eco-card:hover { background: rgba(255,255,255,0.05) !important; border-color: rgba(230, 57, 70, 0.25) !important; transform: translateY(-8px) !important; box-shadow: var(--shadow-dark) !important; } html body .eco-icon { width: 64px !important; height: 64px !important; background: #fff0f2 !important; border: 1.5px solid #fca5a5 !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 12px auto 20px auto !important; transition: all 0.35s ease !important; box-shadow: 0 4px 14px rgba(230, 57, 70, 0.08) !important; } html body .eco-card:hover .eco-icon { background: #e63946 !important; border-color: #e63946 !important; transform: scale(1.06) !important; box-shadow: 0 8px 24px rgba(230, 57, 70, 0.25) !important; } html body .eco-icon svg { width: 34px !important; height: 34px !important; color: #e63946 !important; stroke: #e63946 !important; transition: all 0.35s ease !important; } html body .eco-card:hover .eco-icon svg { color: #ffffff !important; stroke: #ffffff !important; } html body .eco-label { font-size: var(--fs-xs) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-wide) !important; text-transform: uppercase !important; color: var(--c-red) !important; } html body .eco-title { font-family: var(--font-heading) !important; font-weight: var(--fw-black) !important; letter-spacing: var(--ls-tight) !important; } html body .eco-desc { color: rgba(255,255,255,0.45) !important; font-size: var(--fs-small) !important; line-height: var(--lh-normal) !important; } html body .eco-btn { color: var(--c-red) !important; font-weight: var(--fw-bold) !important; font-size: var(--fs-small) !important; display: flex !important; align-items: center !important; gap: 4px !important; transition: gap 0.3s ease !important; } html body .eco-card:hover .eco-btn { gap: 10px !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???8. VIDEO SECTION CTA ? Differentiate the two ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ /* Space / Luxury section ? filled red button */ html body #space .btn-outline-red { background: transparent !important; color: #fff !important; border: 1.5px solid #ffffff !important; } html body #space .btn-outline-red:hover { background: #ffffff !important; color: #111111 !important; transform: translateY(-3px) !important; box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2) !important; } /* Realism section ? keep outline style */ html body #realism .btn-outline-red { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,0.6) !important; } html body #realism .btn-outline-red:hover { background: rgba(255,255,255,0.1) !important; border-color: #fff !important; transform: translateY(-3px) !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???9. GRANDIOSE TYPOGRAPHY ? Clean up outline text ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼??*/ html body .g-outline-text { -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7) !important; /* Clean white stroke for FIELD/BEYOND */ color: transparent !important; letter-spacing: 0 !important; } html body .g-outline-text.as-word { -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.7) !important; color: transparent !important; font-weight: 700 !important; font-size: clamp(1.2rem, 4vw, 2.5rem) !important; vertical-align: middle !important; margin: 0 5px !important; } html body .g-thin-text { font-weight: 300 !important; letter-spacing: 0.05em !important; color: rgba(255,255,255,0.7) !important; } html body .g-bold-text { font-weight: 800 !important; /* Slightly thinner than 900 */ letter-spacing: -0.02em !important; /* Looser than --ls-tight */ } /* Subtext and Divider Polish */ html body .g-subtext { color: rgba(255, 255, 255, 0.8) !important; font-weight: 500 !important; letter-spacing: 0.05em !important; } html body .g-divider { background-color: #ff3b30 !important; /* Premium Red Accent */ height: 2px !important; width: 50px !important; opacity: 0.9 !important; margin-top: 20px !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???10. GLOBAL BUTTON SYSTEM ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ /* Remove any lingering inconsistent btn styles */ html body .btn-outline-red { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: max-content !important; gap: 8px !important; padding: 10px 24px !important; font-family: var(--font-body) !important; font-size: 13px !important; font-weight: var(--fw-bold) !important; border-radius: var(--r-pill) !important; letter-spacing: 0.03em !important; text-decoration: none !important; cursor: pointer !important; transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???11. HERO SECTION ? Red usage cleanup ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ /* Only ONE accent per slide ? just the span.hero-accent stays red */ html body .hero-eyebrow { background: rgba(230, 57, 70, 0.10) !important; color: var(--c-red) !important; border: 1px solid rgba(230, 57, 70, 0.25) !important; font-size: var(--fs-xs) !important; font-weight: var(--fw-bold) !important; letter-spacing: var(--ls-wide) !important; } html body .hero-headline { font-family: var(--font-heading) !important; font-weight: var(--fw-black) !important; line-height: 1.08 !important; letter-spacing: -0.04em !important; } html body .hero-subline { font-weight: var(--fw-normal) !important; color: rgba(255,255,255,0.68) !important; line-height: 1.75 !important; } /* Hero accent ? single keyword red, with subtle glow */ html body .hero-accent { color: var(--c-red) !important; text-shadow: 0 0 30px rgba(230,57,70,0.35) !important; } html body .hero-accent::after { display: none !important; } /* remove underline duplicate */ /* ??????占쏙┼?????占썩닪???????占썩닪???12. CINEMATIC TITLE SIZE ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼??*/ html body .cinematic-title { font-size: clamp(2.8rem, 5vw, 4.8rem) !important; font-weight: 800 !important; /* Slightly thinner than black (900) for elegance */ color: #fff !important; letter-spacing: -0.02em !important; line-height: 1.05 !important; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???13. CREAM/PROMO VIDEO SECTION ? Typography upgrade ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼??*/ html body .cream-title { font-family: var(--font-heading) !important; font-size: clamp(1.8rem, 4vw, 2.4rem) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; } html body .cream-item-title { font-family: var(--font-heading) !important; font-weight: 500 !important; font-size: 0.85rem !important; letter-spacing: 0 !important; } html body .cream-item-sub { font-size: var(--fs-xs) !important; letter-spacing: var(--ls-wide) !important; text-transform: uppercase !important; color: rgba(255,255,255,0.6) !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???14. TESTIMONIAL ? Quote icon upgrade ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???*/ html body .testimonial-quote-icon { color: var(--c-red) !important; opacity: 0.15 !important; /* Very subtle ? let text breathe */ font-size: 5rem !important; line-height: 1 !important; } /* ??????占쏙┼?????占썩닪???????占썩닪???15. PREMIUM TECH SECTION ? Header text ??????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪????????占쏙┼?????占썩닪???????占썩닪???hidden !important; /* clip outside cleanly */ padding: 0 !important; } html body #testimonials .testimonialSwiper { overflow: visible !important; padding: 40px 60px 60px !important; /* side padding so edge cards show */ margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } html body #testimonials .swiper-wrapper { overflow: visible !important; } /* 3. Dot Navigator ? push it behind the testimonial cards */ #dotNavigator { z-index: 50 !important; /* lower than swiper cards */ } html body #testimonials .testimonial-card { position: relative !important; z-index: 60 !important; } TESTIMONIAL SWIPER VISIBILITY FIX 2 - Reset all overrides ========================================================================== */ /* Reset visibility and opacity completely for all slides */ html body #testimonials .swiper-slide { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; display: block !important; } html body #testimonials .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Also reset the wrapper to not do anything weird */ html body #testimonials .swiper-wrapper { visibility: visible !important; opacity: 1 !important; } /* ========================================================================== TESTIMONIAL ACTIVE STATE - Make center slide pop out and scale ========================================================================== */ /* Re-introduce scale difference so the center slide pops out */ html body #testimonials .swiper-slide { transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease !important; } /* Inactive slides: slightly smaller and slightly transparent */ html body #testimonials .swiper-slide:not(.swiper-slide-active) { transform: scale(0.9) !important; opacity: 0.6 !important; } html body #testimonials .swiper-slide:not(.swiper-slide-active) .testimonial-card { border: 1.5px solid #d1d5db !important; box-shadow: none !important; } /* Active center slide: full size, fully opaque, highlighted border and shadow */ html body #testimonials .swiper-slide.swiper-slide-active { transform: scale(1.05) !important; opacity: 1 !important; z-index: 10 !important; } html body #testimonials .swiper-slide.swiper-slide-active .testimonial-card { border: 2px solid #e63946 !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; } html body #testimonials .swiper-slide.swiper-slide-active .testimonial-card .testimonial-quote-icon { color: #e63946 !important; } html body #testimonials .swiper-slide.swiper-slide-active .testimonial-card .testimonial-avatar { background: #e63946 !important; color: #ffffff !important; } /* ========================================================================== TESTIMONIAL SECTION - FINAL CLEAN CSS ========================================================================== */ /* 1. Cursor follower hidden */ #testimonials ~ * #udr-cursor-follower, #testimonials #udr-cursor-follower { display: none !important; } html body #testimonials * { cursor: auto !important; } /* 2. Testimonial Swiper - fix left/right card clipping on hover */ html body #testimonials .testimonial-container { overflow: visible !important; padding: 0 30px !important; max-width: 1300px !important; box-sizing: border-box !important; } html body #testimonials .testimonialSwiper { overflow: visible !important; padding: 40px 15px 70px !important; margin: 0 !important; width: 100% !important; box-sizing: border-box !important; } html body #testimonials .swiper-wrapper { overflow: visible !important; } /* 3. Dot Navigator behind */ #dotNavigator { z-index: 50 !important; } /* 4. Slides visibility - NO display none, NO pointer-events none */ html body #testimonials .swiper-slide { visibility: visible !important; opacity: 0.4 !important; transform: scale(0.85) !important; transition: transform 0.4s ease, opacity 0.4s ease !important; height: auto !important; pointer-events: auto !important; } /* 5. Active slide pops out */ html body #testimonials .swiper-slide.swiper-slide-active { opacity: 1 !important; transform: scale(1.05) !important; z-index: 10 !important; } /* Make adjacent slides slightly more visible to avoid harsh cuts */ html body #testimonials .swiper-slide.swiper-slide-next, html body #testimonials .swiper-slide.swiper-slide-prev { opacity: 0.7 !important; transform: scale(0.95) !important; } /* 6. Testimonial card */ html body .testimonial-card { background: #ffffff !important; border: 1px solid #e8ecf2 !important; border-radius: 20px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important; padding: 32px !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } html body .swiper-slide.swiper-slide-active .testimonial-card { border: 2px solid #e63946 !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; } /* Allow swiper click to work properly without css transition interfering with swiper wrapper */ /* ============================================================ [2026-09-11 v4] Testimonial Swiper - ????????占썩닪?????????????占썩닪??占쎈꺌???????占썩닪??????????占썩닪占??????占썩닪???占쎈챶???? ============================================================ */ /* ???????????(?????占썩닪???????占썬꺂?????????占썩닪?????) */ .testimonial-section { overflow: hidden; } /* Swiper ??????占썩닪占??????? overflow visible ???????占썩닪????????占썩닪??占쎈꺌??????汝뷴젆??占쎄떽???饔낅떽???????????占썩닪???*/ .testimonialSwiper { overflow: visible !important; padding: 24px 0 56px !important; } /* Wrapper transition */ .testimonialSwiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; align-items: center; } /* ============================================================ [2026-09-11 v5] Testimonial Section - Clean Flat Background & 100% Opacity Cards - ????占썩닪??????占썩닪??占쎌땡??????占썩닪????占쏀렠??????諛몃마????????占썩닪?管占???????占썩닪???????占썩닪?管占??/ Conic ????占썩닪?瓘占????????占썩닪??????????占쎈슦???????????諛몃마?? - ???占썬꺂??占쏙옙???????占썩닪?????????占썩닪??????????占썩닪?瓘占????????占썩닪??????????占썩닪?瓘占???????????占썩뵛???????占쎈슦?????? - ????????占썩닪?????轅붽틓??????饔낅떽????占쎄낄?占썽뇡???????占썩닪??占쎈꺌??????占썩닪占????占쎈㎍?100% ?????占썩닪????占쎈뭶???????占썩닪占?????????????占썩닪?管占?????占쎌쾸?占????占썩닪占????????占썩닪??????占쏀룙 ????占썩닪??占쎈꺌??????占썩닪占?????????占썩닪??? ============================================================ */ /* ????占썩닪??????占썩닪??占쎌땡???????占썩닪????占쏀렠??????諛몃마????????占썩닪?管占?????????????????熬곻퐢占??? ????占쎌€ル럯?????????? ????占썩닪?瓘占????????占썩닪???????汝뷴젆??????????占썩뵛???????占쎈슦??????*/ #testimonials, #testimonials.testimonial-section, .testimonial-section { background: #f8fafc !important; /* ????占쎌쾸?占????占썩닪占???????占썩닪占??????????饔앷옇????????占썩닪??????占썩닪??占쎌땡?*/ position: relative !important; overflow: hidden !important; } #testimonials::before, #testimonials::after, .testimonial-section::before, .testimonial-section::after { display: none !important; content: none !important; background: none !important; } /* Swiper ??????占썩닪占???????*/ .testimonialSwiper { overflow: visible !important; padding: 24px 0 56px !important; } .testimonialSwiper .swiper-wrapper { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; align-items: center; } /* ?饔낅떽????占쎄낄?占썽뇡???????????????占썩닪??占쎈꺌??? 100% ?????諛몃마?????????????占쎈뜤?? ?????占쏀뱼占???????諛몃마嶺뚮Ŋ占????????占쎈뜤??100% ?????占썩닪????占쎈뭶???????占썩닪??占쎈탶????????占썩닪占??*/ html body #testimonials .testimonialSwiper .swiper-slide, .testimonialSwiper .swiper-slide { opacity: 1 !important; transform: scale(1) !important; cursor: pointer; flex-shrink: 0; height: auto !important; transition: transform 0.3s ease !important; } /* ?饔낅떽????占쎄낄?占썽뇡???????占썩닪??占쎈꺌???????占썩닪??????????占썩닪?????(????????占썩닪????????占썩닪?瓘占??占쏀돫??: ?????占썩닪????占쎈뭶???????????????????繹먮굟?????占썬꺂??占쏙옙????占쏙옙??????占썩닪?瓘占?????*/ html body #testimonials .testimonial-card, html body #testimonials .swiper-slide .testimonial-card, html body #testimonials .swiper-slide-active .testimonial-card, .testimonial-card, .swiper-slide-active .testimonial-card { background: #ffffff !important; border: 1.5px solid #cbd5e1 !important; border-radius: 20px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06) !important; opacity: 1 !important; transform: none !important; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important; } /* ????占썩닪??????????諛몃마??占쎈쳳?????????諛몃마?占????????(????????占썩닪??? */ html body #testimonials .testimonial-avatar, html body #testimonials .swiper-slide-active .testimonial-avatar, .testimonial-avatar, .swiper-slide-active .testimonial-avatar { background: #ffe5e5 !important; color: #e63946 !important; border: 1px solid #fca5a5 !important; transition: all 0.3s ease !important; } /* ??????占썩닪????饔낅떽?????????轅붽틓?????Hover) ???????占썩닪占????占쎈㎍??????占썩닪????占쎈뭶?????????占썩닪??????????????占썩닪?管占??*/ height: 8px !important; background: #cbd5e1 !important; opacity: 1 !important; border-radius: 4px !important; box-shadow: none !important; transition: width 0.38s cubic-bezier(0.4,0,0.2,1), background 0.35s ease !important; margin: 0 4px !important; } .testimonial-pagination .swiper-pagination-bullet-active { width: 32px !important; background: #e63946 !important; border-radius: 4px !important; box-shadow: none !important; } /* ?饔낅떽????占쎄낄?占썽뇡????*/ @media (max-width: 768px) { .testimonialSwiper .swiper-slide { width: 80vw !important; max-width: 280px !important; opacity: 1 !important; transform: scale(1) !important; } } /* CUSTOMER STORIES Pill Badge - Match "INTEGRATED CLOUD PLATFORM" image style */ html body #testimonials .clean-pill-badge, html body .clean-pill-badge { background: #fff0f2 !important; color: #e63946 !important; border: 1.5px solid #fca5a5 !important; border-radius: 50px !important; padding: 7px 22px !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; display: inline-block !important; box-shadow: none !important; } /* ============================================================ [PREMIUM DESIGN OVERHAUL] Ecosystem Cards (UDR Smart Store Solution) ============================================================ */ /* 1. Card Container: Remove ugly gray bottom bar split, seamless white card */ html body #ecosystem .eco-card, seamless white card */ html body #ecosystem-2 .eco-card, html body .ecosystem-grid-new .eco-card, html body .eco-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 24px !important; padding: 36px 28px 32px 28px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; justify-content: space-between !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; min-height: 340px !important; } /* Card Hover Elevation & Crisp Red Border Accent */ html body #ecosystem .eco-card:hover, /* Card Hover Elevation & Crisp Red Border Accent */ html body #ecosystem-2 .eco-card:hover, html body .ecosystem-grid-new .eco-card:hover, html body .eco-card:hover { transform: translateY(-8px) !important; border-color: #e63946 !important; box-shadow: 0 16px 40px rgba(230, 57, 70, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05) !important; } /* 2. Top Label (Pill Badge): Refined light pink style (No heavy red fill overload on hover) */ html body .eco-card .eco-label, html body .eco-card:hover .eco-label { background: #fff0f2 !important; color: #e63946 !important; border: 1px solid #fca5a5 !important; border-radius: 50px !important; padding: 5px 16px !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; margin-bottom: 20px !important; display: inline-block !important; transition: all 0.3s ease !important; } /* 3. Icon Container: Clean Floating Minimalist SVG Icon (No duplicate box clutter) */ html body .eco-card .eco-icon, html body .eco-icon { width: auto !important; height: auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 4px auto 16px auto !important; transition: all 0.35s ease !important; box-shadow: none !important; } html body .eco-card .eco-icon svg, html body .eco-icon svg { width: 50px !important; height: 50px !important; color: #e63946 !important; stroke: #e63946 !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease !important; } /* Icon Hover State: Smooth Scale & Rise Animation */ html body .eco-card:hover .eco-icon, .eco-card:hover .eco-icon { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } @media (max-width: 768px) { html body .hero-text-block, html body .hero-text-block.hero-align-right, html body .hero-text-block.hero-align-center { width: 90% !important; max-width: 90% !important; padding: 24px 16px !important; } html body .hero-headline { font-size: 1.8rem !important; word-break: keep-all !important; } html body .hero-subline { font-size: 0.85rem !important; word-break: keep-all !important; } html body .hero-eyebrow { font-size: 0.7rem !important; padding: 5px 12px !important; margin-bottom: 12px !important; } } html body .eco-card:hover .eco-icon svg, .eco-card:hover .eco-icon svg { color: #e63946 !important; stroke: #e63946 !important; transform: scale(1.12) translateY(-3px) !important; } /* 4. Title & Subtitle Typography */ html body .eco-card .eco-title { color: #0f172a !important; font-size: 1.35rem !important; font-weight: 800 !important; margin-bottom: 10px !important; letter-spacing: -0.02em !important; } html body .eco-card .eco-desc { color: #64748b !important; font-size: 0.92rem !important; line-height: 1.6 !important; margin-bottom: 24px !important; } /* 5. CTA Link Button: Integrated inline link with animated arrow, NO gray bottom bar! */ html body .eco-card .eco-btn { background: transparent !important; border: none !important; border-top: none !important; padding: 0 !important; color: #e63946 !important; font-size: 0.85rem !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: auto !important; transition: all 0.3s ease !important; } html body .eco-card:hover .eco-btn { background: transparent !important; color: #e63946 !important; transform: translateX(4px) !important; } html body .eco-card .eco-btn i { transition: transform 0.3s ease !important; } html body .eco-card:hover .eco-btn i { transform: translateX(4px) !important; } /* ============================================================ [DOT NAVIGATOR TOOLTIP FIX] Remove tacky red text on dark background ============================================================ */ /* 1. Dark Mode / Default Section Tooltip (Clean Dark Glass + Crisp White Text) */ html body #dotNavigator .dot-nav-label, html body .dot-navigator .dot-nav-label, html body #dotNavigator.on-dark .dot-nav-label, html body .dot-navigator:not(.on-light) .dot-nav-label { background: rgba(15, 23, 42, 0.95) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 8px !important; } html body #dotNavigator .dot-nav-item.active .dot-nav-label, html body #dotNavigator.on-dark .dot-nav-item.active .dot-nav-label, html body .dot-navigator:not(.on-light) .dot-nav-item.active .dot-nav-label, html body .dot-nav-item:hover .dot-nav-label { color: #ffffff !important; font-weight: 700 !important; border-color: rgba(255, 255, 255, 0.35) !important; } /* 2. Light Mode Section Tooltip (Clean White Card + Crisp Charcoal Text) */ html body #dotNavigator.on-light .dot-nav-label, html body .dot-navigator.on-light .dot-nav-label { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 8px !important; } html body #dotNavigator.on-light .dot-nav-item.active .dot-nav-label, html body #dotNavigator.on-light .dot-nav-item:hover .dot-nav-label { color: #0f172a !important; font-weight: 700 !important; border-color: #94a3b8 !important; } /* Refined Minimalist Text Shadow System for Bright Media Backdrops */ .hero-headline { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22) !important; } .hero-subline { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important; } .hero-eyebrow { text-shadow: none !important; } .g-thin-text, .g-bold-text { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2) !important; } .g-outline-text { text-shadow: none !important; } .cinematic-title { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25) !important; } .cinematic-desc { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important; } /* ========================================================================== Zero-Scroll Full-View Optimization: #quick-contact & Footer Compact Fit ========================================================================== */ html body #quick-contact.quick-contact-banner { padding: 18vh 0 4vh !important; min-height: calc(100dvh - 310px) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } html body #quick-contact .qcb-inner { gap: 30px !important; margin-top: 40px !important; } html body #quick-contact .qcb-text-group { margin-bottom: 0 !important; } html body #quick-contact .qcb-title { font-size: clamp(2rem, 3.5vw, 2.8rem) !important; margin: 0 0 12px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } html body #quick-contact .qcb-subtitle { font-size: 1.05rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.7) !important; margin: 0 0 10px !important; } html body #quick-contact .qcb-container { gap: 24px !important; margin: 10px 0 !important; } html body #quick-contact .qcb-item.qcb-card { padding: 20px 16px !important; border-radius: 16px !important; } html body #quick-contact .qcb-icon { width: 40px !important; height: 40px !important; margin-bottom: 8px !important; } html body #quick-contact .qcb-icon svg { width: 24px !important; height: 24px !important; } html body #quick-contact .qcb-item span { font-size: 1.05rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; } html body #quick-contact .qcb-main-cta { padding: 16px 48px !important; font-size: 1rem !important; margin-top: 10px !important; border-radius: 50px !important; } html body .simple-footer { padding: 35px 0 40px !important; margin-top: 0 !important; background: #020205 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } html body .simple-footer-container { gap: 24px !important; } html body .simple-footer-logo { font-size: 1.35rem !important; margin-bottom: 15px !important; letter-spacing: 0.05em !important; font-weight: 700 !important; color: #ffffff !important; } html body .simple-footer-info { font-size: 0.88rem !important; line-height: 1.7 !important; margin-bottom: 10px !important; color: rgba(255, 255, 255, 0.6) !important; letter-spacing: 0.01em !important; } html body .simple-footer-contact { font-size: 0.85rem !important; margin-top: 10px !important; color: rgba(255, 255, 255, 0.7) !important; } html body .simple-footer-contact strong { font-size: 1.35rem !important; margin-right: 12px !important; color: #e63946 !important; } html body .simple-footer-links { gap: 24px !important; } html body .simple-footer-links a { font-size: 0.88rem !important; color: rgba(255, 255, 255, 0.7) !important; letter-spacing: 0.02em !important; } html body .custom-family-dropdown { font-size: 0.85rem !important; min-width: 180px !important; } html body .custom-family-selected { padding: 8px 32px 8px 16px !important; } html body .simple-footer-bottom { margin-top: 10px !important; padding-top: 10px !important; font-size: 0.8rem !important; color: rgba(255, 255, 255, 0.4) !important; } html body .core-grid-new .core-desc, html body .core-desc { line-height: 1.6 !important; word-break: keep-all !important; display: block !important; } html body .core-grid-new .core-btn, html body .core-btn { background: transparent !important; border-top: none !important; color: #e63946 !important; } html body .core-grid-new .core-card:hover .core-btn, html body .core-card:hover .core-btn, html body .core-grid-new .core-card:active .core-btn { background: transparent !important; color: #ff3b30 !important; border-top-color: transparent !important; border-color: transparent !important; } /* === V2 HOTFIX FOR CORE GRID DESC & BTN === */ html body .core-grid-new .core-desc, html body .core-desc { line-height: 1.8 !important; word-break: keep-all !important; display: block !important; margin-top: 12px !important; margin-bottom: 25px !important; padding: 0 10px !important; } html body .core-grid-new .core-btn, html body .core-btn { display: inline-flex !important; background: transparent !important; border: 1px solid #e63946 !important; border-top: 1px solid #e63946 !important; color: #e63946 !important; border-radius: 25px !important; padding: 8px 30px !important; margin: 0 auto 20px auto !important; width: auto !important; font-weight: 600 !important; transition: all 0.3s ease !important; } html body .core-grid-new .core-card:hover .core-btn, html body .core-card:hover .core-btn, html body .core-grid-new .core-card:active .core-btn { background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important; border-top-color: #e63946 !important; } /* === V3 HOTFIX FOR TITLE SPACING === */ html body .core-grid-new .core-title, html body .core-title { margin-top: 15px !important; margin-bottom: 5px !important; } /* ========================================================================== AI FIX: MOBILE & IPAD RESPONSIVENESS (HERO ALIGNMENT & NAVIGATION OVERLAP) ========================================================================== */ @media (max-width: 1024px) { /* Hide the side dot navigator on smaller screens to prevent overlap */ html body #dotNavigator, html body .dot-navigator { display: none !important; } /* Push the stats bar up to prevent overlap with the fixed bottom floating menu */ html body .hero-stats-bar { bottom: 85px !important; } /* FIX SQUISHED STATS: Overwrite the global !important padding for smaller screens */ html body .hero-stats-inner { padding: 20px 10px !important; } html body .hero-stat-item { padding: 0 4px !important; } /* Center align the hero text to look good on tablets and mobile */ html body .slide-content { justify-content: flex-end !important; align-items: center !important; padding-bottom: 320px !important; } html body .hero-text-block, html body .hero-text-block.hero-align-right, html body .hero-text-block.hero-align-center { text-align: center !important; align-items: center !important; display: flex !important; flex-direction: column !important; width: 78% !important; max-width: 78% !important; margin: 0 auto !important; background: rgba(15, 20, 28, 0.6) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; padding: 40px 20px !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Increase font sizes on tablet to properly fill the wider transparent box */ html body .hero-headline { font-size: 3.8rem !important; } html body .hero-subline { font-size: 1.2rem !important; } html body .hero-eyebrow { font-size: 0.85rem !important; padding: 8px 16px !important; } html body .slide-cta-btn { font-size: 1rem !important; padding: 15px 28px !important; } html body .slide-cta-group { justify-content: center !important; } /* Position the square dots safely above the stats bar */ html body .custom-pagination { bottom: 210px !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; flex-direction: row !important; } } @media (max-width: 767px) { html body .hero-ticker-wrap { display: none !important; } html body .hero-text-block, html body .hero-text-block.hero-align-right, html body .hero-text-block.hero-align-center { width: 92% !important; max-width: 92% !important; padding: 24px 16px !important; } html body .hero-headline { font-size: 1.8rem !important; word-break: keep-all !important; } html body .hero-subline { font-size: 0.85rem !important; word-break: keep-all !important; } html body .slide-cta-group { flex-wrap: nowrap !important; gap: 8px !important; } html body .slide-cta-btn { padding: 13px 20px !important; font-size: 0.9rem !important; white-space: nowrap !important; flex: 1 !important; justify-content: center !important; } html body .hero-stats-bar { bottom: 85px !important; } /* On mobile, slightly higher padding to clear stats bar */ html body .slide-content { padding-bottom: 250px !important; } html body .custom-pagination { bottom: 260px !important; } html body .hero-stats-inner { padding: 15px 5px !important; } html body .hero-stat-item { padding: 0 2px !important; } html body .hero-stat-num { font-size: 1.4rem !important; } html body .hero-stat-unit { font-size: 0.8rem !important; } html body .hero-stat-label { font-size: 0.55rem !important; white-space: nowrap; } } /* ===================================================================== [PERFECT MOBILE & TABLET RESPONSIVE & TYPOGRAPHY OVERHAUL] ??醫딆쓧?????占썩닪???& ?占썬꺂??袁ㅻ븶????????占썩닪?管??????占썩닪??????占썩닪?????????? ????占썩닪???????占썩닪???? ===================================================================== */ /* 1. ???占쎄퐫??占??占??占쏙옙??????????????占썩닪??????醫딆쓧?????占썩닪?????醫딆┫???& ?占썬꺂??袁ㅻ븶????????占썩닪?管??Sticky CTA Bar ????占썩닪???*/ body, button, input, select, textarea { font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Noto Sans KR", "Inter", sans-serif !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; text-rendering: optimizeLegibility !important; } /* ?占썬꺂??袁ㅻ븶????& ????占썩닪?管??1024px ?????? ????占썩닪??????醫딆쓧???占쎈갭큔筌띲렗占?????占썩닪???Sticky CTA ??????占썩닪占?? (????占썩닪???& ??????????????????占썩닪??????占썩닪???????占썩닪??? */ @media screen and (max-width: 1024px) { #sticky-cta-bar { display: none !important; } } /* 2. ?占썬꺂??袁ㅻ븶????????占썩닪???(max-width: 767px): 嚥싳쉶占??占쎄틡??????占썩닪???& [????占썩닪???A] ?占썬꺂??袁ㅻ븶??????????????占썩닪????????占썩닪????2x2 ????占썩닪???*/ @media screen and (max-width: 767px) { html body .premium-tech-section { height: 100dvh !important; min-height: 100dvh !important; padding: 65px 14px 45px 14px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; box-sizing: border-box !important; } html body .premium-tech-container { height: auto !important; width: 100% !important; padding: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } /* ????占썩닪???????占썩닪?????????占썩닪占?? ????占썩닪?瓘占?& ????占썩닪???*/ html body .premium-tech-header { margin-bottom: 16px !important; margin-top: 0 !important; text-align: center !important; } html body .premium-tech-header .red-motto-badge { font-size: 0.65rem !important; padding: 4px 11px !important; margin-bottom: 8px !important; display: inline-block !important; border-radius: 20px !important; letter-spacing: 0.05em !important; } html body .premium-tech-title { font-size: 1.4rem !important; line-height: 1.45 !important; letter-spacing: -0.03em !important; word-break: keep-all !important; margin-bottom: 8px !important; } html body .premium-tech-desc { font-size: 0.78rem !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.75) !important; word-break: keep-all !important; margin-bottom: 0 !important; } html body .core-grid-new { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(2, auto) !important; gap: 12px !important; margin-top: 14px !important; height: auto !important; width: 100% !important; padding: 0 5vw !important; box-sizing: border-box !important; } /* ?占썬꺂??袁ㅻ븶??????占쎈㈇????*/ html body .core-grid-new .core-card { padding: 14px 10px 10px 10px !important; height: 145px !important; min-height: 135px !important; max-height: 155px !important; background: rgba(22, 22, 28, 0.95) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; text-align: center !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important; box-sizing: border-box !important; overflow: hidden !important; } /* [????占썩닪???A] ?熬곣뫖占????: ????占썩닪?????????占?(border-radius: 20px) */ html body .core-grid-new .core-label { font-size: 0.64rem !important; font-weight: 700 !important; padding: 3px 10px !important; margin-bottom: 4px !important; background: rgba(255, 59, 48, 0.12) !important; color: #ff5252 !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; border-radius: 20px !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; } html body .core-grid-new .core-title { font-size: 0.98rem !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.35 !important; margin: auto 0 !important; padding-bottom: 0 !important; word-break: keep-all !important; letter-spacing: -0.02em !important; } html body .core-grid-new .core-desc { display: none !important; } /* [????占썩닪???A] ?占썬꺂??袁ㅻ븶????????占썩닪??????占썩닪???占???占????? ???????????占썩닪?????占?????(border-radius: 10px) */ html body .core-grid-new .core-btn { width: 100% !important; align-self: center !important; background: rgba(255, 59, 48, 0.18) !important; color: #ffffff !important; border: 1px solid rgba(255, 59, 48, 0.45) !important; border-radius: 10px !important; padding: 7px 0 !important; font-size: 0.78rem !important; font-weight: 700 !important; margin-top: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: all 0.2s ease !important; } html body .ecosystem-grid-new { grid-template-columns: 1fr !important; gap: 14px !important; } } /* 3. ????占썩닪?管??/ ????占썩닪??????????占썩닪???(768px ~ 1024px): 嚥싳쉶占??占쎄틡??????占썩닪???& [????占썩닪???A] ????占썩닪???????占썩닪????*/ @media screen and (min-width: 768px) and (max-width: 1024px) { html body .premium-tech-section { height: auto !important; min-height: 100dvh !important; padding: 80px 32px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } html body .premium-tech-container { height: auto !important; max-width: 900px !important; margin: 0 auto !important; padding: 0 !important; } html body .premium-tech-header { margin-bottom: 28px !important; text-align: center !important; } html body .premium-tech-title { font-size: 2.1rem !important; line-height: 1.35 !important; letter-spacing: -0.03em !important; word-break: keep-all !important; } html body .premium-tech-desc { font-size: 1.05rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.8) !important; word-break: keep-all !important; } /* 태블릿/모바일 2x2 배치 */ html body .core-grid-new { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; max-height: none !important; } html body .core-grid-new .core-card { padding: 24px 20px 20px 20px !important; min-height: 200px !important; height: 100% !important; background: rgba(20, 20, 26, 0.9) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; text-align: center !important; transition: transform 0.3s ease, border-color 0.3s ease !important; } html body .core-grid-new .core-card:hover { border-color: rgba(255, 59, 48, 0.6) !important; transform: translateY(-4px) !important; } /* [????占썩닪???A] ????占썩닪?管???熬곣뫖占????: ????占썩닪?????????占썩닪???????占썩닪占????*/ html body .core-grid-new .core-label { font-size: 0.78rem !important; font-weight: 700 !important; padding: 5px 14px !important; margin-bottom: 10px !important; background: rgba(255, 59, 48, 0.12) !important; color: #ff5252 !important; border: 1px solid rgba(255, 59, 48, 0.3) !important; border-radius: 20px !important; } html body .core-grid-new .core-title { font-size: 1.25rem !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.4 !important; margin: 0 0 10px 0 !important; padding-bottom: 0 !important; word-break: keep-all !important; letter-spacing: -0.02em !important; } html body .core-grid-new .core-desc { display: block !important; font-size: 0.88rem !important; line-height: 1.55 !important; color: rgba(255, 255, 255, 0.75) !important; word-break: keep-all !important; letter-spacing: -0.01em !important; margin-bottom: 16px !important; } html body .core-grid-new .core-desc br { display: inline !important; content: " " !important; } /* [????占썩닪???A] ????占썩닪?管??????占썩닪??????占썩닪???占???占????? ???????????占썩닪?????占?????(border-radius: 12px) */ html body .core-grid-new .core-btn { margin-top: auto !important; width: 100% !important; background: rgba(255, 59, 48, 0.18) !important; color: #ffffff !important; border: 1px solid rgba(255, 59, 48, 0.5) !important; border-radius: 12px !important; padding: 10px 0 !important; font-size: 0.88rem !important; font-weight: 700 !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: all 0.3s ease !important; } html body .core-grid-new .core-card:hover .core-btn { background: linear-gradient(135deg, #ff3b30 0%, #e63946 100%) !important; color: #ffffff !important; border-color: #ff3b30 !important; } } /* ===================================================================== [Ecosystem Cards] Keep 100% Width & Reduce Vertical Height (??醫딆쓧???100% ????占썩닪占??, ????占썩닪?菅占?????占썩닪??????占쎈쿋占?? ===================================================================== */ html body .ecosystem-grid-new .eco-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding-top: 20px !important; padding-bottom: 0 !important; height: auto !important; max-height: none !important; } html body .ecosystem-grid-new .eco-card .eco-label { margin-top: 0 !important; padding: 5px 16px !important; font-size: 12px !important; } html body .ecosystem-grid-new .eco-card .eco-icon { margin: 16px 0 12px !important; } html body .ecosystem-grid-new .eco-card .eco-icon svg { width: 44px !important; height: 44px !important; } html body .ecosystem-grid-new .eco-card .eco-title { font-size: 20px !important; margin-bottom: 6px !important; } html body .ecosystem-grid-new .eco-card .eco-desc { font-size: 14px !important; margin-bottom: 20px !important; line-height: 1.4 !important; } /* Unified Solid Red Button Rules (No Blur, No Gradient) */ html body #ecosystem .ecosystem-grid-new .eco-card .eco-btn, No Gradient) */ html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-btn, html body #ecosystem .eco-card .eco-btn, html body #ecosystem-2 .eco-card .eco-btn, html body .eco-card .eco-btn { background: #e63946 !important; background-image: none !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; transition: background-color 0.2s ease !important; } html body #ecosystem .ecosystem-grid-new .eco-card:hover .eco-btn, html body #ecosystem-2 .ecosystem-grid-new .eco-card:hover .eco-btn, html body #ecosystem .eco-card:hover .eco-btn, html body #ecosystem-2 .eco-card:hover .eco-btn, html body .eco-card:hover .eco-btn { background: #d62828 !important; background-image: none !important; color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } /* ===================================================================== [GLOBAL OVERRIDES] 1. Remove Backdrop Blur Globally 2. Mobile Cut-Off Fix (Padding Top for Section Titles) 3. Center Content Vertically & Horizontally 4. Move Swiper Carousel Pagination Dots Above Bottom Bar ===================================================================== */ /* 1. Global Blur Removal */ *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ===================================================================== [FINAL ABSOLUTE PRIORITY OVERRIDES - MOBILE & TABLET] ===================================================================== */ /* 1. TESTIMONIAL CONTAINER OVERFLOW SAFETY */ html body #testimonials, html body .testimonial-section { overflow: hidden !important; } html body #testimonials .testimonialSwiper, html body .testimonialSwiper { overflow: visible !important; } /* 2. TABLET & MOBILE OVERRIDES (max-width: 1024px) */ @media screen and (max-width: 1024px) { html body #testimonials, html body .testimonial-section { min-height: 100dvh !important; height: 100dvh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 40px 24px 80px 24px !important; box-sizing: border-box !important; overflow: hidden !important; } html body #testimonials .testimonial-container, html body .testimonial-container { width: 100% !important; max-width: 960px !important; margin: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; padding: 0 !important; overflow: hidden !important; } html body #testimonials .testimonial-header, html body .testimonial-header { margin-top: 36px !important; margin-bottom: 24px !important; text-align: center !important; width: 100% !important; } html body #testimonials .testimonialSwiper, html body .testimonialSwiper { width: 100% !important; overflow: visible !important; padding: 15px 10px 40px 10px !important; margin: 0 auto !important; } html body .core-grid-new .core-card, html body .ecosystem-grid-new .eco-card, html body .testimonial-card { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; margin: 0 auto !important; } } /* ===================================================================== [GLOBAL & RESPONSIVE - NO BLUR, RAISE VIEW BUTTONS, BOX CENTER ALIGN] ===================================================================== */ /* 1. ??????占썩닪?管??????占썩닪???????占썩닪??????占썩닪??? ??占쎈㈇?????熬곣뫖利당뵓?????????臾먲옙??????????占썬꺂??節뉖き??100% ????占썩닪????????占썩닪占??*/ *, *::before, *::after, html body .core-card, html body .eco-card, html body .testimonial-card, html body .core-btn, html body .eco-btn, html body .c-tab-btn, html body .btn-outline-red, html body .btn-dark-pill, html body .slide-cta-btn, html body .testimonial-pagination, html body .swiper-pagination-bullet { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; -webkit-filter: none !important; } /* 2. ??占쎈㈇?????熬곣뫖利당뵓??????占썩닪?管占??????占썩닪??占쎈춴??熬곣뫖占???占썬걤???占쎈슢????*/ html body .core-card { background: #16161c !important; } html body .eco-card { background: #ffffff !important; } html body .testimonial-card { background: #ffffff !important; } /* 3. ?????臾먲옙???????占썩닪??????占쎈슢?????/ VIEW ??/ ?熬곣뫖占??濚욌꼬?占쎌럶占???/ ????占썩닪????占쎌탳??????占썩닪???? ????占썩닪?菅占?????占썩닪????占쎈쳳????100% ????占썩닪?????占쎈슢????*/ html body .core-btn, html body .eco-btn, html body .btn-dark-pill, html body .core-card .core-btn, html body .eco-card .eco-btn { margin-top: auto !important; margin-bottom: 8px !important; position: relative !important; z-index: 50 !important; visibility: visible !important; opacity: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #e63946 !important; color: #ffffff !important; font-weight: 700 !important; padding: 6px 20px !important; border-radius: 8px !important; font-size: 0.85rem !important; text-decoration: none !important; width: max-content !important; } /* ?占썬꺂??袁ㅻ븶????????占썩닪???????占썩닪?菅占????占썩닪???????占썩닪?菅占?????占썩닪???????占썩닪????占쎌탳??????占썩닪??????????????占썩닪??????占썩닪???*/ @media screen and (max-width: 767px) { html body .core-grid-new .core-card, html body .ecosystem-grid-new .eco-card { height: auto !important; min-height: 170px !important; max-height: none !important; padding-bottom: 16px !important; } } /* 4. ??占쎈㈇?????熬곣뫖利당뵓?????????????????占썩닪???嚥싳쉶占??占쎄틡??????占썩닪???*/ html body .core-grid-new, html body .ecosystem-grid-new { justify-content: stretch !important; align-items: stretch !important; margin-left: auto !important; margin-right: auto !important; } html body .core-card, html body .eco-card, html body .testimonial-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding-bottom: 32px !important; } /* 4. ????占썩닪???????占썬꺂??袁ㅻ븶????????占썩닪??? ????占썩닪?????嶺뚮쪇????熬곣뫖利당뵓?????占쎈쑏??? 嚥싳쉶占??占쎄틡???????? ????占썩닪???& ????占??????占썩닪占???熬곣뫖占???*/ @media screen and (min-width: 768px) and (max-width: 1024px) { #installation .sf-right-panel, html body #installation .sf-right-panel { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin: 220px auto 30px auto !important; text-align: center !important; } #installation .sf-stats-grid, html body #installation .sf-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 640px !important; margin: 0 auto !important; justify-content: center !important; } /* ??嶺뚮쪇????熬곣뫖利당뵓??(???占쎈쑏??? - 嚥싳쉶占??占쎄틡???????? 2?占?????????占썩닪???占쎈Ŋ????熬곣뫖占???*/ #installation .sf-stat-block:nth-child(1), html body #installation .sf-stat-block:nth-child(1) { order: 2 !important; border-color: rgba(230, 57, 70, 0.45) !important; box-shadow: 0 0 16px rgba(230, 57, 70, 0.25) !important; } /* ????占썩닪????占썬꺂?????(????占썩닪???1?占????? */ #installation .sf-stat-block:nth-child(2), html body #installation .sf-stat-block:nth-child(2) { order: 1 !important; } /* ?????占썩닪占???占썬꺂?????(????占썩닪?????占쎈㎍?3?占????? */ #installation .sf-stat-block:nth-child(3), html body #installation .sf-stat-block:nth-child(3) { order: 3 !important; } } /* ?占썬꺂??袁ㅻ븶????????占썩닪??????占썩닪???????????熬곣뫖占?????占쎈슢????*/ @media screen and (max-width: 767px) { #installation .sf-right-panel, html body #installation .sf-right-panel { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; margin-top: -85px !important; margin-bottom: 12px !important; } #installation .sf-stats-grid, html body #installation .sf-stats-grid { margin: 0 auto !important; justify-content: center !important; } #installation .sf-stat-block:nth-child(1), html body #installation .sf-stat-block:nth-child(1) { order: 2 !important; border-color: rgba(230, 57, 70, 0.45) !important; box-shadow: 0 0 16px rgba(230, 57, 70, 0.25), inset 0 1px 0 rgba(230, 57, 70, 0.2) !important; } #installation .sf-stat-block:nth-child(2), html body #installation .sf-stat-block:nth-child(2) { order: 1 !important; } #installation .sf-stat-block:nth-child(3), html body #installation .sf-stat-block:nth-child(3) { order: 3 !important; } } /* Ecosystem Header Spacing & Line Height */ #ecosystem .ecosystem-header , /* Ecosystem Header Spacing & Line Height */ #ecosystem-2 .ecosystem-header { margin-bottom: 34px !important; text-align: center !important; } #ecosystem .ecosystem-badge , #ecosystem-2 .ecosystem-badge { display: inline-block !important; margin: 0 auto 14px auto !important; padding: 6px 16px !important; font-size: 12px !important; letter-spacing: 1px !important; line-height: 1.4 !important; } #ecosystem .ecosystem-header h2 , #ecosystem-2 .ecosystem-header h2 { font-size: 32px !important; font-weight: 800 !important; line-height: 1.45 !important; margin: 0 0 16px 0 !important; letter-spacing: -0.02em !important; } #ecosystem .ecosystem-header .one-line-sub , #ecosystem-2 .ecosystem-header .one-line-sub { font-size: 16px !important; line-height: 1.7 !important; margin: 0 0 10px 0 !important; color: #64748b !important; word-break: keep-all !important; } /* Ecosystem Card Box Height & Generous Readability */ #ecosystem .ecosystem-grid-new .eco-card , /* Ecosystem Card Box Height & Generous Readability */ #ecosystem-2 .ecosystem-grid-new .eco-card { padding: 24px 20px 24px 20px !important; min-height: 300px !important; height: auto !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } #ecosystem .ecosystem-grid-new .eco-card .eco-btn , #ecosystem-2 .ecosystem-grid-new .eco-card .eco-btn { background: #e63946 !important; background-image: none !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 700 !important; padding: 12px 0 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; transition: background-color 0.2s ease !important; } #ecosystem .ecosystem-grid-new .eco-card:hover .eco-btn , #ecosystem-2 .ecosystem-grid-new .eco-card:hover .eco-btn { background: #d62828 !important; background-image: none !important; color: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } @media screen and (max-width: 767px) { html body .core-grid-new .core-btn, html body .core-card .core-btn { padding: 4px 20px !important; min-height: 26px !important; height: 26px !important; font-size: 0.7rem !important; line-height: 1 !important; } #ecosystem .ecosystem-header , #ecosystem-2 .ecosystem-header { margin-bottom: 22px !important; } #ecosystem .ecosystem-badge , #ecosystem-2 .ecosystem-badge { margin-bottom: 10px !important; font-size: 0.68rem !important; padding: 4px 10px !important; line-height: 1.3 !important; } #ecosystem .ecosystem-header h2 , #ecosystem-2 .ecosystem-header h2 { font-size: 1.35rem !important; line-height: 1.4 !important; margin: 0 0 12px 0 !important; } #ecosystem .ecosystem-header .one-line-sub , #ecosystem-2 .ecosystem-header .one-line-sub { font-size: 0.84rem !important; line-height: 1.65 !important; margin-bottom: 0 !important; } #ecosystem .ecosystem-grid-new .eco-card , #ecosystem-2 .ecosystem-grid-new .eco-card { width: 92% !important; max-width: 320px !important; margin: 0 auto !important; height: auto !important; min-height: 135px !important; max-height: none !important; padding: 14px 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; } #ecosystem .ecosystem-grid-new .eco-label , #ecosystem-2 .ecosystem-grid-new .eco-label { font-size: 0.65rem !important; padding: 3px 10px !important; margin: 0 0 4px 0 !important; line-height: 1.4 !important; letter-spacing: 0.5px !important; } #ecosystem .ecosystem-grid-new .eco-icon , #ecosystem-2 .ecosystem-grid-new .eco-icon { margin: 2px 0 4px 0 !important; height: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; } #ecosystem .ecosystem-grid-new .eco-icon svg , #ecosystem-2 .ecosystem-grid-new .eco-icon svg { width: 22px !important; height: 22px !important; } #ecosystem .ecosystem-grid-new .eco-title , #ecosystem-2 .ecosystem-grid-new .eco-title { font-size: 0.85rem !important; font-weight: 800 !important; line-height: 1.4 !important; margin: 0 0 6px 0 !important; color: #0f172a !important; } #ecosystem .ecosystem-grid-new .eco-desc , #ecosystem-2 .ecosystem-grid-new .eco-desc { display: none !important; } #ecosystem .ecosystem-grid-new .eco-card .eco-btn , #ecosystem-2 .ecosystem-grid-new .eco-card .eco-btn { height: auto !important; font-size: 0.8rem !important; line-height: 1 !important; margin: 8px auto 0 auto !important; width: max-content !important; padding: 10px 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; background: #e63946 !important; background-image: none !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; font-weight: 700 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } } /* Pad View (768px - 1024px) Button Bottom Margin & 3-Line Text Balance */ @media screen and (min-width: 768px) and (max-width: 1024px) { #ecosystem .ecosystem-grid-new , #ecosystem-2 .ecosystem-grid-new { gap: 14px !important; padding: 0 3vw !important; } #ecosystem .ecosystem-grid-new .eco-card , #ecosystem-2 .ecosystem-grid-new .eco-card { padding: 20px 12px 16px 12px !important; min-height: 310px !important; height: auto !important; max-height: none !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } #ecosystem .ecosystem-grid-new .eco-desc , #ecosystem-2 .ecosystem-grid-new .eco-desc { font-size: 12px !important; line-height: 1.5 !important; margin-bottom: 8px !important; word-break: keep-all !important; min-height: 54px !important; } #ecosystem .ecosystem-grid-new .eco-btn , #ecosystem-2 .ecosystem-grid-new .eco-btn { margin: 4px auto 8px auto !important; width: max-content !important; padding: 4px 18px !important; font-size: 12px !important; background: #e63946 !important; background-image: none !important; color: #ffffff !important; border-radius: 8px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; } } /* ===================================================================== [FINAL FIX] USER REQUEST OVERRIDES: 1. Remove all glow/blur from swiper pagination bullets (photos) 2. Fix testimonial edge card clipping on hover (desktop/homepage) 3. Ensure only "???占쎈쑏??? has red number and right-align % in desktop ===================================================================== */ /* 1. ???占쎌뵯????占??????????????占쎄퐫??占??占??????占썩닪????????占썩닪占??(????占썩닪??占쏙펲?????占썩닪????熬곣뫖占??? */ html body .swiper-pagination-bullet, html body .swiper-pagination-bullet-active, html body .testimonial-pagination, html body .testimonial-pagination .swiper-pagination-bullet, html body .testimonial-pagination .swiper-pagination-bullet-active, html body #testimonials .testimonial-pagination, html body #testimonials .swiper-pagination, html body #testimonials .swiper-pagination-bullet, html body #testimonials .swiper-pagination-bullet-active { box-shadow: none !important; filter: none !important; -webkit-filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; outline: none !important; } /* 2. ????占썩닪???????占썩닪占?? ??????占쎈벤留€??- ????占썩닪??????占??????????占썩닪占?? ????占썩닪????熬곣뫖利당뵓??????占썩닪??????占썬꺂?????????占썩닪??占쎈섀?????占썩닪???????占썩닪???*/ @media screen and (min-width: 1025px) { html body #testimonials, html body .testimonial-section { overflow: hidden !important; /* ????占썩닪???????占썩닪?????醫딆쓧????????濡ろ뜐?????怨룸섟 ?熬곣뫖?占썸납?? */ } html body #testimonials .testimonial-container, html body .testimonial-container { overflow: visible !important; width: 100% !important; max-width: 1320px !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box !important; } html body #testimonials .testimonialSwiper, html body .testimonialSwiper { overflow: visible !important; padding: 50px 20px 80px 20px !important; margin: 0 auto !important; width: 100% !important; box-sizing: border-box !important; } html body #testimonials .swiper-wrapper, html body .testimonialSwiper .swiper-wrapper { overflow: visible !important; } html body #testimonials .swiper-slide, html body .testimonialSwiper .swiper-slide { overflow: visible !important; box-sizing: border-box !important; } /* ????占썩닪???????占썩닪??????占썩닪?管??????占썩닪?????????占썩닪????占쎄땀?? ????占썩닪???????占썩닪??????占썩닪?????占????占쏀뀘???*/ html body #testimonials .swiper-slide:hover { z-index: 25 !important; } html body #testimonials .swiper-slide:not(.swiper-slide-active):hover { transform: scale(0.98) translateY(-4px) !important; opacity: 0.95 !important; z-index: 25 !important; } html body #testimonials .testimonial-card:hover, html body #testimonials .swiper-slide .testimonial-card:hover { transform: translateY(-8px) !important; border-color: rgba(230, 57, 70, 0.45) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12) !important; z-index: 30 !important; position: relative !important; } } /* 3. GLOBAL UDR NETWORK OVERVIEW ????占썩닪???- ???占쎈쑏?????占썩닪?琯占???嶺뚮쪇??????占썩닪???& ?????????占썩닪占?? ????占썩닪???% ????占썩닪??????占썩닪???*/ #installation .sf-stat-block:nth-child(1) .sf-stat-value, #installation .sf-stat-block .sf-stat-value.sf-val-red, html body #installation .sf-stat-block:nth-child(1) .sf-stat-value, html body #installation .sf-stat-block .sf-stat-value.sf-val-red { color: #ff3b30 !important; } #installation .sf-stat-block:nth-child(2) .sf-stat-value, #installation .sf-stat-block:nth-child(3) .sf-stat-value, html body #installation .sf-stat-block:nth-child(2) .sf-stat-value, html body #installation .sf-stat-block:nth-child(3) .sf-stat-value { color: #ffffff !important; } @media screen and (min-width: 1025px) { #installation .sf-stat-block, html body #installation .sf-stat-block { position: relative !important; min-height: 118px !important; justify-content: center !important; } #installation .sf-stat-ratio, html body #installation .sf-stat-ratio { position: absolute !important; right: 24px !important; bottom: 22px !important; text-align: right !important; margin: 0 !important; font-size: 0.82rem !important; color: rgba(255, 255, 255, 0.7) !important; background: transparent !important; border: none !important; padding: 0 !important; display: block !important; } #installation .sf-stat-ratio strong, html body #installation .sf-stat-ratio strong { color: #ffffff !important; font-weight: 800 !important; font-size: 0.85rem !important; margin-left: 2px !important; } } /* ===================================================================== [ABSOLUTE HOTFIX V3] TABLET SUPPORT CENTER BADGE & FAMILY SITE RIGHT ALIGNMENT ===================================================================== */ /* Force #quick-contact to align from top (flex-start) so title & SUPPORT CENTER badge are NEVER pushed off-screen */ html body #quick-contact, html body #quick-contact.quick-contact-banner { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; height: auto !important; min-height: calc(100dvh - 310px) !important; scroll-margin-top: 100px !important; } /* Tablet (768px ~ 1024px) - Ensure SUPPORT CENTER red motto badge is 100% visible below top header */ @media screen and (min-width: 768px) and (max-width: 1024px) { html body #quick-contact, html body #quick-contact.quick-contact-banner { padding-top: 130px !important; /* Generous top clearance so SUPPORT CENTER badge is fully visible */ padding-bottom: 50px !important; } html body #quick-contact .qcb-inner { margin-top: 0 !important; padding-top: 0 !important; gap: 24px !important; width: 100% !important; } html body #quick-contact .red-motto-badge { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 0.72rem !important; padding: 5px 14px !important; margin-bottom: 10px !important; } html body #quick-contact .qcb-title { font-size: 1.8rem !important; margin: 6px 0 10px 0 !important; } html body #quick-contact .qcb-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: 580px !important; margin: 0 auto !important; } } /* Mobile (<= 767px) - Compact 2-Column Grid & top flex-start alignment so ALL content fits on screen */ @media screen and (max-width: 767px) { html body #quick-contact, html body #quick-contact.quick-contact-banner { padding-top: 100px !important; padding-bottom: 30px !important; box-sizing: border-box !important; } html body #quick-contact .qcb-inner { margin-top: 0 !important; padding-top: 0 !important; padding-left: 14px !important; padding-right: 14px !important; gap: 16px !important; width: 100% !important; box-sizing: border-box !important; } html body #quick-contact .qcb-text-group { margin: 0 !important; text-align: center !important; } html body #quick-contact .red-motto-badge { display: inline-block !important; visibility: visible !important; opacity: 1 !important; font-size: 0.62rem !important; padding: 3px 9px !important; margin-bottom: 4px !important; } html body #quick-contact .qcb-title { font-size: 1.3rem !important; line-height: 1.3 !important; margin: 2px 0 4px 0 !important; word-break: keep-all !important; } html body #quick-contact .qcb-subtitle { display: none !important; font-size: 0.8rem !important; line-height: 1.45 !important; margin: 0 !important; word-break: keep-all !important; } /* 2 Cards side by side in 1 row on mobile */ html body #quick-contact .qcb-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important; } html body #quick-contact .qcb-item.qcb-card, html body #quick-contact .qcb-item { padding: 12px 4px !important; border-radius: 12px !important; gap: 0 !important; min-height: 48px !important; height: auto !important; box-sizing: border-box !important; justify-content: center !important; } html body #quick-contact .qcb-icon { display: none !important; } html body #quick-contact .qcb-icon svg { width: 18px !important; height: 18px !important; } html body #quick-contact .qcb-item span { font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: -0.05em !important; white-space: nowrap !important; } html body #quick-contact .qcb-main-cta { display: none !important; padding: 11px 24px !important; font-size: 0.82rem !important; margin-top: 0 !important; width: auto !important; max-width: 280px !important; } } /* ===================================================================== FAMILY SITE DROPDOWN RIGHT ALIGNMENT (Next to ??醫딆┻??????占썩닪???????占썩뼯?蹂λ뤀?熬곣뫖?占썸납???占쎈떛? ===================================================================== */ html body .simple-footer-right { display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-end !important; gap: 20px !important; flex-wrap: wrap !important; } html body .simple-footer-links { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 20px !important; margin: 0 !important; } html body .custom-family-dropdown { margin: 0 !important; display: inline-block !important; vertical-align: middle !important; } /* Footer Line Spacing & Mobile Floating Menu Overlap Fix */ html body .simple-footer-info { font-size: 0.88rem !important; line-height: 1.6 !important; color: rgba(255, 255, 255, 0.65) !important; margin-bottom: 12px !important; } @media screen and (max-width: 1024px) { html body .simple-footer-info br { display: none !important; } html body .simple-footer-info span { margin-right: 8px !important; } html body .simple-footer-right { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; margin-top: 20px !important; } html body .simple-footer-bottom { margin-top: 20px !important; padding-top: 30px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } html body .simple-footer { padding-top: 40px !important; padding-bottom: 125px !important; background: #020205 !important; } } @media screen and (max-width: 767px) { html body .simple-footer { padding-top: 30px !important; padding-bottom: 135px !important; } html body .simple-footer-container { padding-left: 18px !important; padding-right: 18px !important; gap: 20px !important; } html body .footer-time { display: block !important; margin-top: 4px !important; } /* Ultimate Force: Hide Quick Contact Icons on Mobile & Fit Text */ html body #quick-contact.quick-contact-banner .qcb-container .qcb-item .qcb-icon, html body #quick-contact.qcb-enhanced .qcb-container .qcb-item .qcb-icon, html body #quick-contact .qcb-icon { display: none !important; } html body #quick-contact.quick-contact-banner .qcb-container .qcb-item span, html body #quick-contact.qcb-enhanced .qcb-container .qcb-item span, html body #quick-contact .qcb-item span { font-size: 0.65rem !important; letter-spacing: -0.05em !important; white-space: normal !important; word-break: keep-all !important; line-height: 1.2 !important; } html body #quick-contact.quick-contact-banner .qcb-container .qcb-item, html body #quick-contact.qcb-enhanced .qcb-container .qcb-item, html body #quick-contact .qcb-item { padding: 8px 2px !important; min-height: 40px !important; } } /* ===================================================================== [HOTFIX] Mobile/Tablet Header Logo & KOR/ENG Visibility Fix ===================================================================== */ @media screen and (max-width: 1024px) { html body #header:not(.menu-open) .logo img { /* removed to keep colored logo */ /* removed to keep colored logo */ } html body #header:not(.menu-open):not(.force-black-text) .header-utils a, html body #header:not(.menu-open):not(.force-black-text) .nav-link { color: #ffffff !important; text-shadow: none !important; } html body #header:not(.menu-open):not(.force-black-text) .header-utils .divider { color: rgba(255, 255, 255, 0.5) !important; } html body #header.force-black-text:not(.menu-open) .header-utils a, html body #header.force-black-text:not(.menu-open) .nav-link { color: #111111 !important; text-shadow: none !important; } html body #header.force-black-text:not(.menu-open) .header-utils .divider { color: rgba(0, 0, 0, 0.3) !important; } } /* ===================================================================== [HOTFIX] Tablet/Mobile Testimonial Alignment & Pagination position ===================================================================== */ @media screen and (max-width: 1024px) { /* Reset conflicting CSS carousel properties that break Swiper's calculation */ html body #testimonials .testimonial-grid, html body #testimonials .swiper-wrapper { gap: 0 !important; padding: 0 !important; overflow-x: visible !important; scroll-snap-type: none !important; display: flex !important; } /* Raise the pagination dots */ html body #testimonials .testimonial-pagination, html body #testimonials .swiper-pagination, html body .testimonial-pagination { bottom: 140px !important; } /* Center the fixed-width cards inside the Swiper slides so the red box is perfectly in the center */ html body #testimonials .swiper-slide { display: flex !important; justify-content: center !important; align-items: center !important; } html body #testimonials .testimonial-card, html body #testimonials .swiper-slide .testimonial-card { margin: 0 auto !important; width: 100% !important; max-width: 380px !important; flex: none !important; } } /* ===================================================================== [MOBILE] HIDE TESTIMONIAL SECTION ===================================================================== */ @media screen and (max-width: 768px) { html body #testimonials, html body .testimonial-section { display: none !important; } } /* ??關占???占쏙옙占??????占쎌굡??quick-contact) ??占쎄끽占?????占쏙폍????占??占???*/ .header.force-black-bg { background: #000000 !important; } /* When menu is open, the header MUST be white even in black-bg section */ html body .header.force-black-bg.menu-open { background: #ffffff !important; border-bottom: 1px solid #eeeeee !important; } html body .header.force-black-bg.menu-open .nav-link, html body .header.force-black-bg.menu-open .header-utils a { color: #050505 !important; } html body .header.force-black-bg.menu-open .header-utils .divider { color: rgba(0, 0, 0, 0.2) !important; } html body .header.force-black-bg.menu-open .mobile-menu-toggle span { background: #000000 !important; } .header.force-black-bg .logo img { /* ??????棺??占쏙옙????繹먭퍓占???? (??占쎄낄占?????占쎈챶占? */ filter: none !important; -webkit-filter: none !important; } .header.force-black-bg .nav-link, .header.force-black-bg .header-utils a { color: #ffffff !important; } .header.force-black-bg .header-utils .divider { color: rgba(255, 255, 255, 0.3) !important; } .header.force-black-bg .mobile-menu-toggle span { background: #ffffff !important; } .header.force-black-bg .mobile-menu-toggle span { background: #ffffff !important; } /* ????諛몌옙? ????占썹땟????占썬꺂??????????怨룹툒 ????濚밸Ŧ???????*/ html body #header.force-black-bg:hover, html body #header.force-black-bg.scrolled:hover { border-bottom: 1px solid #eeeeee !important; background: #ffffff !important; } /* ????諛몌옙? ????占썹땟????占썬꺂??????????怨룹툒?????????占썹땟??占쎈갇???占썬꺂????????????占쏙옙??????影€??占쏙옙?????????占쎈？ ??? (?????????占승€?????熬곣뫖占??????? */ .header.force-black-bg:hover .mobile-menu-toggle span { background: #111111 !important; } /* ????占썹땟??占쎈갇???占썬꺂?????????????占썬꺂??????????怨룹툒 ???????占쎈쑄????占쎈슢占???*/ .header.force-black-bg .mobile-menu-toggle:hover span { background: #e63946 !important; } /* ????紐꾨쫯???占썬꺂????????占썬꺂??????????怨룹툒 ???????占쎈쑄????占쎈슢占???*/ .header.force-black-bg .nav-item:hover .nav-link, .header.force-black-bg .nav-link:hover, .header.force-black-bg .header-utils a:hover { color: #e63946 !important; } /* ======================================================= */ /* FORCE BLACK BG SUPER OVERRIDE (Fixes all hover issues) */ /* ======================================================= */ .header.force-black-bg:hover, .header.force-black-bg.scrolled:hover { border-bottom: 1px solid #eeeeee !important; background: #ffffff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; } /* Turn text black when header is hovered */ html body .header.force-black-bg:hover .nav-link, html body .header.force-black-bg.scrolled:hover .nav-link, html body .header.force-black-bg:hover .header-utils a, html body .header.force-black-bg.scrolled:hover .header-utils a { color: #111111 !important; text-shadow: none !important; } html body .header.force-black-bg:hover .logo img, html body .header.force-black-bg.scrolled:hover .logo img { filter: none !important; -webkit-filter: none !important; } /* Turn divider dark when header is hovered */ html body .header.force-black-bg:hover .header-utils .divider, html body .header.force-black-bg.scrolled:hover .header-utils .divider { color: rgba(0, 0, 0, 0.2) !important; } /* Turn sticks black when header is hovered */ html body .header.force-black-bg:hover .mobile-menu-toggle span, html body .header.force-black-bg.scrolled:hover .mobile-menu-toggle span { background: #111111 !important; } /* Turn red ONLY when the specific element is hovered */ html body .header.force-black-bg .mobile-menu-toggle:hover span, html body .header.force-black-bg.scrolled .mobile-menu-toggle:hover span { background: #e63946 !important; } html body .header.force-black-bg .nav-item:hover .nav-link, html body .header.force-black-bg.scrolled .nav-item:hover .nav-link, html body .header.force-black-bg .nav-link:hover, html body .header.force-black-bg.scrolled .nav-link:hover, html body .header.force-black-bg .header-utils a:hover, html body .header.force-black-bg.scrolled .header-utils a:hover { color: #e63946 !important; } /* ======================================================= */ /* GLOBAL HEADER HOVER OVERRIDES (User requested) */ /* ======================================================= */ /* 1. ??濚밸Ŧ???border-bottom) ?????占쎄컯占???????(?占썬꺂??袁ㅻ븶????熬곣뫖占???占썬걤?????占쎌봺?? */ html body .header:hover, html body .header.scrolled:hover, html body .header.force-black-bg:hover, html body .header.force-black-bg.scrolled:hover, html body.sub-page .header:hover, html body.sub-page .header.scrolled:hover { border-bottom: none !important; box-shadow: none !important; } /* 2. KOR | ENG (header-utils) ????紐꾨쫯???占썬꺂??????????怨룹툒 ???????占쎈쑄 ??占쎈슢占???(?占썬꺂??袁ㅻ븶????熬곣뫖占???占썬걤?????占쎌봺?? */ html body .header .header-utils a:hover, html body .header.scrolled .header-utils a:hover, html body .header:hover .header-utils a:hover, html body .header.scrolled:hover .header-utils a:hover { color: #e63946 !important; } /* 3. ????占썹땟??占쎈갇???占썬꺂??????(mobile-menu-toggle) ?占썬꺂??????????怨룹툒 ????????????占쎈쑄 ??占쎈슢占???(?占썬꺂??袁ㅻ븶????熬곣뫖占???占썬걤?????占쎌봺?? */ html body .header .mobile-menu-toggle:hover span, html body .header.scrolled .mobile-menu-toggle:hover span, html body .header:hover .mobile-menu-toggle:hover span, html body .header.scrolled:hover .mobile-menu-toggle:hover span { background: #e63946 !important; } /* ======================================================= */ /* ULTIMATE HEADER ID HOVER OVERRIDES (Beats all specificity) */ /* ======================================================= */ /* --- 1. BLACK BACKGROUND STATE (force-black-bg) --- */ /* Make header white and text black when hovered */ html body #header.force-black-bg:hover, html body #header.force-black-bg.scrolled:hover { border-bottom: 1px solid #eeeeee !important; background: #ffffff !important; } html body #header.force-black-bg:hover .nav-link, html body #header.force-black-bg:hover .header-utils a, html body #header.force-black-bg.scrolled:hover .nav-link, html body #header.force-black-bg.scrolled:hover .header-utils a { color: #111111 !important; text-shadow: none !important; } html body #header.force-black-bg:hover .logo img, html body #header.force-black-bg.scrolled:hover .logo img { filter: none !important; -webkit-filter: none !important; } html body #header.force-black-bg:hover .mobile-menu-toggle span { background: #111111 !important; } /* Turn RED only when directly hovered */ html body #header.force-black-bg .nav-item:hover .nav-link, html body #header.force-black-bg .nav-link:hover, html body #header.force-black-bg .header-utils a:hover { color: #e63946 !important; } html body #header.force-black-bg .mobile-menu-toggle:hover span { background: #e63946 !important; } /* --- 2. WHITE BACKGROUND STATE (default scrolled or hover) --- */ /* Turn RED when text or icons are directly hovered */ html body #header .header-utils a:hover, html body #header:hover .header-utils a:hover { color: #e63946 !important; } html body #header .mobile-menu-toggle:hover span, html body #header:hover .mobile-menu-toggle:hover span { background: #e63946 !important; } /* --- 3. GLOBAL: NO BORDER/SHADOW --- */ html body #header:hover { border-bottom: none !important; box-shadow: none !important; } /* ============================================================ */ /* ??占쎄끽占?遺뱄옙??癲ル슢??占쏙옙?????繹먭퍓占?癲ル슔?占썼짆?占쏀렭????? ???占?? */ /* ============================================================ */ /* [A] ??占쎌삀??? ???占???袁⑸즲??占쎈き?-> ???占승€?占쎈룿 */ html body #header .mobile-menu-toggle span { background: #ffffff !important; } /* [B] ?袁⑸즵?? ?袁⑸즲??占쎈き?-> ?濡ろ떟??? force-black-text: 癲ル슢??????筌먐삳빘 ???占쎌씁????占쏙옙???袁⑸즵?? ?????????袁⑹뵫???????占쎌굣??? sub-page hover/scrolled: ??筌먐삳빘???占쎄낮?占쏙┼??占쏙옙? ????占쎈쭬??占쎈읈? ???袁⑸즲??占쎈き???占쏙옙???袁⑸즴??????*/ html body #header.force-black-text .mobile-menu-toggle span, html body.sub-page #header:hover .mobile-menu-toggle span, html body.sub-page #header.scrolled .mobile-menu-toggle span { background: #111111 !important; } /* [C] force-black-bg (Quick Contact) -> ???占승€?占쎈룿 */ html body #header.force-black-bg .mobile-menu-toggle span { background: #ffffff !important; } /* [D] ??占쎄끽占?遺뱄옙???占?占????????hover -> ??筌륁슕???*/ html body #header .mobile-menu-toggle:hover span { background: #e63946 !important; } /* ============================================================ */ /* [FIX] Mobile Menu Toggle & Menu Open High-Specificity Overrides */ /* ============================================================ */ /* 1. 筌뤴뫀占????占쏀닜??1024px ??占쎈릭) ???占쏙옙 ?怨밴묶?占?占쏙옙 hover ????占?獄쏄퀗占?類ㅼ삢) ??占쎈┛???占쎈챷???袁⑹읈??筌△뫀??*/ @media screen and (max-width: 1024px) { html body #header:not(.menu-open):hover, html body #header:not(.menu-open).scrolled:hover { background: transparent !important; box-shadow: none !important; height: 68px !important; border: none !important; } html body #header:not(.menu-open):hover .mega-bg, html body #header:not(.menu-open):hover .mega-nav { display: none !important; height: 0 !important; opacity: 0 !important; visibility: hidden !important; } /* 筌뤴뫀占????占쏀닜??筌롫뗀??占??占? ?占????占썬끉占??怨몄뒠 */ .mobile-menu-toggle, .mobile-menu-toggle span, .header-utils a, .header.menu-open .mega-dropdown a, .header.menu-open .nav-link { cursor: pointer !important; } } /* 2. 筌롫뗀?占썲첎? ??占쏙옙????(menu-open) X ?袁⑹뵠??(野꺜€???? 筌ㅼ뮄???怨쀪퐨??占쎌맄 ?怨몄뒠 */ html body #header.menu-open .mobile-menu-toggle span, html body #header.menu-open .mobile-menu-toggle.active span { background: #111111 !important; cursor: pointer !important; } html body #header.menu-open .mobile-menu-toggle:hover span { background: #e63946 !important; cursor: pointer !important; } /* MOBILE APP OVERRIDES */ @media (max-width: 768px) { #sticky-cta-bar, html body #sticky-cta-bar { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .premium-tech-section, html body .premium-tech-section { padding-top: 2rem !important; padding-bottom: 2rem !important; } .premium-tech-header, html body .premium-tech-header { margin-top: 0 !important; margin-bottom: 1.2rem !important; padding-top: 0 !important; } .premium-tech-title, html body .premium-tech-title { margin-top: 0.3rem !important; margin-bottom: 0 !important; font-size: 1.55rem !important; line-height: 1.2 !important; } #installation, html body #installation { padding-top: 2.5rem !important; padding-bottom: 2rem !important; } #installation .sf-title-group, html body #installation .sf-title-group { margin-bottom: 125px !important; } #installation .sf-main-title, html body #installation .sf-main-title { font-size: 1.15rem !important; line-height: 1.18 !important; letter-spacing: 0.3px !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { width: 155px !important; height: 155px !important; top: 175px !important; } #installation .sf-right-panel, html body #installation .sf-right-panel { margin-top: -55px !important; margin-bottom: 8px !important; transform: translateY(-25px) !important; } #installation .sf-flags-container, html body #installation .sf-flags-container { gap: 4px !important; margin-top: 6px !important; transform: translateY(-25px) !important; } #installation .sf-flag-tag, html body #installation .sf-flag-tag { padding: 4px 8px !important; font-size: 0.68rem !important; line-height: 1.2 !important; } #ecosystem, html body #ecosystem { padding-top: 2rem !important; padding-bottom: 2rem !important; } #ecosystem .ecosystem-header, html body #ecosystem .ecosystem-header { margin-bottom: 1.2rem !important; } #ecosystem .ecosystem-header h2, html body #ecosystem .ecosystem-header h2 { font-size: 1.5rem !important; line-height: 1.2 !important; margin-top: 0.4rem !important; margin-bottom: 0 !important; } #ecosystem .ecosystem-grid-new, html body #ecosystem .ecosystem-grid-new { gap: 1.2rem !important; } /* Promotional Video Mobile Fixes */ .cream-header, html body .cream-header { margin-bottom: 12px !important; align-items: center !important; } .cream-video-section .cream-item-title, html body .cream-video-section .cream-item-title { font-weight: 300 !important; font-size: 11px !important; } .cream-video-item, html body .cream-video-item { transform: none !important; } .cream-video-item:hover, html body .cream-video-item:hover, html body .cream-video-item:active { transform: none !important; box-shadow: none !important; } /* Testimonials Mobile Fixes */ #testimonials, html body #testimonials { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; padding-top: 100px !important; height: auto !important; min-height: auto !important; padding-bottom: 40px !important; } html body #testimonials .testimonial-container { display: block !important; } html body #testimonials .clean-pill-badge { font-size: 0.6rem !important; padding: 3px 10px !important; margin-bottom: 6px !important; } html body #testimonials .testimonial-title { font-size: 1.2rem !important; font-weight: 800 !important; line-height: 1.2 !important; margin: 4px 0 6px 0 !important; } html body #testimonials .testimonial-sub { font-size: 0.72rem !important; line-height: 1.4 !important; word-break: keep-all !important; } html body #testimonials .testimonial-card { margin: 0 auto !important; text-align: center !important; } html body #testimonials .testimonial-card .testimonial-text { font-size: 0.72rem !important; line-height: 1.5 !important; } html body #testimonials .testimonialSwiper .swiper-wrapper { justify-content: flex-start !important; } /* Quick Contact Mobile Fixes - Fit Everything on 1 Screen */ #quick-contact, html body #quick-contact.quick-contact-banner { min-height: calc(100dvh - 350px) !important; height: auto !important; padding-top: 160px !important; padding-bottom: 20px !important; scroll-margin-top: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; } html body #quick-contact .qcb-inner { margin-top: 60px !important; gap: 12px !important; } html body #quick-contact .qcb-text-group { margin-top: 0 !important; margin-bottom: 12px !important; } html body #quick-contact .red-motto-badge { font-size: 9px !important; padding: 2px 6px !important; margin-bottom: 4px !important; } html body #quick-contact .qcb-title { font-size: 1.1rem !important; margin-bottom: 0 !important; line-height: 1.2 !important; } html body #quick-contact .qcb-subtitle { display: none !important; } html body #quick-contact .qcb-container { gap: 8px !important; } html body #quick-contact .qcb-item { padding: 8px !important; min-height: 36px !important; } /* Footer Mobile Shrink to fix overlap */ html body .simple-footer { padding-top: 20px !important; padding-bottom: 120px !important; } html body .simple-footer-container { gap: 12px !important; } html body .simple-footer-logo { font-size: 1.1rem !important; margin-bottom: 4px !important; } html body .simple-footer-info { font-size: 0.75rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; } html body .simple-footer-contact { margin-top: 2px !important; } html body .simple-footer-contact strong { font-size: 1.1rem !important; margin-right: 4px !important; } html body .simple-footer-contact .footer-time { display: block !important; margin-top: 4px !important; font-size: 0.7rem !important; } html body .simple-footer-right { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } html body .simple-footer-links { gap: 12px !important; margin-bottom: 0 !important; } html body .simple-footer-links a { font-size: 0.7rem !important; } html body .simple-footer-bottom { margin-top: 8px !important; padding-top: 8px !important; font-size: 0.7rem !important; border-top: none !important; } } .cream-section-title { font-size: 1.5rem; font-weight: 800; color: #ffffff; margin: 0; letter-spacing: 0.5px; } @media (max-width: 767px) { .cream-section-title { font-size: 1.25rem; } } @media (max-width: 767px) { body, html body { padding-bottom: 110px !important; /* Global padding to clear sticky bottom nav */ } } /* User requested: Reduce core-title font size, core-btn size, and core-card vertical height on mobile */ @media screen and (max-width: 767px) { html body .core-grid-new .core-card { min-height: 110px !important; padding: 12px 10px !important; } html body .core-grid-new .core-title { font-size: 0.75rem !important; line-height: 1.2 !important; margin-top: 5px !important; margin-bottom: 5px !important; } html body .core-grid-new .core-btn, html body .core-card .core-btn { padding: 2px 12px !important; min-height: 20px !important; height: 20px !important; font-size: 0.6rem !important; } html body .core-grid-new .core-label { font-size: 0.55rem !important; padding: 3px 10px !important; margin-bottom: 5px !important; } } /* User requested: Match Premium Space & Technology grandiose-bottom-info position to Outdoor Simulation */ html body .cinematic-video-section .grandiose-bottom-info.static-visible { bottom: max(7vh, 90px) !important; } @media (max-width: 1024px) { html body .cinematic-video-section .grandiose-bottom-info.static-visible { bottom: max(12vh, 110px) !important; left: 20px !important; padding-right: 20px !important; } } /* User requested: Fix mobile globe overlap with title */ @media (max-width: 767px) { #installation .sf-title-group, html body #installation .sf-title-group { margin-bottom: 200px !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { top: 215px !important; } } /* User requested: Push mobile globe down even more */ @media (max-width: 767px) { #installation .sf-title-group, html body #installation .sf-title-group { margin-bottom: 230px !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { top: 245px !important; } } /* User requested: Push mobile globe down a bit more */ @media (max-width: 767px) { #installation .sf-title-group, html body #installation .sf-title-group { margin-bottom: 255px !important; } #installation .sf-earth-container, html body #installation .sf-earth-container { top: 270px !important; } } /* User requested: Final exact match with hover arrow */ @keyframes move-arrow-dr { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 3px); } } @media (max-width: 767px) { html body #ecosystem .ecosystem-grid-new .eco-card, html body #ecosystem-2 .ecosystem-grid-new .eco-card { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; padding: 14px 16px !important; min-height: 70px !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; position: relative !important; } html body #ecosystem .ecosystem-grid-new .eco-card .eco-label, html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-label { background: rgba(230, 57, 70, 0.08) !important; color: #d62828 !important; border: none !important; border-radius: 20px !important; padding: 4px 10px !important; font-size: 0.6rem !important; font-weight: 800 !important; margin: 0 10px 0 0 !important; white-space: nowrap !important; display: inline-block !important; } html body #ecosystem .ecosystem-grid-new .eco-card .eco-icon, html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-icon { color: #d62828 !important; margin: 0 8px 0 0 !important; height: 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; } html body #ecosystem .ecosystem-grid-new .eco-card .eco-icon svg, html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-icon svg { width: 20px !important; height: 20px !important; stroke-width: 1.8 !important; } html body #ecosystem .ecosystem-grid-new .eco-card .eco-title, html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-title { font-size: 0.95rem !important; color: #222 !important; margin: 0 !important; font-weight: 700 !important; display: inline-block !important; white-space: nowrap !important; letter-spacing: -0.3px !important; } html body #ecosystem .ecosystem-grid-new .eco-card .eco-btn, html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-btn { position: absolute !important; bottom: 8px !important; right: 12px !important; background: transparent !important; width: 28px !important; height: 28px !important; min-height: 28px !important; border-radius: 6px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; font-size: 0 !important; color: transparent !important; border: none !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } html body #ecosystem .ecosystem-grid-new .eco-card:hover .eco-btn, html body #ecosystem-2 .ecosystem-grid-new .eco-card:hover .eco-btn, html body #ecosystem .ecosystem-grid-new .eco-card:active .eco-btn, html body #ecosystem-2 .ecosystem-grid-new .eco-card:active .eco-btn { opacity: 1 !important; background: transparent !important; background-image: none !important; } html body #ecosystem .ecosystem-grid-new .eco-card .eco-btn i, html body #ecosystem-2 .ecosystem-grid-new .eco-card .eco-btn i { font-size: 1.4rem !important; color: #e63946 !important; animation: move-arrow-dr 1.2s infinite ease-in-out !important; position: static !important; display: block !important; line-height: 1 !important; margin: 0 !important; } } /* Fix Mobile Text Overlap in Cinematic Video Sections (#space & #realism) */ @media (max-width: 767px) { html body .cinematic-video-section .cinematic-overlay { align-items: center !important; justify-content: center !important; padding-top: 50px !important; padding-bottom: 90px !important; } html body .cinematic-video-section .cinematic-content { text-align: left !important; width: 100% !important; max-width: 100% !important; padding: 0 5vw !important; } html body .cinematic-video-section .cinematic-title { font-size: 1.8rem !important; line-height: 1.15 !important; text-shadow: 0 3px 20px rgba(0, 0, 0, 0.95), 0 1px 5px rgba(0, 0, 0, 0.8) !important; } html body .cinematic-video-section .cinematic-desc { font-size: 0.85rem !important; line-height: 1.45 !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.8) !important; margin-bottom: 16px !important; } } /* ===================================================================== [ULTIMATE FIX] Mobile Menu Open State (Always White BG & Full Visibility) ===================================================================== */ /* Global Hamburger Toggle Hover State (3 Bars Turn RED on Hover/Touch) */ html body #header .mobile-menu-toggle:hover span, html body #header.scrolled .mobile-menu-toggle:hover span, html body #header.force-black-bg .mobile-menu-toggle:hover span, html body #header.force-black-text .mobile-menu-toggle:hover span, html body #header .mobile-menu-toggle:active span, html body #header .mobile-menu-toggle.active:hover span { background: #e63946 !important; background-color: #e63946 !important; } @media screen and (max-width: 1024px) { /* 1. Header & Overlay Full White Background when Mobile Menu is Open */ html body #header.menu-open, html body #header.menu-open.force-black-bg, html body #header.menu-open.force-black-text, html body #header.menu-open.scrolled, html body #header.menu-open .mega-bg, html body #header.menu-open .mega-nav { background: #ffffff !important; background-color: #ffffff !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important; border-bottom: 1px solid #eeeeee !important; } /* 2. Original Header Logo Visible */ html body #header.menu-open .logo img { filter: none !important; -webkit-filter: none !important; opacity: 1 !important; visibility: visible !important; } /* 3. X Close Button Always 100% Crisp Dark Black (Turns RED on hover) */ html body #header.menu-open .mobile-menu-toggle span, html body #header.menu-open.force-black-bg .mobile-menu-toggle span, html body #header.menu-open.force-black-text .mobile-menu-toggle span, html body #header.menu-open.scrolled .mobile-menu-toggle span, html body #header.menu-open .mobile-menu-toggle.active span { background: #111111 !important; opacity: 1 !important; visibility: visible !important; } html body #header.menu-open .mobile-menu-toggle:hover span, html body #header.menu-open .mobile-menu-toggle:active span { background: #e63946 !important; } /* 4. Compact 1st-Level Menu Categories (ABOUT, PRODUCT, PROGRAM, etc.) */ html body #header.menu-open .mega-nav .nav-list, html body #header.menu-open .nav-list { display: flex !important; flex-direction: column !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* 모바일 전체메뉴 열렸을 때 하단 퀵메뉴(전화연결, 상담문의 등) 항상 표시 */ html body.mobile-nav-open .floating-quick-menu, html body:has(#header.menu-open) .floating-quick-menu { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; z-index: 100000 !important; } html body #header.menu-open .nav-item { display: block !important; width: 100% !important; background: transparent !important; border: none !important; padding: 0 0 1.4rem 0 !important; margin: 0 !important; text-align: left !important; opacity: 0; animation: navItemFadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } html body #header.menu-open .nav-item:nth-child(1) { animation-delay: 0.04s !important; } html body #header.menu-open .nav-item:nth-child(2) { animation-delay: 0.08s !important; } html body #header.menu-open .nav-item:nth-child(3) { animation-delay: 0.12s !important; } html body #header.menu-open .nav-item:nth-child(4) { animation-delay: 0.16s !important; } html body #header.menu-open .nav-item:nth-child(5) { animation-delay: 0.20s !important; } html body #header.menu-open .nav-item:nth-child(6) { animation-delay: 0.24s !important; } html body #header.menu-open .nav-item:nth-child(7) { animation-delay: 0.28s !important; } html body #header.menu-open .nav-item:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* 대메뉴 카테고리 (Inter/Montserrat 볼드 산세리프) */ html body #header.menu-open .nav-link, html body #header.menu-open.force-black-bg .nav-link, html body #header.menu-open.force-black-text .nav-link, html body #header.menu-open.scrolled .nav-link { color: #888888 !important; font-family: "Inter", "Montserrat", -apple-system, sans-serif !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; display: block !important; padding: 0 0 0.65rem 0 !important; border: none !important; border-bottom: none !important; margin: 0 !important; text-align: left !important; cursor: default !important; pointer-events: none !important; } html body #header.menu-open .nav-link::before, html body #header.menu-open .nav-link::after { display: none !important; } /* 서브메뉴 리스트 */ html body #header.menu-open .mega-dropdown, html body #header.menu-open .mega-dropdown ul { display: block !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important; text-align: left !important; } html body #header.menu-open .mega-dropdown li { display: block !important; margin: 0 !important; border: none !important; text-align: left !important; } /* 서브메뉴 텍스트 (터치/호버 시 부드러운 우측 슬라이드 + 레드 컬러) */ html body #header.menu-open .mega-dropdown a, html body #header.menu-open.force-black-bg .mega-dropdown a, html body #header.menu-open.force-black-text .mega-dropdown a, html body #header.menu-open.scrolled .mega-dropdown a { color: #111111 !important; font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif !important; font-size: 1.02rem !important; font-weight: 600 !important; letter-spacing: -0.035em !important; line-height: 1.4 !important; display: inline-block !important; padding: 0.28rem 0 !important; text-decoration: none !important; border: none !important; background: transparent !important; transform: translateX(0) !important; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease !important; cursor: pointer !important; text-align: left !important; } html body #header.menu-open .mega-dropdown a::before, html body #header.menu-open .mega-dropdown a::after { display: none !important; } /* 호버 & 터치 모션 (터치 즉시 빨간색 + 우측 슬라이드 반응) */ html body #header.menu-open .mega-dropdown a:hover, html body #header.menu-open .mega-dropdown a:focus, html body #header.menu-open .mega-dropdown a:active, html body #header.menu-open .mega-dropdown a.touch-active { color: #e63946 !important; transform: translateX(8px) !important; } /* 6. Utility Links (KOR | ENG) Always Visible in Dark */ html body #header.menu-open .header-utils a, html body #header.menu-open.force-black-bg .header-utils a, html body #header.menu-open.force-black-text .header-utils a, html body #header.menu-open.scrolled .header-utils a { color: #111111 !important; text-shadow: none !important; } html body #header.menu-open .header-utils .divider { color: rgba(0, 0, 0, 0.3) !important; } } /* ===================================================================== [MOBILE SUBPAGE HERO DIET] Reduce Subpage Banner Height & Top Padding ===================================================================== */ @media screen and (max-width: 767px) { html body .sw-hero, html body.sub-page .sw-hero, html body section.sw-hero { padding: 24px 16px 20px !important; } } /* ===================================================================== [MOBILE STRICT OVERRIDES: MAX-WIDTH 1024PX - REDUCED FONT SCALING (TAB MENU EXCLUDED)] ===================================================================== */ @media screen and (max-width: 1024px) { body, html body, body.sub-page, html body.sub-page { padding-top: 44px !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .sw-hero, html body .sw-hero, html body section.sw-hero { padding: 30px 12px 20px !important; } .sw-eyebrow, html body .sw-hero .sw-eyebrow { font-size: 0.85rem !important; margin-bottom: 6px !important; } .sw-hero-title, html body .sw-hero .sw-hero-title { font-size: 1.8rem !important; margin: 0 !important; } .sw-tags, html body .sw-hero .sw-tags { margin-top: 8px !important; gap: 6px !important; } .sw-subnav, html body .sw-subnav { top: 44px !important; margin-bottom: 18px !important; } .sw-snav, html body .sw-snav { font-size: 0.8rem !important; padding: 7px 12px !important; } .contact-card-grid, html body .contact-card-grid { display: none !important; visibility: hidden !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .contact-section, .purchase-section, .board-section, .board-view-section, html body .contact-section, html body .purchase-section, html body .board-section, html body .board-view-section { padding-top: 28px !important; padding-bottom: 30px !important; } /* Board Mobile Fonts */ .board-toolbar, html body .board-toolbar { margin-bottom: 14px !important; gap: 8px !important; } .board-cat-btn, html body .board-cat-btn { font-size: 13px !important; padding: 6px 12px !important; } .board-search-input, html body .board-search-input { font-size: 13px !important; padding: 6px 12px !important; width: 145px !important; } .board-search-input::placeholder { font-size: 12px !important; } .board-write-btn, html body .board-write-btn { font-size: 13px !important; padding: 6px 14px !important; } .board-header-row, html body .board-header-row { font-size: 12px !important; padding: 8px 10px !important; } .board-item-row, html body .board-item-row { padding: 10px 12px !important; gap: 8px !important; font-size: 13px !important; } .board-item-row .title-col, html body .board-item-row .title-col { font-size: 13.5px !important; line-height: 1.38 !important; } .board-item-row .author-col, html body .board-item-row .author-col, .board-item-row .num-col, html body .board-item-row .num-col, .board-item-row .cat-col, html body .board-item-row .cat-col, .board-item-row .date-col, html body .board-item-row .date-col { font-size: 12px !important; } .status-chip, html body .status-chip { font-size: 11px !important; padding: 2.5px 6px !important; } .board-answer-box, html body .board-answer-box { padding: 11px 13px !important; font-size: 13px !important; line-height: 1.55 !important; } .board-answer-box strong, html body .board-answer-box strong { font-size: 13px !important; } .answer-reply, html body .answer-reply { font-size: 12.5px !important; margin-top: 8px !important; padding-top: 8px !important; } .board-no-results .no-results-title, html body .board-no-results .no-results-title { font-size: 14.5px !important; } .board-no-results .no-results-sub, html body .board-no-results .no-results-sub { font-size: 12px !important; } /* Board View Page Mobile Fonts */ .board-view-header, html body .board-view-header { padding: 12px 14px !important; margin-bottom: 10px !important; } .board-view-title, html body .board-view-title { font-size: 16.5px !important; line-height: 1.35 !important; margin-bottom: 6px !important; } .board-view-meta, html body .board-view-meta, .board-view-meta span, html body .board-view-meta span { font-size: 12px !important; gap: 8px !important; } .board-view-content, html body .board-view-content { font-size: 13.5px !important; line-height: 1.6 !important; padding: 14px 14px !important; } .board-view-answer, html body .board-view-answer { padding: 12px 14px !important; margin-top: 10px !important; } .board-view-answer-title, html body .board-view-answer-title { font-size: 14.5px !important; margin-bottom: 6px !important; } .board-view-answer-title svg, html body .board-view-answer-title svg { width: 16px !important; height: 16px !important; } .board-view-answer-content, html body .board-view-answer-content, .board-view-answer-body, html body .board-view-answer-body { font-size: 13px !important; line-height: 1.6 !important; } .board-view-actions, html body .board-view-actions { margin-top: 12px !important; gap: 8px !important; } .btn-list, .btn-edit, .btn-delete, html body .btn-list, html body .btn-edit, html body .btn-delete { font-size: 12.5px !important; padding: 7px 14px !important; } /* Contact & Purchase Form Mobile Fonts */ .contact-form-box, .purchase-form-box, html body .contact-form-box, html body .purchase-form-box { padding: 18px 14px !important; } .hyper-tag-pill, html body .hyper-tag-pill { font-size: 0.85rem !important; padding: 5px 12px !important; transform: translateY(-8px) !important; display: inline-block !important; } .form-header, html body .form-header { margin-bottom: 11px !important; } .form-header h3, html body .form-header h3 { font-size: 16.5px !important; } .form-header p, html body .form-header p { font-size: 12.5px !important; line-height: 1.4 !important; } .form-grid, html body .form-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .form-group label, html body .form-group label { font-size: 13px !important; } .form-input, .form-select, .form-textarea, html body .form-input, html body .form-select, html body .form-textarea { font-size: 13.5px !important; padding: 9px 12px !important; border-radius: 7px !important; } .form-input::placeholder, .form-textarea::placeholder, html body .form-input::placeholder, html body .form-textarea::placeholder { font-size: 12.5px !important; } .form-textarea, html body .form-textarea { min-height: 80px !important; } .privacy-check, html body .privacy-check, .privacy-check label, html body .privacy-check label { font-size: 12px !important; line-height: 1.4 !important; } .form-group.full, html body .form-group.full { grid-column: span 1 !important; } .submit-btn, html body .submit-btn { width: 100% !important; min-width: auto !important; font-size: 13.5px !important; padding: 10px 16px !important; } /* Modals Mobile Fonts */ .board-modal-overlay, html body .board-modal-overlay { padding: 14px 10px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } .board-modal-content, html body .board-modal-content { max-height: 85vh !important; max-height: 85dvh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; padding: 20px 14px 16px 14px !important; border-radius: 12px !important; margin: auto !important; } .board-modal-content.pw-modal-content, html body .board-modal-content.pw-modal-content { max-width: 330px !important; } .board-modal-title, html body .board-modal-title { font-size: 16px !important; margin-bottom: 10px !important; } .pw-modal-desc, html body .pw-modal-desc { font-size: 12px !important; line-height: 1.4 !important; margin-bottom: 10px !important; } .modal-close-btn, html body .modal-close-btn { top: 9px !important; right: 9px !important; font-size: 1.3rem !important; } .board-modal-form, html body .board-modal-form { gap: 8px !important; } .board-modal-row, html body .board-modal-row { grid-template-columns: 1fr !important; gap: 8px !important; } .board-modal-label, html body .board-modal-label { font-size: 12px !important; margin-bottom: 2px !important; } .board-modal-field, html body .board-modal-field { padding: 8px 10px !important; font-size: 13px !important; border-radius: 6px !important; margin-top: 2px !important; } .board-modal-field::placeholder { font-size: 12px !important; } .board-modal-textarea, html body .board-modal-textarea { min-height: 68px !important; height: 68px !important; } .board-modal-submit-btn, html body .board-modal-submit-btn, .board-modal-content .submit-btn, html body .board-modal-content .submit-btn { padding: 9.5px 16px !important; font-size: 13px !important; margin-top: 5px !important; border-radius: 6px !important; width: 100% !important; min-width: auto !important; } .simple-footer, html body .simple-footer { padding-top: 24px !important; padding-bottom: 120px !important; margin-bottom: 0 !important; overflow: visible !important; } .simple-footer-container, html body .simple-footer-container { padding-bottom: 10px !important; overflow: visible !important; } .simple-footer-bottom, html body .simple-footer-bottom { display: block !important; margin-top: 12px !important; padding-top: 12px !important; padding-bottom: 15px !important; margin-bottom: 0 !important; width: 100% !important; text-align: center !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } .simple-footer-bottom span, html body .simple-footer-bottom span { display: inline-block !important; font-size: 11.5px !important; color: rgba(255, 255, 255, 0.55) !important; line-height: 1.5 !important; white-space: normal !important; word-break: keep-all !important; visibility: visible !important; opacity: 1 !important; } } .board-modal-content::-webkit-scrollbar { width: 5px !important; } .board-modal-content::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05) !important; border-radius: 3px !important; } .board-modal-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28) !important; border-radius: 3px !important; } /* Fix mobile menu toggle disappearing on scroll and header hover */ @media screen and (max-width: 1024px) { html body #header:not(.menu-open):not(.force-black-text) .mobile-menu-toggle span { background: #ffffff !important; } html body #header:not(.menu-open):not(.force-black-text) .mobile-menu-toggle:hover span { background: #e63946 !important; } } /* --- EMERGENCY MOBILE TYPOGRAPHY & MARGIN RATIO FIX --- */ @media screen and (max-width: 768px) { /* Vision Page */ .glass-statement-title { font-size: 1.35rem !important; margin-bottom: 12px !important; } .glass-statement-desc { font-size: 0.9rem !important; line-height: 1.6 !important; color: #cccccc !important; } .vm-card-title { font-size: 1.2rem !important; margin-bottom: 8px !important; } .vm-card-body { font-size: 0.85rem !important; line-height: 1.6 !important; } /* Business Page */ .business-title { font-size: 1.3rem !important; line-height: 1.35 !important; margin-bottom: 8px !important; } .business-sub-english { font-size: 0.85rem !important; margin-bottom: 20px !important; } .main-quote { font-size: 0.9rem !important; line-height: 1.6 !important; } .quote-symbol { font-size: 2.5rem !important; margin-bottom: 5px !important; opacity: 0.5; } .pillar-number { font-size: 1.3rem !important; margin-bottom: 0.5rem !important; } .pillar-card h3 { font-size: 1.1rem !important; margin-bottom: 0.5rem !important; } .pillar-card p { font-size: 0.85rem !important; line-height: 1.5 !important; } .paradigm-header h2 { font-size: 1.25rem !important; margin-bottom: 10px !important; } .paradigm-desc { font-size: 0.9rem !important; line-height: 1.5 !important; color: #cccccc !important; } .paradigm-feature-card h4 { font-size: 1.05rem !important; margin-bottom: 6px !important; } .paradigm-feature-card p { font-size: 0.85rem !important; line-height: 1.5 !important; } /* Tighten Content Gaps */ .about-section, .business-philosophy-section, .business-paradigm-section { padding: 30px 16px 50px !important; } .glass-statement-card, .paradigm-card-wrapper, .pillar-card { padding: 20px 16px !important; margin-bottom: 25px !important; } } /* Extracted from store.html */ /* ============================================================ STORE PAGE – 풀스크린 원페이지 레이아웃 ============================================================ */ /* store 페이지는 공통 sw-hero 패딩 그대로 사용 */ /* ── 메인 섹션: 배경 영상 풀스크린 ── */ .store-main-section { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #030303; } .store-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; z-index: 0; } .store-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(3,3,3,0.3) 40%, rgba(0,0,0,0.65) 100%); z-index: 1; } .store-content { position: relative; z-index: 2; width: 100%; max-width: 1300px; margin: 0 auto; padding: 60px 40px; display: grid; grid-template-rows: auto auto auto; gap: 0; } /* ── 상단: 타이틀 + 총 카운터 ── */ .store-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 44px; flex-wrap: wrap; } .store-badge { display: inline-block; padding: 5px 18px; border: 1px solid rgba(230,57,70,0.5); border-radius: 30px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; color: #e63946; margin-bottom: 14px; text-transform: uppercase; } .store-main-title { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10px; } .store-main-title span { color: #e63946; } .store-sub-desc { font-size: 0.88rem; color: rgba(255,255,255,0.5); line-height: 1.7; max-width: 420px; } .store-total-block { text-align: right; flex-shrink: 0; } .store-total-label { font-size: 0.72rem; letter-spacing: 0.15em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 6px; } .store-total-number { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 900; color: #e63946; line-height: 1; letter-spacing: -0.03em; } .store-total-number sup { font-size: 0.35em; font-weight: 600; color: rgba(230,57,70,0.7); vertical-align: super; } .store-total-split { display: flex; gap: 20px; justify-content: flex-end; margin-top: 10px; } .store-split-item { display: flex; flex-direction: column; align-items: flex-end; } .store-split-val { font-size: 1.35rem; font-weight: 700; color: #fff; } .store-split-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; } /* ── 중간: 지도 + 국가 카드 ── */ .store-middle-row { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; margin-bottom: 36px; } .store-map-wrapper { position: relative; border: 1px solid rgba(230,57,70,0.15); border-radius: 16px; overflow: visible; /* Fix tooltip cutoff */ background: rgba(255,255,255,0.02); backdrop-filter: blur(6px); } .store-map-inner { position: relative; width: 100%; padding-bottom: 52%; } .world-map-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-image: url('../img/worldmap_dots.svg'); background-size: cover; background-repeat: no-repeat; background-position: center; opacity: 0.4; } .map-hotspot { position: absolute; cursor: pointer; z-index: 10; } .map-pin-dot { width: 10px; height: 10px; background: #e63946; border-radius: 50%; border: 2px solid #fff; position: relative; z-index: 2; transition: transform 0.2s; } .map-pin-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(230,57,70,0.25); animation: storePulse 2s ease-out infinite; } @keyframes storePulse { 0% { transform: translate(-50%,-50%) scale(0.6); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } } .map-hotspot:hover .map-pin-dot, .map-hotspot.active .map-pin-dot { transform: scale(1.4); background: #fff; } .map-tooltip { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(10,10,10,0.92); border: 1px solid rgba(230,57,70,0.5); border-radius: 10px; padding: 10px 16px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 20; } .map-tooltip h4 { font-size: 0.8rem; color: #e63946; margin: 0 0 3px; font-weight: 600; } .map-tooltip .tooltip-count strong { font-size: 1.2rem; color: #fff; font-weight: 800; } .map-tooltip .tooltip-count small { font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-left: 2px; } .map-hotspot.active .map-tooltip, .map-hotspot:hover .map-tooltip { opacity: 1; } /* 핀 위치 */ .map-hotspot-pos-1 { top: 37%; left: 81%; } .map-hotspot-pos-2 { top: 40%; left: 73%; } .map-hotspot-pos-3 { top: 34%; left: 86%; } .map-hotspot-pos-4 { top: 30%; left: 22%; } .map-hotspot-pos-5 { top: 56%; left: 76%; } .map-hotspot-pos-6 { top: 28%; left: 51%; } /* ── 국가 카드 ── */ .store-country-cards { display: flex; flex-direction: column; gap: 8px; } .country-card { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; cursor: pointer; transition: all 0.25s ease; position: relative; overflow: hidden; } .country-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #e63946; opacity: 0; transition: opacity 0.25s; } .country-card:hover, .country-card.active { background: rgba(230,57,70,0.08); border-color: rgba(230,57,70,0.3); transform: translateX(4px); } .country-card:hover::before, .country-card.active::before { opacity: 1; } .country-card-name { font-size: 0.84rem; color: rgba(255,255,255,0.75); font-weight: 500; } .country-card-num { font-size: 1.1rem; font-weight: 800; color: #e63946; } .country-card-num span { font-size: 0.68rem; font-weight: 500; color: rgba(255,255,255,0.4); margin-left: 2px; } /* 하단 노트 */ .store-bottom-note { border-top: 1px solid rgba(255,255,255,0.07); padding-top: 18px; font-size: 0.75rem; color: rgba(255,255,255,0.3); line-height: 1.8; text-align: center; } /* 반응형 */ @media (max-width: 900px) { .store-content { padding: 5px 20px 40px; } /* Reduce top gap */ .store-middle-row { grid-template-columns: 1fr; gap: 20px; } .store-map-inner { padding-bottom: 60%; } .store-country-cards { display: grid; grid-template-columns: repeat(3,1fr); } } @media (max-width: 767px) { .store-main-section, html body .store-main-section { background: #000000 !important; background-color: #000000 !important; background-image: none !important; } .store-bg-video, html body .store-bg-video { display: none !important; visibility: hidden !important; opacity: 0 !important; } .store-top-row, html body .store-top-row { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 16px !important; margin-top: 0 !important; margin-bottom: 20px !important; width: 100% !important; text-align: center !important; } .store-title-block, html body .store-title-block { flex: none !important; text-align: center !important; } .store-badge, html body .store-badge { font-size: 0.7rem !important; padding: 4px 14px !important; margin-bottom: 8px !important; display: inline-block !important; letter-spacing: 0.1em !important; } .store-main-title, html body .store-main-title { font-size: 1.4rem !important; /* Slightly smaller to fit on one line */ line-height: 1.25 !important; margin: 0 !important; white-space: nowrap !important; /* Force one line */ } .store-total-block, html body .store-total-block { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; align-items: center !important; width: 100% !important; background: rgba(255, 255, 255, 0.05) !important; padding: 16px 20px !important; border-radius: 12px !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; margin-top: 10px !important; } .store-total-label, html body .store-total-label { grid-column: 1 / 2; grid-row: 1 / 2; font-size: 0.7rem !important; margin-bottom: 2px !important; color: rgba(255,255,255,0.6) !important; letter-spacing: 0.1em !important; text-align: left !important; } .store-total-number, html body .store-total-number { grid-column: 1 / 2; grid-row: 2 / 3; font-size: 2.8rem !important; line-height: 1 !important; color: #e63946 !important; font-weight: 900 !important; letter-spacing: -0.02em !important; text-align: left !important; } .store-total-number sup, html body .store-total-number sup { font-size: 0.35em !important; vertical-align: baseline !important; margin-left: 2px !important; } .store-total-split, html body .store-total-split { grid-column: 2 / 3; grid-row: 1 / 3; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-end !important; margin-top: 0 !important; gap: 8px !important; border-left: 1px solid rgba(255, 255, 255, 0.1) !important; padding-left: 20px !important; } .store-split-item, html body .store-split-item { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 4px !important; } .store-split-val, html body .store-split-val { font-size: 1.1rem !important; font-weight: 800 !important; color: #ffffff !important; } .store-split-label, html body .store-split-label { font-size: 0.75rem !important; color: rgba(255,255,255,0.7) !important; } .store-country-cards { grid-template-columns: repeat(2,1fr); } } /* Extracted from interview.html */ @media screen and (max-width: 768px) { .sw-subnav { border-bottom: none !important; } } /* Extracted from history.html */ .history-tab { white-space: nowrap; } @media (max-width: 768px) { .p-statement-section { padding: 15px 20px 50px; } .p-statement-heading { font-size: 1.6rem; } .p-statement-desc { font-size: 0.95rem; } .fungolf-pillars-section { padding-left: 20px !important; padding-right: 20px !important; } } .text-center { text-align: center !important; } @media (max-width: 768px) { .p-header-center h2 { font-size: 1.45rem !important; line-height: 1.35; margin-bottom: 8px !important; } .p-header-center p { font-size: 0.95rem !important; } .p-video-grid-2col { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .p-pill { font-size: 0.88rem !important; padding: 0.8rem 1.1rem !important; gap: 0.8rem !important; } } /* Tooltip flip for hotspots near right edge */ .hotspot-tooltip.tooltip-flip { left: auto !important; right: -15px !important; transform: translateX(0) translateY(4px) !important; } .hotspot:hover .hotspot-tooltip.tooltip-flip { transform: translateX(0) translateY(0) !important; } .hotspot-tooltip.tooltip-flip::after { left: auto !important; right: 20px !important; transform: translateX(0) !important; }