/* ============================================================ 紅磡新海濱官网首页样式 设计稿基准：1920px 宽，1rem = 100px 缩放机制：1920px 以下根字号随视口等比缩放（1rem = 100vw/19.2）， 1920px 及以上固定 1rem = 100px（页面不放大） ============================================================ */ html { font-size: 100px; font-size: calc(100vw / 19.2); font-size: -webkit-calc(5.20833333vw); } img { /* IE10/11 不支持 object-fit，降级处理见 js/home.js 末尾（背景图 cover 方案） */ object-fit: cover; } /* 超大屏（≥1920px）：保持设计稿基准，页面不放大 */ @media screen and (min-width: 1920px) { html { font-size: 100px; } } /* ============================================================ 全屏滚动布局（每屏一个完整模块，鼠标滚动整页滑动） ============================================================ */ html, body { height: 100%; } /* 任何情况下（含 macOS 外接鼠标触发的「经典常显」滚动条、JS 未初始化时的首帧闪现） 均不显示文档级滚动条：只隐藏滚动条、不影响页面滚动。 注意：Safari 原生滚动模式下实际滚动容器是 body，html/body 两处滚动条都必须隐藏 */ html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Firefox / 旧 Edge(Chromium 前) 的标准滚动条隐藏兜底 */ html, body { scrollbar-width: none; -ms-overflow-style: none; } /* 仅在 JS 成功初始化（html.fp-init）后才锁定滚动： 避免脚本异常 / 初始化失败（如 Safari 事件异常）时页面被 overflow:hidden 锁死而无法滚动 */ html.fp-init, html.fp-init body { overflow: hidden; /* 禁用触摸滚动/缩放（仅 PC 全屏滚动模式）：iOS Safari 中 document 级 touchmove preventDefault 无效，需 CSS touch-action 从浏览器层面禁用，保证全屏触摸滑动稳定生效 */ touch-action: none; -ms-touch-action: none; /* 触控板滚动溢出兑底：新版 Safari 支持后自动禁用橡皮筋回弹（旧版本忽略该属性，无害）； -ms-scroll-chaining 为 IE11 的 overflow 链式滚动开关 */ overscroll-behavior: none; -ms-scroll-chaining: none; } /* Safari 原生滚动模式（JS 在检测到 macOS Safari 时给 添加 fp-scroll-mode 类）： macOS Safari 触控板滚动在页面不可滚（overflow:hidden）时不派发 wheel 事件， 故 Safari 下改由 scroll 事件驱动整屏切换——页面需保持可滚。 此处覆盖 fp-init 的锁定，并隐藏滚动条保持全屏观感（隐藏后触控板滚动不受影响） */ html.fp-scroll-mode, html.fp-scroll-mode body { overflow: auto; touch-action: auto; -ms-touch-action: auto; /* scroll-snap 需作用在实际滚动容器上（html/body 双保险） */ scroll-snap-type: y mandatory; -webkit-scroll-snap-type: y mandatory; /* 标准属性滚动条隐藏兜底（Firefox 等） */ scrollbar-width: none; -ms-overflow-style: none; } /* body 默认 8px 边距会使吸附点偏移，置 0 保证整屏精确对齐 */ html.fp-scroll-mode body { margin: 0; } /* CSS scroll-snap 原生整屏吸附：滚动停止时由浏览器合成器自动对齐最近屏， 不依赖 JS scrollTo（macOS Safari 上滚动中 scrollTo 无效、停止后时机不可靠）， 是 Safari 触控板「整屏切换」最可靠的实现方式。 注意：吸附目标 .page 本身绝不能带 transform（WebKit 中会使 scroll-snap-align 失效） */ html.fp-scroll-mode .page { scroll-snap-align: start; -webkit-scroll-snap-align: start; /* 尽量让每次滚动停一屏（Safari 支持弱时忽略，至少保证整屏吸附） */ scroll-snap-stop: always; } /* 注意：曾尝试将 .fp-container 整体提升合成层（translateZ(0)）， 但 Safari 会把 6 屏合并为一个大层后更激进地丢弃离屏栅格（连文字都空白），已回退 */ html.fp-scroll-mode .fp-container { touch-action: auto; -ms-touch-action: auto; } html.fp-scroll-mode::-webkit-scrollbar, html.fp-scroll-mode body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Safari 原生滚动模式：将每个模块容器提升为独立合成层（translateZ(0)）， 防止页面滚出视口后 Safari 释放离屏渲染结果（布局/绘制/图片解码缓存）， 回滚到上一屏时整屏重新渲染 → 表现为「内容重新加载」（空白闪烁）。 合成层在滚动期间由 GPU 保留，回滚直接合成显示，无需重新布局/绘制/解码。 注意：只能作用于 .page 的子容器，绝不能对 .page 整屏加 transform —— WebKit 中 scroll-snap 目标元素带 transform 会使 scroll-snap-align 失效（滑动不吸附）； 也不能用 backface-visibility:hidden（Safari 白屏缺陷） */ html.fp-scroll-mode .page > * { -webkit-transform: translateZ(0); transform: translateZ(0); /* 提示 WebKit 该层将参与滚动合成，尽量驻留离屏图层内容（配合 JS 追屏预解码，双保险消除回切空白） */ will-change: transform; } /* 图片再提升一层（双保险）：解码纹理驻留 GPU，避免滚动中重新解码 */ html.fp-scroll-mode .page img { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } .fp-container { height: 100%; } /* PC 全屏滚动模式：禁用容器内触摸滚动/缩放（iOS Safari 需 touch-action 才可靠） */ html.fp-init .fp-container { touch-action: none; -ms-touch-action: none; } .page { position: relative; height: 100%; overflow: hidden; } .more-arr { display: inline-block; width: 0.28rem; height: 0.28rem; margin-left: .21rem; } /* ---------- 通用：纯CSS箭头（IE11兼容） ---------- */ .arr { display: inline-block; width: 0.12rem; height: 0.12rem; border: solid #ffffff; border-width: 2px 2px 0 0; } .arr-r { -ms-transform: rotate(45deg); transform: rotate(45deg); } .arr-l { -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .arr-d { -ms-transform: rotate(135deg); transform: rotate(135deg); } /* ---------- 通用：板块标题组件（4px竖条 + 中文标题 + 英文副标题） ---------- */ .sec-title { position: relative; padding-left: 0.32rem; } .sec-title .bar { position: absolute; left: 0; top: 0.11rem; width: 0.04rem; height: 90%; background: #623DC2; } .sec-title h2 { font-family: "Microsoft YaHei"; font-weight: bold; font-size: 50px; font-size: 0.5rem; letter-spacing: 0.05em; line-height: 0.66rem; color: #333333; } .sec-title .en { margin-top: 0.04rem; font-family: "Inter"; font-weight: 300; font-size: 30px; font-size: 0.3rem; line-height: 0.36rem; text-transform: uppercase; color: #333333; } /* 深色背景上的白色标题 */ .sec-title.light h2, .sec-title.light .en { color: #ffffff; } .sec-title.light .bar { background: #ffffff; } /* 浅紫色竖条（場地租賃/聯繫我們） */ .sec-title.bar-deep .bar { background: #7554cb; } /* ---------- 通用：查看更多按钮（紫渐变 + 0 30px圆角） ---------- */ .btn-more { display: block; width: 2.12rem; height: 0.66rem; line-height: 0.66rem; border-radius: 0 0.3rem; background: linear-gradient(270deg, #9780d3 0%, #623DC2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#623DC2', endColorstr='#9780d3', GradientType=1); font-family: "Microsoft YaHei"; font-size: 24px; font-size: 0.24rem; color: #ffffff; padding-left: 0.44rem; box-sizing: border-box; position: relative; transition: opacity 0.3s; -ms-transition: opacity 0.3s; } .btn-more:hover { opacity: 0.85; color: #ffffff; } .btn-more .arr { position: absolute; right: 0.26rem; top: 50%; margin-top: -0.06rem; } /* ============================================================ 模块1：头部导航（固定定位，滚动加深色背景） ============================================================ */ .header { position: absolute; top: 0; left: 0; width: 19.2rem; z-index: 999; } .header-lang::before { content: ""; background-image: url(../images/arrow-d.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; right: 0.07rem; top: 50%; width: 0.23rem; height: 0.23rem; -ms-transform: translateY(-50%); transform: translateY(-50%); } .header-lang.open::before { -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } /* 白色头部（模块1/3/5，深色底）：白色图标 + 白色文字 */ .hd-white .header-logo img { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1); } .hd-white .header-lang { background: rgba(0, 0, 0, 0.22); } .hd-purple .header-nav li .c1 { color: #333333; } .hd-purple .header-nav li.cur .c1 { color: #623DC2; } .hd-purple .header-nav li.cur .c1::after { background: #623DC2; } .hd-purple .header-lang { color: #fff; background: rgba(78, 0, 160, 0.3); } .hd-purple .header-lang .arr { border-color: #623DC2; } .header-inner { width: 100%; margin: 0 auto; height: 0.8rem; position: relative; top: 0.37rem; } .header-logo { position: absolute; left: 0.7rem; top: 0; } .header-logo img { width: 3rem; } /* 导航菜单：首頁24px加粗+下划线，其余22px */ .header-nav { position: absolute; right: 2.94rem; top: 0; } .header-nav li { float: left; position: relative; margin-right: 0.92rem; } .header-nav li a { display: block; font-family: "Microsoft YaHei"; font-size: 0.22rem; line-height: 0.8rem; color: #ffffff; padding-bottom: 0; transition: opacity 0.3s; -ms-transition: opacity 0.3s; } .header-nav li a:hover { opacity: 0.8; } .header-nav li.cur>a { font-size: 24px; font-size: 0.24rem; font-weight: bold; } .header-nav li.cur>a:after { content: ""; position: absolute; left: 0; bottom: 0.09rem; width: 100%; height: 0.04rem; background: #ffffff; } /* 语言切换胶囊 */ .header-lang { position: absolute; right: 1rem; top: 0.23rem; width: 1.12rem; height: 0.35rem; line-height: 0.35rem; border-radius: 0.09rem; background: rgba(0, 28, 67, 0.3); font-size: 0.16rem; color: #ffffff; cursor: pointer; padding: 0 0.07rem 0 0.14rem; box-sizing: border-box; } /* 语言下拉菜单 */ .hl-drop { display: none; position: absolute; left: 0; right: 0; top: 0.41rem; margin: 0; padding: 0.06rem 0; list-style: none; background: #ffffff; border-radius: 0.09rem; box-shadow: 0 0.06rem 0.18rem rgba(0, 0, 0, 0.2); z-index: 100; } .hl-drop li a { display: block; height: 0.34rem; line-height: 0.34rem; font-size: 0.16rem; color: #2B1075; text-align: center; cursor: pointer; transition: background 0.2s, color 0.2s; -ms-transition: background 0.2s, color 0.2s; } .hl-drop li a:hover, .hl-drop li.cur a { font-weight: bold; } /* ============================================================ 导航二级菜单（hover 展开，样式与语言切换下拉 .hl-drop 一致） ============================================================ */ .hn-drop { display: none; position: absolute; left: 50%; top: 100%; margin: 0; padding: 0; /* IE10/11：-ms-linear-gradient 仅支持方向关键词（right=渐变起点在右，等价于标准 270deg=to left）； #9780d300 为 8 位 RGBA 十六进制，IE 不支持，需改为 rgba() */ background: -ms-linear-gradient(right, rgba(151, 128, 211, 0) 0%, #6440c3 50%, rgba(151, 128, 211, 0) 100%); background: linear-gradient(270deg, rgba(151, 128, 211, 0) 0%, #6440c3 50%, rgba(151, 128, 211, 0) 100%); border-radius: 0; box-shadow: none; z-index: 100; height: 0.52rem; width: max-content; /* 现代浏览器：宽度=所有子 li 之和，不受父 li 宽度限制 */ max-width: 90vw; /* 内容过长时防止溢出视口 */ -ms-transform: translateX(-50%); transform: translateX(-50%); align-items: center; justify-content: center; padding: 0 .42rem; } /* 向上的三角箭头：hn-drop 以触发它的 li 为中心居中，三角置于顶部中央指向对应一级菜单 */ .hn-drop::before { content: ""; position: absolute; left: 50%; top: -0.08rem; margin-left: -0.09rem; border-width: 0 0.09rem 0.08rem; border-style: solid; border-color: transparent transparent rgba(100, 64, 195, 0.8) transparent; /* IE11 不支持 4 参数 rgb()，须用 rgba() */ } .header-nav li:hover>.hn-drop { display: flex; } /* 覆盖 .header-nav li 的浮动与间距，保证二级项纵向排列 */ .hn-drop li { float: none; margin-right: 0; } .hn-drop li a { display: block; height: 0.52rem; line-height: 0.52rem; font-size: 0.2rem; color: #ffffff; text-align: center; cursor: pointer; white-space: nowrap; padding: 0 .34rem; } .hn-drop li a:hover { color: #ffffff; opacity: 1; font-weight: bold; } .hn-drop li.cur>a { color: #ffffff; font-weight: bold; } /* IE11 兜底：不支持 max-content，改用 display:table， 表格自动宽度按内容（所有子 li）计算，不受父 li 宽度限制 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .header-nav li:hover>.hn-drop { display: table; table-layout: auto; } .hn-drop li { display: table-cell; white-space: nowrap; } } /* ============================================================ 模块2：Banner轮播（Swiper 4.5.1，全屏1920x1080） ============================================================ */ .banner { position: relative; height: 100%; overflow: hidden; background: #000000; } /* Banner 顶部遮罩：深色渐变压暗图片顶部，保证白色头部图标/导航清晰可见 */ .banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3.4rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0) 100%); z-index: 4; pointer-events: none; } .banner-swiper { width: 100%; height: 100%; } .banner-swiper .swiper-slide { position: relative; /* 作为 slide 内 banner-content 的定位上下文 */ overflow: hidden; } .banner-swiper .swiper-slide img { width: 100%; height: 100%; } /* 主文案：每张 banner 图对应一套文案（置于对应 swiper-slide 内，垂直位置按视口高度百分比自适应） */ .banner-content { position: absolute; left: 1.01rem; top: 28%; z-index: 5; color: #ffffff; pointer-events: none; } .banner-title { font-family: "Inter"; font-weight: 600; font-size: 92px; font-size: 0.92rem; line-height: 1.21; text-transform: uppercase; } .banner-sub { margin-top: 0.21rem; font-family: "Microsoft YaHei"; font-size: 50px; font-size: 0.5rem; line-height: 1.32; } /* 前后导航圆钮（63px描边圆） */ .banner-ctrl { position: absolute; left: 1.01rem; bottom: 14%; z-index: 6; } .banner-btn { float: left; width: 0.63rem; height: 0.63rem; border: 1px solid #ffffff; border-radius: 50%; margin-right: 0.2rem; position: relative; cursor: pointer; background: transparent; outline: none; transition: background 0.3s; -ms-transition: background 0.3s; } .banner-btn:hover { background: rgba(255, 255, 255, 0.2); } .banner-btn .arr { position: absolute; top: 50%; left: 50%; margin: -0.06rem 0 0 -0.08rem; } .banner-btn .arr-l { margin-left: -0.04rem; } /* 分页器（底部居中，按视口高度百分比定位） */ .banner .banner-pagination { position: absolute; left: 0; right: 0; bottom: 8.4%; z-index: 6; text-align: center; } .banner .swiper-pagination-bullet { display: inline-block; width: 0.1rem; height: 0.1rem; border-radius: 50%; background: #ffffff; opacity: 1; filter: alpha(opacity=100); margin: 0 0.09rem; cursor: pointer; } .banner .swiper-pagination-bullet-active { position: relative; } .banner .swiper-pagination-bullet-active::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.17rem; height: 0.17rem; border-radius: 50%; background: transparent; border: 0.01rem solid #FFFFFF; } /* ============================================================ 模块3：最新資訊（左侧标题+计数器+按钮，右侧3卡片轮播） ============================================================ */ .news { position: relative; background: #ffffff; overflow: hidden; height: 100%; background: url(../images/deco-bg.png) no-repeat; background-size: 100% auto; } .news-inner { position: relative; z-index: 2; padding-top: 2rem; } /* 左侧栏 */ .news-left { float: left; margin-left: 1rem; width: 3.77rem; } /* 数字计数器 02 / 05 + 小箭头 */ .news-counter { position: relative; margin: 3.86rem 0 0 0.21rem; width: 1.77rem; height: 0.48rem; line-height: 0.48rem; } .news-counter .nc-btn { position: absolute; top: 0.16rem; width: 0.16rem; height: 0.16rem; cursor: pointer; background: transparent; outline: none; padding: 0; } .news-counter .nc-btn .arr { border-color: #999999; width: 0.1rem; height: 0.1rem; } .news-counter .nc-prev { left: 0; } .news-counter .nc-next { right: 0; } .news-counter .nc-text { text-align: center; font-family: "Microsoft YaHei"; } .news-counter .nc-cur { font-weight: bold; font-size: 36px; font-size: 0.36rem; color: #623DC2; } .news-counter .nc-total { font-size: 24px; font-size: 0.24rem; color: #999999; margin-left: .1rem; } .news-more { margin: 0.22rem 0 0 0.04rem; } /* 右侧卡片轮播 */ .news-swiper-wrap { float: left; margin-left: 0; width: 13.42rem; } .news-swiper { width: 13.42rem; height: 6.41rem; } /* 资讯卡片 420x640，hover显示阴影+底部紫条+标题变紫 */ .news-card { width: 4.2rem; height: 6.4rem; background: #ffffff; position: relative; cursor: pointer; transition: box-shadow 0.3s; -ms-transition: box-shadow 0.3s; } .news-card:hover { box-shadow: 0 0.04rem 0.26rem rgba(37, 47, 129, 0.3); } .news-card .card-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.1rem; background: #623DC2; opacity: 0; filter: alpha(opacity=0); transition: opacity 0.3s; -ms-transition: opacity 0.3s; } .news-card:hover .card-bar { opacity: 1; filter: alpha(opacity=100); } .news-date { padding: 0.42rem 0.31rem 0; overflow: hidden; } .news-date .d { float: left; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 42px; font-size: 0.42rem; line-height: 0.55rem; color: #3d3d3d; } .news-date .ym { float: left; margin: 0.19rem 0 0 0.16rem; font-family: "Microsoft YaHei"; font-size: 22px; font-size: 0.22rem; color: #999999; } .news-tt { margin: 0.67rem 0.31rem 0; font-family: "Microsoft YaHei"; font-size: 20px; font-size: 0.2rem; line-height: 0.36rem; height: 0.72rem; overflow: hidden; color: #333333; transition: color 0.3s; -ms-transition: color 0.3s; } .news-card:hover .news-tt { color: #623DC2; font-weight: bold; } .news-pic { margin: 0.24rem 0.3rem 0; width: 3.6rem; height: 2.03rem; overflow: hidden; } .news-pic img { width: 100%; height: 100%; } /* 左下角渐变圆形箭头按钮 */ .news-go { position: absolute; left: 0.3rem; bottom: .47rem; display: block; } .news-go::before { content: ""; position: absolute; left: 0; bottom: 0; display: inline-block; background: url(../images/arrow-w-btn.png) no-repeat center center; background-size: 100% 100%; width: .55rem; height: .55rem; border-radius: 50%; } .news-card:hover .news-go::before { background: url(../images/arrow-p-btn.png) no-repeat center center; background-size: 100% 100%; } /* ============================================================ 模块4：活動展演（深色底 + 渐变紫条 + 自由宽度轮播） ============================================================ */ .activity { position: relative; height: 100%; overflow: hidden; /* 双层背景：底层 activity-bg 全屏铺满；上层 activity-bottom-bg 只占下半屏（水平居中、贴底）。 注意：background 多层时第一层渲染在最上方，因此下半屏装饰图放前面、全屏底图放后面 */ background: url(../images/activity-bottom-bg.png) center bottom / 100vw 57.5vh no-repeat, url(../images/activity-bg.png) center / cover no-repeat; } .activity .sec-title { position: absolute; left: 1rem; top: 19%; z-index: 4; } /* 装饰文案（占左侧 5.97rem/597px 文字区，右缘 5.94rem 不越过文字区边界） */ .act-info { position: absolute; left: 1.34rem; top: 47.2%; z-index: 4; width: 4.6rem; color: #ffffff; /* 与原有 h3 文字样式一致：微软雅黑 50px / 0.66rem 行高 */ font-family: "Microsoft YaHei"; font-size: 50px; font-size: 0.5rem; font-weight: normal; line-height: 0.66rem; /* 最多 3 行，超出省略 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; box-sizing: border-box; max-height: 2rem; } /* 前后导航（43px描边圆钮） */ .act-ctrl { position: absolute; left: 4rem; bottom: 10%; z-index: 5; } .act-btn { float: left; margin-right: 0; cursor: pointer; } .act-btn .s-arr { display: inline-block; background: url(../images/swiper-l.png) no-repeat; background-size: 100% 100%; width: 0.45rem; height: 0.45rem; } .act-btn .s-arr-r { margin-left: 0.34rem; transform: rotate(180deg); } .act-btn .s-arr:hover { background: url(../images/swiper-r.png) no-repeat; background-size: 100% 100%; transform: rotate(0); width: 0.45rem; height: 0.45rem; } .act-btn .s-arr:hover.s-arr-l { transform: rotate(180deg); } /* 活動展演 轮播：slidesPerView auto（slide 宽度由 CSS 5.04rem 决定，不被容器压缩），中间大、两边小。 布局：左侧文字区占 5.97rem（597px），容器从 5.97rem 起占据右侧剩余空间（宽 15.92rem，中心 13.93rem）； 中间卡中心 ≈ 13.93rem（右移），右卡视觉右缘 ≈ 21.42rem 超出页面 19.2rem 只露半张（≈222px）； 左卡完整可见于 ≈6.44~10.88rem，与文字区右缘 5.94rem 无重叠 */ .act-swiper { position: absolute; left: 5.97rem; bottom: 10%; width: 15.92rem; /* height: 59.5%; */ z-index: 4; } .act-slide.swiper-slide-active img { border: 0.05rem solid #FFFFFF; border-radius: 0.42rem; box-sizing: border-box; } .act-slide { width: 5.04rem; } .act-slide .act-img { height: 6.43rem; border-radius: 0.42rem; overflow: hidden; transform: scale(0.88); transition: transform 0.5s ease; } .act-img img { width: 100%; height: 100%; object-fit: cover; } /* 中间（active）卡片原尺寸 504×643px，两侧卡片 scale(0.88) 缩至 444×566px */ .act-slide.swiper-slide-active .act-img { transform: scale(1); } /* ============================================================ 模块5：場地租賃（左文右图 + 底部四色特性条，flex 纵向：内容区自适应） ============================================================ */ .venue { overflow: hidden; height: 100%; background: url(../images/venue-bg.png) no-repeat; background-size: 100% auto; } .venue-inner { position: relative; z-index: 2; padding-top: 2rem; -ms-flex: 1; flex: 1; min-height: 0; } .venue-left { float: left; margin-left: 1.02rem; width: 3.4rem; } .venue-left .sec-title { margin-top: 0.09rem; } .venue-left .btn-more { margin-top: 1.94rem; } /* 主图组合：双层渐变底 + 794x403 实景图 */ .venue-pic { float: left; position: relative; margin-left: 0.23rem; width: 8.29rem; height: 4.34rem; } .venue-pic .d1 { position: absolute; left: 0; top: 0; width: 4.61rem; height: 3.27rem; background: linear-gradient(180deg, #7554cb 0%, rgba(117, 84, 203, 0) 94%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7554cb', endColorstr='#007554cb', GradientType=0); } .venue-pic .d2 { position: absolute; left: 3.13rem; top: 1.19rem; width: 5.16rem; height: 3.15rem; background: linear-gradient(180deg, rgba(117, 84, 203, 0) 0%, #0088ff 94%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007554cb', endColorstr='#0088ff', GradientType=0); } .venue-pic .vp { position: absolute; left: 0.18rem; top: 0.16rem; width: 7.94rem; height: 4.03rem; } .venue-text { float: left; width: 6.2rem; box-sizing: border-box; padding: .22rem 1.21rem 0 .36rem; } .venue-text .num { font-family: "Microsoft YaHei"; line-height: 0.5rem; color: #7554CB; font-size: .5rem; font-weight: bold; } .venue-text .text { font-family: "Microsoft YaHei"; font-size: 0.2rem; line-height: 0.36rem; color: #333; margin-top: .3rem; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; height: 3.25rem; box-sizing: border-box; } /* 底部特性条：1920x220，四列四色（固定高度，贴底） */ .venue-features { clear: both; position: relative; z-index: 2; margin-top: .35rem; height: 2.2rem; -ms-flex: 0 0 auto; flex: 0 0 auto; } .vf-col { float: left; width: 25%; height: 2.2rem; position: relative; } .vf-col.c1 { background: #9780d3; } .vf-col.c2 { background: #8668d2; } .vf-col.c3 { background: #7d5bd7; } .vf-col.c4 { background: #7554cb; } .vf-icon { position: absolute; left: 1.02rem; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: .96rem; } .vf-col.c2 .vf-icon { left: 0.77rem; } .vf-col.c3 .vf-icon { left: 0.87rem; } .vf-col.c4 .vf-icon { width: 1.3rem; left: 0.75rem; } .vf-text { position: absolute; left: 2.12rem; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .vf-col.c2 .vf-text { left: 2.14rem; } .vf-col.c3 .vf-text { left: 2.18rem; } .vf-col.c4 .vf-text { left: 2.42rem; } .vf-text .en { font-family: "Inter"; font-size: 22px; font-size: 0.22rem; line-height: 0.3rem; color: #ffffff; } .vf-text .cn { margin-top: 0.09rem; font-family: "Microsoft YaHei"; font-size: 20px; font-size: 0.2rem; line-height: 0.3rem; color: #ffffff; } /* ============================================================ 模块6：文創周邊（深色底 + 三产品卡片） ============================================================ */ .products { background: #000000; overflow: hidden; height: 100%; background: url(../images/products-bg.png) no-repeat; background-size: 100% auto; } .products-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .products-bg img { width: 100%; height: 100%; } .products-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(270deg, #9780d3 1%, #000000 99%); opacity: 0.35; filter: alpha(opacity=35); } .products-inner { position: relative; z-index: 3; padding-top: 2rem; } .products-left { float: left; margin-left: 1.02rem; width: 4.4rem; } .products-left .btn-more { margin-top: 2.38rem; } /* 产品卡片列表：400x407，间距29px */ .products-list { float: left; margin-left: 0.18rem; } .product-card { float: left; width: 4rem; height: 4.07rem; margin: 0.53rem 0.29rem 0 0; position: relative; cursor: pointer; transition: transform 0.3s; -ms-transition: transform 0.3s; background: #fff; border-radius: 0.2rem 0.2rem 0 0.6rem; box-shadow: 0 0.04rem 0.1rem rgba(0, 0, 0, 0.3); position: relative; } .product-card:hover { -ms-transform: translateY(-0.08rem); transform: translateY(-0.08rem); } /* 图片区：圆角 20 20 0 60 */ .product-img { position: absolute; left: 0; top: 0; width: 4rem; height: 2.61rem; border-radius: 0.2rem 0.2rem 0 0.6rem; overflow: hidden; background: #9780d3; } .product-img img { width: 100%; height: 100%; } /* 信息区：圆角 0 0 0 60 + 投影 */ .product-body { position: absolute; left: 0; top: 1.46rem; width: 4rem; height: 2.61rem; } .product-name { margin: 1.52rem 0 0 0.38rem; font-family: "Microsoft YaHei"; font-size: 20px; font-size: 0.2rem; line-height: 0.3rem; color: #3d3d3d; max-width: 69%; } .product-price { margin: 0.11rem 0 0 0.38rem; font-family: "Inter"; font-size: 20px; font-size: 0.2rem; line-height: 0.3rem; color: #3d3d3d; max-width: 69%; } /* 渐变圆形按钮 */ .product-btn { position: absolute; right: 0.37rem; top: 1.55rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; } .product-btn::after { content: ""; display: block; width: 100%; height: 100%; background: url(../images/p-shopping-w.png) no-repeat center center; background-size: cover; } .product-card:hover .product-btn::after { background: url(../images/p-shopping-p.png) no-repeat center center; background-size: cover; } /* 底部渐变装饰条 */ .product-card:hover::after { position: absolute; left: 0.27rem; bottom: 0; width: 3.73rem; height: 0.1rem; background: linear-gradient(270deg, #9780d3 0%, #623DC2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#623DC2', endColorstr='#9780d3', GradientType=1); content: ""; display: block; border-radius: 0 0 0 0.6rem; } .products-icons { padding: .8rem 0 0 1.02rem; display: flex; align-items: center; gap: 1.27rem; } .products-icons img { width: 1.1rem; height: 1.1rem; } /* 渐变紫条装饰（10条，透明度1.0递减至0.1） */ .purple-bars { position: absolute; left: 0; top: 0; bottom: 0; width: 13.66rem; z-index: 2; pointer-events: none; } .purple-bars span { float: left; width: 1.366rem; height: 100%; background: #9780d3; opacity: 0.1; filter: alpha(opacity=10); } .purple-bars span:nth-child(1) { opacity: 1; filter: alpha(opacity=100); } .purple-bars span:nth-child(2) { opacity: 0.9; filter: alpha(opacity=90); } .purple-bars span:nth-child(3) { opacity: 0.8; filter: alpha(opacity=80); } .purple-bars span:nth-child(4) { opacity: 0.7; filter: alpha(opacity=70); } .purple-bars span:nth-child(5) { opacity: 0.6; filter: alpha(opacity=60); } .purple-bars span:nth-child(6) { opacity: 0.5; filter: alpha(opacity=50); } .purple-bars span:nth-child(7) { opacity: 0.4; filter: alpha(opacity=40); } .purple-bars span:nth-child(8) { opacity: 0.3; filter: alpha(opacity=30); } .purple-bars span:nth-child(9) { opacity: 0.2; filter: alpha(opacity=20); } .purple-bars span:nth-child(10) { opacity: 0.1; filter: alpha(opacity=10); } /* 文创区使用：翻转到右侧 */ .purple-bars.flip { left: auto; right: 0; -ms-transform: rotate(180deg); transform: rotate(180deg); } /* ============================================================ 模块7：聯繫我們（地图 + 紫色渐变信息面板） ============================================================ */ .contact { position: relative; overflow: hidden; height: 100%; background: url(../images/deco-bg.png) no-repeat; background-size: 100% auto; } .contact .sec-title { position: absolute; left: 1.02rem; top: 2.4rem; } /* 地图 848x407 */ .contact-map { position: absolute; left: 4.4rem; top: 2.73rem; width: 8.48rem; height: 4.07rem; overflow: hidden; } .contact-map img { width: 100%; height: 100%; } /* 渐变信息面板 1141x391 */ .contact-panel { position: absolute; right: 0; top: 2.4rem; width: 11.41rem; height: 3.91rem; padding-top: .5rem; box-sizing: border-box; background: linear-gradient(270deg, #623DC2 0%, #9780d3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9780d3', endColorstr='#623DC2', GradientType=1); } .cp-row { padding: .41rem 0 0 4.21rem; overflow: hidden; font-family: "Microsoft YaHei"; font-size: 0.28rem; line-height: 0.46rem; color: #ffffff; } .cp-row img { margin-right: .15rem; width: .5rem; } /* ============================================================ 模块6：聯繫我們 + 页脚（合并为一个全屏模块，flex 纵向布局） ============================================================ */ .page-contact { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .page-contact .header { position: absolute; z-index: 999; } .page-contact .contact { position: relative; top: auto; left: auto; right: auto; bottom: auto; height: auto; -ms-flex: 1; flex: 1; min-height: 0; overflow: hidden; } .page-contact .contact .sec-title { top: 1.57rem; } .page-contact .contact-map { top: 1.6rem; position: relative; z-index: 2; width: 6.94rem; height: 3.58rem; } .page-contact .contact-map::after { content: ""; position: absolute; top: 1.2rem; left: 3.11rem; background: url(../images/map-position.png) no-repeat center center; background-size: cover; width: .54rem; height: .7rem; } .page-contact .contact-map img { width: 100%; height: 100%; } .page-contact .contact-panel { top: 1.27rem; width: 11.41rem; height: 3.91rem; } .page-contact .footer { position: relative; bottom: auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media screen and (max-width: 1700px) and (max-height: 1050px) { .news, .venue, .products { background-size: 100% 100%; } .news-inner, .venue-inner, .products-inner { padding-top: 3.7rem; } .venue-features { margin-top: 1rem; } .products-icons { padding-top: 1.2rem; } .page-contact .contact .sec-title { top: 3rem; } .page-contact .contact-panel { top: 3.1rem; width: 10.41rem; } .page-contact .contact-map { position: relative; top: 3.43rem; } .cp-row { padding: .28rem 0 0 3.1rem; } } @media screen and (max-width: 1700px) and (max-height: 900px) { .news, .venue, .products { background-size: 100% 100%; } .news-inner, .venue-inner, .products-inner { padding-top: 2rem; } .venue-features { margin-top: .2rem; } .products-icons { padding-top: .5rem; } .page-contact .contact .sec-title { top: 1.8rem; } .page-contact .contact-panel { top: 1.4rem; width: 10.41rem; height: 3.3rem; padding-top: .2rem; } .page-contact .contact-map { position: relative; top: 1.6rem; height: 3.1rem; } .cp-row { padding: .28rem 0 0 3.1rem; } } @media screen and (max-width: 1500px) and (max-height: 900px) { .news, .venue, .products { background-size: 100% 100%; } .news-inner, .venue-inner, .products-inner { padding-top: 2rem; } .venue-features { margin-top: .7rem; } .products-icons { padding-top: 1rem; } .page-contact .contact .sec-title { top: 2rem; } .page-contact .contact-panel { top: 1.7rem; width: 10.41rem; } .page-contact .contact-map { position: relative; top: 2.03rem; } .cp-row { padding: .28rem 0 0 3.1rem; } } @media screen and (max-width: 1200px) { .news, .venue, .products { background-size: 100% 100%; } .news-inner, .venue-inner, .products-inner { padding-top: 3.1rem; } .venue-features { margin-top: 1rem; } .products-icons { padding-top: 1rem; } .page-contact .contact .sec-title { top: 3.13rem; } .page-contact .contact-panel { top: 2.7rem; width: 10.41rem; } .page-contact .contact-map { position: relative; top: 3.03rem; } } /* ============================================================ 响应式：≤1024px 整页按 100vw/19.2 等比缩放（平板768/手机375通用） ============================================================ */ @media screen and (max-width: 1024px) { .header-inner { width: 100%; } } /* ============================================================ H5 自适应（视口宽 ≤ 768px） 取消全屏滚动：常规文档流滚动；仅保留第一个头部并吸顶（导航可横向滑动）； 页面最大宽度 768px 居中；各模块按 PC 版排版纵向堆叠；图标沿用 PC 原图、尺寸按 H5 适配 ============================================================ */ @media screen and (max-width: 768px) { body { font-size: 0.16rem; min-width: 0; max-width: none; } html, body, html.fp-init, html.fp-init body { height: auto; overflow: auto; } /* 内容主体：最大宽度 768px 居中 */ .fp-container { height: auto; max-width: 7.68rem; margin: 0 auto; overflow: hidden; } .page { height: auto; overflow: visible; } /* ---------- 通用：板块标题 / 查看更多按钮 缩小适配 ---------- */ .sec-title { padding-left: 0.24rem; } .sec-title .bar { top: 0.04rem; width: 0.03rem; height: 0.64rem; } .sec-title h2 { line-height: 1.15; } .sec-title .en { margin-top: 0.08rem; line-height: 1.7; color: #666666; } .more-arr { margin-left: 0.06rem; } /* ---------- 头部：仅保留第一个，吸顶 + 导航横向滑动 ---------- */ .page:not(:first-child) .header { display: none; } .page-home { padding-top: 0.58rem; } .page-home .header { position: fixed; top: 0; left: 0; right: 0; width: auto; max-width: 100%; margin: 0 auto; z-index: 999; background: linear-gradient(180deg, rgba(84, 46, 175, 0.98) 0%, rgba(117, 84, 203, 0.95) 100%); box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.18); } .page-home .header-inner { position: relative; top: 0; width: 100%; height: 1.7rem; padding: 0 0.24rem; box-sizing: border-box; } .page-home .header-logo { position: absolute; top: .15rem; left: 0.15rem; height: .6rem; } .page-home .header-logo img { width: auto; height: 0.6rem; } /* 导航：中间区域横向滚动（隐藏滚动条） */ .page-home .header-nav { position: absolute; top: 0.8rem; left: 0.2rem; -ms-flex: 1; flex: 1; min-width: 0; margin: 0 0.06rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; width: 93%; } .page-home .header-nav::-webkit-scrollbar { display: none; } .page-home .header-nav li { float: none; display: inline-block; margin-right: 0.18rem; } .page-home .header-nav li:last-child { margin-right: 0; } .page-home .header-nav li a { font-size: 0.28rem; line-height: 0.8rem; } .page-home .header-nav li.cur>a { font-size: 0.28rem; } /* H5 触屏无 hover：隐藏导航二级菜单，避免点击闪现 */ .page-home .header-nav .hn-drop { display: none !important; } .page-home .header-nav li.cur>a::after { bottom: 0.12rem; height: 0.03rem; border-radius: 0.02rem; } /* 语言切换胶囊 */ .page-home .header-lang { position: absolute; font-size: .26rem; top: .18rem; right: .3rem; width: 1.7rem; height: .6rem; line-height: .6rem; } .page-home .header-lang::before { width: 0.4rem; height: 0.4rem; } .page-home .hl-drop { top: 0.7rem; padding: 0.2rem 0; border-radius: 0.08rem; } .page-home .hl-drop li { height: 0.5rem; line-height: 0.5rem; } .hl-drop li a { font-size: 0.26rem; height: 0.5rem; line-height: 0.5rem; } /* ---------- 模块1：Banner ---------- */ .banner { height: 6rem; } .banner::before { height: 2.6rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%); } .banner-content { left: 0.28rem; top: 40%; -ms-transform: translateY(-40%); transform: translateY(-40%); } .banner-title { font-size: 0.34rem; line-height: 1.25; } .banner-sub { margin-top: 0.14rem; font-size: 0.18rem; line-height: 1.4; } .banner-ctrl { left: .24rem; bottom: 20%; } .banner-ctrl img { width: .5rem; } .banner .banner-pagination { bottom: 0.3rem; } /* ---------- 模块2：最新資訊 ---------- */ .news { height: auto; padding: 0.4rem 0.16rem; } .news-inner { padding: 0 0 0.5rem 0; } .news-left { float: none; width: 100%; margin-left: 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; } .news-left .news-counter { position: absolute; bottom: 0; right: .1rem; } .news-date .ym { margin-top: .15rem; font-size: .28rem; } .news-tt { font-size: .28rem; line-height: .45rem; height: .9rem; } .news-counter .nc-btn { top: 0.13rem; width: 0.14rem; height: 0.14rem; } .news-left .news-more { height: auto; margin: 0 0 0 0.24rem; width: 2rem; } /* 卡片轮播：一屏露 1 张多，可滑动 */ .news-swiper-wrap { float: none; width: 100%; margin-left: 0; margin-top: 0.28rem; } .news-swiper { width: 100%; padding: 0.2rem 0 0.3rem; } .news-card { width: 68vw; max-width: 5.4rem; height: auto; border-radius: 0.08rem; box-shadow: 0 0.03rem 0.16rem rgba(37, 47, 129, 0.18); overflow: hidden; padding-bottom: .7rem; } .news-card:hover { box-shadow: 0 0.03rem 0.16rem rgba(37, 47, 129, 0.18); } .news-pic { position: relative; width: calc(100% - 0.6rem); overflow: hidden; } .news-pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; padding: 0; } .news-go { left: .2rem; bottom: 0.3rem; width: 0.4rem; height: 0.4rem; } .news-go::before { width: 0.48rem; height: 0.48rem; } .news-card .card-bar { width: 100%; height: 0.06rem; opacity: 1; filter: alpha(opacity=100); } /* ---------- 模块3：活動展演 ---------- */ .activity { height: 10rem; padding: 0.5rem 0.24rem .9rem; background: url(../images/activity-bottom-bg.png) center bottom / 100% 82% no-repeat, url(../images/activity-bg.png) center / cover no-repeat; } .activity .sec-title { position: relative; left: auto; top: auto; } .act-info { left: auto; top: 2.2rem; width: auto; margin-top: 0.26rem; padding-bottom: .4rem; max-height: 2rem; font-size: .4rem; } .act-swiper { left: auto; bottom: 1.4rem; width: 100%; margin-top: 0.3rem; } .act-slide { width: 66vw; max-width: 4.8rem; } .act-slide .act-img { position: relative; height: 5rem; border-radius: 0.28rem; } .act-slide .act-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .act-ctrl { left: 50%; top: auto; margin-top: 0.28rem; text-align: center; bottom: .4rem; transform: translateX(-50%); } .act-btn { float: none; display: inline-block; width: 0.46rem; height: 0.46rem; margin: 0 0.06rem; } .act-btn .s-arr-l { margin-left: -1.6rem; } .act-btn .s-arr-r { margin-right: 0; } /* ---------- 模块4：場地租賃 ---------- */ .venue { height: auto; padding: 0.4rem 0.16rem; } .venue-inner { padding-top: 0; -ms-flex: none; flex: none; min-height: 0; } .venue-left { float: none; width: 100%; margin-left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; } .venue-left .sec-title { margin-top: 0; } .venue-left .btn-more { margin-top: 0.06rem; } /* 主图：宽度自适应 + 双层渐变 */ .venue-pic { float: none; width: 88%; margin: 0.3rem auto 0; height: auto; } .venue-pic .d2 { left: auto; right: 0; width: 58%; height: 1rem; } .venue-pic .vp { position: relative; left: auto; display: block; width: 93%; margin: 0 auto; } .venue-text { float: none; width: 100%; padding: 0.7rem .2rem 0; } .venue-text .num { text-align: center; } .venue-text .text { margin-top: 0.24rem; -webkit-line-clamp: 4; font-size: .28rem; line-height: .45rem; height: 1.85rem; } /* 四色特性：2x2 网格 */ .venue-features { margin-top: 0.2rem; height: auto; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid rgba(117, 84, 203, 0.15); } .vf-col { float: none; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 100%; height: 1.4rem; padding: 0 0.24rem; box-sizing: border-box; } .vf-icon { position: static; -ms-transform: none; transform: none; width: 0.8rem; height: auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-right: 0.2rem; } .vf-text { position: static; -ms-transform: none; transform: none; -ms-flex: 1; flex: 1; min-width: 0; } .vf-text .cn { font-size: .24rem; } .vf-text .en { font-size: .26rem; } /* ---------- 模块5：文創周邊 ---------- */ .products { height: auto; padding: 0.5rem 0.24rem 0.4rem; } .products-inner { padding-top: 0; } .products-left { float: none; width: 100%; margin-left: 0; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-align: start; align-items: flex-start; } .products-left .sec-title { margin-top: 0; max-width: 60%; overflow: hidden; } .products-left .btn-more { margin-top: 0.06rem; } /* 产品卡片：横向滑动 */ .products-list { float: none; margin-left: 0; margin-top: 0.4rem; display: -ms-flexbox; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.2rem; } .products-list::-webkit-scrollbar { display: none; } .product-card { float: none; -ms-flex: 0 0 64%; flex: 0 0 64%; max-width: 4.6rem; height: 4.4rem; margin: 0 0.2rem 0 0; box-shadow: 0 0.03rem 0.1rem rgba(0, 0, 0, 0.25); overflow: hidden; } .product-card:last-child { margin-right: 0; } .product-card:hover { -ms-transform: none; transform: none; } .product-card:hover::after { display: none; } .product-img { position: relative; width: 100%; height: 2.8rem; } .product-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .product-name, .product-price { font-size: .28rem; line-height: .5rem; } .product-body { position: relative; left: auto; top: auto; width: 100%; height: auto; padding: 0.2rem 0.3rem 0.4rem; box-sizing: border-box; } .product-name { margin: 0; } .product-price { margin: 0.06rem 0 0; } .product-btn { right: 0.2rem; top: auto; bottom: 0.4rem; } .product-btn::after { background: url(../images/p-shopping-w.png) no-repeat center center; background-size: cover; } .product-card:hover .product-btn::after { background: url(../images/p-shopping-w.png) no-repeat center center; background-size: cover; } .purple-bars { display: none; } .purple-bars span { width: 10%; } .products-icons { padding: 0.2rem 0 0; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; gap: 0.3rem; } .products-icons img { width: 0.8rem; height: 0.8rem; } /* ---------- 模块6：聯繫我們 + 页脚 ---------- */ .page-contact { display: block; } .page-contact .contact { margin-top: 0; -ms-flex: none; flex: none; height: auto; } .contact { height: auto; padding: 0.4rem 0.16rem; } .page-contact .contact .sec-title { position: relative; left: auto; top: auto; } .page-contact .contact-map { position: relative; left: auto; top: auto; width: 100%; height: 0; padding-top: 48%; margin-top: 0.28rem; border-radius: 0.1rem; overflow: hidden; } .contact-map img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .page-contact .contact-map::after { top: 33%; left: 45%; width: 0.26rem; height: 0.32rem; } .page-contact .contact-panel { position: relative; right: auto; top: auto; width: 100%; height: auto; margin-top: 0.2rem; padding: 0.4rem .2rem; border-radius: 0.14rem; box-sizing: border-box; } .cp-row { padding: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin-bottom: 0.18rem; } .cp-row:last-child { margin-bottom: 0; } .cp-row img { width: 0.3rem; height: 0.3rem; margin-right: 0.1rem; -ms-flex: 0 0 auto; flex: 0 0 auto; } .cp-row span { word-break: break-all; } }