/* ========================================================
   #articleInfo7
======================================================== */
#articleInfo7 { --article-black: #171716; --article-dark: #292826; --article-text: #69645d; --article-gray: #938d84; --article-gold: #b49356; --article-gold-light: #d7c29a; --article-paper: #f4f1ea; --article-white: #ffffff; --article-line: rgba(180,147,86,0.2); position: relative; color: var(--article-text); background: var(--article-white); font-family: "Noto Sans TC","Microsoft JhengHei",sans-serif; overflow: hidden; }
#articleInfo7 *,#articleInfo7 *::before,#articleInfo7 *::after { box-sizing: border-box; }
#articleInfo7 img { display: block; max-width: 100%; }
#articleInfo7 a { color: inherit; text-decoration: none; }
#articleInfo7 p { margin: 0; font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 0.7px; }
#articleInfo7 .section-label { margin-bottom: 22px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 10px; line-height: 1; letter-spacing: 4px; }
#articleInfo7 .section-title { color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: clamp(34px,3.5vw,52px); font-weight: 400; line-height: 1.45; letter-spacing: 2px; }
#articleInfo7 .section-title span { display: block; color: var(--article-gold); }


#articleInfo7 .project-hero {position: relative;display: grid;grid-template-columns: minmax(0,62%) minmax(0,38%);align-items: center;width: min(100%,1600px);min-height: 760px;margin: 0 auto;padding: 100px 40px 100px;}
#articleInfo7 .project-hero::before { content: "SHOWROOM"; position: absolute; top: 50px; right: -20px; color: rgba(180,147,86,0.07); font-family: "Times New Roman",serif; font-size: clamp(80px,10vw,165px); line-height: 1; letter-spacing: 8px; pointer-events: none; }
#articleInfo7 * { color: var(--article-dark); }
#articleInfo7 .hero-photo { position: relative; z-index: 1; padding: 35px 0 35px 35px; }
#articleInfo7 .hero-photo::before { content: ""; position: absolute; top: 0; left: 0; width: 58%; height: 100%; background: var(--article-paper); }
#articleInfo7 .hero-photo::after { content: ""; position: absolute; top: 16px; left: 16px; z-index: 1; width: 115px; height: 115px; border-top: 1px solid var(--article-gold); border-left: 1px solid var(--article-gold); pointer-events: none; }
#articleInfo7 .hero-photo a { position: relative; z-index: 2; display: block; overflow: hidden; }
#articleInfo7 .hero-photo img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center; filter: saturate(0.88) contrast(1.02); transition: filter 0.6s ease,transform 1.2s cubic-bezier(0.2,0.7,0.2,1); }
#articleInfo7 .hero-photo:hover img { filter: saturate(1) contrast(1); transform: scale(1.025); }
#articleInfo7 .photo-index { position: absolute; bottom: 58px; left: 55px; z-index: 3; display: flex; align-items: center; gap: 22px; padding: 17px 23px; color: var(--article-white); background: rgba(20,20,19,0.9); backdrop-filter: blur(8px); }
#articleInfo7 .photo-index span { font-family: Arial,sans-serif; font-size: 8px; letter-spacing: 3px; }
#articleInfo7 .photo-index small { padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.25); color: var(--article-gold-light); font-family: "Times New Roman",serif; font-size: 14px; }
#articleInfo7 .hero-info { position: relative; z-index: 3; margin-left: -80px; padding: 75px 0 75px 85px; background: var(--article-white); }
#articleInfo7 .hero-info::before { content: "01"; position: absolute; top: 28px; right: 0; color: rgba(180,147,86,0.14); font-family: "Times New Roman",serif; font-size: 76px; line-height: 1; }
#articleInfo7 .project-label { margin-bottom: 25px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 10px; line-height: 1; letter-spacing: 4px; }
#articleInfo7 .project-title { position: relative; color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: clamp(42px,4.5vw,68px); font-weight: 400; line-height: 1.25; letter-spacing: 3px; }
#articleInfo7 .project-title span { display: block; color: var(--article-gold); }
#articleInfo7 .project-subtitle { margin-top: 20px; color: var(--article-dark); font-size: 17px; font-weight: 400; line-height: 1.7; letter-spacing: 1.5px; }
#articleInfo7 .title-line { width: 70px; height: 1px; margin: 32px 0; background: var(--article-gold); }
#articleInfo7 .hero-info > p { max-width: 430px; }
#articleInfo7 .project-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--article-line); }
#articleInfo7 .meta-item span { display: block; margin-bottom: 8px; color: var(--article-gray); font-family: Arial,sans-serif; font-size: 8px; line-height: 1; letter-spacing: 2px; }
#articleInfo7 .meta-item strong { color: var(--article-dark); font-size: 13px; font-weight: 500; letter-spacing: 1px; }


#articleInfo7 .concept-section {position: relative;padding: 100px 40px;background: var(--article-paper);}
#articleInfo7 .concept-section::before { content: "LIGHT & SHADOW"; position: absolute; right: -50px; bottom: 25px; color: rgba(180,147,86,0.08); font-family: "Times New Roman",serif; font-size: clamp(70px,9vw,145px); line-height: 1; letter-spacing: 8px; pointer-events: none; }
#articleInfo7 .concept-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,42%) minmax(0,58%); gap: 90px; align-items: start; width: min(100%,1320px); margin: 0 auto; }
#articleInfo7 .concept-heading { position: sticky; top: 130px; }
#articleInfo7 .concept-content { position: relative; padding: 70px 75px; background: var(--article-white); }
#articleInfo7 .concept-content::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 3px; background: var(--article-gold); }
#articleInfo7 .concept-number { position: absolute; top: 28px; right: 35px; color: rgba(180,147,86,0.13); font-family: "Times New Roman",serif; font-size: 72px; line-height: 1; }
#articleInfo7 .concept-text { position: relative; z-index: 2; }
#articleInfo7 .concept-text p { margin-bottom: 25px; }
#articleInfo7 .concept-text p:last-of-type { margin-bottom: 0; }
#articleInfo7 .design-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 40px; }
#articleInfo7 .design-link span { color: var(--article-dark); font-family: Arial,sans-serif; font-size: 9px; letter-spacing: 2.5px; transition: color 0.35s ease; }
#articleInfo7 .design-link i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--article-line); border-radius: 50%; transition: border-color 0.35s ease,background 0.35s ease,transform 0.35s ease; }
#articleInfo7 .design-link svg { width: 16px; height: 16px; fill: var(--article-gold); }
#articleInfo7 .design-link:hover span { color: var(--article-gold); }
#articleInfo7 .design-link:hover i { border-color: var(--article-gold); background: var(--article-gold); transform: translateX(5px); }
#articleInfo7 .design-link:hover svg { fill: var(--article-white); }


#articleInfo7 .features-section {position: relative;padding: 100px 40px 100px;background: var(--article-white);}
#articleInfo7 .features-inner { width: min(100%,1400px); margin: 0 auto; }
#articleInfo7 .features-heading { display: grid; grid-template-columns: minmax(0,55%) minmax(0,45%); gap: 80px; align-items: end; margin-bottom: 75px; }
#articleInfo7 .features-heading > p { max-width: 470px; margin-left: auto; padding-left: 35px; border-left: 1px solid var(--article-gold); }
#articleInfo7 .feature-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--article-line); border-left: 1px solid var(--article-line); }
#articleInfo7 .feature-item { position: relative; min-height: 390px; padding: 55px 35px 45px; border-right: 1px solid var(--article-line); border-bottom: 1px solid var(--article-line); background: var(--article-white); overflow: hidden; transition: background 0.45s ease,transform 0.45s ease; }
#articleInfo7 .feature-item::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--article-gold); transform: scaleX(0); transform-origin: right center; transition: transform 0.45s ease; }
#articleInfo7 .feature-item:hover { z-index: 2; background: var(--article-paper); transform: translateY(-8px); }
#articleInfo7 .feature-item:hover::before { transform: scaleX(1); transform-origin: left center; }
#articleInfo7 .feature-number { position: absolute; top: 25px; right: 25px; color: rgba(180,147,86,0.15); font-family: "Times New Roman",serif; font-size: 48px; line-height: 1; }
#articleInfo7 .feature-icon { position: relative; width: 58px; height: 58px; margin-bottom: 35px; border: 1px solid var(--article-gold); border-radius: 50%; }
#articleInfo7 .feature-icon::before,#articleInfo7 .feature-icon::after { content: ""; position: absolute; top: 50%; left: 50%; background: var(--article-gold); transform: translate(-50%,-50%); }
#articleInfo7 .feature-icon::before { width: 25px; height: 1px; }
#articleInfo7 .feature-icon::after { width: 1px; height: 25px; }
#articleInfo7 .feature-icon span { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: 1px solid var(--article-gold); border-radius: 50%; background: var(--article-white); transform: translate(-50%,-50%); }
#articleInfo7 .feature-title { margin-bottom: 8px; color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: 21px; font-weight: 500; line-height: 1.55; letter-spacing: 1px; }
#articleInfo7 .feature-en { margin-bottom: 25px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 8px; line-height: 1; letter-spacing: 2px; }
#articleInfo7 .feature-item p { font-size: 14px; line-height: 1.9; }


#articleInfo7 .project-ending { position: relative; display: grid; grid-template-columns: minmax(100px,1fr) auto minmax(100px,1fr); gap: 55px; align-items: center; padding: 100px 40px; color: var(--article-white); background: var(--article-black); }
#articleInfo7 .ending-line { width: 100%; height: 1px; background: rgba(180,147,86,0.45); }
#articleInfo7 .ending-content { text-align: center; }
#articleInfo7 .ending-en { margin-bottom: 18px; color: var(--article-gold-light); font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 4px; }
#articleInfo7 .ending-title {margin-bottom: 12px;font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(30px,3vw,43px);font-weight: 400;line-height: 1.4;letter-spacing: 3px;color: var(--article-white);}
#articleInfo7 .ending-content p { color: rgba(255,255,255,0.58); font-size: 13px; letter-spacing: 1.5px; }
#articleInfo7 .ending-number { color: rgba(180,147,86,0.55); font-family: "Times New Roman",serif; font-size: 64px; font-style: italic; line-height: 1; }

@media screen and (max-width:1200px) {
  #articleInfo7 .project-hero { grid-template-columns: minmax(0,58%) minmax(0,42%); padding-right: 30px; padding-left: 30px; }
  #articleInfo7 .hero-info { margin-left: -55px; padding-left: 60px; }
  #articleInfo7 .concept-inner { gap: 60px; }
  #articleInfo7 .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #articleInfo7 .feature-item { min-height: 340px; }
}
@media screen and (max-width:960px) {
  #articleInfo7 .project-hero { display: block; min-height: 0; padding-top: 90px; }
  #articleInfo7 .hero-photo { width: 92%; }
  #articleInfo7 .hero-info { width: 88%; margin: -30px 0 0 auto; padding: 60px; box-shadow: 0 22px 60px rgba(28,26,21,0.1); }
  #articleInfo7 .concept-inner { display: block; }
  #articleInfo7 .concept-heading { position: relative; top: auto; max-width: 650px; margin-bottom: 55px; }
  #articleInfo7 .features-heading { grid-template-columns: 1fr; gap: 35px; }
  #articleInfo7 .features-heading > p { max-width: 650px; margin-left: 0; }
  #articleInfo7 .project-ending { grid-template-columns: 1fr auto; }
  #articleInfo7 .ending-content { text-align: left; }
  #articleInfo7 .ending-line { display: none; }
}
@media screen and (max-width:767px) {
  #articleInfo7 p { font-size: 14px; line-height: 1.9; }
  #articleInfo7 .project-hero { padding: 75px 20px 90px; }
  #articleInfo7 .project-hero::before { top: 30px; font-size: 55px; letter-spacing: 3px; }
  #articleInfo7 .hero-photo { width: 100%; padding: 20px 0 20px 20px; }
  #articleInfo7 .hero-photo::after { top: 8px; left: 8px; width: 75px; height: 75px; }
  #articleInfo7 .hero-photo img { aspect-ratio: 4/3; }
  #articleInfo7 .photo-index { bottom: 38px; left: 38px; }
  #articleInfo7 .hero-info { width: calc(100% - 15px); margin-top: -15px; padding: 45px 30px; }
  #articleInfo7 .hero-info::before { top: 18px; right: 22px; font-size: 56px; }
  #articleInfo7 .project-title { font-size: 38px; }
  #articleInfo7 .project-subtitle { font-size: 15px; }
  #articleInfo7 .project-meta { gap: 18px; }
  #articleInfo7 .concept-section { padding: 90px 20px; }
  #articleInfo7 .concept-section::before { display: none; }
  #articleInfo7 .section-title { font-size: 34px; }
  #articleInfo7 .concept-content { padding: 50px 30px; }
  #articleInfo7 .concept-number { top: 18px; right: 20px; font-size: 55px; }
  #articleInfo7 .features-section { padding: 90px 20px 100px; }
  #articleInfo7 .features-heading { margin-bottom: 50px; }
  #articleInfo7 .features-heading > p { padding-left: 22px; }
  #articleInfo7 .feature-item { min-height: 330px; padding: 45px 30px 40px; }
  #articleInfo7 .project-ending { gap: 25px; padding: 75px 20px; }
  #articleInfo7 .ending-number { font-size: 48px; }
}
@media screen and (max-width:480px) {
  #articleInfo7 .project-hero { padding-right: 15px; padding-left: 15px; }
  #articleInfo7 .hero-info { width: calc(100% - 10px); padding: 38px 23px; }
  #articleInfo7 .project-label { font-size: 8px; letter-spacing: 2.5px; }
  #articleInfo7 .project-title { font-size: 32px; }
  #articleInfo7 .project-meta { grid-template-columns: 1fr; }
  #articleInfo7 .concept-section { padding-right: 15px; padding-left: 15px; }
  #articleInfo7 .section-title { font-size: 29px; }
  #articleInfo7 .concept-content { padding: 42px 23px; }
  #articleInfo7 .design-link { gap: 14px; }
  #articleInfo7 .design-link span { font-size: 8px; letter-spacing: 1.5px; }
  #articleInfo7 .features-section { padding-right: 15px; padding-left: 15px; }
  #articleInfo7 .feature-grid { grid-template-columns: 1fr; }
  #articleInfo7 .feature-item { min-height: 0; }
  #articleInfo7 .project-ending { display: block; padding-right: 15px; padding-left: 15px; text-align: center; }
  #articleInfo7 .ending-content { text-align: center; }
  #articleInfo7 .ending-number { margin-top: 35px; }
}