@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { color: #333; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}
img { border: 0; display: block;}

html, body { width: 100%; height: 100%; padding: 0; margin: 0;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


main { clear: both; width: 100%; display: block;}

/************ 新增方案 ************/
.modal.show { display: block !important; opacity: 1 !important;}
.modal-open .modal {  z-index: 1060 !important; /* 比預設的 1050 高一點 */}
.modal-backdrop.show { z-index: 1050 !important;}
#AddModal .modal-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) !important; margin: 0 !important;}

/************ forgot password ************/
#forgot-password-form { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
#forgot-password-form .input-form { width: 500px; max-width: 94%; padding: 100px 40px; text-align: center; border-radius: 15px; background-color: #fff; box-sizing: border-box; position: relative;}
#forgot-password-form .input-form .close-icon { width: 40px; height: 40px; font-size: 3rem; text-align: center; cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 9;}
#forgot-password-form .input-form input[type=email], 
#forgot-password-form .input-form input[type=password] { width: 300px; padding: 10px; margin: 0 0 20px 0; color: #333; font-size: 2rem; border: 1px #595757 solid; border-radius: 15px; box-sizing: border-box;}
#forgot-password-form .input-form input[type=submit], 
#forgot-password-form .input-form input[type=reset] { width: 80px; padding: 3px 0; margin: 0 10px; color: #fff; font-size: 2rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}

/************ info-fancybox ************/
#info-fancybox-content { width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 999999;}
#info-fancybox-content .contain { width: 500px; max-width: 94%; padding: 100px 40px; border-radius: 15px; background-color: #fff; box-sizing: border-box; position: relative;}
#info-fancybox-content .contain .close-icon { width: 40px; height: 40px; font-size: 3rem; text-align: center; cursor: pointer; position: absolute; top: 10px; right: 10px; z-index: 9;}
#info-fancybox-content .contain .text-box { width: 100%; font-size: 2rem; line-height: 1.8em;}
/* 定義一個通用的彈窗樣式 */
.fancybox-overlay {
    position: fixed;    /* 關鍵：固定在視窗上，不隨捲軸滾動 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑底 */
    z-index: 9999;      /* 確保在最上層 */
    
    /* 讓內容居中 */
    display: none;      /* 預設隱藏，由 JS 控制顯示為 flex */
    justify-content: center;
    align-items: center;
}

.fancybox-overlay .contain {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    position: relative; /* 讓內部的 close-icon 可以絕對定位 */
}


/************ breadcrumbs ************/
#breadcrumbs-bar { width: 100%; padding: 0 0 30px 0; color: #999; font-size: 2rem; line-height: 1.4em;}
#breadcrumbs-bar a { color: #999; text-decoration: none; border-bottom: 1px #999 dashed;}
#breadcrumbs-bar a:hover { color: #333; border-bottom: 1px #333 dashed;}


iframe:focus { outline: none;}
iframe[seamless] { display: block;}

.loading {
    /* 改用 fixed，這會讓遮罩固定在螢幕上，不隨捲軸移動 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 視窗寬度 */
    height: 100vh; /* 視窗高度 */
    /* 確保在所有元件（包含 Modal）之上 */
    z-index: 2147483647 !important;
    /* 初始狀態隱藏，顯示時由 JS 改為 flex */
    display: none;
}

.loading-mask {
    /* 遮罩填滿 .loading */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    /* 置中內容 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#global-loading {
    /* 使用 fixed 才能釘在視窗上，不隨頁面捲動 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647 !important;
    display: none; /* 初始隱藏 */
    /* 這裡直接放原本 .loading-mask 的背景色設定 */
    background-color: rgba(0, 0, 0, 0.75);
    /* 內容置中 */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading-container {
    text-align: center;
    color: white;
}

.loading-text {
    margin-top: 15px;
    font-size: 1.5rem;
    letter-spacing: 2px;
    font-weight: 500;
}
/* 修正提示文字：紅色、靠左、寬度與 input 對齊 */
#forgot-password-form .input-form .form-tip {
    width: 300px; /* 須與輸入框寬度一致，若輸入框是 400px 則改 400px */
    margin: -5px auto 20px; /* 區塊置中，負 margin 縮短與上方 input 距離 */
    text-align: left; /* 文字靠左 */
    color: #ff0000 !important;
    font-size: 1.4rem;
    display: block;
}

/* 如果沒用 Bootstrap，可以使用這個純 CSS Spinner */
.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: .25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}


@media screen and (min-width: 1440px) {

  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; min-height: 100%; background-color: #b19466; background-image: url("../images/login_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: block;}

  .login-me-logo { width: 370px; padding: 30px 0 0 40px;}
  .login-me-logo img { width: 100%; height: auto;}

  .login-title-form { width: 1200px; padding: 20vw 0 2vw 0; margin: 0 auto; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box; z-index: 999;}
  /* 左側圖片容器 */
  .login-title-form .login-left-img {width: 400px; /* 配合您右側剩餘空間 */display: flex;justify-content: center; /* 水平置中 */align-items: center; /* 垂直置中 */align-self: stretch; /* 讓容器高度跟隨父層，確保內部的 center 有效 */}
  .login-title-form .login-left-img img {max-width: 100%; height: auto;/* 如果圖片還是偏上，可以強制給它一個垂直置中 */ display: block;}
  .login-title-form .login-form-box { width: calc(100% - 300px - 100px); padding: 40px; box-sizing: border-box; border-radius: 20px; background-color: rgba(255,255,255,0.78); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .login-title-form .login-form-box .form-box { width: 600px; font-size: 2.5rem; font-weight: 500; text-align: center; /* 新增以下這行，數值可依需求調整 (例如 60px 或 80px) */padding-top: 60px;}
  .login-title-form .login-form-box .form-box input[type=text], 
  .login-title-form .login-form-box .form-box input[type=password] { width: 400px; padding: 18px 30px; color: #333; font-size: 2.5rem; border: 0; outline: none; background-image: url("../images/login_input_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; background-color: transparent; box-sizing: border-box;}
  .login-title-form .login-form-box .form-box .title-forget-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .login-title-form .login-form-box .form-box .title-forget-btn img.title { width: 300px; margin: 0 40px 0 0;}
  .login-title-form .login-form-box .form-box .title-forget-btn input[type=button].forget-btn { width: 200px; height: 100px; border: 0; background-color: transparent; background-image: url("../images/forget_btn.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}
  .login-title-form .login-form-box .form-submit { width: calc(100% - 600px); margin: 0 0 100px 0;}
  .login-title-form .login-form-box .form-submit input[type=button], 
  .login-title-form .login-form-box .form-submit input[type=submit] { width: 133px; height: 80px; border: 0; background-color: transparent; background-image: url("../images/login_submit.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}

  .login-copyright { clear: both; width: 100%; padding: 8vw 50px 40px 50px; box-sizing: border-box; color: #fff; font-size: 2rem; text-align: right;}


  /************ header + nav ************/

  header { clear: both; width: 100%; padding: 30px calc(50% - 700px) 20px calc(50% - 700px); box-sizing: border-box;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 2rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; display: block;}
  .header-nav-social .site-title a img { width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 200px - 150px - 105px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 10px 20px; margin: 0; position: relative; box-sizing: border-box;}
  nav#pc ul.nav-menu li a { padding: 3px 8px; color: #333; font-size: 2rem; font-weight: 600; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.nav-menu li a:hover { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.action { color: #fff; border-radius: 8px; background-color: #8ebfcc;}
  nav#pc ul.nav-menu li ul.menu-popup { padding: 10px 0; margin: 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: none; position: absolute; top: 45px; z-index: 999;}
  nav#pc ul.nav-menu li ul.menu-popup.w-156 { width: 156px; left: calc(50% - 78px);}
  nav#pc ul.nav-menu li ul.menu-popup.w-180 { width: 180px; left: calc(50% - 90px);}
  nav#pc ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 5px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block;}
  nav#pc ul.nav-menu li ul.menu-popup li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}

  .header-search-mo { display: none;}
  .header-search { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search img.search-icon { width: 20px; height: auto;}
  .header-search input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 2rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons-mo { display: none;} 
  .header-social-icons { width: 120px; display: flex; justify-content: flex-end; align-items: center; position: relative;}
  .header-social-icons a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons a.icon img { width: 100%; height: auto; cursor: pointer;}

  .header-mem-nav { width: 120px; position: absolute; top: 30px; right: 0; z-index: 999; display: none;}
  .header-mem-nav .triangle { border-right: 12px solid transparent; border-left: 12px solid transparent; border-bottom: 15px solid rgba(89,87,87,0.8); display: inline-block; float: right;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 40px 0; margin: 0; list-style: none; border-radius: 15px 0 15px 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 5px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-banner ************/

  section#hp-sec-banner { clear: both; width: 100%; padding: 0 calc(50% - 700px); box-sizing: border-box;}

  .hp-banner-box { width: 100%; position: relative;}
  .hp-banner-box img.hp-banner-mo { display: none;}
  .hp-banner-box img.hp-banner { width: 100%; position: relative; z-index: 1;}
  .hp-banner-box .banner-text-btn { width: 580px; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.6em; letter-spacing: 0.1em; position: absolute; top: 470px; left: 40px; z-index: 2;}
  .hp-banner-box .banner-text-btn a.join-btn { width: 140px; padding: 8px 0; margin: 20px 0 0 0; color: #fff; font-size: 2.5rem; font-weight: 500; line-height: 1em; letter-spacing: 0.1em; text-align: center; text-decoration: none; border: 1px #fff solid; border-radius: 10px; display: block; cursor: pointer;}
  .hp-banner-box .banner-text-btn a.join-btn:hover { background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-main ************/

  section#hp-sec-main { clear: both; width: 100%; padding: 65px calc(50% - 700px) 40px calc(50% - 700px); box-sizing: border-box;}

  .page-hp-sec-main { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  
  .page-hp-sec-main .main-col-lf { width: 900px; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-lf .main-con { width: 520px; margin: 0 40px 0 0;}  
  .page-hp-sec-main .main-col-lf .main-con .page-title { width: 100%; padding: 0 0 10px 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em; border-bottom: 1px #595757 solid;}
  .page-hp-sec-main .main-col-lf .main-con .page-title-sub { width: 100%; padding: 5px 0 0 0; font-size: 2rem; font-weight: 500;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar { width: 100%; padding: 40px 0; font-size: 2rem; line-height: 2em;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index { width: 100%;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index > div { display: none;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .position-title { width: 316px; height: 29px; padding: 5px 0; margin: 0 auto; font-size: 2rem; font-weight: 500; text-align: center; line-height: 1em; background-image: url("../images/air_quality_index_position_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .exponential-curve-box { width: 100%; padding: 10px; margin: 20px 0 0 0; border: 1px #333 solid; border-radius: 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .tw-map { width: calc(100% - 560px);}
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_1, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_2, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_3, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_4, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_5, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_6, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_7 { width: 310px; height: auto; display: none;}
  
  .page-hp-sec-main .main-col-rt { width: calc(100% - 900px);}
  .page-hp-sec-main .main-col-rt .page-title-mo { display: none;}
  .page-hp-sec-main .main-col-rt .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-main .main-col-rt .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-main .main-col-rt .page-title span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-main .main-col-rt .news-list-box { width: 100%; margin: 0 0 25px 0;}
  .page-hp-sec-main .main-col-rt .news-list-box a { width: 100%; padding: 15px; color: #333; text-decoration: none; box-sizing: border-box; border-radius: 10px; background-color: #a9b3c2; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-rt .news-list-box a:hover { background-color: #c5ceda;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic { width: 118px; border-radius: 10px; background-color: #ebebee; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic img { width: 100%; height: auto;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro { width: calc(100% - 118px); padding: 0 0 0 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .title { width: 100%; padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .text { width: 100%; font-size: 2rem; line-height: 1.6em;}


  /************ section #hp-sec-achievements ************/

  section#hp-sec-achievements { clear: both; width: 100%; padding: 0 calc(50% - 700px) 40px calc(50% - 700px); box-sizing: border-box;}

  .page-hp-sec-achi { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  .page-hp-sec-achi .page-title-mo { display: none;}
  .page-hp-sec-achi .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-achi .page-title span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-achi .achievements-show { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .achievements-show .view-achi-box { width: 100%;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box { width: 270px; height: 354px; margin: 0 auto; border-radius: 15px; background-color: #a9b3c2; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; display: block;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box img { width: 100%; height: auto;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn { width: 160px; margin: 0 40px;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a { width: 100%; padding: 3px 0; color: #fff; font-size: 2rem; text-align: center; letter-spacing: 0.1em; text-decoration: none; border-radius: 20px; background-color: #595757; display: block;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a:hover { background-color: #6d6d6d;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow img { width: 40px; height: auto; margin: 0 10px; cursor: pointer;}


  /************ section #quick-analysis ************/

  .page-bottom-bar { clear: both; width: 100%; padding: 0 calc(50% - 700px) 50px calc(50% - 700px); margin: -30px 0 0 0; font-size: 2rem; text-align: right; box-sizing: border-box;}

  section#quick-analysis { clear: both; width: 100%; padding: 0 calc(50% - 700px) 50px calc(50% - 700px); box-sizing: border-box;}

  .page-quick-analysis { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  
  .page-quick-analysis .main-col-lf { width: 480px; padding: 15px; margin: 0 25px 0 0; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-lf .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-lf .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-lf .target_value { width: 135px; height: 34px; color: #f29600; font-size: 2.5rem; font-weight: 900; text-align: center; line-height: 1em; background-image: url("../images/quick_analysis_points_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box { width: 90%; padding: 15px 20px; margin: 40px auto; color: #fff; border-radius: 15px; box-sizing: border-box;}
  /* 修正：針對該區塊內的 input 元素設定 placeholder */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::placeholder {font-size: 1.5rem;}
  /* 為了相容所有瀏覽器，建議寫法如下 */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-webkit-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input:-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.point { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.line { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.area { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 15px 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}*/
    /* 2. 必須清除原生外觀 - 這是關鍵 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] {
        -webkit-appearance: none; /* Chrome, Safari, Edge */
        width: 100%;
        background: transparent;
        margin: 15px 0;
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}*/
    /* 1. 針對 Chrome, Edge, Safari 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb {
        /* 使用放射狀漸層：中心點 35% 是黃色，40% 開始變白色，達成硬邊點點效果 */
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px; /* 稍微加寬一點點點，讓點點更明顯 */
        height: 18px;
        border-radius: 50%;
        -webkit-appearance: none;
        margin-top: -5px; /* 計算公式：(軌道高度8px / 2) - (圈圈高度18px / 2) = -5px */
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 加上微陰影讓圈圈更有立體感 */
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}*/
    /* 2. 針對 Firefox 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb {
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}

  /*.page-quick-analysis .main-col-rt { width: calc(100% - 480px - 25px); padding: 15px 40px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}*/
  .page-quick-analysis .main-col-rt {
    /* 強制填滿左側 480px 之後的所有空間 */
    flex: 1; 
    /* 防止內部內容（如 Canvas 或大圖）反向撐開導致版面混亂 */
    min-width: 0; 
    
    padding: 15px 40px;
    border-radius: 15px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
  .page-quick-analysis .main-col-rt .title-infor-bar { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar .title { width: calc(100% - 44px);}
  .page-quick-analysis .main-col-rt .title-infor-bar .title span { padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-rt .concentration-curve { width: 100%; margin: 40px 0 60px 0;}
  .page-quick-analysis .main-col-rt .concentration-curve .notice { width: 100%; color: #6d6d6d; font-size: 2rem; text-align: right;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box { width: 50%;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box img.icon { width: 128px; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value { width: 100%; padding: 20px 0 0 0; font-size: 2rem; text-align: center; letter-spacing: 0.1em;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value span.num { color: #f29600; font-size: 3rem; font-weight: 900;}


  /************ concentration target analysis ************/

  .page-quick-analysis .main-col-lf .text-info { width: 100%; padding: 10px 20px 20px 20px; font-size: 2rem; line-height: 1.6em; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box { width: 100%; padding: 15px 20px; margin: 20px 0; font-size: 2rem; line-height: 1.8em; border-radius: 15px; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box.step1 { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .step-box.step2 { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .step-box.step3 { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .step-box.step4 { background-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .step-box .title { width: 100%; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.8em; text-align: center;}

/*  .page-quick-analysis .main-col-rt .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box { width: 100%; padding: 15px 20px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a { width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
*/
  /* 污染物、年份、區域選擇標題與間距 */
  .page-quick-analysis .main-col-rt .page-title-sub {  width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar {  width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] {  width: 20px; height: 20px; vertical-align: middle;}
  /* --- 區域選擇：垂直對齊優化 --- */
  .page-quick-analysis .main-col-rt .choice-bar div[style*="flex-wrap:wrap"] {  display: grid; grid-template-columns: repeat(3, 1fr); /* 強制改為三欄對齊 */ gap: 15px 10px; margin-top: 20px !important;}
  .page-quick-analysis .main-col-rt .choice-bar div span { display: flex; align-items: center; font-size: 2rem;}



  /* --- 濃度目標容器 (灰藍色背景盒) --- */
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box {  width: 100%; padding: 25px 30px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  /* 標題與輸入框容器 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input {  width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 1.5em; font-weight: 500;}
  /* --- 數字框：箭頭內移與背景樣式 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] {  width: 110px; height: 34px; padding: 3px 15px 3px 5px; /* 增加右邊距給箭頭 */ color: #333; font-size: 1.5rem; text-align: center; border: 0; outline: none;   border-radius: 20px; background-color: #fff; /* 改為白色背景符合圖片 */  box-sizing: border-box; -moz-appearance: textfield;}
  /* Chrome/Safari 專屬：讓箭頭往內縮 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number]::-webkit-inner-spin-button { margin-right: 3px; height: 20px;  cursor: pointer;}
  /* --- 滑桿美化：黃色核心 + 白色外圈 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] {  width: 100%; margin: 20px 0 5px 0; outline: none; -webkit-appearance: none; background-color: transparent;}
  /* 軌道樣式 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track {  background: rgba(255,255,255,0.6); height: 4px; border-radius: 2px;}
  /* 圓鈕樣式 (黃色+白色邊框) */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb {  -webkit-appearance: none;  height: 26px; width: 26px; border-radius: 50%;  background: #ffb800; /* 黃色核心 */ border: 4px solid #fff; /* 白色外圈 */ box-shadow: 0 2px 4px rgba(0,0,0,0.2);  margin-top: -11px; /* 置中對準軌道 */}
  /* --- 刻度與標註微調 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar {  width: 100%; height: 12px; margin: 0 auto; border-left: 1px #fff solid;   display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line {  width: calc(100% / 10); height: 12px; border-right: 1px #fff solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note {  width: 100%; margin: 10px 0 0 0; display: flex; justify-content: space-between; font-size: 1.5rem;}
  /* 下一步按鈕 */
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a {  width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center;  text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}

  .page-quick-analysis .main-col-full { width: 100%; padding: 15px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .title-infor-bar { width: 100%; margin: 0 0 25px 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-full .title-infor-bar .title-bar { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-full .choice-contain { width: 96%; margin: 0 auto; font-size: 2rem; line-height: 1.6em;}
  .page-quick-analysis .main-col-full .area-target-analysis { width: 96%; margin: 40px auto;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li { padding: 0; margin: 0 2px 2px 0; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a { padding: 3px 10px; color: #333; font-size: 2rem; text-decoration: none; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table { clear: both; width: 100%; position: relative;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table > div { display: none;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table a.more-btn { width: 200px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; position: absolute; top: -40px; right: 0; z-index: 9;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table table { clear: both; width: 100%; font-size: 2rem; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt { clear: both; width: 96%; margin: 40px auto 0 auto; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-full .data-detail-box { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf { width: 60%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf table { width: 100%; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt { width: 40%; padding: 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf .title, 
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .title { width: 100%; padding: 0 0 40px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart { width: 100%; padding: 40px 10px 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart table.analysis-table { width: 100%; font-size: 2rem; border: 1px #333 solid;}

  .page-quick-analysis .main-col-full .health-risks-analysis { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 10px; color: #fff; font-size: 2rem; text-align: center; background-color: #2d4daa; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 10px; font-size: 2rem; text-align: center; background-color: #c1cef4; box-sizing: border-box;}

  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}

  .page-quick-analysis .main-col-rt .tool-bar { width: 100%; padding: 0 0 20px 0; text-align: right;}
  .page-quick-analysis .main-col-rt .tool-bar select { width: 200px; padding: 5px; color: #333; font-size: 2rem; border: 1px #333 solid; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button] { width: 100px; padding: 5px; margin: 0 0 0 10px; color: #fff; font-size: 2rem; border: 0; background-color: #333; box-sizing: border-box; cursor: pointer;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button]:hover { background-color: #595757;}

  /*.page-quick-analysis .main-col-rt ul.emission-zone-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li { padding: 0; margin: 0 10px 10px 0;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a { padding: 3px 5px; color: #333; font-size: 2rem; text-decoration: none; border: 1px #333 solid; border-radius: 8px; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose { width: 100%; padding: 10px 0 30px 0;}
  .page-quick-analysis .main-col-rt .emission-zone-choose > div { display: none;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full { width: 100%; padding: 20px 0; background-color: #eee;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x { width: calc(100% / 4); padding: 0 10px; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title { width: 100%; padding: 0 0 10px 0; text-align: center; font-size: 2rem}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title span { padding: 0 5px; color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x input[type=checkbox] { width: 20px; height: 20px; font-size: 1.5rem}
*/

  /* 區域選擇 Checkbox 排列 */
  .page-quick-analysis .main-col-rt .region-checkbox-group { display: flex; gap: 25px; margin: 15px 0; padding-left: 5px;}
  /* 縣市按鈕群組樣式 */
  .page-quick-analysis .main-col-rt .btn-group { display: flex;flex-wrap: wrap; gap: 10px; margin: 15px 0;}
  .page-quick-analysis .main-col-rt .toggle-btn { border: 1px solid #ccc; border-radius: 20px; padding: 6px 18px; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 14px; outline: none;}
  .page-quick-analysis .main-col-rt .toggle-btn:hover { border-color: #888; background-color: #f9f9f9;}
  .page-quick-analysis .main-col-rt .toggle-btn.active { background-color: #333; color: #fff;  border-color: #333;}
  /* 灰色背景源別區塊：類別橫向排列 (同一行) */
  .page-quick-analysis .main-col-rt .source-grid { background-color: #f5f5f5; padding: 20px; display: grid; /* 四個類別平分寬度 */ grid-template-columns: repeat(4, 1fr);  gap: 20px; border-radius: 4px;}
  /* 預設隱藏全台的源別容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper.active {   display: block; }
  /* 預設隱藏所有空品區的源別容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper.active {  display: block;}
  /* 預設隱藏所有城市的源別容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper { display: none;}
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper.active {    display: block;}
  /* 類別內部的選項垂直排列 (往下長) */
  .page-quick-analysis .main-col-rt .source-col { display: flex;  flex-direction: column;  align-items: flex-start;}
  .page-quick-analysis .main-col-rt .source-column-header { background-color: #333; color: #fff; padding: 4px 10px;  display: inline-block;  margin-bottom: 12px;  font-size: 13px;  border-radius: 2px;}
  .page-quick-analysis .main-col-rt .checkbox-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; cursor: pointer;}
  .page-quick-analysis .main-col-rt .checkbox-item input { margin-right: 8px;}
  /* 底部動作列 */
  .page-quick-analysis .main-col-rt .footer-actions {  margin-top: 30px; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-btn { background-color: #555; color: #fff; border: none;  padding: 10px 35px; border-radius: 25px;  font-size: 16px; cursor: pointer; transition: background 0.3s;}
  .page-quick-analysis .main-col-rt .next-btn:hover {    background-color: #222; }
  /* 響應式調整：小螢幕時自動轉為垂直 */
  @media (max-width: 768px) { .page-quick-analysis .main-col-rt .source-grid {  grid-template-columns: 1fr; }}

  .page-quick-analysis .main-col-rt .choice-prev-next-bnt { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}

  
  .page-quick-analysis .main-col-lf .reduction-analysis-bx { width: 100%; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-b { font-size: 2.5rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-s { padding: 0 0 0 10px; font-size: 2rem; font-weight: 500;}
/*.page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { width: 100%; padding: 0 0 0 30px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range .title { width: 100px;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=range] { width: 160px; outline: none; accent-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=number] { width: 50px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 1px #333 solid; background-color: #fff;}*/
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { display: flex !important; flex-direction: row; /* 橫向排列 */ flex-wrap: nowrap; /* 強制這三個區塊不換行 */ align-items: center; /* 垂直置中，當文字變多行時 Slider 依然在中間 */ width: 100%; margin-bottom: 20px; gap: 10px;}
  /* 1/4 區域：文字過長自動換行 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .title-col { flex: 1; /* 佔 1/4 */ line-height: 1.2; /* 設定行高，讓換行後的文字不會太擠 */ word-break: break-all; /* 確保長英文或符號也能斷行 */}
  /* 1/2 區域：滑桿 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .slider-col { flex: 2; /* 佔 1/2 */ display: flex; justify-content: center; min-width: 0; /* 防止 Flex 項目溢出 */}
  /* 1/4 區域：數字輸入 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .value-col { flex: 1; /* 佔 1/4 */ display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; /* 數字與 % 建議不要斷行 */}
  /* --- 滑桿質感樣式 (還原圖片) --- */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"] { -webkit-appearance: none; width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #9cc1d1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;}
  /* 數字框 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="number"] { width: 55px;  height: 28px; text-align: center; border: 1px solid #ccc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=submit], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=reset], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=button] { padding: 3px 30px; margin: 0 10px; color: #fff; font-size: 2rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}
  .page-quick-analysis .main-col-rt .rt-title-bar { width: 100%; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
/*  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .choice-text { width: 100%; font-size: 2rem; line-height: 1.8em;} */ 
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .health-risks-analysis { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full { width: 100%;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf table { width: 100%; font-size: 2rem; text-align: center; border: 0;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 10px; color: #fff; font-size: 2rem; text-align: center; background-color: #e97132; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 10px; font-size: 2rem; text-align: center; background-color: #f6d5cd; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-3 { width: 100%; padding: 10px; font-size: 2rem; font-weight: 500; text-align: center; box-sizing: border-box;}
  /* 分析結果主容器 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-results-container { width: 100%; max-width: 1000px; /* 限制最大寬度，避免在大螢幕拉得太開 */ margin: 0 auto; /* 水平置中 */ display: flex; flex-direction: column; /* 垂直堆疊：圖在上，表在下 */ gap: 30px; /* 圖與表之間的間距 */}
  /* 圖表容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-placeholder { width: 100%; height: 300px; /* 預設高度 */ background-color: #f0f4f7; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center;  color: #718096;  border-radius: 4px;}
  /* 表格容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .table-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; overflow-x: auto; /* 手機版可橫向捲動 */}
  /* 專業表格樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; /* 確保內容不會太擠 */}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table th { background-color: #5d8ca3; /* 已調整為較深的藍色調 */ color: white; text-align: center; padding: 12px 15px; font-weight: bold;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #4a5568;  text-align: center;}
  /* 隔行變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:nth-child(even) { background-color: #f8fafc;}
  /* 滑過列變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:hover { background-color: #edf2f7;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .section-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #2d3748; border-left: 5px solid #5d8ca3; /* 標題邊條也同步加深顏色 */ padding-left: 10px;}
  
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  /************ pollution source analysis ************/

  .page-quick-analysis .main-col-full .source-analysis-pic { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-full .source-analysis-pic img { width: calc(100% / 4 - 30px); margin: 0 15px;}
  
  .page-quick-analysis .main-col-full .source-analysis-table { width: 100%; margin: 30px 0 0 0;}
  /* 設定表格容器與邊框 */
.page-quick-analysis .main-col-full .source-analysis-table table { 
    width: 100%; 
    font-size: 2rem; 
    border: 1px #333 solid;
    border-collapse: collapse; /* 讓邊框合併，看起來比較專業 */
}

/* 關鍵修改：針對表格內的所有單元格設定置中 */
.page-quick-analysis .main-col-full .source-analysis-table table th,
.page-quick-analysis .main-col-full .source-analysis-table table td {
    padding: 15px;            /* 增加間距，讓 2rem 的大字不會擠在一起 */
    text-align: center;       /* 水平置中 */
    vertical-align: middle;   /* 垂直置中 */
    border: 1px #333 solid;   /* 確保內格也有邊框 */
}

/* 如果您希望表頭有底色區分 */
.page-quick-analysis .main-col-full .source-analysis-table table th {
    background-color: #f5f5f5;
    font-weight: 600;
}
  

  /************ observational data ************/

  .page-quick-analysis .main-col-rt .title-infor-bar-v2 { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .title { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  /* 讓圖表達到網頁等寬的關鍵設定 */
  /* 讓圖表對齊內容區塊寬度（與下方圖片右側對齊） */
  .page-quick-analysis .main-col-rt .ozone-chart {clear: both;width: 100%; /* 設定為 100% 以對齊父層容器邊界 */margin: 30px 0; /* 設定上下間距 */box-sizing: border-box;}
  /* 以下保留您原本的表格與區塊樣式設定 */
  .page-quick-analysis .main-col-rt .ozone-pic-table {width: 100%;margin: 30px 0;display: flex;justify-content: space-between;align-items: stretch;gap: 20px;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table {width: 50%;box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 2rem;color: #333;background: #ffffff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);border: 1px solid #eef2f3;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table th {background-color: #f8fafb;color: #595757;font-weight: 600;padding: 15px;text-align: center;border-bottom: 2px solid #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td {padding: 16px 15px;border-bottom: 1px solid #f0f0f0;text-align: center;transition: all 0.2s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:last-child td {border-bottom: none;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item {cursor: pointer;position: relative;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:hover td.value-item {background-color: #f0f9fb;color: #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item.active {background-color: #e9f5f8;color: #2791ad;font-weight: 700;box-shadow: inset 4px 0 0 #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic {width: 50%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img {width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img:hover {transform: scale(1.02);}

  /************ emissions list data ************/

  .page-quick-analysis .main-col-rt ul.emissions-list-tab { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li { width: calc(100% / 6); padding: 0; margin: 0;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a { width: 100%; height: 50px; color: #333; font-size: 2rem; font-weight: 500; text-decoration: none; border-bottom: 4px #eee solid; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a:hover { background-color: #eee; border-bottom: 4px #ccc solid;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a.sel { color: #2d4daa; border-bottom: 4px #2d4daa solid; background-color: #eee;}

  .page-quick-analysis .main-col-rt .emissions-list-detail { width: 100%;}
  .page-quick-analysis .main-col-rt .emissions-list-detail > div { padding: 40px 0; display: none;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .title { width: 100%; padding: 0 0 0 10px; color: #2d4daa; font-size: 2rem; font-weight: 600; border-left: 4px #2d4daa solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box { width: calc(100% / 3 - 20px); margin: 0 10px; border: 1px #ccc solid; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box .text { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .emissions-list-detail table { clear: both; width: calc(100% - 20px); margin: 30px auto 0 auto; font-size: 2rem; border: 0; text-align: center;}


  /************ privacy policy ************/

  .page-quick-analysis .main-col-full .privcy-content { width: 100%; padding: 0 0 30px 0; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-full .privcy-content a { color: #333; text-decoration: none; border-bottom: 1px #333 solid;}

  /************ change password ************/
    /* 1. 核心容器：維持水平置中 */
    .page-quick-analysis .main-col-full .change-password {
        width: 90%;
        max-width: 1000px;
        margin: 0 auto;
        padding: 30px 40px;
        font-size: 2rem;
        box-sizing: border-box;
        position: relative; /* 為右下角的統計資訊提供定位基準 */
    }

    /* 2. 標題：維持靠左 */
    .page-quick-analysis .main-col-full .title-bar {
        text-align: left;
        font-size: 2rem;
        font-weight: bold;
        color: #333;
        padding-bottom: 10px;
        margin-bottom: 50px;
        border-bottom: 1px solid #333;
    }

    /* 3. 欄位容器 */
    .page-quick-analysis .main-col-full .change-password .column {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 35px;
        width: 100%;
    }

    /* 4. 標籤文字 */
    .page-quick-analysis .main-col-full .change-password .caption {
        display: inline-block;
        width: 200px;
        text-align: right;
        margin-right: 30px;
        font-size: 2rem;
        font-weight: bold;
    }

    /* 5. 長橢圓輸入框 */
    .page-quick-analysis .main-col-full .change-password .column input[type="password"] {
        flex: 1;
        max-width: 700px;
        height: 65px;
        padding: 0 35px;
        font-size: 2rem;
        border: 1px solid #777;
        border-radius: 50px;
        outline: none;
    }

    /* 6. 提示訊息位置 */
    .page-quick-analysis .main-col-full .change-password .column .notice {
        display: block;
        width: 100%;
        margin-left: 230px;
        font-size: 1.5rem;
        color: #d9534f;
        margin-top: 8px;
        text-align: left;
    }

    /* 7. 按鈕區塊：再靠右一點 */
    .page-quick-analysis .main-col-full .change-password .column-full {
        padding-left: 350px; /* 從 230px 增加到 350px，讓按鈕明顯向右移動 */
        display: flex;
        gap: 30px;
        margin-top: 40px;
        margin-bottom: 60px; /* 為底部的統計資訊預留空間 */
    }

        /* 8. 黑底橢圓按鈕 */
        .page-quick-analysis .main-col-full .change-password .column-full input[type="submit"],
        .page-quick-analysis .main-col-full .change-password .column-full input[type="reset"] {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 12px 55px;
            border-radius: 50px;
            font-size: 2rem;
            cursor: pointer;
        }

    /* 9. 瀏覽人次統計：移至右下角 */
    .page-quick-analysis .main-col-full .page-views-bar {
        text-align: right; /* 文字靠右對齊 */
        font-size: 1.2rem;
        color: #666;
        margin-top: 20px;
        width: 100%;
    }


  /************ site map ************/

  ul#sitemap { clear: both; width: 100%; padding: 0 40px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul#sitemap li { width: calc(100% / 5 - 40px); padding: 0; margin: 0 20px 40px 20px;}
  ul#sitemap li a { width: 100%; padding: 6px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center; text-decoration: none; border-bottom: 4px #8ebfcc solid; display: block;}
  ul#sitemap li a:hover { color: #2791ad;}
  ul#sitemap li ul.popup { width: 100%; padding: 10px 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.popup li { width: 100%; padding: 0; margin: 0;}
  ul#sitemap li ul.popup li a { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 400; text-align: center; text-decoration: none; border: 0 !important; display: block;}
  ul#sitemap li ul.popup li a:hover { color: #2791ad;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px calc(50% - 700px); background-color: #8ebfcc; box-sizing: border-box;}

  .footer-menu { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-menu a.menu-btn { width: 175px; height: 28px; margin: 0 30px 0 0; color: #333; font-size: 2rem; letter-spacing: 0.1em; line-height: 1em; text-decoration: none; display: flex; justify-content: center; align-items: center; background-image: url("../images/footer_menu_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-size: center center;}
  .footer-menu a.menu-btn:hover { font-weight: 500;}

  .footer-contain { clear: both; width: 100%; padding: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .footer-contain .footer-col-lf { width: calc(100% - 400px);}
  .footer-contain .footer-col-lf .footer-logo { width: 240px;}
  .footer-contain .footer-col-lf .footer-logo img { width: 100%; height: auto;}
  .footer-contain .footer-col-lf .copyright { width: 100%; padding: 25px 0 0 0; color: #fff; font-size: 2rem;}
  .footer-contain .footer-col-rt-mo { display: none;}
  .footer-contain .footer-col-rt { width: 400px; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .footer-contain .footer-col-rt .logo-title { width: 200px;}
  .footer-contain .footer-col-rt .logo-title a { width: 100%; display: block;}
  .footer-contain .footer-col-rt .logo-title a img { width: 100%; height: auto;}
  .footer-contain .footer-col-rt .footer-infor { width: 100%; padding: 15px 0 0 0; font-size: 2rem; line-height: 2em; text-align: right;}


}

@media screen and (min-width: 1280px) and (max-width: 1440px) {  

  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; min-height: 100%; background-color: #b19466; background-image: url("../images/login_bg.jpg"); background-repeat: no-repeat; background-size: 150% auto; background-position: center top; display: block;}

  .login-me-logo { width: 370px; padding: 30px 0 0 40px;}
  .login-me-logo img { width: 100%; height: auto;}

  .login-title-form { width: 900px; padding: 28vw 0 2vw 0; margin: 0 auto; box-sizing: border-box;}
  .login-title-form img.title { width: 300px; margin: 80px auto 40px auto;}
  /* 左側圖片容器 */
  .login-title-form .login-left-img {width: 400px; /* 配合您右側剩餘空間 */ margin: 0 auto 40px auto; /* 關鍵：左右 auto 會讓區塊水平置中 */ display: flex;justify-content: center; /* 水平置中 */align-items: center; /* 垂直置中 */align-self: stretch; /* 讓容器高度跟隨父層，確保內部的 center 有效 */}
  .login-title-form .login-left-img img {max-width: 100%; height: auto;/* 如果圖片還是偏上，可以強制給它一個垂直置中 */ display: block;}
  .login-title-form .login-form-box { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 20px; background-color: rgba(255,255,255,0.78); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .login-title-form .login-form-box .form-box { width: 600px; font-size: 2.5rem; font-weight: 500; text-align: center; /* 新增以下這行，數值可依需求調整 (例如 60px 或 80px) */padding-top: 60px;}
  .login-title-form .login-form-box .form-box input[type=text], 
  .login-title-form .login-form-box .form-box input[type=password] { width: 400px; padding: 18px 30px; color: #333; font-size: 2.5rem; border: 0; outline: none; background-image: url("../images/login_input_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; background-color: transparent; box-sizing: border-box;}
  .login-title-form .login-form-box .form-box .title-forget-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .login-title-form .login-form-box .form-box .title-forget-btn img.title { width: 300px; margin: 0 40px 0 0;}
  .login-title-form .login-form-box .form-box .title-forget-btn input[type=button].forget-btn { width: 200px; height: 100px; border: 0; background-color: transparent; background-image: url("../images/forget_btn.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}
  .login-title-form .login-form-box .form-submit { width: calc(100% - 600px); margin: 0 0 100px 0;}
  .login-title-form .login-form-box .form-submit input[type=button], 
  .login-title-form .login-form-box .form-submit input[type=submit] { width: 133px; height: 80px; border: 0; background-color: transparent; background-image: url("../images/login_submit.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}

  .login-copyright { clear: both; width: 100%; padding: 40px 50px; box-sizing: border-box; color: #fff; font-size: 2rem; text-align: right;}


  /************ header + nav ************/

  header { clear: both; width: 100%; padding: 30px calc(50% - 620px) 20px calc(50% - 620px); box-sizing: border-box;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 2rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; display: block;}
  .header-nav-social .site-title a img { width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 200px - 150px - 105px);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 10px 10px; margin: 0; position: relative; box-sizing: border-box;}
  nav#pc ul.nav-menu li a { padding: 3px 8px; color: #333; font-size: 2rem; font-weight: 600; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul.nav-menu li a:hover { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#pc ul.nav-menu li a.action { color: #fff; border-radius: 8px; background-color: #8ebfcc}
  nav#pc ul.nav-menu li ul.menu-popup { padding: 10px 0; margin: 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: none; position: absolute; top: 45px; z-index: 999;}
  nav#pc ul.nav-menu li ul.menu-popup.w-156 { width: 156px; left: calc(50% - 78px);}
  nav#pc ul.nav-menu li ul.menu-popup.w-180 { width: 180px; left: calc(50% - 90px);}
  nav#pc ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 5px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block;}
  nav#pc ul.nav-menu li ul.menu-popup li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}

  .header-search-mo { display: none;}
  .header-search { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search img.search-icon { width: 20px; height: auto;}
  .header-search input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 2rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons-mo { display: none;}
  .header-social-icons { width: 120px; display: flex; justify-content: flex-end; align-items: center; position: relative;}
  .header-social-icons a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons a.icon img { width: 100%; height: auto; cursor: pointer;}

  .header-mem-nav { width: 120px; position: absolute; top: 30px; right: 0; z-index: 999; display: none;}
  .header-mem-nav .triangle { border-right: 12px solid transparent; border-left: 12px solid transparent; border-bottom: 15px solid rgba(89,87,87,0.8); display: inline-block; float: right;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 40px 0; margin: 0; list-style: none; border-radius: 15px 0 15px 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 5px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-banner ************/

  section#hp-sec-banner { clear: both; width: 100%; padding: 0 calc(50% - 620px); box-sizing: border-box;}

  .hp-banner-box { width: 100%; position: relative;}
  .hp-banner-box img.hp-banner-mo { display: none;}
  .hp-banner-box img.hp-banner { width: 100%; position: relative; z-index: 1;}
  .hp-banner-box .banner-text-btn { width: 580px; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.6em; letter-spacing: 0.1em; position: absolute; top: 470px; left: 40px; z-index: 2;}
  .hp-banner-box .banner-text-btn a.join-btn { width: 140px; padding: 8px 0; margin: 20px 0 0 0; color: #fff; font-size: 2.5rem; font-weight: 500; line-height: 1em; letter-spacing: 0.1em; text-align: center; text-decoration: none; border: 1px #fff solid; border-radius: 10px; display: block; cursor: pointer;}
  .hp-banner-box .banner-text-btn a.join-btn:hover { background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-main ************/

  section#hp-sec-main { clear: both; width: 100%; padding: 65px calc(50% - 620px) 40px calc(50% - 620px); box-sizing: border-box;}

  .page-hp-sec-main { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  
  .page-hp-sec-main .main-col-lf { width: 850px; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-lf .main-con { width: 460px; margin: 0 40px 0 0;}
  .page-hp-sec-main .main-col-lf .main-con .page-title { width: 100%; padding: 0 0 10px 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em; border-bottom: 1px #595757 solid;}
  .page-hp-sec-main .main-col-lf .main-con .page-title-sub { width: 100%; padding: 5px 0 0 0; font-size: 2rem; font-weight: 500;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar { width: 100%; padding: 40px 0; font-size: 2rem; line-height: 2em;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index { width: 100%;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index > div { display: none;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .position-title { width: 316px; height: 29px; padding: 5px 0; margin: 0 auto; font-size: 2rem; font-weight: 500; text-align: center; line-height: 1em; background-image: url("../images/air_quality_index_position_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .exponential-curve-box { width: 100%; padding: 10px; margin: 20px 0 0 0; border: 1px #333 solid; border-radius: 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .tw-map { width: calc(100% - 560px);}
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_1, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_2, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_3, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_4, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_5, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_6, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_7 { width: 310px; height: auto; display: none;}
  
  .page-hp-sec-main .main-col-rt { width: calc(100% - 850px);}
  .page-hp-sec-main .main-col-rt .page-title-mo { display: none;}
  .page-hp-sec-main .main-col-rt .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-main .main-col-rt .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-main .main-col-rt .page-title span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-main .main-col-rt .news-list-box { width: 100%; margin: 0 0 25px 0;}
  .page-hp-sec-main .main-col-rt .news-list-box a { width: 100%; padding: 15px; color: #333; text-decoration: none; box-sizing: border-box; border-radius: 10px; background-color: #a9b3c2; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-rt .news-list-box a:hover { background-color: #c5ceda;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic { width: 118px; border-radius: 10px; background-color: #ebebee; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic img { width: 100%; height: auto;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro { width: calc(100% - 118px); padding: 0 0 0 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .title { width: 100%; padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .text { width: 100%; font-size: 2rem; line-height: 1.6em;}


  /************ section #hp-sec-achievements ************/

  section#hp-sec-achievements { clear: both; width: 100%; padding: 0 calc(50% - 620px) 40px calc(50% - 620px); box-sizing: border-box;}

  .page-hp-sec-achi { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  .page-hp-sec-achi .page-title-mo { display: none;}
  .page-hp-sec-achi .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-achi .page-title span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-achi .achievements-show { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .achievements-show .view-achi-box { width: 100%;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box { width: 270px; height: 354px; margin: 0 auto; border-radius: 15px; background-color: #a9b3c2; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; display: block;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box img { width: 100%; height: auto;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn { width: 160px; margin: 0 40px;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a { width: 100%; padding: 3px 0; color: #fff; font-size: 2rem; text-align: center; letter-spacing: 0.1em; text-decoration: none; border-radius: 20px; background-color: #595757; display: block;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a:hover { background-color: #6d6d6d;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow img { width: 40px; height: auto; margin: 0 10px; cursor: pointer;}


  /************ section #quick-analysis ************/

  .page-bottom-bar { clear: both; width: 100%; padding: 0 calc(50% - 620px) 50px calc(50% - 620px); margin: -30px 0 0 0; font-size: 2rem; text-align: right; box-sizing: border-box;}

  section#quick-analysis { clear: both; width: 100%; padding: 0 calc(50% - 620px) 50px calc(50% - 620px); box-sizing: border-box;}

  .page-quick-analysis { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  
  .page-quick-analysis .main-col-lf { width: 400px; padding: 15px; margin: 0 25px 0 0; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-lf .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-lf .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-lf .target_value { width: 135px; height: 34px; color: #f29600; font-size: 2.5rem; font-weight: 900; text-align: center; line-height: 1em; background-image: url("../images/quick_analysis_points_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box { width: 90%; padding: 15px 20px; margin: 40px auto; color: #fff; border-radius: 15px; box-sizing: border-box;}
  /* 修正：針對該區塊內的 input 元素設定 placeholder */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::placeholder {font-size: 1.5rem;}
  /* 為了相容所有瀏覽器，建議寫法如下 */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-webkit-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input:-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.point { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.line { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.area { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 15px 3px 5px;  color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}*/
    /* 2. 必須清除原生外觀 - 這是關鍵 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] {
        -webkit-appearance: none; /* Chrome, Safari, Edge */
        width: 100%;
        background: transparent;
        margin: 15px 0;
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}*/
    /* 1. 針對 Chrome, Edge, Safari 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb {
        /* 使用放射狀漸層：中心點 35% 是黃色，40% 開始變白色，達成硬邊點點效果 */
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px; /* 稍微加寬一點點點，讓點點更明顯 */
        height: 18px;
        border-radius: 50%;
        -webkit-appearance: none;
        margin-top: -5px; /* 計算公式：(軌道高度8px / 2) - (圈圈高度18px / 2) = -5px */
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 加上微陰影讓圈圈更有立體感 */
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}*/
    /* 2. 針對 Firefox 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb {
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}

  /*.page-quick-analysis .main-col-rt { width: calc(100% - 400px - 25px); padding: 15px 40px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}*/
  .page-quick-analysis .main-col-rt {
    /* 強制填滿左側 480px 之後的所有空間 */
    flex: 1; 
    /* 防止內部內容（如 Canvas 或大圖）反向撐開導致版面混亂 */
    min-width: 0; 
    
    padding: 15px 40px;
    border-radius: 15px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
  .page-quick-analysis .main-col-rt .title-infor-bar { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar .title { width: calc(100% - 44px);}
  .page-quick-analysis .main-col-rt .title-infor-bar .title span { padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-rt .concentration-curve { width: 100%; margin: 40px 0 60px 0;}
  .page-quick-analysis .main-col-rt .concentration-curve .notice { width: 100%; color: #6d6d6d; font-size: 2rem; text-align: right;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box { width: 50%;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box img.icon { width: 128px; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value { width: 100%; padding: 20px 0 0 0; font-size: 2rem; text-align: center; letter-spacing: 0.1em;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value span.num { color: #f29600; font-size: 3rem; font-weight: 900;}


  /************ concentration target analysis ************/

  .page-quick-analysis .main-col-lf .text-info { width: 100%; padding: 10px 20px 20px 20px; font-size: 2rem; line-height: 1.6em; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box { width: 100%; padding: 15px 20px; margin: 20px 0; font-size: 2rem; line-height: 1.8em; border-radius: 15px; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box.step1 { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .step-box.step2 { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .step-box.step3 { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .step-box.step4 { background-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .step-box .title { width: 100%; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.8em; text-align: center;}

  /*.page-quick-analysis .main-col-rt .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box { width: 100%; padding: 15px 20px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a { width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
*/
    /* 污染物、年份、區域選擇標題與間距 */
  .page-quick-analysis .main-col-rt .page-title-sub {  width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar {  width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] {  width: 20px; height: 20px; vertical-align: middle;}
  /* --- 區域選擇：垂直對齊優化 --- */
  .page-quick-analysis .main-col-rt .choice-bar div[style*="flex-wrap:wrap"] {  display: grid; grid-template-columns: repeat(3, 1fr); /* 強制改為三欄對齊 */ gap: 15px 10px; margin-top: 20px !important;}
  .page-quick-analysis .main-col-rt .choice-bar div span { display: flex; align-items: center; font-size: 2rem;}
  /* --- 濃度目標容器 (灰藍色背景盒) --- */
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box {  width: 100%; padding: 25px 30px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  /* 標題與輸入框容器 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input {  width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 1.5rem; font-weight: 500;}
  /* --- 數字框：箭頭內移與背景樣式 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] {  width: 110px; height: 34px; padding: 3px 15px 3px 5px; /* 增加右邊距給箭頭 */ color: #333; font-size: 1.5rem; text-align: center; border: 0; outline: none;   border-radius: 20px; background-color: #fff; /* 改為白色背景符合圖片 */  box-sizing: border-box; -moz-appearance: textfield;}
  /* Chrome/Safari 專屬：讓箭頭往內縮 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number]::-webkit-inner-spin-button { margin-right: 3px; height: 20px;  cursor: pointer;}
  /* --- 滑桿美化：黃色核心 + 白色外圈 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] {  width: 100%; margin: 20px 0 5px 0; outline: none; -webkit-appearance: none; background-color: transparent;}
  /* 軌道樣式 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track {  background: rgba(255,255,255,0.6); height: 4px; border-radius: 2px;}
  /* 圓鈕樣式 (黃色+白色邊框) */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb {  -webkit-appearance: none;  height: 26px; width: 26px; border-radius: 50%;  background: #ffb800; /* 黃色核心 */ border: 4px solid #fff; /* 白色外圈 */ box-shadow: 0 2px 4px rgba(0,0,0,0.2);  margin-top: -11px; /* 置中對準軌道 */}
  /* --- 刻度與標註微調 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar {  width: 100%; height: 12px; margin: 0 auto; border-left: 1px #fff solid;   display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line {  width: calc(100% / 10); height: 12px; border-right: 1px #fff solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note {  width: 100%; margin: 10px 0 0 0; display: flex; justify-content: space-between; font-size: 1.5rem;}
  /* 下一步按鈕 */
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a {  width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center;  text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}


  .page-quick-analysis .main-col-full { width: 100%; padding: 15px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .title-infor-bar { width: 100%; margin: 0 0 25px 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-full .title-infor-bar .title-bar { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-full .choice-contain { width: 96%; margin: 0 auto; font-size: 2rem; line-height: 1.6em;}
  .page-quick-analysis .main-col-full .area-target-analysis { width: 96%; margin: 40px auto;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li { padding: 0; margin: 0 2px 2px 0; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a { padding: 3px 10px; color: #333; font-size: 2rem; text-decoration: none; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table { clear: both; width: 100%; position: relative;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table > div { display: none;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table a.more-btn { width: 200px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; position: absolute; top: -40px; right: 0; z-index: 9;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table table { clear: both; width: 100%; font-size: 2rem; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt { clear: both; width: 96%; margin: 40px auto 0 auto; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-full .data-detail-box { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf { width: 60%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf table { width: 100%; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt { width: 40%; padding: 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf .title, 
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .title { width: 100%; padding: 0 0 40px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart { width: 100%; padding: 40px 10px 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart table.analysis-table { width: 100%; font-size: 2rem; border: 1px #333 solid;}

  .page-quick-analysis .main-col-full .health-risks-analysis { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 5px; color: #fff; font-size: 2rem; text-align: center; background-color: #2d4daa; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 5px; font-size: 2rem; text-align: center; background-color: #c1cef4; box-sizing: border-box;}

  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  .page-quick-analysis .main-col-rt .tool-bar { width: 100%; padding: 0 0 20px 0; text-align: right;}
  .page-quick-analysis .main-col-rt .tool-bar select { width: 200px; padding: 5px; color: #333; font-size: 2rem; border: 1px #333 solid; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button] { width: 100px; padding: 5px; margin: 0 0 0 10px; color: #fff; font-size: 2rem; border: 0; background-color: #333; box-sizing: border-box; cursor: pointer;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button]:hover { background-color: #595757;}
  
  /*.page-quick-analysis .main-col-rt ul.emission-zone-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li { padding: 0; margin: 0 10px 10px 0;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a { padding: 3px 5px; color: #333; font-size: 2rem; text-decoration: none; border: 1px #333 solid; border-radius: 8px; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose { width: 100%; padding: 10px 0 30px 0;}
  .page-quick-analysis .main-col-rt .emission-zone-choose > div { display: none;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full { width: 100%; padding: 20px 0; background-color: #eee;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x { width: calc(100% / 4); padding: 0 10px; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title { width: 100%; padding: 0 0 10px 0; text-align: center;  font-size: 2rem}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title span { padding: 0 5px; color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x input[type=checkbox] { width: 20px; height: 20px;  font-size: 1.5rem}
*/
  /* 區域選擇 Checkbox 排列 */
  .page-quick-analysis .main-col-rt .region-checkbox-group { display: flex; gap: 25px; margin: 15px 0; padding-left: 5px;}
  /* 縣市按鈕群組樣式 */
  .page-quick-analysis .main-col-rt .btn-group { display: flex;flex-wrap: wrap; gap: 10px; margin: 15px 0;}
  .page-quick-analysis .main-col-rt .toggle-btn { border: 1px solid #ccc; border-radius: 20px; padding: 6px 18px; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 14px; outline: none;}
  .page-quick-analysis .main-col-rt .toggle-btn:hover { border-color: #888; background-color: #f9f9f9;}
  .page-quick-analysis .main-col-rt .toggle-btn.active { background-color: #333; color: #fff;  border-color: #333;}
  /* 灰色背景源別區塊：類別橫向排列 (同一行) */
  .page-quick-analysis .main-col-rt .source-grid { background-color: #f5f5f5; padding: 20px; display: grid; /* 四個類別平分寬度 */ grid-template-columns: repeat(4, 1fr);  gap: 20px; border-radius: 4px;}
  /* 預設隱藏全台的源別容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper.active {   display: block; }
  /* 預設隱藏所有空品區的源別容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper.active {  display: block;}
  /* 預設隱藏所有城市的源別容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper { display: none;}
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper.active {    display: block;}
  /* 類別內部的選項垂直排列 (往下長) */
  .page-quick-analysis .main-col-rt .source-col { display: flex;  flex-direction: column;  align-items: flex-start;}
  .page-quick-analysis .main-col-rt .source-column-header { background-color: #333; color: #fff; padding: 4px 10px;  display: inline-block;  margin-bottom: 12px;  font-size: 13px;  border-radius: 2px;}
  .page-quick-analysis .main-col-rt .checkbox-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; cursor: pointer;}
  .page-quick-analysis .main-col-rt .checkbox-item input { margin-right: 8px;}
  /* 底部動作列 */
  .page-quick-analysis .main-col-rt .footer-actions {  margin-top: 30px; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-btn { background-color: #555; color: #fff; border: none;  padding: 10px 35px; border-radius: 25px;  font-size: 16px; cursor: pointer; transition: background 0.3s;}
  .page-quick-analysis .main-col-rt .next-btn:hover {    background-color: #222; }
  /* 響應式調整：小螢幕時自動轉為垂直 */
  @media (max-width: 768px) { .page-quick-analysis .main-col-rt .source-grid {  grid-template-columns: 1fr; }}



  .page-quick-analysis .main-col-rt .choice-prev-next-bnt { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-lf .reduction-analysis-bx { width: 100%; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-b { font-size: 2.5rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-s { padding: 0 0 0 10px; font-size: 2rem; font-weight: 500;}
  /*.page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { width: 100%; padding: 0 0 0 30px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range .title { width: 100px;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=range] { width: 120px; outline: none; accent-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=number] { width: 50px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 1px #333 solid; background-color: #fff;}
  */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { display: flex !important; flex-direction: row; /* 橫向排列 */ flex-wrap: nowrap; /* 強制這三個區塊不換行 */ align-items: center; /* 垂直置中，當文字變多行時 Slider 依然在中間 */ width: 100%; margin-bottom: 20px; gap: 10px;}
  /* 1/4 區域：文字過長自動換行 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .title-col { flex: 1; /* 佔 1/4 */ line-height: 1.2; /* 設定行高，讓換行後的文字不會太擠 */ word-break: break-all; /* 確保長英文或符號也能斷行 */}
  /* 1/2 區域：滑桿 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .slider-col { flex: 2; /* 佔 1/2 */ display: flex; justify-content: center; min-width: 0; /* 防止 Flex 項目溢出 */}
  /* 1/4 區域：數字輸入 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .value-col { flex: 1; /* 佔 1/4 */ display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; /* 數字與 % 建議不要斷行 */}
  /* --- 滑桿質感樣式 (還原圖片) --- */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"] { -webkit-appearance: none; width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #9cc1d1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;}
  /* 數字框 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="number"] { width: 55px;  height: 28px; text-align: center; border: 1px solid #ccc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=submit], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=reset], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=button] { padding: 3px 30px; margin: 0 10px; color: #fff; font-size: 2rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}
  .page-quick-analysis .main-col-rt .rt-title-bar { width: 100%; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  /*.page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .choice-text { width: 100%; font-size: 2rem; line-height: 1.8em;}  */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .health-risks-analysis { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full { width: 100%;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf table { width: 100%; font-size: 2rem; text-align: center; border: 0;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 10px; color: #fff; font-size: 2rem; text-align: center; background-color: #e97132; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 10px; font-size: 2rem; text-align: center; background-color: #f6d5cd; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-3 { width: 100%; padding: 10px; font-size: 2rem; font-weight: 500; text-align: center; box-sizing: border-box;}
  /* 分析結果主容器 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-results-container { width: 100%; max-width: 1000px; /* 限制最大寬度，避免在大螢幕拉得太開 */ margin: 0 auto; /* 水平置中 */ display: flex; flex-direction: column; /* 垂直堆疊：圖在上，表在下 */ gap: 30px; /* 圖與表之間的間距 */}
  /* 圖表容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-placeholder { width: 100%; height: 300px; /* 預設高度 */ background-color: #f0f4f7; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center;  color: #718096;  border-radius: 4px;}
  /* 表格容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .table-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; overflow-x: auto; /* 手機版可橫向捲動 */}
  /* 專業表格樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; /* 確保內容不會太擠 */}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table th { background-color: #5d8ca3; /* 已調整為較深的藍色調 */ color: white; text-align: center; padding: 12px 15px; font-weight: bold;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #4a5568;  text-align: center;}
  /* 隔行變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:nth-child(even) { background-color: #f8fafc;}
  /* 滑過列變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:hover { background-color: #edf2f7;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .section-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #2d3748; border-left: 5px solid #5d8ca3; /* 標題邊條也同步加深顏色 */ padding-left: 10px;}
  
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  /************ pollution source analysis ************/

  .page-quick-analysis .main-col-full .source-analysis-pic { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-full .source-analysis-pic img { width: calc(100% / 4 - 30px); margin: 0 15px;}
  
  .page-quick-analysis .main-col-full .source-analysis-table { width: 100%; margin: 30px 0 0 0;}
    /* 設定表格容器與邊框 */
    .page-quick-analysis .main-col-full .source-analysis-table table {
        width: 100%;
        font-size: 2rem;
        border: 1px #333 solid;
        border-collapse: collapse; /* 讓邊框合併，看起來比較專業 */
    }

        /* 關鍵修改：針對表格內的所有單元格設定置中 */
        .page-quick-analysis .main-col-full .source-analysis-table table th,
        .page-quick-analysis .main-col-full .source-analysis-table table td {
            padding: 15px; /* 增加間距，讓 2rem 的大字不會擠在一起 */
            text-align: center; /* 水平置中 */
            vertical-align: middle; /* 垂直置中 */
            border: 1px #333 solid; /* 確保內格也有邊框 */
        }

        /* 如果您希望表頭有底色區分 */
        .page-quick-analysis .main-col-full .source-analysis-table table th {
            background-color: #f5f5f5;
            font-weight: 600;
        }


  /************ observational data ************/

  .page-quick-analysis .main-col-rt .title-infor-bar-v2 { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .title { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  /* 讓圖表達到網頁等寬的關鍵設定 */
  /* 讓圖表對齊內容區塊寬度（與下方圖片右側對齊） */
  .page-quick-analysis .main-col-rt .ozone-chart {clear: both;width: 100%; /* 設定為 100% 以對齊父層容器邊界 */margin: 30px 0; /* 設定上下間距 */box-sizing: border-box;}
  /* 以下保留您原本的表格與區塊樣式設定 */
  .page-quick-analysis .main-col-rt .ozone-pic-table {width: 100%;margin: 30px 0;display: flex;justify-content: space-between;align-items: stretch;gap: 20px;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table {width: 50%;box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 2rem;color: #333;background: #ffffff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);border: 1px solid #eef2f3;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table th {background-color: #f8fafb;color: #595757;font-weight: 600;padding: 15px;text-align: center;border-bottom: 2px solid #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td {padding: 16px 15px;border-bottom: 1px solid #f0f0f0;text-align: center;transition: all 0.2s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:last-child td {border-bottom: none;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item {cursor: pointer;position: relative;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:hover td.value-item {background-color: #f0f9fb;color: #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item.active {background-color: #e9f5f8;color: #2791ad;font-weight: 700;box-shadow: inset 4px 0 0 #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic {width: 50%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img {width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img:hover {transform: scale(1.02);}


  /************ emissions list data ************/

  .page-quick-analysis .main-col-rt ul.emissions-list-tab { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li { width: calc(100% / 6); padding: 0; margin: 0;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a { width: 100%; height: 50px; color: #333; font-size: 2rem; font-weight: 500; text-decoration: none; border-bottom: 4px #eee solid; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a:hover { background-color: #eee; border-bottom: 4px #ccc solid;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a.sel { color: #2d4daa; border-bottom: 4px #2d4daa solid; background-color: #eee;}

  .page-quick-analysis .main-col-rt .emissions-list-detail { width: 100%;}
  .page-quick-analysis .main-col-rt .emissions-list-detail > div { padding: 40px 0; display: none;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .title { width: 100%; padding: 0 0 0 10px; color: #2d4daa; font-size: 2rem; font-weight: 600; border-left: 4px #2d4daa solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box { width: calc(100% / 3 - 20px); margin: 0 10px; border: 1px #ccc solid; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box .text { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .emissions-list-detail table { clear: both; width: calc(100% - 20px); margin: 30px auto 0 auto; font-size: 2rem; border: 0; text-align: center;}


  /************ privacy policy ************/

  .page-quick-analysis .main-col-full .privcy-content { width: 100%; padding: 0 0 30px 0; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-full .privcy-content a { color: #333; text-decoration: none; border-bottom: 1px #333 solid;}


  /************ site map ************/

  ul#sitemap { clear: both; width: 100%; padding: 0 40px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul#sitemap li { width: calc(100% / 5 - 40px); padding: 0; margin: 0 20px 40px 20px;}
  ul#sitemap li a { width: 100%; padding: 6px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center; text-decoration: none; border-bottom: 4px #8ebfcc solid; display: block;}
  ul#sitemap li a:hover { color: #2791ad;}
  ul#sitemap li ul.popup { width: 100%; padding: 10px 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.popup li { width: 100%; padding: 0; margin: 0;}
  ul#sitemap li ul.popup li a { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 400; text-align: center; text-decoration: none; border: 0 !important; display: block;}
  ul#sitemap li ul.popup li a:hover { color: #2791ad;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px calc(50% - 600px); background-color: #8ebfcc; box-sizing: border-box;}

  .footer-menu { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-menu a.menu-btn { width: 175px; height: 28px; margin: 0 30px 0 0; color: #333; font-size: 2rem; letter-spacing: 0.1em; line-height: 1em; text-decoration: none; display: flex; justify-content: center; align-items: center; background-image: url("../images/footer_menu_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-size: center center;}
  .footer-menu a.menu-btn:hover { font-weight: 500;}

  .footer-contain { clear: both; width: 100%; padding: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .footer-contain .footer-col-lf { width: calc(100% - 400px);}
  .footer-contain .footer-col-lf .footer-logo { width: 240px;}
  .footer-contain .footer-col-lf .footer-logo img { width: 100%; height: auto;}
  .footer-contain .footer-col-lf .copyright { width: 100%; padding: 25px 0 0 0; color: #fff; font-size: 2rem;}
  .footer-contain .footer-col-rt-mo { display: none;}
  .footer-contain .footer-col-rt { width: 400px; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .footer-contain .footer-col-rt .logo-title { width: 200px;}
  .footer-contain .footer-col-rt .logo-title a { width: 100%; display: block;}
  .footer-contain .footer-col-rt .logo-title a img { width: 100%; height: auto;}
  .footer-contain .footer-col-rt .footer-infor { width: 100%; padding: 15px 0 0 0; font-size: 2rem; line-height: 2em; text-align: right;}


}

@media screen and ( min-width: 1024px) and (max-width: 1280px) {

  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; min-height: 100%; background-color: #b19466; background-image: url("../images/login_bg.jpg"); background-repeat: no-repeat; background-size: 150% auto; background-position: center top; display: block;}

  .login-me-logo { width: 370px; padding: 30px 0 0 40px;}
  .login-me-logo img { width: 100%; height: auto;}

  .login-title-form { width: 900px; padding: 30vw 0 2vw 0; margin: 0 auto; box-sizing: border-box;}
  .login-title-form img.title { width: 300px; margin: 80px auto 40px auto;}
  /* 左側圖片容器 */
  .login-title-form .login-left-img {width: 400px; /* 配合您右側剩餘空間 */ margin: 0 auto 40px auto; /* 關鍵：左右 auto 會讓區塊水平置中 */ display: flex; justify-content: center; /* 水平置中 */ align-items: center; /* 垂直置中 */align-self: stretch; /* 讓容器高度跟隨父層，確保內部的 center 有效 */}
  .login-title-form .login-left-img img {max-width: 100%; height: auto;/* 如果圖片還是偏上，可以強制給它一個垂直置中 */ display: block;}
  .login-title-form .login-form-box { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 20px; background-color: rgba(255,255,255,0.78); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .login-title-form .login-form-box .form-box { width: 600px; font-size: 2.5rem; font-weight: 500; text-align: center;/* 新增以下這行，數值可依需求調整 (例如 60px 或 80px) */padding-top: 60px;}
  .login-title-form .login-form-box .form-box input[type=text], 
  .login-title-form .login-form-box .form-box input[type=password] { width: 400px; padding: 18px 30px; color: #333; font-size: 2.5rem; border: 0; outline: none; background-image: url("../images/login_input_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; background-color: transparent; box-sizing: border-box;}
  .login-title-form .login-form-box .form-box .title-forget-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .login-title-form .login-form-box .form-box .title-forget-btn img.title { width: 300px; margin: 0 40px 0 0;}
  .login-title-form .login-form-box .form-box .title-forget-btn input[type=button].forget-btn { width: 200px; height: 100px; border: 0; background-color: transparent; background-image: url("../images/forget_btn.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}
  .login-title-form .login-form-box .form-submit { width: calc(100% - 600px); margin: 0 0 80px 0;}
  .login-title-form .login-form-box .form-submit input[type=button], 
  .login-title-form .login-form-box .form-submit input[type=submit] { width: 133px; height: 80px; border: 0; background-color: transparent; background-image: url("../images/login_submit.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}

  .login-copyright { clear: both; width: 100%; padding: 40px 50px; box-sizing: border-box; color: #fff; font-size: 2rem; text-align: right;}


  /************ section #hp-sec-achievements ************/

  section#hp-sec-achievements { clear: both; width: 100%; padding: 0 calc(50% - 620px) 40px calc(50% - 620px); box-sizing: border-box;}

  .page-hp-sec-achi { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  .page-hp-sec-achi .page-title-mo { display: none;}
  .page-hp-sec-achi .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-achi .page-title span.cn { padding: 0 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-achi .achievements-show { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .achievements-show .view-achi-box { width: 100%;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box { width: 270px; height: 354px; margin: 0 auto; border-radius: 15px; background-color: #a9b3c2; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; display: block;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box img { width: 100%; height: auto;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn { width: 160px;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a { width: 100%; padding: 3px 0; color: #fff; font-size: 2rem; text-align: center; letter-spacing: 0.1em; text-decoration: none; border-radius: 20px; background-color: #595757; display: block;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a:hover { background-color: #6d6d6d;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow img { width: 40px; height: auto; margin: 0 10px; cursor: pointer;}


  /************ section #quick-analysis ************/

  .page-bottom-bar { clear: both; width: 100%; padding: 0 20px 50px 20px; margin: -30px 0 0 0; font-size: 2rem; text-align: right; box-sizing: border-box;}


  section#quick-analysis { clear: both; width: 100%; padding: 0 20px 50px 20px; box-sizing: border-box;}

  .page-quick-analysis { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  
  .page-quick-analysis .main-col-lf { width: 400px; padding: 15px; margin: 0 25px 0 0; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-lf .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-lf .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-lf .target_value { width: 135px; height: 34px; color: #f29600; font-size: 2.5rem; font-weight: 900; text-align: center; line-height: 1em; background-image: url("../images/quick_analysis_points_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box { width: 90%; padding: 15px 20px; margin: 40px auto; color: #fff; border-radius: 15px; box-sizing: border-box;}
  /* 修正：針對該區塊內的 input 元素設定 placeholder */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::placeholder {font-size: 1.5rem;}
  /* 為了相容所有瀏覽器，建議寫法如下 */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-webkit-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input:-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.point { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.line { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.area { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 15px 3px 5px;  color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}*/
    /* 2. 必須清除原生外觀 - 這是關鍵 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] {
        -webkit-appearance: none; /* Chrome, Safari, Edge */
        width: 100%;
        background: transparent;
        margin: 15px 0;
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}*/
    /* 1. 針對 Chrome, Edge, Safari 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb {
        /* 使用放射狀漸層：中心點 35% 是黃色，40% 開始變白色，達成硬邊點點效果 */
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px; /* 稍微加寬一點點點，讓點點更明顯 */
        height: 18px;
        border-radius: 50%;
        -webkit-appearance: none;
        margin-top: -5px; /* 計算公式：(軌道高度8px / 2) - (圈圈高度18px / 2) = -5px */
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 加上微陰影讓圈圈更有立體感 */
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}*/
    /* 2. 針對 Firefox 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb {
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}

  /*.page-quick-analysis .main-col-rt { width: calc(100% - 400px - 25px); padding: 15px 40px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}*/
  .page-quick-analysis .main-col-rt {
    /* 強制填滿左側 480px 之後的所有空間 */
    flex: 1; 
    /* 防止內部內容（如 Canvas 或大圖）反向撐開導致版面混亂 */
    min-width: 0; 
    
    padding: 15px 40px;
    border-radius: 15px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
  .page-quick-analysis .main-col-rt .title-infor-bar { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar .title { width: calc(100% - 44px);}
  .page-quick-analysis .main-col-rt .title-infor-bar .title span { padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-rt .concentration-curve { width: 100%; margin: 40px 0 60px 0;}
  .page-quick-analysis .main-col-rt .concentration-curve .notice { width: 100%; color: #6d6d6d; font-size: 2rem; text-align: right;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box { width: 50%;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box img.icon { width: 128px; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value { width: 100%; padding: 20px 0 0 0; font-size: 2rem; text-align: center; letter-spacing: 0.1em;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value span.num { color: #f29600; font-size: 3rem; font-weight: 900;}


  /************ concentration target analysis ************/

  .page-quick-analysis .main-col-lf .text-info { width: 100%; padding: 10px 20px 20px 20px; font-size: 2rem; line-height: 1.6em; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box { width: 100%; padding: 15px 20px; margin: 20px 0; font-size: 2rem; line-height: 1.8em; border-radius: 15px; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box.step1 { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .step-box.step2 { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .step-box.step3 { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .step-box.step4 { background-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .step-box .title { width: 100%; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.8em; text-align: center;}

/*  .page-quick-analysis .main-col-rt .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box { width: 100%; padding: 15px 20px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a { width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
*/
  /* 污染物、年份、區域選擇標題與間距 */
  .page-quick-analysis .main-col-rt .page-title-sub {  width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar {  width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] {  width: 20px; height: 20px; vertical-align: middle;}
  /* --- 區域選擇：垂直對齊優化 --- */
  .page-quick-analysis .main-col-rt .choice-bar div[style*="flex-wrap:wrap"] {  display: grid; grid-template-columns: repeat(3, 1fr); /* 強制改為三欄對齊 */ gap: 15px 10px; margin-top: 20px !important;}
  .page-quick-analysis .main-col-rt .choice-bar div span { display: flex; align-items: center; font-size: 2rem;}
  /* --- 濃度目標容器 (灰藍色背景盒) --- */
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box {  width: 100%; padding: 25px 30px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  /* 標題與輸入框容器 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input {  width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 1.5rem; font-weight: 500;}
  /* --- 數字框：箭頭內移與背景樣式 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] {  width: 110px; height: 34px; padding: 3px 15px 3px 5px; /* 增加右邊距給箭頭 */ color: #333; font-size: 1.5rem; text-align: center; border: 0; outline: none;   border-radius: 20px; background-color: #fff; /* 改為白色背景符合圖片 */  box-sizing: border-box; -moz-appearance: textfield;}
  /* Chrome/Safari 專屬：讓箭頭往內縮 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number]::-webkit-inner-spin-button { margin-right: 3px; height: 20px;  cursor: pointer;}
  /* --- 滑桿美化：黃色核心 + 白色外圈 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] {  width: 100%; margin: 20px 0 5px 0; outline: none; -webkit-appearance: none; background-color: transparent;}
  /* 軌道樣式 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track {  background: rgba(255,255,255,0.6); height: 4px; border-radius: 2px;}
  /* 圓鈕樣式 (黃色+白色邊框) */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb {  -webkit-appearance: none;  height: 26px; width: 26px; border-radius: 50%;  background: #ffb800; /* 黃色核心 */ border: 4px solid #fff; /* 白色外圈 */ box-shadow: 0 2px 4px rgba(0,0,0,0.2);  margin-top: -11px; /* 置中對準軌道 */}
  /* --- 刻度與標註微調 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar {  width: 100%; height: 12px; margin: 0 auto; border-left: 1px #fff solid;   display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line {  width: calc(100% / 10); height: 12px; border-right: 1px #fff solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note {  width: 100%; margin: 10px 0 0 0; display: flex; justify-content: space-between; font-size: 1.5rem;}
  /* 下一步按鈕 */
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a {  width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center;  text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}


  .page-quick-analysis .main-col-full { width: 100%; padding: 15px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .title-infor-bar { width: 100%; margin: 0 0 25px 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-full .title-infor-bar .title-bar { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-full .choice-contain { width: 96%; margin: 0 auto; font-size: 2rem; line-height: 1.6em;}
  .page-quick-analysis .main-col-full .area-target-analysis { width: 96%; margin: 40px auto;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li { padding: 0; margin: 0 2px 2px 0; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a { padding: 3px 10px; color: #333; font-size: 2rem; text-decoration: none; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table { clear: both; width: 100%; position: relative;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table > div { display: none;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table a.more-btn { width: 200px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; position: absolute; top: -40px; right: 0; z-index: 9;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table table { clear: both; width: 100%; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt { clear: both; width: 96%; margin: 40px auto 0 auto; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-full .data-detail-box { clear: both; width: 100%; margin: 40px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf { width: 55%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf table { width: 100%; font-size: 2rem; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt { width: 45%; padding: 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf .title, 
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .title { width: 100%; padding: 0 0 40px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart { width: 100%; padding: 40px 10px 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart table.analysis-table { width: 100%; font-size: 2rem; border: 1px #333 solid;}

  .page-quick-analysis .main-col-full .health-risks-analysis { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 5px; color: #fff; font-size: 2rem; text-align: center; background-color: #2d4daa; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 5px; font-size: 2rem; text-align: center; background-color: #c1cef4; box-sizing: border-box;}

  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  .page-quick-analysis .main-col-rt .tool-bar { width: 100%; padding: 0 0 20px 0; text-align: right;}
  .page-quick-analysis .main-col-rt .tool-bar select { width: 200px; padding: 5px; color: #333; font-size: 2rem; border: 1px #333 solid; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button] { width: 100px; padding: 5px; margin: 0 0 0 10px; color: #fff; font-size: 2rem; border: 0; background-color: #333; box-sizing: border-box; cursor: pointer;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button]:hover { background-color: #595757;}
  
  /*.page-quick-analysis .main-col-rt ul.emission-zone-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li { padding: 0; margin: 0 10px 10px 0;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a { padding: 3px 5px; color: #333; font-size: 2rem; text-decoration: none; border: 1px #333 solid; border-radius: 8px; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose { width: 100%; padding: 10px 0 30px 0;}
  .page-quick-analysis .main-col-rt .emission-zone-choose > div { display: none;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full { width: 100%; padding: 0 0 20px 0; background-color: #eee;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x { width: calc(100% / 2); padding: 0 10px; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title { width: 100%; padding: 20px 0 10px 0; text-align: center;  font-size: 2rem}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title span { padding: 0 5px; color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x input[type=checkbox] { width: 20px; height: 20px;  font-size: 1.5rem}
*/
  /* 區域選擇 Checkbox 排列 */
  .page-quick-analysis .main-col-rt .region-checkbox-group { display: flex; gap: 25px; margin: 15px 0; padding-left: 5px;}
  /* 縣市按鈕群組樣式 */
  .page-quick-analysis .main-col-rt .btn-group { display: flex;flex-wrap: wrap; gap: 10px; margin: 15px 0;}
  .page-quick-analysis .main-col-rt .toggle-btn { border: 1px solid #ccc; border-radius: 20px; padding: 6px 18px; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 14px; outline: none;}
  .page-quick-analysis .main-col-rt .toggle-btn:hover { border-color: #888; background-color: #f9f9f9;}
  .page-quick-analysis .main-col-rt .toggle-btn.active { background-color: #333; color: #fff;  border-color: #333;}
  /* 灰色背景源別區塊：類別橫向排列 (同一行) */
  .page-quick-analysis .main-col-rt .source-grid { background-color: #f5f5f5; padding: 20px; display: grid; /* 四個類別平分寬度 */ grid-template-columns: repeat(4, 1fr);  gap: 20px; border-radius: 4px;}
  /* 預設隱藏全台的源別容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper.active {   display: block; }
  /* 預設隱藏所有空品區的源別容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper.active {  display: block;}
  /* 預設隱藏所有城市的源別容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper { display: none;}
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper.active {    display: block;}
  /* 類別內部的選項垂直排列 (往下長) */
  .page-quick-analysis .main-col-rt .source-col { display: flex;  flex-direction: column;  align-items: flex-start;}
  .page-quick-analysis .main-col-rt .source-column-header { background-color: #333; color: #fff; padding: 4px 10px;  display: inline-block;  margin-bottom: 12px;  font-size: 13px;  border-radius: 2px;}
  .page-quick-analysis .main-col-rt .checkbox-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; cursor: pointer;}
  .page-quick-analysis .main-col-rt .checkbox-item input { margin-right: 8px;}
  /* 底部動作列 */
  .page-quick-analysis .main-col-rt .footer-actions {  margin-top: 30px; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-btn { background-color: #555; color: #fff; border: none;  padding: 10px 35px; border-radius: 25px;  font-size: 16px; cursor: pointer; transition: background 0.3s;}
  .page-quick-analysis .main-col-rt .next-btn:hover {    background-color: #222; }
  /* 響應式調整：小螢幕時自動轉為垂直 */
  @media (max-width: 768px) { .page-quick-analysis .main-col-rt .source-grid {  grid-template-columns: 1fr; }}



  .page-quick-analysis .main-col-rt .choice-prev-next-bnt { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-lf .reduction-analysis-bx { width: 100%; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-b { font-size: 2.5rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-s { padding: 0 0 0 10px; font-size: 2rem; font-weight: 500;}
  /*.page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { width: 100%; padding: 0 0 0 30px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range .title { width: 100px;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=range] { width: 120px; outline: none; accent-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=number] { width: 50px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 1px #333 solid; background-color: #fff;}
  */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { display: flex !important; flex-direction: row; /* 橫向排列 */ flex-wrap: nowrap; /* 強制這三個區塊不換行 */ align-items: center; /* 垂直置中，當文字變多行時 Slider 依然在中間 */ width: 100%; margin-bottom: 20px; gap: 10px;}
  /* 1/4 區域：文字過長自動換行 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .title-col { flex: 1; /* 佔 1/4 */ line-height: 1.2; /* 設定行高，讓換行後的文字不會太擠 */ word-break: break-all; /* 確保長英文或符號也能斷行 */}
  /* 1/2 區域：滑桿 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .slider-col { flex: 2; /* 佔 1/2 */ display: flex; justify-content: center; min-width: 0; /* 防止 Flex 項目溢出 */}
  /* 1/4 區域：數字輸入 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .value-col { flex: 1; /* 佔 1/4 */ display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; /* 數字與 % 建議不要斷行 */}
  /* --- 滑桿質感樣式 (還原圖片) --- */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"] { -webkit-appearance: none; width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #9cc1d1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;}
  /* 數字框 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="number"] { width: 55px;  height: 28px; text-align: center; border: 1px solid #ccc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=submit], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=reset], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=button] { padding: 3px 30px; margin: 0 10px; color: #fff; font-size: 2rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}
  .page-quick-analysis .main-col-rt .rt-title-bar { width: 100%; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx { width: 100%; margin: 30px 0;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf { width: 100%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
/*  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .choice-text { width: 100%; font-size: 2rem; line-height: 1.8em;} */ 
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt { width: 100%; padding: 30px 20px 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .health-risks-analysis { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full { width: 100%;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx { width: 100%; padding: 0 0 30px 0;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf table { width: 100%; font-size: 2rem; text-align: center; border: 0;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf { width: 100%; margin: 30px 0 0 0; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 10px; color: #fff; font-size: 2rem; text-align: center; background-color: #e97132; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 10px; font-size: 2rem; text-align: center; background-color: #f6d5cd; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-3 { width: 100%; padding: 10px; font-size: 2rem; font-weight: 500; text-align: center; box-sizing: border-box;}
  /* 分析結果主容器 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-results-container { width: 100%; max-width: 1000px; /* 限制最大寬度，避免在大螢幕拉得太開 */ margin: 0 auto; /* 水平置中 */ display: flex; flex-direction: column; /* 垂直堆疊：圖在上，表在下 */ gap: 30px; /* 圖與表之間的間距 */}
  /* 圖表容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-placeholder { width: 100%; height: 300px; /* 預設高度 */ background-color: #f0f4f7; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center;  color: #718096;  border-radius: 4px;}
  /* 表格容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .table-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; overflow-x: auto; /* 手機版可橫向捲動 */}
  /* 專業表格樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; /* 確保內容不會太擠 */}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table th { background-color: #5d8ca3; /* 已調整為較深的藍色調 */ color: white; text-align: center; padding: 12px 15px; font-weight: bold;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #4a5568;  text-align: center;}
  /* 隔行變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:nth-child(even) { background-color: #f8fafc;}
  /* 滑過列變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:hover { background-color: #edf2f7;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .section-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #2d3748; border-left: 5px solid #5d8ca3; /* 標題邊條也同步加深顏色 */ padding-left: 10px;}
  
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  /************ pollution source analysis ************/

  .page-quick-analysis .main-col-full .source-analysis-pic { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .source-analysis-pic img { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
  
  .page-quick-analysis .main-col-full .source-analysis-table { width: 100%; margin: 30px 0 0 0;}
  /* 設定表格容器與邊框 */
.page-quick-analysis .main-col-full .source-analysis-table table { 
    width: 100%; 
    font-size: 2rem; 
    border: 1px #333 solid;
    border-collapse: collapse; /* 讓邊框合併，看起來比較專業 */
}

/* 關鍵修改：針對表格內的所有單元格設定置中 */
.page-quick-analysis .main-col-full .source-analysis-table table th,
.page-quick-analysis .main-col-full .source-analysis-table table td {
    padding: 15px;            /* 增加間距，讓 2rem 的大字不會擠在一起 */
    text-align: center;       /* 水平置中 */
    vertical-align: middle;   /* 垂直置中 */
    border: 1px #333 solid;   /* 確保內格也有邊框 */
}

/* 如果您希望表頭有底色區分 */
.page-quick-analysis .main-col-full .source-analysis-table table th {
    background-color: #f5f5f5;
    font-weight: 600;
}


  /************ observational data ************/

  .page-quick-analysis .main-col-rt .title-infor-bar-v2 { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .title { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  /* 讓圖表達到網頁等寬的關鍵設定 */
  /* 讓圖表對齊內容區塊寬度（與下方圖片右側對齊） */
  .page-quick-analysis .main-col-rt .ozone-chart {clear: both;width: 100%; /* 設定為 100% 以對齊父層容器邊界 */margin: 30px 0; /* 設定上下間距 */box-sizing: border-box;}
  /* 以下保留您原本的表格與區塊樣式設定 */
  .page-quick-analysis .main-col-rt .ozone-pic-table {width: 100%;margin: 30px 0;display: flex;justify-content: space-between;align-items: stretch;gap: 20px;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table {width: 50%;box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 2rem;color: #333;background: #ffffff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);border: 1px solid #eef2f3;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table th {background-color: #f8fafb;color: #595757;font-weight: 600;padding: 15px;text-align: center;border-bottom: 2px solid #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td {padding: 16px 15px;border-bottom: 1px solid #f0f0f0;text-align: center;transition: all 0.2s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:last-child td {border-bottom: none;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item {cursor: pointer;position: relative;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:hover td.value-item {background-color: #f0f9fb;color: #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item.active {background-color: #e9f5f8;color: #2791ad;font-weight: 700;box-shadow: inset 4px 0 0 #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic {width: 50%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img {width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img:hover {transform: scale(1.02);}


  /************ emissions list data ************/

  .page-quick-analysis .main-col-rt ul.emissions-list-tab { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li { width: calc(100% / 6); padding: 0; margin: 0;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a { width: 100%; height: 50px; color: #333; font-size: 2rem; font-weight: 500; text-decoration: none; border-bottom: 4px #eee solid; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a:hover { background-color: #eee; border-bottom: 4px #ccc solid;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a.sel { color: #2d4daa; border-bottom: 4px #2d4daa solid; background-color: #eee;}

  .page-quick-analysis .main-col-rt .emissions-list-detail { width: 100%;}
  .page-quick-analysis .main-col-rt .emissions-list-detail > div { padding: 40px 0; display: none;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .title { width: 100%; padding: 0 0 0 10px; color: #2d4daa; font-size: 2rem; font-weight: 600; border-left: 4px #2d4daa solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box .text { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .emissions-list-detail table { clear: both; width: calc(100% - 20px); margin: 30px auto 0 auto; font-size: 2rem; border: 0; text-align: center;}


  /************ privacy policy ************/

  .page-quick-analysis .main-col-full .privcy-content { width: 100%; padding: 0 0 30px 0; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-full .privcy-content a { color: #333; text-decoration: none; border-bottom: 1px #333 solid;}


}

@media screen and (min-width: 768px) and (max-width: 1280px) {

  /************ header + nav ************/

  header { clear: both; width: 100%; padding: 30px 20px 20px 20px; box-sizing: border-box; position: relative;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 2rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; display: block;}
  .header-nav-social .site-title a img { width: 100%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 200px);}
  nav#mo .nav-icon { width: 50px; font-size: 3.5rem; text-align: center; cursor: pointer; float: right;}
  nav#mo .nav-menu-search-social { width: calc(100% - 40px); padding: 40px; box-sizing: border-box; border-radius: 15px; background-color: #ccc; display: none; position: absolute; top: 150px; left: 20px; z-index: 999;}  
  nav#mo .nav-menu-search-social ul.nav-menu { width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: block;}
  nav#mo .nav-menu-search-social ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li:first-child { border-top: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li a { width: 100%; padding: 15px 10px; color: #333; font-size: 2rem; font-weight: 600; text-align: center; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  nav#mo .nav-menu-search-social ul.nav-menu li a:active { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup { width: 100%; padding: 0; margin: 0 0 10px 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.6); display: none;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-156 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-180 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0; border: 0;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 15px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block; box-sizing: border-box;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a:active { width: 100%; background-color: rgba(255,255,255,0.2);}

  .search-social-bar { width: 100%; display: flex; justify-content: center; align-items: center;}

  .header-search { display: none;}
  .header-search-mo { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search-mo img.search-icon { width: 20px; height: auto;}
  .header-search-mo input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 2rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons { display: none;}
  .header-social-icons-mo { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .header-social-icons-mo a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons-mo a.icon img { width: 100%; height: auto;}

  .header-mem-nav { width: 100%; display: none;}
  .header-mem-nav .triangle { display: none;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 15px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; display: block;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-banner ************/

  section#hp-sec-banner { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}

  .hp-banner-box { width: 100%; position: relative;}
  .hp-banner-box img.hp-banner-mo { display: none;}
  .hp-banner-box img.hp-banner { width: 100%; position: relative; z-index: 1;}
  .hp-banner-box .banner-text-btn { width: 580px; color: #fff; font-size: 2.5vw; font-weight: 500; line-height: 1.4em; letter-spacing: 0.1em; position: absolute; top: 35vw; left: 2vw; z-index: 2;}
  .hp-banner-box .banner-text-btn a.join-btn { width: 10vw; padding: 8px 0; margin: 1.4vw 0 0 0; color: #fff; font-size: 2.5vw; font-weight: 500; line-height: 1em; letter-spacing: 0.1em; text-align: center; text-decoration: none; border: 1px #fff solid; border-radius: 10px; display: block; cursor: pointer;}
  .hp-banner-box .banner-text-btn a.join-btn:hover { background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-main ************/

  section#hp-sec-main { clear: both; width: 100%; padding: 65px 20px 40px 20px; box-sizing: border-box;}

  .page-hp-sec-main { width: 100%;}
  
  .page-hp-sec-main .main-col-lf { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-lf .main-con { width: calc(100% - 350px);}
  .page-hp-sec-main .main-col-lf .main-con .page-title { width: 100%; padding: 0 0 10px 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em; border-bottom: 1px #595757 solid;}
  .page-hp-sec-main .main-col-lf .main-con .page-title-sub { width: 100%; padding: 5px 0 0 0; font-size: 2rem; font-weight: 500;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar { width: 100%; padding: 40px 0; font-size: 2rem; line-height: 2em;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index { width: 100%;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index > div { display: none;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .position-title { width: 316px; height: 29px; padding: 5px 0; margin: 0 auto; font-size: 2rem; font-weight: 500; text-align: center; line-height: 1em; background-image: url("../images/air_quality_index_position_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .exponential-curve-box { width: 100%; padding: 10px; margin: 20px 0 0 0; border: 1px #333 solid; border-radius: 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .tw-map { width: 350px; margin: 0 0 0 40px;}
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_1, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_2, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_3, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_4, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_5, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_6, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_7 { width: 310px; height: auto; display: none;}
  
  .page-hp-sec-main .main-col-rt { width: 100%; margin: 40px 0 0 0;}
  .page-hp-sec-main .main-col-rt .page-title-mo { display: none;}
  .page-hp-sec-main .main-col-rt .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-main .main-col-rt .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-main .main-col-rt .page-title span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-main .main-col-rt .news-list-box { width: 100%; margin: 0 0 25px 0;}
  .page-hp-sec-main .main-col-rt .news-list-box a { width: 100%; padding: 15px; color: #333; text-decoration: none; box-sizing: border-box; border-radius: 10px; background-color: #a9b3c2; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-rt .news-list-box a:hover { background-color: #c5ceda;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic { width: 118px; border-radius: 10px; background-color: #ebebee; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic img { width: 100%; height: auto;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro { width: calc(100% - 118px); padding: 0 0 0 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .title { width: 100%; padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .text { width: 100%; font-size: 2rem; line-height: 1.6em;}


  /************ section #hp-sec-achievements ************/

  section#hp-sec-achievements { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box;}

  .page-hp-sec-achi { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  .page-hp-sec-achi .page-title-mo { display: none;}
  .page-hp-sec-achi .page-title { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .page-title span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-achi .page-title span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-achi .achievements-show { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .achievements-show .view-achi-box { width: 100%;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box { width: 270px; height: 354px; margin: 0 auto; border-radius: 15px; background-color: #a9b3c2; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; display: block;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box img { width: 100%; height: auto;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn { width: 160px; margin: 0 40px;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a { width: 100%; padding: 3px 0; color: #fff; font-size: 2rem; text-align: center; letter-spacing: 0.1em; text-decoration: none; border-radius: 20px; background-color: #595757; display: block;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a:hover { background-color: #6d6d6d;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow img { width: 40px; height: auto; margin: 0 10px; cursor: pointer;}


  /************ site map ************/

  ul#sitemap { clear: both; width: 100%; padding: 0 40px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul#sitemap li { width: 200px; padding: 0; margin: 0 20px 40px 20px;}
  ul#sitemap li a { width: 100%; padding: 6px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center; text-decoration: none; border-bottom: 4px #8ebfcc solid; display: block;}
  ul#sitemap li a:hover { color: #2791ad;}
  ul#sitemap li ul.popup { width: 100%; padding: 10px 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.popup li { width: 100%; padding: 0; margin: 0;}
  ul#sitemap li ul.popup li a { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 400; text-align: center; text-decoration: none; border: 0 !important; display: block;}
  ul#sitemap li ul.popup li a:hover { color: #2791ad;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px 20px; background-color: #8ebfcc; box-sizing: border-box;}

  .footer-menu { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .footer-menu a.menu-btn { width: 175px; height: 28px; margin: 0 30px 0 0; color: #333; font-size: 2rem; letter-spacing: 0.1em; line-height: 1em; text-decoration: none; display: flex; justify-content: center; align-items: center; background-image: url("../images/footer_menu_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-size: center center;}
  .footer-menu a.menu-btn:hover { font-weight: 500;}

  .footer-contain { clear: both; width: 100%; padding: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .footer-contain .footer-col-lf { width: calc(100% - 400px);}
  .footer-contain .footer-col-lf .footer-logo { width: 240px;}
  .footer-contain .footer-col-lf .footer-logo img { width: 100%; height: auto;}
  .footer-contain .footer-col-lf .copyright { width: 100%; padding: 25px 0 0 0; color: #fff; font-size: 2rem;}
  .footer-contain .footer-col-rt-mo { display: none;}
  .footer-contain .footer-col-rt { width: 400px; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .footer-contain .footer-col-rt .logo-title { width: 200px;}
  .footer-contain .footer-col-rt .logo-title a { width: 100%; display: block;}
  .footer-contain .footer-col-rt .logo-title a img { width: 100%; height: auto;}
  .footer-contain .footer-col-rt .footer-infor { width: 100%; padding: 15px 0 0 0; font-size: 2em; line-height: 2em; text-align: right;}


}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; min-height: 100%; background-color: #b19466; background-image: url("../images/login_bg.jpg"); background-repeat: no-repeat; background-size: 160% auto; background-position: center top; display: block;}

  .login-me-logo { width: 300px; padding: 30px 0 0 40px;}
  .login-me-logo img { width: 100%; height: auto;}

  .login-title-form { width: 94%; padding: 30vw 0 2vw 0; margin: 0 auto; box-sizing: border-box;}
  .login-title-form img.title { width: 300px; margin: 80px auto 40px auto;}
  /* 左側圖片容器 */
  .login-title-form .login-left-img {width: 400px; /* 配合您右側剩餘空間 */ margin: 0 auto 40px auto; /* 關鍵：左右 auto 會讓區塊水平置中 */ display: flex;justify-content: center; /* 水平置中 */align-items: center; /* 垂直置中 */align-self: stretch; /* 讓容器高度跟隨父層，確保內部的 center 有效 */}
  .login-title-form .login-left-img img {max-width: 100%; height: auto;/* 如果圖片還是偏上，可以強制給它一個垂直置中 */ display: block;}
  .login-title-form .login-form-box { width: 100%; padding: 40px; box-sizing: border-box; border-radius: 20px; background-color: rgba(255,255,255,0.78); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .login-title-form .login-form-box .form-box { width: 500px; font-size: 2.5rem; font-weight: 500; text-align: center; /* 新增以下這行，數值可依需求調整 (例如 60px 或 80px) */padding-top: 60px;}
  .login-title-form .login-form-box .form-box input[type=text], 
  .login-title-form .login-form-box .form-box input[type=password] { width: 400px; padding: 18px 30px; color: #333; font-size: 2.5rem; border: 0; outline: none; background-image: url("../images/login_input_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; background-color: transparent; box-sizing: border-box;}
  .login-title-form .login-form-box .form-box .title-forget-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .login-title-form .login-form-box .form-box .title-forget-btn img.title { width: 300px; margin: 0 40px 0 0;}
  .login-title-form .login-form-box .form-box .title-forget-btn input[type=button].forget-btn { width: 200px; height: 100px; border: 0; background-color: transparent; background-image: url("../images/forget_btn.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}
  .login-title-form .login-form-box .form-submit { width: calc(100% - 600px); margin: 0 0 100px 0;}
  .login-title-form .login-form-box .form-submit input[type=button], 
  .login-title-form .login-form-box .form-submit input[type=submit] { width: 133px; height: 80px; border: 0; background-color: transparent; background-image: url("../images/login_submit.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}

  .login-copyright { clear: both; width: 100%; padding: 40px 50px; box-sizing: border-box; color: #fff; font-size: 2rem; text-align: right;}


  /************ section #quick-analysis ************/

  .page-bottom-bar { clear: both; width: 100%; padding: 0 20px 50px 20px; margin: -30px 0 0 0; font-size: 2rem; text-align: right; box-sizing: border-box;}


  section#quick-analysis { clear: both; width: 100%; padding: 0 20px 50px 20px; box-sizing: border-box;}

  .page-quick-analysis { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  
  .page-quick-analysis .main-col-lf { width: 100%; padding: 15px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-lf .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-lf .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-lf .target_value { width: 135px; height: 34px; color: #f29600; font-size: 2.5rem; font-weight: 900; text-align: center; line-height: 1em; background-image: url("../images/quick_analysis_points_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box { width: 90%; padding: 15px 20px; margin: 40px auto; color: #fff; border-radius: 15px; box-sizing: border-box;}
  /* 修正：針對該區塊內的 input 元素設定 placeholder */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::placeholder {font-size: 1.5rem;}
  /* 為了相容所有瀏覽器，建議寫法如下 */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-webkit-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input:-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.point { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.line { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.area { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 15px 3px 5px;  color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}*/
    /* 2. 必須清除原生外觀 - 這是關鍵 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] {
        -webkit-appearance: none; /* Chrome, Safari, Edge */
        width: 100%;
        background: transparent;
        margin: 15px 0;
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}*/
    /* 1. 針對 Chrome, Edge, Safari 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb {
        /* 使用放射狀漸層：中心點 35% 是黃色，40% 開始變白色，達成硬邊點點效果 */
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px; /* 稍微加寬一點點點，讓點點更明顯 */
        height: 18px;
        border-radius: 50%;
        -webkit-appearance: none;
        margin-top: -5px; /* 計算公式：(軌道高度8px / 2) - (圈圈高度18px / 2) = -5px */
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 加上微陰影讓圈圈更有立體感 */
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}*/
    /* 2. 針對 Firefox 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb {
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}

  /*.page-quick-analysis .main-col-rt { width: 100%; padding: 15px 40px; margin: 30px 0 0 0; border-radius: 15px; background-color: #fff; box-sizing: border-box;}*/
  .page-quick-analysis .main-col-rt {
    /* 強制填滿左側 480px 之後的所有空間 */
    flex: 1; 
    /* 防止內部內容（如 Canvas 或大圖）反向撐開導致版面混亂 */
    min-width: 0; 
    
    padding: 15px 40px;
    border-radius: 15px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
  .page-quick-analysis .main-col-rt .title-infor-bar { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar .title { width: calc(100% - 44px);}
  .page-quick-analysis .main-col-rt .title-infor-bar .title span { padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .concentration-curve { width: 100%; margin: 40px 0 60px 0;}
  .page-quick-analysis .main-col-rt .concentration-curve .notice { width: 100%; color: #6d6d6d; font-size: 2rem; text-align: right;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box { width: 50%;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box img.icon { width: 128px; height: auto; margin: 0 auto; cursor: pointer;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value { width: 100%; padding: 20px 0 0 0; font-size: 2rem; text-align: center; letter-spacing: 0.1em;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value span.num { color: #f29600; font-size: 3rem; font-weight: 900;}


  /************ concentration target analysis ************/

  .page-quick-analysis .main-col-lf .text-info { width: 100%; padding: 10px 20px 20px 20px; font-size: 2rem; line-height: 1.6em; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box { width: 100%; padding: 15px 20px; margin: 20px 0; font-size: 2rem; line-height: 1.8em; border-radius: 15px; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box.step1 { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .step-box.step2 { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .step-box.step3 { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .step-box.step4 { background-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .step-box .title { width: 100%; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.8em; text-align: center;}

/*  .page-quick-analysis .main-col-rt .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box { width: 100%; padding: 15px 20px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a { width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
*/
  /* 污染物、年份、區域選擇標題與間距 */
  .page-quick-analysis .main-col-rt .page-title-sub {  width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar {  width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] {  width: 20px; height: 20px; vertical-align: middle;}
  /* --- 區域選擇：垂直對齊優化 --- */
  .page-quick-analysis .main-col-rt .choice-bar div[style*="flex-wrap:wrap"] {  display: grid; grid-template-columns: repeat(3, 1fr); /* 強制改為三欄對齊 */ gap: 15px 10px; margin-top: 20px !important;}
  .page-quick-analysis .main-col-rt .choice-bar div span { display: flex; align-items: center; font-size: 2rem;}
  /* --- 濃度目標容器 (灰藍色背景盒) --- */
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box {  width: 100%; padding: 25px 30px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  /* 標題與輸入框容器 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input {  width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 1.5rem; font-weight: 500;}
  /* --- 數字框：箭頭內移與背景樣式 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] {  width: 110px; height: 34px; padding: 3px 15px 3px 5px; /* 增加右邊距給箭頭 */ color: #333; font-size: 1.5rem; text-align: center; border: 0; outline: none;   border-radius: 20px; background-color: #fff; /* 改為白色背景符合圖片 */  box-sizing: border-box; -moz-appearance: textfield;}
  /* Chrome/Safari 專屬：讓箭頭往內縮 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number]::-webkit-inner-spin-button { margin-right: 3px; height: 20px;  cursor: pointer;}
  /* --- 滑桿美化：黃色核心 + 白色外圈 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] {  width: 100%; margin: 20px 0 5px 0; outline: none; -webkit-appearance: none; background-color: transparent;}
  /* 軌道樣式 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track {  background: rgba(255,255,255,0.6); height: 4px; border-radius: 2px;}
  /* 圓鈕樣式 (黃色+白色邊框) */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb {  -webkit-appearance: none;  height: 26px; width: 26px; border-radius: 50%;  background: #ffb800; /* 黃色核心 */ border: 4px solid #fff; /* 白色外圈 */ box-shadow: 0 2px 4px rgba(0,0,0,0.2);  margin-top: -11px; /* 置中對準軌道 */}
  /* --- 刻度與標註微調 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar {  width: 100%; height: 12px; margin: 0 auto; border-left: 1px #fff solid;   display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line {  width: calc(100% / 10); height: 12px; border-right: 1px #fff solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note {  width: 100%; margin: 10px 0 0 0; display: flex; justify-content: space-between; font-size: 1.5rem;}
  /* 下一步按鈕 */
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a {  width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center;  text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}


  .page-quick-analysis .main-col-full { width: 100%; padding: 15px 20px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .title-infor-bar { width: 100%; margin: 0 0 25px 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-full .title-infor-bar .title-bar { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-full .choice-contain { width: 96%; margin: 0 auto; font-size: 2rem; line-height: 1.6em;}
  .page-quick-analysis .main-col-full .area-target-analysis { width: 96%; margin: 40px auto;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li { padding: 0; margin: 0 2px 2px 0; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a { padding: 3px 10px; color: #333; font-size: 2rem; text-decoration: none; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table { clear: both; width: 100%; position: relative;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table > div { display: none;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table a.more-btn { width: 200px; margin: 20px 0; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table table { clear: both; width: 100%; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt { clear: both; width: 96%; margin: 40px auto 0 auto; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-full .data-detail-box { clear: both; width: 100%; margin: 40px 0;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf table { width: 100%; font-size: 2rem; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt { width: 100%; padding: 40px 10px 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf .title, 
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .title { width: 100%; padding: 0 0 40px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart { width: 100%; padding: 40px 10px 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart table.analysis-table { width: 100%; font-size: 2rem; border: 1px #333 solid;}

  .page-quick-analysis .main-col-full .health-risks-analysis { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 5px; color: #fff; font-size: 2rem; text-align: center; background-color: #2d4daa; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 5px; font-size: 2rem; text-align: center; background-color: #c1cef4; box-sizing: border-box;}

  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  .page-quick-analysis .main-col-rt .tool-bar { width: 100%; padding: 0 0 20px 0; text-align: right;}
  .page-quick-analysis .main-col-rt .tool-bar select { width: 200px; padding: 5px; color: #333; font-size: 2rem; border: 1px #333 solid; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button] { width: 100px; padding: 5px; margin: 0 0 0 10px; color: #fff; font-size: 2rem; border: 0; background-color: #333; box-sizing: border-box; cursor: pointer;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button]:hover { background-color: #595757;}
  
  /*.page-quick-analysis .main-col-rt ul.emission-zone-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li { padding: 0; margin: 0 10px 10px 0;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a { padding: 3px 5px; color: #333; font-size: 2rem; text-decoration: none; border: 1px #333 solid; border-radius: 8px; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose { width: 100%; padding: 10px 0 30px 0;}
  .page-quick-analysis .main-col-rt .emission-zone-choose > div { display: none;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full { width: 100%; padding: 20px 0; background-color: #eee;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x { width: calc(100% / 4); padding: 0 10px; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title { width: 100%; padding: 0 0 10px 0; text-align: center;  font-size: 2rem}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title span { padding: 0 5px; color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x input[type=checkbox] { width: 20px; height: 20px;  font-size: 1.5rem}
*/
  /* 區域選擇 Checkbox 排列 */
  .page-quick-analysis .main-col-rt .region-checkbox-group { display: flex; gap: 25px; margin: 15px 0; padding-left: 5px;}
  /* 縣市按鈕群組樣式 */
  .page-quick-analysis .main-col-rt .btn-group { display: flex;flex-wrap: wrap; gap: 10px; margin: 15px 0;}
  .page-quick-analysis .main-col-rt .toggle-btn { border: 1px solid #ccc; border-radius: 20px; padding: 6px 18px; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 14px; outline: none;}
  .page-quick-analysis .main-col-rt .toggle-btn:hover { border-color: #888; background-color: #f9f9f9;}
  .page-quick-analysis .main-col-rt .toggle-btn.active { background-color: #333; color: #fff;  border-color: #333;}
  /* 灰色背景源別區塊：類別橫向排列 (同一行) */
  .page-quick-analysis .main-col-rt .source-grid { background-color: #f5f5f5; padding: 20px; display: grid; /* 四個類別平分寬度 */ grid-template-columns: repeat(4, 1fr);  gap: 20px; border-radius: 4px;}
  /* 預設隱藏全台的源別容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper.active {   display: block; }
  /* 預設隱藏所有空品區的源別容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper.active {  display: block;}
  /* 預設隱藏所有城市的源別容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper { display: none;}
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper.active {    display: block;}
  /* 類別內部的選項垂直排列 (往下長) */
  .page-quick-analysis .main-col-rt .source-col { display: flex;  flex-direction: column;  align-items: flex-start;}
  .page-quick-analysis .main-col-rt .source-column-header { background-color: #333; color: #fff; padding: 4px 10px;  display: inline-block;  margin-bottom: 12px;  font-size: 13px;  border-radius: 2px;}
  .page-quick-analysis .main-col-rt .checkbox-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; cursor: pointer;}
  .page-quick-analysis .main-col-rt .checkbox-item input { margin-right: 8px;}
  /* 底部動作列 */
  .page-quick-analysis .main-col-rt .footer-actions {  margin-top: 30px; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-btn { background-color: #555; color: #fff; border: none;  padding: 10px 35px; border-radius: 25px;  font-size: 16px; cursor: pointer; transition: background 0.3s;}
  .page-quick-analysis .main-col-rt .next-btn:hover {    background-color: #222; }
  /* 響應式調整：小螢幕時自動轉為垂直 */
  @media (max-width: 768px) { .page-quick-analysis .main-col-rt .source-grid {  grid-template-columns: 1fr; }}



  .page-quick-analysis .main-col-rt .choice-prev-next-bnt { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check { font-size: 2.1rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2.1rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-lf .reduction-analysis-bx { width: 100%; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-b { font-size: 2.5rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-s { padding: 0 0 0 10px; font-size: 2rem; font-weight: 500;}
  /*.page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { width: 100%; padding: 0 0 0 30px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range .title { width: 100px;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=range] { width: 160px; outline: none; accent-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=number] { width: 50px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 1px #333 solid; background-color: #fff;}
  */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { display: flex !important; flex-direction: row; /* 橫向排列 */ flex-wrap: nowrap; /* 強制這三個區塊不換行 */ align-items: center; /* 垂直置中，當文字變多行時 Slider 依然在中間 */ width: 100%; margin-bottom: 20px; gap: 10px;}
  /* 1/4 區域：文字過長自動換行 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .title-col { flex: 1; /* 佔 1/4 */ line-height: 1.2; /* 設定行高，讓換行後的文字不會太擠 */ word-break: break-all; /* 確保長英文或符號也能斷行 */}
  /* 1/2 區域：滑桿 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .slider-col { flex: 2; /* 佔 1/2 */ display: flex; justify-content: center; min-width: 0; /* 防止 Flex 項目溢出 */}
  /* 1/4 區域：數字輸入 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .value-col { flex: 1; /* 佔 1/4 */ display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; /* 數字與 % 建議不要斷行 */}
  /* --- 滑桿質感樣式 (還原圖片) --- */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"] { -webkit-appearance: none; width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #9cc1d1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;}
  /* 數字框 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="number"] { width: 55px;  height: 28px; text-align: center; border: 1px solid #ccc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=submit], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=reset], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=button] { padding: 3px 30px; margin: 0 10px; color: #fff; font-size: 2rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}
  .page-quick-analysis .main-col-rt .rt-title-bar { width: 100%; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
/*  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .choice-text { width: 100%; font-size: 2rem; line-height: 1.8em;}  */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt { width: 50%; padding: 0 20px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt img.pic { width: 90%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .health-risks-analysis { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full { width: 100%;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col { width: 50%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf table { width: 100%; font-size: 2rem; text-align: center; border: 0;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf { width: 50%; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 10px; color: #fff; font-size: 2rem; text-align: center; background-color: #e97132; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 10px; font-size: 2rem; text-align: center; background-color: #f6d5cd; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-3 { width: 100%; padding: 10px; font-size: 2rem; font-weight: 500; text-align: center; box-sizing: border-box;}
  /* 分析結果主容器 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-results-container { width: 100%; max-width: 1000px; /* 限制最大寬度，避免在大螢幕拉得太開 */ margin: 0 auto; /* 水平置中 */ display: flex; flex-direction: column; /* 垂直堆疊：圖在上，表在下 */ gap: 30px; /* 圖與表之間的間距 */}
  /* 圖表容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-placeholder { width: 100%; height: 300px; /* 預設高度 */ background-color: #f0f4f7; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center;  color: #718096;  border-radius: 4px;}
  /* 表格容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .table-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; overflow-x: auto; /* 手機版可橫向捲動 */}
  /* 專業表格樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; /* 確保內容不會太擠 */}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table th { background-color: #5d8ca3; /* 已調整為較深的藍色調 */ color: white; text-align: center; padding: 12px 15px; font-weight: bold;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #4a5568;  text-align: center;}
  /* 隔行變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:nth-child(even) { background-color: #f8fafc;}
  /* 滑過列變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:hover { background-color: #edf2f7;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .section-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #2d3748; border-left: 5px solid #5d8ca3; /* 標題邊條也同步加深顏色 */ padding-left: 10px;}
  
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  /************ pollution source analysis ************/

  .page-quick-analysis .main-col-full .source-analysis-pic { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .source-analysis-pic img { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
  
  .page-quick-analysis .main-col-full .source-analysis-table { width: 100%; margin: 30px 0 0 0;}
  /* 設定表格容器與邊框 */
.page-quick-analysis .main-col-full .source-analysis-table table { 
    width: 100%; 
    font-size: 2rem; 
    border: 1px #333 solid;
    border-collapse: collapse; /* 讓邊框合併，看起來比較專業 */
}

/* 關鍵修改：針對表格內的所有單元格設定置中 */
.page-quick-analysis .main-col-full .source-analysis-table table th,
.page-quick-analysis .main-col-full .source-analysis-table table td {
    padding: 15px;            /* 增加間距，讓 2rem 的大字不會擠在一起 */
    text-align: center;       /* 水平置中 */
    vertical-align: middle;   /* 垂直置中 */
    border: 1px #333 solid;   /* 確保內格也有邊框 */
}

/* 如果您希望表頭有底色區分 */
.page-quick-analysis .main-col-full .source-analysis-table table th {
    background-color: #f5f5f5;
    font-weight: 600;
}


  /************ observational data ************/

  .page-quick-analysis .main-col-rt .title-infor-bar-v2 { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .title { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  /* 讓圖表達到網頁等寬的關鍵設定 */
  /* 讓圖表對齊內容區塊寬度（與下方圖片右側對齊） */
  .page-quick-analysis .main-col-rt .ozone-chart {clear: both;width: 100%; /* 設定為 100% 以對齊父層容器邊界 */margin: 30px 0; /* 設定上下間距 */box-sizing: border-box;}
  /* 以下保留您原本的表格與區塊樣式設定 */
  .page-quick-analysis .main-col-rt .ozone-pic-table {width: 100%;margin: 30px 0;display: flex;justify-content: space-between;align-items: stretch;gap: 20px;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table {width: 50%;box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 2rem;color: #333;background: #ffffff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);border: 1px solid #eef2f3;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table th {background-color: #f8fafb;color: #595757;font-weight: 600;padding: 15px;text-align: center;border-bottom: 2px solid #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td {padding: 16px 15px;border-bottom: 1px solid #f0f0f0;text-align: center;transition: all 0.2s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:last-child td {border-bottom: none;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item {cursor: pointer;position: relative;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:hover td.value-item {background-color: #f0f9fb;color: #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item.active {background-color: #e9f5f8;color: #2791ad;font-weight: 700;box-shadow: inset 4px 0 0 #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic {width: 50%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img {width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img:hover {transform: scale(1.02);}


  /************ emissions list data ************/

  .page-quick-analysis .main-col-rt ul.emissions-list-tab { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li { width: calc(100% / 6); padding: 0; margin: 0;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a { width: 100%; height: 50px; color: #333; font-size: 2rem; font-weight: 500; text-decoration: none; border-bottom: 4px #eee solid; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a:hover { background-color: #eee; border-bottom: 4px #ccc solid;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a.sel { color: #2d4daa; border-bottom: 4px #2d4daa solid; background-color: #eee;}

  .page-quick-analysis .main-col-rt .emissions-list-detail { width: 100%;}
  .page-quick-analysis .main-col-rt .emissions-list-detail > div { padding: 40px 0; display: none;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .title { width: 100%; padding: 0 0 0 10px; color: #2d4daa; font-size: 2rem; font-weight: 600; border-left: 4px #2d4daa solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box { width: calc(100% / 3 - 20px); margin: 0 10px; border: 1px #ccc solid; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box .text { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .emissions-list-detail table { clear: both; width: calc(100% - 20px); margin: 30px auto 0 auto; font-size: 2rem; border: 0; text-align: center;}


  /************ privacy policy ************/

  .page-quick-analysis .main-col-full .privcy-content { width: 100%; padding: 0 0 30px 0; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-full .privcy-content a { color: #333; text-decoration: none; border-bottom: 1px #333 solid;}


}

@media screen and (max-width: 768px) {

  /************ section #page-login ************/

  section#page-login { clear: both; width: 100%; min-height: 100%; background-color: #b19466; background-image: url("../images/login_bg_mo.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; display: block;}

  .login-me-logo { width: 200px; padding: 30px 0 0 40px;}
  .login-me-logo img { width: 100%; height: auto;}

  .login-title-form { width: 94%; padding: 36vw 0 2vw 0; margin: 0 auto; box-sizing: border-box;}
  .login-title-form img.title { width: 300px; margin: 80px auto 40px auto;}
  /* 左側圖片容器 */
  .login-title-form .login-left-img {width: 400px; /* 配合您右側剩餘空間 */ margin: 0 auto 40px auto; /* 關鍵：左右 auto 會讓區塊水平置中 */ display: flex;justify-content: center; /* 水平置中 */align-items: center; /* 垂直置中 */align-self: stretch; /* 讓容器高度跟隨父層，確保內部的 center 有效 */}
  .login-title-form .login-left-img img {max-width: 100%; height: auto;/* 如果圖片還是偏上，可以強制給它一個垂直置中 */ display: block;}
  .login-title-form .login-form-box { width: 100%; padding: 40px 20px; box-sizing: border-box; border-radius: 20px; background-color: rgba(255,255,255,0.78);}
  .login-title-form .login-form-box .form-box { width: 100%; font-size: 2.5rem; font-weight: 500; line-height: 1em; text-align: center; /* 新增以下這行，數值可依需求調整 (例如 60px 或 80px) */padding-top: 60px;}
  .login-title-form .login-form-box .form-box input[type=text], 
  .login-title-form .login-form-box .form-box input[type=password] { width: 240px; padding: 18px 30px; color: #333; font-size: 2.5rem; border: 0; outline: none; background-image: url("../images/login_input_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; background-color: transparent; box-sizing: border-box;}
  .login-title-form .login-form-box .form-box .title-forget-btn { width: 100%; margin: 40px 0 0 0;}
  .login-title-form .login-form-box .form-box .title-forget-btn img.title { width: 300px; margin: 40px auto;}
  .login-title-form .login-form-box .form-box .title-forget-btn input[type=button].forget-btn { width: 200px; height: 100px; border: 0; background-color: transparent; background-image: url("../images/forget_btn.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}
  .login-title-form .login-form-box .form-submit { width: 100%; margin: 40px 0 0 0; text-align: center;}
  .login-title-form .login-form-box .form-submit input[type=button], 
  .login-title-form .login-form-box .form-submit input[type=submit] { width: 133px; height: 80px; border: 0; background-color: transparent; background-image: url("../images/login_submit.png"); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; cursor: pointer;}

  .login-copyright { clear: both; width: 100%; padding: 40px 50px; box-sizing: border-box; color: #fff; font-size: 2rem; text-align: center;}


  /************ header + nav ************/

  header { clear: both; width: 100%; padding: 30px 10px 20px 10px; box-sizing: border-box;}

  .header-hello { width: 100%; padding: 0 0 35px 0; font-size: 2rem; text-align: right;}

  .header-nav-social { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .header-nav-social .site-title { width: 200px;}
  .header-nav-social .site-title a { width: 100%; display: block;}
  .header-nav-social .site-title a img { width: 100%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 200px);}
  nav#mo .nav-icon { width: 50px; font-size: 3.5rem; text-align: center; cursor: pointer; float: right;}
  nav#mo .nav-menu-search-social { width: calc(100% - 20px); padding: 40px 10px; box-sizing: border-box; border-radius: 15px; background-color: #ccc; display: none; position: absolute; top: 150px; left: 10px; z-index: 999;}  
  nav#mo .nav-menu-search-social ul.nav-menu { width: 100%; padding: 0; margin: 0 0 40px 0; list-style: none; display: block;}
  nav#mo .nav-menu-search-social ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li:first-child { border-top: 1px #fff solid;}
  nav#mo .nav-menu-search-social ul.nav-menu li a { width: 100%; padding: 15px 10px; color: #333; font-size: 2rem; font-weight: 600; text-align: center; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  nav#mo .nav-menu-search-social ul.nav-menu li a:active { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li a.sel { color: #fff; border-radius: 8px; background-color: #6d6d6d;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup { width: 100%; padding: 0; margin: 0 0 10px 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.6); display: none;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-156 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup.w-180 { width: 100%;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li { width: 100%; padding: 0; margin: 0; border: 0;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a { width: 100%; padding: 15px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; border-radius: 0; background-color: transparent; display: block; box-sizing: border-box;}
  nav#mo .nav-menu-search-social ul.nav-menu li ul.menu-popup li a:active { width: 100%; background-color: rgba(255,255,255,0.2);}

  .search-social-bar { width: 100%; display: flex; justify-content: center; align-items: center;}

  .header-search { display: none;}
  .header-search-mo { width: 150px; height: 36px; padding: 0 10px; background-color: #f6f6f6; border-radius: 30px; border: 1px #c4c6c8 solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-search-mo img.search-icon { width: 20px; height: auto;}
  .header-search-mo input[type=search] { width: calc(100% - 20px); height: 100%; padding: 0 0 0 5px; color: #333; font-size: 2rem; border: 0; outline: none; background-color: transparent; box-sizing: border-box;}

  .header-social-icons { display: none;}
  .header-social-icons-mo { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .header-social-icons-mo a.icon { width: 25px; margin: 0 0 0 15px; display: block;}
  .header-social-icons-mo a.icon img { width: 100%; height: auto;}

  .header-mem-nav { width: 100%; display: none;}
  .header-mem-nav .triangle { display: none;}
  .header-mem-nav ul { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; border-radius: 15px; background-color: rgba(89,87,87,0.8); display: block;}
  .header-mem-nav ul li { width: 100%; padding: 0; margin: 0;}
  .header-mem-nav ul li a { width: 100%; padding: 15px 0; color: #fff; font-size: 2rem; text-align: center; text-decoration: none; display: block;}
  .header-mem-nav ul li a:hover { width: 100%; background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-banner ************/

  section#hp-sec-banner { clear: both; width: 100%; padding: 0 10px; box-sizing: border-box;}

  .hp-banner-box { width: 100%; position: relative;}
  .hp-banner-box img.hp-banner { display: none;}
  .hp-banner-box img.hp-banner-mo { width: 100%; border-radius: 15px; position: relative; z-index: 1;}
  .hp-banner-box .banner-text-btn { width: 100%; padding: 0 20px; color: #fff; font-size: 4vw; font-weight: 500; line-height: 1.4em; letter-spacing: 0.1em; position: absolute; top: 55vw; z-index: 2; box-sizing: border-box;}
  .hp-banner-box .banner-text-btn a.join-btn { width: 20vw; padding: 4px 0; margin: 1.4vw 0 0 0; color: #fff; font-size: 4.5vw; font-weight: 500; line-height: 1em; letter-spacing: 0.1em; text-align: center; text-decoration: none; border: 1px #fff solid; border-radius: 10px; display: block; cursor: pointer;}
  .hp-banner-box .banner-text-btn a.join-btn:hover { background-color: rgba(255,255,255,0.2);}


  /************ section #hp-sec-main ************/

  section#hp-sec-main { clear: both; width: 100%; padding: 65px 10px 40px 10px; box-sizing: border-box;}

  .page-hp-sec-main { width: 100%;}
  
  .page-hp-sec-main .main-col-lf { width: 100%;}
  .page-hp-sec-main .main-col-lf .main-con { width: 100%; margin: 0 0 40px 0;}
  .page-hp-sec-main .main-col-lf .main-con .page-title { width: 100%; padding: 0 0 10px 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em; border-bottom: 1px #595757 solid;}
  .page-hp-sec-main .main-col-lf .main-con .page-title-sub { width: 100%; padding: 5px 0 0 0; font-size: 2rem; font-weight: 500;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar { width: 100%; padding: 40px 0; font-size: 2rem; line-height: 2em;}
  .page-hp-sec-main .main-col-lf .main-con .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index { width: 100%;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index > div { display: none;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .position-title { width: 316px; height: 29px; padding: 5px 0; margin: 0 auto; font-size: 2rem; font-weight: 500; text-align: center; line-height: 1em; background-image: url("../images/air_quality_index_position_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .main-con .air-quality-index .exponential-curve-box { width: 100%; padding: 10px; margin: 20px 0 0 0; border: 1px #333 solid; border-radius: 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-lf .tw-map { width: 100%;}
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_1, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_2, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_3, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_4, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_5, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_6, 
  .page-hp-sec-main .main-col-lf .tw-map img.map_tw_7 { width: 310px; height: auto; margin: 0 auto; display: none;}
  
  .page-hp-sec-main .main-col-rt { width: 100%; margin: 40px 0 0 0;}
  .page-hp-sec-main .main-col-rt .page-title { display: none;}
  .page-hp-sec-main .main-col-rt .page-title-mo { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-main .main-col-rt .page-title-mo span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-main .main-col-rt .page-title-mo span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-main .main-col-rt .news-list-box { width: 100%; margin: 0 0 25px 0;}
  .page-hp-sec-main .main-col-rt .news-list-box a { width: 100%; padding: 15px; color: #333; text-decoration: none; box-sizing: border-box; border-radius: 10px; background-color: #a9b3c2; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-hp-sec-main .main-col-rt .news-list-box a:hover { background-color: #c5ceda;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic { width: 118px; border-radius: 10px; background-color: #ebebee; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-hp-sec-main .main-col-rt .news-list-box a .pic img { width: 100%; height: auto;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro { width: calc(100% - 118px); padding: 0 0 0 15px; box-sizing: border-box;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .title { width: 100%; padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; line-height: 1.2em;}
  .page-hp-sec-main .main-col-rt .news-list-box a .intro .text { width: 100%; font-size: 2rem; line-height: 1.6em;}


  /************ section #hp-sec-achievements ************/

  section#hp-sec-achievements { clear: both; width: 100%; padding: 0 10px 40px 10px; box-sizing: border-box;}

  .page-hp-sec-achi { width: 100%; padding: 20px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  .page-hp-sec-achi .page-title { display: none;}
  .page-hp-sec-achi .page-title-mo { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .page-title-mo span.en { padding: 0 10px 0 0; font-size: 3rem; font-weight: 500; letter-spacing: 0.1em;}
  .page-hp-sec-achi .page-title-mo span.cn { padding: 3px 20px; color: #fff; font-size: 2rem; letter-spacing: 0.1em; border-radius: 20px; background-color: #595757;}
  .page-hp-sec-achi .achievements-show { width: 100%; margin: 0 0 30px 0;}
  .page-hp-sec-achi .achievements-show .view-achi-box { width: 100%;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box { width: 270px; height: 354px; margin: 0 auto; border-radius: 15px; background-color: #a9b3c2; background-repeat: no-repeat; background-size: cover; background-position: center center; overflow: hidden; display: block;}
  .page-hp-sec-achi .achievements-show .view-achi-box .achi-box img { width: 100%; height: auto;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar { clear: both; width: 100%; margin: 20px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn { width: 160px; margin: 0 0 0 40px;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a { width: 100%; padding: 3px 0; color: #fff; font-size: 2rem; text-align: center; letter-spacing: 0.1em; text-decoration: none; border-radius: 20px; background-color: #595757; display: block;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .viewall-btn a:hover { background-color: #6d6d6d;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow { width: 120px; display: flex; justify-content: flex-end; align-items: center;}
  .page-hp-sec-achi .achievements-show .viewall-arrows-bar .slick-arrow img { width: 40px; height: auto; margin: 0 10px; cursor: pointer;}


  /************ section #quick-analysis ************/

  .page-bottom-bar { clear: both; width: 100%; padding: 0 10px 50px 10px; margin: -30px 0 0 0; font-size: 2rem; text-align: right; box-sizing: border-box;}


  section#quick-analysis { clear: both; width: 100%; padding: 0 10px 50px 10px; box-sizing: border-box;}

  .page-quick-analysis { width: 100%; padding: 10px; border-radius: 15px; background-color: #ebebee; box-sizing: border-box;}
  
  .page-quick-analysis .main-col-lf { width: 100%; padding: 10px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-lf .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-lf .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-lf .target_value { width: 135px; height: 34px; color: #f29600; font-size: 2.5rem; font-weight: 900; text-align: center; line-height: 1em; background-image: url("../images/quick_analysis_points_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box { width: 100%; padding: 15px 20px; margin: 40px auto; color: #fff; border-radius: 15px; box-sizing: border-box;}
  /* 修正：針對該區塊內的 input 元素設定 placeholder */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::placeholder {font-size: 1.5rem;}
  /* 為了相容所有瀏覽器，建議寫法如下 */
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-webkit-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input:-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box input::-ms-input-placeholder {font-size: 1.5rem;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.point { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.line { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .emission-proportion-box.area { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 15px 3px 5px;  color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}*/
    /* 2. 必須清除原生外觀 - 這是關鍵 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range] {
        -webkit-appearance: none; /* Chrome, Safari, Edge */
        width: 100%;
        background: transparent;
        margin: 15px 0;
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}*/
    /* 1. 針對 Chrome, Edge, Safari 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type="range"]::-webkit-slider-thumb {
        /* 使用放射狀漸層：中心點 35% 是黃色，40% 開始變白色，達成硬邊點點效果 */
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px; /* 稍微加寬一點點點，讓點點更明顯 */
        height: 18px;
        border-radius: 50%;
        -webkit-appearance: none;
        margin-top: -5px; /* 計算公式：(軌道高度8px / 2) - (圈圈高度18px / 2) = -5px */
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2); /* 加上微陰影讓圈圈更有立體感 */
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  /*.page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}*/
    /* 2. 針對 Firefox 的圈圈 */
    .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-thumb {
        background: radial-gradient(circle, #fbbd5a 35%, #fff 40%);
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
  .page-quick-analysis .main-col-lf .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-lf .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}

  /*.page-quick-analysis .main-col-rt { width: 100%; padding: 10px; margin: 30px 0 0 0; border-radius: 15px; background-color: #fff; box-sizing: border-box;}*/
  .page-quick-analysis .main-col-rt {
    /* 強制填滿左側 480px 之後的所有空間 */
    flex: 1; 
    /* 防止內部內容（如 Canvas 或大圖）反向撐開導致版面混亂 */
    min-width: 0; 
    
    padding: 15px 40px;
    border-radius: 15px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
  .page-quick-analysis .main-col-rt .title-infor-bar { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar .title { width: calc(100% - 44px);}
  .page-quick-analysis .main-col-rt .title-infor-bar .title span { padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-rt .concentration-curve { width: 100%; margin: 40px 0 60px 0;}
  .page-quick-analysis .main-col-rt .concentration-curve .notice { width: 100%; color: #6d6d6d; font-size: 2rem; text-align: right;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box { width: 50%;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box img.icon { width: 100px; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value { width: 100%; padding: 20px 0 0 0; font-size: 2rem; text-align: center; letter-spacing: 0.1em;}
  .page-quick-analysis .main-col-rt .benefit-assessment-box .infor-box .value span.num { color: #f29600; font-size: 3rem; font-weight: 900;}


  /************ concentration target analysis ************/

  .page-quick-analysis .main-col-lf .text-info { width: 100%; padding: 10px 20px 20px 20px; font-size: 2rem; line-height: 1.6em; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box { width: 100%; padding: 15px 20px; margin: 20px 0; font-size: 2rem; line-height: 1.8em; border-radius: 15px; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .step-box.step1 { background-color: #a9b3c2;}
  .page-quick-analysis .main-col-lf .step-box.step2 { background-color: #71c2a5;}
  .page-quick-analysis .main-col-lf .step-box.step3 { background-color: #fbbd5a;}
  .page-quick-analysis .main-col-lf .step-box.step4 { background-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .step-box .title { width: 100%; color: #fff; font-size: 2rem; font-weight: 500; line-height: 1.8em; text-align: center;}

/*  .page-quick-analysis .main-col-rt .page-title-sub { width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar { width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box { width: 100%; padding: 15px 20px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 2rem; font-weight: 500;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] { width: 107px; height: 26px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 0; outline: none; background-color: transparent; background-image: url("../images/quick_analysis_proportion_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] { width: 100%; margin: 15px 0 0 0; outline: none; accent-color: #fff; background-color: transparent;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.5); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%; -webkit-appearance: none; margin-top: -4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-track { background: rgba(255,255,255,0.4); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-thumb { background: #fff; width: 16px; height: 16px; border-radius: 50%;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range]::-moz-range-progress { background: rgba(255,255,255,0.8); height: 8px; border-radius: 4px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar { width: 98%; height: 15px; margin: 0 auto; border-left: 1px #fff solid; background-image: url("../images/dot_w.png"); background-repeat: repeat-x; background-position: left center; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line { width: calc(100% / 10); height: 15px; border-right: 1px #fff solid; box-sizing: border-box; display: block;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note { width: 100%; margin: 15px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a { width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
*/
  /* 污染物、年份、區域選擇標題與間距 */
  .page-quick-analysis .main-col-rt .page-title-sub {  width: 100%; padding: 5px 0; margin: 0 0 20px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .choice-bar {  width: 100%; padding: 0 0 30px 0; font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-bar input[type=checkbox] {  width: 20px; height: 20px; vertical-align: middle;}
  /* --- 區域選擇：垂直對齊優化 --- */
  .page-quick-analysis .main-col-rt .choice-bar div[style*="flex-wrap:wrap"] {  display: grid; grid-template-columns: repeat(3, 1fr); /* 強制改為三欄對齊 */ gap: 15px 10px; margin-top: 20px !important;}
  .page-quick-analysis .main-col-rt .choice-bar div span { display: flex; align-items: center; font-size: 2rem;}
  /* --- 濃度目標容器 (灰藍色背景盒) --- */
  .page-quick-analysis .main-col-rt .target-value-box { width: 100%;} 
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box {  width: 100%; padding: 25px 30px; color: #fff; border-radius: 15px; background-color: #a9b3c2; box-sizing: border-box;}
  /* 標題與輸入框容器 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input {  width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input span.title { font-size: 1.5rem; font-weight: 500;}
  /* --- 數字框：箭頭內移與背景樣式 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number] {  width: 110px; height: 34px; padding: 3px 15px 3px 5px; /* 增加右邊距給箭頭 */ color: #333; font-size: 1.5rem; text-align: center; border: 0; outline: none;   border-radius: 20px; background-color: #fff; /* 改為白色背景符合圖片 */  box-sizing: border-box; -moz-appearance: textfield;}
  /* Chrome/Safari 專屬：讓箭頭往內縮 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .title-input input[type=number]::-webkit-inner-spin-button { margin-right: 3px; height: 20px;  cursor: pointer;}
  /* --- 滑桿美化：黃色核心 + 白色外圈 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type=range] {  width: 100%; margin: 20px 0 5px 0; outline: none; -webkit-appearance: none; background-color: transparent;}
  /* 軌道樣式 */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-runnable-track {  background: rgba(255,255,255,0.6); height: 4px; border-radius: 2px;}
  /* 圓鈕樣式 (黃色+白色邊框) */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box input[type="range"]::-webkit-slider-thumb {  -webkit-appearance: none;  height: 26px; width: 26px; border-radius: 50%;  background: #ffb800; /* 黃色核心 */ border: 4px solid #fff; /* 白色外圈 */ box-shadow: 0 2px 4px rgba(0,0,0,0.2);  margin-top: -11px; /* 置中對準軌道 */}
  /* --- 刻度與標註微調 --- */
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar {  width: 100%; height: 12px; margin: 0 auto; border-left: 1px #fff solid;   display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .ruler-bar .ruler-line {  width: calc(100% / 10); height: 12px; border-right: 1px #fff solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .target-value-box .emission-proportion-box .min-max-note {  width: 100%; margin: 10px 0 0 0; display: flex; justify-content: space-between; font-size: 1.5rem;}
  /* 下一步按鈕 */
  .page-quick-analysis .main-col-rt .next-step-btn { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .next-step-btn a {  width: 120px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center;  text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}


  .page-quick-analysis .main-col-full { width: 100%; padding: 10px; border-radius: 15px; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .title-infor-bar { width: 100%; margin: 0 0 25px 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-full .title-infor-bar .title-bar { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-full .title-infor-bar .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  .page-quick-analysis .main-col-full .choice-contain { width: 96%; margin: 0 auto; font-size: 2rem; line-height: 1.6em;}
  .page-quick-analysis .main-col-full .area-target-analysis { width: 96%; margin: 40px auto;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li { padding: 0; margin: 0 2px 2px 0; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a { padding: 3px 10px; color: #333; font-size: 2rem; text-decoration: none; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-full .area-target-analysis ul.analysis-form-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table { clear: both; width: 100%; position: relative;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table > div { display: none;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table a.more-btn { width: 200px; margin: 20px 0; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block; float: right;}
  .page-quick-analysis .main-col-full .area-target-analysis .analysis-form-table table { clear: both; width: 100%; font-size: 2rem; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt { clear: both; width: 96%; margin: 40px auto 0 auto;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt { padding: 20px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-full .data-detail-box { clear: both; width: 100%; margin: 40px 0;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf { width: 100%;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf table { width: 100%; font-size: 2rem; border: 1px #333 solid;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt { width: 100%; padding: 40px 0 0 0; box-sizing: border-box;}
  .page-quick-analysis .main-col-full .data-detail-box .col-lf .title, 
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .title { width: 100%; padding: 0 0 40px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic { width: 100%;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-pic img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart { width: 100%; padding: 40px 0 0 0;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-full .data-detail-box .col-rt .analysis-chart table.analysis-table { width: 100%; font-size: 2rem; border: 1px #333 solid;}

  .page-quick-analysis .main-col-full .health-risks-analysis { width: 100%;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf { width: 100%; margin: 0 0 20px 0;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 5px 0; color: #fff; font-size: 2rem; text-align: center; background-color: #2d4daa;}
  .page-quick-analysis .main-col-full .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 5px 0; font-size: 2rem; text-align: center; background-color: #c1cef4;}

  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-full .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  .page-quick-analysis .main-col-rt .tool-bar { width: 100%; padding: 0 0 20px 0; text-align: center;}
  .page-quick-analysis .main-col-rt .tool-bar select { width: calc(90% - 20px); padding: 10px 5px; color: #333; font-size: 2rem; border: 1px #333 solid; background-color: #fff; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button] { width: calc(45% - 20px); padding: 10px 5px; margin: 10px; color: #fff; font-size: 2rem; border: 0; background-color: #333; box-sizing: border-box; cursor: pointer;}
  .page-quick-analysis .main-col-rt .tool-bar input[type=button]:hover { background-color: #595757;}
  
  /*.page-quick-analysis .main-col-rt ul.emission-zone-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li { padding: 0; margin: 0 10px 10px 0;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a { padding: 3px 10px; color: #333; font-size: 2rem; text-decoration: none; border: 1px #333 solid; border-radius: 8px; background-color: #fff; display: block;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a:hover { background-color: #eee;}
  .page-quick-analysis .main-col-rt ul.emission-zone-tab li a.sel { color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose { width: 100%; padding: 10px 0 30px 0;}
  .page-quick-analysis .main-col-rt .emission-zone-choose > div { display: none;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full { width: 100%; padding: 0 0 20px 0; background-color: #eee;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x { width: calc(100% / 2); padding: 0 10px; box-sizing: border-box; float: left;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title { width: 100%; padding: 20px 0 10px 0; text-align: center;  font-size: 2rem}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x .title span { padding: 0 5px; color: #fff; background-color: #333;}
  .page-quick-analysis .main-col-rt .emission-zone-choose .source-selection-full .column-4x input[type=checkbox] { width: 20px; height: 20px;  font-size: 1.5rem}
*/
  /* 區域選擇 Checkbox 排列 */
  .page-quick-analysis .main-col-rt .region-checkbox-group { display: flex; gap: 25px; margin: 15px 0; padding-left: 5px;}
  /* 縣市按鈕群組樣式 */
  .page-quick-analysis .main-col-rt .btn-group { display: flex;flex-wrap: wrap; gap: 10px; margin: 15px 0;}
  .page-quick-analysis .main-col-rt .toggle-btn { border: 1px solid #ccc; border-radius: 20px; padding: 6px 18px; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 14px; outline: none;}
  .page-quick-analysis .main-col-rt .toggle-btn:hover { border-color: #888; background-color: #f9f9f9;}
  .page-quick-analysis .main-col-rt .toggle-btn.active { background-color: #333; color: #fff;  border-color: #333;}
  /* 灰色背景源別區塊：類別橫向排列 (同一行) */
  .page-quick-analysis .main-col-rt .source-grid { background-color: #f5f5f5; padding: 20px; display: grid; /* 四個類別平分寬度 */ grid-template-columns: repeat(4, 1fr);  gap: 20px; border-radius: 4px;}
  /* 預設隱藏全台的源別容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .tw-sources-wrapper.active {   display: block; }
  /* 預設隱藏所有空品區的源別容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper {  display: none; }
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .aqsite-sources-wrapper.active {  display: block;}
  /* 預設隱藏所有城市的源別容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper { display: none;}
  /* 當 active 時顯示容器 */
  .page-quick-analysis .main-col-rt .city-sources-wrapper.active {    display: block;}
  /* 類別內部的選項垂直排列 (往下長) */
  .page-quick-analysis .main-col-rt .source-col { display: flex;  flex-direction: column;  align-items: flex-start;}
  .page-quick-analysis .main-col-rt .source-column-header { background-color: #333; color: #fff; padding: 4px 10px;  display: inline-block;  margin-bottom: 12px;  font-size: 13px;  border-radius: 2px;}
  .page-quick-analysis .main-col-rt .checkbox-item { display: flex; align-items: center; margin-bottom: 8px; font-size: 14px; cursor: pointer;}
  .page-quick-analysis .main-col-rt .checkbox-item input { margin-right: 8px;}
  /* 底部動作列 */
  .page-quick-analysis .main-col-rt .footer-actions {  margin-top: 30px; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .next-btn { background-color: #555; color: #fff; border: none;  padding: 10px 35px; border-radius: 25px;  font-size: 16px; cursor: pointer; transition: background 0.3s;}
  .page-quick-analysis .main-col-rt .next-btn:hover {    background-color: #222; }
  /* 響應式調整：小螢幕時自動轉為垂直 */
  @media (max-width: 768px) { .page-quick-analysis .main-col-rt .source-grid {  grid-template-columns: 1fr; }}


  .page-quick-analysis .main-col-rt .choice-prev-next-bnt { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: space-between; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.choice-check input[type=checkbox] { width: 20px; height: 20px;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt { display: flex; justify-content: flex-end; align-items: center;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.prev-next-bnt a.next-step-btn { width: 120px; margin: 0 0 0 20px; color: #fff; font-size: 2rem; line-height: 1.6em; text-align: center; text-decoration: none; border-radius: 30px; background-color: #595757; display: block;}


  .page-quick-analysis .main-col-lf .reduction-analysis-bx { width: 100%; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-b { font-size: 2.5rem; font-weight: 500;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx span.list-title-s { padding: 0 0 0 10px; font-size: 2rem; font-weight: 500;}
  /*.page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { width: 100%; padding: 0 0 0 30px; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range .title { width: 100px;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=range] { width: 100px; outline: none; accent-color: #8ebfcc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type=number] { width: 50px; padding: 3px 5px; color: #333; font-size: 2rem; text-align: center; border: 1px #333 solid; background-color: #fff;}
  */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range { display: flex !important; flex-direction: row; /* 橫向排列 */ flex-wrap: nowrap; /* 強制這三個區塊不換行 */ align-items: center; /* 垂直置中，當文字變多行時 Slider 依然在中間 */ width: 100%; margin-bottom: 20px; gap: 10px;}
  /* 1/4 區域：文字過長自動換行 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .title-col { flex: 1; /* 佔 1/4 */ line-height: 1.2; /* 設定行高，讓換行後的文字不會太擠 */ word-break: break-all; /* 確保長英文或符號也能斷行 */}
  /* 1/2 區域：滑桿 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .slider-col { flex: 2; /* 佔 1/2 */ display: flex; justify-content: center; min-width: 0; /* 防止 Flex 項目溢出 */}
  /* 1/4 區域：數字輸入 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .value-col { flex: 1; /* 佔 1/4 */ display: flex; justify-content: flex-end; align-items: center; white-space: nowrap; /* 數字與 % 建議不要斷行 */}
  /* --- 滑桿質感樣式 (還原圖片) --- */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"] { -webkit-appearance: none; width: 100%; height: 10px; background: #e0e0e0; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; background: #9cc1d1; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;}
  /* 數字框 */
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .choice-range input[type="number"] { width: 55px;  height: 28px; text-align: center; border: 1px solid #ccc;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn { clear: both; width: 100%; margin: 40px 0 0 0; text-align: center;}
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=submit], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=reset], 
  .page-quick-analysis .main-col-lf .reduction-analysis-bx .submit-btn input[type=button] { padding: 3px 30px; margin: 0 10px; color: #fff; font-size: 2rem; border: 0; border-radius: 15px; background-color: #333; cursor: pointer;}
  .page-quick-analysis .main-col-rt .rt-title-bar { width: 100%; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx { width: 100%; margin: 30px 0;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  /*.page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf .choice-text { width: 100%; font-size: 2rem; line-height: 1.8em;}  */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf img.pic { width: 100%; height: auto; margin: 0 auto;}.
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt { width: 100%; padding: 30px 10px 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt .title { width: 100%; padding: 0 0 20px 0; font-size: 2.5rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-rt img.pic { width: 100%; height: auto; margin: 0 auto;}
  .page-quick-analysis .main-col-rt .health-risks-analysis { width: 100%; margin: 30px 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full { width: 100%;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx { width: 100%; padding: 0 0 30px 0;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col .title { width: 100%; padding: 0 0 20px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-full .pic-show-bx .pic-col img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .col-lf table { width: 100%; font-size: 2rem; text-align: center; border: 0;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf { width: 100%; margin: 30px 0 0 0; padding: 0 5px; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-1 { width: 100%; padding: 10px; color: #fff; font-size: 2rem; text-align: center; background-color: #e97132; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-2 { width: 100%; padding: 10px; font-size: 2rem; text-align: center; background-color: #f6d5cd; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .health-risks-analysis .column-helf .title-3 { width: 100%; padding: 10px; font-size: 2rem; font-weight: 500; text-align: center; box-sizing: border-box;}
  /* 分析結果主容器 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-results-container { width: 100%; max-width: 1000px; /* 限制最大寬度，避免在大螢幕拉得太開 */ margin: 0 auto; /* 水平置中 */ display: flex; flex-direction: column; /* 垂直堆疊：圖在上，表在下 */ gap: 30px; /* 圖與表之間的間距 */}
  /* 圖表容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .chart-placeholder { width: 100%; height: 300px; /* 預設高度 */ background-color: #f0f4f7; border: 2px dashed #cbd5e0; display: flex; align-items: center; justify-content: center;  color: #718096;  border-radius: 4px;}
  /* 表格容器樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .table-section { width: 100%; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); box-sizing: border-box; overflow-x: auto; /* 手機版可橫向捲動 */}
  /* 專業表格樣式 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table { width: 100%; border-collapse: collapse; margin-top: 10px; min-width: 600px; /* 確保內容不會太擠 */}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table th { background-color: #5d8ca3; /* 已調整為較深的藍色調 */ color: white; text-align: center; padding: 12px 15px; font-weight: bold;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; color: #4a5568;  text-align: center;}
  /* 隔行變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:nth-child(even) { background-color: #f8fafc;}
  /* 滑過列變色 */
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .analysis-table tr:hover { background-color: #edf2f7;}
  .page-quick-analysis .main-col-rt .reduction-analysis-bx .section-title { font-size: 20px; font-weight: bold; margin-bottom: 15px; color: #2d3748; border-left: 5px solid #5d8ca3; /* 標題邊條也同步加深顏色 */ padding-left: 10px;}
  
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn { font-size: 2rem;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a { color: #333; text-decoration: none;}
  .page-quick-analysis .main-col-rt .choice-prev-next-bnt span.download-btn a:hover { border-bottom: 1px #333 dashed;}


  /************ pollution source analysis ************/

  .page-quick-analysis .main-col-full .source-analysis-pic { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-full .source-analysis-pic img { width: 100%; margin: 0 0 20px 0;}
  
  .page-quick-analysis .main-col-full .source-analysis-table { width: 100%; margin: 30px 0 0 0;}
  /* 設定表格容器與邊框 */
.page-quick-analysis .main-col-full .source-analysis-table table { 
    width: 100%; 
    font-size: 2rem; 
    border: 1px #333 solid;
    border-collapse: collapse; /* 讓邊框合併，看起來比較專業 */
}

/* 關鍵修改：針對表格內的所有單元格設定置中 */
.page-quick-analysis .main-col-full .source-analysis-table table th,
.page-quick-analysis .main-col-full .source-analysis-table table td {
    padding: 15px;            /* 增加間距，讓 2rem 的大字不會擠在一起 */
    text-align: center;       /* 水平置中 */
    vertical-align: middle;   /* 垂直置中 */
    border: 1px #333 solid;   /* 確保內格也有邊框 */
}

/* 如果您希望表頭有底色區分 */
.page-quick-analysis .main-col-full .source-analysis-table table th {
    background-color: #f5f5f5;
    font-weight: 600;
}


  /************ observational data ************/

  .page-quick-analysis .main-col-rt .title-infor-bar-v2 { width: 100%; margin: 25px 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .title { width: calc(100% - 44px); padding: 0 0 5px 0; font-size: 2rem; font-weight: 500; border-bottom: 1px #595757 solid;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon { width: 44px;}
  .page-quick-analysis .main-col-rt .title-infor-bar-v2 .infor-icon img { width: 100%; height: auto; cursor: pointer;}
  /* 讓圖表達到網頁等寬的關鍵設定 */
  /* 讓圖表對齊內容區塊寬度（與下方圖片右側對齊） */
  .page-quick-analysis .main-col-rt .ozone-chart {clear: both;width: 100%; /* 設定為 100% 以對齊父層容器邊界 */margin: 30px 0; /* 設定上下間距 */box-sizing: border-box;}
  /* 以下保留您原本的表格與區塊樣式設定 */
  .page-quick-analysis .main-col-rt .ozone-pic-table {width: 100%;margin: 30px 0;display: flex;justify-content: space-between;align-items: stretch;gap: 20px;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table {width: 50%;box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table {width: 100%;border-collapse: separate;border-spacing: 0;font-size: 2rem;color: #333;background: #ffffff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);border: 1px solid #eef2f3;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table th {background-color: #f8fafb;color: #595757;font-weight: 600;padding: 15px;text-align: center;border-bottom: 2px solid #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td {padding: 16px 15px;border-bottom: 1px solid #f0f0f0;text-align: center;transition: all 0.2s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:last-child td {border-bottom: none;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item {cursor: pointer;position: relative;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr:hover td.value-item {background-color: #f0f9fb;color: #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-table table tr td.value-item.active {background-color: #e9f5f8;color: #2791ad;font-weight: 700;box-shadow: inset 4px 0 0 #2791ad;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic {width: 50%;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img {width: 100%;height: auto;border-radius: 12px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease;}
  .page-quick-analysis .main-col-rt .ozone-pic-table .col-pic img:hover {transform: scale(1.02);}

  /************ emissions list data ************/

  .page-quick-analysis .main-col-rt ul.emissions-list-tab { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li { width: calc(100% / 3); padding: 0; margin: 0;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a { width: 100%; height: 50px; color: #333; font-size: 2rem; font-weight: 500; text-decoration: none; border-bottom: 4px #eee solid; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a:hover { background-color: #eee; border-bottom: 4px #ccc solid;}
  .page-quick-analysis .main-col-rt ul.emissions-list-tab li a.sel { color: #2d4daa; border-bottom: 4px #2d4daa solid; background-color: #eee;}

  .page-quick-analysis .main-col-rt .emissions-list-detail { width: 100%;}
  .page-quick-analysis .main-col-rt .emissions-list-detail > div { padding: 40px 0; display: none;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .title { width: 100%; padding: 0 0 0 10px; color: #2d4daa; font-size: 2rem; font-weight: 600; border-left: 4px #2d4daa solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics { width: 100%; margin: 30px 0 0 0;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box { width: 100%; margin: 0 0 20px 0; border: 1px #ccc solid; box-sizing: border-box;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box img { width: 100%; height: auto;}
  .page-quick-analysis .main-col-rt .emissions-list-detail .emissions-list-pics .pic-box .text { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 500; text-align: center;}
  .page-quick-analysis .main-col-rt .emissions-list-detail table { clear: both; width: calc(100% - 20px); margin: 30px auto 0 auto; font-size: 2rem; border: 0; text-align: center;}


  /************ privacy policy ************/

  .page-quick-analysis .main-col-full .privcy-content { width: 100%; padding: 0 0 30px 0; font-size: 2rem; line-height: 2em;}
  .page-quick-analysis .main-col-full .privcy-content a { color: #333; text-decoration: none; border-bottom: 1px #333 solid;}


  /************ site map ************/

  ul#sitemap { clear: both; width: 100%; padding: 0 40px; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  ul#sitemap li { width: 100%; padding: 0; margin: 0 0 40px 0;}
  ul#sitemap li a { width: 100%; padding: 6px 0; color: #333; font-size: 2rem; font-weight: 600; text-align: center; text-decoration: none; border-bottom: 4px #8ebfcc solid; display: block;}
  ul#sitemap li a:hover { color: #2791ad;}
  ul#sitemap li ul.popup { width: 100%; padding: 10px 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.popup li { width: 100%; padding: 0; margin: 0;}
  ul#sitemap li ul.popup li a { width: 100%; padding: 10px 0; font-size: 2rem; font-weight: 400; text-align: center; text-decoration: none; border: 0 !important; display: block;}
  ul#sitemap li ul.popup li a:hover { color: #2791ad;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 40px 20px; background-color: #8ebfcc; box-sizing: border-box;}

  .footer-menu { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .footer-menu a.menu-btn { width: 175px; height: 28px; margin: 0 20px 20px 20px; color: #333; font-size: 2rem; letter-spacing: 0.1em; line-height: 1em; text-decoration: none; display: flex; justify-content: center; align-items: center; background-image: url("../images/footer_menu_bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-size: center center;}
  .footer-menu a.menu-btn:hover { font-weight: 500;}

  .footer-contain { clear: both; width: 100%; padding: 25px 0 0 0;}
  .footer-contain .footer-col-lf { width: 100%;}
  .footer-contain .footer-col-lf .footer-logo { width: 240px; margin: 0 auto;}
  .footer-contain .footer-col-lf .footer-logo img { width: 100%; height: auto;}
  .footer-contain .footer-col-lf .copyright { width: 100%; padding: 25px 0 0 0; color: #fff; font-size: 2rem; text-align: center;}
  .footer-contain .footer-col-rt { display: none;}
  .footer-contain .footer-col-rt-mo { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: center; flex-wrap: wrap;}
  .footer-contain .footer-col-rt-mo .logo-title { width: 200px;}
  .footer-contain .footer-col-rt-mo .logo-title a { width: 100%; display: block;}
  .footer-contain .footer-col-rt-mo .logo-title a img { width: 100%; height: auto;}
  .footer-contain .footer-col-rt-mo .footer-infor { width: 100%; padding: 15px 0 0 0; font-size: 2em; line-height: 2em; text-align: center;}
  

}