/* ========================================================
   articleInfo2
======================================================== */
#articleInfo2 { --article-gold: #b49356; --article-gold-light: #d8c393; --article-black: #171716; --article-dark: #272622; --article-text: #625f58; --article-gray: #8d8980; --article-paper: #f5f2eb; --article-white: #ffffff; --article-line: rgba(180,147,86,0.28); position: relative; width: 100%; color: var(--article-black); background: var(--article-white); overflow: hidden; }
#articleInfo2 * { box-sizing: border-box; }
#articleInfo2 img { display: block; max-width: 100%; }
#articleInfo2 article { margin: 0; }
#articleInfo2 article p { margin: 0; color: var(--article-text); font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 0.7px; }
/* ========================================================
   project-intro
======================================================== */
#articleInfo2 .project-intro { display: grid; grid-template-columns: minmax(0,58%) minmax(0,42%); width: min(100%,1600px); min-height: 720px; margin: 0 auto; padding: 100px 40px 120px; }
#articleInfo2 .project-photo { position: relative; align-self: center; padding: 0 0 55px; }
#articleInfo2 .project-photo::before { content: ""; position: absolute; top: -38px; left: -40px; width: 46%; height: 55%; background: var(--article-paper); }
#articleInfo2 .project-photo::after {content: "";position: absolute;right: -20px;bottom: 29px;width: 58%;height: 72%;border-right: 1px solid var(--article-line);border-bottom: 1px solid var(--article-line);pointer-events: none;}
#articleInfo2 .photo-frame { position: relative; z-index: 2; aspect-ratio: 16/10; background: #ddd8cd; overflow: hidden; }
#articleInfo2 .photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(17,17,16,0.08),transparent 48%,rgba(17,17,16,0.16)); pointer-events: none; }
#articleInfo2 .photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.2s cubic-bezier(0.2,0.7,0.2,1); }
#articleInfo2 .project-intro:hover .photo-frame img { transform: scale(1.035); }
#articleInfo2 .photo-label {position: absolute;z-index: 3;right: 55px;bottom: 0;display: flex;align-items: center;gap: 20px;min-width: 285px;padding: 25px 30px;color: var(--article-white);background: var(--article-black);}
#articleInfo2 .photo-label span { font-family: Arial,sans-serif; font-size: 11px; line-height: 1; letter-spacing: 2.5px; }
#articleInfo2 .photo-label font { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.25); color: var(--article-gold-light); font-family: "Times New Roman",serif; font-size: 13px; line-height: 1; letter-spacing: 1.5px; }
#articleInfo2 .project-content { position: relative; z-index: 3; align-self: center; margin-left: -55px; padding: 70px 70px 70px 85px; background: rgba(255,255,255,0.97); box-shadow: 0 28px 80px rgba(28,26,21,0.09); }
#articleInfo2 .section-number { position: absolute; top: 20px; right: 32px; color: rgba(180,147,86,0.15); font-family: "Times New Roman",serif; font-size: 76px; font-weight: 400; line-height: 1; }
#articleInfo2 .project-category { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 10px; font-weight: 400; line-height: 1; letter-spacing: 3.5px; }
#articleInfo2 .project-category span { display: block; width: 42px; height: 1px; background: var(--article-gold); }
#articleInfo2 .project-title { margin-bottom: 17px; color: var(--article-black); font-family: "Times New Roman","Noto Serif TC",serif; font-size: clamp(42px,4.2vw,68px); font-weight: 400; line-height: 1; letter-spacing: -1px; text-transform: uppercase; }
#articleInfo2 .project-title small { display: block; margin-top: 11px; color: var(--article-gray); font-family: Arial,sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 2.5px; text-transform: none; }
#articleInfo2 .project-subtitle { position: relative; margin-bottom: 28px; padding-bottom: 27px; color: var(--article-dark); font-family: "Noto Serif TC","Times New Roman",serif; font-size: clamp(20px,1.8vw,27px); font-weight: 400; line-height: 1.6; letter-spacing: 1px; }
#articleInfo2 .project-subtitle::after { content: ""; position: absolute; bottom: 0; left: 0; width: 65px; height: 1px; background: var(--article-gold); }
#articleInfo2 .project-description { margin-bottom: 35px; }
#articleInfo2 .project-tags { display: flex; flex-wrap: wrap; gap: 8px; }
#articleInfo2 .project-tags span { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; color: var(--article-gray); background: var(--article-paper); border: 1px solid rgba(180,147,86,0.18); font-size: 12px; line-height: 1.4; letter-spacing: 1px; }
/* ========================================================
   equipment-section
======================================================== */
#articleInfo2 .equipment-section { position: relative; padding: 120px 40px 135px; background: var(--article-paper); }
#articleInfo2 .equipment-section::before { content: "TECHNOLOGY"; position: absolute; top: 52%; left: -70px; color: rgba(180,147,86,0.07); font-family: "Times New Roman",serif; font-size: 135px; line-height: 1; letter-spacing: 13px; pointer-events: none; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
#articleInfo2 .section-heading {position: relative;z-index: 2;width: 100%;margin: 0 auto 65px;text-align: center;display: flex;flex-direction: column;align-items: center;}
#articleInfo2 .heading-en { margin-bottom: 17px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 10px; line-height: 1; letter-spacing: 4px; }
#articleInfo2 .heading-title { color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: clamp(31px,3vw,45px); font-weight: 400; line-height: 1.5; letter-spacing: 2px; }
#articleInfo2 .heading-line { width: 1px; height: 45px; margin: 22px auto; background: var(--article-gold); }
#articleInfo2 .section-heading p { margin: 0; color: var(--article-gray); font-size: 14px; line-height: 1.9; letter-spacing: 0.7px; }
#articleInfo2 .equipment-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px; width: min(100%,1220px); margin: 0 auto; }
#articleInfo2 .equipment-card { position: relative; min-height: 420px; padding: 60px 60px 55px; background: var(--article-white); border: 1px solid rgba(180,147,86,0.13); overflow: hidden; transition: color 0.45s ease,background 0.45s ease,border-color 0.45s ease,box-shadow 0.45s ease,transform 0.45s ease; }
#articleInfo2 .equipment-card::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: var(--article-gold); transition: width 0.5s ease; }
#articleInfo2 .equipment-card:hover { color: var(--article-white); background: var(--article-black); border-color: var(--article-black); box-shadow: 0 28px 65px rgba(25,23,18,0.16); transform: translateY(-8px); }
#articleInfo2 .equipment-card:hover::before { width: 100%; }
#articleInfo2 .equipment-number { position: absolute; top: 32px; right: 38px; color: rgba(180,147,86,0.2); font-family: "Times New Roman",serif; font-size: 58px; line-height: 1; }
#articleInfo2 .equipment-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 45px; color: var(--article-gold); border: 1px solid var(--article-line); border-radius: 50%; }
#articleInfo2 .equipment-icon svg {width: 38px;height: 38px;fill: none;stroke: var(--article-gold);stroke-width: 1.5;stroke-linecap: round;stroke-linejoin: round;}
#articleInfo2 .equipment-label { margin-bottom: 13px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 3px; }
#articleInfo2 .equipment-title { margin-bottom: 8px; color: var(--article-gray); font-size: 13px; line-height: 1.5; letter-spacing: 1.5px; transition: color 0.45s ease; }
#articleInfo2 .equipment-name { margin-bottom: 28px; color: var(--article-black); font-family: "Times New Roman","Noto Serif TC",serif; font-size: clamp(29px,3vw,43px); font-weight: 400; line-height: 1.25; letter-spacing: 0.5px; transition: color 0.45s ease; }
#articleInfo2 .equipment-card article { padding-top: 22px; border-top: 1px solid var(--article-line); }
#articleInfo2 .equipment-card article p { transition: color 0.45s ease; }
#articleInfo2 .equipment-card:hover .equipment-title,#articleInfo2 .equipment-card:hover .equipment-name { color: var(--article-white); }
#articleInfo2 .equipment-card:hover article p { color: rgba(255,255,255,0.68); }
#articleInfo2 .equipment-decoration { position: absolute; right: -45px; bottom: -45px; width: 145px; height: 145px; border: 1px solid rgba(180,147,86,0.22); border-radius: 50%; }
#articleInfo2 .equipment-decoration::before { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(180,147,86,0.16); border-radius: 50%; }
/* ========================================================
   interactive-section
======================================================== */
#articleInfo2 .interactive-section {display: grid;grid-template-columns: minmax(0,55%) minmax(0,45%);width: min(100%,1500px);margin: 0 auto;padding: 80px 40px;}
#articleInfo2 .interactive-photo { position: relative; align-self: center; padding: 35px 0 35px 35px; }
#articleInfo2 .interactive-photo::before { content: ""; position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: var(--article-paper); }
#articleInfo2 .interactive-image { position: relative; z-index: 2; aspect-ratio: 16/10; overflow: hidden; }
#articleInfo2 .interactive-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top,rgba(23,23,22,0.35),transparent 55%); pointer-events: none; }
#articleInfo2 .interactive-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1.1s cubic-bezier(0.2,0.7,0.2,1); }
#articleInfo2 .interactive-section:hover .interactive-image img { transform: scale(1.04); }
#articleInfo2 .interactive-index { position: absolute; z-index: 3; right: 25px; bottom: 65px; display: flex; align-items: flex-end; gap: 17px; color: var(--article-white); }
#articleInfo2 .interactive-index span { font-family: "Times New Roman",serif; font-size: 56px; line-height: 0.8; }
#articleInfo2 .interactive-index font { padding-bottom: 2px; font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 2.5px; }
#articleInfo2 .interactive-content { position: relative; z-index: 3; align-self: center; margin-left: -45px; padding: 65px 55px 65px 75px; background: var(--article-white); }
#articleInfo2 .interactive-title { position: relative; margin-bottom: 32px; padding-bottom: 28px; color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: clamp(31px,3.2vw,48px); font-weight: 400; line-height: 1.4; letter-spacing: 2px; }
#articleInfo2 .interactive-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 60px; height: 1px; background: var(--article-gold); }
#articleInfo2 .interactive-title small { display: block; margin-top: 4px; color: var(--article-gray); font-size: 55%; font-weight: 400; letter-spacing: 1px; }
#articleInfo2 .interactive-content article p + p { margin-top: 20px; }
#articleInfo2 .mission-box { position: relative; margin-top: 38px; padding: 24px 28px 24px 36px; background: var(--article-paper); border-left: 2px solid var(--article-gold); }
#articleInfo2 .mission-label { margin-bottom: 9px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 3px; }
#articleInfo2 .mission-text { color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: 20px; line-height: 1.5; letter-spacing: 2px; }


@media screen and (max-width:1200px) {
  #articleInfo2 .project-intro { grid-template-columns: minmax(0,55%) minmax(0,45%); padding: 85px 30px 100px; }
  #articleInfo2 .project-content { margin-left: -35px; padding: 55px 45px 55px 55px; }
  #articleInfo2 .equipment-section { padding: 100px 30px 115px; }
  #articleInfo2 .equipment-card { padding: 50px 45px; }
  #articleInfo2 .interactive-section { padding: 110px 30px; }
  #articleInfo2 .interactive-content { margin-left: -30px; padding: 55px 40px 55px 55px; }
}
@media screen and (max-width:900px) {
  #articleInfo2 .project-intro { display: block; min-height: 0; }
  #articleInfo2 .project-photo { width: 88%; }
  #articleInfo2 .project-content { width: 88%; margin: -35px 0 0 auto; padding: 55px; }
  #articleInfo2 .equipment-grid { gap: 24px; }
  #articleInfo2 .equipment-card { min-height: 390px; padding: 45px 35px; }
  #articleInfo2 .interactive-section { display: block; }
  #articleInfo2 .interactive-photo { width: 90%; }
  #articleInfo2 .interactive-content { width: 88%; margin: -40px 0 0 auto; padding: 55px; }
}
@media screen and (max-width:767px) {
  #articleInfo2 article p { font-size: 14px; line-height: 1.9; }
  #articleInfo2 .project-intro { padding: 60px 20px 75px; }
  #articleInfo2 .project-photo { width: 100%; padding-bottom: 38px; }
  #articleInfo2 .project-photo::before { top: -20px; left: -20px; }
  #articleInfo2 .project-photo::after { display: none; }
  #articleInfo2 .photo-frame { aspect-ratio: 4/3; }
  #articleInfo2 .photo-label { right: 15px; min-width: 245px; padding: 19px 22px; }
  #articleInfo2 .project-content {width: calc(100% - 0px);margin: 15px 0 0 auto;padding: 45px 30px;}
  #articleInfo2 .section-number { top: 16px; right: 20px; font-size: 56px; }
  #articleInfo2 .project-category { margin-bottom: 20px; }
  #articleInfo2 .project-title { font-size: 42px; }
  #articleInfo2 .project-subtitle { font-size: 20px; }
  #articleInfo2 .equipment-section { padding: 80px 20px 90px; }
  #articleInfo2 .equipment-section::before { display: none; }
  #articleInfo2 .section-heading { margin-bottom: 45px; }
  #articleInfo2 .equipment-grid { grid-template-columns: 1fr; }
  #articleInfo2 .equipment-card { min-height: 360px; padding: 42px 35px; }
  #articleInfo2 .equipment-card:hover { transform: translateY(-4px); }
  #articleInfo2 .interactive-section { padding: 80px 20px; }
  #articleInfo2 .interactive-photo { width: 100%; padding: 20px 0 20px 20px; }
  #articleInfo2 .interactive-image { aspect-ratio: 4/3; }
  #articleInfo2 .interactive-index { right: 18px; bottom: 40px; }
  #articleInfo2 .interactive-content { width: calc(100% - 15px); margin: -20px 0 0 auto; padding: 45px 30px; }
  #articleInfo2 .interactive-title { font-size: 31px; }
}
@media screen and (max-width:480px) {
  #articleInfo2 .project-intro { padding-right: 15px; padding-left: 15px; }
  #articleInfo2 .photo-label { right: 10px; gap: 13px; min-width: 0; padding: 16px 17px; }
  #articleInfo2 .photo-label span { font-size: 9px; letter-spacing: 1.5px; }
  #articleInfo2 .photo-label font { padding-left: 13px; font-size: 11px; }
  #articleInfo2 .project-content { width: calc(100% - 10px); padding: 38px 23px; }
  #articleInfo2 .project-title { font-size: 35px; }
  #articleInfo2 .project-title small { font-size: 10px; letter-spacing: 1.5px; }
  #articleInfo2 .project-subtitle { font-size: 18px; }
  #articleInfo2 .project-tags { gap: 6px; }
  #articleInfo2 .project-tags span { padding: 5px 10px; font-size: 11px; }
  #articleInfo2 .equipment-section { padding-right: 15px; padding-left: 15px; }
  #articleInfo2 .heading-title { font-size: 28px; }
  #articleInfo2 .equipment-card { min-height: 340px; padding: 38px 25px; }
  #articleInfo2 .equipment-number { top: 25px; right: 25px; font-size: 48px; }
  #articleInfo2 .equipment-icon { width: 62px; height: 62px; margin-bottom: 35px; }
  #articleInfo2 .equipment-name { font-size: 29px; }
  #articleInfo2 .interactive-section { padding-right: 15px; padding-left: 15px; }
  #articleInfo2 .interactive-content {width: calc(100% - 0px);padding: 38px 0px;}
  #articleInfo2 .interactive-title { font-size: 27px; }
  #articleInfo2 .mission-box { padding: 22px 20px; }
  #articleInfo2 .mission-text { font-size: 18px; }
}