/* Home banner - shared PC / Mobile */ body { background: #fff; } .blinking { -webkit-animation: blink 0.5s ease-in-out infinite alternate; -moz-animation: blink 0.5s ease-in-out infinite alternate; animation: blink 0.5s ease-in-out infinite alternate; } @-webkit-keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: 0; } 100% { opacity: 1; } } .masz11, .asz11 { display: none !important; } /* Banner shell. PC uses legacy 45vw; mobile keeps fixed 554 (legacy mobile index). */ #main_visual.ga4_home_top_banner { width: 100%; position: relative; top: 0; margin-top: 0 !important; overflow: hidden; } /* Mobile default (also reinforced under #masz_main / max-width 768). */ #main_visual.ga4_home_top_banner .swiper-container--mvisual { width: 100%; height: 100% !important; } #main_visual.ga4_home_top_banner .swiper-wrapper, #main_visual.ga4_home_top_banner .swiper-slide { height: 100% !important; } #main_visual.ga4_home_top_banner .swiper-slide > a, #main_visual.ga4_home_top_banner .backgroundimg { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; } #main_visual.ga4_home_top_banner .backgroundimg .image, #main_visual.ga4_home_top_banner .backgroundimg .mp { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; padding-bottom: 0 !important; } #main_visual.ga4_home_top_banner .backgroundimg .image { background-position: center center; background-repeat: no-repeat; background-size: cover; } #main_visual.ga4_home_top_banner .backgroundimg video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover; } /* Server-rendered mobile markup also keeps the mobile design height. */ #masz_main #main_visual.ga4_home_top_banner { height: 554px; } #masz_main #main_visual.ga4_home_top_banner .backgroundimg .image { background-position: center center !important; } /* ========== PC ========== */ @media (min-width: 769px) { /* 让主视觉作为绝对定位的参照容器 */ #main_visual { position: relative; } /* PC banner: restore legacy index.php 45vw fluid height */ #asz_main #main_visual.ga4_home_top_banner, #main_visual.ga4_home_top_banner { height: auto; } #asz_main #main_visual.ga4_home_top_banner .swiper-container--mvisual, #main_visual.ga4_home_top_banner .swiper-container--mvisual { height: auto !important; } #asz_main #main_visual.ga4_home_top_banner .swiper-wrapper, #asz_main #main_visual.ga4_home_top_banner .swiper-slide, #main_visual.ga4_home_top_banner .swiper-wrapper, #main_visual.ga4_home_top_banner .swiper-slide { height: auto !important; } #asz_main #main_visual.ga4_home_top_banner .swiper-slide > a, #asz_main #main_visual.ga4_home_top_banner .backgroundimg, #main_visual.ga4_home_top_banner .swiper-slide > a, #main_visual.ga4_home_top_banner .backgroundimg { height: auto; } #asz_main #main_visual.ga4_home_top_banner .backgroundimg .image, #main_visual.ga4_home_top_banner .backgroundimg .image { position: relative !important; top: auto; left: auto; width: 100% !important; height: auto !important; padding-bottom: calc(45vw) !important; background-position: center center; background-repeat: no-repeat; background-size: cover; } #asz_main #main_visual.ga4_home_top_banner .backgroundimg .mp, #main_visual.ga4_home_top_banner .backgroundimg .mp { position: relative !important; top: auto; left: auto; width: 100% !important; height: calc(45vw) !important; padding-bottom: 0 !important; } #asz_main #main_visual.ga4_home_top_banner .backgroundimg video, #main_visual.ga4_home_top_banner .backgroundimg video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover; } /* 首页导航栏：默认透明，颜色跟随轮播 data-header-color */ #hd { z-index: 100; background: transparent !important; } /* 首页导航贴在 topbar 下方，具体 top 由公告条实测高度写入 */ #tnb { position: fixed; top: var(--announcement-height, 40px); left: 0; right: 0; width: 100%; height: 64px; min-height: 64px; z-index: 1000; background: transparent !important; background-color: transparent !important; transition: box-shadow .2s; } #tnb.scrolled, #tnb.hovering, #tnb:hover { background: rgba(255, 255, 255, 0.72) !important; background-color: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: none !important; } /* 技术菜单展开时与二三级统一磨砂（仅全宽 #tnb） */ #hd.is-tech-menu-open #tnb, #hd.is-tech-menu-open #tnb.hovering, #hd.is-tech-menu-open #tnb.scrolled { background: rgba(255, 255, 255, 0.72) !important; background-color: rgba(255, 255, 255, 0.72) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: none !important; } #hd.is-tech-menu-open #tnb #hd_wrapper, #hd.is-tech-menu-open #tnb.hovering #hd_wrapper, #hd.is-tech-menu-open #tnb.scrolled #hd_wrapper, #hd.is-tech-menu-open #tnb #hd_wrapper.is-black, #hd.is-tech-menu-open #tnb #hd_wrapper.is-white, #hd.is-tech-menu-open #tnb .inner { background: transparent !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; } #hd.is-tech-menu-open #tnb #hd_wrapper, #hd.is-tech-menu-open #tnb.hovering #hd_wrapper, #hd.is-tech-menu-open #tnb.scrolled #hd_wrapper, #hd.is-tech-menu-open #tnb #hd_wrapper.is-black, #hd.is-tech-menu-open #tnb #hd_wrapper.is-white { border-bottom: none !important; } #tnb.scrolled #hd_wrapper, #tnb.scrolled #hd_wrapper.is-black, #tnb.scrolled #hd_wrapper.is-white, #tnb.hovering #hd_wrapper, #tnb.hovering #hd_wrapper.is-black, #tnb.hovering #hd_wrapper.is-white, #tnb:hover #hd_wrapper, #tnb:hover #hd_wrapper.is-black, #tnb:hover #hd_wrapper.is-white { background: transparent !important; background-color: transparent !important; } #tnb.scrolled .asz_logo, #tnb.scrolled .is-black .asz_logo, #tnb.scrolled .is-white .asz_logo, #tnb.hovering .asz_logo, #tnb.hovering .is-black .asz_logo, #tnb.hovering .is-white .asz_logo, #tnb:hover .asz_logo, #tnb:hover .is-black .asz_logo, #tnb:hover .is-white .asz_logo { filter: brightness(0) !important; } #tnb.scrolled .gnb_1da, #tnb.scrolled .is-black .gnb_1da, #tnb.scrolled .is-white .gnb_1da, #tnb.hovering .gnb_1da, #tnb.hovering .is-black .gnb_1da, #tnb.hovering .is-white .gnb_1da { color: #0A0A0A !important; } #tnb .hd_navi #gnb_1dul > .gnb_1dli > a.gnb_1da:hover, #tnb .hd_navi #gnb_1dul > .gnb_1dli:hover > a.gnb_1da, #tnb.scrolled .hd_navi #gnb_1dul > .gnb_1dli > a.gnb_1da:hover, #tnb.hovering .hd_navi #gnb_1dul > .gnb_1dli > a.gnb_1da:hover, #hd_wrapper.is-black .hd_navi #gnb_1dul > .gnb_1dli > a.gnb_1da:hover, #hd_wrapper.is-white .hd_navi #gnb_1dul > .gnb_1dli > a.gnb_1da:hover { color: #FF6008 !important; opacity: 1 !important; } #tnb .hd_actions .shop_cart > a:hover .cart-icon, #tnb .hd_actions .shop_login > a:hover .mypage-icon, #tnb.scrolled .hd_actions .shop_cart > a:hover .cart-icon, #tnb.scrolled .hd_actions .shop_login > a:hover .mypage-icon, #tnb.hovering .hd_actions .shop_cart > a:hover .cart-icon, #tnb.hovering .hd_actions .shop_login > a:hover .mypage-icon { filter: invert(49%) sepia(79%) saturate(2476%) hue-rotate(346deg) brightness(103%) contrast(101%) !important; } #tnb.scrolled .hd_login > li a span, #tnb.scrolled .is-black .hd_login > li a span, #tnb.scrolled .is-white .hd_login > li a span, #tnb.hovering .hd_login > li a span, #tnb.hovering .is-black .hd_login > li a span, #tnb.hovering .is-white .hd_login > li a span { color: #0A0A0A !important; } #tnb.scrolled .mypage-icon, #tnb.scrolled .is-black .mypage-icon, #tnb.scrolled .is-white .mypage-icon, #tnb.hovering .mypage-icon, #tnb.hovering .is-black .mypage-icon, #tnb.hovering .is-white .mypage-icon { background-image: url("https://static.shokz.co.kr/resource/2026/08/14/user_6a7e6f661ed9b.png") !important; filter: none !important; } #tnb.scrolled .hd_search_link, #tnb.scrolled .is-black .hd_search_link, #tnb.scrolled .is-white .hd_search_link, #tnb.hovering .hd_search_link, #tnb.hovering .is-black .hd_search_link, #tnb.hovering .is-white .hd_search_link { color: #0A0A0A !important; } #tnb.scrolled #hd_wrapper .hd_actions .hd_btn_certified, #tnb.scrolled #hd_wrapper .hd_actions .hd_btn_support, #tnb.hovering #hd_wrapper .hd_actions .hd_btn_certified, #tnb.hovering #hd_wrapper .hd_actions .hd_btn_support, #tnb:hover #hd_wrapper .hd_actions .hd_btn_certified, #tnb:hover #hd_wrapper .hd_actions .hd_btn_support, #hd.is-tech-menu-open #tnb #hd_wrapper .hd_actions .hd_btn_certified, #hd.is-tech-menu-open #tnb #hd_wrapper .hd_actions .hd_btn_support { background: #0A0A0A; color: #fff !important; } #tnb.scrolled #hd_wrapper .hd_actions .hd_btn_certified:hover, #tnb.scrolled #hd_wrapper .hd_actions .hd_btn_support_wrap:hover .hd_btn_support, #tnb.scrolled #hd_wrapper .hd_actions .hd_btn_support_wrap.is-open .hd_btn_support, #tnb.hovering #hd_wrapper .hd_actions .hd_btn_certified:hover, #tnb.hovering #hd_wrapper .hd_actions .hd_btn_support_wrap:hover .hd_btn_support, #tnb.hovering #hd_wrapper .hd_actions .hd_btn_support_wrap.is-open .hd_btn_support, #tnb:hover #hd_wrapper .hd_actions .hd_btn_certified:hover, #tnb:hover #hd_wrapper .hd_actions .hd_btn_support_wrap:hover .hd_btn_support, #tnb:hover #hd_wrapper .hd_actions .hd_btn_support_wrap.is-open .hd_btn_support, #hd.is-tech-menu-open #tnb #hd_wrapper .hd_actions .hd_btn_certified:hover, #hd.is-tech-menu-open #tnb #hd_wrapper .hd_actions .hd_btn_support_wrap:hover .hd_btn_support, #hd.is-tech-menu-open #tnb #hd_wrapper .hd_actions .hd_btn_support_wrap.is-open .hd_btn_support { background: #FF6008; color: #fff !important; } #tnb.scrolled .hd_btn svg, #tnb.scrolled .is-black .hd_btn svg, #tnb.scrolled .is-white .hd_btn svg, #tnb.scrolled .hd_btn svg path, #tnb.scrolled .is-black .hd_btn svg path, #tnb.scrolled .is-white .hd_btn svg path, #tnb.hovering .hd_btn svg, #tnb.hovering .is-black .hd_btn svg, #tnb.hovering .is-white .hd_btn svg, #tnb.hovering .hd_btn svg path, #tnb.hovering .is-black .hd_btn svg path, #tnb.hovering .is-white .hd_btn svg path { fill: #0A0A0A !important; stroke: #0A0A0A !important; } /* 悬浮状态下拉菜单也保持黑字白底 */ #tnb.scrolled .gnb_2dul, #tnb.hovering .gnb_2dul { background: #ffffff !important; } #tnb.scrolled .gnb_2da, #tnb.hovering .gnb_2da { color: #000000 !important; } #tnb.scrolled .gnb_2da:hover, #tnb.hovering .gnb_2da:hover { color: #666666 !important; } #hd_wrapper { background: transparent !important; background-color: transparent !important; border-bottom: none !important; transition: none !important; } /* 亮色轮播背景 ms_header_color=1 → 黑字 */ #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white { background: transparent !important; background-color: transparent !important; border-bottom: none !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .gnb_1da { color: #0A0A0A !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .hd_login > li a span { color: #0A0A0A !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .cart-icon { background-image: url("https://static.shokz.co.kr/resource/2026/08/14/shopping--cart_6a7e74875f222.webp") !important; filter: none !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .mypage-icon { background-image: url("https://static.shokz.co.kr/resource/2026/08/14/user_6a7e6f661ed9b.png") !important; filter: none !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .hd_search_link { color: #0A0A0A !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .hd_actions .hd_btn_certified, #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .hd_actions .hd_btn_support { background: #0A0A0A; color: #fff !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .hd_btn svg, #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .hd_btn svg path { fill: #0A0A0A !important; stroke: #0A0A0A !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-white .asz_logo { filter: brightness(0) !important; } /* 深色轮播背景 ms_header_color=0 → 白字 */ #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black { background: transparent !important; background-color: transparent !important; border-bottom: none !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .gnb_1da { color: #FFFFFF !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .hd_login > li a span { color: #FFFFFF !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .cart-icon { background-image: url("https://static.shokz.co.kr/resource/2026/08/14/shopping--cart_6a7e74875f222.webp") !important; filter: brightness(0) invert(1) !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .mypage-icon { background-image: url("https://static.shokz.co.kr/resource/2026/08/14/user_6a7e6f661ed9b.png") !important; filter: brightness(0) invert(1) !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .hd_search_link { color: #FFFFFF !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .hd_actions .hd_btn_certified, #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .hd_actions .hd_btn_support { background: #FFFFFF; color: #0A0A0A !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .hd_btn svg, #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .hd_btn svg path { fill: #FFFFFF !important; stroke: #FFFFFF !important; } #tnb:not(.scrolled):not(.hovering):not(:hover) #hd_wrapper.is-black .asz_logo { filter: brightness(0) invert(1) !important; } /* 覆盖下拉菜单的固定 top 值，由 JavaScript 动态控制（客户支持菜单除外） */ .gnb_2dul:not(.hd_support_gnb_2dul) { top: 0; /* 初始化为 0，由 JavaScript 动态设置 */ } /* 下拉菜单始终保持黑字白底 - 不受轮播图颜色影响 */ #hd_wrapper .gnb_2dul, #hd_wrapper.is-black .gnb_2dul, #hd_wrapper.is-white .gnb_2dul { background: #ffffff !important; } #hd_wrapper .gnb_2da, #hd_wrapper.is-black .gnb_2da, #hd_wrapper.is-white .gnb_2da { color: #000000 !important; } #hd_wrapper .gnb_2da:hover, #hd_wrapper.is-black .gnb_2da:hover, #hd_wrapper.is-white .gnb_2da:hover { color: #666666 !important; } /* 让wrapper从顶部开始显示 */ #wrapper { padding-top: 0 !important; margin-top: 0 !important; } /* 固定导航栏下方留出高度 */ #asz_main { margin-top: 0 !important; padding-top: 0; } /* 隐藏分页器 */ .mslide .swiper-pagination { display: none !important; } /* 隐藏Swiper默认的箭头伪元素 */ .mslide .swiper-button-prev::after, .mslide .swiper-button-next::after { content: '' !important; display: none !important; } /* 左右按钮容器 - 右下角定位（参考产品区样式） */ .mslide .swiper-button-prev, .mslide .swiper-button-next { position: absolute; bottom: 30px; /* 距离底部30px */ top: auto; left: auto; right: auto; width: 48px; /* 比产品区稍大一点 */ height: 48px; border-radius: 50%; background: #fff; background-image: none; display: flex; align-items: center; justify-content: center; margin: 0; opacity: 1; cursor: pointer; z-index: 10; transition: all 0.3s ease; } /* 上一张按钮 - 在右下角左侧 */ .mslide .swiper-button-prev { right: 84px; /* 距离右边84px（48px按钮 + 20px间距 + 16px留白） */ } /* 下一张按钮 - 紧贴右下角 */ .mslide .swiper-button-next { right: 20px; /* 距离右边20px */ } /* 鼠标悬停效果 - 背景变深 */ .mslide .swiper-button-prev:hover, .mslide .swiper-button-next:hover { background: rgba(209, 213, 219, 0.95); /* 悬停时颜色变深 */ } /* SVG箭头图标样式 */ .mslide .swiper-button-prev svg, .mslide .swiper-button-next svg { width: 28.8px; height: 28.8px; } .mslide .swiper-button-next svg path { fill: #000000; } .mslide .swiper-button-prev svg path { fill: #000000; } /* 居中包裹容器：将左右按钮限制在页面正中且最大宽度1200px */ #main_visual .mvisual-controls{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 48px; width: calc(100% - 240px); max-width: 1200px; display: flex; align-items: center; justify-content: flex-end; /* 两个按钮都靠右展示 */ gap: 24px; padding: 0; z-index: 15; pointer-events: none; /* 让内部按钮接管事件 */ } #main_visual .mvisual-controls .swiper-button-prev, #main_visual .mvisual-controls .swiper-button-next{ position: static !important; /* 使用flex定位，覆盖绝对定位 */ bottom: auto !important; right: auto !important; left: auto !important; pointer-events: auto; /* 恢复点击 */ } } /* ========== Mobile ========== */ @media (max-width: 768px) { /* 首页顶部轮播区域：未滚动时透明，滚动后磨砂 */ #hd_wr:not(.scrolled) { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; } body #container.fixed { padding-top: 0 !important; } #main_visual.ga4_home_top_banner { height: 554px; } .swiper-container--mvisual { width: 100%; height: 100% !important; will-change: transform; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } .swiper-container--mvisual .swiper-wrapper { height: 100% !important; } .swiper-container--mvisual .swiper-slide { width: 100%; height: 100% !important; flex-shrink: 0; position: relative; } .swiper-container--mvisual .backgroundimg { width: 100%; height: 100%; position: relative; overflow: hidden; } #main_visual .backgroundimg .image { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; padding-bottom: 0 !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; } #main_visual .backgroundimg .mp { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; } #main_visual .backgroundimg .mp video { width: 100%; height: 100%; object-fit: cover; } .mmslide .swiper-button-prev, .mmslide .swiper-button-next { display: none !important; } .mmslide .swiper-pagination { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: auto; display: flex; align-items: center; gap: 8px; z-index: 10; } .mmslide .swiper-pagination .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.4); opacity: 1; margin: 0; width: 6px; height: 6px; border-radius: 6px; transition: all 0.3s ease; cursor: pointer; } .mmslide .swiper-pagination .swiper-pagination-bullet-active { background: rgba(255, 255, 255, 0.75); width: 36px; } } /* ========== Home Best (베스트 제품) ========== */ .sn-home-best { word-break: keep-all; width: 100%; padding: 0 96px; box-sizing: border-box; background: #ffffff; position: relative; z-index: 10; } /* PC：与 sn-product 一致——内容区固定 1200，1920/1440/1280 视觉一致，仅两侧留白变化；不改 MO / Swiper */ .sn-home-best:not(.is-mobile) { overflow-x: hidden; /* 原 96px 在 1280 下会挤掉 1200 内容区导致裁切；改为 16px 保证 ≥1280 完整显示 */ padding: 0 16px; } .sn-home-best > .sn-body { max-width: 1200px; margin: 0 auto; padding: 96px 0 0; overflow: visible; } .sn-home-best:not(.is-mobile) > .sn-body { min-width: 1200px; width: 1200px; } .sn-home-best-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .sn-home-best-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 40px; line-height: 52px; letter-spacing: 0.16px; font-weight: 600; color: #000; margin: 0; } .sn-home-best-nav { display: flex; flex-wrap: wrap; gap: 10px; width: auto; overflow: visible; margin: 0; position: relative; } .sn-home-best-tab { margin: 0; padding: 12px 25px; border-radius: 4px; background: #f1f1f1; color: #000; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H6--size, 15px); font-style: normal; font-weight: var(--text-M-H6--weight, 500); line-height: var(--text-M-H6--line-height, 22px); /* 146.667% */ letter-spacing: var(--text-M-H6--letter-spacing, 0); cursor: pointer; white-space: nowrap; user-select: none; } .sn-home-best-tab.is-on { background: #ff6008; color: #fff; } .sn-home-best-swiper { overflow: hidden; width: 100%; } .sn-home-best-swiper .swiper-wrapper { display: flex; align-items: stretch; height: auto !important; } .sn-home-best-swiper .swiper-slide { flex-shrink: 0; box-sizing: border-box; } .sn-home-best:not(.is-mobile) .sn-home-best-swiper .swiper-slide { width: calc((100% - 48px) / 3); margin-right: 24px; } .sn-home-best:not(.is-mobile) .sn-home-best-swiper.swiper-container-initialized .swiper-slide { margin-right: 0; } .sn-home-best-card { width: 100%; height: 500px; margin: 0; border: 0; border-radius: 12px; overflow: hidden; background: #ddd; box-shadow: none; position: relative; cursor: pointer; transform: none; } /* PC：切 Tab 请求中骨架占位，撑住 500px 高度 */ .sn-home-best:not(.is-mobile) .sn-home-best-card--skeleton { cursor: default; pointer-events: none; background: #e8e8e8; } .sn-home-best:not(.is-mobile) .sn-home-best-skeleton-shine { position: absolute; inset: 0; background: linear-gradient(90deg, #e8e8e8 0%, #f4f4f4 45%, #e8e8e8 90%); background-size: 200% 100%; animation: sn-home-best-skeleton-shine 1.2s ease-in-out infinite; } @keyframes sn-home-best-skeleton-shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .sn-home-best:not(.is-mobile) .sn-home-best-swiper { position: relative; } .sn-home-best-loading { display: none; } .sn-home-best:not(.is-mobile).is-loading .sn-home-best-loading, .sn-home-best:not(.is-mobile) .sn-home-best-loading:not([hidden]) { display: flex; position: absolute; left: 0; right: 0; top: 0; height: 500px; z-index: 5; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.55); pointer-events: none; } .sn-home-best-loading-spin { width: 22px; height: 22px; border: 2px solid #cfcfcf; border-top-color: #ff6008; border-radius: 50%; animation: sn-home-best-spin 0.8s linear infinite; } .sn-home-best-loading-text { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 14px; line-height: 20px; color: #666; } @keyframes sn-home-best-spin { to { transform: rotate(360deg); } } .sn-home-best.is-mobile .sn-home-best-loading { display: none !important; } .sn-home-best-scene { position: absolute; inset: 0; background: #ddd; } .sn-home-best-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 44.3%, rgba(0,0,0,0.5) 100%); z-index: 1; pointer-events: none; } .sn-home-best-scene-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sn-home-best-scene-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 20px 20px; color: #fff; pointer-events: none; } .sn-home-best-scene-name { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H4--size, 19px); font-style: normal; font-weight: var(--text-M-H4--weight, 600); line-height: var(--text-M-H4--line-height, 26px); /* 136.842% */ letter-spacing: var(--text-M-H4--letter-spacing, 0); text-shadow: 0 1px 8px rgba(0,0,0,.35); } .sn-home-best-chip { width: 60px; height: 60px; border-radius: 8px; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.12); flex-shrink: 0; } .sn-home-best-chip img { width: 80%; height: 80%; object-fit: contain; } .sn-home-best-hover { position: absolute; inset: 0; z-index: 4; background: #F1F1F1; color: #111; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .28s ease; border-radius: inherit; } .sn-home-best-card:hover .sn-home-best-hover, .sn-home-best-card:focus-visible .sn-home-best-hover, .sn-home-best-card.is-hover .sn-home-best-hover { opacity: 1; pointer-events: auto; } .sn-home-best-hover-img { width: 300px; height: 300px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .sn-home-best-hover-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .sn-home-best-hover-copy { flex: 1; padding: 20px; display: flex; flex-direction: column; text-align: left; } .sn-home-best-hover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .sn-home-best-hover-copy h3 { font-size:19px; font-weight: 600; margin: 0; line-height: 26px; } .sn-home-best-desc { color: #000; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H6--size, 15px); font-style: normal; font-weight: var(--text-M-H6--weight, 500); line-height: var(--text-M-H6--line-height, 22px); letter-spacing: var(--text-M-H6--letter-spacing, 0); margin: 8px 0 12px; } .sn-home-best-rate { display: inline-flex; align-items: center; gap: 4px; font-family: "Albert Sans", sans-serif; font-size: 14px; font-weight: 400; line-height: 1; color: rgba(0, 0, 0, 0.40); letter-spacing: -0.28px; white-space: nowrap; } .sn-home-best-rate-icon { display: inline-block; width: 13px; height: 13px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13' fill='none'%3E%3Cpath d='M6.49992 10.741L3.04262 12.9336C2.94103 12.9863 2.84674 13.0076 2.75975 12.9976C2.6734 12.9869 2.58927 12.9556 2.50736 12.9036C2.42482 12.8502 2.36259 12.7749 2.32068 12.6775C2.27878 12.5802 2.27497 12.4738 2.30926 12.3584L3.2293 8.24729L0.186303 5.47652C0.100585 5.40317 0.0440745 5.31547 0.0167717 5.21345C-0.0105311 5.11142 -0.00449904 5.01372 0.0348678 4.92037C0.0742346 4.82701 0.126618 4.75032 0.192018 4.6903C0.258052 4.63229 0.346945 4.59294 0.458696 4.57227L4.47411 4.20417L6.0399 0.311087C6.08308 0.201056 6.1453 0.1217 6.22657 0.0730202C6.30785 0.02434 6.39896 0 6.49992 0C6.60088 0 6.69231 0.02434 6.77422 0.0730202C6.85613 0.1217 6.91803 0.201056 6.95994 0.311087L8.52572 4.20417L12.5402 4.57227C12.6526 4.59227 12.7418 4.63195 12.8078 4.6913C12.8739 4.74998 12.9266 4.82634 12.9659 4.92037C13.0047 5.01372 13.0104 5.11142 12.9831 5.21345C12.9558 5.31547 12.8993 5.40317 12.8135 5.47652L9.77054 8.24729L10.6906 12.3584C10.7261 12.4725 10.7226 12.5785 10.6801 12.6765C10.6376 12.7745 10.575 12.8499 10.4925 12.9026C10.4112 12.9559 10.3271 12.9876 10.2401 12.9976C10.1537 13.0076 10.0598 12.9863 9.95817 12.9336L6.49992 10.741Z' fill='%23FF4D0A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .sn-home-best-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .sn-home-best-off { color: #ff6008; font-weight: 600; font-size: 20px; } .sn-home-best-sale { font-size: 20px; color: #000; font-family: Pretendard; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.4px; } .sn-home-best-origin { font-size: 17px; color: rgba(0,0,0,0.4); text-decoration: line-through; } .sn-home-best-price-pending { color: #8a8a8a; font-size: 13px; margin: 0 0 12px; } .sn-home-best-buy { margin-top: auto; height: 44px; border-radius: 8px; background: #fff; color: #000; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: 0; display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; transition: background 0.2s ease, color 0.2s ease; } .sn-home-best-buy:hover { background: #000; color: #fff; } .sn-home-best-operate { margin-top: 18px; height: 48px; display: none; align-items: center; justify-content: space-between; } .sn-home-best-operate.is-show { display: flex; } .sn-home-best .swiper-pagination { position: relative; width: auto; bottom: auto; left: auto; display: flex; align-items: center; } .sn-home-best .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 10px; background: #8d8d8d; opacity: .4; margin: 0 16px 0 0; } .sn-home-best .swiper-pagination-bullet-active { width: 36px; background: #2f2f2f; opacity: 1; } .sn-home-best-arrows { display: flex; align-items: center; gap: 24px; } .sn-home-best .swiper-button-next, .sn-home-best .swiper-button-prev { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 0; width: 48px; height: 48px; border-radius: 9999px; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; } .sn-home-best .swiper-button-next:after, .sn-home-best .swiper-button-prev:after { display: none; } .sn-home-best .swiper-button-next svg, .sn-home-best .swiper-button-prev svg { width: 28px; height: 28px; display: block; } /* PC：不足一页时箭头可见但不可点（Swiper 会加 swiper-button-disabled） */ .sn-home-best:not(.is-mobile) .swiper-button-next.swiper-button-disabled, .sn-home-best:not(.is-mobile) .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; } .sn-home-best-scrollbar { display: none; } .sn-home-best-card--mo { width: 100%; height: 100%; min-height: 0; background: #f2f2f2; border-radius: 12px; box-shadow: none; padding: 16px; display: flex; flex-direction: column; text-align: left; box-sizing: border-box; overflow: hidden; } .sn-home-best-mo-img { width: 100%; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #f4f4f4; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sn-home-best-mo-img img { width: 100%; height: 100%; object-fit: contain; } .sn-home-best-mo-img--scene img { width: 100%; height: 100%; object-fit: cover; } .sn-home-best-mo-body { display: flex; flex-direction: column; flex: 1; min-height: 0; } .sn-home-best-mo-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H4--size, 19px); font-style: normal; font-weight: var(--text-M-H4--weight, 600); line-height: var(--text-M-H4--line-height, 26px); /* 136.842% */ letter-spacing: var(--text-M-H4--letter-spacing, 0); margin: 0; color: #111; } .sn-home-best-mo-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; } .sn-home-best-mo-copy-main { min-width: 0; flex: 1; } .sn-home-best-card--mo .sn-home-best-desc { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H6--size, 15px); font-style: normal; font-weight: var(--text-M-H6--weight, 500); line-height: var(--text-M-H6--line-height, 22px); /* 146.667% */ letter-spacing: var(--text-M-H6--letter-spacing, 0); color: #000; margin: 0; } .sn-home-best-card--mo .sn-home-best-rate { margin: 0; padding-bottom: 2px; align-self: flex-end; flex-shrink: 0; } .sn-home-best-card--mo .sn-home-best-price-row, .sn-home-best-card--mo .sn-home-best-price-pending { margin: 8px 0 0; } .sn-home-best-card--mo .sn-home-best-sale { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H5--size, 17px); font-style: normal; font-weight: var(--text-M-H5--weight, 500); line-height: var(--text-M-H5--line-height, 23px); letter-spacing: var(--text-M-H5--letter-spacing, 0); } .sn-home-best-card--mo .sn-home-best-off { font-size: 17px; } .sn-home-best-card--mo .sn-home-best-buy { margin-top: 12px; height: 44px; border-radius: 10px; background: #fff; color: #111; } .sn-home-best-card--mo .sn-home-best-hover { display: none; } .sn-section.sn-home-best.is-mobile { padding: 0; overflow: hidden; } .sn-section.sn-home-best.is-mobile > .sn-body { padding: 56px 0 48px; overflow: hidden; } .sn-home-best.is-mobile .sn-home-best-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; padding: 0 16px; overflow: visible; /* ← 不能 hidden，否则裁掉 tab 横滚 */ box-sizing: border-box; } .sn-home-best.is-mobile .sn-home-best-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H2--size, 27px); font-style: normal; font-weight: var(--text-M-H2--weight, 600); line-height: var(--text-M-H2--line-height, 35px); /* 129.63% */ letter-spacing: var(--text-M-H2--letter-spacing, 0); } .sn-home-best.is-mobile .sn-home-best-nav { display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 100%; gap: 10px; overflow-x: hidden; padding: 0; box-sizing: border-box; } .sn-home-best.is-mobile .sn-home-best-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 4px; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 13px); line-height: 24px; letter-spacing: var(--text-body-letter-spacing, -0.6px); white-space: nowrap; box-sizing: border-box; } /* ≤360：适当缩小，保证 4 tab 一排完整显示、无裁切 */ @media (max-width: 360px) { .sn-home-best.is-mobile .sn-home-best-nav { gap: 6px; } .sn-home-best.is-mobile .sn-home-best-tab { font-size: 12px; letter-spacing: -0.8px; } } .sn-home-best.is-mobile .sn-home-best-list { overflow: hidden; } .sn-home-best.is-mobile .sn-home-best-swiper { overflow: hidden; } .sn-home-best.is-mobile .sn-home-best-swiper .swiper-slide { width: 78%; height: auto; } .sn-home-best.is-mobile .sn-home-best-card { height: 100%; min-height: 0; background: #f2f2f2; } .sn-home-best.is-mobile .sn-home-best-operate { margin-top: 16px; height: auto; min-height: 20px; padding-right: 16px; gap: 8px; } .sn-home-best.is-mobile .sn-home-best-operate.is-show { display: flex; align-items: center; } .sn-home-best.is-mobile .swiper-pagination { display: none; } .sn-home-best.is-mobile .sn-home-best-arrows { display: contents; } .sn-home-best.is-mobile .swiper-button-prev { order: 1; } .sn-home-best.is-mobile .swiper-button-next { order: 3; } .sn-home-best.is-mobile .swiper-button-next, .sn-home-best.is-mobile .swiper-button-prev { width: 20px; height: 20px; border-radius: 0; background: transparent; box-shadow: none; flex-shrink: 0; } .sn-home-best.is-mobile .swiper-button-next svg, .sn-home-best.is-mobile .swiper-button-prev svg { width: 16px; height: 16px; } .sn-home-best.is-mobile .sn-home-best-scrollbar { display: none; } .sn-home-best.is-mobile .sn-home-best-operate, .sn-home-best.is-mobile .sn-home-best-operate.is-show { display: none !important; } .sn-home-best.is-mobile .sn-home-best-scrollbar-thumb { position: absolute; left: 0; top: 0; height: 100%; width: 32%; background: #8d8d8d; border-radius: 99px; } .sn-home-best.is-mobile .sn-home-best-rate-icon { width: 15px; height: 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M7.49991 12.3934L3.51072 14.9234C3.3935 14.9842 3.2847 15.0088 3.18433 14.9972C3.08469 14.9849 2.98762 14.9488 2.89311 14.8887C2.79787 14.8272 2.72607 14.7402 2.67771 14.6279C2.62936 14.5156 2.62496 14.3928 2.66453 14.2597L3.72611 9.5161L0.214965 6.31906C0.11606 6.23442 0.0508552 6.13324 0.019352 6.01552C-0.0121513 5.89779 -0.0051912 5.78507 0.0402321 5.67734C0.0856554 5.56962 0.146098 5.48114 0.221559 5.41189C0.297753 5.34494 0.400322 5.29955 0.529265 5.27569L5.16244 4.85096L6.96911 0.358946C7.01893 0.231988 7.09073 0.140424 7.18451 0.0842541C7.27829 0.0280847 7.38342 0 7.49991 0C7.6164 0 7.7219 0.0280847 7.81641 0.0842541C7.91091 0.140424 7.98235 0.231988 8.0307 0.358946L9.83737 4.85096L14.4694 5.27569C14.5991 5.29878 14.7021 5.34456 14.7783 5.41304C14.8544 5.48075 14.9153 5.56885 14.9607 5.67734C15.0054 5.78507 15.012 5.89779 14.9805 6.01552C14.949 6.13324 14.8838 6.23442 14.7848 6.31906L11.2737 9.5161L12.3353 14.2597C12.3763 14.3913 12.3723 14.5136 12.3232 14.6267C12.2741 14.7399 12.2019 14.8268 12.1067 14.8876C12.0129 14.9491 11.9159 14.9857 11.8155 14.9972C11.7158 15.0088 11.6074 14.9842 11.4902 14.9234L7.49991 12.3934Z' fill='%23FF4D0A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .sn-home-best.is-mobile .sn-home-best-rate { font-family: "Albert Sans"; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: -0.28px; color: rgba(0, 0, 0, 0.40); } .sn-home-best.is-mobile .sn-home-best-rate-value { transform: translateY(-2px); } .sn-home-best.is-mobile .sn-home-best-buy { color: #050505; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 17px; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; } @media (prefers-reduced-motion: reduce) { .sn-home-best-hover { transition: none; } .sn-home-best .swiper-pagination-bullet { transition: none; } } /* ========== Home Must have ========== */ .sn-home-must { word-break: keep-all; width: 100%; padding: 0 96px; box-sizing: border-box; background: #ffffff !important; position: relative; z-index: 10; color: #111; } /* PC：与 sn-product / sn-home-best 一致——内容区固定 1200，1920/1440/1280 视觉一致；不改 MO / Swiper */ .sn-home-must:not(.is-mobile) { overflow-x: hidden; /* 原 96px 在 1280 下会挤掉 1200 内容区导致裁切；改为 16px 保证 ≥1280 完整显示 */ padding: 0 16px; } .sn-home-must > .sn-body { max-width: 1200px; margin: 0 auto; padding: 48px 0 0; overflow: visible; } .sn-home-must:not(.is-mobile) > .sn-body { min-width: 1200px; width: 1200px; } .sn-home-must-head { display: block; margin-bottom: 24px; } .sn-home-must-title { width: 100%; text-align: center; font-family: "Albert Sans"; font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: 0; color: #000; margin: 0; } .sn-home-must-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; height: calc(var(--must-card-h, 500px) + var(--must-peek, 56px)); } .sn-home-must-nav { display: flex; flex-wrap: nowrap; gap: 10px; } .sn-home-must-tab { margin: 0; padding: 12px 25px; border-radius: 4px; background: #f1f1f1; color: #000; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H6--size, 15px); font-style: normal; font-weight: var(--text-M-H6--weight, 500); line-height: var(--text-M-H6--line-height, 22px); letter-spacing: var(--text-M-H6--letter-spacing, 0); cursor: pointer; white-space: nowrap; user-select: none; } .sn-home-must-tab.is-on { background: #ff6008; color: #fff; } .sn-home-must-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 36px; align-items: stretch; } .sn-home-must:not(.is-mobile) .sn-home-must-grid { grid-template-columns: 587px minmax(0, 1fr); } .sn-home-must-visual { --must-peek: 48px; --must-card-h: 530px; position: relative; height: calc(var(--must-card-h) + var(--must-peek)); min-height: calc(var(--must-card-h) + var(--must-peek)); overflow: visible; } /* PC：动效期间裁切越界位移，避免整页被撑高导致滚动条闪现、页面左右抖动 */ .sn-home-must:not(.is-mobile) .sn-home-must-visual.is-animating { overflow: hidden; } /* PC：单卡/空态也保持 peek 高度，切 Tab 时不缩 48px */ .sn-home-must:not(.is-mobile) .sn-home-must-visual.is-single { height: calc(var(--must-card-h) + var(--must-peek)); min-height: calc(var(--must-card-h) + var(--must-peek)); } .sn-home-must-visual.is-single { height: var(--must-card-h); min-height: var(--must-card-h); } .sn-home-must:not(.is-mobile) .sn-home-must-layer--skeleton { cursor: default; pointer-events: none; background: #e8e8e8; } .sn-home-must:not(.is-mobile) .sn-home-must-layer--skeleton::before { display: none; } .sn-home-must:not(.is-mobile) .sn-home-must-row--skeleton { pointer-events: none; padding: 18px 0; } .sn-home-must:not(.is-mobile) .sn-home-must-skeleton-line { display: block; height: 22px; width: 42%; border-radius: 4px; background: linear-gradient(90deg, #ececec 0%, #f5f5f5 45%, #ececec 90%); background-size: 200% 100%; animation: sn-home-best-skeleton-shine 1.2s ease-in-out infinite; } .sn-home-must-layer { position: absolute; left: 0; right: 0; width: 100%; height: var(--must-card-h); padding: 0; border: 0; display: block; text-align: left; border-radius: 28px; overflow: hidden; background: linear-gradient(165deg, var(--ph-a, #d7dee4), var(--ph-b, #8a9aa8)); background-size: cover; background-position: center; transform-origin: top center; will-change: transform, opacity, top, filter; cursor: pointer; } .sn-home-must-layer.has-scene { background-color: #d7dee4; } .sn-home-must-layer::before { content: ""; position: absolute; left: 50%; top: 42%; width: 140px; height: 78px; transform: translate(-50%, -50%); border: 6px solid rgba(255, 255, 255, 0.9); border-bottom-color: transparent; border-radius: 70px 70px 10px 10px; pointer-events: none; } .sn-home-must-layer.has-scene::before { display: none; } .sn-home-must-layer.tone-sport { --ph-a: #c5d0d8; --ph-b: #6b7c8c; } .sn-home-must-layer.tone-pro2 { --ph-a: #c5d0d8; --ph-b: #6b7c8c; } .sn-home-must-layer.tone-swim { --ph-a: #cfe8ea; --ph-b: #4f8f9a; } .sn-home-must-layer.tone-run { --ph-a: #d2d8e0; --ph-b: #7a8798; } .sn-home-must-layer.tone-move { --ph-a: #d8dee6; --ph-b: #6d7c90; } .sn-home-must-layer.tone-dots { --ph-a: #f1dfd0; --ph-b: #c49a7a; } .sn-home-must-layer.tone-fit { --ph-a: #efe6d6; --ph-b: #b9a07c; } .sn-home-must-layer.tone-comm { --ph-a: #e7d4ea; --ph-b: #8f6d9e; } .sn-home-must-layer.tone-neutral { --ph-a: #d7dee4; --ph-b: #8a9aa8; } .sn-home-must-chip { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 54px; height: 54px; background: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); display: grid; place-items: center; overflow: hidden; pointer-events: none; } .sn-home-must-chip img { width: 100%; height: 100%; object-fit: contain; } .sn-home-must-layer.is-back { top: 0; z-index: 1; transform: scale(0.92); filter: brightness(0.78) saturate(0.85); box-shadow: none; } .sn-home-must-layer.is-front { top: var(--must-peek); z-index: 2; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2); } .sn-home-must-visual.is-single .sn-home-must-layer.is-front { top: 0; } .sn-home-must-visual.is-push-fwd .sn-home-must-layer.is-front { animation: snMustFrontOut 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .sn-home-must-visual.is-push-fwd .sn-home-must-layer.is-back { animation: snMustBackDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .sn-home-must-visual.is-push-back .sn-home-must-layer.is-front { animation: snMustFrontToPeek 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .sn-home-must-visual.is-push-back .sn-home-must-layer.is-back { animation: snMustBackRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes snMustFrontOut { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(36%) scale(0.9); opacity: 0; } } @keyframes snMustBackDown { 0% { top: 0; transform: scale(0.92); filter: brightness(0.78); box-shadow: none; } 100% { top: var(--must-peek); transform: scale(1); filter: none; z-index: 4; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2); } } @keyframes snMustFrontToPeek { 0% { top: var(--must-peek); transform: scale(1); filter: none; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2); } 100% { top: 0; transform: scale(0.92); filter: brightness(0.78); z-index: 1; box-shadow: none; } } @keyframes snMustBackRise { 0% { top: calc(var(--must-peek) + 72px); transform: scale(0.94); opacity: 0.35; z-index: 4; } 100% { top: var(--must-peek); transform: scale(1); opacity: 1; z-index: 4; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2); } } .sn-home-must-list-wrap { /* display: grid; grid-template-columns: 1fr 3px; gap: 18px; align-items: stretch; min-height: 520px; */ display: grid; grid-template-columns: 1fr 3px; gap: 18px; align-items: stretch; flex: 1; /* 占满 right 剩余高度 */ min-height: 0; /* 关键：允许 flex 子项收缩 */ overflow: hidden; /* 隐藏外层溢出 */ } .sn-home-must-list { display: flex; flex-direction: column; width: 100%; min-width: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .sn-home-must-list::-webkit-scrollbar { display: none; width: 0; height: 0; } .sn-home-must-rail { position: relative; width: 3px; background: #e8e8e8; border-radius: 99px; align-self: stretch; } .sn-home-must-rail i { position: absolute; left: 0; right: 0; top: 0; height: 20%; background: #b0b0b0; border-radius: 99px; transition: top 0.15s ease, height 0.15s ease; } .sn-home-must-row { display: flex; flex-direction: column; width: 100%; border-bottom: 1px solid #ececec; } .sn-home-must-row.is-on { border-bottom: none; } .sn-home-must-row:last-child { border-bottom-color: transparent; box-shadow: none; } .sn-home-must-item { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 16px 8px; font-family: "Albert Sans"; font-size: 40px; font-weight: 600; color: #E0E0E0; line-height: 52px; letter-spacing: 0; cursor: pointer; } .sn-home-must-row.is-on .sn-home-must-item { color: #000; padding-bottom: 10px; } .sn-home-must-detail { display: none; margin: 0 8px 0; padding: 30px; background: #F1F1F1; border-radius: 8px; cursor: pointer; } .sn-home-must-row.is-on .sn-home-must-detail { display: block; } .sn-home-must-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sn-home-must-desc { font-family: var(--Shokz-Sans-Display, Pretendard); color: #000; margin: 0; flex: 1; font-size: 17px; font-weight: 500; line-height: 23px; letter-spacing: 0; } .sn-home-must-rate { margin-left: 0; flex: none; white-space: nowrap; color: rgba(0, 0, 0, 0.40); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; display: inline-flex; align-items: center; gap: 4px; } .sn-home-must-rate-value { color: inherit; } .sn-home-must-rate-icon { width: 12px; height: 12px; flex-shrink: 0; display: block; position: relative; top: -1px; } .sn-home-must-price-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sn-home-must-off { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 19px; font-weight: 600; line-height: 26px; letter-spacing: 0; color: #ff6008; } .sn-home-must-sale { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 19px; font-weight: 500; line-height: 26px; letter-spacing: 0; color: #000; } .sn-home-must-origin { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 17px; font-weight: 500; line-height: 23px; letter-spacing: 0; color: #000; opacity: 0.4; text-decoration: line-through; } .sn-home-must-price-pending { color: #888; font-size: 14px; margin: 0; } .sn-home-must-buy { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border: 0; border-radius: 8px; background: #111; color: var(--font-icon-white, #FFF); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-utility-size, 13px); font-weight: var(--text-utility-weight, 400); line-height: var(--text-utility-line-height, 21px); letter-spacing: var(--text-utility-letter-spacing, -0.52px); pointer-events: auto; /* CTA 独立接收 hover/click，点击仍冒泡到原有商品跳转逻辑。 */ } .sn-home-must-mo-row { display: none; } /* Must have — Mobile */ .sn-section.sn-home-must.is-mobile { padding: 0 16px; } .sn-section.sn-home-must.is-mobile > .sn-body { padding: 40px 0 48px; } /* Must have — Mobile */ .sn-section.sn-home-must.is-mobile { padding: 0 16px; } .sn-section.sn-home-must.is-mobile > .sn-body { padding: 40px 0 64px; } /* ↓↓↓ 新增：MO 外壳 + tab 横滑 ↓↓↓ */ .sn-home-must.is-mobile .sn-home-must-mo-wrap { width: 100%; } .sn-home-must.is-mobile .sn-home-must-mo-tabs { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; width: 100%; gap: 10px; overflow-x: hidden; margin-bottom: 16px; padding: 0; box-sizing: border-box; } .sn-home-must.is-mobile .sn-home-must-tab { flex: 0 0 auto; padding: 8px 16px; border-radius: 4px; font-size: 13px; line-height: 24px; letter-spacing: -0.6px; margin-right: 0; text-align: center; white-space: nowrap; box-sizing: border-box; } @media (max-width: 360px) { .sn-home-must.is-mobile .sn-home-must-mo-tabs { gap: 6px; } .sn-home-must.is-mobile .sn-home-must-tab { font-size: 12px; letter-spacing: -0.8px; } } .sn-home-must.is-mobile .sn-home-must-tab:last-child { margin-right: 0; } .sn-home-must.is-mobile .sn-home-must-head { flex-direction: column; align-items: flex-start; gap: 12px; } .sn-home-must.is-mobile .sn-home-must-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 34px; line-height: 44px; font-weight: 600; letter-spacing: 0; color: #000; text-align: center; } .sn-home-must.is-mobile .sn-home-must-grid { display: block; } .sn-home-must.is-mobile .sn-home-must-visual, .sn-home-must.is-mobile .sn-home-must-list-wrap { display: none !important; } .sn-home-must.is-mobile .sn-home-must-mo-row { display: flex; gap: 12px; overflow: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .sn-home-must.is-mobile .sn-home-must-mo-row::-webkit-scrollbar { display: none; } .sn-home-must-mo-card { position: relative; flex: 0 0 86%; min-width: 86%; scroll-snap-align: start; scroll-snap-stop: always; min-height: 420px; border-radius: 24px; overflow: hidden; color: #fff; text-align: left; border: 0; padding: 0; background: linear-gradient(165deg, var(--ph-a, #d7dee4), var(--ph-b, #8a9aa8)); background-size: cover; background-position: center; cursor: pointer; } .sn-home-must.is-mobile .sn-home-must-mo-info .sn-home-must-sale { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; color: #FFF; } .sn-home-must.is-mobile .sn-home-must-mo-info .sn-home-must-origin { color: rgba(255, 255, 255, 0.55); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-home-must.is-mobile .sn-home-must-mo-info .sn-home-must-off { font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } /* MO 五角星：10×10 */ .sn-home-must.is-mobile .sn-home-must-rate-icon { width: 10px; height: 10px; top: -1px; } /* MO 数字：白字 15px */ .sn-home-must.is-mobile .sn-home-must-mo-info .sn-home-must-rate { color: #FFF; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-home-must-mo-card.tone-sport { --ph-a: #2b3b46; --ph-b: #c45a1a; } .sn-home-must-mo-card.tone-pro2 { --ph-a: #2b3b46; --ph-b: #c45a1a; } .sn-home-must-mo-card.tone-swim { --ph-a: #1f4c54; --ph-b: #4f8f9a; } .sn-home-must-mo-card.tone-run { --ph-a: #2d3644; --ph-b: #6d7c90; } .sn-home-must-mo-card.tone-move { --ph-a: #2d3644; --ph-b: #6d7c90; } .sn-home-must-mo-card.tone-dots { --ph-a: #6a4a34; --ph-b: #c49a7a; } .sn-home-must-mo-card.tone-fit { --ph-a: #5c4a30; --ph-b: #b9a07c; } .sn-home-must-mo-card.tone-comm { --ph-a: #4d3658; --ph-b: #8f6d9e; } .sn-home-must-mo-card.tone-neutral { --ph-a: #3a4550; --ph-b: #8a9aa8; } .sn-home-must-mo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.72) 100%); pointer-events: none; z-index: 1; } .sn-home-must-mo-card .sn-home-must-chip { top: 14px; bottom: auto; z-index: 3; } .sn-home-must-mo-info { display: block; width: 100%; padding: 18px; color: #fff; background: none; text-align: left; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; box-sizing: border-box; } .sn-home-must-mo-info-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .sn-home-must-mo-title { margin: 0; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 17px; font-weight: 500; line-height: 23px; letter-spacing: 0; color: #FFF; } .sn-home-must-mo-info .sn-home-must-desc { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; color: #FFF; margin: 8px 0 10px; } .sn-home-must-mo-info .sn-home-must-rate { color: #fff; } .sn-home-must-mo-info .sn-home-must-rate-value { color: #fff; } .sn-home-must-mo-info .sn-home-must-sale { color: #fff; font-size: 22px; } .sn-home-must-mo-info .sn-home-must-origin { color: rgba(255, 255, 255, 0.55); } .sn-home-must-mo-info .sn-home-must-price-pending { color: rgba(255, 255, 255, 0.75); } /* 移动端 Must have 购买按钮（按设计稿） */ .sn-home-must-mo-info .sn-home-must-mo-buy { display: flex; justify-content: center; align-items: center; width: 116px; height: 32px; padding: 13px 18px; margin-top: 12px; border-radius: 5px; background: #FFF; color: #050505; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 13px; font-weight: 400; line-height: 21px; letter-spacing: -0.52px; box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { .sn-home-must-visual.is-push-fwd .sn-home-must-layer.is-front, .sn-home-must-visual.is-push-fwd .sn-home-must-layer.is-back, .sn-home-must-visual.is-push-back .sn-home-must-layer.is-front, .sn-home-must-visual.is-push-back .sn-home-must-layer.is-back { animation-duration: 0.01ms; } .sn-home-must-rail i { transition: none; } } /* ========== Home Why (공식몰 혜택) ========== */ .sn-whyHome { word-break: keep-all; width: 100%; box-sizing: border-box; background: #ffffff !important; position: relative; z-index: 10; color: #111; overflow: visible; } /* PC：≥1440 保持 1440 内容区；1280–1439 随视口收缩，避免右裁切与左距过大 */ .sn-whyHome:not(.is-mobile) { overflow-x: hidden; } .sn-whyHome > .sn-body { max-width: 1440px; margin: 0 auto; padding: 96px 0 96px 120px; overflow: visible; } .sn-whyHome:not(.is-mobile) > .sn-body { width: 100%; max-width: 1440px; min-width: 0; box-sizing: border-box; /* 1280→40px，1440→120px；≥1440 封顶 120 */ padding-left: clamp(40px, calc(40px + (100vw - 1280px) * 0.5), 120px); } .sn-whyHome-grid { /* display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; overflow: visible; */ display: flex; gap: 40px; /* 左边标题 → 右边滚动区 40px */ align-items: flex-start; /* 顶部对齐 */ overflow: visible; } .sn-whyHome-lead { flex: 0 0 auto; /* 标题栏宽度 = 内容宽度，自适应 */ min-width: 0; } .sn-whyHome-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-PC-H2--size, 40px); line-height: var(--text-PC-H2--line-height, 52px); letter-spacing: var(--text-PC-H2--letter-spacing, 0); font-weight: var(--text-PC-H2--weight, 600); color: #000; margin: 0 0 10px; } .sn-whyHome-sub { margin: 0; color: rgba(0, 0, 0, 0.60); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-style: normal; font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); } .sn-whyHome-arrows { display: flex; gap: 8px; margin-top: 24px; } .sn-whyHome.is-static .sn-whyHome-arrows { display: none; } .sn-whyHome-arrow { width: 59.988px; height: 59.988px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; color: #111; } .sn-whyHome-arrow.is-prev { background: #ececec; } .sn-whyHome-arrow.is-next { background: #FF6008; color: #fff; } .sn-whyHome-arrow:disabled { opacity: 0.35; cursor: default; } .sn-whyHome-arrow svg { display: block; } .sn-whyHome-scroller { height: 316px; min-height: 316px; overflow: hidden; overflow-x: hidden; width: 100%; max-width: none; box-sizing: border-box; flex: 1 1 0; min-width: 0; } .sn-whyHome-track { display: flex; align-items: stretch; gap: 24px; flex-wrap: nowrap; height: 300px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .sn-whyHome-card { /* 设计稿 220×300；4 张完整 + 第 5 张只露一条边（由 JS 按容器精算） */ flex: 0 0 220px; width: 220px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; height: 300px; min-height: 300px; max-height: 300px; padding: 22px 15px 30px 16px; border: 0; border-radius: 12px; background: #f3f3f3; position: relative; color: #111; z-index: 1; box-sizing: border-box; cursor: pointer; overflow: hidden; transition: background 0.45s ease, box-shadow 0.45s ease, color 0.35s ease, padding 0.35s ease; } .sn-whyHome-card.is-on { border-radius: 12px; background: linear-gradient(180deg, var(--BG-tertiary, #C6C6C6) 0%, var(--font-icon-secondary, #2F2F2F) 130.23%); color: #fff; } .sn-whyHome-ico { width: 100%; flex: 1; min-height: 0; display: grid; place-items: center; margin-bottom: 8px; position: relative; } .sn-whyHome-ico img { object-fit: contain; display: block; transition: width 0.35s ease, height 0.35s ease; } /* 需求文档/样式.txt — 五图选中前 / 选中后尺寸 */ .sn-whyHome-card[data-why-id="member"] .sn-whyHome-ico img { width: 143px; height: 143px; aspect-ratio: 1 / 1; } .sn-whyHome-card[data-why-id="member"].is-on .sn-whyHome-ico img { width: 193px; height: 193px; } .sn-whyHome-card[data-why-id="delivery"] .sn-whyHome-ico img { width: 150px; height: 150px; aspect-ratio: 1 / 1; } .sn-whyHome-card[data-why-id="delivery"].is-on .sn-whyHome-ico img { width: 192px; height: 192px; } .sn-whyHome-card[data-why-id="genuine"] .sn-whyHome-ico img { width: 139px; height: 139px; aspect-ratio: 1 / 1; } .sn-whyHome-card[data-why-id="genuine"].is-on .sn-whyHome-ico img { width: 170px; height: 170px; } .sn-whyHome-card[data-why-id="as"] .sn-whyHome-ico img { width: 138.5px; height: 133.004px; transform: translateY(20px); } .sn-whyHome-card[data-why-id="as"].is-on .sn-whyHome-ico img { width: 182.234px; height: 175.001px; } .sn-whyHome-card[data-why-id="tradein"] .sn-whyHome-ico img { width: 121px; height: 121px; aspect-ratio: 1 / 1; } .sn-whyHome-card[data-why-id="tradein"].is-on .sn-whyHome-ico img { width: 174px; height: 174px; } .sn-whyHome-card-footer { display: block; margin-top: auto; width: 100%; } /* 悬停：文案在左整宽，右侧为 CTA 圆钮（不占文案流） */ .sn-whyHome-card.is-on .sn-whyHome-card-footer { padding-right: 62px; box-sizing: border-box; } .sn-whyHome-card-text { min-width: 0; width: 100%; } .sn-whyHome-card-title { color: var(--font-icon-primary, #050505); font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H4--size, 19px); font-style: normal; font-weight: 500; line-height: var(--text-M-H4--line-height, 26px); /* 136.842% */ letter-spacing: var(--text-M-H4--letter-spacing, 0); margin: 0 0 6px; color: inherit; } .sn-whyHome-card.is-on .sn-whyHome-card-title { font-weight: 600; } .sn-whyHome-card-desc { color: var(--font-icon-secondary, #2F2F2F); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-style: normal; font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); margin: 0; } .sn-whyHome:not(.is-mobile) .sn-whyHome-card.is-on .sn-whyHome-card-desc { color: rgba(255, 255, 255, 0.80); } /* 设计稿：58×58，距卡片底 126px、贴右侧，与图标右下角对齐 */ .sn-whyHome-go { position: absolute; right: 16px; bottom: 20px; top: auto; width: 58px; height: 58px; padding: 0; border: 1px solid rgba(255, 255, 255, 1); border-radius: 45px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(0.85); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; cursor: pointer; z-index: 3; } .sn-whyHome-card.is-on .sn-whyHome-go { opacity: 1; transform: scale(1); pointer-events: auto; } .sn-whyHome-go svg { width: 21px; height: 21px; display: block; } .sn-whyHome-more { display: none; } .sn-whyHome-top { display: none; } /* body:has(#masz_main) #fixed_bottom { display: none !important; } */ .sn-whyHome.is-mobile { padding: 0 0 0 20px; overflow: hidden; } .sn-whyHome.is-mobile > .sn-body { padding: 8px 0 48px; overflow: visible; } .sn-whyHome.is-mobile .sn-whyHome-grid { flex-direction: column; /* ← 上下堆叠 */ gap: 0; align-items: stretch; } .sn-whyHome.is-mobile .sn-whyHome-lead { text-align: left; margin-bottom: 24px; padding-right: 0; flex: 0 0 auto; width: 100%; } .sn-whyHome.is-mobile .sn-whyHome-title { font-size: 27px; font-weight: 600; line-height: 35px; letter-spacing: 0; margin-bottom: 12px; } .sn-whyHome.is-mobile .sn-whyHome-sub { max-width: none; font-size: 15px; line-height: 24px; color:rgba( 0,0,0,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sn-whyHome.is-mobile .sn-whyHome-sub br { display: none; } .sn-whyHome.is-mobile .sn-whyHome-arrows { display: none; } .sn-whyHome.is-mobile .sn-whyHome-scroller { height: auto; min-height: 0; overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; flex: 1 1 auto; width: 100%; } .sn-whyHome.is-mobile .sn-whyHome-scroller::-webkit-scrollbar { display: none; } .sn-whyHome.is-mobile .sn-whyHome-track { height: auto; gap: 12px; transform: none !important; padding-bottom: 4px; padding-right: 0; overflow: visible; } /* Figma MO card: 338×409 / padding 12 / radius 12 / gradient；高亮仅描边 */ .sn-whyHome.is-mobile .sn-whyHome-card, .sn-whyHome.is-mobile .sn-whyHome-card.is-on { flex: 0 0 calc(100vw - 50px); width: calc(100vw - 50px); min-width: 280px; max-width: 338px; min-height: 409px; height: 409px; padding: 12px; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; transform: none; border: 0; border-radius: 12px; background: linear-gradient(180deg, var(--BG-tertiary, #C6C6C6) 0%, var(--font-icon-secondary, #2F2F2F) 130.23%); color: #fff; box-shadow: none; overflow: hidden; box-sizing: border-box; } .sn-whyHome.is-mobile .sn-whyHome-card.is-on { box-shadow: none; } .sn-whyHome.is-mobile .sn-whyHome-ico, .sn-whyHome.is-mobile .sn-whyHome-card.is-on .sn-whyHome-ico { flex: 1 1 auto; width: 100%; min-height: 0; height: auto; margin-bottom: 8px; padding-right: 0; } .sn-whyHome.is-mobile .sn-whyHome-ico img { transform: none; } /* MO 高亮不放大图标，避免卡片被撑开 */ .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="member"] .sn-whyHome-ico img, .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="member"].is-on .sn-whyHome-ico img { width: 193px; height: 193px; } .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="delivery"] .sn-whyHome-ico img, .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="delivery"].is-on .sn-whyHome-ico img { width: 192px; height: 192px; } .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="genuine"] .sn-whyHome-ico img, .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="genuine"].is-on .sn-whyHome-ico img { width: 170px; height: 170px; } .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="as"] .sn-whyHome-ico img, .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="as"].is-on .sn-whyHome-ico img { width: 182.234px; height: 175.001px; transform: translateY(15px); } .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="tradein"] .sn-whyHome-ico img, .sn-whyHome.is-mobile .sn-whyHome-card[data-why-id="tradein"].is-on .sn-whyHome-ico img { width: 174px; height: 174px; } .sn-whyHome.is-mobile .sn-whyHome-card-footer, .sn-whyHome.is-mobile .sn-whyHome-card.is-on .sn-whyHome-card-footer { display: block; width: 100%; margin-top: 0; flex: 0 0 auto; padding-right: 0; } .sn-whyHome.is-mobile .sn-whyHome-card-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H3--size, 23px); font-style: normal; font-weight: var(--text-M-H3--weight, 600); line-height: var(--text-M-H3--line-height, 35px); /* 152.174% */ letter-spacing: var(--text-M-H3--letter-spacing, 0); margin-bottom: 6px; } .sn-whyHome.is-mobile .sn-whyHome-card-desc { color: rgba(255, 255, 255, 0.80); text-align: center; /* shokz/正文/正文 */ font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-style: normal; font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); /* 160% */ letter-spacing: var(--text-body-letter-spacing, -0.6px); margin-bottom: 0; } /* 移动端卡片文字居中 */ .sn-whyHome.is-mobile .sn-whyHome-card-text, .sn-whyHome.is-mobile .sn-whyHome-card-title, .sn-whyHome.is-mobile .sn-whyHome-card-desc { text-align: center; } .sn-whyHome.is-mobile .sn-whyHome-go { display: none !important; } .sn-whyHome.is-mobile .sn-whyHome-more { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; /* 上 1px，右 9px，下 9px，左 10px（加上父级 12px 后完美等于设计稿的 13/21/21/22） */ margin: 26px 9px 9px 10px; width: calc(100% - 19px); /* 100% - (左 margin 10px + 右 margin 9px) */ height: auto; padding: 13px; /* 按钮内部间距：13px */ border: 0; border-radius: 8px; background: #fff; color: var(--font-icon-primary, #050505); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 17px); font-style: normal; font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 27px); letter-spacing: var(--text-body-letter-spacing, -0.68px); text-decoration: none; box-sizing: border-box; } .sn-whyHome.is-mobile .sn-whyHome-top { position: fixed; right: 16px; bottom: 18px; z-index: 8500; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: #111; color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; box-sizing: border-box; } .sn-whyHome.is-mobile .sn-whyHome-top.is-on { display: flex; } .sn-whyHome.is-mobile .sn-whyHome-top img { width: 22px; height: auto; display: block; } @media (prefers-reduced-motion: reduce) { .sn-whyHome-track, .sn-whyHome-card, .sn-whyHome-ico img, .sn-whyHome-go { transition: none; } } /* ========== Home Awards (Partnerships and Awards) ========== */ .sn-awards { word-break: keep-all; width: 100%; padding: 0 96px; box-sizing: border-box; background: #ffffff; position: relative; z-index: 10; } .sn-awards > .sn-body { max-width: 1200px; margin: 0 auto; padding: 0 0 96px; overflow: hidden; } .sn-awards-head { text-align: center; margin-bottom: 28px; } .sn-awards-title { font-family: "Albert Sans"; font-size: 40px; line-height: 52px; font-weight: 600; color: #000; margin: 0 0 16px; } .sn-awards-sub { margin: 0; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); color: #23263E; text-align: center; opacity: 0.6; } .sn-awards .sn-awards-swiper { width: 100%; overflow: hidden; } .sn-awards .sn-awards-swiper .swiper-wrapper { align-items: center; transition-timing-function: linear !important; height: auto !important; } .sn-awards .sn-awards-card { width: calc(100% / 6); box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .sn-awards .sn-awards-card img { width: 100%; height: auto; display: block; } .sn-awards .sn-awards-card--pad { padding: 24px; } .sn-awards .sn-awards-card--zoom { width: 200px; height: 200px; overflow: visible; } .sn-awards .sn-awards-card--zoom img { width: 200px; height: 200px; object-fit: contain; transform: scale(1.5); transform-origin: center; } .sn-awards .sn-awards-swiper-2 { display: none; } .sn-awards.is-mobile { padding: 0 16px; } .sn-awards.is-mobile > .sn-body { padding: 0 0 48px; max-width: 100%; } .sn-awards.is-mobile .sn-awards-title { color: #000; text-align: center; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H3--size, 23px); font-style: normal; font-weight: var(--text-M-H3--weight, 600); line-height: var(--text-M-H3--line-height, 35px); /* 152.174% */ letter-spacing: var(--text-M-H3--letter-spacing, 0); margin-bottom: 8px; } .sn-awards.is-mobile .sn-awards-sub { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-style: normal; font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); /* 160% */ letter-spacing: var(--text-body-letter-spacing, -0.6px); color: rgba(0,0,0,0.6); } .sn-awards.is-mobile .sn-awards-head { margin-bottom: 48px; } .sn-awards.is-mobile .sn-awards-swiper-2 { display: block; margin-top: 0; position: relative; } .sn-awards.is-mobile .sn-awards-card { width: calc(100% / 3); } .sn-awards.is-mobile .sn-awards-card--zoom-mo { width: 120px; height: 120px; overflow: visible; } .sn-awards.is-mobile .sn-awards-card--zoom-mo img { transform: scale(1.24); transform-origin: center; } @media (max-width: 1280px) { .sn-awards:not(.is-mobile) { padding: 0 48px; } } @media (max-width: 1024px) { .sn-awards:not(.is-mobile) { padding: 0 24px; } .sn-awards:not(.is-mobile) .sn-awards-title { font-size: 28px; } } @media (prefers-reduced-motion: reduce) { .sn-awards .sn-awards-swiper .swiper-wrapper { transition-duration: 0ms !important; transform: none !important; } } /* ========== Home Brand 运动员组件（sn-athlete，可复用） ========== */ .sn-athlete { word-break: keep-all; width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; background: #ffffff; position: relative; z-index: 10; } /* PC：缩窗只裁切，不挤压 1440 内容区 / 人像画幅 */ .sn-athlete:not(.is-mobile) { overflow-x: hidden; } .sn-athlete-stage { position: relative; /* PC 设计稿画板 1440×800：固定高度，不随视口宽度或文案变化。 */ max-width: none; margin: 0; width: 100%; height: 800px; overflow: hidden; color: #fff; background: #6b4a3a; touch-action: pan-y; } .sn-athlete-base, .sn-athlete-bgs, .sn-athlete-mask { position: absolute; inset: 0; } .sn-athlete-base { z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #6b4a3a; } .sn-athlete-bgs { z-index: 1; pointer-events: none; } /* * 默认：人物图铺满舞台。 * is-frame-right：竖图/近正方形素材按设计稿落在右侧画幅，避免 cover 进宽舞台后大头特写。 */ .sn-athlete-bg { position: absolute; inset: 0; width: auto; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; overflow: hidden; } .sn-athlete-bg.is-on { opacity: 1; } .sn-athlete-bg.is-frame-right { inset: 0 0 0 auto; width: var(--bg-w, 577px); /* 不加人像左侧淡出 mask */ } /* * PC 人像：贴视口右缘 + 设计稿固定宽（不锁在 1440 盒内，避免右侧被裁成显示不全）。 * 缩窗不缩小画幅，窗外部分直接裁掉。 */ .sn-athlete:not(.is-mobile) .sn-athlete-bg.is-frame-right { top: 0; right: 0; bottom: auto; left: auto; height: 800px; width: var(--bg-w, 577px); min-width: var(--bg-w, 577px); max-width: var(--bg-w, 577px); } .sn-athlete-photo { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .sn-athlete-bg.is-fallback .sn-athlete-photo { opacity: 0; } .sn-athlete-mask { z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(20, 8, 4, 0.18) 0%, transparent 48%); } .sn-athlete-ui { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; /* 通栏后文案/缩略图仍保留左右内边距，避免贴边 */ padding: clamp(48px, 13vw, 182px) clamp(24px, 6.5vw, 120px) clamp(40px, 13vw, 128.24px); box-sizing: border-box; pointer-events: none; } /* PC：人像层通屏（贴右）；文案/头像条仍居中 1440 */ .sn-athlete:not(.is-mobile) .sn-athlete-bgs { inset: 0 auto 0 50%; width: 1440px; min-width: 1440px; transform: translateX(-50%); } .sn-athlete:not(.is-mobile) .sn-athlete-ui { width: 1440px; min-width: 1440px; max-width: none; margin: 0 auto; padding: 158px 80px 128px; } .sn-athlete-copy { max-width: 65%; } .sn-athlete-title { margin: 0; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 65px; line-height: 85px; font-weight: 600; color: #fff; white-space: pre-line; text-transform: uppercase; letter-spacing: 0; min-height: 172px; } /* 设计稿标题框高 375（375/1440≈26.04vw），超出裁切 */ .sn-athlete:not(.is-mobile) .sn-athlete-title { white-space: pre-line; word-break: keep-all; /* 韩文按词断行，不硬切 */ max-height: none; } .sn-athlete-ko { margin: 28px 0 0; font-size: 18px; line-height: 1.45; font-weight: 600; color: #fff; } .sn-athlete-desc { margin: 16px 0 0; max-width: 420px; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: 0; color: #FFF; opacity: 0.8; white-space: pre-line; } .sn-athlete-actions { display: flex; align-items: center; gap: 10px; margin-top: 40px; } .sn-athlete-foot { /* PC：透传，保持文案区原有 actions 排版；MO 再做成底卡 */ } .sn-athlete-cta { width: 160px; height: 48px; padding: 13px 18px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.7); background: transparent; color: #FFF; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 17px; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; pointer-events: auto; } .sn-athlete-cta:hover, .sn-athlete-cta:focus { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); } .sn-athlete-variant { width: 48px; height: 48px; padding: 0; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); display: flex; /* grid → flex 或保持 grid 都行 */ justify-content: center; align-items: center; box-sizing: border-box; flex: none; pointer-events: auto; } .sn-athlete-variant img { width: 100%; height: 100%; object-fit: contain; display: block; } .sn-athlete-play { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.7); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; pointer-events: auto; } .sn-athlete-play[hidden] { display: none !important; } .sn-athlete-id { display: none; } .sn-athlete-bar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: auto; max-width: 100%; position: relative; z-index: 4; pointer-events: auto; margin-top: 36px; } .sn-athlete-bar::-webkit-scrollbar { display: none; } .sn-athlete-chip { display: inline-flex; align-items: center; gap: 16px; height: 80px; min-width: 80px; padding: 0; border: 0; border-radius: 5px; overflow: hidden; background: transparent; cursor: pointer; flex: none; color: #fff; text-align: left; position: relative; z-index: 1; pointer-events: auto; -webkit-appearance: none; appearance: none; /* 设计稿：未选中整体半透明，透出橙色底；不是叠白蒙层 */ opacity: 0.55; box-sizing: border-box; transition: min-width 0.28s ease, background 0.28s ease, padding 0.28s ease, opacity 0.28s ease; } .sn-athlete-face-wrap { width: 80px; height: 80px; min-width: 80px; border-radius: 5px; overflow: hidden; flex: none; background: #fff; position: relative; transition: width 0.28s ease, height 0.28s ease; } .sn-athlete-face-wrap, .sn-athlete-face, .sn-athlete-meta { pointer-events: none; } .sn-athlete-face { width: 100%; height: 100%; object-fit: cover; display: block; } .sn-athlete-meta { display: none; min-width: 0; } .sn-athlete-meta b { display: block; font-family: "Albert Sans", sans-serif; font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: -0.28px; text-transform: capitalize; } .sn-athlete-meta span { display: block; font-family: 'Pretendard', var(--Shokz-Sans-Text, Pretendard); font-size: 13px; font-weight: 400; line-height: normal; letter-spacing: -0.52px; text-transform: uppercase; opacity: 0.8; margin-top: 7px; } .sn-athlete-chip.is-on { opacity: 1; background: var(--Basic-OG-70, #FF6008); padding: 5px 23px 5px 5px; min-width: 217px; border-radius: 5px; box-shadow: none; height: 80px; box-sizing: border-box; } .sn-athlete-chip.is-on .sn-athlete-face-wrap { width: 70px; height: 70px; min-width: 70px; min-height: 70px; flex: 0 0 70px; } .sn-athlete-chip.is-on .sn-athlete-meta { display: block; } .sn-athlete-progress { display: none; height: 3px; border-radius: 0; overflow: hidden; background: rgba(255, 255, 255, 0.45); } .sn-athlete-progress i { display: block; height: 100%; width: 0; background: #ff4d0a; } .sn-athlete-data { display: none !important; } .sn-athlete-modal { position: absolute; inset: 0; z-index: 8; background: rgba(0, 0, 0, 0.72); display: flex; align-items: center; justify-content: center; pointer-events: auto; } .sn-athlete-modal[hidden] { display: none !important; } .sn-athlete-modal-video { width: min(860px, 92%); max-height: 80%; background: #000; } .sn-athlete-modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; } /* PC：舞台固定 800px，UI 沿用 100% 高度，头像栏不参与压缩。 */ .sn-athlete:not(.is-mobile) .sn-athlete-bar { flex-shrink: 0; } @media (max-width: 1024px) { .sn-athlete:not(.is-mobile) .sn-athlete-title { font-size: clamp(40px, 6.5vw, 72px); } } /* * MO：舞台通栏铺满；393×820 只作比例基准。 * scale 必须是无单位数字（100vw/393px），才能和 px 相乘；写成 100vw/393 会变成长度，calc 全失效。 */ .sn-athlete.is-mobile { --sn-athlete-dw: 393; --sn-athlete-dh: 820; --sn-athlete-scale: calc(100vw / 393px); padding: 0; overflow: hidden; width: 100%; /* 高度按设计稿宽高比随屏宽走：820/393 * 100vw */ height: calc(820 / 393 * 100vw); box-sizing: border-box; background: #2a1408; } .sn-athlete.is-mobile .sn-athlete-stage { max-width: none; width: 100%; height: 100%; min-height: 0; margin: 0; touch-action: pan-y; } .sn-athlete.is-mobile .sn-athlete-mask { /* 顶部压暗读字；底部交给 .sn-athlete-foot 渐变卡 */ background: linear-gradient( 180deg, rgba(20, 8, 4, 0.42) 0%, transparent 28%, transparent 100% ); } .sn-athlete.is-mobile .sn-athlete-base { background-size: cover; background-position: center top; background-color: #2a1408; } .sn-athlete.is-mobile .sn-athlete-ui { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; grid-template-areas: "title" "ko" "desc" "." "foot" "progress"; align-content: stretch; row-gap: 0; padding: calc(62px * var(--sn-athlete-scale)) calc(16px * var(--sn-athlete-scale)) calc(48px * var(--sn-athlete-scale)); height: 100%; min-height: 0; box-sizing: border-box; } .sn-athlete.is-mobile .sn-athlete-copy { display: contents; } .sn-athlete.is-mobile .sn-athlete-title { grid-area: title; max-width: none; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: calc(40px * var(--sn-athlete-scale)); letter-spacing: 0; margin: 0 calc(-10px * var(--sn-athlete-scale)); padding: 0; line-height: calc(52px * var(--sn-athlete-scale)); font-weight: 600; overflow: hidden; white-space: pre-line; word-break: keep-all; text-align: center; min-height: calc(104px * var(--sn-athlete-scale)); } @keyframes sn-athlete-title-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } .sn-athlete.is-mobile .sn-athlete-ko { grid-area: ko; margin: calc(40px * var(--sn-athlete-scale)) 0 0; font-family: 'Shokz Sans Display', 'Pretendard'; font-size: calc(17px * var(--sn-athlete-scale)); font-style: normal; font-weight: 500; line-height: calc(23px * var(--sn-athlete-scale)); letter-spacing: 0; color: #fff; text-align: center; } .sn-athlete.is-mobile .sn-athlete-desc { grid-area: desc; margin: calc(18px * var(--sn-athlete-scale)) auto 0; width: auto; max-width: 100%; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: calc(15px * var(--sn-athlete-scale)); line-height: calc(24px * var(--sn-athlete-scale)); letter-spacing: var(--text-body-letter-spacing, -0.6px); font-style: normal; font-weight: 400; color: #fff; text-align: center; opacity: 0.8; word-break: keep-all; } .sn-athlete.is-mobile .sn-athlete-bar, .sn-athlete.is-mobile .sn-athlete-play { display: none !important; } /* MO 底部信息卡：叠在人物图上，渐变层透明→黑 */ .sn-athlete.is-mobile .sn-athlete-foot { grid-area: foot; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "id variant" "cta cta"; column-gap: calc(12px * var(--sn-athlete-scale)); row-gap: calc(18px * var(--sn-athlete-scale)); align-items: end; width: 100%; min-height: calc(252px * var(--sn-athlete-scale)); padding: calc(12px * var(--sn-athlete-scale)); border-radius: calc(12px * var(--sn-athlete-scale)); box-sizing: border-box; overflow: hidden; grid-template-rows: 1fr auto; } .sn-athlete.is-mobile .sn-athlete-foot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); opacity: 0.8; pointer-events: none; z-index: 0; } .sn-athlete.is-mobile .sn-athlete-actions { display: contents; } .sn-athlete.is-mobile .sn-athlete-id { grid-area: id; position: relative; z-index: 1; display: block; align-self: end; text-align: left; min-width: 0; padding-bottom: 0; color: #fff; } .sn-athlete.is-mobile .sn-athlete-name { display: block; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: calc(15px * var(--sn-athlete-scale)); font-weight: 400; line-height: calc(24px * var(--sn-athlete-scale)); letter-spacing: -0.6px; color: #fff; } .sn-athlete.is-mobile .sn-athlete-role { display: block; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: calc(15px * var(--sn-athlete-scale)); font-weight: 400; line-height: calc(24px * var(--sn-athlete-scale)); letter-spacing: -0.6px; color: #fff; opacity: 0.8; margin-top: 0; } .sn-athlete.is-mobile .sn-athlete-variant { grid-area: variant; position: relative; z-index: 1; width: calc(48px * var(--sn-athlete-scale)); height: calc(48px * var(--sn-athlete-scale)); padding: 0; border-radius: calc(8px * var(--sn-athlete-scale)); align-self: end; margin: 0; box-shadow: none; overflow: hidden; background: #fff; } .sn-athlete.is-mobile .sn-athlete-variant img { width: 100%; height: 100%; object-fit: contain; } .sn-athlete.is-mobile .sn-athlete-cta { grid-area: cta; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; align-self: stretch; width: 100%; height: calc(45px * var(--sn-athlete-scale)); margin-top: 0; padding: calc(13px * var(--sn-athlete-scale)) calc(18px * var(--sn-athlete-scale)); border: 0; border-radius: calc(8px * var(--sn-athlete-scale)); background: #ff6008; color: #FFF; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: calc(17px * var(--sn-athlete-scale)); font-weight: 400; line-height: calc(27px * var(--sn-athlete-scale)); letter-spacing: -0.68px; box-sizing: border-box; } .sn-athlete.is-mobile .sn-athlete-cta:hover, .sn-athlete.is-mobile .sn-athlete-cta:focus { background: #ff6008; color: #fff; } .sn-athlete.is-mobile .sn-athlete-progress { grid-area: progress; display: block; position: relative; height: calc(2px * var(--sn-athlete-scale)); margin: calc(32px * var(--sn-athlete-scale)) 0 0; border-radius: 0; background: rgba(255, 255, 255, 0.35); overflow: hidden; } .sn-athlete.is-mobile .sn-athlete-progress i { display: block; position: absolute; left: 0; top: 0; height: 100%; width: calc(100% / var(--sn-athlete-n, 6)); background: #ff6008; transform: translateX(0); transition: transform 0.3s ease; } /* MO 取消 PC 右侧画幅/mask，人物通屏 */ .sn-athlete.is-mobile .sn-athlete-bg, .sn-athlete.is-mobile .sn-athlete-bg.is-frame-right { inset: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; -webkit-mask-image: none !important; mask-image: none !important; } .sn-athlete.is-mobile .sn-athlete-photo { object-fit: cover; object-position: center 18% !important; } /* * MO 抠图：左右/底边距随 scale；top 用 % 随舞台高度走。 */ .sn-athlete.is-mobile .sn-athlete-bg.is-mo-cutout { inset: auto !important; left: calc(16px * var(--sn-athlete-scale)) !important; right: calc(16px * var(--sn-athlete-scale)) !important; top: 16% !important; bottom: calc(82px * var(--sn-athlete-scale)) !important; width: auto !important; height: auto !important; max-height: none; margin: 0; border-radius: calc(12px * var(--sn-athlete-scale)); overflow: hidden; } .sn-athlete.is-mobile .sn-athlete-bg.is-mo-cutout .sn-athlete-photo { object-fit: contain !important; object-position: center bottom !important; width: 100%; height: 100%; mix-blend-mode: lighten; transform: none; } @media (prefers-reduced-motion: reduce) { .sn-athlete-bg, .sn-athlete-progress i, .sn-athlete-chip, .sn-athlete-face-wrap { transition: none !important; } .sn-athlete.is-mobile .sn-athlete-title-track { animation: none !important; transform: none !important; } .sn-athlete.is-mobile .sn-athlete-title-item + .sn-athlete-title-item { display: none; } } /* ========== Home Reviews 사용 후기（sn-reviews，PC 优先） ========== */ .sn-reviews { word-break: keep-all; width: 100%; box-sizing: border-box; background: #ffffff; position: relative; z-index: 10; } .sn-reviews > .sn-body { max-width: 1200px; margin: 0 auto; padding: 96px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; } .sn-reviews-head { width: 100%; } .sn-reviews:not(.is-mobile) .sn-reviews-head { width: 100%; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .sn-reviews:not(.is-mobile) .sn-reviews-sub { margin: 0; } .sn-reviews-title { margin: 0; color: #000; font-family: 'Shokz Sans Display', 'Pretendard'; font-size: 40px; font-weight: 600; line-height: 52px; letter-spacing: 0; } .sn-reviews-sub { margin: 8px 0 0; color: rgba(0, 0, 0, 0.6); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-style: normal; font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); /* 160% */ letter-spacing: var(--text-body-letter-spacing, -0.6px); } .sn-reviews-stats { display: none; } .sn-reviews-layout { width: 100%; display: flex; align-items: stretch; gap: 24px; } .sn-reviews-banner { flex: 0 0 588px; width: 588px; height: 495px; border-radius: 12px; overflow: hidden; display: block; background: #d9d9d9; position: relative; } .sn-reviews-banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .sn-reviews-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.75) 100%); pointer-events: none; z-index: 1; } .sn-reviews-banner-img { width: 100%; height: 100%; object-fit: cover; display: block; } .sn-reviews-meta.sn-reviews-banner-meta { position: absolute; left: 42px; right: 42px; bottom: 25px; z-index: 2; color: #fff; } .sn-reviews-banner-meta .sn-reviews-quote { margin: 0; color: #FFF; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 21px; font-weight: 600; line-height: 35px; letter-spacing: 0; } .sn-reviews-banner-meta .sn-reviews-user, .sn-reviews-banner-meta .sn-reviews-rate { color: rgba(255, 255, 255, 0.6); font-size: 24px; line-height: 50.043px; letter-spacing: -1.25px; } /* 胶囊里的圆形缩略图（大图专用） */ .sn-reviews-prod-thumb { width: 32px; height: 32px; border-radius: 50%; background: #fff; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sn-reviews-prod-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .sn-reviews-grid { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 15px; } .sn-reviews-card { position: relative; display: block; height: 240.5px; border-radius: 8px; overflow: hidden; text-decoration: none; color: #fff; background: #cfcfcf; } .sn-reviews-card-face { position: absolute; inset: 0; z-index: 1; transition: opacity 0.25s ease; } .sn-reviews-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .sn-reviews-card-face::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; } .sn-reviews-thumb { position: absolute; top: 12px; right: 12px; width: 60px; height: 60px; object-fit: cover; border-radius: 8px; z-index: 2; flex-shrink: 0; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } .sn-reviews-meta { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; } .sn-reviews-prod { color: #fff; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 15px; font-weight: 500; line-height: 22px; letter-spacing: 0; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); padding: 4px 16px; display: inline-flex; align-self: flex-start; align-items: center; width: fit-content; gap: 6px; margin-bottom: 8px; } .sn-reviews:not(.is-mobile) .sn-reviews-banner-meta .sn-reviews-prod { font-size: 27px; font-weight: 600; line-height: 35px; padding: 8px 28px; gap: 10px; margin-bottom: 14px; } .sn-reviews-prod-name { white-space: nowrap; } .sn-reviews-prod-arrow { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; line-height: 0; align-self: center; } .sn-reviews-prod-arrow svg { width: 16px; height: 16px; display: block; vertical-align: middle; } .sn-reviews-quote { margin: 0; color: #fff; color: #FFF; font-family: Pretendard; font-size: 12px; font-style: normal; font-weight: 500; line-height: 17px; letter-spacing: -0.48px; display: block; word-break: keep-all; overflow-wrap: break-word; } .sn-reviews.is-mobile .sn-quote-line { white-space: nowrap; } .sn-reviews:not(.is-mobile) .sn-reviews-quote br { display: none; } .sn-reviews-by { margin-top: 0px; display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden; } .sn-reviews-user { color: rgba(255, 255, 255, 0.6); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-reviews-rate { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.6); font-family: 'Pretendard'; font-size: 14px; font-weight: 400; line-height: 1.2; letter-spacing: -0.28px; display: none; } .sn-reviews-star { display: block; flex-shrink: 0; } .sn-reviews-still { flex: 1 1 auto; min-height: 0; border-radius: 12px; overflow: hidden; background: #f1f1f1; display: flex; align-items: center; justify-content: center; } .sn-reviews-still img { width: 100%; height: 100%; object-fit: contain; display: block; } .sn-reviews-more { flex: 0 0 auto; height: 44px; border-radius: 10px; background: #fff; color: #111; font-family: 'Pretendard'; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; width: 100%; } /* 移动端 banner meta */ .sn-reviews.is-mobile .sn-reviews-banner-meta { display: block; position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; color: #fff; } .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-prod { align-self: flex-start; margin: 0; } .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-prod, .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-prod-name { color: #fff; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H4--size, 19px); font-weight: var(--text-M-H4--weight, 600); line-height: var(--text-M-H4--line-height, 26px); letter-spacing: var(--text-M-H4--letter-spacing, 0); } /* 移动端渐变压暗 */ .sn-reviews.is-mobile .sn-reviews-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.75) 100%); pointer-events: none; z-index: 1; } /* 移动端 quote 字号 */ .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-quote { margin: 10px 0 0; color: #fff; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H6--size, 15px); font-weight: var(--text-M-H6--weight, 500); line-height: var(--text-M-H6--line-height, 22px); letter-spacing: var(--text-M-H6--letter-spacing, 0); } /* 移动端 by 间距 */ .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-by { margin-top: 8px; } .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-by { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; padding: 0; grid-area: auto; color: #fff; } .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-user, .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-rate { color: rgba(255, 255, 255, 0.6); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 17px; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; } .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-rate::before { background: rgba(255, 255, 255, 0.5); } .sn-reviews:not(.is-mobile) .sn-quote-line { white-space: normal !important; } .sn-reviews:not(.is-mobile) .sn-reviews-quote br { display: none !important; } /* PC 窄屏：保持比例缩放，不改 HTML */ @media (max-width: 1200px) { .sn-reviews:not(.is-mobile) > .sn-body { padding: 96px clamp(24px, 8.3vw, 120px); } } @media (max-width: 1280px) { .sn-reviews:not(.is-mobile) .sn-reviews-banner { flex-basis: 48%; width: auto; max-width: 588px; height: auto; aspect-ratio: 588 / 495; } .sn-reviews:not(.is-mobile) .sn-reviews-card { height: auto; aspect-ratio: 282 / 238.5; } } @media (max-width: 1024px) { .sn-reviews:not(.is-mobile) .sn-reviews-title { font-size: 32px; line-height: 42px; } .sn-reviews:not(.is-mobile) .sn-reviews-layout { flex-direction: column; } .sn-reviews:not(.is-mobile) .sn-reviews-banner { flex-basis: auto; width: 100%; max-width: none; } } /* ========== MO 사용 후기：统计 + 大图 + 横滑卡（无 hover） ========== */ .sn-reviews.is-mobile > .sn-body { max-width: none; padding: 48px 16px 40px; gap: 16px; } .sn-reviews.is-mobile .sn-reviews-title { font-size: 27px; line-height: 35px; font-weight: 600; } .sn-reviews.is-mobile .sn-reviews-sub { margin-top: 8px; margin-bottom: 8px; /* + body gap 16 = 副文案到统计 24px */ } .sn-reviews.is-mobile .sn-reviews-stats { display: flex; align-items: flex-start; align-self: stretch; width: 100%; gap: 32px; /* 分割线左右各 16px */ margin-bottom: 8px; /* + body gap 16 = 统计栏到大图 24px */ display: none; } .sn-reviews.is-mobile .sn-reviews-stat { position: relative; flex: 1 1 0; min-width: 0; } .sn-reviews.is-mobile .sn-reviews-stat + .sn-reviews-stat::before { content: ''; position: absolute; left: -16.25px; /* gap 32 的中线 */ top: 50%; transform: translateY(-50%); width: 0.5px; height: 27px; background: #000; opacity: 0.2; pointer-events: none; } .sn-reviews.is-mobile .sn-reviews-stat span { display: block; color: #000; opacity: 0.6; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-reviews.is-mobile .sn-reviews-stat b { display: block; margin-top: 2px; color: #ff6008; font-family: 'Shokz Sans Display', 'Pretendard', sans-serif; font-size: 22px; font-weight: 600; line-height: 28px; letter-spacing: 0; white-space: nowrap; } .sn-reviews.is-mobile .sn-reviews-layout { flex-direction: column; align-items: stretch; gap: 16px; /* 大图到卡 */ } .sn-reviews.is-mobile .sn-reviews-banner { flex: none; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; } .sn-reviews.is-mobile .sn-reviews-swiper { width: calc(100% + 16px); margin-right: -16px; overflow: hidden; } .sn-reviews.is-mobile .sn-reviews-swiper .swiper-wrapper { align-items: stretch; } .sn-reviews.is-mobile .sn-reviews-swiper .swiper-slide { width: 46%; height: auto; box-sizing: border-box; } .sn-reviews.is-mobile .sn-reviews-card { width: 100%; height: auto; min-height: 0; border-radius: 0; overflow: visible; background: transparent; color: #000; } .sn-reviews.is-mobile .sn-reviews-card-face { position: static; display: grid; align-items: center; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "cover cover" "thumb prod" "quote quote" "by by"; column-gap: 8px; row-gap: 0; opacity: 1; } .sn-reviews.is-mobile .sn-reviews-cover { grid-area: cover; position: static; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 12px; margin-bottom: 14px; /* 封面到缩略图/标题 */ } .sn-reviews.is-mobile .sn-reviews-card-face::after { display: none; } .sn-reviews.is-mobile .sn-reviews-thumb { grid-area: thumb; position: static; width: 44px; height: 44px; margin-top: 0; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.12); box-sizing: border-box; box-shadow: none; align-self: center; background: #fff; } .sn-reviews.is-mobile .sn-reviews-card .sn-reviews-meta { display: contents; } .sn-reviews.is-mobile .sn-reviews-prod { grid-area: prod; align-self: center; margin: 0; padding-right: 8px; box-sizing: border-box; color: #000; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-reviews.is-mobile .sn-reviews-quote { grid-area: quote; margin: 6px 0 0; padding-right: 8px; box-sizing: border-box; color: #000; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 14px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-reviews.is-mobile .sn-reviews-by { grid-area: by; margin-top: 7px; /* 摘录到用户评分 */ padding-right: 26px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; } .sn-reviews.is-mobile .sn-reviews-user, .sn-reviews.is-mobile .sn-reviews-rate { color: rgba(0, 0, 0, 0.6); font-size: 15px; line-height: 24px; } .sn-reviews.is-mobile .sn-reviews-rate { display: inline-flex; align-items: center; display: none; } .sn-reviews.is-mobile .sn-reviews-rate::before { content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 8px 0; background: rgba(0, 0, 0, 0.5); flex-shrink: 0; } .sn-reviews-progress { display: none; } .sn-reviews.is-mobile .sn-reviews-progress { display: block; position: relative; width: 257px; max-width: 100%; height: 2px; margin-top: 24px; background: rgba(0, 0, 0, 0.05); overflow: hidden; } .sn-reviews.is-mobile .sn-reviews-progress i { display: block; position: absolute; left: 0; top: 0; height: 100%; width: calc(100% / var(--sn-reviews-n, 4)); background: #ff6008; transform: none; } .sn-reviews:not(.is-mobile) .sn-reviews-rate::before { content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 8px 0 0; background: rgba(255, 255, 255, 0.4); flex-shrink: 0; } /* PC 大图：26×26 */ .sn-reviews:not(.is-mobile) .sn-reviews-banner-meta .sn-reviews-star { width: 26px; height: 26px; } /* PC 小图：14×14 */ .sn-reviews:not(.is-mobile) .sn-reviews-card .sn-reviews-star { width: 14px; height: 14px; } /* MO 大图：19×19 */ .sn-reviews.is-mobile .sn-reviews-banner-meta .sn-reviews-star { width: 19px; height: 19px; } /* MO 小图：14×14 */ .sn-reviews.is-mobile .sn-reviews-card .sn-reviews-star { width: 14px; height: 14px; } @media (prefers-reduced-motion: reduce) { .sn-reviews-card-face, .sn-reviews-progress i { transition: none; } } /* ========== Home Quiz 제품 매칭（sn-quiz，PC 优先） ========== */ /* ========== Home Quiz 제품 매칭（sn-quiz） ========== */ .sn-quiz { word-break: keep-all; width: 100%; box-sizing: border-box; background: #f1f1f1; position: relative; z-index: 10; } .sn-quiz > .sn-body { max-width: 1200px; margin: 0 auto; padding: 96px 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: left; /* 默认左对齐 */ } .sn-quiz-head { text-align: left; width: 100%; } .sn-quiz-title { margin: 0; color: var(--font-icon-primary, #050505); font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-PC-H2--size, 40px); font-weight: var(--text-PC-H2--weight, 600); line-height: var(--text-PC-H2--line-height, 52px); letter-spacing: var(--text-PC-H2--letter-spacing, 0); } .sn-quiz-sub { margin: 8px 0 0; color: var(--font-icon-secondary, #2F2F2F); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-weight: var(--text-body-weight, 500); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); } /* ==== 步骤条 ==== */ .sn-quiz-steps { display: flex; justify-content: space-between; /* 左组靠左，右组靠右 */ align-items: center; width: 100%; } .sn-quiz-steps-left { display: inline-flex; align-items: center; gap: 13px; } .sn-quiz-steps-right { display: inline-flex; align-items: center; gap: 13px; } .sn-quiz-q-wrap { display: inline-flex; align-items: center; gap: 8px; background: var(--Basic-OG-70, #FF6008); color: #fff; padding: 8px 16px; border-radius: 4px; white-space: nowrap; height: 40px; } .sn-quiz:not(.is-mobile) .sn-quiz-q-wrap .sn-quiz-step { background: transparent !important; color: #FFF !important; font-family: "Albert Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.32px; padding: 0; height: auto; border: 0 !important; height: 24px; line-height: 24px; display: inline-flex; align-items: center; } .sn-quiz:not(.is-mobile) .sn-quiz-q-wrap .sn-quiz-q { color: #FFF !important; font-family: var(--Shokz-Sans-Text, Pretendard), sans-serif; font-size: 17px; font-style: normal; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; margin: 0; padding: 0; width: auto; white-space: nowrap; height: 27px; display: inline-flex; align-items: center; } /* STEP 01 与题干之间的白色分隔线（仅 PC） */ .sn-quiz:not(.is-mobile) .sn-quiz-q--pc::before { content: ''; display: inline-block; width: 1px; height: 10px; background: #FFF; margin-right: 8px; flex-shrink: 0; align-self: center; } /* ==== 普通步骤按钮（未高亮/已完成） ==== */ .sn-quiz-step { flex: 0 0 auto; border: 0; background: #fff; color: var(--font-icon-quaternary, #808080); height: 40px; padding: 0 18px; border-radius: 10px; font-family: "Albert Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.32px; white-space: nowrap; cursor: pointer; } .sn-quiz-step.is-on { background: #ff6008; color: #fff; } .sn-quiz-step:disabled, .sn-quiz-step.is-disabled { cursor: default; opacity: 1; pointer-events: none; } .sn-quiz-q { margin: 0; width: 100%; color: #050505; font-family: var(--Shokz-Sans-Display, Pretendard); font-weight: 600; font-size: 34px; line-height: 51px; margin-bottom: 56px; text-align: center; /* 题干居中 */ } .sn-quiz-body { width: 100%; } .sn-quiz-q--pc { display: inline !important; } .sn-quiz-steps { flex-wrap: wrap; /* ← 允许换行 */ } .sn-quiz-q--mo { display: none; /* 独立题干仅在移动端显示，PC 使用步骤条内题干 */ flex-basis: 100%; /* ← 独占一整行 */ width: 100%; text-align: center; /* ← 居中 */ margin: 36px 0 20px; /* ← 与上方 tab 间距 */ } /* ==== 场景卡片（STEP 01） ==== */ .sn-quiz-scenes.swiper-container { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; } .sn-quiz-scenes .swiper-wrapper { display: contents; } .sn-quiz-scene { position: relative; border: 1px solid transparent; border-radius: 12px; width: 288px; height: 346px; flex: 0 0 auto; box-sizing: border-box; overflow: hidden; padding: 0; color: #fff; text-align: left; cursor: pointer;; } .sn-quiz:not(.is-mobile) .sn-quiz-scene { margin-right: 0 !important; } .sn-quiz-scene.is-on { border-color: #FF6008; } .sn-quiz-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .sn-quiz-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.78) 100%); pointer-events: none; transition: opacity 0.2s ease; opacity: 0; } /* 有选中时，非选中卡片加遮罩 */ .sn-quiz-scenes:has(.sn-quiz-scene.is-on) .sn-quiz-scene:not(.is-on)::after { opacity: 1; } .sn-quiz-scene-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 1; font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-PC-H6--size, 17px); font-weight: var(--text-PC-H6--weight, 500); line-height: var(--text-PC-H6--line-height, 23px); letter-spacing: var(--text-PC-H6--letter-spacing, 0); color: #FFF; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); opacity: 1; transition: opacity 0.2s ease; } .sn-quiz-scene.is-on .sn-quiz-scene-cap { opacity: 1; } .sn-quiz-scene-cap small { display: block; margin-top: 4px; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); color: #FFF; text-align: center; opacity: 0.6; } /* 有选中时，非选中卡的文字变暗 */ .sn-quiz-scenes:has(.sn-quiz-scene.is-on) .sn-quiz-scene:not(.is-on) .sn-quiz-scene-cap { opacity: 0.55; } /* ==== 选项按钮（STEP 02） ==== */ .sn-quiz-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 920px; margin: 0 auto; } .sn-quiz-choice { min-height: 72px; padding: 16px 18px; border: 1px solid #e8e8e8; background: #fff; border-radius: 16px; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 17px; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; color: #050505; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .sn-quiz-choice.is-on { background: #fff3ec; border-color: #ffb08a; } .sn-quiz-nav { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 126px; } .sn-quiz-btn { min-width: 120px; height: 44px; padding: 0 20px; border-radius: 8px; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 17px; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; cursor: pointer; } .sn-quiz-btn--prev { border: 1px solid #050505; color: #050505; } .sn-quiz-btn--next { border: 0; background: #050505; color: #fff; } .sn-quiz-btn--next:disabled { opacity: 0.35; cursor: default; } .sn-quiz-btn--ghost { border: 1px solid #050505; background: #fff; color: #111; } /* ==== 结果页（STEP 03） ==== */ .sn-quiz-result-head { text-align: center; margin-bottom: 24px; } .sn-quiz:not(.is-mobile) .sn-quiz-result-head h3 { margin: 0; color: var(--font-icon-primary, #050505); font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-PC-H3--size, 34px); font-weight: var(--text-PC-H3--weight, 600); line-height: var(--text-PC-H3--line-height, 51px); letter-spacing: var(--text-PC-H3--letter-spacing, 0); } .sn-quiz:not(.is-mobile) .sn-quiz-result-head p { margin: 8px 0 0; color: var(--font-icon-secondary, #2F2F2F); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 17px; font-weight: 400; line-height: 27px; letter-spacing: -0.68px; } .sn-quiz.is-mobile .sn-quiz-result-head h3 { margin: 0; color: var(--font-icon-primary, #050505); font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H5--size, 17px); font-style: normal; font-weight: var(--text-M-H5--weight, 500); line-height: var(--text-M-H5--line-height, 23px); letter-spacing: var(--text-M-H5--letter-spacing, 0); } .sn-quiz.is-mobile .sn-quiz-result-head p { margin: 16px 0 0; color: var(--font-icon-secondary, #2F2F2F); font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-M-H6--size, 15px); font-style: normal; font-weight: var(--text-M-H6--weight, 500); line-height: var(--text-M-H6--line-height, 22px); letter-spacing: var(--text-M-H6--letter-spacing, 0); } .sn-quiz-result-cards { display: grid; gap: 12px; max-width: 350px; margin: 0 auto; } .sn-quiz-result-cards.is-two { max-width: 720px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sn-quiz-result-card { display: flex; align-items: center; gap: 14px; padding: 12px 24px; border: 1px solid #eee; border-radius: 16px; background: #fafafa; text-align: left; text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.2s ease; } .sn-quiz-result-card.is-on { box-shadow: inset 0 0 0 2px #ff6008; } .sn-quiz-result-thumb { flex: 0 0 152px; width: 152px; height: 152px; border-radius: 10px; overflow: hidden; } .sn-quiz-result-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .sn-quiz-result-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* ========== PC 端：结果卡片文字 ========== */ .sn-quiz:not(.is-mobile) .sn-quiz-result-name { margin-top: 4px; color: #050505; font-family: var(--Shokz-Sans-Display, Pretendard), sans-serif; font-size: 19px; font-weight: 500; line-height: 26px; letter-spacing: 0; } .sn-quiz:not(.is-mobile) .sn-quiz-result-pos { color: #050505; font-family: var(--Shokz-Sans-Text, Pretendard), sans-serif; font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; opacity: 0.6; margin-top: 2px; } /* ========== 移动端：结果卡片文字 ========== */ .sn-quiz.is-mobile .sn-quiz-result-name { margin-top: 4px; color: #050505; font-family: var(--Shokz-Sans-Display, Pretendard), sans-serif; font-size: 19px; font-weight: 600; line-height: 26px; letter-spacing: 0; } .sn-quiz.is-mobile .sn-quiz-result-pos { color: #050505; font-family: var(--Shokz-Sans-Display, Pretendard), sans-serif; font-size: 19px; font-weight: 600; line-height: 26px; letter-spacing: 0; opacity: 0.6; margin-top: 2px; } .sn-quiz.is-mobile .sn-quiz-choice { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 19px; font-weight: 400; line-height: 30px; letter-spacing: -0.76px; color: #050505; } .sn-quiz-empty { margin: 0 auto; max-width: 480px; color: rgba(0, 0, 0, 0.6); font-size: 14px; line-height: 1.5; } /* PC 设计节点 889:6141：1440 × 800，卡片顶边 y=328、底边 y=674。 */ @media (min-width: 769px) { .sn-section.sn-quiz:not(.is-mobile) { padding: 0; } .sn-quiz:not(.is-mobile) > .sn-body { width: calc(100% - 48px); min-height: 800px; padding: 96px 0; gap: 0; align-items: stretch; } .sn-quiz:not(.is-mobile) > .sn-body > * { flex-shrink: 0; } .sn-quiz:not(.is-mobile) .sn-quiz-head { margin-bottom: 64px; } .sn-quiz:not(.is-mobile) .sn-quiz-sub { margin-top: 16px; } .sn-quiz:not(.is-mobile) .sn-quiz-steps { flex-wrap: nowrap; align-items: flex-end; margin-bottom: 36px; } .sn-quiz:not(.is-mobile) .sn-quiz-steps-right { gap: 10px; } .sn-quiz:not(.is-mobile) .sn-quiz-step { width: 102px; height: 38px; box-sizing: border-box; padding: 0 20px; border: 1px solid #e0e0e0; border-radius: 4px; background: rgba(255, 255, 255, 0.2); color: #8d8d8d; } .sn-quiz:not(.is-mobile) .sn-quiz-q-wrap { height: 40px; box-sizing: border-box; gap: 13px; } .sn-quiz:not(.is-mobile) .sn-quiz-q-wrap .sn-quiz-step { width: auto; height: 24px; padding: 0; } .sn-quiz:not(.is-mobile) .sn-quiz-q-wrap .sn-quiz-q { display: inline-flex !important; height: 24px; font-size: var(--text-body-size, 15px); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); } .sn-quiz:not(.is-mobile) .sn-quiz-q--pc::before { margin-right: 13px; } /* 四列共享可用宽度，避免 288px 固定卡宽在窄 PC 屏幕换行撑高模块。 */ .sn-quiz:not(.is-mobile) .sn-quiz-scenes.swiper-container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .sn-quiz:not(.is-mobile) .sn-quiz-scene { width: 100%; min-width: 0; height: 346px; } .sn-quiz:not(.is-mobile) .sn-quiz-scene-cap { bottom: 26px; } .sn-quiz:not(.is-mobile) .sn-quiz-scene-cap small { margin-top: 10px; } } @media (prefers-reduced-motion: reduce) { .sn-quiz-choice, .sn-quiz-result-card, .sn-quiz-scene::after { transition: none; } } @media (max-width: 768px) { #sn-quiz-q { display: none !important; } /* 1. 整体容器 */ .sn-quiz > .sn-body { padding: 48px 0; gap: 0; align-items: stretch; } /* 2. 标题 */ .sn-quiz-head { text-align: center; padding: 0 16px; margin-bottom: 24px; } .sn-quiz-title { font-size: 27px; line-height: 35px; font-weight: 600; letter-spacing: -0.02em; white-space: pre-line; } /* 3. 副标题 */ .sn-quiz-sub { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 17px; line-height: 23px; opacity: 0.6; margin-top: 12px; } /* 4. 步骤条 + 题干（MO） */ .sn-quiz-steps { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 11px; row-gap: 0; padding: 0 16px; margin-bottom: 0; } .sn-quiz-steps-left, .sn-quiz-steps-right { display: contents; /* ← 让按钮变成 steps 的直接 flex 子项 */ } .sn-quiz-q-wrap { display: contents; /* ← 橙色胶囊不再占位 */ } .sn-quiz-step { width: 84px; height: 39px; min-width: 84px; flex: 0 0 84px; padding: 0; display: inline-flex; align-items: center; justify-content: center; /* ★ 字体相关 */ font-family: "Albert Sans", sans-serif; font-size: 14px; font-weight: 600; line-height: normal; letter-spacing: -0.28px; border-radius: 4px; box-sizing: border-box; white-space: nowrap; background: #fff; color: #C6C6C6; border: 0; } .sn-quiz-step.is-on { background: #ff6008; color: #fff; border: 0; } .sn-quiz-step:disabled, .sn-quiz-step.is-disabled { opacity: 1; background: #fff; color: #C6C6C6; pointer-events: none; } /* 题干：PC 版隐藏 */ .sn-quiz-q--pc { display: none !important; } /* 题干：MO 版独占一行，落在三颗按钮下方 */ .sn-quiz-q--mo { display: block; flex-basis: 100%; width: 100%; margin: 24px 0 0; font-size: 17px; font-family: var(--Shokz-Sans-Display, Pretendard); line-height: 23px; font-weight: 500; color: #050505; text-align: center; } /* 5. 场景卡片滑动区（移动端 Swiper） */ .sn-quiz-body:has(.sn-quiz-scenes) { padding-left: 16px; padding-right: 0px; overflow: hidden; } .sn-quiz-scenes.swiper-container { display: block; overflow: hidden; padding: 0 0 8px 0; width: 100%; } .sn-quiz-scenes .swiper-wrapper { display: flex; align-items: stretch; } .sn-quiz-scenes .swiper-slide.sn-quiz-scene { flex: 0 0 300px; width: 300px; height: 360px; min-height: 360px; box-sizing: border-box; } .sn-quiz-scene-cap { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: 17px; font-weight: 500; line-height: 23px; } .sn-quiz-scene-cap small { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); opacity: 0.6; } /* 6. 选项（STEP 02）：根据图三、图四设计稿精准还原 */ .sn-quiz-choices { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; max-width: none; } .sn-quiz-choice { width: 100%; height: 92px; /* 设计稿高度 */ padding: 30px 32px; /* 设计稿内边距 */ display: flex; align-items: center; justify-content: center; border-radius: 10px; /* 设计稿圆角 */ border: 1px solid #C6C6C6; /* 默认边框 */ background: #F1F1F1; /* 默认背景 */ font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 19px; font-weight: 400; line-height: 30px; letter-spacing: -0.76px; box-sizing: border-box; text-align: center; } /* 选项选中状态（图四设计稿） */ .sn-quiz-choice.is-on { border: 1px solid #FF4D0A; background: rgba(255, 77, 10, 0.10); color: #050505; } /* 7. 底部按钮 */ .sn-quiz-nav { display: flex; gap: 12px; padding: 0 16px; margin-top: 34px; justify-content: center; } .sn-quiz.is-mobile .sn-quiz-btn { flex: 0 0 auto; min-width: 106px; width: auto; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } /* 8. 结果卡片 */ .sn-quiz-result-cards, .sn-quiz-result-cards.is-two { display: flex; flex-direction: column; gap: 12px; padding: 0 16px; max-width: none; } .sn-quiz-result-card { width: 100%; } .sn-quiz-result-cards:not(.is-two) .sn-quiz-result-card { margin: 83.5px 0 49.5px; box-sizing: border-box; } .sn-quiz-result-cards.is-two { gap: 12px; padding: 0 16px; } .sn-quiz-result-thumb { width: 120px; height: 120px; flex: 0 0 120px; margin-left: 45px; } } /* Blog Home Section Styles */ .sn-blog-home .sn-blog-home-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 40px; } .sn-blog-home .sn-blog-home-title { margin: 0; color: #000; font-family: 'Shokz Sans Display', 'Pretendard', sans-serif; font-size: 40px; font-weight: 600; line-height: 52px; letter-spacing: 0; } .sn-blog-home .sn-blog-home-sub { margin: 0; color: rgba(0, 0, 0, 0.6); font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.6px; } .sn-blog-home { width: 100%; padding: 0 96px; box-sizing: border-box; background: #fff; } .sn-blog-home > .sn-body { max-width: 1200px; margin: 0 auto; padding: 96px 0 0; } .sn-blog-home .blog-home-list { width: 100%; } .sn-blog-home .gall_row { margin: 0 -10px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; } .sn-blog-home .gall_li { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; box-sizing: border-box; margin-left: 0; } .sn-blog-home .col-gn-3 { width: 33.33333333%; } .sn-blog-home .gall_box { position: relative; margin: 0 0 30px 0; } /* Blog Card - 完全参考 #bo_gall .gall_con */ .sn-blog-home .blog-card { display: block; text-decoration: none; color: inherit; border-radius: 6px; overflow: hidden; } /* Image Section */ .sn-blog-home .blog-card-image { display: block; width: 384px; height: 384px; padding-bottom: 100%; position: relative; background-position: center center; background-size: cover; background-repeat: no-repeat; border-radius: 11.755px; margin: 0; } .sn-blog-home .blog-card-image.is-empty { background-color: #BFBFBF; } /* Content Section */ .sn-blog-home .blog-card-content { padding: 16px 0 0; display: flex; flex-direction: column; gap: 8px; width: 384px; box-sizing: border-box; margin: 0; } .sn-blog-home .blog-card-content .blog-card-category { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 15px); font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 24px); letter-spacing: var(--text-body-letter-spacing, -0.6px); color: rgba(0, 0, 0, 0.6); } /* Title */ .sn-blog-home .blog-card-title { font-family: var(--Shokz-Sans-Display, Pretendard); font-size: var(--text-PC-H6--size, 17px); font-weight: var(--text-PC-H6--weight, 500); line-height: var(--text-PC-H6--line-height, 23px); letter-spacing: 0; color: #000; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sn-blog-home .empty_list { color: #999; font-size: 16px; } @media (max-width: 1280px) { .sn-blog-home:not(.is-mobile) { padding: 0 48px; } } @media (max-width: 1024px) { .sn-blog-home:not(.is-mobile) { padding: 0 24px; } } @media (max-width: 768px) { .sn-blog-home:not(.is-mobile) { padding: 0 0 0 16px; overflow: hidden; } .sn-blog-home > .sn-body { padding-top: 48px; } /* 标题区：左右 16px */ .sn-blog-home .sn-blog-home-head { padding: 0; display: block; margin-bottom: 24px; } .sn-blog-home .sn-blog-home-title { font-size: 27px; line-height: 35px; white-space: nowrap; } .sn-blog-home .sn-blog-home-sub { margin-top: 6px; font-size: 15px; line-height: 1.5; } /* 防页面整体横滚 */ .sn-blog-home .blog-home-list { overflow: hidden; } /* 横滑行：左 16px（section）+ 卡 340 + 间距 11 + 右侧露出第二张 26px；一卡一停 */ .sn-blog-home .gall_row { display: flex; flex-wrap: nowrap; margin: 0; padding: 0 0 4px 0; gap: 11px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .sn-blog-home .gall_row::-webkit-scrollbar { display: none; } /* 设计稿：W/H Fixed 340px */ .sn-blog-home .gall_li.col-gn-3 { flex: 0 0 340px; width: 340px; max-width: 340px; height: 340px; padding: 0; float: none; scroll-snap-align: start; scroll-snap-stop: always; } .sn-blog-home .gall_box { margin: 0; } /* 卡片样式 */ .sn-blog-home .blog-card-image { border-radius: 12px 12px 0 0; } .sn-blog-home .blog-card-content { border-radius: 0 0 12px 12px; padding: 12px; min-height: 100px; } .sn-blog-home .blog-card-title { font-size: 16px; } } /* MO 专用结构，默认（PC）隐藏 */ .sn-blog-home .blog-card-meta { display: none; } @media (max-width: 768px) { /* 隐藏 PC 结构 */ .sn-blog-home .blog-card-content { display: none !important; } /* 显示 MO 结构 */ .sn-blog-home .blog-card-meta { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 40px 20px 20px; color: #fff; box-sizing: border-box; } /* 卡片本身要 position: relative；设计稿 340×340 */ .sn-blog-home .blog-card { position: relative; display: block; width: 340px; height: 340px; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; } /* 图片撑满正方形 */ .sn-blog-home .blog-card-image { position: absolute; inset: 0; width: 100%; height: 100%; padding-bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 0; aspect-ratio: auto; } /* 分类（NEWS / Event） */ .sn-blog-home .blog-card-meta .blog-card-category { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; line-height: 24px; letter-spacing: var(--text-body-letter-spacing, -0.6px); text-transform: uppercase; color: rgba(255, 255, 255, 1); text-align: center; } /* 标题 */ .sn-blog-home .blog-card-meta .blog-card-title { font-family: var(--Shokz-Sans-Text, Pretendard); font-size: 15px; line-height: 24px; letter-spacing: var(--text-body-letter-spacing, -0.6px); color: #fff; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: center; } /* 橙色按钮 */ .sn-blog-home .blog-card-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 44px; margin-top: 8px; border-radius: 8px; background: #FF6008; color: #fff; font-family: var(--Shokz-Sans-Text, Pretendard); font-size: var(--text-body-size, 17px); font-weight: var(--text-body-weight, 400); line-height: var(--text-body-line-height, 27px); letter-spacing: var(--text-body-letter-spacing, -0.68px); box-sizing: border-box; } .sn-home-best-card--mo .sn-home-best-mo-top { display: flex; align-items: center; /* 基线对齐，视觉上更自然 */ justify-content: space-between; /* 两端对齐 */ gap: 8px; margin-bottom: 6px; /* 标题到卖点的间距 */ } .sn-home-best-card--mo .sn-home-best-mo-top .sn-home-best-mo-title { margin-bottom: 0; /* 重置原来的底部间距 */ flex: 1; min-width: 0; } .sn-home-best-card--mo .sn-home-best-mo-top .sn-home-best-rate { flex-shrink: 0; /* 防止评分被挤压换行 */ position: relative; top: -5px; } } .sn-quiz.is-mobile .sn-quiz-q--mo { display: block; margin: 24px 0 24px; } .sn-quiz.is-mobile > .sn-body { gap: 0; } .sn-quiz.is-mobile .sn-quiz-head { margin-bottom: 24px; } .sn-quiz.is-mobile .sn-quiz-steps { row-gap: 0; margin-bottom: 0; } .sn-quiz.is-mobile .sn-quiz-result-head { margin-top: 24px; } .sn-quiz.is-mobile .sn-quiz-result-head p { margin: 16px 0 0; } .sn-quiz.is-mobile .sn-quiz-result-cards, .sn-quiz.is-mobile .sn-quiz-result-cards.is-two { margin: 24px auto 0; } .sn-whyHome:not(.is-mobile) .sn-whyHome-card { /* 与 track 位移同时长/缓动，真实 width 撑开（非 scale） */ transition: background 0.45s ease, box-shadow 0.45s ease, color 0.35s ease, padding 0.35s ease, width 0.45s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 0.45s cubic-bezier(0.22, 1, 0.36, 1), min-width 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .sn-whyHome:not(.is-mobile) .sn-whyHome-card.is-on { /* 设计稿选中 324×300（未选中 220×300） */ width: 324px !important; flex-basis: 324px !important; min-width: 324px !important; }