:root { --color-primary:#D8C078; --color-primary-dark:#9c8130; --ring-ink:#2f2a27; --ring-soft:#f7f4ee; }
.breadcrumb { display:flex; align-items:center; gap:10px; min-height:62px; color:var(--color-muted); font-size:.83rem; }.breadcrumb a { color:var(--color-primary-dark); font-weight:800; }
.ring-hero { position:relative; overflow:hidden; padding:clamp(56px,7vw,108px) 0; color:#fff; background:#2d2824; }.ring-hero::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 78% 24%,rgba(216,192,120,.18),transparent 25%),radial-gradient(circle at 12% 85%,rgba(216,192,120,.09),transparent 28%); pointer-events:none; }.ring-hero__layout { position:relative; display:grid; grid-template-columns:minmax(300px,.8fr) minmax(450px,1fr); gap:clamp(38px,7vw,96px); align-items:center; }.ring-hero__content { max-width:590px; }.ring-hero .eyebrow,.image-heading--dark .eyebrow { color:#f2dd9a; }.ring-hero h1 { margin-bottom:20px; font-size:clamp(3.25rem,5.7vw,5.45rem); }.ring-hero__content > p:not(.eyebrow) { max-width:565px; margin-bottom:14px; color:#efe8dc; font-size:1.03rem; line-height:1.67; }.button-row { display:flex; flex-wrap:wrap; gap:13px; margin-top:29px; }.button--outline { color:#fff; background:transparent; }.button--outline:hover { color:#2d2824; background:#fff; }
.ring-gallery { min-width:0; }.ring-gallery__main { position:relative; aspect-ratio:1.04/1; overflow:hidden; margin:0; border:1px solid rgba(255,255,255,.22); border-radius:22px; background:#3e342e; box-shadow:0 26px 64px rgba(0,0,0,.26); }.ring-gallery__main::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 55%,rgba(22,17,14,.68)); pointer-events:none; }.ring-gallery__main img { width:100%; height:100%; object-fit:cover; transition:opacity .22s ease,transform .6s ease; }.ring-gallery__main img.is-switching { opacity:.32; }.ring-gallery__main figcaption { position:absolute; z-index:1; right:23px; bottom:20px; left:23px; display:flex; gap:10px; align-items:baseline; }.ring-gallery__main figcaption span:first-child { color:#f3d878; font-family:Arial,sans-serif; font-size:.74rem; font-weight:800; letter-spacing:.14em; }.ring-gallery__main figcaption span:last-child { font-size:1rem; font-weight:750; }.ring-gallery__thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }.ring-gallery__thumbs button { position:relative; overflow:hidden; padding:0; border:1px solid transparent; border-radius:11px; color:#fff; background:#463a33; text-align:left; }.ring-gallery__thumbs button::after { position:absolute; inset:0; content:""; background:linear-gradient(180deg,transparent 32%,rgba(19,14,11,.7)); pointer-events:none; }.ring-gallery__thumbs button.is-active { border-color:var(--color-primary); }.ring-gallery__thumbs img { width:100%; height:92px; object-fit:cover; opacity:.78; }.ring-gallery__thumbs span { position:absolute; z-index:1; right:10px; bottom:8px; left:10px; font-size:.72rem; font-weight:800; }
.ring-section { padding:102px 0; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:38px; }.section-heading h2 { margin-bottom:0; }.section-heading > p { max-width:430px; margin:0; color:var(--color-muted); }.image-heading { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center; margin-bottom:38px; }.image-heading > img { width:100%; height:310px; border-radius:20px; object-fit:cover; box-shadow:var(--shadow); }.image-heading h2 { margin-bottom:15px; }.image-heading > div > p:not(.eyebrow) { max-width:585px; margin-bottom:0; color:var(--color-muted); }.image-heading--dark { color:#fff; }.image-heading--dark > div > p:not(.eyebrow) { color:#eee5d9; }
.section-note { max-width:760px; margin:28px auto 0; color:var(--color-muted); font-size:.96rem; line-height:1.6; text-align:center; }.section-note--light { color:#eee4d7; }
.style-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.style-card { display:flex; min-height:435px; flex-direction:column; overflow:hidden; border:1px solid rgba(156,129,48,.18); border-radius:18px; color:var(--color-text); background:#fff; box-shadow:0 9px 24px rgba(44,35,17,.07); transition:transform .25s ease,box-shadow .25s ease; }.style-card > img { width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }.style-card > div { display:flex; flex:1; flex-direction:column; padding:20px 21px; }.style-card span { color:var(--color-primary-dark); font-family:Arial,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.12em; }.style-card h3 { margin:9px 0; font-size:1.25rem; }.style-card p { margin:0; color:var(--color-muted); font-size:.92rem; line-height:1.52; }.style-card b { display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:19px; color:var(--color-primary-dark); font-size:.81rem; }.style-card i { font-style:normal; }
.specifications { background:var(--ring-soft); }.fact-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }.fact-card { overflow:hidden; border-radius:16px; color:var(--color-text); background:#fff; box-shadow:0 8px 22px rgba(52,42,23,.07); transition:transform .25s ease,box-shadow .25s ease; }.fact-card img { width:100%; height:154px; object-fit:cover; }.fact-card h3,.fact-card p { margin-right:18px; margin-left:18px; }.fact-card h3 { margin-top:18px; margin-bottom:7px; font-size:1.06rem; }.fact-card p { margin-bottom:19px; color:var(--color-muted); font-size:.88rem; line-height:1.5; }
.questions { color:#fff; background:#2c2623; }.four-grid,.three-grid { display:grid; gap:13px; }.four-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.three-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.info-card { display:block; overflow:hidden; min-height:155px; padding:0 18px 19px; border:1px solid var(--color-line); border-radius:15px; color:var(--color-text); background:#fff; box-shadow:0 7px 19px rgba(44,35,17,.06); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }.info-card img { width:calc(100% + 36px); height:112px; margin:0 -18px 18px; object-fit:cover; }.info-card h3 { margin:0 0 8px; font-size:1.04rem; }.info-card p { margin:0; color:var(--color-muted); font-size:.88rem; line-height:1.5; }.four-grid--light .info-card { border-color:rgba(255,255,255,.18); color:#fff; background:rgba(255,255,255,.08); box-shadow:none; }.four-grid--light .info-card p { color:#eee5d9; }.four-grid--light .info-card img { opacity:.87; }
.split-layout { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1fr); gap:clamp(38px,7vw,102px); align-items:center; }.split-layout > img { width:100%; height:clamp(370px,38vw,500px); border-radius:20px; object-fit:cover; box-shadow:var(--shadow); }.split-layout--reverse > img { order:2; }.split-layout h2 { margin-bottom:16px; }.split-layout > div > p:not(.eyebrow) { max-width:610px; margin-bottom:12px; color:var(--color-muted); }.split-layout .four-grid,.split-layout .three-grid { margin-top:23px; }.split-layout .info-card { min-height:0; }.split-layout .info-card img { height:88px; margin-bottom:15px; }.support { background:#fff; }.support .info-card { background:#faf9f6; }
.oem,.comparison { color:#fff; background:linear-gradient(124deg,#302923,#1f1b19); }.three-grid--dark .info-card { border-color:rgba(255,255,255,.17); color:#fff; background:rgba(255,255,255,.08); box-shadow:none; }.three-grid--dark .info-card p { color:#eee4d7; }.three-grid--dark .info-card img { opacity:.86; }
.process { background:linear-gradient(180deg,#fff 0%,#faf8f3 100%); }.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.process-card { display:block; min-height:280px; overflow:hidden; border-top:3px solid var(--color-primary); color:var(--color-text); background:#fff; box-shadow:0 9px 23px rgba(44,35,17,.07); transition:transform .25s ease,box-shadow .25s ease; }.process-card img { width:100%; height:120px; object-fit:cover; }.process-card span,.process-card h3,.process-card p { display:block; margin-right:20px; margin-left:20px; }.process-card span { margin-top:19px; margin-bottom:13px; color:var(--color-primary-dark); font-family:Arial,sans-serif; font-size:.73rem; font-weight:800; letter-spacing:.12em; }.process-card h3 { margin-top:0; margin-bottom:8px; font-size:1.06rem; }.process-card p { margin-top:0; margin-bottom:20px; color:var(--color-muted); font-size:.87rem; line-height:1.5; }
.quality { background:#f7f5ef; }.scenarios { background:#fff; }.scenario-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }.scenario-card { position:relative; display:grid; min-height:380px; overflow:hidden; align-items:end; border-radius:18px; color:#fff; background:#2d2824; isolation:isolate; }.scenario-card::after { position:absolute; z-index:-1; inset:0; content:""; background:linear-gradient(180deg,rgba(25,20,17,0) 34%,rgba(25,20,17,.86)); }.scenario-card img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; }.scenario-card div { padding:22px; }.scenario-card h3 { margin-bottom:8px; }.scenario-card p { margin:0; color:#f3eade; font-size:.89rem; line-height:1.5; }
.definition { background:#f7f5ef; }.definition .text-link { margin-top:13px; }.comparison-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:13px; }.comparison-card { overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:15px; color:#fff; background:rgba(255,255,255,.08); transition:transform .25s ease,background .25s ease; }.comparison-card img { width:100%; height:160px; object-fit:cover; opacity:.88; }.comparison-card div { padding:18px; }.comparison-card h3 { margin-bottom:9px; font-size:1.06rem; }.comparison-card b { display:block; color:#f1db95; font-size:.84rem; line-height:1.45; }.comparison-card p { margin:9px 0 0; color:#eee4d7; font-size:.86rem; line-height:1.48; }
.checklist { background:#fff; }.checklist-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.check-card { display:grid; grid-template-columns:130px 1fr; overflow:hidden; min-height:160px; border:1px solid var(--color-line); border-radius:15px; color:var(--color-text); background:var(--ring-soft); transition:transform .25s ease,box-shadow .25s ease; }.check-card img { width:100%; height:100%; object-fit:cover; }.check-card div { padding:20px; }.check-card span { color:var(--color-primary-dark); font-family:Arial,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.12em; }.check-card h3 { margin:8px 0; font-size:1.05rem; }.check-card p { margin:0; color:var(--color-muted); font-size:.87rem; line-height:1.48; }
.partnership { color:#fff; background:#3a3029; }.partnership .eyebrow { color:#edd77e; }.partnership .split-layout > div > p:not(.eyebrow) { color:#eee4d7; }.partnership .button { margin-top:9px; }
.faq { background:#f7f5ef; }.faq-layout { display:grid; grid-template-columns:minmax(290px,.73fr) minmax(0,1fr); gap:clamp(38px,7vw,96px); align-items:start; }.faq-layout > img { position:sticky; top:24px; width:100%; height:550px; border-radius:20px; object-fit:cover; box-shadow:var(--shadow); }.faq-layout > div > p:not(.eyebrow) { margin-bottom:21px; color:var(--color-muted); }.faq-list { display:grid; gap:10px; }.faq-list article { overflow:hidden; border:1px solid var(--color-line); border-radius:13px; background:#fff; transition:border-color .25s ease; }.faq-list article.is-open { border-color:rgba(216,192,120,.95); }.faq-list button { display:grid; width:100%; padding:0; border:0; color:var(--color-text); background:transparent; text-align:left; }.faq-list button > span:first-child { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:19px 20px; }.faq-list h3 { margin:0; font-size:1.01rem; letter-spacing:-.02em; }.faq-list b { flex:none; color:var(--color-primary-dark); font-family:Arial,sans-serif; font-size:1.5rem; font-weight:400; transition:transform .25s ease; }.faq-list button > span:last-child { display:grid; grid-template-rows:0fr; overflow:hidden; padding:0 20px; color:var(--color-muted); font-size:.9rem; line-height:1.55; transition:grid-template-rows .25s ease,padding-bottom .25s ease; }.faq-list article.is-open button > span:last-child { grid-template-rows:1fr; padding-bottom:19px; }.faq-list article.is-open b { transform:rotate(45deg); }
.ring-inquiry { padding:102px 0; color:#fffaf0; background:linear-gradient(180deg,#7b7268,#5c554e); }.ring-inquiry__layout { display:grid; grid-template-columns:minmax(0,.87fr) minmax(360px,.74fr); gap:clamp(42px,8vw,116px); align-items:center; }.ring-inquiry__copy > img { width:100%; height:265px; margin-bottom:28px; border-radius:19px; object-fit:cover; box-shadow:0 16px 40px rgba(0,0,0,.2); }.ring-inquiry .eyebrow { color:#f2d98d; }.ring-inquiry__copy > p:not(.eyebrow) { max-width:520px; color:#f2eee6; }.ring-inquiry__form { display:grid; gap:15px; padding:31px; border-radius:19px; color:var(--color-text); background:#fff; box-shadow:0 18px 45px rgba(0,0,0,.17); }.ring-inquiry__form label { display:grid; gap:7px; font-size:.84rem; font-weight:800; }.ring-inquiry__form input,.ring-inquiry__form textarea { width:100%; padding:12px; border:1px solid var(--color-line); border-radius:10px; color:var(--color-text); background:#fff; resize:vertical; }.ring-inquiry__form input:focus-visible,.ring-inquiry__form textarea:focus-visible { border-color:var(--color-primary); outline:3px solid rgba(216,192,120,.3); }.ring-inquiry__form .button { width:100%; }.ring-inquiry-success { position:fixed; inset:50% auto auto 50%; width:min(440px,calc(100% - 32px)); margin:0; padding:0; border:0; border-radius:20px; color:var(--color-text); background:#fff; box-shadow:0 22px 60px rgba(46,35,16,.25); transform:translate(-50%,-50%); }.ring-inquiry-success::backdrop { background:rgba(23,31,36,.72); backdrop-filter:blur(4px); }.ring-inquiry-success > div { padding:42px 38px 36px; text-align:center; }.ring-inquiry-success h2 { margin-bottom:12px; }.ring-inquiry-success p:last-child { margin-bottom:0; color:var(--color-muted); }.ring-inquiry-success__close { position:absolute; top:14px; right:16px; display:grid; width:38px; height:38px; place-items:center; padding:0; border:0; border-radius:50%; color:var(--color-text); background:var(--color-soft); font-family:Arial,sans-serif; font-size:1.65rem; line-height:1; }
@media (hover:hover) and (pointer:fine) { .style-card:hover,.fact-card:hover,.info-card:hover,.process-card:hover,.scenario-card:hover,.comparison-card:hover,.check-card:hover { box-shadow:var(--shadow); transform:translateY(-5px); }.style-card:hover > img,.fact-card:hover img,.scenario-card:hover img { transform:scale(1.04); }.comparison-card:hover { background:rgba(255,255,255,.13); } }
@media (max-width:1080px) { .ring-hero__layout,.split-layout,.ring-inquiry__layout { grid-template-columns:1fr; }.ring-gallery { max-width:720px; }.split-layout--reverse > img { order:initial; }.style-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.fact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.three-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.scenario-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.comparison-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.checklist-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.faq-layout { grid-template-columns:1fr; }.faq-layout > img { position:static; height:400px; }.split-layout > img { height:430px; } }
@media (max-width:700px) { .ring-section { padding:76px 0; }.section-heading,.image-heading { display:grid; gap:16px; margin-bottom:29px; }.image-heading { grid-template-columns:1fr; }.image-heading > img { height:270px; }.ring-hero { padding:62px 0 70px; }.ring-hero h1 { font-size:clamp(3rem,12vw,4.2rem); }.four-grid { grid-template-columns:1fr; }.ring-gallery__main { aspect-ratio:1/1.02; }.ring-inquiry { padding:76px 0; }.split-layout > img { height:320px; } }
@media (max-width:520px) { .button-row { align-items:flex-start; flex-direction:column; }.style-grid,.fact-grid,.three-grid,.process-grid,.scenario-grid,.comparison-grid,.checklist-grid { grid-template-columns:1fr; }.style-card { min-height:0; }.style-card > img { height:auto; }.scenario-card { min-height:330px; }.check-card { grid-template-columns:115px 1fr; }.ring-gallery__thumbs img { height:75px; }.ring-gallery__thumbs span { right:7px; bottom:5px; left:7px; font-size:.64rem; }.ring-inquiry__form { padding:23px; }.ring-inquiry__copy > img { height:225px; }.ring-inquiry-success > div { padding:39px 26px 31px; } }
.faq-list button > span:last-child > span { min-height:0; }