/* section */ section{padding: 5vw 0;} section >*{z-index:5} section .title_box{display: inline-block;} section .title_box .page_title,#aboutArea_area .title_box .page_title .pageh1{font-weight: 500;font-size: 1.6rem;letter-spacing: 6px;position: relative;line-height: 160%;margin-bottom: 30px;color: var(--primary);} section .title_box .subtitle,section .title_box .subtitle .secondColor{color: var(--text-white);font-family: "Rajdhani", Arial;font-size: 70px;font-weight: 700;line-height: 1.03;padding-bottom: 0px;text-transform: uppercase;letter-spacing: 2px;word-spacing: 100vw;display: flex;gap: 10px;padding-top: 20px;position: relative;} section .title_box .subtitle .secondColor{color: var(--primary);background: linear-gradient(to right, var(--complement) 0%, var(--primary) 70%);color: transparent;background-clip: text;-webkit-background-clip: text;vertical-align:top;padding:0;margin:0;font-weight: 500;} section .title_box .subtitle::before {content: "";position: absolute;width: 30px;height: 3px;background-color: var(--primary);top: 0px;left: 0;z-index: 10;-webkit-transition: 1s ease-out;transition: 1s ease-out;} section .title_box .subtitle::after {content: "";position: absolute;width: 0;width: 100%;height: 3px;background-color: rgba(150,169,179,0.2);top: 0;left: 0;-webkit-transition: 1.2s 0.4s ease-out;transition: 1.2s 0.4s ease-out;} section .title_box p{line-height: 170%;letter-spacing: 0.5px;font-weight: 500;font-size: 18px;color: var(--complement);position: relative;} section.bg_box{background:no-repeat 50% / cover;} .more_btn::after {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(to right, var(--complement) 0%, var(--primary) 70%);z-index: -2;transition: 0.6s ease;} .more_btn:hover::after { left: 0; } .more_btn:hover:before{width:100%;} .more_btn:hover {transform: translateY(-5px) scale(1.05);box-shadow: 0 20px 40px rgb(117 117 117 / 40%);} .more_btn font{position:relative;color: var(--primary);font-family: 'Rajdhani', sans-serif;text-transform: uppercase;text-align: center;font-size: 15px;font-weight: bold;letter-spacing: 0.08rem;} .more_btn b::after{content:"";position:absolute;top:calc(50% - 5px);right: -25px;width:10px;height:10px;border-top: 2px solid var(--primary);border-right: 2px solid var(--primary);transform:rotate(45deg)} .more_btn {background: transparent;border: 2px solid var(--primary);padding: 15px 60px 15px 30px;color: var(--primary);font-weight: 600;text-transform: uppercase;text-decoration: none;letter-spacing: 3px;clip-path: polygon(10% 0,100% 0,90% 100%,0 100%);transition: all 0.4s ease;position: relative;margin-top: 60px;} .more_btn:hover {color: var(--black);box-shadow: 0 0 30px rgb(61 61 61 / 40%);} .more_btn:hover font{ color: var(--black);} .more_btn:hover b::after { border-top: 2px solid var(--info); border-right: 2px solid var(--info); } /* service_area */ body::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity: 0.03; pointer-events: none; z-index: 9999; } /* 揭示動畫基礎 */ .reveal.active { overflow: hidden; } /* --- #main-header 導航列 --- */ #main-header { width: 100%; padding: 30px 5%; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 0; z-index: 100; } #main-header .logo { font-size: 1.8rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: 1px; } #main-header .logo span { color: var(--primary-orange); text-shadow: var(--neon-glow); } #main-header nav ul { display: flex; list-style: none; gap: 30px; } #main-header nav a { text-decoration: none; color: #fff; font-size: 0.9rem; text-transform: uppercase; font-weight: 500; transition: 0.3s; } #main-header nav a:hover { color: var(--primary-orange); letter-spacing: 1px; } /* --- #aboutArea 英雄首頁 --- */ #aboutArea {min-height: 60vh;display: flex;align-items: center;padding: 120px 8% 160px;position: relative;background: linear-gradient(to right,var(--triadic2) 30%,transparent 70%);overflow: hidden;background-color: var(--triadic2);} #aboutArea .Img * { transition: unset; -webkit-transition: unset; } #aboutArea .about-man-img { position: absolute; top: 0; right: 0; width: 65%; height: 100%; background: url('/images/39/img-ab-01.jpg') center/cover; opacity: 0.7; z-index: 1; mask-image: linear-gradient(to left,black 60%,transparent 100%); -webkit-mask-image: linear-gradient(to left,black 60%,#00000000 100%); background-color: #000; } #aboutArea .sparks-container { position: absolute; inset: 0; z-index: 2; pointer-events: none; } #aboutArea .spark { position: absolute; background: var(--primary-orange); border-radius: 50%; filter: blur(1px); animation: fly linear infinite; opacity: 0; } @keyframes fly { 0% { transform: translateY(0) translateX(0); opacity: 1; } 100% { transform: translateY(-100vh) translateX(50px); opacity: 0; } } #aboutArea .about-content { z-index: 10; flex: 1; } #aboutArea .pageh1 {color: var(--text-white);font-size: 1.5rem;font-weight: 500;line-height: 160%;} #aboutArea:before {content: '';position: absolute;left: 0;bottom: 20px;background: linear-gradient(to right,var(--complement) 0%,var(--primary) 70%);background-size: cover;background-repeat: no-repeat;width: 120vw;height: 8%;z-index: 2;transform: skewY(2deg);} #aboutArea article { margin-top: 40px; } #aboutArea article * { font-size: 1rem; color: var(--text-white); line-height: 190%; letter-spacing: 1px; } #aboutArea .about-stats {gap: 10px;position: absolute;bottom: 15%;right: 10%;width: 42%;padding: 20px;border-radius: 40px 0 40px;z-index: 3;display: grid;grid-template-columns: repeat(3,1fr);background: rgb(0 0 0 / 10%);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);justify-content: center;align-items: center;} #aboutArea .about-stat-card {padding: 24px 0px 22px 30px;transition: var(--transition);position: relative;} #aboutArea .about-stat-card::before { content: '///'; color: var(--primary-orange); position: absolute; top: 5px; left: 15px; font-size: 0.8rem; } #aboutArea .about-stat-card .dataList .label { } #aboutArea .about-stat-card:hover { transform: translateX(10px); } #aboutArea .about-stat-card .num {font-size: 2.9rem;font-weight: 900;line-height: 1;background: linear-gradient(to right, var(--primary) 0%, var(--primary) 100%);color: transparent;background-clip: text;-webkit-background-clip: text;} #aboutArea .about-stat-card .label {font-size: 1rem;color: #d2d2d2;text-transform: uppercase;letter-spacing: 1px;} #aboutArea .power-bar { width: 100%; height: 3px; background: rgba(255,255,255,0.1); margin-top: 15px; position: relative; overflow: hidden; } #aboutArea .power-bar-fill { height: 100%; background: var(--primary-orange); width: 0; transition: width 2s ease-out; } /* --- #programs 訓練課程 --- */ #programs {display: grid;grid-template-columns: repeat(3,1fr);background: var(--triadic2);padding: 5vw 0 0;border-bottom: 5px solid var(--primary-orange);} #programs .program-card { height: 240px; position: relative; overflow: hidden; display: flex; align-items: center; padding: 60px; text-decoration: none; color: #fff; } #programs .program-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(0,0,0,0.9) 0%,rgba(105,195,198,0.1) 100%); z-index: 1; transition: 0.5s; } #programs .program-card:hover::after { opacity: 0.4; background: rgb(5 74 77/50%); } #programs .program-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: 1s; filter: grayscale(1); } #programs .program-card:hover img { transform: scale(1.15); filter: grayscale(0); } #programs .program-info {position: relative;z-index: 10;width: 100%;} #programs .program-info .text { color: var(--complement); font-weight: 800; margin-bottom: 10px; font-family: "Rajdhani",Arial; } #programs .program-info .h3title {font-size: 2.4rem;font-weight: 700;text-transform: uppercase;line-height: 1;transition: 0.4s;color: var(--primary-orange);} #programs .program-card:hover .h3title { transform: skewX(-5deg); text-shadow: 0 0 20px #000000; } #programs .program-info .bg-no {position: absolute;bottom: -40px;right: 0;font-size: 10rem;line-height: 90%;font-weight: 900;color: transparent;-webkit-text-stroke: 1px rgba(255,255,255,0.58);font-style: italic;font-family: "Rajdhani",Arial;} /* --- #engineered-excellence 精準卓越 --- */ #engineered-excellence {background: linear-gradient(rgb(24 31 33), rgb(19 28 29 / 50%)), url(/images/39/img-s-bg.jpg) center / cover;position: relative;overflow: hidden;} #engineered-excellence:after{content:'';position:absolute;left: 0;bottom: 10px;background: linear-gradient(to left, var(--complement) 0%, var(--primary) 70%);background-repeat:no-repeat;width: 110vw;height: 8%;z-index: 0;transform: skewY(-3deg);opacity: .8;} #engineered-excellence .workframe {display: grid;grid-template-columns: 1fr 1.5fr;align-items: center;gap: 50px;position: relative;overflow: hidden;} #engineered-excellence .content-side h2 { font-size: 4.5rem; font-weight: 900; text-transform: uppercase; margin-bottom: 25px; line-height: 1; letter-spacing: -2px; } #engineered-excellence .content-side p {color: var(--text-dim);margin-bottom: 50px;font-weight: 400;line-height: 1.8;} #engineered-excellence .tech-list {list-style: none;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;} #engineered-excellence .tech-item {padding: 5px 0 20px 0;border-bottom: 1px solid rgba(255,255,255,0.1);cursor: pointer;transition: var(--transition);display: flex;align-items: flex-start;font-weight: 600;text-transform: uppercase;letter-spacing: 2px;font-size: 1.2rem;color: #ffffff;display: flex;flex-direction: column;position: relative;} #engineered-excellence .tech-item span { color: rgb(117 117 117); font-family: "Rajdhani",Arial; font-size: .9rem; letter-spacing: 1px; line-height: 150%; } #engineered-excellence .tech-item::before {content: '▲';color: var(--primary-orange);font-size: 0.6rem;opacity: 0;transform: rotate(90deg);transition: 0.3s;position: absolute;left: 4px;} #engineered-excellence .tech-item.active {color: var(--primary);padding-left: 30px;border-bottom-color: var(--primary-orange);} #engineered-excellence .tech-item.active::before { opacity: 1; } #engineered-excellence .chart-side {position: relative;height: 600px;width: 100%;display: flex;align-items: center;justify-content: center;} #engineered-excellence .radar-container {position: relative;width: 400px;height: 400px;} #engineered-excellence .radar-svg {width: 100%;height: 100%;overflow: visible;} #engineered-excellence .radar-ring {fill: none;stroke: rgb(255 255 255 / 4%);stroke-width: 1;} #engineered-excellence .radar-decor {fill: none;stroke: rgb(252 252 252 / 21%);stroke-width: 2;stroke-dasharray: 4 8;} #engineered-excellence .radar-polygon {fill: rgb(67 97 98 / 2%);stroke: var(--primary-orange);stroke-width: 3;transition: all 0.8s cubic-bezier(0.4,0,0.2,1);filter: drop-shadow(0 0 15px rgba(105,195,198,0.5));} #engineered-excellence .stat-node {position: absolute;transform: translate(-96%,-96%);display: flex;flex-direction: column;align-items: center;transition: var(--transition);z-index: 10;} #engineered-excellence .node-icon-wrap {width: 70px;height: 70px;background: var(--triadic2);border: 2px solid rgba(255,255,255,0.15);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 12px;transition: var(--transition);position: relative;cursor: pointer;} #engineered-excellence .node-icon-wrap svg {width: 28px;height: 28px;fill: rgba(255,255,255,0.6);transition: 0.4s;} #engineered-excellence .node-label {font-size: 1rem;font-weight: 700;color: var(--text-dim);text-transform: uppercase;letter-spacing: 1.5px;white-space: nowrap;transition: 0.4s;} #engineered-excellence .stat-node.active .node-icon-wrap {/* border-color: var(--primary-orange); */box-shadow: 0 0 30px rgba(105,195,198,0.6);transform: scale(1.15);background: radial-gradient(circle, #62d3dc8a, #181f21);} #engineered-excellence .stat-node.active .node-icon-wrap svg {fill: var(--text-white);filter: drop-shadow(0 0px 5px #fff);} #engineered-excellence .stat-node.active .node-label { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); } #engineered-excellence .center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; z-index: 5; } #engineered-excellence .center-formula img {text-shadow: 0 0 20px rgba(255,255,255,0.4);width: 130px;} /* --- #trainers 教練團隊 (輪播) --- */ #trainers.trainers {background:var(--text-white);padding:7vw 0;overflow:hidden;position:relative;} #trainers:after { content: ''; position: absolute; right: -200px; top: 0; background: rgb(106 194 198); background-repeat: no-repeat; width: 51vw; height: 100%; z-index: 0; opacity: .1; transform: skewX(-10deg); } #trainers .trainers-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 80px 70px; } #trainers .trainers-grid .title_box { } #trainers.trainers .title_box .subtitle { color: var(--triadic1); } #trainers .trainer-title-box { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 20px; } #trainers .trainer-title-box .slash { color: var(--primary-orange); font-size: 1.5rem; font-weight: 900; margin-bottom: 10px; } #trainers .trainer-title-box h2 { font-size: 2.8rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; } #trainers .trainer-card { position: relative; background: #1a1a1a; } #trainers .trainer-card .card-info { position: absolute; bottom: -30px; left: 0; z-index: 10; background: linear-gradient(to right,var(--complement) 0%,var(--primary) 70%); color: var(--black); padding: 12px 45px; font-size: 18px; font-weight: 600; text-transform: uppercase; clip-path: polygon(10% 0,100% 0,90% 100%,0 100%); } #trainers .trainer-card .card-info p { color: rgb(255 255 255/80%); letter-spacing: 3px; font-weight: 500; margin-top: 5px; } #trainers .trainer-card .card-info .title { font-size: 1.2rem; letter-spacing: 1px; } #trainers .trainer-card img { width: 100%; object-fit: cover; transition: var(--transition); filter: grayscale(0%); transform: scale(1.08); } .trainer-card:hover img { transform: scale(1.08); } .trainer-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 40%); } @media (max-width:1366px) { section .title_box .subtitle,section .title_box .subtitle .secondColor { font-size: 54px; } #aboutArea .about-stats { width: 50%; right: 6%; } #aboutArea .about-stat-card { padding: 24px 20px 24px 40px; } #trainers .trainers-grid { grid-template-columns: repeat(3,1fr); } #aboutArea:before { height: 4%; } } @media (max-width:1280px) { #txt-marquee .marquee-item { padding: 0 30px; font-size: 1.2rem; } } @media (max-width:1140px) { #programs { grid-template-columns: repeat(1,1fr); } #programs .program-card { height: 120px; padding: 40px 40px; } #programs .program-info .bg-no { right: 0; font-size: 5rem; } #programs .program-info .h3title { font-size: 1.8rem; } .more_btn { margin-top: 10px; } #trainers.trainers { padding: 16vw 0 27vw 0; } section .title_box .subtitle,section .title_box .subtitle .secondColor { font-size: 48px; } section .title_box .page_title,#aboutArea_area .title_box .page_title .pageh1 { font-size: 1.4rem; letter-spacing: 3px; } #aboutArea { text-align: center; min-height: 100vh; padding: 70px 8% 110px; } #engineered-excellence { padding: 14vw 0; } #engineered-excellence .chart-side { height: 600px; transform: scale(0.9); width: 100%; display: none; } #trainers .trainers-grid { grid-template-columns: repeat(2,1fr); } #aboutArea .about-stats { position: relative; width: 95%; right: auto; margin: 40px 0; grid-template-columns: repeat(2,1fr); } #aboutArea .about-stat-card .num { font-size: 2.2rem; } #aboutArea .about-stat-card { padding: 14px 5px 14px 30px; } #aboutArea .about-man-img { background-size: auto; background-repeat: no-repeat; background-position: top; } #engineered-excellence .workframe { grid-template-columns: 1fr; } #engineered-excellence .tech-list { grid-template-columns: repeat(1,1fr); gap: 10px; } } @media screen and (max-width:768px) { #aboutArea:before { height: 3%; } #aboutArea .about-stats { padding: 20px 10px 20px 10px; } #trainers .trainers-grid { grid-template-columns: 1fr; } #trainers .trainer-title-box h2 { font-size: 2rem; } #aboutArea .about-stats { grid-template-columns: repeat(1,1fr); } }