@charset "utf-8";
/* ============================================
 * pc.css - PC端样式 (Phase 2 清理版)
 * gdnms.com 前台CSS重构 v2.0
 * 清理: 死代码 + 颜色变量化 + 间距变量化
 * 约束: 布局零改动，仅优化代码表达方式
 * ============================================ */

.header { width: 100%; height: var(--pc-header-h); min-width: 1200px; background: #d3dce9; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }

.logo { width: var(--pc-menu-w); height: var(--pc-header-h); float: left; background: var(--color-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: width .25s ease; }
.header.collapsed .logo { width: var(--pc-menu-w-collapsed); }

.logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.logo .logo-link { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--color-text-white); }

.h-txt { float: left; padding-left: 45px; font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); line-height: var(--pc-header-h); height: var(--pc-header-h); }

.h-txt a { font-size: var(--text-sm); font-weight: 100; color: var(--color-text); }

.top-box { width: auto; height: var(--pc-header-h); float: right; padding-right: var(--space-10); line-height: var(--pc-header-h); font-size: var(--text-sm); color: var(--color-border); }

.top-box a { color: var(--color-text); padding: 0 20px; }

.top-box2 a { padding: 0 10px; }

.top-box2 span { padding: 0 10px; color: var(--color-text); }

.top-box2 b { color: #df4949; font-weight: 100; }
.top-box2 a.up-vip-enterprise { color: var(--color-primary); }

/* 顶部通栏“升级VIP”：金色渐变字 + 流光 + 呼吸，hover 发光 */
.top-box2 a.up-vip-btn {
  display: inline-block;
  padding: 0 14px;
  margin: 0 10px;
  font-size: var(--text-sm);
  font-weight: 800;
  line-height: 30px;
  vertical-align: middle;
  background: linear-gradient(110deg, #8f5a00 0%, #a06a10 22%, #c98a26 48%, #a06a10 72%, #8f5a00 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  border-radius: 999px;
  text-decoration: none;
  animation: up-vip-shine 2.6s linear infinite, up-vip-breathe 2.4s ease-in-out infinite;
  transition: filter .2s ease;
}
.top-box2 a.up-vip-btn:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 0 6px rgba(217, 150, 47, .9)) brightness(1.2);
}
@keyframes up-vip-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes up-vip-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .78; transform: scale(.97); }
}
/* 已是置顶/SVIP：金色徽章（不再引导购买） */
.top-box2 .up-vip-badge {
  display: inline-block;
  padding: 0 16px;
  margin: 0 10px;
  line-height: 28px;
  font-size: var(--text-sm);
  font-weight: 800;
  vertical-align: middle;
  color: #6b3a00;
  background: linear-gradient(135deg, #f9d976 0%, #f39f86 100%);
  border-radius: 999px;
  box-shadow: 0 1px 8px rgba(240, 170, 60, .5), inset 0 1px 0 rgba(255, 255, 255, .55);
  letter-spacing: 1px;
}

/* 折叠开关：独立按钮，放在 LOGO 右侧 */
.menu-toggle { float: left; width: 48px; height: var(--pc-header-h); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text); border: none; background: transparent; transition: color .2s ease; }
.menu-toggle:hover { color: var(--color-primary); }
.menu-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.header.collapsed .menu-toggle svg { transform: rotate(180deg); transition: transform .25s ease; }

.top-box .r { padding: 0; display: inline-flex; align-items: center; height: 100%; }
.top-box .r img { height: var(--pc-header-h); width: auto; display: block; object-fit: contain; }

.top-box p { padding-right: var(--space-5); }

.top-box i { width: 20px; height: 20px; display: inline-block; background: url(../images/ico01.png) no-repeat; margin-bottom: -4px; }

.m-tit1 { font-size: var(--text-xl); color: var(--color-text-white); font-weight: 700; margin-top: 10px; display: block; }

.r-box { width: 40px; height: 160px; position: absolute; left: -40px; top: 0; background: var(--color-primary); font-size: var(--text-sm); color: var(--color-text-white); text-align: center; }
.r-box .r-box-link { display: block; color: var(--color-text-white); text-decoration: none; }
.r-box .r-box-link:hover { opacity: .92; }
.r-box .r-box-link p { padding-top: var(--space-4); line-height: 18px; }
.r-box .r-box-arrow { width: 40px; height: 40px; background: #b0b0b0; display: flex; align-items: center; justify-content: center; position: absolute; left: 0; bottom: 0; cursor: pointer; }
.r-box .r-box-arrow img { display: block; flex: none; }
.r-box .r-box-arrow .fav-arrow-open { display: none; }
.r-main.open .r-box-arrow .fav-arrow-closed { display: none; }
.r-main.open .r-box-arrow .fav-arrow-open { display: block; transform: translateY(1px); }

.r-main { width: 310px; height: auto; max-height: calc(100vh - 120px); background: var(--color-bg); box-shadow: 0 0 20px #888; position: fixed; right: -310px; top: 50%; transform: translateY(-50%); z-index: 960; transition: right .3s ease; display: flex; flex-direction: column; }

/* 收藏夹抽屉分类切换（会员/供货/求货） */
.fav-tabs { display: flex; border-bottom: 1px solid var(--color-border); background: #fff; flex: none; }
.fav-tab { flex: 1; text-align: center; line-height: 40px; font-size: var(--text-sm); color: #666; cursor: pointer; text-decoration: none; border-bottom: 2px solid transparent; }
.fav-tab:hover { color: var(--color-primary); }
.fav-tab[data-type="1"]:hover { color: #b0287a; }
.fav-tab[data-type="2"][data-gq="2"]:hover { color: var(--color-secondary); }
.fav-tab.active { color: var(--color-primary); font-weight: 700; border-bottom-color: var(--color-primary); }
.fav-tab[data-type="1"].active { color: #b0287a; border-bottom-color: #b0287a; }
.fav-tab[data-type="2"][data-gq="2"].active { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }

/* 收藏夹抽屉列表（超过 10 条自动出现滚动条） */
.fav-lists { flex: 1 1 auto; min-height: 117px; max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.fav-list { display: none; margin: 0 15px; }
.fav-list.active { display: block; }
.fav-list li { width: 100%; height: 30px; line-height: 30px; border-bottom: 1px dashed var(--color-border); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-list li a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-gq-icon { width: auto; height: 18px; display: inline-block; vertical-align: middle; margin-right: 6px; }
.fav-list li.fav-empty { height: 50px; line-height: 50px; text-align: center; color: #999; border-bottom: none; }

/* 收藏夹抽屉遮罩 + 供货/求货展开态（JS 控制） */
#bg { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); z-index: 950; }
#bg.show { display: block; }
.box-3.show { display: block; }
#small_button1, #small_button2 { cursor: pointer; }
#small_button1.up, #small_button2.up { transform: rotate(180deg); display: inline-block; }

/* 个人中心瓷砖 SVG 图标 */
.ico-box svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto; }

.main2 { width: 100%; height: auto; min-width: 1200px; overflow: hidden; --menu-w: var(--pc-menu-w); }
.main2.collapsed { --menu-w: var(--pc-menu-w-collapsed); }

/* 侧边栏：桌面固定悬浮，宽度由 --menu-w 驱动（折叠只切 .collapsed 一处） */
.left-box { position: fixed; left: 0; top: var(--pc-header-h); width: var(--menu-w); height: calc(100vh - var(--pc-header-h)) !important; background: #192d44; overflow-y: auto; overflow-x: hidden; z-index: 900; transition: width .25s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.06); }
.left-con { width: 100%; background: #192d44; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.menu-ul { width: 100%; height: auto; }
.menu-ul li { width: 100%; }
.menu-ul li a { box-sizing: border-box; display: block; position: relative; height: 56px; padding: 0 18px; line-height: 56px; border-radius: 6px; color: #c9cdd4; text-align: center; transition: background .2s ease, color .2s ease; }
.menu-ul li a:hover, .menu-ul li.active a { background: #121f2d; border-right: 3px solid var(--color-warning); color: var(--color-text-white); font-weight: 700; }
.menu-ul li a .mi { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-ul li a .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main2.collapsed .menu-ul li a { padding: 0; }
.main2.collapsed .menu-ul li a .label { display: none; }
.main2.collapsed .menu-ul li a .mi { position: static; transform: none; left: auto; top: auto; }
/* 侧边栏底部「联系我们」卡片：独立语义类，不复用内容区 .p0x，避免全局样式泄漏 */
.menu-end { width: 100%; box-sizing: border-box; padding: 20px 0; text-align: center; margin-top: auto; }
.menu-end__title { margin: 0; font-size: var(--text-sm); color: #6b7280; }
.menu-end__hours { margin: 0; padding-top: 5px; font-size: var(--text-xs); color: #6b7280; }
.menu-end__tel { margin: 0; padding: 20px 0; font-size: 20px; font-weight: 700; color: var(--color-text-white); white-space: nowrap; }
.main2.collapsed .menu-end { display: none; }
.main-box { width: calc(100% - var(--menu-w) - var(--pc-menu-gap) - 20px); float: left; margin-left: calc(var(--menu-w) + var(--pc-menu-gap)); margin-top: 20px; height: auto; transition: margin-left .25s ease, width .25s ease; }

.main-con { width: 100%; height: auto; clear: both; }

.ul02 { width: 100%; height: auto; overflow: hidden; clear: both; display: flex; flex-wrap: nowrap; gap: 20px; padding: 0; box-sizing: border-box; margin-left: 0; }

/* v5: fluid 3-equal-split (menu->screen edge). flex:1 1 0 + min-width:0 prevents classic flex overflow; closing keeps 1/3 slot (JS visibility:hidden), others stay put. */
.ul02 li { flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 500 / 135; margin-right: 0; position: relative; box-sizing: border-box; overflow: hidden; background: var(--color-bg, #f2f3f5); }

.ul02 li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; }

.ul02 li img { width: 100%; height: 100%; display: block; object-fit: cover; }

.ul02 li i { width: 40px; height: 35px; position: absolute; right: 0; top: 0; z-index: 100; background: url(../images/btn5.png) no-repeat; cursor: pointer; display: block; }

.title02 { width: 100%; border-bottom: 2px solid var(--color-border-light); padding-top: 15px; position: relative; }
.main-box.no-top-ads .title02 { padding-top: 0; }
.main-box.no-top-ads { margin-top: 0; }

.tit-box { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); height: 34px; line-height: 34px; }

.tit-box a { font-size: var(--text-sm); font-weight: 100; margin-left: 10px; color: var(--color-warning); }

.tit-box .font16 { font-size: var(--text-base); }

.tab-box { width: 100%; clear: both; min-height: 60px; line-height: 60px; font-size: var(--text-base); color: var(--color-text-secondary); display: flex; align-items: center; flex-wrap: nowrap; gap: 10px; position: relative; box-sizing: border-box; border-bottom: 5px solid var(--color-secondary); }

.tab-box ul li,.tab-box ul { display: inline-block; }

.tab-box ul li { padding: 0 10px; cursor: pointer; }

.tab-box ul .active { color: var(--color-primary); font-weight: 700; background: url(../images/ico11.png) no-repeat center bottom; }

.search-box { width: 300px; height: 50px; position: absolute; right: 10px; bottom: 10px; box-sizing: border-box; }

/* 仅在 tab-box 内（supply/demand 列表页）取消绝对定位，作为 flex 子项与蓝色导航栏同行 */
.tab-box .search-box { position: static; margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; line-height: normal; }
.tab-box .search-box form { display: flex; align-items: center; width: 100%; }
.tab-box .search-box .text1 { float: none; }

.text1 { width: 228px; height: 48px; border: 1px solid var(--color-text-secondary); float: left; line-height: 50px; text-indent: 15px; font-size: 17px; color: var(--color-text-muted); }

.btn3 { width: 70px; height: 50px; background: url(../images/btn6.png) var(--color-primary) no-repeat center; border: none; cursor: pointer; }

/* 小型搜索框：与顶部搜索一致的小尺寸 + 5px 圆角 */
.search-box.mini { width: auto; height: 36px; padding-left: 12px; border: 1px solid #c8d3e1; border-radius: 5px; background: #fff; }
.search-box.mini form { display: flex; align-items: center; height: 100%; width: auto; }
.search-box.mini .text1 { width: 120px; height: 34px; line-height: 34px; text-indent: 0; font-size: 14px; border: 0; background: transparent; float: none; color: var(--color-text-muted); }
.search-box.mini .btn3 { width: 56px; height: 34px; line-height: 34px; border: 0; border-radius: 5px; background: var(--color-primary); font-size: 14px; color: #fff; float: none; cursor: pointer; }

.btn4 { width: 60px; height: 30px; line-height: 30px; color: var(--color-text-white); display: inline-block; background: var(--color-primary); border-radius: 5px; text-align: center; }

.btn13 { width: 60px; height: 30px; line-height: 30px; color: var(--color-text-white); display: inline-block; background: var(--color-warning); border-radius: 5px; text-align: center; }

.btn13:hover { background: #e68a00; }

.content { display: none; }

.active2 { display: block; }

.p04 { font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary); line-height: 70px; }

.table02 { line-height: 34px; font-size: var(--text-base); color: var(--color-text); }

.table02 td { width: 250px; }

.table02 span { color: var(--color-text-muted); }

.gq-box { width: 100%; height: auto; clear: both; overflow: hidden; margin-top: 50px; margin-bottom: var(--space-10); }

.p06 { width: 100%; height: 60px; line-height: 60px; text-align: center; color: var(--color-text-white); background: var(--color-primary); font-size: var(--text-base); font-weight: 700; background-color: var(--color-secondary) !important; }

.ul03 { width: 100%; height: auto; overflow: hidden; margin-bottom: 50px; display: flex; gap: 2%; }

.ul03 a { flex: 1 1 0; min-width: 0; }

.ul03 li { height: 130px; background: #aaa; text-align: center; }

.ul03 li .ico-box { margin-top: var(--space-5); width: 60px; height: 60px; display: inline-block; }

.ul03 li .m-tit1 { font-size: var(--text-base); margin: 0; }

.ul03 .libg1 { background: #2e6fbb; }

.ul03 .libg2 { background: var(--color-secondary); }

.ul03 .libg3 { background: #34b0d8; }

.ul03 .libg5 { background: #c481dd; }

.ul03 .libg6 { background: #ea7b74; }

.ul03 .libg8 { background: #81b1dd; }

.ul03 .libg9 { background: #a184df; }

.ul03 .libg10 { background: #767b8b; }

.ul03 .libg11 { background: #e85c95; }

.ul03 .libg12 { background: #40cb5e; }

.l { float: left; }

.r { float: right; }

.line40 { line-height: 40px; }

.font16 { font-size: var(--text-base); }

.font18 { font-size: var(--text-lg); }

.marb20 { margin-bottom: var(--space-5); }

.red1 { color: #e85050; }

.box-3 { display: none; }

.xf { font-size: var(--text-sm); font-weight: 100; margin-left: 10px; color: var(--color-warning); }

.btn4:hover { background: #064893; }

.pop-box,#pop-box { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.3); display: none; justify-content: center; align-items: center; z-index: 9999; }

.clost_btn { width: 40px; height: 35px; position: absolute; right: 6px; top: 6px; z-index: 100; background: url('/static/images/btn5.png') no-repeat; border-radius: 0; cursor: pointer; }

.filter_box { height: 39px; padding: 10px; margin: 10px 10px 10px 0; border-radius: 5px; display: flex; align-items: center; line-height: normal; }

.filter_box label { color: var(--color-text-white); }

.filter_box ul li a.select { padding: 5px; background-color: var(--color-border); border-radius: 5px; }

.filter_box ul li a.changbtn { padding: 5px; background-color: #e66d30; border-radius: 5px; color: var(--color-text-white); }

.pageplay { text-align: center; padding: 15px 0; }
/* 分页页码/上下页按钮：与「每页条数」下拉框视觉对齐（保留灰底 #e6e6e6） */
.pageplay a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 12px;
  margin: 5px;
  border-radius: 4px;
  background-color: #e6e6e6;
  border: 1px solid #ddd;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  vertical-align: middle;
}
.pageplay a:hover { background-color: #dcdcdc; border-color: #bbb; }
.pageplay a.active { background-color: var(--color-primary); color: var(--color-text-white); border-color: var(--color-primary); }
/* 前台列表统一分页：首页/末页/显示数量（全局复用，样式与分页按钮一致） */
.pageplay-size-label { margin-left: 12px; font-size: 14px; color: #666; vertical-align: middle; }
.pageplay select.pageplay-size {
  height: 32px; padding: 0 8px; margin: 5px;
  border: 1px solid #ddd; border-radius: 4px;
  background-color: #e6e6e6; color: #333; font-size: 14px;
  cursor: pointer; vertical-align: middle; box-sizing: border-box;
}
.pageplay select.pageplay-size:focus { outline: none; border-color: #bbb; }

#conTxt tbody tr:nth-child(odd) { background-color: var(--color-bg); }

#conTxt tbody tr:nth-child(even) { background-color: #f9f9f9; }
#conTxt { width: 100%; table-layout: fixed; border-collapse: collapse; }
#conTxt th, #conTxt td { padding: 5px 8px; vertical-align: middle; word-break: break-all; border-bottom: 1px solid var(--color-border); }
#conTxt th:nth-child(1), #conTxt td:nth-child(1) { width: 5% !important; text-align: left; }
#conTxt th:nth-child(2), #conTxt td:nth-child(2) { width: 5% !important; text-align: center; }
#conTxt th:nth-child(3), #conTxt td:nth-child(3) { width: 27% !important; text-align: left; }
#conTxt th:nth-child(4), #conTxt td:nth-child(4) { width: 27% !important; text-align: left; }
#conTxt th:nth-child(5), #conTxt td:nth-child(5) { width: 12% !important; text-align: center; }
#conTxt th:nth-child(6), #conTxt td:nth-child(6) { width: 8% !important; text-align: center; }
#conTxt th:nth-child(7), #conTxt td:nth-child(7) { width: 8% !important; text-align: center; }
#conTxt th:nth-child(8), #conTxt td:nth-child(8) { width: 8% !important; text-align: center; }

/* list: 收藏列按钮（样板，供/求/证件/展会列表共用；原在 pc_demand_supply.css，仅供求页加载） */
#conTxt tbody tr td .fav-btn { margin: 2px auto; background: #eb6060; }
#conTxt tbody tr td .fav-btn:hover { background: #d65454; }
#conTxt tbody tr td .fav-btn.fav-on { background: var(--color-info); }
#conTxt tbody tr td .fav-btn.fav-on:hover { background: var(--color-text-muted); }

/* list: 图纸/收藏/操作 三按钮悬停统一白字（覆盖 base.css 全局 a:hover 蓝字），背景加深 */
#conTxt .btn4:hover,
#conTxt .btn13:hover,
#conTxt .fav-btn:hover { color: #fff; }
#conTxt .btn13:hover { background: #d97e00; }

#conTxt tbody tr td .btn4, #conTxt tbody tr td .btn13 { margin: 2px 0; }

.font-tag { width: 24px; height: 24px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: bold; }

.gong { border: 2px solid  #589ce9; }

.gong-color { background-color: #589ce9; color: white; }

.gong-text-color { color: #589ce9; }

.qiu { border: 2px solid #e74c3c; }

.qiu-color { background-color: #e74c3c; color: white; }

.qiu-text-color { color: #e74c3c; }

.icon-box { display: inline-block; padding: 5px 10px; font-size: 1.2rem; font-weight: 900; color: #444; text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.8),
            -2px -2px 2px rgba(0, 0, 0, 0.3); position: relative; transition: all 0.3s ease; }

a.changbtn { padding: 5px; background-color: #e66d30; border-radius: 5px; color: var(--color-text-white); }

#data { width: 100%; table-layout: fixed; margin: 0px auto; border-collapse: collapse; border: 1px solid var(--color-border); background: #fafafa; font-size: var(--text-base); font-family: Arial, sans-serif; }

#data th { border: 1px solid var(--color-border); background: #fafafa; padding: 10px 12px; background-color: var(--color-bg-hover); text-align: left; font-weight: normal; color: var(--color-text); }

#data td { border: 1px solid var(--color-border); background: #fafafa; padding: 10px 5px; color: var(--color-text-secondary); }

#data tbody tr:nth-child(even) { background-color: #fafafa; }

#data tbody tr:hover { background-color: #e8f4ff; cursor: pointer; transition: background-color 0.2s ease; }

#data tr:last-child td { border-bottom: 1px solid var(--color-border); }

#data td:hover { background-color: #d1e7ff; position: relative; }

div.header { width: 100%; }

div.container { height: 100%; }

div.content { width: 100%; }

/* ===== 筛选条选中态：方案C 白边发光徽章（20260806q） ===== */
.filter_box ul li a.select,
.filter_box ul li a.u-pattern-12 {
    background-color: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 5px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.15);
}

/* ===== 未选中筛选项文字稍暗，突出已选项（20260806r） ===== */
.filter_box ul li a { color: rgba(255,255,255,0.75); }
.filter_box ul li a:hover { color: #fff; }

/* B5-5 S3m: site/fav_bar 片段 dl 定位（原内联 left/right） */
.fav-dl-left { left: 0; right: auto; }
/* === Phase 4: PC 内联样式提取（自 shared.css 迁入） === */
.u-pattern-2 {
  margin-top:20px
  }
.u-pattern-3 {
  font-size:21px
  }
.u-pattern-4 {
  background-color:#666
  }
.u-pattern-6 {
  font-weight:bold;
  color:#f98d8d
  }

.u-pattern-10 {
  width: 120px;
  display: contents
  }
.u-pattern-11 {
  z-index: 1000;

  top:1px
  }
.u-pattern-12 {
  padding:5px;
  background-color:#ddd;
  border-radius: var(--radius-lg)
  }

.u-pattern-15 {
  margin-top:0px
  }
.u-pattern-17 {
  background-color: #eb6060
  }
.u-pattern-18 {
  color:red
  }

.u-pattern-23 {
  font-size: 51px
  }

.u-pattern-25 {
  width:100%
  }

.u-pattern-27 {
  max-width: 300px;
  border:1px solid #ddd
  }
.u-pattern-28 {
  display:none
  }

.u-pattern-34 {
  height:400px
  }
.u-pattern-35 {
  color:#ff9800;
  font-weight:bold
  }
.u-pattern-37 {
  border: none
  }