#articleInfo15 {--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: #eaeaea;font-family: "Noto Sans TC","Microsoft JhengHei",sans-serif;overflow: hidden;} #articleInfo15 *,#articleInfo15 *::before,#articleInfo15 *::after { box-sizing: border-box; } #articleInfo15 img { display: block; max-width: 100%; } #articleInfo15 a { color: inherit; text-decoration: none; } #articleInfo15 p { margin: 0; font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 0.7px; } #articleInfo15 .section-label { margin-bottom: 22px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 10px; line-height: 1; letter-spacing: 4px; } #articleInfo15 .section-title{width:100%;} #articleInfo15 .section-title , #articleInfo15 .section-title span {color: var(--article-black);font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(35px,3.6vw,52px);font-weight: 400;line-height: 1.45;letter-spacing: 2px;display: flex;justify-content: center;} #articleInfo15 .section-title span { display: block; color: var(--article-gold); } #articleInfo15 *{color: var(--article-black);} #articleInfo15 .philosophy-hero {position: relative;width: min(100%,1600px);margin: 0 auto;padding: 100px 40px 100px;border-bottom: #ffffff 1px solid;} #articleInfo15 .philosophy-hero::before {content: "PHILOSOPHY";position: absolute;top: 120px;margin: 0 auto;width: 100%;left: 0;text-align: center;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;} #articleInfo15 .hero-heading {position: relative;z-index: 2;max-width: 1050px;margin: 0 auto 60px;text-align: center;display: flex;flex-direction: column;align-items: center;} #articleInfo15 .hero-heading::after { content: ""; display: block; width: 1px; height: 65px; margin: 45px auto 0; background: var(--article-gold); } #articleInfo15 .hero-title , #articleInfo15 .hero-title span {color: var(--article-black);font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(35px,3.6vw,52px);font-weight: 400;line-height: 1.35;letter-spacing: 4px;display: flex;} #articleInfo15 .hero-title span { color: var(--article-gold); } #articleInfo15 .hero-en { margin-top: 22px; color: var(--article-gray); font-family: Arial,sans-serif; font-size: 9px; line-height: 1.8; letter-spacing: 4px; } #articleInfo15 .hero-content { position: relative; display: grid; grid-template-columns: minmax(0,64%) minmax(0,36%); align-items: center; } #articleInfo15 .hero-photo { position: relative; z-index: 1; padding: 35px 0 35px 35px; } #articleInfo15 .hero-photo::before {content: "";position: absolute;top: 0;left: 0;width: 55%;height: 100%;background: var(--article-white);} #articleInfo15 .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; } #articleInfo15 .hero-photo img { position: relative; z-index: 2; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: center; filter: saturate(0.85) contrast(1.03); transition: filter 0.6s ease,transform 1.2s cubic-bezier(0.2,0.7,0.2,1); } #articleInfo15 .hero-photo:hover img { filter: saturate(1) contrast(1); transform: scale(1.02); } #articleInfo15 .photo-label { position: absolute; bottom: 58px; left: 55px; z-index: 3; display: flex; align-items: center; gap: 20px; padding: 17px 22px; color: var(--article-white); background: rgba(23,23,22,0.9); backdrop-filter: blur(8px); } #articleInfo15 .photo-label span,#articleInfo15 .photo-label small {font-family: Arial,sans-serif;font-size: 8px;font-weight: 400;line-height: 1;letter-spacing: 3px;color: var(--article-white);} #articleInfo15 .photo-label small { padding-left: 20px; border-left: 1px solid rgba(255,255,255,0.25); color: var(--article-gold-light); } #articleInfo15 .hero-statement {position: relative;z-index: 3;margin-left: -75px;padding: 75px 5px 75px 85px;background: var(--article-white);} #articleInfo15 .statement-number {position: absolute;top: 25px;right: 15px;color: rgba(180,147,86,0.14);font-family: "Times New Roman",serif;font-size: 76px;line-height: 1;} #articleInfo15 .statement-en { margin-bottom: 23px; color: var(--article-gold); font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 3.5px; } #articleInfo15 .statement-title {padding-right: 30px;color: var(--article-black);font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(30px,3vw,39px);font-weight: 400;line-height: 1.5;letter-spacing: 2px;} #articleInfo15 .statement-title span { display: block; color: var(--article-gold); } #articleInfo15 .statement-line { width: 65px; height: 1px; margin: 32px 0; background: var(--article-gold); } #articleInfo15 .hero-statement p { max-width: 440px; } #articleInfo15 .principle-section {position: relative;padding: 100px 40px 155px;background: var(--article-paper);} #articleInfo15 .principle-section::before {content: "VALUES";position: absolute;right: 20px;bottom: 0;color: rgba(180,147,86,0.07);font-family: "Times New Roman",serif;font-size: clamp(90px,12vw,140px);line-height: 1;letter-spacing: 10px;pointer-events: none;} #articleInfo15 .principle-inner { position: relative; z-index: 2; width: min(100%,1400px); margin: 0 auto; } #articleInfo15 .principle-heading {display: grid;grid-template-columns: minmax(0,55%) minmax(0,45%);gap: 10px;align-items: end;margin-bottom: 85px;} #articleInfo15 .principle-heading > p {max-width: 520px;margin-left: auto;padding-left: 35px;border-left: 1px solid var(--article-gold);} #articleInfo15 .principle-list { border-top: 1px solid var(--article-line); } #articleInfo15 .principle-item { position: relative; display: grid; grid-template-columns: 85px 90px minmax(180px,0.7fr) minmax(300px,1.3fr); gap: 35px; align-items: center; min-height: 210px; padding: 38px 45px 38px 20px; border-bottom: 1px solid var(--article-line); background: transparent; overflow: hidden; transition: background 0.45s ease,padding 0.45s ease; } #articleInfo15 .principle-item::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--article-gold); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.45s ease; } #articleInfo15 .principle-item:hover { padding-right: 35px; padding-left: 30px; background: var(--article-white); } #articleInfo15 .principle-item:hover::before { transform: scaleY(1); transform-origin: top center; } #articleInfo15 .principle-number { position: relative; z-index: 2; color: var(--article-gold); font-family: "Times New Roman",serif; font-size: 32px; font-style: italic; line-height: 1; } #articleInfo15 .principle-symbol { position: relative; z-index: 2; width: 62px; height: 62px; border: 1px solid var(--article-gold); border-radius: 50%; transition: background 0.4s ease,transform 0.4s ease; } #articleInfo15 .principle-item:hover .principle-symbol {transform: rotate(45deg);} #articleInfo15 .principle-symbol::before,#articleInfo15 .principle-symbol::after,#articleInfo15 .principle-symbol span::before,#articleInfo15 .principle-symbol span::after { content: ""; position: absolute; background: var(--article-gold); transition: background 0.4s ease; } #articleInfo15 .principle-item:hover .principle-symbol::before,#articleInfo15 .principle-item:hover .principle-symbol::after,#articleInfo15 .principle-item:hover .principle-symbol span::before,#articleInfo15 .principle-item:hover .principle-symbol span::after {} #articleInfo15 .principle-name { position: relative; z-index: 2; } #articleInfo15 .principle-title { margin-bottom: 10px; color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: 23px; font-weight: 500; line-height: 1.5; letter-spacing: 1.5px; } #articleInfo15 .principle-en { color: var(--article-gold); font-family: Arial,sans-serif; font-size: 8px; line-height: 1; letter-spacing: 2.5px; } #articleInfo15 .principle-description { position: relative; z-index: 2; } #articleInfo15 .principle-description p { font-size: 14px; line-height: 1.95; } #articleInfo15 .principle-description a { position: relative; color: var(--article-dark); font-weight: 500; } #articleInfo15 .principle-description a::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: var(--article-gold); transform: scaleX(0); transform-origin: right center; transition: transform 0.35s ease; } #articleInfo15 .principle-description a:hover::after { transform: scaleX(1); transform-origin: left center; } #articleInfo15 .principle-keyword { position: absolute; top: 50%; right: 25px; color: rgba(180,147,86,0.06); font-family: "Times New Roman",serif; font-size: 70px; line-height: 1; letter-spacing: 5px; transform: translateY(-50%); pointer-events: none; transition: color 0.45s ease,right 0.45s ease; } #articleInfo15 .principle-item:hover .principle-keyword { right: 45px; color: rgba(180,147,86,0.1); } #articleInfo15 .principle-symbol { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--article-gold); } #articleInfo15 .principle-symbol svg { display: block; width: 80%; height: 80%; stroke: var(--article-gold); } #articleInfo15 .principle-symbol svg path ,#articleInfo15 .principle-symbol svg circle{stroke: var(--article-gold);} #articleInfo15 .principle-symbol svg circle{} #articleInfo15 .process-section {position: relative;padding: 145px 40px;background: var(--article-white);} #articleInfo15 .process-inner { width: min(100%,1400px); margin: 0 auto; } #articleInfo15 .process-heading {max-width: 750px;margin: 0 auto 85px;text-align: center;display: flex;flex-direction: column;align-items: center;} #articleInfo15 .process-heading::after { content: ""; display: block; width: 1px; height: 55px; margin: 38px auto 0; background: var(--article-gold); } #articleInfo15 .process-track { display: grid; grid-template-columns: minmax(120px,1fr) 45px minmax(120px,1fr) 45px minmax(120px,1fr) 45px minmax(120px,1fr) 45px minmax(120px,1fr); align-items: center; } #articleInfo15 .process-item { position: relative; padding: 38px 20px; border: 1px solid var(--article-line); text-align: center; background: var(--article-white); transition: border-color 0.4s ease,background 0.4s ease,transform 0.4s ease; } #articleInfo15 .process-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.4s ease; } #articleInfo15 .process-item:hover { border-color: var(--article-gold); background: var(--article-paper); transform: translateY(-8px); } #articleInfo15 .process-item:hover::before { transform: scaleX(1); transform-origin: left center; } #articleInfo15 .process-item span { display: block; margin-bottom: 23px; color: var(--article-gold); font-family: "Times New Roman",serif; font-size: 28px; font-style: italic; line-height: 1; } #articleInfo15 .process-item strong { display: block; margin-bottom: 12px; color: var(--article-black); font-family: "Noto Serif TC","Times New Roman",serif; font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 1px; } #articleInfo15 .process-item small {display: block;color: var(--article-gray);font-family: Arial,sans-serif;font-size: 12px;line-height: 1;letter-spacing: 2px;text-align: left;} #articleInfo15 .process-arrow { display: flex; align-items: center; justify-content: center; } #articleInfo15 .process-arrow svg { width: 18px; height: 18px; fill: var(--article-gold); } #articleInfo15 .philosophy-ending { position: relative; display: grid; grid-template-columns: minmax(100px,1fr) auto minmax(100px,1fr); gap: 55px; align-items: center; padding: 105px 40px; color: var(--article-white); background: var(--article-black); overflow: hidden; } #articleInfo15 .ending-decoration { color: rgba(180,147,86,0.18); font-family: "Times New Roman",serif; font-size: 80px; font-style: italic; line-height: 1; } #articleInfo15 .ending-decoration::after { content: ""; display: inline-block; width: calc(100% - 110px); height: 1px; margin-left: 30px; vertical-align: middle; background: rgba(180,147,86,0.4); } #articleInfo15 .ending-content { text-align: center; } #articleInfo15 .ending-en { margin-bottom: 18px; color: var(--article-gold-light); font-family: Arial,sans-serif; font-size: 9px; line-height: 1; letter-spacing: 4px; } #articleInfo15 .ending-title {margin-bottom: 12px;font-family: "Noto Serif TC","Times New Roman",serif;font-size: clamp(31px,3vw,45px);font-weight: 400;line-height: 1.4;letter-spacing: 3px;color: var(--article-white);} #articleInfo15 .ending-content p { color: rgba(255,255,255,0.58); font-size: 13px; letter-spacing: 1.5px; } #articleInfo15 .ending-index { color: rgba(180,147,86,0.55); font-family: "Times New Roman",serif; font-size: 64px; font-style: italic; line-height: 1; text-align: right; } /* ======================================================== WOW ======================================================== */ #articleInfo15 .wow { visibility: visible; } @media screen and (max-width:1470px) { #articleInfo15 .hero-statement{margin-left: -130px;} #articleInfo15 .section-title, #articleInfo15 .section-title span{font-size: clamp(35px, 3vw, 50px);} #articleInfo15 .hero-title, #articleInfo15 .hero-title span{font-size: clamp(30px, 4vw, 55px);} #articleInfo15 .statement-title{font-size: clamp(30px, 3vw, 36px);} #articleInfo15 .ending-title{font-size: clamp(30px, 3vw, 40px);} #articleInfo15 .process-section{padding: 80px 40px;} #articleInfo15 .principle-section{padding: 90px 40px 100px;} } @media screen and (max-width:1200px) { #articleInfo15 .philosophy-hero { padding-right: 30px; padding-left: 30px; } #articleInfo15 .hero-content { grid-template-columns: minmax(0,59%) minmax(0,41%); } #articleInfo15 .hero-statement { margin-left: -55px; padding-left: 60px; } #articleInfo15 .principle-section { padding-right: 30px; padding-left: 30px; } #articleInfo15 .principle-item { grid-template-columns: 65px 75px minmax(170px,0.7fr) minmax(280px,1.3fr); gap: 25px; padding-right: 30px; } #articleInfo15 .principle-keyword { font-size: 55px; } #articleInfo15 .process-section { padding-right: 30px; padding-left: 30px; } #articleInfo15 .process-track { grid-template-columns: minmax(110px,1fr) 30px minmax(110px,1fr) 30px minmax(110px,1fr) 30px minmax(110px,1fr) 30px minmax(110px,1fr); } #articleInfo15 .process-item { padding-right: 12px; padding-left: 12px; } } @media screen and (max-width:960px) { #articleInfo15 .hero-content { display: block; } #articleInfo15 .hero-photo { width: 92%; } #articleInfo15 .hero-statement {width: 88%;margin: 25px auto 0;padding: 60px;box-shadow: 0 22px 60px rgba(28,26,21,0.1);} #articleInfo15 .principle-heading { grid-template-columns: 1fr; gap: 35px; } #articleInfo15 .principle-heading > p { max-width: 650px; margin-left: 0; } #articleInfo15 .principle-item { grid-template-columns: 60px 70px minmax(150px,0.65fr) minmax(250px,1.35fr); gap: 20px; } #articleInfo15 .principle-keyword { display: none; } #articleInfo15 .process-track { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; } #articleInfo15 .process-arrow { display: none; } #articleInfo15 .philosophy-ending { grid-template-columns: 1fr auto; } #articleInfo15 .ending-decoration { display: none; } #articleInfo15 .ending-content { text-align: left; } } @media screen and (max-width:767px) { #articleInfo15 p { font-size: 14px; line-height: 1.9; } #articleInfo15 .philosophy-hero {padding: 80px 20px 95px;} #articleInfo15 .philosophy-hero::before { top: 25px; font-size: 55px; letter-spacing: 3px; } #articleInfo15 .hero-heading { margin-bottom: 55px; } #articleInfo15 .hero-heading::after { height: 45px; margin-top: 30px; } #articleInfo15 .hero-title, #articleInfo15 .hero-title span {font-size: 33px;letter-spacing: 2px;display: flex;flex-direction: column;align-items: center;} #articleInfo15 .hero-en {font-size: 10px;letter-spacing: 2.5px;text-align: center;} #articleInfo15 .hero-photo { width: 100%; padding: 20px 0 20px 20px; } #articleInfo15 .hero-photo::after { top: 8px; left: 8px; width: 75px; height: 75px; } #articleInfo15 .hero-photo img { aspect-ratio: 4/3; } #articleInfo15 .photo-label {bottom: auto;left: auto;top: 0;right: -2px;} #articleInfo15 .hero-statement { width: calc(100% - 15px); margin-top: -15px; padding: 45px 30px; } #articleInfo15 .statement-number { top: 18px; right: 22px; font-size: 55px; } #articleInfo15 .statement-title { font-size: 30px; } #articleInfo15 .principle-section { padding: 90px 20px 100px; } #articleInfo15 .principle-section::before { display: none; } #articleInfo15 .principle-heading { margin-bottom: 55px; } #articleInfo15 .section-title {font-size: 34px;display: flex;flex-direction: column;} #articleInfo15 .principle-heading > p { padding-left: 22px; } #articleInfo15 .principle-item { grid-template-columns: 55px 65px minmax(0,1fr); gap: 18px; min-height: 0; padding: 35px 20px; } #articleInfo15 .principle-item:hover { padding-right: 20px; padding-left: 20px; } #articleInfo15 .principle-symbol { width: 55px; height: 55px; } #articleInfo15 .principle-name { padding-right: 10px; } #articleInfo15 .principle-description { grid-column: 2/4; padding-top: 8px; } #articleInfo15 .principle-title { font-size: 20px; } #articleInfo15 .process-section { padding: 90px 20px; } #articleInfo15 .process-heading {margin-bottom: 40px;} #articleInfo15 .process-track { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } #articleInfo15 .process-item:last-of-type { grid-column: 1/3; width: calc(50% - 6px); margin: 0 auto; } #articleInfo15 .philosophy-ending { gap: 25px; padding: 75px 20px; } #articleInfo15 .ending-index { font-size: 48px; } #articleInfo15 .process-item{display:flex;flex-direction: column;align-items: center;} } @media screen and (max-width:480px) { #articleInfo15 .philosophy-hero {padding: 60px 15px;} #articleInfo15 .hero-title, #articleInfo15 .hero-title span {font-size: 30px;} #articleInfo15 .hero-title span { display: block; } #articleInfo15 .hero-en { line-height: 2; } #articleInfo15 .hero-statement { width: calc(100% - 10px); padding: 38px 23px; } #articleInfo15 .statement-title { font-size: 27px; } #articleInfo15 .principle-section {padding: 50px 15px;} #articleInfo15 .section-title, #articleInfo15 .section-title span {font-size: 29px;text-align: center;} #articleInfo15 .section-label{text-align:center;} #articleInfo15 .principle-item { grid-template-columns: 42px minmax(0,1fr); padding-right: 15px; padding-left: 15px; } #articleInfo15 .principle-item:hover { padding-right: 15px; padding-left: 15px; } #articleInfo15 .principle-number { font-size: 26px; } #articleInfo15 .principle-symbol { display: none; } #articleInfo15 .principle-description { grid-column: 2/3; } #articleInfo15 .principle-title { font-size: 19px; } #articleInfo15 .process-section {padding: 50px 15px;} #articleInfo15 .process-track { grid-template-columns: 1fr; } #articleInfo15 .process-item:last-of-type { grid-column: auto; width: 100%; } #articleInfo15 .philosophy-ending { display: block; padding-right: 15px; padding-left: 15px; text-align: center; } #articleInfo15 .ending-content {text-align: center;display: flex;flex-direction: column;align-items: center;} #articleInfo15 .ending-index { margin-top: 35px; text-align: center; } }