23WELL且安 ��?且安且行且健��?/title> <style> /* ---------- 品牌字体 ---------- */ @font-face { font-family: 'OPPOSans'; src: url('file:///D:/AND%20ALL/08%20Brand%20&%20Comm%20&%20VI/Authentic/00%20Proposals/品牌字体/OPPOSans3.0/231130%20品牌字体%20OPPO%20Sans%203.0/中文简��?西文%20Simplified%20Chinese+Cyrillic/ttf(优先安装%20ttf%20格式%20preferred��?OPPOSans-Regular.ttf') format('truetype'); font-weight: 400; } @font-face { font-family: 'OPPOSans'; src: url('file:///D:/AND%20ALL/08%20Brand%20&%20Comm%20&%20VI/Authentic/00%20Proposals/品牌字体/OPPOSans3.0/231130%20品牌字体%20OPPO%20Sans%203.0/中文简��?西文%20Simplified%20Chinese+Cyrillic/ttf(优先安装%20ttf%20格式%20preferred��?OPPOSans-Medium.ttf') format('truetype'); font-weight: 500; } @font-face { font-family: 'HarmonyOS'; src: url('file:///D:/AND%20ALL/08%20Brand%20&%20Comm%20&%20VI/Authentic/00%20Proposals/品牌字体/HarmonyOS_Sans/HarmonyOS_Sans/HarmonyOS_Sans_SC_Light.ttf') format('truetype'); font-weight: 300; } @font-face { font-family: 'HarmonyOS'; src: url('file:///D:/AND%20ALL/08%20Brand%20&%20Comm%20&%20VI/Authentic/00%20Proposals/品牌字体/HarmonyOS_Sans/HarmonyOS_Sans/HarmonyOS_Sans_SC_Regular.ttf') format('truetype'); font-weight: 400; } /* ---------- Reset & Base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "OPPOSans", "HarmonyOS", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-weight: 400; color: #1A1A1A; background: #FFFFFF; line-height: 1.8; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; } /* ---------- Navigation ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 24px 6vw; display: flex; justify-content: space-between; align-items: center; background: #FFFFFF; border-bottom: 1px solid #F0F0F0; } .nav-logo { height: 16px; display: flex; align-items: center; } .nav-logo img { height: 100%; display: block; } .nav-links { display: flex; gap: 40px; list-style: none; } .nav-links a { text-decoration: none; color: #1A1A1A; font-size: 13px; font-weight: 400; letter-spacing: 0.08em; transition: color 0.3s; } .nav-links a:hover { color: #112CA3; } /* ---------- Hero Video ---------- */ .hero-video { position: relative; width: 100%; height: 100vh; overflow: hidden; margin-top: 80px; } .hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #FFFFFF; padding: 0 6vw; } .hero-overlay h1 { font-family: "HarmonyOS", sans-serif; font-size: clamp(36px, 5vw, 64px); font-weight: 300; line-height: 1.2; letter-spacing: 0.05em; margin-bottom: 24px; } .hero-overlay .slogan { font-size: clamp(16px, 1.8vw, 22px); font-weight: 300; letter-spacing: 0.1em; opacity: 0.9; } /* ---------- Quote ---------- */ .quote { display: flex; justify-content: center; align-items: center; min-height: 25vh; text-align: center; padding: 0 6vw; } .quote p { font-family: "HarmonyOS", sans-serif; font-size: clamp(24px, 3vw, 36px); font-weight: 300; letter-spacing: 0.08em; line-height: 1.6; color: #333; max-width: 800px; } /* ---------- Brand Essence ---------- */ .brand-essence { padding: 120px 6vw; background: #FAFAFA; } .brand-essence .section-label { color: #999; } .brand-essence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; } .essence-item { text-align: center; padding: 40px 20px; background: #FFFFFF; border: 1px solid #F0F0F0; transition: transform 0.3s; } .essence-item:hover { transform: translateY(-4px); } .essence-item .icon-num { font-family: "HarmonyOS", sans-serif; font-size: 42px; font-weight: 300; color: #112CA3; line-height: 1; margin-bottom: 20px; } .essence-item h4 { font-size: 15px; font-weight: 500; letter-spacing: 0.06em; color: #1A1A1A; margin-bottom: 12px; } .essence-item p { font-size: 13px; font-weight: 400; line-height: 1.7; color: #777; } /* ---------- Chapters ---------- */ .chapters { padding: 120px 6vw; } .section-label { font-size: 12px; font-weight: 400; letter-spacing: 0.2em; color: #999; text-align: center; margin-bottom: 12px; } .section-title { font-family: "HarmonyOS", sans-serif; font-size: clamp(28px, 3.2vw, 40px); font-weight: 300; letter-spacing: 0.06em; text-align: center; color: #1A1A1A; margin-bottom: 50px; } .chapter-row { display: flex; align-items: center; max-width: 1100px; margin: 0 auto 100px; gap: 80px; position: relative; } .chapter-row:last-child { margin-bottom: 0; } .chapter-row .c-num { font-family: "HarmonyOS", sans-serif; font-size: 120px; font-weight: 300; color: #F2F2F2; position: absolute; top: -50px; left: -20px; z-index: 0; line-height: 1; pointer-events: none; } .chapter-row .c-text { flex: 0 0 50%; position: relative; z-index: 1; } .chapter-row .c-text h3 { font-family: "HarmonyOS", sans-serif; font-size: clamp(28px, 3.4vw, 42px); font-weight: 300; letter-spacing: 0.04em; line-height: 1.3; color: #1A1A1A; margin-bottom: 24px; } .chapter-row .c-text p { font-size: 15px; font-weight: 400; line-height: 2; color: #666; max-width: 440px; } .chapter-row .c-visual { flex: 1; height: 340px; background: #FAFAFA; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .chapter-row .c-visual .placeholder { font-size: 13px; color: #CCC; letter-spacing: 0.1em; } .chapter-row.reverse { flex-direction: row-reverse; } .chapter-row.reverse .c-num { left: auto; right: -20px; } .chapters-preview { max-width: 700px; margin: 0 auto; text-align: center; } .chapters-preview p { font-size: 16px; font-weight: 400; line-height: 2; color: #666; margin-bottom: 32px; } .chapters-preview .story-link { display: inline-block; text-decoration: none; color: #112CA3; font-size: 14px; font-weight: 400; letter-spacing: 0.08em; transition: gap 0.3s; } .chapters-preview .story-link:hover { gap: 8px; } /* ---------- Vision / Mission ---------- */ .vision { padding: 120px 6vw; background: linear-gradient(rgba(250,250,250,0.92), rgba(250,250,250,0.92)), url('file:///D:/AND%20ALL/08%20Brand%20&%20Comm%20&%20VI/05b%20Andall%20Website/Website%20Design%20Related/网页-jpg+psd_1217/网页-jpg+psd/网页-电脑/about%20us-��?愿景与使��?使命.png'); background-size: cover; background-position: center; background-repeat: no-repeat; } .vision-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto; } .vision-card { background: #FFFFFF; padding: 48px 36px; border: 1px solid #F0F0F0; } .vision-card .v-label { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; color: #B0B0B0; margin-bottom: 20px; } .vision-card h4 { font-family: "HarmonyOS", sans-serif; font-size: 20px; font-weight: 300; letter-spacing: 0.05em; color: #112CA3; margin-bottom: 16px; line-height: 1.4; } .vision-card p { font-size: 14px; font-weight: 400; line-height: 1.9; color: #555; } /* ---------- Products ---------- */ .products { padding: 120px 6vw; background: #FAFAFA; } .products .section-label { color: #999; } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; } .product-card { background: #FFFFFF; padding: 40px 28px; border: 1px solid #F0F0F0; text-decoration: none; color: inherit; display: block; transition: border-color 0.3s, transform 0.3s; border-left: 3px solid transparent; } .product-card:hover { border-color: #D0D0D0; transform: translateY(-4px); } .product-card .tagline { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; color: #B0B0B0; margin-bottom: 4px; line-height: 1.2; } .product-card .name { font-family: "HarmonyOS", sans-serif; font-size: 16px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; color: #1A1A1A; margin-bottom: 4px; white-space: nowrap; } .product-card .desc { font-size: 13px; font-weight: 400; line-height: 1.3; color: #777; } /* ---------- Science ---------- */ .science { padding: 120px 6vw; } .science-grid-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto; } .science-item { padding: 40px 28px; border: 1px solid #F0F0F0; text-align: center; transition: border-color 0.3s, transform 0.3s; display: flex; flex-direction: column; align-items: center; } .science-item:hover { border-color: #D0D0D0; transform: translateY(-4px); } .science-item .number { display: block; font-family: "HarmonyOS", sans-serif; font-size: 40px; font-weight: 300; letter-spacing: 0.03em; color: #112CA3; line-height: 1.2; margin-bottom: 8px; } .science-item .label { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: #1A1A1A; margin-bottom: 8px; } .science-item p { font-size: 12px; font-weight: 400; line-height: 1.7; color: #777; margin-top: 4px; } /* ---------- Trust ---------- */ .trust { padding: 120px 6vw; background: #FAFAFA; } .trust .section-label { color: #999; } .trust-grid { display: flex; justify-content: center; gap: 100px; max-width: 1000px; margin: 0 auto; text-align: center; } .trust-inline { display: flex; justify-content: center; gap: 80px; max-width: 800px; margin: 60px auto 0; text-align: center; } .trust-item .number { display: block; font-family: "HarmonyOS", sans-serif; font-size: 48px; font-weight: 300; letter-spacing: 0.03em; color: #112CA3; line-height: 1.2; } .trust-item .label { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0.1em; color: #777; margin-top: 8px; } /* ---------- Footer ---------- */ footer { padding: 80px 6vw 40px; border-top: 1px solid #F0F0F0; } .footer-social { display: flex; justify-content: center; gap: 24px; } .footer-social a { color: #B0B0B0; transition: color 0.3s; display: flex; align-items: center; } .footer-social a:hover { color: #112CA3; } .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; max-width: 1100px; margin: 0 auto 60px; } .footer-col h5 { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: #1A1A1A; margin-bottom: 20px; } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { text-decoration: none; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: #777; transition: color 0.3s; line-height: 1.6; } .footer-col ul li a:hover { color: #1A1A1A; } .footer-bottom { max-width: 1100px; margin: 0 auto; padding-top: 24px; border-top: 1px solid #F0F0F0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 12px; color: #999; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .hero-video { height: 80vh; margin-top: 60px; } .brand-essence-grid { grid-template-columns: repeat(2, 1fr); } .chapter-row { flex-direction: column !important; gap: 40px; text-align: center; } .chapter-row .c-text { flex: none; } .chapter-row .c-text p { max-width: 100%; } .chapter-row .c-num { font-size: 80px; top: -30px; left: 50%; transform: translateX(-50%); } .chapter-row.reverse .c-num { left: 50%; right: auto; transform: translateX(-50%); } .chapter-row .c-visual { width: 100%; height: 200px; } .chapter-divider { margin-bottom: 60px; } .vision-grid { grid-template-columns: 1fr; gap: 24px; } .products-grid { grid-template-columns: repeat(2, 1fr); } .science-grid-four { grid-template-columns: repeat(2, 1fr); } .trust-grid { gap: 60px; } .footer-cta-grid { gap: 40px; } .footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-links { display: none; } .hero-video { height: 70vh; margin-top: 60px; } .hero-overlay h1 { font-size: 32px; } .brand-essence-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr; } .trust-grid { flex-direction: column; gap: 40px; } .footer-cta-grid { gap: 32px; } .footer-inner { flex-direction: column; gap: 20px; text-align: center; } .footer-links { flex-wrap: wrap; justify-content: center; } .footer-cols { grid-template-columns: 1fr; gap: 32px; } } </style> </head> <body>  <nav> <div class="nav-logo"> <img src="file:///D:/AND%20ALL/01%20Company%20Brand%20and%20Product%20info/23WELL/23WELL%20logo/23WELL%20R��logo/23WELL%20horizontal.png" alt="23WELL且安"> </div> <ul class="nav-links"> <li><a href="#">品牌</a></li> <li><a href="#">产品</a></li> <li><a href="#">咨询</a></li> <li><a href="#">服务</a></li> </ul> </nav>  <section class="hero-video"> <video autoplay muted loop playsinline> <source src="file:///D:/AND%20ALL/01%20Company%20Brand%20and%20Product%20info/23WELL/23WELL%20%E8%A7%86%E9%A2%91/%E7%BA%A2%E4%BA%91%E4%BC%A0%E5%AA%92_%E6%88%B4%E7%9B%9B/video/23WELL%E5%93%81%E7%89%8C%E8%A7%86%E9%A2%91_%E6%97%A0%E5%AD%97%E5%B9%95.mp4" type="video/mp4"> </video> <div class="hero-overlay"> <h1>23WELL且安</h1> <div class="slogan">BE WELL · 且安且行且健��?/div> </div> </section>  <section class="quote"> <p>真正推动生命指针的，是时间��?/p> </section>  <section class="vision"> <div class="section-label">品牌信念</div> <div class="section-title">我们的坚��?/div> <div class="vision-grid"> <div class="vision-card"> <div class="v-label">OUR PROPOSITION</div> <h4>我们的主��?/h4> <p>以严谨、科学、安全、高效为品牌内核，通过预防治疗和基因靶向治疗技术帮助每一个人实现健康长寿的梦想。坚持「以人为本」的自然观、生命观、健康观、疾病观和防治观��?/p> </div> <div class="vision-card"> <div class="v-label">OUR VISION</div> <h4>我们的愿��?/h4> <p>引领「第四次革命」即保健认知革命，以抗衰为核心，针对不同生命阶段痛点前置提供呵护与保障。带动哲科性保健理念：且安且慢，且行且远��?/p> </div> <div class="vision-card"> <div class="v-label">OUR MISSION</div> <h4>我们的使��?/h4> <p>站在全球健康科学前沿，在结果干预和预先防护之间搭建一座桥梁，从源头干预人类健康，呵护身心状态，联结美好生活��?/p> </div> </div> </section>  <section class="products"> <div class="section-label">产品系列</div> <div class="section-title">为每一段生命历程，找到科学答案</div> <div class="products-grid"> <a class="product-card" href="#" style="border-left-color:#FED868;"> <div class="tagline">#黄金加油��?/div> <div class="name">CELL根源焕活胶囊 (1+1)</div> <div class="desc">细胞级驻颜，开启抗衰NEXT LEVEL</div> </a> <a class="product-card" href="#" style="border-left-color:#43DCC9;"> <div class="tagline">#酒局不倒丸</div> <div class="name">CHEERS解酒护肝胶囊 (1+1)</div> <div class="desc">酒局喝不倒，干杯不「肝悲��?/div> </a> <a class="product-card" href="#" style="border-left-color:#EB2B2B;"> <div class="tagline">#心动��?/div> <div class="name">HEART循环全动力胶��?(1+1)</div> <div class="desc">循环系统全动力，根源唤醒健康活力</div> </a> <a class="product-card" href="#" style="border-left-color:#F47083;"> <div class="tagline">#闺「秘」丸</div> <div class="name">LADY女性私护胶��?(1+1)</div> <div class="desc">防抗一体，花园无忧</div> </a> <a class="product-card" href="#" style="border-left-color:#6ECE3A;"> <div class="tagline">#动肝光波</div> <div class="name">LIVER多效净肝胶��?(1+1)</div> <div class="desc">净护去油，养护再生，肝劲满��?/div> </a> <a class="product-card" href="#" style="border-left-color:#9E769F;"> <div class="tagline">#爱巢��?/div> <div class="name">OVARY卵巢保养胶囊 (1+1)</div> <div class="desc">西调中养，留驻卵巢年轻��?/div> </a> <a class="product-card" href="#" style="border-left-color:#1E2C98;"> <div class="tagline">#睡饱��?/div> <div class="name">SLEEP速眠甜睡舒缓胶囊 (1+1)</div> <div class="desc">倒头秒入睡，深睡养脑护肝状态佳</div> </a> </div> </section>  <section class="science"> <div class="section-label">科学与信��?/div> <div class="section-title">以生命科学为根基</div> <div class="science-grid-four"> <div class="science-item"> <span class="number">20+</span> <span class="label">国际专利 · 三国认证</span> <p>覆盖美国、英国、中国三国的20余项国际专利，涵盖外泌体制备、细胞多维抗衰、护肝抗纤维化等核心领域��?/p> </div> <div class="science-item"> <span class="number">团队</span> <span class="label">全球科学家团��?/span> <p>由跨国多学科科学家组成，横跨心脏内科、遗传学、内分泌学、细胞分子生物学等前沿领域，为每一款产品注入严谨的科研基因��?/p> </div> <div class="science-item"> <span class="number">SREC</span> <span class="label">SREC-BIOTECH��?/span> <p>独特控释技术，确保活性成分在体内精准释放，最大化生物利用度，让每一粒胶囊发挥应有的效力��?/p> </div> <div class="science-item"> <span class="number">三重认证</span> <span class="label">FDA · SGS · BSCG</span> <p>通过美国FDA备案、SGS无激素检测及BSCG运动员级别认证，以国际最高标准确保产品安全与品质��?/p> </div> </div> </section>  <footer> <div class="footer-cols"> <div class="footer-col"> <h5>品牌</h5> <ul> <li><a href="#">关于且安</a></li> <li><a href="#">品牌故事</a></li> <li><a href="#">ABI集团</a></li> <li><a href="#">科学研发</a></li> </ul> </div> <div class="footer-col"> <h5>产品</h5> <ul> <li><a href="#">CELL根源焕活胶囊 (1+1)</a></li> <li><a href="#">CHEERS解酒护肝胶囊 (1+1)</a></li> <li><a href="#">HEART循环全动力胶��?(1+1)</a></li> <li><a href="#">LADY女性私护胶��?(1+1)</a></li> <li><a href="#">LIVER多效净肝胶��?(1+1)</a></li> <li><a href="#">OVARY卵巢保养胶囊 (1+1)</a></li> <li><a href="#">SLEEP速眠甜睡舒缓胶囊 (1+1)</a></li> </ul> </div> <div class="footer-col"> <h5>咨询</h5> <ul> <li><a href="#">且安生活</a></li> <li><a href="#">常见问题</a></li> </ul> </div> <div class="footer-col"> <h5>服务</h5> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">隐私政策</a></li> </ul> </div> </div> <div class="footer-bottom"> <div class="footer-social"> <a href="#" title="微信公众��? aria-label="微信公众��?> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M8.5 11A1.5 1.5 0 007 12.5v2a1.5 1.5 0 003 0v-2A1.5 1.5 0 008.5 11zM15.5 11a1.5 1.5 0 00-1.5 1.5v2a1.5 1.5 0 003 0v-2a1.5 1.5 0 00-1.5-1.5z" fill="currentColor"/><path d="M21 8.5A6.5 6.5 0 0014.5 2h-5A6.5 6.5 0 003 8.5v7A6.5 6.5 0 009.5 22h5a6.5 6.5 0 006.5-6.5v-7zM9.5 20h-2A4.5 4.5 0 013 15.5v-7A4.5 4.5 0 017.5 4h2a4.47 4.47 0 014.27 3.26A4.5 4.5 0 0121 8.5v7a4.5 4.5 0 01-4.5 4.5h-2c-.36 0-.7.14-.95.39L12 21.9l-1.55-1.51a1.37 1.37 0 00-.95-.39z" fill="currentColor"/></svg> </a> <a href="#" title="小红��? aria-label="小红��?> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="16" height="16" rx="4" fill="currentColor"/><circle cx="12" cy="12" r="4" fill="#FFFFFF"/></svg> </a> <a href="#" title="抖音" aria-label="抖音"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M19.6 6.07a5.53 5.53 0 01-3.22-1.73A5.66 5.66 0 0114.9 0h-3.38v15.56a3.32 3.32 0 01-3.1 3.29 3.37 3.37 0 01-3.67-3.35 3.33 3.33 0 013.33-3.33c.34 0 .67.05.98.15v-3.42a6.55 6.55 0 00-.98-.07 6.68 6.68 0 100 13.35c3.67 0 6.58-2.98 6.64-6.4l.02-7.04a8.57 8.57 0 004.92 1.57V6.07z" fill="currentColor"/></svg> </a> <a href="https://www.andall-health.com" target="_blank" title="海外官网" aria-label="海外官网"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><ellipse cx="12" cy="12" rx="4" ry="10" stroke="currentColor" stroke-width="2" fill="none"/><path d="M2 12h20M12 2v20" stroke="currentColor" stroke-width="2"/></svg> </a> </div> <span>23WELL且安</span> <span>© 2026 23WELL</span> </div> </footer> </body> </html> <script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>