/* ===== 通用 ===== */
   .grid-bk {
       background: url(../images/grid.png);
       background-repeat: repeat-y;
       background-position: center;
       background-size: contain;
   }

   /* scrollbar */
   *::-webkit-scrollbar {
       height: 6px;
       width: 6px;
       border-radius: 0 !important;
   }

   *::-webkit-scrollbar-track {
       background: #e0e0e0;
       border-radius: 0 !important;
   }

   *::-webkit-scrollbar-thumb {
       background: var(--one-color);
       border-radius: 0 !important;
   }

   *::-webkit-scrollbar-thumb:hover {
       background: var(--one-color);
       border-radius: 0 !important;
   }

   /* Firefox */
   * {
       scrollbar-color: var(--one-color) #e0e0e0;
       scrollbar-width: thin;
   }

   @font-face {
       font-family: 'roboto';
       src: url('../fonts/roboto.woff') format("woff"),
           url('../fonts/roboto.ttf') format("truetype"),
           url('../fonts/roboto.eot') format("embedded-opentype");
   }

   html,
   body {
       background: #F7F7F7;
       font-size: 10px;
       font-family: "roboto", "微軟正黑體";
       color: var(--font-color);
   }

   a {
       color: var(--font-color);
   }

   a:hover {
       color: var(--font-color);
       text-decoration: none;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   p,
   li {
       color: #4f4f4f;
   }

   h1 {
       font-size: 4rem;
   }

   h2 {
       font-size: 3rem;
   }

   h3 {
       font-size: 2.6rem;
   }

   h4 {
       font-size: 2rem;
       font-weight: 400;
   }

   h5 {
       font-size: 1.6rem;
       font-weight: bold;
   }

   p,
   li {
       font-size: 1.6rem;
       line-height: 2.6rem;
       margin: 0;
       padding: 0;
       color: #777777;
   }

   .font-weight-thin {
       font-weight: 400 !important;
   }

   .sp-pa-p {
       margin-bottom: 1.35rem;
   }

   ul,
   ol {
       margin: 0 0 0 -2.5rem;
   }

   li span {
       font-size: 1.6rem;
       font-weight: bold;
   }

   span {
       font-size: 1.6rem;
       line-height: 33px;
   }

   .h1,
   .h2,
   .h3,
   .h4,
   .h5,
   .h6,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       margin: 0;
   }

   li.none {
       list-style-type: none;
       margin-left: -3rem;
   }

   img {
       width: 100%;
   }

   .container-l {
       width: 1740px;
       max-width: 1740px;
       margin: 0 auto;
   }

   .container-m {
       width: 1400px;
       max-width: 1400px;
       margin: 0 auto;
   }

   .container-s {
       width: 900px;
       max-width: 900px;
       margin: 0 auto;
   }

   .container-xs {
       width: 900px;
       max-width: 900px;
       margin: 0 auto;
   }

   /* ===== 顯示與隱藏 ===== */
   .display-1470 {
       display: none;
   }

   .display-1400 {
       display: none;
   }

   .display-1200 {
       display: none;
   }

   .display-992 {
       display: none;
   }

   .display-768 {
       display: none;
   }

   .display-600 {
       display: none;
   }

   .display-576 {
       display: none;
   }

   .display-480 {
       display: none;
   }

   /* ===== 色彩 ===== */
   :root {
       --one-color: #EB4F3F;
       --two-color: #222222;
       --three-color: #666666;
       --four-color: #999999;
       --font-color: #4f4f4f;
       --border-color: #d0d0d0;
       --white-color: #ffffff;
       --green-color: #20C41A;
       --light-green-color: #ECFBE1;
       --light-red-color: #FCE2DF;
       --wechat-color: #47B129;
   }

   .color-red {
       color: var(--one-color) !important;
   }

   .color-green {
       color: var(--green-color);
   }

   .color-white {
       color: var(--white-color);
   }

   .bk-red {
       background: #FCE2DF;
   }

   .bk-light-green {
       background: var(--light-green-color);
   }

   /* ===== 文字 ===== */
   .f-30 {
       font-size: 3rem;
       text-transform: uppercase;
       font-weight: bold;
   }

   .f-14 {
       font-size: 1.4rem;
   }

   .tight-p {
       line-height: 2.2rem !important;
   }

   /* ===== 按鈕 ===== */
   .btn-groups {
       text-align: center;
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
   }

   .btn-groups a {
       margin: 1rem 0.5rem 0;
   }

   .btn {
       position: relative;
       transition: 0.3s ease;
       font-size: 1.6rem;
       margin: 0;
       padding: 0;
       color: #fff;
       border-radius: 1rem;
   }

   .btn-one {
       background-color: var(--one-color);
   }

   .btn-two {
       background-color: var(--two-color);
       color: #333;
   }

   .btn-two:hover {
       background-color: #9BEA01;
   }

   .btn-three {
       background-color: #000;
   }

   .btn-four {
       background-color: #aaa;
       color: #333;
   }

   .btn-four:hover {
       background-color: #888 !important;
       color: #fff;
   }

   .btn-100 {
       width: 100%;
   }

   .btn-l {
       width: 22rem;
       font-size: 2rem;
       line-height: 4.5rem;
   }

   .btn-m {
       width: 15rem;
       padding: 0 2rem;
   }

   .btn-s {
       line-height: 4.5rem;
       padding: 0 2rem;
   }

   .btn-float {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       bottom: -60px;
   }

   .btn-g {
       background: var(--two-color);
   }

   /* ===== Table + Form ===== */
   .t-5 {
       width: 5%;
   }

   .t-10 {
       width: 10%;
   }

   .t-15 {
       width: 15%;
   }

   .t-20 {
       width: 20%;
   }

   .t-25 {
       width: 25%;
   }

   .t-26 {
       width: 26.6%;
   }

   .t-30 {
       width: 30%;
   }

   .t-33 {
       width: 33.33%;
   }

   .t-35 {
       width: 35%;
   }

   .t-40 {
       width: 40%;
   }

   .t-45 {
       width: 45%;
   }

   .t-50 {
       width: 50%;
   }

   .t-55 {
       width: 55%;
   }

   .t-60 {
       width: 60%;
   }

   .t-65 {
       width: 65%;
   }

   .t-70 {
       width: 70%;
   }

   .t-75 {
       width: 75%;
   }

   .t-80 {
       width: 80%;
   }

   .t-85 {
       width: 85%;
   }

   .t-90 {
       width: 90%;
   }

   .t-95 {
       width: 95%;
   }

   .t-100 {
       width: 100%;
   }

   .table p {
       font-weight: 400;
       font-size: 1.4rem;
       line-height: 2.2rem;
   }

   .table img {
       width: 2.2rem;
       height: 2.2rem;
       object-fit: contain;
       margin-right: 0.5rem;
   }

   .table img~p {
       line-height: 1.8rem;
   }

   .table .tr.th-header {
       display: flex;
       justify-content: flex-start;
       align-items: stretch;
       background: #fff;
   }

   .tr {
       border: 1px solid var(--border-color);
       border-top: transparent;
       display: flex;
       align-items: stretch;
       width: 100%;
       position: relative;
   }

   .th,
   .td {
       border-right: 1px solid var(--border-color);
       font-size: 1.6rem;
       padding: 1.5rem 1rem;
       background-color: inherit;
   }

   .table-item {
       background-color: #fff;
   }

   .table-item:nth-child(2n) {
       background-color: #f5f5f5 !important;
   }

   .th:last-child,
   .td:last-child {
       border-right: 0;
   }

   .td.static,
   .th.static {
       position: sticky;
       left: 0;
       z-index: 1;
       background-color: #fff;
   }

   .table>:not(caption)>*>* {
       border-bottom-width: initial;
       box-shadow: none;
   }

   .table-mob .table>:not(caption)>*>* {
       padding: 0;
       background-color: #ffffff;
       border-bottom-width: initial;
       box-shadow: none;
   }

   .table-scroll-area {
       width: 100%;
       overflow-x: auto;
   }

   .form-control {
       margin-bottom: 2.5rem;
       padding: 0 1rem;
       font-size: 1.6rem;
       border: 1px solid #ddd;
       border-radius: 5px;
       height: 4.5rem;
   }

   .form-select {
       width: 100%;
       height: 4.5rem;
       font-size: 1.6rem;
       margin-bottom: 2.5rem;
   }

   .form-check-input {
       width: 1.6rem;
       height: 1.6rem;
   }

   label {
       font-size: 1.6rem;
       margin-bottom: 0rem;
       font-weight: 900;
   }

   /* 展開功能 s*/
   .collapse-unit.collapsed {
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-radius: 1rem;
   }

   .chevron-icon {
       transition: transform 0.3s;
   }

   /* 只要 aria-expanded="true"，就旋轉 */
   .collapse-unit[aria-expanded="true"] .chevron-icon {
       transform: rotate(-180deg);
   }

   .collapse-unit {
       display: flex;
       justify-content: space-between;
       background: #fff;
       border-radius: 1rem 1rem 0 0;
       padding: 2.75rem 2.5rem;
       margin-top: 3rem;
       font-size: 1.6rem;
   }

   .collapse-item .card-body {
       border: none;
       font-size: 1.5rem;
       padding: 1rem;
       border-radius: 0 0 1rem 1rem;
       border-top: transparent;
   }

   div#collapseExample2 {
       border: 1px solid #ddd;
       border-top: transparent;
   }

   /* ===== Header ===== */
   .navbar-collapse {
       z-index: 9;
   }

   .navbar {
       background: transparent;
       padding: 0rem;
       padding-top: 4rem;
       align-items: center;
   }

   .navbar-light .navbar-toggler-icon {
       margin-bottom: 0.5rem;
   }

   .navbar-brand {
       padding-top: 0;
       padding-bottom: 0;
       margin-right: 0;
   }

   a.navbar-brand div {
       font-size: 2.6rem;
       font-weight: bold;
       color: #222222;
       transition: 0.3s ease;
   }

   a.navbar-brand div:hover {
       transform: scale(1.05);
   }

   .navbar-brand span {
       color: var(--one-color);
       font-size: 2.6rem;
       padding-right: 1rem;
   }

   li.nav-item {
       padding-left: 5.5rem;
       font-size: 1.6rem;
   }

   li.nav-item a {
       transition: 0.5s ease;
   }

   li.nav-item a:hover {
       transform: scale(1.2) !important;
       color: var(--one-color) !important;
   }

   .navbar-light .navbar-nav .nav-link:focus,
   .navbar-light .navbar-nav .nav-link a:hover {
       transform: scale(1.05);
       color: #ffffff;
   }

   /* ===== Footer ===== */

   .footer-block {
       background: var(--two-color);
       line-height: 6rem;
   }

   .footer-group {
       display: flex;
       justify-content: space-between;
   }

   .footer-item {
       font-size: 1.4rem;
       color: #fff;
   }

   .footer-item a {
       color: #fff;
   }

   /* ===== Modal ===== */
   .modal-content {
       border-radius: 1rem;
   }

   .modal-header {
       padding: 1rem 1.75rem;
       background: var(--one-color);
       color: #fff;
       border-radius: 1rem 1rem 0 0;
   }

   .modal-body {
       padding: 1rem 1.75rem;

   }

   .modal-body p {
       margin-bottom: 0.5rem;
   }

   .modal-footer {
       justify-content: center;
       padding: 1.5rem 0;
   }

   .modal-footer button {
       margin: 0 0.5rem;
   }

   /* ===== 浮動Top ===== */
   #button {
       display: inline-block;
       background-color: var(--one-color);
       width: 70px;
       height: 70px;
       border-radius: 99px;
       text-align: center;
       position: fixed;
       bottom: 50px;
       right: 50px;
       transition: background-color .3s,
           opacity .5s, visibility .5s;
       opacity: 0;
       visibility: hidden;
       z-index: 1000;
   }

   #button::after {
       font-weight: normal;
       font-style: normal;
       font-size: 2em;
       line-height: 50px;
       color: #fff;
   }

   #button:hover {
       cursor: pointer;
   }

   #button:active {
       background-color: #555;
   }

   #button.show {
       opacity: 1;
       visibility: visible;
       color: #fff;
   }

   #button.show i,
   #button.show span {
       font-size: 1.6rem;
   }

   a#button {
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

   a#button span {
       line-height: normal;
   }

   /*================================================== RWD ==================================================*/
   @media(max-width:1800px) {

       /*==================================================================================================== 1800px*/
       .container-l {
           width: 95%;
       }
   }

   @media(max-width:1500px) {

       /*==================================================================================================== 1500px*/
       .container-m {
           width: 90%;
       }
   }

   @media(max-width:1450px) {
       /*==================================================================================================== 1450px*/

       /* ===== 通用===== */
       .displaynone-1400 {
           display: none;
       }

   }

   @media(max-width:1400px) {
       /*==================================================================================================== 1400px*/

       /* ===== 通用 ===== */
       .displaynone-1400 {
           display: none;
       }

       .display-1400 {
           display: block;
       }
   }

   @media(max-width:1360px) {
       /*==================================================================================================== 1360px*/
       /* ===== 通用 ===== */

   }

   @media(max-width:1280px) {
       /*==================================================================================================== 1280px*/

       /* ===== 通用 ===== */
       .display-1280 {
           display: block;
       }

       .displaynone-1280 {
           display: none;
       }
   }

   @media(max-width:1200px) {

       /*==================================================================================================== 1200px*/
       /* ===== 通用 ===== */
       .display-1200 {
           display: block;
       }

       .displaynone-1200 {
           display: none;
       }

       /* ===== Header ===== */
       .header-btm .container-fluid {
           padding-right: 0px;
           padding-left: 0px;
       }

       .navbar-toggler {
           padding: .25rem 2rem;
       }

       .navbar-light .navbar-toggler {
           font-size: 2.4rem;
       }

       .navbar-nav {
           border-top: 1px solid #E2E2E2;
           /* margin: 2rem 0 0; */
       }

       li.nav-item {
           text-align: center;
           padding: 1.5rem 0;
           border-bottom: 1px solid #d0d0d0;
       }

       /* test */
       .navbar-toggler {
           padding: .25rem .75rem;
           position: relative;
           z-index: 1001;
           border: none;
       }

       .navbar-light .navbar-toggler {
           font-size: 2.4rem;
           border: none;
       }

       /* 自訂漢堡選單容器 */
       .navbar-toggler {
           width: 40px;
           height: 40px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           cursor: pointer;
       }

       /* 移除預設的 toggler icon，用自訂的 */
       .navbar-toggler-icon {
           display: none;
       }

       /* 建立三條線的容器 */
       .navbar-toggler::before,
       .navbar-toggler::after {
           content: '';
           display: block;
           width: 28px;
           height: 3px;
           background: #222;
           transition: all 0.3s ease;
           position: absolute;
       }

       .navbar-toggler::before {
           transform: translateY(-8px);
       }

       .navbar-toggler::after {
           transform: translateY(8px);
       }

       /* 中間的線 - 用 span 來做 */
       .navbar-toggler span {
           display: block;
           width: 28px;
           height: 3px;
           background: #222;
           transition: all 0.3s ease;
       }

       /* 當選單展開時，變成 X */
       .navbar-toggler[aria-expanded="true"]::before {
           transform: rotate(45deg);
       }

       .navbar-toggler[aria-expanded="true"]::after {
           transform: rotate(-45deg);
       }

       .navbar-toggler[aria-expanded="true"] span {
           opacity: 0;
           transform: scale(0);
       }

       /* 選單展開時的全白背景 */
       .navbar-collapse {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100vh;
           background: #ffffff;
           z-index: 1000;
           display: flex !important;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           opacity: 0;
           visibility: hidden;
           transition: opacity 0.15s ease, visibility 0.15s ease;
       }

       .navbar-collapse.show {
           opacity: 1;
           visibility: visible;
       }

       /* 選單項目樣式 */
       .navbar-nav {
           border-top: none;
           width: 100%;
           text-align: center;
           padding: 0;
       }

       li.nav-item {
           text-align: center;
           padding: 3.25rem 0;
           border-bottom: 1px solid #e0e0e0;
           font-size: 2rem;
       }

       li.nav-item:first-child {
           border-top: 1px solid #e0e0e0;
       }

       li.nav-item a {
           color: #222 !important;
           font-size: 2rem;
           transition: color 0.3s ease;
       }

       li.nav-item a:hover {
           color: var(--two-color) !important;
       }

       /* 防止背景滾動 */
       body.menu-open {
           overflow: hidden;
       }
   }

   @media(max-width:992px) {

       /*==================================================================================================== 992px*/
       /* ===== 通用 ===== */
       .display-992 {
           display: block;
       }

       .displaynone-992 {
           display: none;
       }

       .container-xs {
           width: 90%;
       }

       /* ===== Header ===== */
       .navbar {
           padding-top: 3rem;
       }

       /* ===== Footer ===== */

   }

   @media(max-width:800px) {
       .table-over-s {
           width: 800px;
       }
   }

   @media(max-width:768px) {

       /*==================================================================================================== 768px*/
       /* ===== 通用 ===== */

       h1 {
           font-size: 3rem;
       }

       h2 {
           font-size: 2.6rem;
       }

       h3 {
           font-size: 2.2rem;
       }

       h4 {
           font-size: 1.8rem;
       }

       h5 {
           font-size: 1.6rem;
       }

       p,
       li {
           font-size: 1.5rem;
           line-height: 2.4rem;

       }

       li span {
           font-size: 1.5rem;
       }

       ul,
       ol {
           margin: 0 0 0 -1.5rem;
       }

       .displaynone-768 {
           display: none !important;
       }

       .display-768 {
           display: block !important;
       }

       .footer-item {
           font-size: 1.4rem;
       }
   }

   @media(max-width:600px) {

       /*==================================================================================================== 600px*/
       /* ===== 通用 ===== */
       .display-600 {
           display: block;
       }

       a.navbar-brand div {
           font-size: 2.6rem;
       }
   }

   @media(max-width:576px) {

       /*==================================================================================================== 576px*/
       /* ===== 通用 ===== */
       .display-576 {
           display: block !important;
       }

       .displaynone-576 {
           display: none !important;
       }

       h4 {
           font-size: 1.5rem;
       }

       h5 {
           font-size: 1.4rem;
       }

       .footer-item:first-child {
           display: none;
       }

       #button {
           width: 60px;
           height: 60px;
           bottom: 40px;
           right: 25px;
       }

       #button.show span {
           font-size: 1.2rem;
       }

       /* ===== Distant ===== */
       .navbar-brand span,
       a.navbar-brand div {
           font-size: 2rem;
       }
   }

   @media(max-width:480px) {

       /*==================================================================================================== 480px*/
       /* ===== 通用 ===== */
       .display-480 {
           display: block;
       }

       .displaynone-480 {
           display: none;
       }

       /* ===== Header ===== */
       .navbar {
           padding-top: 2rem;
       }

       .navbar-light .navbar-toggler {
           padding: 0;
       }
   }

   @media(max-width:420px) {

       /*==================================================================================================== 420px*/
   }