* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif; }
body { background-color: #f4f4f4; color: #333; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a.masklink{position:absolute;width: 100%;height:100%;z-index: 5;top: 0;left: 0;}
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; background-color: #ff6600; color: #fff; font-weight: bold; border-radius: 4px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); cursor: pointer; letter-spacing: 2px; text-transform: uppercase; border: none; font-size: 15px; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; }
.btn:hover::before { left: 100%; }
.btn:hover { background-color: #e65c00; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 102, 0, 0.3); }
.btn-outline {background-color: transparent;border: 2px solid #7e7e7e;color: #1a1a1a;}
.btn-outline:hover { background-color: #1a1a1a; color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.title-light .btn-outline { border-color: #fff; color: #fff; }
.title-light .btn-outline:hover { background-color: #fff; color: #1a1a1a; box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2); }

/* 全局標題樣式統一 */
.section-title { font-size: 46px; font-weight: 900; text-align: center; margin-bottom: 70px; position: relative; padding-bottom: 20px; color: #1a1a1a; letter-spacing: 3px; display: inline-block; left: 50%; transform: translateX(-50%); }
.section-title span { display: block; font-size: 14px; font-weight: 600; color: #ff6600; margin-top: 8px; letter-spacing: 6px; text-transform: uppercase; }
.section-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: #1a1a1a; }
.title-light { color: #fff; }
.title-light::after {background-color: #4b4b4b;}

/* 主題連貫元素：高空繩索背景線條 */
.section-ropes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: flex; justify-content: space-evenly; }
.section-ropes span {width: 1px;height: 100%;background-color: rgb(255 255 255 / 7%);display: block;position: relative;overflow: hidden;}
.section-ropes span::after { content: ''; position: absolute; top: -50px; left: -1px; width: 3px; height: 40px; background-color: #ff6600; animation: ropeDrop 6s infinite ease-in; opacity: 0; box-shadow: 0 0 10px #ff6600; }
.section-ropes span:nth-child(2)::after { animation-delay: 2s; animation-duration: 7s; }
.section-ropes span:nth-child(3)::after { animation-delay: 4s; animation-duration: 5s; }
.section-ropes span:nth-child(4)::after { animation-delay: 1s; animation-duration: 8s; }

/* 暗色主題區塊共用樣式 */
.dark-bg { background-color: #111; color: #fff; }

#main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(15, 15, 15, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 15px 0; transition: all 0.3s ease; }
#main-header .header-inner { display: flex; justify-content: space-between; align-items: center; }
#main-header .logo-area {display: flex;align-items: center;gap: 15px;cursor: pointer;width: 220px;}
#main-header .logo-area #cis img{width: min(200px , 100%);}
#main-header .logo-symbol { width: 45px; height: 45px; background-color: #ff6600; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; border-radius: 4px; letter-spacing: -1px; }
#main-header .logo-text-wrapper { display: flex; flex-direction: column; }
#main-header .logo-text-main { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: 2px; line-height: 1.1; }
#main-header .logo-text-sub { color: #ff6600; font-size: 11px; letter-spacing: 3px; font-weight: 600; text-transform: uppercase; }
#main-header .nav-menu { display: flex; gap: 35px; transition: all 0.3s ease; }
#main-header .nav-item { color: #e0e0e0; font-size: 15px; font-weight: 500; letter-spacing: 1px; transition: color 0.3s ease; position: relative; padding: 8px 0; }
#main-header .nav-item:hover { color: #ff6600; }
#main-header .nav-item::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #ff6600; transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
#main-header .nav-item:hover::before { width: 100%; }
#main-header .menu-toggle { display: none; color: #fff; font-size: 28px; cursor: pointer; user-select: none; }

#main-footer {background-color: #050505;color: #888;padding: 100px 0 30px;font-size: 14px;border-top: 1px solid rgba(255,255,255,0.05);overflow: hidden;}
#main-footer .footer-layout {display: grid;grid-template-columns: 1.5fr 1fr 1fr 1fr;gap: 50px;margin-bottom: 50px;}
#main-footer .footer-brand { display: flex; flex-direction: column; gap: 24px; }
#main-footer .f-logo-text { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: 2px; }
#main-footer .f-logo-text span { color: #ff6600; }
#main-footer .f-desc { line-height: 1.8; margin-bottom: 10px; }
#main-footer .social-group { display: flex; gap: 12px; }
#main-footer .social-btn { width: 45px; height: 45px; border-radius: 4px; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center; color: #fff; transition: all 0.3s ease; font-weight: bold; border: 1px solid rgba(255,255,255,0.1); }
#main-footer .social-btn:hover { background-color: #ff6600; border-color: #ff6600; transform: translateY(-3px); color: #fff; }
#main-footer .f-col-title { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 24px; letter-spacing: 1px; position: relative; padding-bottom: 10px; }
#main-footer .f-col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background-color: #ff6600; }
#main-footer .contact-list {display: flex;flex-direction: column;gap: 10px;}
#main-footer .c-item a { display: flex; gap: 12px; align-items: flex-start; }
#main-footer .c-label {color: #ff6600;font-weight: bold;min-width: 40px;font-size: 15px;}
#main-footer .c-value , #main-footer nav a { color: #aaa; transition: color 0.3s ease; }
#main-footer .c-item:hover .c-value { color: #fff; }
#main-footer .footer-copyright { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); color: #555; font-size: 13px; letter-spacing: 1px; }
#footer-other {display:flex;align-items: center;gap: 20px;justify-content: flex-end;}
#main-footer .qr_box{display: flex;justify-content: flex-end;gap: 10px;flex-wrap: wrap;}
#main-footer .qr_box .qrcode img { width: 80px; height: 80px; }
#main-footer nav {display: flex;gap: 15px;flex-wrap: wrap;}

#main-footer nav a:hover{color:white;}

/* 懸浮按鈕群組 (Floating Action Buttons) */
.fab-container { position: fixed; right: 30px; 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-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 transparent;outline: none;background: #38549d;}
.fab-btn svg{fill: white;width: 20px;}
.fab-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 15px 25px rgba(0,0,0,0.25); color: #fff; }
.fab-phone { background-color: #ff6600; border-color: #ff6600; }
.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: #ff6600; border-color: #ff6600; }
.fab-container.is-active .fab-top { opacity: 1; pointer-events: auto; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ropeDrop { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }


@media (max-width: 1200px) {
  #main-footer .footer-layout { grid-template-columns: 1fr 1fr; gap: 60px; }
}


@media (max-width: 768px) {
  .section-title { font-size: 34px; margin-bottom: 50px; }
  #main-header .menu-toggle { display: block; }
  #main-header .nav-menu { display: none; position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(15, 15, 15, 0.98); flex-direction: column; padding: 20px 0; text-align: center; gap: 15px; border-bottom: 3px solid #ff6600; border-top: 1px solid rgba(255,255,255,0.1); }
  #main-header .nav-menu.active { display: flex; }
  #main-footer .footer-layout { grid-template-columns: 1fr; gap: 40px; }
  .fab-container { right: 20px; bottom: 20px; transform: translateY(55px); gap: 10px; }
  .fab-container.is-active { transform: translateY(0); }
  .fab-btn { width: 45px; height: 45px; }
  #footer-other{display:flex;flex-direction: column;align-items: flex-start;}
}