* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Noto Sans TC',sans-serif; color: #1A2B4C; background-color: #F4F7FB; line-height: 1.7; overflow-x: hidden; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
img { max-width: 100%; height: auto; display: block; }
/* Layout & Common Classes */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 10; }
.section-full { width: 100%; position: relative; padding: 100px 0; overflow: hidden; }
.section-dark { background: linear-gradient(#0b1c3f,#0b1d3f); color: #FFFFFF; }
.text-center { text-align: center; }
.highlight-blue { color: #0088FF; }
.mb-15 { margin-bottom: 15px; }
/* Water Theme & Background Effects */
.bg-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle,rgb(32 58 110) 0%,rgba(0,85,255,0.05) 40%,rgba(0,0,0,0) 70%); border-radius: 50%; pointer-events: none; z-index: 1; }
.bg-glow.top-left { top: -200px; left: -200px; }
.bg-glow.bottom-right { bottom: -200px; right: -200px; }
/* Floating Bubbles Animation */
@keyframes floatUp {
  0% { transform: translateY(0px) scale(1); opacity: 0.6; }
  50% { transform: translateY(-25px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0px) scale(1); opacity: 0.6; }
}
.bg-bubble { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); pointer-events: none; z-index: 1; background: radial-gradient(circle at 30% 30%,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 80%); backdrop-filter: blur(2px); box-shadow: inset 0 0 10px rgba(255,255,255,0.1); animation: floatUp 6s ease-in-out infinite; }
.bg-bubble.sm { width: 30px; height: 30px; animation-duration: 4s; }
.bg-bubble.md { width: 70px; height: 70px; animation-duration: 7s; animation-delay: 1s; }
.bg-bubble.lg { width: 120px; height: 120px; animation-duration: 9s; animation-delay: 2s; }
.water-texture { position: absolute; inset: 0; background: url('/images/37/main/water-texture_bg.png') center/cover; opacity: 0.3; mix-blend-mode: soft-light; pointer-events: none; z-index: 1; }
/* Element Positions */
.hero-b1 { top: 25%; right: 20%; }
.hero-b2 { bottom: 15%; right: 10%; }
.hero-b3 { top: 50%; right: 35%; }
.srv-b1 { top: 15%; right: 10%; }
.srv-b2 { bottom: 20%; left: 10%; }
.prc-b1 { top: 10%; right: 10%; border-color: rgba(0,85,255,0.15); box-shadow: none; background: radial-gradient(circle at 30% 30%,rgba(0,85,255,0.05) 0%,rgba(0,85,255,0) 80%); }
.prc-b2 { bottom: 20%; left: 5%; border-color: rgba(0,85,255,0.15); box-shadow: none; background: radial-gradient(circle at 30% 30%,rgba(0,85,255,0.05) 0%,rgba(0,85,255,0) 80%); }
/* Typography & Tags */
.pill-tag { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; color: #0088FF; font-family: 'Inter',sans-serif; border: 1px solid rgba(0,136,255,0.3); border-radius: 30px; padding: 6px 18px; }
.pill-tag.light { color: #8BA1C4; border-color: rgba(255,255,255,0.2); }
.pill-tag.bg-tint { background: rgba(0,136,255,0.05); }
.title-hero { font-size: clamp(2.5rem,5vw,4rem); font-weight: 900; color: #FFFFFF; line-height: 1.2; letter-spacing: 0.05em; margin-bottom: 1.5rem; text-shadow: 0 10px 30px rgba(0,20,50,0.5); }
.title-hero .highlight { color: #00E5FF; }
.title-section { font-size: clamp(2rem,3vw,2.5rem); font-weight: 900; color: #0B1B3D; margin-bottom: 1.2rem; line-height: 1.3; letter-spacing: 0.02em; }
.section-dark .title-section { color: #FFFFFF; text-align: center; }
.title-card { font-size: 1.25rem; font-weight: 900; color: #0B1B3D; margin-bottom: 0.75rem; }
.text-body { font-size: 1rem; color: #5C6D8A; line-height: 1.8; font-weight: 400; }
.hero-subtitle { font-size: 1.15rem; color: #C0D3E8; }
.service-subtitle { color: #C0D3E8; max-width: 600px; margin: 0 auto; }
/* Buttons */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; background: linear-gradient(90deg,#00C6FF 0%,#0055FF 100%); color: #FFFFFF; font-size: 1rem; font-weight: 700; border-radius: 40px; transition: all 0.4s ease; cursor: pointer; border: none; box-shadow: 0 10px 25px rgba(0,136,255,0.3); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,136,255,0.5); }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; background-color: transparent; color: #FFFFFF; font-size: 1rem; font-weight: 700; border-radius: 40px; transition: all 0.4s ease; cursor: pointer; border: 2px solid rgba(255,255,255,0.3); }
.btn-outline:hover { background-color: #FFFFFF; color: #0B1B3D; }
/* Animations */
.fade-up-element { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.165,0.84,0.44,1),transform 0.8s cubic-bezier(0.165,0.84,0.44,1); }
.fade-up-element.visible { opacity: 1; transform: translateY(0); }
/* Header */
#header { position: fixed; top: 0; left: 0; width: 100%; background-color: transparent; z-index: 100; transition: all 0.4s ease; border-bottom: 1px solid rgba(255,255,255,0.1); }
#header.scrolled { background-color: rgb(0 54 160); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); height: 75px; }
#header .container { height: 100%; display: flex; max-width: 100%; align-items: center; justify-content: space-between; }
#header .logo { display: flex; align-items: center; height: 100%; padding: 0; }
#header .logo-img { height: 45px; width: auto; object-fit: contain; transition: all 0.4s ease; }
#header.scrolled .logo-img { height: 35px; filter: brightness(1) invert(0); }
#header .nav-menu { display: flex; gap: 30px; list-style: none; align-items: center; }
#header .nav-link { font-size: 0.95rem; font-weight: 400; color: #FFFFFF; transition: color 0.3s ease; position: relative; padding: 19px 0; display: flex; }
#header.scrolled .nav-link { color: #ffffff; padding: 8px 0; }
#header .nav-link:hover { color: #00E5FF; }
#header.scrolled .nav-link:hover { color: #0088FF; }
#header .header-btn { padding: 10px 24px; background-color: #FFFFFF; color: #0B1B3D; border-radius: 30px; font-weight: 700; font-size: 0.95rem; transition: 0.3s; }
#header.scrolled .header-btn { background-color: #0B1B3D; color: #FFFFFF; }
#header .header-btn:hover { background-color: #0088FF; color: #FFFFFF; }
#header .menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; }
#header .menu-toggle span { width: 28px; height: 2px; background-color: #FFFFFF; transition: 0.3s; border-radius: 2px; }
#header.scrolled .menu-toggle span {background-color: #ffffff;}
@media (max-width:992px) {
	#header{
    padding: 20px 0;
}
  #header .nav-menu { position: fixed; top: 75px; left: 100%; width: 100%; height: calc(100vh - 75px); background-color: #FFFFFF; flex-direction: column; align-items: center; justify-content: center; gap: 40px; transition: left 0.4s ease; }
  #header .nav-menu.active { left: 0; }
  #header .nav-link { color: #1A2B4C !important; font-size: 1.25rem; }
  #header .header-btn { background-color: #0088FF !important; color: #FFF !important; }
  #header .menu-toggle { display: flex; }
  #header .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); background-color: #0B1B3D; }
  #header .menu-toggle.active span:nth-child(2) { opacity: 0; }
  #header .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: #0B1B3D; }
}
/* Hero Section */
#hero-section { min-height: 100vh; display: flex; align-items: center; padding-top: 90px; background: #0B1B3D url('/images/37/main/banner.jpg') center/cover; }
#hero-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(11,27,61,0.95) 0%,rgba(0,85,255,0.4) 100%); z-index: 1; }
#hero-section .hero-content { max-width: 650px; position: relative; z-index: 10; padding: 40px 0; }
#hero-section .hero-actions { margin-top: 3rem; display: flex; gap: 20px; }
@media (max-width:768px) {
  #hero-section .hero-content { text-align: center; margin: 0 auto; }
  #hero-section .hero-actions { justify-content: center; flex-direction: column; }
}
/* Features Section */
#features-section { margin-top: -80px; position: relative; z-index: 20; padding-bottom: 60px; }
#features-section .grid-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
#features-section .feature-card { background: #FFFFFF; border-radius: 20px; padding: 50px 30px 40px; text-align: center; box-shadow: 0 20px 40px rgba(11,27,61,0.08); transition: all 0.4s ease; position: relative; display: flex; flex-direction: column; align-items: center; }
#features-section .feature-card:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,136,255,0.15); }
#features-section .icon-hexagon { width: 70px; height: 70px; background: #F4F7FB; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; position: relative; border: 4px solid #E6F0FA; box-shadow: inset 0 0 10px rgba(0,136,255,0.1); }
#features-section .icon-hexagon svg { width: 32px; height: 32px; stroke: #0088FF; stroke-width: 1.5; fill: none; }
#features-section .card-desc { font-size: 0.95rem; color: #5C6D8A; line-height: 1.6; }
@media (max-width:1024px) {
	#header .logo-img{height: 28px;}
	#header .nav-menu{
    gap: 15px;
}
  #features-section .grid-container { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:576px) {
  #features-section .grid-container { grid-template-columns: 1fr; }
  #features-section { margin-top: -40px; }
}
/* ==============================================================
           ABOUT SECTION & CHOOSE SECTION (FIXED LAYOUT)
           ============================================================== */#about-section { background: linear-gradient(#f4f7fb,#ffffff); position: relative; padding: 60px 0 20px; overflow: hidden; }
#choose-section { background-color: #F4F7FB; position: relative; padding: 60px 0 20px; overflow: hidden; }
#choose-section:after { content: ""; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle,rgb(32 58 110/19%) 0%,rgba(0,85,255,0.05) 40%,rgba(0,0,0,0) 70%); border-radius: 50%; pointer-events: none; z-index: 1; top: 0; left: 38vw; }
/* 使用單純的 flex 與 gap 控制，放棄會導致跑版的 vw 計算式 padding */
#about-section .about-layout-full,#choose-section .choose-layout-full { display: flex; flex-wrap: wrap; align-items: center; width: 100%; gap: 40px; /* 統一使用 gap 控制欄位間距 */ }
#choose-section .choose-layout-full { flex-direction: row-reverse; }
/* 左右欄位設定，讓 flex 自動平分空間 */
#about-section .col-left,#choose-section .col-right,#about-section .col-right,#choose-section .col-left {
  flex:1;min-width:350px;/* 確保縮小時不會擠成一團，會自動折行 */
  display:flex;flex-direction:column;justify-content:center;padding:20px 0;position:relative;
}
/* 圖片那欄需要置中對齊 */
#about-section .col-left,#choose-section .col-right { align-items: center; }
/* 響應式：平板與手機改為單欄垂直排列 */
@media (max-width:1024px) {
  #about-section .about-layout-full,#choose-section .choose-layout-full { gap: 30px; }
  #choose-section .choose-layout-full { flex-direction: column; }
  /* 手機版取消反向排列 */
  #about-section .col-left,#choose-section .col-right,#about-section .col-right,#choose-section .col-left { width: 100%; flex: none; padding: 10px 0; }
}
/* 水滴形狀核心 CSS */
.img-blob { width: 100%; max-width: 520px; aspect-ratio: 1; object-fit: cover; border-radius: 40% 60% 60% 40%/50% 40% 60% 50%; animation: blobMorph 8s ease-in-out infinite alternate; box-shadow: 0 30px 60px rgba(0,136,255,0.15); border: 8px solid rgba(0,136,255,0.05); transform: scale(1.05); transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.col-left.visible .img-blob,.col-right.visible .img-blob { transform: scale(1); }
.col-right.visible .img-blob iframe { width: 100%; height: 100%; object-fit: cover; }
.col-right.visible .img-blob { overflow: hidden; }
@keyframes blobMorph {
  0% { border-radius: 40% 60% 60% 40%/50% 40% 60% 50%; }
  34% { border-radius: 60% 40% 50% 50%/40% 60% 40% 60%; }
  67% { border-radius: 50% 50% 40% 60%/50% 50% 60% 40%; }
  100% { border-radius: 40% 60% 60% 40%/50% 40% 60% 50%; }
}
/* 內容與標籤細節 */
#about-section .nav-tabs { display: flex; gap: 15px; margin: 30px 0; flex-wrap: wrap; border-bottom: 1px solid #E6F0FA; padding-bottom: 20px; }
#about-section .tab-btn { padding: 10px 24px; border-radius: 30px; font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: 0.3s; background: #F4F7FB; color: #5C6D8A; border: none; }
#about-section .tab-btn.active { background: #0088FF; color: #FFFFFF; box-shadow: 0 8px 20px rgba(0,136,255,0.25); }
#about-section .content-split { display: flex; gap: 30px; align-items: center; margin-top: 10px; }
#about-section .split-img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 15px 30px rgba(0,136,255,0.15); border: 6px solid #F4F7FB; }
#about-section .split-text { flex: 1; }
#about-section .check-list { list-style: none; margin-top: 15px; }
#about-section .check-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.95rem; color: #1A2B4C; font-weight: 700; }
#about-section .check-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #0088FF; color: #FFF; border-radius: 50%; font-size: 10px; }
#about-section .contact-action-row { display: flex; align-items: center; gap: 30px; margin-top: 40px; }
#about-section .btn-circle-action { display: inline-flex; align-items: center; gap: 10px; padding: 14px 32px; border-radius: 40px; border: 1px solid #0088FF; color: #0088FF; font-weight: 700; transition: 0.3s; cursor: pointer; background: transparent; }
#about-section .btn-circle-action:hover { background: #0088FF; color: #FFFFFF; box-shadow: 0 10px 20px rgba(0,136,255,0.2); }
#about-section .phone-info { display: flex; align-items: center; gap: 15px; }
#about-section .phone-circle { width: 50px; height: 50px; border-radius: 50%; background: #0B1B3D; display: flex; align-items: center; justify-content: center; color: #FFF; box-shadow: 0 10px 20px rgba(11,27,61,0.2); }
#about-section .phone-text { font-size: 0.8rem; color: #5C6D8A; }
#about-section .phone-number { font-size: 1.1rem; font-weight: 900; color: #0B1B3D; }
#choose-section .process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 40px; }
#choose-section .step-card { background: #FFFFFF; padding: 35px 30px; border-radius: 30px; box-shadow: 0 15px 35px rgba(11,27,61,0.05); transition: 0.3s; border: 1px solid transparent; }
#choose-section .step-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(0,136,255,0.1); border-color: #E6F0FA; }
#choose-section .step-num { font-size: 3.5rem; font-weight: 900; color: transparent; -webkit-text-stroke: 1px rgba(0,136,255,0.3); font-family: 'Inter',sans-serif; line-height: 0.9; margin-bottom: 15px; transition: 0.3s; }
#choose-section .step-card:hover .step-num { -webkit-text-stroke: 1px #0088FF; color: rgba(0,136,255,0.05); }
#choose-section .step-title { font-size: 1.15rem; font-weight: 900; color: #0B1B3D; margin-bottom: 10px; }
#choose-section .step-desc { font-size: 0.95rem; color: #5C6D8A; line-height: 1.6; }
@media (max-width:576px) {
  #about-section .content-split { flex-direction: column; align-items: flex-start; }
  #about-section .contact-action-row { flex-direction: column; align-items: flex-start; }
  #choose-section .process-grid { grid-template-columns: 1fr; }
}
/*yt-showcase-section*/
/* 嚴格單行模式 CSS，配合 #yt-showcase-section 作用域 */
#yt-showcase-section { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding: 40px 20px; }
#yt-showcase-section .col-right { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#yt-showcase-section .img-blob-wrapper { position: relative; width: 500px; height: 100%; cursor: pointer; border-radius: 50%; box-shadow: 0 15px 35px rgba(0,0,0,0.12); transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),box-shadow 0.4s ease; animation: blob-morph 8s infinite ease-in-out; overflow: hidden; transform-origin: center; margin: 16px 0; }
#yt-showcase-section .img-blob { width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; transition: filter 0.4s ease; }
#yt-showcase-section .img-blob::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.6) 100%); z-index: 2; transition: opacity 0.4s ease; }
#yt-showcase-section .video-subtitle { font-size: 15px; color: #4a5568; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; opacity: 0.9; }
.yt-play-btn { position: relative; z-index: 3; width: 76px; height: 54px; background-color: #ff0000; border-radius: 16px; display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 24px rgba(255,0,0,0.35); transition: background-color 0.3s ease,transform 0.5s cubic-bezier(0.34,1.56,0.64,1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#yt-showcase-section .img-blob-wrapper:hover .yt-play-btn { background-color: #e60000; transform: scale(1.22); box-shadow: 0 12px 30px rgba(255,0,0,0.5); }
.yt-play-triangle { width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #ffffff; margin-left: 6px; transition: transform 0.3s ease; }
#yt-modal-overlay { position: fixed; inset: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9999; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease,visibility 0.4s ease; padding: 40px 20px; }
#yt-modal-overlay.modal-active { opacity: 1; visibility: visible; }
#yt-modal-overlay .modal-container { position: relative; width: 100%; max-width: 1000px; background: #000; border-radius: 16px; box-shadow: 0 40px 80px rgba(0,0,0,0.8); transform: translateY(40px) scale(0.92); transition: transform 0.6s cubic-bezier(0.19,1,0.22,1); overflow: visible; border: 1px solid rgba(255,255,255,0.05); }
#yt-modal-overlay.modal-active .modal-container { transform: translateY(0) scale(1); }
#yt-modal-overlay .modal-close-btn { position: absolute; top: -50px; right: 0; color: #fff; font-size: 44px; cursor: pointer; transition: color 0.3s ease,transform 0.4s ease; line-height: 1; z-index: 10001; text-shadow: 0 4px 15px rgba(0,0,0,0.5); font-weight: 300; }
#yt-modal-overlay .modal-close-btn:hover { color: #0598ff; transform: rotate(90deg) scale(1.1); }
#yt-modal-overlay .video-ratio-box { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background: #050505; border-radius: 16px; overflow: hidden; }
#yt-modal-overlay .video-ratio-box iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; object-fit: cover; }
/* 動態有機流體 Keyframes */
@keyframes blob-morph {
  0% { border-radius: 50%; }
  33% { border-radius: 45% 55% 40% 60%/55% 45% 60% 40%; }
  66% { border-radius: 60% 40% 55% 45%/40% 60% 45% 55%; }
  100% { border-radius: 50%; }
}
/* 響應式 RWD 配置 */
@media (max-width:768px) {
  #yt-showcase-section .img-blob-wrapper { width: 260px; height: 260px; }
  .yt-play-btn { width: 64px; height: 46px; border-radius: 12px; }
  .yt-play-triangle { border-width: 12px 0 12px 18px; margin-left: 5px; }
  #yt-showcase-section .video-subtitle { font-size: 13px; }
  #yt-modal-overlay { padding: 20px 15px; }
  #yt-modal-overlay .modal-close-btn { top: -45px; right: 5px; font-size: 40px; }
  #yt-modal-overlay .modal-container { border-radius: 12px; }
  #yt-modal-overlay .video-ratio-box { border-radius: 12px; }
}
/* SERVICE SECTION */
#service-section { position: relative; padding: 120px 0; overflow: hidden; }
#service-section .header-wrap { text-align: center; margin-bottom: 60px; position: relative; z-index: 10; }
#service-section .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; position: relative; z-index: 10; }
#service-section .service-card { background: #FFFFFF; border-radius: 24px; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.2); }
#service-section .service-card:hover { transform: translateY(-10px); box-shadow: 0 25px 50px rgba(0,229,255,0.2); }
#service-section .img-box { height: 220px; overflow: visible; position: relative; z-index: 5; }
#service-section .img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
#service-section .service-card:hover .img-box img { transform: scale(1.08); }
#service-section .card-icon-float { position: absolute; bottom: -25px; left: 30px; width: 50px; height: 50px; background: linear-gradient(135deg,#00C6FF 0%,#0055FF 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4px solid #FFFFFF; color: #FFFFFF; z-index: 2; }
#service-section .card-info { padding: 40px 30px 30px; background: #FFFFFF; z-index: 4; }
#service-section .card-action { margin-top: 20px; font-weight: 700; color: #0088FF; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; }
#service-section .service-card:hover .card-action { gap: 15px; color: #0055FF; }
@media (max-width:992px) {
  #service-section .service-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:768px) {
  #service-section .service-grid { grid-template-columns: 1fr; }
}
/* PRICE SECTION */
#price-section { background-color: #FFFFFF; padding: 120px 0; position: relative; overflow: hidden; }
.price-note { margin-top: 15px; font-size: 0.85rem; text-align: center; }
.price-suffix { font-size: 0.9rem; color: #5C6D8A; font-weight: 500; }
#price-section .table-wrap { background: #FFFFFF; border-radius: 24px; box-shadow: 0 20px 50px rgba(11,27,61,0.05); margin-top: 50px; overflow: hidden; border: 1px solid #E6F0FA; position: relative; z-index: 10; }
#price-section .t-row { display: flex; align-items: center; padding: 24px 30px; border-bottom: 1px solid #E6F0FA; transition: 0.3s; }
#price-section .t-row:hover { background-color: #F8FAFC; }
#price-section .t-row:last-child { border-bottom: none; }
#price-section .t-header { background: #0B1B3D; color: #FFFFFF; font-weight: 700; padding: 20px 30px; }
#price-section .t-header:hover { background: #0B1B3D; }
#price-section .t-col { flex: 1; font-size: 1rem; }
#price-section .t-col-1 { flex: 1.5; font-weight: 700; color: #0B1B3D; display: flex; align-items: center; gap: 10px; }
#price-section .t-header .t-col-1 { color: #FFFFFF; }
#price-section .t-col-3 { font-size: 1.25rem; font-weight: 900; color: #0088FF; text-align: right; }
#price-section .t-header .t-col-3 { color: #FFFFFF; font-size: 1rem; }
#price-section .tag-rec { background: linear-gradient(90deg,#00C6FF 0%,#0055FF 100%); color: #FFF; font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; font-weight: 700; display: inline-block; }
#price-section .title-section,#price-section .text-body { text-align: center; }
@media (max-width:768px) {
  #price-section .t-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
  #price-section .t-header { display: none; }
  #price-section .t-col-3 { text-align: left; font-size: 1.4rem; }
}
/* FOOTER & CONTACT MERGED SECTION */
#footer { padding: 80px 0 30px; background-color: #0B1B3D; color: #FFFFFF; position: relative; overflow: hidden; border-top: none; }
#footer::before { content: ''; position: absolute; inset: 0; background: url('/images/37/main/water-texture_bg.png') center/cover; background-position: 50% 0%; opacity: 0.8; mix-blend-mode: soft-light; pointer-events: none; }
#footer .container { position: relative; z-index: 10; }
#footer .footer-top { display: flex; gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 30px; text-align: left; flex-direction: column; }
#footer .footer-top .brand-col { border-bottom: rgb(255 255 255/38%) 1px solid; padding-bottom: 20px; }
#footer .f-logo { height: 50px; margin-bottom: 20px; filter: brightness(0) invert(1); }
#footer .f-desc { color: #8BA1C4; font-size: 0.95rem; line-height: 1.8; }
#footer .f-title { font-size: 1.25rem; font-weight: 900; color: #FFFFFF; margin-bottom: 25px; }
#footer .f-links-grid { display: flex; flex-direction: column; gap: 15px; }
#footer .f-links-grid a { color: #8BA1C4; font-weight: 700; font-size: 0.95rem; transition: 0.3s; display: inline-block; }
#footer .f-links-grid a:hover { color: #00E5FF; transform: translateX(5px); }
#footer .f-contact-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 25px; }
#footer .f-contact-item { display: flex; align-items: flex-start; gap: 15px; }
#footer .f-contact-item:last-child { grid-column: 1/-1; }
#footer .f-icon { width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.3s; border: 1px solid rgba(255,255,255,0.05); }
#footer .f-contact-item:hover .f-icon { background: #0088FF; border-color: #0088FF; box-shadow: 0 5px 15px rgba(0,136,255,0.3); }
#footer .f-icon svg { width: 20px; height: 20px; stroke: #FFF; stroke-width: 1.5; fill: none; }
#footer .f-text { flex: 1; }
#footer .f-label { font-size: 0.85rem; color: #8BA1C4; font-weight: 700; margin-bottom: 2px; }
#footer .f-val { font-size: 1.15rem; font-weight: 700; color: #FFFFFF; }
#footer .f-val.address-val { font-size: 0.95rem; line-height: 1.8; font-weight: 400; color: #C0D3E8; display: flex; flex-wrap: wrap; gap: 10px; }
#footer .f-val.address-val a { font-size: 18px; padding: 5px 15px; display: flex; border-radius: 5px; background: linear-gradient(180deg,#19dff5,#0055ff); border-color: transparent; box-shadow: 0 8px 24px rgba(0,136,255,.35); }
#footer .footer-bottom { text-align: center; color: #8BA1C4; font-size: 0.85rem; font-weight: 500; }
#footer a { color: white; }
#footer .copyright a { font-size: 15px; }
@media (max-width:992px) {
  #footer .footer-top { grid-template-columns: 1fr; gap: 50px; }
}
/* ===== Meiji-like Interaction Upgrade/研究型滾動動畫優化 ===== */
html { scroll-behavior: smooth; }
body { --scroll-progress: 0; --mx: 50vw; --my: 50vh; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: radial-gradient(circle 280px at var(--mx) var(--my),rgba(0,229,255,0.12),rgba(0,136,255,0.04) 35%,transparent 70%); mix-blend-mode: screen; opacity: .8; transition: opacity .3s ease; }
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg,#00e5ff,#0055ff,#7fdfff); transform: scaleX(0); transform-origin: left center; z-index: 1000; box-shadow: 0 0 18px rgba(0,229,255,.6); }
.side-progress { position: fixed; right: 30px; top: 50%; transform: translateY(-50%); z-index: 95; display: flex; flex-direction: column; gap: 14px; }
.side-progress a { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(0,136,255,.45); background: rgba(255,255,255,.65); box-shadow: 0 6px 18px rgba(11,27,61,.08); position: relative; transition: .35s cubic-bezier(.22,1,.36,1); }
.side-progress a::after { content: attr(data-label); position: absolute; top: 50%; right: 18px; transform: translateY(-50%) translateX(8px); white-space: nowrap; font: 800 11px/1 'Inter',sans-serif; letter-spacing: .16em; color: #0088ff; opacity: 0; transition: .35s cubic-bezier(.22,1,.36,1); }
.side-progress a.active { height: 34px; background: linear-gradient(180deg,#00e5ff,#0055ff); border-color: transparent; box-shadow: 0 8px 24px rgba(0,136,255,.35); }
.side-progress a.active::after { opacity: 1; transform: translateY(-50%) translateX(0); }
#hero-section { isolation: isolate; overflow: hidden; }
#hero-section::after { content: ''; position: absolute; inset: -20%; z-index: 2; pointer-events: none; background: linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.08) 42.2% 42.7%,transparent 43% 100%),repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 95px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 95px); mask-image: linear-gradient(90deg,rgba(0,0,0,.95),rgba(0,0,0,.35)); animation: labGridMove 18s linear infinite; }
@keyframes labGridMove {
  to { transform: translate3d(-95px,-95px,0); }
}
#hero-section .hero-content::before { content: 'WATER LAB'; display: block; position: absolute; left: -10px; top: -65px; font: 900 clamp(3rem,9vw,8rem)/1 'Inter',sans-serif; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); opacity: .75; pointer-events: none; transform: translate3d(0,calc(var(--scroll-progress) * -18px),0); }
.hero-content .pill-tag,.hero-content .title-hero,.hero-content .hero-subtitle,.hero-content .hero-actions { opacity: 0; transform: translateY(28px); animation: heroRise .9s cubic-bezier(.22,1,.36,1) forwards; }
.hero-content .title-hero { animation-delay: .16s; }
.hero-content .hero-subtitle { animation-delay: .32s; }
.hero-content .hero-actions { animation-delay: .48s; }
#hero-section #banner { position: absolute; width: 30vw; right: 15vw; box-shadow: 0px 6px 30px 8px rgb(10 25 54/28%); }
#hero-section .container {margin: 0;width: 46vw;left: 8vw;}
#hero-section #banner #slider a.photo { aspect-ratio: 1/1; background-size: cover; border-radius: 20px; border: #ffffff 3px solid; }
@keyframes heroRise {
  to { opacity: 1; transform: translateY(0); }
}
.title-hero .highlight,.highlight-blue { background: linear-gradient(90deg,#00e5ff,#0088ff 45%,#7fdfff); -webkit-background-clip: text; background-clip: text; color: transparent !important; background-size: 180% auto; animation: textShine 4s ease-in-out infinite; font-weight: 800; }
@keyframes textShine {
  50% { background-position: 100% center; }
}
.section-full,#about-section,#choose-section,#price-section { counter-increment: sectionNo; }
#about-section::before,#service-section::before,#choose-section::before,#price-section::before { content: attr(data-index); position: absolute; top: 42px; left: max(2rem,calc((147vw - 1140px)/2)); font: 900 clamp(6.5rem,14vw,12rem)/0.5 'Inter',sans-serif; letter-spacing: -.06em; color: rgba(0,136,255,.055); pointer-events: none; z-index: 0; opacity: 0.4; }
#service-section::before { color: rgba(255,255,255,.08); }
.container,.col-left,.col-right,.header-wrap,.service-grid,.table-wrap { position: relative; z-index: 5; }
.reveal-item { opacity: 0; transform: translate3d(0,52px,0) scale(.98); filter: blur(8px); transition: opacity .9s cubic-bezier(.22,1,.36,1) var(--delay,0s),transform .9s cubic-bezier(.22,1,.36,1) var(--delay,0s),filter .9s cubic-bezier(.22,1,.36,1) var(--delay,0s); will-change: transform,opacity,filter; }
.reveal-item.visible { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); }
.fade-up-element { transform: translateY(60px) scale(.98); filter: blur(8px); }
.fade-up-element.visible { filter: blur(0); }
.feature-card,.service-card,.step-card,.table-wrap,.btn-primary,.btn-outline,.btn-circle-action { will-change: transform; }
.feature-card,.service-card,.step-card { transform-style: preserve-3d; transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0); }
.feature-card::before,.service-card::before,.step-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle 220px at var(--card-x,50%) var(--card-y,50%),rgba(0,229,255,.18),transparent 65%); opacity: 0; transition: opacity .35s ease; z-index: 1; }
.feature-card:hover::before,.service-card:hover::before,.step-card:hover::before { opacity: 1; }
.feature-card > *,.service-card > *,.step-card > * { position: relative; z-index: 2; }
#features-section .feature-card:hover,#service-section .service-card:hover,#choose-section .step-card:hover { transform: translateY(-14px); }
#about-section .img-full,#choose-section .img-full,#service-section .img-box img { transform: scale(1.08); transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
#about-section .col-left.visible .img-full,#choose-section .col-right.visible .img-full,#service-section .service-card.visible .img-box img { transform: scale(1); }
#about-section .cutout-tl,#about-section .cutout-br,#choose-section .cutout-tr,#choose-section .cutout-bl { transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
#about-section .col-left.visible .cutout-tl { transform: translate(-18px,-18px); }
#about-section .col-left.visible .cutout-br { transform: translate(22px,22px); }
#choose-section .col-right.visible .cutout-tr { transform: translate(18px,-18px); }
#choose-section .col-right.visible .cutout-bl { transform: translate(-22px,22px); }
.pill-tag { position: relative; overflow: hidden; }
.pill-tag::before { content: ''; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation: pillSweep 3.8s ease-in-out infinite; }
@keyframes pillSweep {
  45%,100% { transform: translateX(140%); }
}
.nav-tabs { perspective: 800px; }
.tab-btn:hover { transform: translateY(-4px) rotateX(8deg); }
.tab-btn.active { animation: activePulse 2.8s ease-in-out infinite; }
@keyframes activePulse {
  50% { box-shadow: 0 0 0 8px rgba(0,136,255,.08),0 8px 20px rgba(0,136,255,.25); }
}
.title-section,.title-card,.step-title { text-wrap: balance; }
.title-section { position: relative; }
.title-section::after { content: ''; display: block; width: 72px; height: 4px; margin-top: 22px; border-radius: 99px; background: linear-gradient(90deg,#00e5ff,#0055ff); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.22,1,.36,1) .2s; }
.text-center .title-section::after,.header-wrap .title-section::after { margin-left: auto; margin-right: auto; }
.visible .title-section::after,.fade-up-element.visible .title-section::after,.reveal-item.visible .title-section::after { transform: scaleX(1); }
#price-section .t-row:not(.t-header) { position: relative; overflow: hidden; }
#price-section .t-row:not(.t-header)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,229,255,.08),transparent 45%); transform: translateX(-100%); transition: .55s cubic-bezier(.22,1,.36,1); }
#price-section .t-row:not(.t-header):hover::before { transform: translateX(0); }
#price-section .t-row > * { position: relative; z-index: 1; }


@media (max-width:1470px){
	#hero-section #banner{right: 10vw;}
	.container{
    width: min(1280px , 100%);
}
}
@media (max-width:1280px){
	.hero-content .title-hero{font-size: 40px;}
	.hero-content .hero-subtitle{font-size:16px;}
	#hero-section #banner{
    right: 10vw;
}
}
@media (max-width:992px) {
  .side-progress { display: none; }
  body::before { display: none; }
  #features-section .feature-card:nth-child(even),#service-section .service-card:nth-child(2),#choose-section .step-card:nth-child(even) { margin-top: 0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* fab-container  (Floating Action Buttons) */
.fab-container {position: fixed;right: 10px;bottom: 30px;display: flex;flex-direction: column;gap: 15px;z-index: 9999;transform: translateY(65px);transition: transform 0.4s cubic-bezier(0.25,0.8,0.25,1);}
.fab-container.is-active { transform: translateY(0); }
.fab-container .fab-btn {width: 50px;height: 50px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;box-shadow: 0 10px 20px rgba(0,0,0,0.15);transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1);text-decoration: none;border: 2px solid rgb(255 255 255/48%);outline: none;background: #1eb0e1;}
.fab-container .fab-btn svg {fill: white;width: 20px;height: 20px;}
.fab-container .fab-btn.fab-top {background: #07378b;}
.fab-container .fab-btn.fab-top svg {fill: #0036a0;stroke: white;}
.fab-container .fab-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 15px 25px rgba(0,0,0,0.25); color: #fff; }
.fab-container .fab-phone {background-color: #3e3d41;border-color: #4f4f53;}
.fab-container .fab-line { background-color: #06C755; border-color: #06C755; }
.fab-top { background-color: #1a1a1a; border-color: rgba(255,255,255,0.2); opacity: 0; pointer-events: none; transition: opacity 0.4s ease,transform 0.3s ease; }
.fab-top:hover {background-color: #7bdaff;border-color: #7bdaff;}
.fab-container.is-active .fab-top { opacity: 1; pointer-events: auto; }

/* a*/
a.yt-cta-btn {display: inline-block;padding: 14px 36px;background: #4ca7ff;color: #fff;text-decoration: none;font-size: 14px;font-weight: 600;letter-spacing: 2px;border-radius: 30px;border: 1px solid rgba(255,255,255,0.15);box-shadow: 0 10px 25px rgba(0,0,0,0.15);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);margin-top: 4px;}
.yt-cta-btn:hover {background: #0036a0;border-color: #ffffff;transform: translateY(-4px) scale(1.05);box-shadow: 0 15px 30px rgb(118 213 255 / 57%);color: #ffffff;}
.jcenter{display:flex;flex-direction: column;align-items: center;margin: 50px 0 10px;}
@media (max-width:768px){
	.yt-play-btn { width: 64px; height: 46px; border-radius: 12px; }
	.yt-play-triangle { border-width: 12px 0 12px 18px; margin-left: 5px; }
	.fab-container { right: 20px; bottom: 20px; transform: translateY(55px); gap: 10px; }
	.fab-container.is-active { transform: translateY(0); }
}