@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');
@import url("notosanstc.css");
:root{
  --web-white-color: #ffffff;
  --web-black-color: #000000;
  --web-header-bg-color: #1fbecf;
  --title-card-bg-color: #ddeef7;
  --web-oval-border-color: #8bb6d2;
  --web-card-prompt-color: #566579;
  --web-border-color: #e6e6e6;

  --web-step-font-color: #455253;
  --web-step-active-color: #50c0ce;
  --web-input-border-color: #16afc3;
  --web-input-disabled-bg-color: #f1f8f9;
  --web-label-font-color: #1f1f1f;
  --web-lists-table-thead-color: #3c3c3c;
  --web-lists-table-tbody-tr-bg-color: #f6f8fb;
  --web-lists-table-tag-color: #8ad1d8;
  --web-lists-table-number-color: #909ba5;
  --web-lists-table-minutes-color: #545454;
  --web-lists-table-url-dis-color: #b5c8d7;
  --web-lists-table-url-color: #1f8bcf;

  --web-class-table-th-bg-color: #eff5fc;
  --web-class-table-th-font-color: #535353;
  --web-class-table-option-disabled-color: #c9ced5;
  --web-class-table-thead-border-color: #d4e5f9;

  --web-input-placeholder-font-color: #bababa;
  --web-input-border-color: #c7cbd8;
  --web-select-unselect-color: #acb7be;

  --web-class-table-card-ict-color: #d0f0f1;
  --web-class-table-card-sma-color: #e8fdcb;
  --web-class-table-card-bim-color: #d9e1ff;
  --web-class-table-card-sge-color: #ffe5c1;
  --web-class-table-card-nzs-color: #d0f2e9;

  --web-teacher-table-oval-color: #e3f2f2;

  --web-record-table-edit-font-color: #095891;
  --web-record-table-sign-process-bg-color: #ecf8ff;
  --web-record-table-sign-process-border-color: #92dcfd;
  --web-record-table-sign-finish-bg-color: #ecffe9;
  --web-record-table-sign-finish-border-color: #a9f79e;

  --web-upload-file-font-color: #3b7ddb;
  --web-upload-file-bg-color: #3b7ddb;
  --web-file-bg-color: #f5f6f9;
  --web-file-border-color: #dee7f3;

  --web-button-cancel-font-color: #2f2f2f;
  --web-button-gray-bg-color: #d8d8d8;
}

body{
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
  /**背景顏色 */
  background-color: var(--web-white-color);
  overflow-x: hidden;
  overflow-y: auto;
}

.bw {
  background-color: #fff;
}

.tw {
  color: #ffffff;
}

.flex_a_j_c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flex_align_c {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.ai-c {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.inherit {
  display: inherit;
}

.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.block {
  display: block;
}

.d-none {
  display: none;
}

.je {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.jfe {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.jfs {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.btween {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.jc {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.w100 {
  width: 100%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w50 {
  width: 50%;
}

.w30 {
  width: 30%;
}

.w33 {
  width: 33.3%;
}

.w80 {
  width: 80%;
}

.w20 {
  width: 20%;
}

.w85 {
  width: 85%;
}

.w15 {
  width: 15%;
}

.w60 {
  width: 60%;
}

.w40 {
  width: 40%;
}

.w45 {
  width: 45%;
}

.w25 {
  width: 25%;
}

.w49 {
  width: 49%;
}

.w55 {
  width: 55%;
}

.w88 {
  width: 88%;
}

.w12 {
  width: 12%;
}

.w90 {
  width: 90%;
}

.w10 {
  width: 10%;
}

.w95 {
  width: 95%;
}

.w5 {
  width: 5%;
}

.ls_005 {
  letter-spacing: 0.05rem;
}

.ls_075 {
  letter-spacing: 0.075rem;
}

.fb {
  font-weight: bold;
}

.cp {
  cursor: pointer;
}

.uncp{
  cursor: default !important;
}

.bn {
  border: 0;
}

.bni {
  border: 0 !important;
}

.btopni {
  border-top: 0 !important;
}

.bbotni {
  border-bottom: 0 !important;
}

.tj {
  text-align: justify;
}

.tc {
  text-align: center;
}

.ts {
  text-align: start;
}

.p-re {
  position: relative;
}

.p-ab {
  position: absolute;
}

.bt-0 {
  border-top: 0;
}

.hover-tw:hover,
.hover-tw:focus {
  color: #fff;
}

.tde-ul {
  text-decoration: underline;
}

.br-05 {
  border-radius: 0.5rem;
}

.br-1 {
  border-radius: 1rem;
}

.br-125 {
  border-radius: 1.25rem;
}

.mx-auto {
  margin: 0 auto;
}

.fs-p9 {
  font-size: 0.9rem;
}

.fs-1p75 {
  font-size: 1.75rem;
}

.alinkclear {
  color: unset;
  text-decoration: unset;
}

.alinkclear:hover {
  color: unset;
}

.mobile {
  display: none;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}

 /* Style the scrollbar */
 ::-webkit-scrollbar {
  height: 0px;
  width: 10px;
}

::-webkit-scrollbar-track {
  background: White;
  border-radius: 10px;
} 

::-webkit-scrollbar-thumb {
  background: var(--web-border-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--title-card-bg-color);
}
/* Style the scrollbar */

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

}

 @media (min-width: 768px) {
  header{
    height: 88px;
  }

}

@media (min-width: 1200px) {
  header{
    height: 88px;
  }

} */

/* 通用 */
.Oval{
  border-radius: 50px;
  width: 28px;
  height: 28px;
  margin: 0 4px 0 8px;
}

.Oval.light-blue{
  background-color: var(--web-oval-light-blue);
}

.Oval.blue{
  background-color: var(--web-oval-blue);
}

.Oval.dark-blue{
  background-color: var(--web-oval-dark-blue);
}

.Oval.light-green{
  background-color: var(--web-oval-light-green-color);
}

.blue{
  color: var(--web-font-blue-color);
}

.btn{
  font-size: 15px;
  font-weight: normal;
  color: var(--web-font-tool);
}

.flex-grow-equal {
  flex-grow: 1;
}

small{
  font-size: 10px;
  line-height: 10px;
}


.Triangle{
  width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 11px solid var(--web-triangle-purple);
  margin-left: 5px;
  margin-right: 5px;
}

.circle{
  width: 32px;
  height: 32px;
  margin: 0 8px 0 8px;
  border-radius: 80px;
  background-color: var(--web-circle-gray);
}

.align-right {
  margin-left: auto;
  text-align: right;
}

.accordion-body .gray{
  background-color: var(--web-accrodion-gray);
}

.devide-line{
  height: 28px;
  width: 0.5px;
  background-color: var(--web-white-color);
  opacity: 0.35;
}

input.bigcheckbox {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: none;
}

.underline{
  border-bottom: solid 1px var(--web-border-color);
}

input[type=checkbox] {
	accent-color: #44aaaf;
  cursor:pointer;
}

textarea.noresize {
	resize: none;
}

.varela-round-regular {
  font-family: "Varela Round", sans-serif;
  font-weight: 600;
  font-style: normal;
}

/* header */

.wrapper header{
  height: 100px;
   margin-left:50px;  
}

.wrapper header .primary-title{
  font-size: 18px;  
  transition: all 0.3s;
}

.wrapper header .primary-title .varela-round-regular {
  letter-spacing: -2px;
  margin-right: 5px;
}

.wrapper header .menus{
  transition: all 0.3s;  
  font-size: 16px;
}

.wrapper header .menus .menu img{
  margin-right: 10px;
}

.wrapper header .burger{
  /*position: relative;
  margin: 20px 20px 0px 20px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  transform: translateY(20px) translateX(-50px);*/
}

.wrapper header .burger .Rectangle {
  width: 25px;
  height: 3px;
  margin: 7px 10px 0 0;
  background-color: #acbbc4;
}
.wrapper header .burger .Rectangle2 {
    width: 20px;
    height: 3px;
    margin: 7px 10px 0 0;
    background-color: #acbbc4;
}
.wrapper header .burger .Rectangle3 {
    width: 15px;
    height: 3px;
    margin: 7px 10px 0 0;
    background-color: #acbbc4;
}

    .wrapper header .burger .Rectangle-black {
        width: 25px;
        height: 3px;
        margin: 7px 10px 0 0;
        background-color: #2f3c51;
    }
 

 


/*自定義RWD*/

 @media (max-width: 768px) {
    .d-md-block.d-none {
        display: none;
    }
    .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .wrapper header {
        margin-left: 0px;
    }
}

 

 

 




 
/*標題header*/
@media (min-width: 1200px) {
    .primary-title .title {
        font-family: NotoSansTC;
        font-size: 22px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1px;
        text-align: left;
        color: #2a3950;
    }

    .circleBox .hoverBox img{
        height: 150px; 
    }
}
@media (max-width: 1200px) {
    .primary-title .title {
        font-size: 20px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        width: 100%;
    }

        .earth-background {
    background-color: #eef0fa;
    border-radius: 50%;
    padding: 4px;
  }

     .earth-icon-mobile {
    display: flex !important;
    position: absolute;
    right: 10px;
    top: 40px;
  }

    .primary-title .img-log {
        width: 50px;
    }


}

@media (max-width: 768px) {
    .primary-title .title {
        font-size: 18px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        width: 100%;
    }
}

@media (max-width: 576px) {
    .primary-title .title {
        font-size: 16px;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        width: 100%;
        transform: translate(-80px, 0px);
    }
}

@media (max-width: 768px) {
    .primary-title .img-log {
        width: 50px;  
    }
}

@media (max-width: 576px) {
    .primary-title .img-log {
        width: 34px; 
    }
}



/*小螢幕卡片設置*/
.carousel-control-prev, .carousel-control-next {
    position: absolute;
    top: 15%; /* 置中於垂直方向 */
    z-index: 5;
}

.carousel-control-prev {
    left: -30px; /* 或其他您希望的值 */
    opacity: 1.0 !important;
}

.carousel-control-next {
    right: -30px; /* 或其他您希望的值 */
    opacity: 1.0 !important;
}



.carousel-control-prev-inp, .carousel-control-next-inn {
    position: absolute;
    top: 60%; /* 置中於垂直方向 */
    z-index: 5;
}

.carousel-control-prev-inp {
    left: -10px; /* 或其他您希望的值 */
}

.carousel-control-next-inn {
    right: -10px; /* 或其他您希望的值 */
}


/*按鈕箭頭*/

.p-icon-right {
    position: absolute;
    /*right: -45px;*/ /* 調整這個值來控制圖標距離右側的位置 */
    top: 50%; /* 將圖標定位到父元素的垂直中心 */
    transform: translateY(-50%); /* 確保圖標完全居中對齊 */
    z-index: 1; /* 確保圖標位於其他元素之上 */ 
    width: 80px;
    height: 80px; 
    cursor: pointer;
}

.p-icon-left {
    position: absolute;
    /*left: -50px;*/ /* 調整這個值來控制圖標距離右側的位置 */
    top: 50%; /* 將圖標定位到父元素的垂直中心 */
    transform: translateY(-50%); /* 確保圖標完全居中對齊 */
    z-index: 1; /* 確保圖標位於其他元素之上 */      
    width: 80px;
    height: 80px;
    cursor: pointer;
 
}

.i-icon-left {
    /*position: absolute;
    right: 85%;*/ /* 調整這個值來控制圖標距離右側的位置 */
    /*top: 75%;*/ /* 將圖標定位到父元素的垂直中心 */
    /*transform: translateY(-50%);*/ /* 確保圖標完全居中對齊 */
    /*z-index: 1;*/ /* 確保圖標位於其他元素之上 */ 
    width: 80px;
    height: 80px; 
    cursor: pointer;
}

.i-icon-right {
    /*position: absolute;
    left: -40%;*/ /* 調整這個值來控制圖標距離右側的位置 */
    /*top: 75%;*/ /* 將圖標定位到父元素的垂直中心 */
    /*transform: translateY(-50%);*/ /* 確保圖標完全居中對齊 */
    /*z-index: 1;*/ /* 確保圖標位於其他元素之上 */      
    width: 80px;
    height: 80px;
    cursor: pointer;
 
}

 

/*封面卡片變小來適應RWD*/
 @media (min-width: 768px) and (max-width: 1200px) {
    .circleBox.d-md-flex {
        flex-direction: column;
        align-items: center;
    }

    .circleBox .row {
        flex-direction: column;
        align-items: center;
    }

    .circleBox .circleOne, .circleBox .circleTwo {
        width: 100%; /* 每个项目占据100%的宽度 */
        margin-bottom: 20px; /* 每个项目底部间距 */
    }

    .circleBox .hoverBox {
        width: 100%; /* 每个hoverBox占据100%的宽度 */
    }

    .circleBox .resource-title, .circleBox .resource-subtitle {
        text-align: center;
        width: 100%;
    }

    .resource-title{
      font-size: 30px !important;
    }

    .resource-subtitle{
      font-size: 23px !important;
    }

    .content .bg {
      height: 730px !important;
    }


}
 


/*輪播效果卡片*/

@media (max-width: 768px) { /* 針對小於768px寬的螢幕設計樣式 */
    .card-body.blue {
       position: absolute !important; 
        left: 50% !important; /* 維持左偏移為50% */
        top: -0.5% !important; /* 新增頂部偏移為50% */       
        transform: translate(-50%, -50%) !important; /* 調整轉換以確保完全居中 */
        width: 85% !important; /* 在小螢幕上增加寬度百分比以適應較小空間 */
        text-align: center !important;
        font-size: 1.2em !important;
        border-radius: 25px !important;
       
    }

    .info-card{
     /* padding: 30px 10px !important;*/
      border-radius:10px !important;
      transform:translateX(0px) !important;
      margin: 0px !important; 
     
      
    }

    .info-card img {
     
  }

  .info-text{
    font-size: 32px !important;
   /*  margin-left: 10px !important; */
  }

    .circleBox.container-xxl .col-md-4{
        width: 85% !important; /* 調整寬度以適應較小螢幕 */
        margin: 20px auto; /* 讓元素居中 */
        padding: 0 !important; /* 移除多餘的內邊距 */
    }

    .earth-background {
    background-color: #eef0fa;
    border-radius: 50%;
    padding: 4px;
  }

  .card1 .chartContainer{
     padding-left: 5px; /* 左邊間距 */
  padding-right: 20px; /* 右邊間距 */
  }


     .earth-icon-mobile {
    display: flex !important;
    position: absolute;
    right: 10px;
    top: 40px;
  }

  .resource-title{
    font-size: 30px !important;
  }

  .resource-subtitle{
    font-size: 24px !important;
  }

  .content .circleBox .textBox .itemName{
    font-size: 20px !important;
  }
 
 
 
}


/*測邊菜單欄*/
@media (max-width: 1235px) {
    .col-auto.col-md-3.col-xl-2 {
        display: none !important;
    }

    .hamburger-menu {
        display: block !important;
    }

    .nav-side-menu {
        display: none;
    }
}

.hamburger-menu {
    display: none;
    font-size: 30px;
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}


@media (min-width: 1235px) {
  header{
    justify-content: space-between;
  }

  .wrapper header .primary-title{
    margin-left: 30px;
  }

  .wrapper header .menus{
    margin-right:50px;
    gap: 30px;
  }

  .wrapper header .menus{
    display:flex !important;
  }
}





/*W1*/

@media (max-width: 1600px) {

  .number{
    font-size: 18pt;      
  }

  .large-car{
    margin-left: 5px !important;
  }

  .large-icon{
    margin-left: 5px !important;
  }

  .info-card{
    /*transform: translateX(30px) !important;*/
  }

}

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

    .card1{
   /* width: 90% !important; 
    margin : 50px 55px !important;*/
  }

   .info-card{
      padding: 10px 0px !important; 
    /*  transform: translateX(15px) !important;    */
    }

    .info-text {
        font-size: 16px !important;
        letter-spacing: 2.0px;
        /*   margin-left: -25px !important; */
    }

      /* 768 */
       .card-body.blue {
     width: 85% !important;    
    margin: 0 auto !important; 
  }

    .large-car{
      margin-left: 0px !important;
    }

    .large-icon{
       margin-left: 0px !important;
    }

    

}


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

  .info-card{
      padding: 10px 10px !important; 
   /*   transform: translateX(-35px) !important;*/
      
    }
}


@media (max-width: 872px) {

   .info-card{
       /* transform: translateX(0px) !important;*/

   }
   .info-text{
     /*  margin-left: -50px !important;*/
   }
 
        
  
} 


@media (min-width: 1235px) and (max-width: 1420px) {
  

  .info-card{
      padding: 10px 10px !important; 
/*      transform: translateX(35px) !important;*/
      
    }

    .info-text{
      font-size:18px !important;
    /*  margin-left: -15px !important; */
      
    }

    .large-icon { 
    height: 110px !important; /* 根據您的需求調整大小 */
    width: 110px !important; /* 保持寬高一致 */
    margin-bottom: -15px !important;
    margin-left: 0px !important;
} 
 
.large-car { 
    height: 110px !important; /* 根據您的需求調整大小 */
    width: 110px !important; /* 保持寬高一致 */
    margin-bottom: -30px !important;     
    margin-left: 0px !important;
  } 


}


@media (min-width: 768px) and (max-width: 1420px) {
    .col-12.col-md-4.d-flex.mb-3.flex-column {
        width: 100% !important;  
        max-width: none !important;  
        flex: 0 0 100% !important;  
    }
                                  
    .col-12.col-md-4.chartContainer {
        width: 50% !important;  /* 將寬度設置為50% */
        max-width: none !important;  
        flex: 0 0 50% !important;  
    }

    .pie-chart {
    width: 50% !important;  /* 將寬度設置為50% */
    max-width: none !important;  
    flex: 0 0 50% !important;  
  }




    .chartContainer {
        width: 100% !important; /* 調整 chartContainer 的寬度 */
        max-width: none !important;
        flex: 0 0 100% !important;
        background-color: white;
        border-radius: 20px;
    }


    .col-12.col-md-4.d-flex.mb-3.flex-column{
      padding-left: 15px !important;
      padding-right: 10px !important;
    }

     /*.col-12.col-md-6 {
        width: 100% !important;  
        max-width: none !important;  
        flex: 0 0 103% !important;  
        margin-left: 0% !important;*/  /* 左邊距設置為2% */      
    /*}*/

}

@media (max-width: 768px) {
   
    .card1 {
        /* width: 95% !important;    */
        height: auto !important;
        border-radius: 10px !important;
        min-height: 500px !important;
        padding: 10px !important;
        margin: 0px 20px !important;
        margin-top: 50px !important;
    }

     .custom-row {
      flex-direction: column;  
    }

    .card-body{
       padding-right: 10px !important;   
        padding-left: 10px !important;    
    }

   
    .card1 .col-12.col-md-4.d-flex.mb-3.flex-column {
        flex: 1 1 92% !important;   
        max-width: 92% !important;  
        padding-left: 15px !important;  
        padding-right: 0px !important;  
         min-height: 200px;
    }

      .card1 .bg-turquoise, .card1 .bg-white {
 
        padding: 12px !important;  
        border-radius: 15px !important;  
        min-height: 170px;  
        width: 102% !important;
 
    }

    .large-car , .large-icon{
      margin-left: 5px !important;
    }

    .large-car{
      height: 120px !important;
      width: 120px !important;
    }

    .number{
      font-size:40px !important;
      margin-bottom: 5px;
    }

    /*.small-text {
    font-size: 18pt !important;
  } */

  .content .circleBox .textBox .active{
    top:15px !important;
  }

}

 
 

/*W2*/

@media (max-width: 1235px) {
  .card2{
    width: 90% !important;
     margin : 50px 55px !important;
  }
}

@media (min-width: 769px) and (max-width: 1420px) {
  .card2{
    height: auto !important;
   
  }
}


@media (max-width: 768px) {
    .card2 {
        width: 95% !important;         /* 寬度 */
        height: auto !important;         /* 高度 */
        margin: 20px !important; /* 減少外邊距 */      
        border-radius: 10px !important; /* 調整圓角大小 */
        background-color: #dbedf5 !important;
        padding:5% 3% !important;
    }

    .button-container{
      gap: 50px !important;
      top: 70px !important;;
    }



}

/*W3*/

@media (max-width: 1768px) {
    
   .circle-indicator, .circle-indicator1, .circle-indicator2, .circle-indicator3, .circle-indicator4, .circle-indicator5, .circle-indicator6, .circle-indicator7 {
        font-size: 14px;
    }

      .circle-indicator-n, .circle-indicator1-n, .circle-indicator2-n, .circle-indicator3-n, .circle-indicator4-n, .circle-indicator5-n, .circle-indicator6-n, .circle-indicator7-n {
        font-size: 12px;
    } 

    .unit-text { 
    width: 100%;       
    font-size:10px !important;   
  }

  .text{
    font-size: 13px !important;
  }

}

@media (max-width: 1235px) {
  .card3{
    width: 90% !important;
    margin : 50px 55px !important;
  }
}

@media (max-width: 1420px) {
    /*.card3 .card-body .row {
        flex-direction: column;*/ /* 調整排版方向 */
    /*}

    .card3 .col-md-4 {
        width: 100%;*/ /* 讓標題和文本佔據整個寬度 */
    /*}

    .card3 .col-md-8 {
        width: 100%;*/ /* 讓指標項目佔據整個寬度 */
    /*}*/ 


    .circle-indicator,
    .circle-indicator1,
    .circle-indicator2,
    .circle-indicator3,
    .circle-indicator4,
    .circle-indicator5,
    .circle-indicator6,
    .circle-indicator7 {
        padding: 16px 24px !important ;  
    }


    .circle-indicator-n,
    .circle-indicator1-n,
    .circle-indicator2-n,
    .circle-indicator3-n,
    .circle-indicator4-n,
    .circle-indicator5-n,
    .circle-indicator6-n,
    .circle-indicator7-n {
        display: flex;
        justify-content: space-between;  
        align-items: center;  
        padding: 16px 24px !important ;  
    }


 
}



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

    .card3{
      height: auto !important;      
    }

    .text {
        padding-left: 15px;
        padding-right: 15px;
    }

    .circle-indicator, .circle-indicator1, .circle-indicator2, .circle-indicator3, .circle-indicator4, .circle-indicator5, .circle-indicator6, .circle-indicator7 {
        font-size: 14px;
        padding: 12px 12px !important;
    }

      .circle-indicator-n, .circle-indicator1-n, .circle-indicator2-n, .circle-indicator3-n, .circle-indicator4-n, .circle-indicator5-n, .circle-indicator6-n, .circle-indicator7-n {
        font-size: 12px;
    } 

    .title{
    /*display: flex;
    justify-content: center;  */
   }
  
    .unit-text { 
    width: 100%;       
    font-size:10px !important;   
  }

  .text{
    font-size: 16px !important;
  }
     
  /*.title{
    font-size:18px !important;
    align-items:center ;
  }*/


  

}

@media (max-width: 768px) {
    .card3 {
        width: 95% !important;         /* 寬度 */
        height: auto !important;         /* 高度 */
        margin: 20px !important; /* 減少外邊距 */      
        border-radius: 10px !important; /* 調整圓角大小 */
        background-color: #dbedf5 !important;
        padding:5%!important;
    }

    /*.text {
        padding-left: 15px;
        padding-right: 15px;
    }*/

    .circle-indicator, .circle-indicator1, .circle-indicator2, .circle-indicator3, .circle-indicator4, .circle-indicator5, .circle-indicator6, .circle-indicator7 {
        font-size: 12px;         
         
    }

      .circle-indicator-n, .circle-indicator1-n, .circle-indicator2-n, .circle-indicator3-n, .circle-indicator4-n, .circle-indicator5-n, .circle-indicator6-n, .circle-indicator7-n {
        font-size: 10px;           
    } 

    /*.title{
    display: flex;
    justify-content: center;  
   }*/
  
    .unit-text { 
    width: 100%;       
    font-size:8px !important;   
  }


}

@media (max-width: 661px) {


    .circle-indicator, .circle-indicator1, .circle-indicator2, .circle-indicator3, .circle-indicator4, .circle-indicator5, .circle-indicator6, .circle-indicator7 {
        font-size: 12px; /* 縮小文字大小 */
        flex-wrap: wrap;  
       
        align-items:flex-start !important;           
    }

      .circle-indicator-n, .circle-indicator1-n, .circle-indicator2-n, .circle-indicator3-n, .circle-indicator4-n, .circle-indicator5-n, .circle-indicator6-n, .circle-indicator7-n {
        font-size: 12px; /* 縮小文字大小 */
        flex-wrap: wrap;  
        flex-direction: column;
        align-items:flex-start !important;  
      }

      .unit-text { 
        width: 100%;       
        font-size:8px !important;  
        /*text-align: left !important;*/ 
        margin-left: 0 !important;
      }

      .unit-textw4 { 
      width: 100%;       
      font-size:8px !important;  
      padding-left: 15px; 
  }

      .circle-indicator,
      .circle-indicator1,
      .circle-indicator2,
      .circle-indicator3,
      .circle-indicator4,
      .circle-indicator5,
      .circle-indicator6  {
        display:flex !important;
        
          padding: 12px 12px !important ;  
      }

      .circle-indicator7{
        padding: 16px 12px !important;
      }

      .circle-indicator-n,
      .circle-indicator1-n,
      .circle-indicator2-n,
      .circle-indicator3-n,
      .circle-indicator4-n,
      .circle-indicator5-n,
      .circle-indicator6-n {
          padding: 12px 12px !important ;  
      }

       .circle-indicator7-n {
          padding: 17px 12px !important ;  
      }

       .img-border {
        padding: 12px 0px ;      
      }

      .circle-indicator::before,
      .circle-indicator1::before,
      .circle-indicator2::before,
      .circle-indicator3::before,
      .circle-indicator4::before,
      .circle-indicator5::before,
      .circle-indicator6::before,
      .circle-indicator7::before {
         transform: translateY(5px);
      }


      .card3 .card-body .row .col-12 .w4{
        margin-left:-8px;
      }

      /*.card3 .card-body .row .col-12{
        margin-left:-8px;
      }*/


}


/*W4*/

@media (max-width: 1235px) {
  .card4{
    width: 90% !important;
      margin : 50px 55px !important;
  }
}

@media (min-width: 769px) and (max-width: 1420px) {
  
  .card4{
    height: auto !important;
    
  }

}



@media (max-width: 768px) {
   .card4 {
    min-height: 200px !important;
        width: 95% !important;         /* 寬度 */
        height: auto  !important;         /* 高度 */
        margin: 20px !important; /* 減少外邊距 */      
        border-radius: 10px !important; /* 調整圓角大小 */
        background-color: #dbedf5 !important;
        padding: 5px !important; /* 內邊距縮小 */
    }

    .card4 .title {
      font-size: 20px;
    }


}


/*footer rwd*/

@media (max-width: 768px) {
   .footer .desktop {
        display: none !important;  /* 確保桌面版鏈接在小裝置上隱藏 */
    }
    .footer .detect.mobile {
        display: block; /* 在小屏幕上顯示手機版鏈接 */
        text-align: center;
    }
    .footer .detect.mobile .top-links span,
    .footer .detect.mobile .bottom-links span {
        display: inline-block; /* 使連結在同一行顯示 */
        padding: 0.5rem; /* 添加內距 */      
        text-decoration: underline; /* 底線 */
    }
  
    .footer .detect.mobile .top-links {
        margin-bottom: 1rem; /* 上下連結間的距離 */
    }

    .large-screen {
        display: none !important; /* 小螢幕隱藏 */
    }
    .small-screen {
        display: block !important;/* 小螢幕顯示 */
    }

    .footer .address {
        padding: 0 35px; /* 小螢幕時減少一些內邊距，根據需要調整 */
        font-size: 16px !important;
    }

    .footer .copyright{
      font-size: 16px !important;
    }
    
}

/*自定義整體大畫面*/
.wrapper .img-log{   
   margin-right:10px;  
}

.wrapper .d-flex-font a {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding: 5px 20px;
    color: #2a3950;
}

.wrapper .d-flex-font a:hover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 6px;
    background-color: #327abe;   
}
 
.search {
    position: relative;
    width: 30%;
}

/*.search img {
    position: absolute;
    right: 10px;
    top: 50%;  
    transform: translateY(-50%);  
    height: 30px;  
    width: 30px;  
    cursor: pointer;
}*/

.search input {
    border-radius: 29px;
    background-color: #f4f8f9;
    border-color: #f4f8f9;
    border-style: unset;
    line-height: 35px;
    padding: 0 12px;
    color: #9fb2b7;
    font-size: 14px;
    letter-spacing: 0.44px;
}

 .search input::placeholder {
    color: #9fb2b7;
    font-size: 14px;
    letter-spacing: 0.44px;
}

/**搜尋 icon*/
.desktop .master_search {
    border: 0;
    background: none;
    position: absolute;
    right: 0px;
    top: 4px;
}


header > .menus-container .menus a {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    font-size: 15px;
    letter-spacing: 1.44px;
    color: #9fb2b7;
    text-decoration: none;
}

header > .menus-container .menus i::after {
    content: "";
    height: 12px;
    background: #9fb2b7;
    width: 1px;
    display: inline-block;
    vertical-align: -1;
}


.card1 {
    /*  width: 90%;         寬度 */

    border-radius: 18px; /* 圓角邊框 */
    background-color: #edf3f6; /* 背景顏色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
    position: relative;
    border: none;
}

.card2 {
    /*  width: 66%;          寬度 */
    height: 18%; /* 高度 */
    /* margin: 50px 103px 46px 100px;  外邊距 */
    /* padding: 5px 33px 24px 32px;  內邊距 */
    border-radius: 18px; /* 圓角邊框 */
    background-color: #edf3f6; /* 背景顏色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
    position: relative;
    border: none;
}

.card3 {
    /* width: 66%;          寬度 */
    /* margin: 50px 103px 46px 100px;  外邊距 */
    /* padding: 50px 33px 24px 32px;  內邊距 */
    border-radius: 18px; /* 圓角邊框 */
    background-color: #edf3f6; /* 背景顏色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
    position: relative;
    border: none;
}

.card4 {
    /*  width: 66%;          寬度 */
    /* margin: 50px 103px 46px 100px;  外邊距 */
    /* padding: 50px 33px 24px 32px;  內邊距 */
    border-radius: 18px; /* 圓角邊框 */
    background-color: #edf3f6; /* 背景顏色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
    position: relative;
    border: none;
}


.w1{
 
    background-color: #dbedf5;  
}
 
.card:first-child {
    background-color: #dbedf5;  
}


/*menu*/
 
@media (max-width: 1620px) {
    .nav-side-menu {
      /*width: 100% !important;*/
     /* margin-left: 45px !important;*/
    }
  }

 
 @media (max-width: 1400px) {
    .nav-side-menu {
      /*width: 16% !important;*/
     /* margin-left: 45px !important;*/
    }
  }

.nav-side-menu {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 80px; /* 保持與頂部的距離，根據需要調整 */
    margin-top: 50px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 輕微的陰影 */
    padding: 10px;
    /*width: 100%;*/
    width: 16%;
    box-sizing: border-box;
    z-index: 1000; /* 確保菜單欄在滾動時不會被其他元素覆蓋 */
}
 
 
.nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;  
    color: #7d8fb3;
  
    text-decoration: none;
    border-radius: 20px;
    transition: background-color 0.3s;   
    margin-bottom: 5px;
    background-color: #fff; 
    box-sizing: border-box;  
    box-shadow: 0 0.3px 0px rgba(0,0,0,0.1);  
      padding-left: 20px; 
    
}

 

.home-link {
    text-align: left; /* 確保文本對齊到左側 */
   
}
    .home-link img.icon-home {
        filter: drop-shadow(1px 1px 1px #82d2dc);
    }
    .home-link > .icon-home {
        margin-right: 10px; /* 將房屋圖標推到最左側 */
    }
.nav-link .icon-arrow {
    margin-left: auto; /* 確保箭頭在右側 */
}




 
 
/* 鼠標懸停和活動狀態 */
.nav-link:hover, .nav-link.active {
    background-color: #82d2dc !important; 
    color: #fff;
     padding-left: 20px; 
}

 .icon-home, .icon-arrow {
    margin-right: 8px;  
}

 .nav-item {
    width: 100%;   
    display: flex;    
    
}


/*desktop*/
.content .circleBox{
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.content{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: hidden;  
  
}

.content .circleBox .circleOne{
  text-align: center;
  position: relative;
  
}

.content .circleBox .circleOne .hoverBox img{
 
  border-radius: 5px;
}

.content .circleBox .circleTwo .hoverBox img{
 
  border-radius: 5px;
}


.content .circleBox .textBox{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
}

.content .circleBox .textBox .year{
  border-radius: 24px;
  color: #FFF;
  font-size: 15px;
  margin-bottom: -45px;
}



.content .circleBox .textBox .itemName{
  margin-top: 25px;
  font-size: 20px;
  letter-spacing: 2.5px;
  color: #fff;
}

.content .circleBox .textBox .itemNameKG{  
  font-size: 10px;
  letter-spacing: 2.59px;
  color: #fff;
  width: 100%;
  position: relative;
  top:-15px;
}


.content .circleBox .textBox .itemName div:nth-child(2){
  font-size:40px;
}

.content .circleBox .textBox .number{
color: #fff;
font-size: 45px;
 
}

.content .circleBox .textBox .active {
    font-size: 21px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    /*position: relative;*/
    /*top:30px;*/
    color: #344b88;
    font-weight: bold;
    font-weight: 550;
    margin-top:-15px;
}

 .content .circleBox .textBox .Green{
  color:#08643d;
 }

.content .circleBox .textBox .color5727aa {
    color: #5727aa;
}

.content .circleBox .textBox .active img{
  height:24px;
  margin-right:10px;
  margin-top:-5px;

}

.content .circleBox .textBox .active span{
  font-size: 12px;
}

.content .circleBox .circleTwo{
  text-align:center;
  position: relative;
}

.resource-title {
    font-size: 44px; /* 根據您的設計需求調整字體大小 */
    color: #FFFFFF; /* 白色字體 */
    letter-spacing: 20px; /* 字元間距 */
    margin-bottom: 20px; /* 增加主標題與副標題之間的行距 */

    text-shadow: 0 4px 30px #2f42a7, 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: .SFNSRounded-G4;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 14px;
}

.resource-subtitle {
    font-size: 27px; /* 根據您的設計需求調整字體大小 */
    color: #FFFFFF; /* 白色字體 */
    margin-top: 10px; /* 添加一點上邊距來分開標題和副標題 */
    letter-spacing: 10px; /* 字元間距 */

    text-shadow: 0 4px 30px #2f99a7, 0 4px 4px rgba(0, 0, 0, 0.25);
    font-family: .SFNSRounded-G4;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 14px;
}
     

/*Content*/

.circleBox .cp {
    width: 100%;
    height: 175px;
}

.info-card {
    background-color: #3585cf;
    padding: 15px 10px;
    margin: -15px;
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    white-space: nowrap;
}
.info-card-bg1 {
    background-color: #3585cf;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.info-card-bg2 {
    background-color: #19548c;
}
.info-card-bg3 {
    background-color: #4399e8;
}
.info-card-bg4 {
    background-color: #3585cf;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.w-95 {
    width: 95% !important;
}

.w-90 {
    width: 90% !important;
}





.info-icon {
    height: 50px;
   /* margin-right: 60px;
    margin-left: 10px;*/
}

.info-card:hover {
    /*background-image: linear-gradient(130deg,rgba(255, 255, 255, 0.08) 40%, #27bbe9 40%);*/
    background-color: #4399e8;
}

.info-text {
    font-size: 18px;
    color: #fff;
    letter-spacing: 2.59px;
    /* margin-left: -5px;*/
}

.card-main {
    position:relative;
}

.card-body.blue {
    /* top:50%;*/
    position: absolute;
    top: -50%;
    left:50%;
    transform: translate(-50%, -50%);
   
}

.info-card.active {
    /*background-image: linear-gradient(130deg,rgba(255, 255, 255, 0.08) 40%, #27bbe9 40%);*/
    background-color: #19548c;
}



/*window 1*/

.col-12.col-md-4.d-flex.mb-3.flex-column {
    flex: 0 0 33%; /* 將寬度調整為 30% */
    max-width: 33%; /* 最大寬度 30% */
    padding-left: 5px; /* 調整左右 padding 以縮小間距 */
    padding-right: 5px;
}


 .d-flex.flex-column > .flex-fill {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 使内容垂直均匀分布 */
}

.bg-turquoise {
    background-color: #5cb7cc;
    color: #ffffff; /* 將文字顏色設為白色以增加可讀性 */
}

.number {
    font-size: 26pt; /* 設定字體大小為34pt */
    transform: translateY(20px);
}

.custom-color {
    color: #fff; /* 可以根據需要調整顏色 */
}

.house { 
    color: #1a3b6d; /* 可以根據需要調整顏色 */
} 
 
.icon-bg { 
    background-color: #edf3f6; /* 设置背景颜色 */
    border: 3px solid #edf3f6; /* 设置边框 */
    border-radius: 8px; /* 设置圆角 */
    padding: 5px; /* 添加内边距 */
    margin-top: -8px;
    display: inline-block; /* 保持图标大小 */
  
} 

.icon-car { 
    background-color: rgba(255, 255, 255, 0.16); /* 设置背景颜色 */  
    border-radius: 8px; /* 设置圆角 */
    padding: 4px; /* 添加内边距 */
    margin-top: -8px;
    display: inline-block; /* 保持图标大小 */
 
} 

.large-icon { 
    height: 110px; /* 根據您的需求調整大小 */
    width: 110px; /* 保持寬高一致 */
    margin-bottom: -15px;
    margin-left: 20px ;
} 
 
.large-car { 
    height: 110px; /* 根據您的需求調整大小 */
    width: 110px; /* 保持寬高一致 */
    margin-bottom: -30px;     
    margin-left: 20px;
  } 
 
.chart-icon-rightw1 { 
    position: absolute;
    right: -1%; /* 調整這個值來控制圖標距離右側的位置 */
    top: 45%; /* 將圖標定位到父元素的垂直中心 */
    transform: translateY(-50%); /* 確保圖標完全居中對齊 */
    z-index: 1000; /* 確保圖標位於其他元素之上 */ 
    width: 120px;
    height: 120px; 
    cursor: pointer;
}
.chart-icon-lefttw1 {
    position: absolute;
    left: -1%; /* 調整這個值來控制圖標距離右側的位置 */
    top: 45%; /* 將圖標定位到父元素的垂直中心 */
    transform: translateY(-50%); /* 確保圖標完全居中對齊 */
    z-index: 1000; /* 確保圖標位於其他元素之上 */
    width: 120px;
    height: 120px;
    cursor: pointer;
} 

.chart-wrapper { 
    position: relative;
    width: 100%;
    height: 350px; /* 根據需要調整高度 */
} 

.small-text {
    font-size: 12pt;
}



.circle-background { 
    position: absolute;
    top: 53%;
    left: 50%;
    width: 45%;
    height: 48%;
    background-color: transparent; /* 背景設為透明 */
    border-radius: 50%; /* 使其成為圓形 */
    transform: translate(-50%, -50%);
    z-index: 1;
    border: 10px solid #eef0fa; /* 添加灰色的邊框，你可以調整邊框的粗細 */
} 


.circle-background-business { 
    position: absolute;
    top: 60%;
    left: 50%;
    width: 41%;
    height: 43%;
    background-color: transparent; /* 背景設為透明 */
    border-radius: 50%; /* 使其成為圓形 */
    transform: translate(-50%, -50%);
    z-index: 1;
    border: 10px solid #eef0fa; /* 添加灰色的邊框，你可以調整邊框的粗細 */
} 


/*window 2*/

.button-style {
    padding: 8px 16px; 
    background-color: #fff;
    color: #7d8fb3;   
    border: none;     
    border-radius: 20px !important;
}

.button-style:hover, .button-style.active {
    background-color: #12b5d8;
    color: #fff;
    border-color: #12b5d8;   
    padding: 8px 30px; 
}
 
 
.chart-container {
   position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* 確保子元素居中對齊 */
  
}

.button-container {
    display: flex;
    justify-content: center;
    position: relative;
    gap:40px;
    top: 50px; /* 根據需要調整這個值，讓按鈕位置更接近圖表上方 */
    z-index: 2; /* 確保按鈕在圖表之上 */
}

.chart-icon-right {
    position: absolute;
    right: -55px; /* 調整這個值來控制圖標距離右側的位置 */
    top: 55%; /* 將圖標定位到父元素的垂直中心 */
    transform: translateY(-50%); /* 確保圖標完全居中對齊 */
    z-index: 1000; /* 確保圖標位於其他元素之上 */ 
    width: 120px;
    height: 120px; 
    cursor: pointer;
}

.chart-icon-left {
    position: absolute;
    left: -55px; /* 調整這個值來控制圖標距離右側的位置 */
    top: 55%; /* 將圖標定位到父元素的垂直中心 */
    transform: translateY(-50%); /* 確保圖標完全居中對齊 */
    z-index: 1000; /* 確保圖標位於其他元素之上 */      
    width: 120px;
    height: 120px;
    cursor: pointer;
 
}


/*window 3*/

/* 基本段落樣式 */
.text {
    font-family: 'Noto Sans TC', sans-serif; /* 這應該與您的整體設計一致 */
    font-size: 14px; /* 字體大小，根據需要調整 */
    font-weight: 400; /* 字體粗細 */
    color: #2d496b; /* 文字顏色 */
    line-height: 2.0; /* 行高 */
    letter-spacing: 0.5px; /* 字元間距 */
    text-align: justify; /* 文字對齊 */
    margin-bottom: 20px; /* 段落之間的間距 */
}


/*.col-4 {
    display: flex;
    align-items: center;*/ /* 垂直居中內容 */
    /*justify-content: center;*/ /* 水平居中內容 */
/*}*/

.circle-indicator,
.circle-indicator1,
.circle-indicator2,
.circle-indicator3,
.circle-indicator4,
.circle-indicator5,
.circle-indicator6,
.circle-indicator7 {
    padding: 12px 24px ;  
}


.circle-indicator-n,
.circle-indicator1-n,
.circle-indicator2-n,
.circle-indicator3-n,
.circle-indicator4-n,
.circle-indicator5-n,
.circle-indicator6-n,
.circle-indicator7-n {
    display: flex;
    justify-content: space-between;  
    align-items: center;  
    padding: 12px 16px ;  
}

.value {
    text-align: left;  
}

.unit-text {
    font-size: 0.75rem; /* 設定單位的字型大小 */
    color: #637d8f; /* 設定單位的字體顏色，可選用淺灰色增加區分度 */
    margin-left: auto; /* 自動邊距推到右邊 */
    
}

.circle-indicator::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #12b5d8; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */ 
}

.circle-indicator1::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #3ee3bc; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}

.circle-indicator2::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #65c3e1; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}
 
.circle-indicator3::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #5570f1; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}

.circle-indicator4::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #ffc062; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}

.circle-indicator5::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #f58585; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}

.circle-indicator6::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #dbc553; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}

.circle-indicator7::before {
    content: "";
    display: inline-block;
    width: 10px; /* 圓點的直徑 */
    height: 10px; /* 圓點的直徑 */
    background-color: #e4aa80; /* 圓點的顏色 */
    border-radius: 50%; /* 使其成為圓形 */
    margin-right: 5px; /* 與文字之間的距離 */
}

@media(min-width: 768px) {
    .circle-indicator-48bfbb::before {
        content: "";
        display: inline-block;
        width: 10px; /* 圓點的直徑 */
        height: 10px; /* 圓點的直徑 */
        background-color: #48bfbb; /* 圓點的顏色 */
        border-radius: 50%; /* 使其成為圓形 */
        margin-right: 5px; /* 與文字之間的距離 */
    }

    .circle-indicator-48a3bf::before {
        content: "";
        display: inline-block;
        width: 10px; /* 圓點的直徑 */
        height: 10px; /* 圓點的直徑 */
        background-color: #48a3bf; /* 圓點的顏色 */
        border-radius: 50%; /* 使其成為圓形 */
        margin-right: 5px; /* 與文字之間的距離 */
    }

    .circle-indicator-4886bf::before {
        content: "";
        display: inline-block;
        width: 10px; /* 圓點的直徑 */
        height: 10px; /* 圓點的直徑 */
        background-color: #4886bf; /* 圓點的顏色 */
        border-radius: 50%; /* 使其成為圓形 */
        margin-right: 5px; /* 與文字之間的距離 */
    }

    .circle-indicator-486abf::before {
        content: "";
        display: inline-block;
        width: 10px; /* 圓點的直徑 */
        height: 10px; /* 圓點的直徑 */
        background-color: #486abf; /* 圓點的顏色 */
        border-radius: 50%; /* 使其成為圓形 */
        margin-right: 5px; /* 與文字之間的距離 */
    }

    .circle-indicator-6cbd8c::before {
        content: "";
        display: inline-block;
        width: 10px; /* 圓點的直徑 */
        height: 10px; /* 圓點的直徑 */
        background-color: #6cbd8c; /* 圓點的顏色 */
        border-radius: 50%; /* 使其成為圓形 */
        margin-right: 5px; /* 與文字之間的距離 */
    }

    .circle-indicator-b1bc6d::before {
        content: "";
        display: inline-block;
        width: 10px; /* 圓點的直徑 */
        height: 10px; /* 圓點的直徑 */
        background-color: #b1bc6d; /* 圓點的顏色 */
        border-radius: 50%; /* 使其成為圓形 */
        margin-right: 5px; /* 與文字之間的距離 */
    }
}

    .card3 .card-body .row .col-12 .w4 {
        margin-bottom: 2px;
    }

    .card3 .card-body .row .col-12 {
        margin-bottom: -5px;
    }

    .card3 .card-body .row > .col-md-4 > .title {
        margin-top: 10%; /* 調整這個值以達到期望的視覺效果 */
    }





    /*window 4*/
    .title-container {
        text-align: center;
    }

    .container-fluid .row .title {
        text-shadow: 0 4px 10px rgba(84, 108, 130, 0.25);
        font-family: Inter;
        font-size: 36px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
        color: #1d3e5d;
        display: inline-block;
        vertical-align: middle;
    }


    .card4 .w4 {
        text-align: center;
        margin-bottom: 20px;
    }


    .card-body {
        /* position: relative;
    overflow: visible;  
     padding-right:20px;*/
    }

    .Rectangle {
        width: 100%;
        position: relative;
        height: auto;
    }


    /*footer*/
    .footer {
        z-index: 50;
        background-color: #2f3c51;
        position: relative;
        padding: 3rem 0;
    }


        .footer .linkBox .detect.desktop {
            flex-direction: row;
            display: flex;
            align-items: flex-start;
        }

        .footer .linkBox .detect {
            font-family: PingFangTC;
            font-size: 18px;
            letter-spacing: 0.57px;
            text-align: center;
            color: #fff;
            -webkit-box-pack: center;
            justify-content: center;
            cursor: pointer;
        }

            .footer .linkBox .detect .link {
                font-family: PingFangTC;
                font-size: 18px;
                letter-spacing: 0.57px;
                text-align: center;
                color: #fff;
                -webkit-box-pack: center;
                justify-content: center;
                cursor: pointer;
                text-decoration: underline;
            }





    .mobile {
        display: none;
    }

    .footer .address {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.07px;
        color: #fff;
        text-align: center;
        margin-top: 3rem;
    }

    .footer .copyright {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.07px;
        color: #fff;
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 20px;
        margin-top: 20px;
        position: relative; /* 用於定位偽元素 */
    }


        .footer .copyright::after {
            content: "";
            display: block;
            margin: 0 auto; /* 居中對齊 */
            width: 90%; /* 控制線條的長度，可根據需要調整 */
            border-bottom: 1px solid #6e87ac; /* 邊線樣式 */
            position: absolute;
            bottom: 0; /* 定位到底部 */
            left: 0;
            right: 0;
        }


    .footer .suggest {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.57px;
        color: #86919f;
        text-align: center;
    }

    .large-screen {
        display: block; /* 預設顯示 */
    }

    .small-screen {
        display: none; /* 預設隱藏 */
    }

















    /* */
    .menu-open .menu-bar {
        left: 260px; /* 點選burger時的位置 */
    }



    header .hideMenu {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        padding-top: 20px;
        transition: left 0.3s;
        background-color: var(--web-step-active-color);
        z-index: 50;
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: auto;
    }

        header .hideMenu .cp {
            text-align: left;
            font-size: 18px;
            color: var(--web-script-font-color);
            padding: 10px 0px 10px 20px;
            width: 90%;
        }

            header .hideMenu .cp img {
                margin-right: 10px;
            }

    .menu-open .hideMenu {
        left: 0;
    }

    header .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
        z-index: 10;
    }

    .menu-open header .overlay {
        opacity: 1;
        visibility: visible;
    }



    @media (max-width: 767px) {
        header {
            justify-content: initial;
        }

        .wrapper header .menus {
            display: none !important;
        }
    }

    @media (min-width: 768px) {
        .wrapper header .menus {
            display: none !important;
        }

        .wrapper header .earth-icon {
            display: flex !important;
        }

        .card-body.blue {
            /*left: 57%;*/
            width: 75%;
        }
    }

    @media (min-width: 992px) {

        .card-body.blue {
            /* left: 54%;*/
            width: 85%;
        }

        header {
            justify-content: space-between;
        }

        .wrapper header .primary-title {
            margin-left: 30px;
        }

        .wrapper header .menus {
            margin-right: 50px;
            gap: 10px;
        }

        .wrapper header .menus {
            display: flex !important;
        }
    }

    @media (min-width: 1920px) {

        .card-body.blue {
            /* left: 53.4%;*/
            width: 90%;
        }
    }


    @media (min-width: 1440px) {

        .card-body.blue {
            /* left: 55%;*/
            width: 90%;
        }

        .wrapper header .primary-title {
            margin-left: 30px;
        }

        .wrapper header .menus {
            margin-right: 100px;
            gap: 30px;
        }
    }


    /* title-card */
    .wrapper .container-content {
        margin-top: 115px;
    }

        .wrapper .container-content .title-card {
            background-color: var(--title-card-bg-color);
            height: 110px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s;
        }

            .wrapper .container-content .title-card .prompt {
                width: 100vw;
                margin-left: 200px;
                font-size: 28px;
                font-weight: normal;
                color: var(--web-card-prompt-color);
                position: relative;
                z-index: 10;
                transition: all 0.3s;
            }

            .wrapper .container-content .title-card .Rectangle-1 {
                position: absolute;
                top: 0px;
                left: 50vw;
                width: 600px;
                height: 300px;
                transform: rotate(21deg);
                background-image: linear-gradient(to right, #c3eded, rgba(255, 255, 255, 0) 125%);
                z-index: 5;
            }

            .wrapper .container-content .title-card .Rectangle-2 {
                position: absolute;
                top: -100px;
                left: 70vw;
                width: 386px;
                height: 300px;
                transform: rotate(-26deg);
                background-image: linear-gradient(to right, #c3dbed, rgba(228, 228, 228, 0) 125%);
                z-index: 6;
            }

            .wrapper .container-content .title-card .Rectangle-3 {
                position: absolute;
                top: -100px;
                left: 80vw;
                width: 279px;
                height: 300px;
                transform: rotate(21deg);
                opacity: 0.22;
                background-image: linear-gradient(to right, #8f95ee, rgba(255, 255, 255, 0) 125%);
                z-index: 7;
            }

        /* contain */
        .wrapper .container-content .content {
            /* margin: 50px 160px 0 200px; */
            transition: all 0.3s;
        }

            .wrapper .container-content .content .circle {
                width: 21px;
                height: 21px;
                border-radius: 50px;
                border: solid 1px var(--web-oval-border-color);
            }

            .wrapper .container-content .content .steps {
                gap: 20px;
                border-bottom: solid 1px var(--web-border-color);
            }

                .wrapper .container-content .content .steps .step {
                    color: var(--web-step-font-color);
                    height: 80px;
                    font-size: 18px;
                    font-weight: 500;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .wrapper .container-content .content .steps .step.active {
                        border-bottom: solid 3.5px var(--web-step-active-color);
                    }


    @media (max-width: 767px) {
        .wrapper .container-content .content {
            margin: 30px 40px 0 50px;
        }

        .wrapper .container-content .title-card {
            text-align: center;
        }

            .wrapper .container-content .title-card .prompt {
                margin-left: 0px;
            }

        .wrapper .container-content .title-card {
            height: 80px;
        }
    }

    @media (min-width: 768px) {
        .wrapper .container-content .content {
            /* margin: 30px 40px 0 60px; */
        }

        .wrapper .container-content .title-card .prompt {
            margin-left: 60px;
        }

        .wrapper .container-content .title-card {
            height: 80px;
        }
    }

    @media (min-width: 992px) {
        .wrapper .container-content .content {
            /* margin: 40px 80px 0 100px; */
        }

        .wrapper .container-content .title-card .prompt {
            margin-left: 100px;
        }

        .wrapper .container-content .title-card {
            height: 110px;
        }
    }

    @media (min-width: 1200px) {
        .wrapper .container-content .content {
            /* margin: 40px 100px 0 150px; */
        }

        .wrapper .container-content .title-card .prompt {
            margin-left: 150px;
        }

        .wrapper .container-content .title-card {
            height: 110px;
        }
    }

    @media (min-width: 1400px) {
        .wrapper .container-content .content {
            /* margin: 40px 160px 0 200px; */
        }

        .wrapper .container-content .title-card .prompt {
            margin-left: 200px;
        }

        .wrapper .container-content .title-card {
            height: 110px;
        }
    }

    /* inputs */


    .form-control {
        border-radius: 29px;
        background-color: #f4f8f9;
        border: solid 1px var(--web-input-border-color);
    }

        .form-control:focus,
        .custom-select:focus {
            border: solid 1.5px var(--web-input-border-color);
            box-shadow: none;
        }

        .form-control:disabled {
            background-color: var(--web-input-disabled-bg-color);
        }







    select:invalid {
        color: var(--web-select-unselect-color);
    }

    select option {
        background-color: var(--web-white-color);
        color: var(--web-black-color);
        height: 200px;
        overflow-y: auto;
    }

    @media (min-width: 768px) {
        .g-md-3 > .col-md-6 {
            padding-right: 20px;
            padding-left: 0px;
        }
    }

    @media (min-width: 992px) {
        .g-md-3 > .col-md-6 {
            padding-right: 70px;
            padding-left: 0px;
        }
    }

    .wrapper .container-content .content .button {
        margin: 20px 0px 50px 0px;
    }

    .button {
        /* width: 110px; */
        height: 50px;
        padding: 0 20px 0 20px;
        border-radius: 5px;
        border: solid 1px #b9c0c2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 300;
        color: var(--web-button-cancel-font-color);
        transition: all 0.3s;
        gap: 5px;
    }

        .button.gray {
            background-color: var(--web-button-gray-bg-color);
            color: var(--web-white-color);
        }

        .button:hover {
            background-color: var(--web-header-bg-color);
            color: var(--web-white-color);
        }

        .button svg g {
            transition: all 0.3s;
        }

        .button:hover svg g {
            stroke: var(--web-white-color);
            /* fill: var(--web-white-color); */
        }

        .button:hover svg.fill g {
            fill: var(--web-white-color);
        }


    /* Page2 */
    .wrapper .container-content .content .datas .settings textarea {
        height: 96px;
    }

    .wrapper .container-content .content .datas .settings input.form-control {
        width: 40%;
    }


    .wrapper .container-content .content .datas .lists {
        position: relative;
        margin-left: 10px;
        padding-left: 30px;
    }


    .wrapper .container-content .content .datas .separator {
        position: absolute;
        top: -40px;
        left: 0px;
        width: 30px;
        height: calc(100% + 70px);
        background-blend-mode: multiply;
        background-image: linear-gradient(to left, rgba(251, 252, 253, 1) 40%, #f6f8fb);
    }

    .Page2 .lists .chapter {
        padding-left: 20px;
        padding-right: 20px;
        min-width: 400px;
        overflow: auto;
    }

        .Page2 .lists .chapter::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

    .Page2 .lists table.tbl_chapter {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
    }

        .Page2 .lists table.tbl_chapter thead tr th {
            font-size: 15px;
            font-weight: normal;
            color: var(--web-lists-table-thead-color);
        }

        /* tr */
        .Page2 .lists table.tbl_chapter tbody tr td:nth-child(1) {
            background-color: var(--web-lists-table-tag-color);
        }


        .Page2 .lists table.tbl_chapter tbody tr {
            height: 88px;
            background-color: var(--web-lists-table-tbody-tr-bg-color);
            transition: all 0.5s;
        }

            .Page2 .lists table.tbl_chapter tbody tr:focus {
                background-color: #def6f9;
            }
            /* tr */

            .Page2 .lists table.tbl_chapter thead tr th:nth-child(2),
            .Page2 .lists table.tbl_chapter tbody tr td:nth-child(2) {
                padding-left: 20px;
                padding-right: 20px;
            }

        .Page2 .lists table.tbl_chapter thead tr th:nth-child(1) {
            width: 7px;
        }

        /* 課程 */
        .Page2 .lists table.tbl_chapter thead tr th:nth-child(2) {
            width: 50%;
        }

        .Page2 .lists table.tbl_chapter tbody tr td:nth-child(2) > div {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-size: 15px;
            font-weight: bold;
            color: var(--web-lists-table-thead-color);
        }

            .Page2 .lists table.tbl_chapter tbody tr td:nth-child(2) > div > .number {
                width: 30px;
                font-family: Roboto;
                font-size: 18px;
                font-weight: bold;
                color: var(--web-lists-table-number-color);
            }
        /* 課程 */

        /* 分鐘數 */
        .Page2 .lists table.tbl_chapter thead tr th:nth-child(3) {
            /* min-width: 40px; */
        }

        .Page2 .lists table.tbl_chapter tbody tr td:nth-child(3) {
            font-family: Roboto;
            font-size: 18px;
            font-weight: bold;
            color: var(--web-lists-table-minutes-color);
        }
        /* 分鐘數 */

        /* URL */
        .Page2 .lists table.tbl_chapter thead tr th:nth-child(4) {
            width: 30%;
            padding-right: 50px;
        }

    .Page2 .lists .tbl_chapter tr:focus td:last-child {
        position: relative;
    }

    .Page2 .lists .tbl_chapter td {
        word-break: break-all;
    }

        .Page2 .lists .tbl_chapter td:last-child div.URL {
            position: relative;
            word-break: break-all;
            margin-right: 50px;
            color: var(--web-lists-table-url-color);
            font-weight: bold;
        }

            .Page2 .lists .tbl_chapter td:last-child div.URL.disabled {
                color: var(--web-lists-table-url-dis-color);
            }

            .Page2 .lists .tbl_chapter td:last-child div.URL .delete {
                position: absolute;
                top: 50%;
                right: -25px;
                transform: translate(50%, -50%);
            }

    .Page2 .lists .tbl_chapter tr:focus td:last-child div.URL .delete {
        display: inline;
    }

    .Page2 .lists .tbl_chapter tr:not(:focus) td:last-child div.URL .delete {
        display: none;
    }
    /* URL */



    @media (max-width: 767px) {
        .wrapper .container-content .content .datas {
            flex-direction: column !important;
            gap: 20px;
        }

        .Page1 .wrapper .container-content .content .datas > .col,
        .Page5 .wrapper .container-content .content .datas > .col {
            padding-right: 0px;
            padding-left: 0px;
        }

        .wrapper .container-content .content .datas .settings {
            flex: 0 0 auto;
            width: 100%;
            padding-right: 0px;
            border-bottom: 1px solid var(--web-border-color);
        }

        .wrapper .container-content .content .datas .lists {
            flex: 0 0 auto;
            width: 100%;
            margin-left: 0px;
            padding-left: 0px;
        }

            .wrapper .container-content .content .datas .lists .separator {
                display: none;
            }

        .Page2 .lists .chapter {
            padding-left: 0px;
            padding-right: 0px;
        }

        .Page2 .lists table.tbl_chapter {
            width: 700px;
        }
    }


    @media (min-width: 768px) {
        .wrapper .container-content .content .datas {
            flex-direction: column !important;
            /* gap:10px; */
        }

        .Page1 .wrapper .container-content .content .datas > .col,
        .Page5 .wrapper .container-content .content .datas > .col {
            padding-right: 0px;
            padding-left: 0px;
        }

        .wrapper .container-content .content .datas .settings {
            flex: 0 0 auto;
            width: 100%;
            padding-right: 10px;
            border-bottom: 1px solid var(--web-border-color);
        }

        .wrapper .container-content .content .datas .lists {
            margin-left: 0px;
            padding-left: 0px;
        }

            .wrapper .container-content .content .datas .lists .separator {
                display: none;
            }

        .Page2 .lists .chapter {
            padding-left: 0px;
            padding-right: 0px;
        }

        .Page2 .lists table.tbl_chapter {
            width: 100%;
        }
    }

    @media (min-width: 992px) {
        .wrapper .container-content .content .datas {
            flex-direction: row !important;
            gap: 0px;
        }

        .Page1 .wrapper .container-content .content .datas > .col,
        .Page5 .wrapper .container-content .content .datas > .col {
            flex: 0 0 auto;
            padding-right: 10%;
            width: 50%;
        }

        .wrapper .container-content .content .datas .settings {
            flex: 0 0 auto;
            width: 30%;
            padding-right: 10px;
            border-bottom: none;
        }

        .wrapper .container-content .content .datas .lists {
            margin-left: 10px;
            padding-left: 30px;
        }

            .wrapper .container-content .content .datas .lists .separator {
                display: inline;
            }
    }

    @media (min-width: 1200px) {
        .Page2 .lists table.tbl_chapter {
            width: 100%;
        }
    }


    /* Page3 */
    .wrapper .container-content .content .search {
        align-items: center;
        justify-content: space-between;
    }

        .wrapper .container-content .content .search .condition {
            border-bottom: solid 1px #e6e6e6;
            position: relative;
            align-items: center;
        }

            .wrapper .container-content .content .search .condition > input {
                height: 60px;
                border: none;
                padding-left: 50px;
                font-size: 18px;
                font-weight: normal;
            }

                .wrapper .container-content .content .search .condition > input:focus {
                    outline: none;
                }

                .wrapper .container-content .content .search .condition > input::placeholder {
                    color: var(--web-input-placeholder-font-color);
                    font-size: 18px;
                    font-weight: normal;
                }

            .wrapper .container-content .content .search .condition .input-icon {
                position: absolute;
                left: 15px;
                top: 50%;
                transform: translateY(-50%);
            }

        .wrapper .container-content .content .search .detail {
            color: var(--web-header-bg-color);
            margin-right: 13px;
        }

    /* table (tbl_classlists) */
    .wrapper .container-content .content .classlists,
    .wrapper .container-content .content .teacherlists,
    .wrapper .container-content .content .recordlists {
        width: 100%;
        overflow-x: auto;
        margin-bottom: 60px;
    }

        .wrapper .container-content .content .classlists::-webkit-scrollbar,
        .wrapper .container-content .content .teacherlists::-webkit-scrollbar,
        .wrapper .container-content .content .recordlists::-webkit-scrollbar {
            height: 10px;
            width: 10px;
        }

    .wrapper .container-content .content table.tbl_classlists,
    .wrapper .container-content .content table.tbl_teacherlists,
    .wrapper .container-content .content table.tbl_recordlists {
        margin-top: 18px;
        min-width: 800px;
        width: 100%;
    }

        .wrapper .container-content .content table.tbl_classlists thead,
        .wrapper .container-content .content table.tbl_teacherlists thead,
        .wrapper .container-content .content table.tbl_recordlists thead {
            border-bottom: 1px solid var(--web-class-table-thead-border-color);
        }

            .wrapper .container-content .content table.tbl_classlists thead tr,
            .wrapper .container-content .content table.tbl_teacherlists thead tr,
            .wrapper .container-content .content table.tbl_recordlists thead tr {
                background-color: var(--web-class-table-th-bg-color);
                color: var(--web-class-table-th-font-color);
            }

    .wrapper .container-content .content table th {
        font-size: 15px;
        font-weight: 400;
    }

    .wrapper .container-content .content table.tbl_classlists tr:nth-child(1) th,
    .wrapper .container-content .content table.tbl_teacherlists tr:nth-child(1) th {
        padding: 10px 10px 0px 10px;
    }

    .wrapper .container-content .content table.tbl_classlists tr:nth-child(2) th,
    .wrapper .container-content .content table.tbl_teacherlists tr:nth-child(2) th,
    .wrapper .container-content .content table.tbl_recordlists tr:nth-child(2) th {
        padding: 12px 10px 17px 10px;
    }

    .wrapper .container-content .content table.tbl_classlists tr th:nth-child(1),
    .wrapper .container-content .content table.tbl_teacherlists tr th:nth-child(1) {
        padding-left: 20px;
    }

    .wrapper .container-content .content table.tbl_classlists th input,
    .wrapper .container-content .content table.tbl_classlists th select,
    .wrapper .container-content .content table.tbl_teacherlists th input,
    .wrapper .container-content .content table.tbl_teacherlists th select {
        border: none;
        width: 100%;
        height: 33px;
        border-radius: 3px;
    }

        .wrapper .container-content .content table.tbl_classlists th input:focus,
        .wrapper .container-content .content table.tbl_classlists th select:focus,
        .wrapper .container-content .content table.tbl_teacherlists th input:focus,
        .wrapper .container-content .content table.tbl_teacherlists th select:focus {
            outline: none;
        }

    .d90 {
        transform: rotate(-90deg);
    }

    .wrapper .container-content .content table.tbl_classlists tbody tr,
    .wrapper .container-content .content table.tbl_teacherlists tbody tr,
    .wrapper .container-content .content table.tbl_recordlists tbody tr {
        border-bottom: 1px solid var(--web-border-color);
    }

    .wrapper .container-content .content table.tbl_classlists tr td,
    .wrapper .container-content .content table.tbl_teacherlists tr td,
    .wrapper .container-content .content table.tbl_recordlists tr td {
        height: 68px;
    }

        .wrapper .container-content .content table.tbl_classlists tr td:not(:nth-child(2)) {
            word-break: break-all;
            padding: 0 10px 0 10px;
        }

        .wrapper .container-content .content table.tbl_classlists tr td:nth-child(2) {
            min-width: 120px;
            word-break: keep-all;
            white-space: nowrap;
        }

        .wrapper .container-content .content table.tbl_classlists tr td .card,
        .wrapper .container-content .content table.tbl_recordlists tr td .card {
            font-size: 15px;
            font-weight: bold;
            color: var(--web-class-table-th-font-color);
            height: 39px;
            margin: 0 15px;
            border-radius: 4px;
            border: none;
        }

    .card.ict {
        background-color: var(--web-class-table-card-ict-color);
    }

    .card.sma {
        background-color: var(--web-class-table-card-sma-color);
    }

    .card.bim {
        background-color: var(--web-class-table-card-bim-color);
    }

    .card.sge {
        background-color: var(--web-class-table-card-sge-color);
    }

    .card.nzs {
        background-color: var(--web-class-table-card-nzs-color);
    }

    /* Page4 */
    .wrapper .container-content .content table.tbl_teacherlists {
        width: 100%;
    }

        .wrapper .container-content .content table.tbl_teacherlists .Oval {
            width: 30px;
            height: 30px;
            background-color: var(--web-teacher-table-oval-color);
        }

        .wrapper .container-content .content table.tbl_teacherlists tr th:nth-child(1) > input {
            width: 190px;
        }

        .wrapper .container-content .content table.tbl_teacherlists tr td {
            padding-left: 40px;
        }

            .wrapper .container-content .content table.tbl_teacherlists tr td:nth-child(2) {
                text-align: center;
            }

    .container-content .title-card .buttons {
        position: absolute;
        right: 126px;
        z-index: 10;
        transition: all 0.3s;
    }

        .container-content .title-card .buttons .button {
            color: var(--web-white-color);
            background-color: var(--web-header-bg-color);
        }

            .container-content .title-card .buttons .button span {
                display: inline;
            }

            .container-content .title-card .buttons .button svg g {
                stroke: var(--web-white-color);
            }

    @media (max-width: 767px) {

        .container-content .title-card .buttons {
            right: 40px;
        }

            .container-content .title-card .buttons .button span {
                display: none;
            }
    }

    @media (min-width: 768px) {

        .container-content .title-card .buttons {
            right: 126px;
        }

            .container-content .title-card .buttons .button span {
                display: inline;
            }
    }

    /* Page5 */
    .Page5 .icons .icon {
        width: 91px;
        height: 94px;
        border-radius: 4px;
    }

        .Page5 .icons .icon.file {
            position: relative;
            border: solid 1px var(--web-file-border-color);
            background-color: var(--web-file-bg-color);
        }

            .Page5 .icons .icon.file img.delete {
                top: 0px;
                right: 0px;
                transform: translate(45%, -45%);
            }

        .Page5 .icons .icon.upload {
            border: dashed 1px #84a2ca;
            background-color: #f3f7ff;
        }

        .Page5 .icons .icon span {
            font-size: 13px;
            font-weight: normal;
            color: var(--web-step-font-color);
        }

        .Page5 .icons .icon.upload span {
            color: var(--web-upload-file-font-color);
        }

    /* Page6 */
    /* table */
    .Page6 .lists table.tbl_material {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
    }

        .Page6 .lists table.tbl_material tbody tr {
            height: 68px;
        }

            .Page6 .lists table.tbl_material tbody tr td:nth-child(1) {
                width: 7px;
                background-color: var(--web-lists-table-tag-color);
            }

            .Page6 .lists table.tbl_material tbody tr td:nth-child(2) {
                padding-left: 20px;
                padding-right: 60px;
                position: relative;
            }


        .Page6 .lists table.tbl_material tbody tr {
            height: 68px;
            background-color: var(--web-lists-table-tbody-tr-bg-color);
            transition: all 0.5s;
        }

            .Page6 .lists table.tbl_material tbody tr:focus {
                background-color: #def6f9;
            }

                .Page6 .lists table.tbl_material tbody tr:focus td .delete {
                    display: inline;
                }

            .Page6 .lists table.tbl_material tbody tr:not(:focus) td .delete {
                display: none;
            }

            .Page6 .lists table.tbl_material tbody tr td .delete {
                top: 50%;
                right: 0px;
                transform: translate(-50%, -50%);
            }
    /* table */


    @media (max-width: 767px) {

        .Page6 .lists .material {
            margin-left: 0px;
        }
    }

    @media (min-width: 992px) {

        .Page6 .lists .material {
            margin-left: 20px;
        }
    }

    /* Page7 */
    .wrapper .container-content .content table.tbl_recordlists tr th {
        height: 58px;
    }

    .wrapper .container-content .content table.tbl_recordlists tr th,
    .wrapper .container-content .content table.tbl_recordlists tr td {
        padding-left: 20px;
    }

        .wrapper .container-content .content table.tbl_recordlists tr td .edit {
            padding-left: 20px;
            color: var(--web-record-table-edit-font-color);
            gap: 5px;
        }

        .wrapper .container-content .content table.tbl_recordlists tr td .Sign {
            font-size: 15px;
            font-weight: normal;
            color: var(--web-black-color);
            padding-left: 25px;
            width: 99px;
            height: 39px;
            border-radius: 6px;
            position: relative;
        }

            .wrapper .container-content .content table.tbl_recordlists tr td .Sign.process {
                border: solid 1px var(--web-record-table-sign-process-border-color);
                background-color: var(--web-record-table-sign-process-bg-color);
                position: relative;
            }

            .wrapper .container-content .content table.tbl_recordlists tr td .Sign::after {
                position: absolute;
                top: 50%;
                left: -5px;
                content: '';
                height: 24px;
                width: 25px;
                transform: translate(50%,-50%);
            }

            .wrapper .container-content .content table.tbl_recordlists tr td .Sign.process::after {
                background-image: url('../images/icon-status-clock.webp');
            }

            .wrapper .container-content .content table.tbl_recordlists tr td .Sign.finish::after {
                background-image: url('../images/icon-status-check.webp');
            }

            .wrapper .container-content .content table.tbl_recordlists tr td .Sign.finish {
                border: solid 1px var(--web-record-table-sign-finish-border-color);
                background-color: var(--web-record-table-sign-finish-bg-color);
            }

        .wrapper .container-content .content table.tbl_recordlists tr td:nth-child(2),
        .wrapper .container-content .content table.tbl_recordlists tr td:nth-child(3) {
            white-space: nowrap;
        }


    /**子畫面*/
    .content.overview {
        background: #f3f8fb !important;
    }

    .content .boxSix {
        padding: 1.5rem 0 1.5rem;
    }

        .content .boxSix .boxSixContent .bread,
        .content .boxSix .boxSixContent .bread a {
            font-family: PingFangTC;
            font-size: 16px;
            letter-spacing: 0.51px;
            color: #21a09c;
            margin-bottom: 1.5rem;
        }

        .content .boxSix .boxSixContent .arrowBread {
            font-family: PingFangTC;
            font-size: 16px;
            letter-spacing: 0.51px;
            color: #21a09c;
        }

        .content .boxSix .boxSixContent .pageMainTitle {
            font-size: 36px;
            letter-spacing: 1.75px;
            font-weight: 400;
            color: #142438;
        }

        .content .boxSix .boxSixContent .boxTitle {
            text-align: center;
            font-size: 36px;
            letter-spacing: 1.75px;
            color: #142438;
        }

            .content .boxSix .boxSixContent .boxTitle img {
                -webkit-box-shadow: 0 2px 20px 0 rgba(124, 124, 124, 0.5);
                box-shadow: 0 2px 20px 0 rgba(124, 124, 124, 0.5);
                border-radius: 50%;
                width: 75px;
                margin-right: 15px;
            }

        .content .boxSix .boxSixContent .sidebar .menuList {
            padding: 0;
        }

            .content .boxSix .boxSixContent .sidebar .menuList .menuItem {
                list-style-type: none;
                padding: 1rem 0.5rem;
                text-align: center;
                background-color: #fff;
                color: #2f3c51;
                font-weight: 400;
            }

                .content .boxSix .boxSixContent .sidebar .menuList .menuItem.level {
                    color: #8eacab;
                }

                .content .boxSix .boxSixContent .sidebar .menuList .menuItem:first-child {
                    border-top-right-radius: 10px;
                    border-top-left-radius: 10px;
                }

                .content .boxSix .boxSixContent .sidebar .menuList .menuItem:last-child {
                    border-bottom-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                }

                .content .boxSix .boxSixContent .sidebar .menuList .menuItem:not(:last-child) {
                    /*margin-bottom: 0.25rem;*/
                }

                .content .boxSix .boxSixContent .sidebar .menuList .menuItem:hover, .content .boxSix .boxSixContent .sidebar .menuList .menuItem.active {
                    background-color: #22bc97;
                    color: #fff;
                }

    @media (min-width: 860px) {
        .content .boxSix .boxSixContent .contentBox {
            width: 80%;
        }
    }

    @media (max-width: 860px) {
        .content .boxSix .boxSixContent .contentBox {
            width: 100%;
        }
    }

    .content .boxSix .boxSixContent .contentBox .stateBar {
        margin: 0.75rem 0;
    }

        .content .boxSix .boxSixContent .contentBox .stateBar .arrow {
            font-size: 1.25rem;
        }

        .content .boxSix .boxSixContent .contentBox .stateBar .title {
            font-size: 1.5rem;
        }

    .content .boxSix .boxSixContent .planTitle {
        font-size: 25px;
        font-weight: 500;
        color: #2f3c51;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 0 1rem;
    }

    .content .boxSix .boxSixContent .plan {
        margin-bottom: 1rem;
    }

        .content .boxSix .boxSixContent .plan:not(:first-child) {
            margin-top: 0.75rem;
        }

        .content .boxSix .boxSixContent .plan .header {
            border-top-right-radius: 1rem;
            border-top-left-radius: 1rem;
            padding: 0 3.25rem;
            background-color: #23485e;
        }

            .content .boxSix .boxSixContent .plan .header.bw {
                background-color: #fff;
            }

            .content .boxSix .boxSixContent .plan .header > div {
                padding: 1.5rem 0;
            }

            .content .boxSix .boxSixContent .plan .header .title {
                font-family: Inter;
                font-size: 32px;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                text-align: left;
                color: #1e9faa;
            }

                .content .boxSix .boxSixContent .plan .header .title span:last-child,
                .content .boxSix .boxSixContent .plan .header .title div:last-child {
                    margin-left: 1rem;
                    color: #7aecdf;
                    font-weight: bold;
                    letter-spacing: 0.5px;
                }

                    .content .boxSix .boxSixContent .plan .header .title span:last-child.cw,
                    .content .boxSix .boxSixContent .plan .header .title div:last-child.cw {
                        color: #fff;
                    }

                .content .boxSix .boxSixContent .plan .header .title.tab {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    padding: 0 10px;
                    border: 0;
                }

                    .content .boxSix .boxSixContent .plan .header .title.tab > li button {
                        font-size: 18px;
                        letter-spacing: 0.57px;
                        color: #8e9d9c;
                        margin-right: 16px;
                        border: 0;
                    }

                        .content .boxSix .boxSixContent .plan .header .title.tab > li button:hover {
                            color: #079590;
                            font-size: 19px;
                            font-weight: 700;
                        }

                        .content .boxSix .boxSixContent .plan .header .title.tab > li button:last-child {
                            margin-right: 0;
                        }

                        .content .boxSix .boxSixContent .plan .header .title.tab > li button.active {
                            color: #21a09c;
                            font-weight: 700;
                        }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem:not(:last-child) {
                margin-right: 1.25rem;
            }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem .form-check-input:checked {
                background-color: #75dfbd;
                border-color: #a9b6c3;
            }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem .btn.ckeckform .icon {
                background-image: url("../images/common/icon-confirm.svg");
            }

            .content .boxSix .boxSixContent .plan .header .operate .nav-link {
                color: #666666;
            }

            .content .boxSix .boxSixContent .plan .header .operate .icon {
                width: 24px;
                height: 24px;
                margin-right: 0.5rem;
                background-position: center;
                background-size: 100%;
                background-repeat: no-repeat;
            }

            .content .boxSix .boxSixContent .plan .header .operate ul li:not(:last-child) {
                border-bottom: 1px solid #e9eef3;
            }

            .content .boxSix .boxSixContent .plan .header .operate .edit div {
                margin: 0 0.3rem;
            }

        .content .boxSix .boxSixContent .plan .plan-content {
            border-radius: 12px;
        }

            .content .boxSix .boxSixContent .plan .plan-content .remark {
                font-size: 14px;
                color: #667488;
            }

            .content .boxSix .boxSixContent .plan .plan-content .clacBox {
                padding-top: 1rem;
                font-size: 16px;
                color: #29374a;
            }

                .content .boxSix .boxSixContent .plan .plan-content .clacBox > .title {
                    margin-bottom: 0.5rem;
                }

                .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item {
                    margin-left: 1rem;
                    margin-top: 1rem;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item > div:first-child {
                        position: relative;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item > div:first-child::after {
                            content: "";
                            width: 9px;
                            height: 9px;
                            background-color: #22bcb0;
                            position: absolute;
                            border-radius: 50%;
                            left: -14px;
                            top: 8px;
                        }

                    .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item > div:last-child {
                        font-size: 14px;
                        line-height: 1.88;
                        color: #798aa2;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item > div:last-child.list {
                            margin-top: 0.5rem;
                            margin-left: 1rem;
                        }

                            .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item > div:last-child.list > div {
                                position: relative;
                            }

                                .content .boxSix .boxSixContent .plan .plan-content .clacBox > .item > div:last-child.list > div::after {
                                    content: "";
                                    width: 9px;
                                    height: 9px;
                                    background-color: #cdd9e0;
                                    position: absolute;
                                    border-radius: 50%;
                                    left: -14px;
                                    top: 8px;
                                }

            .content .boxSix .boxSixContent .plan .plan-content .contentItem {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 1rem 0;
                border-bottom: solid 2px #c6dfdd;
                border-bottom-style: dashed;
            }

                .content .boxSix .boxSixContent .plan .plan-content .contentItem .left {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .arrow {
                        margin-right: 0.5rem;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .arrow img {
                            width: 24px;
                        }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .title {
                        font-size: 20px;
                        letter-spacing: 0.7px;
                        color: #2f3c51;
                    }

                .content .boxSix .boxSixContent .plan .plan-content .contentItem .right {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .right .download {
                        padding: 10px 21px 14px 22px;
                        border-radius: 24.5px;
                        background-color: #38c0bb;
                        color: #fff;
                        font-size: 16px;
                        font-weight: 500;
                        letter-spacing: 0.54px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .contentItem .right .download img {
                            margin-right: 0.25rem;
                        }

            .content .boxSix .boxSixContent .plan .plan-content .contentTitle {
                font-size: 26px;
                letter-spacing: 0.95px;
                color: #2f3c51;
                padding: 16px 10px;
            }

            .content .boxSix .boxSixContent .plan .plan-content .contentItemSubTitle {
                padding: 16px 10px;
                font-size: 20px;
                font-weight: 600;
                font-stretch: normal;
                font-style: normal;
                line-height: normal;
                letter-spacing: normal;
                color: #1e9faa;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubTitle img {
                    width: 28px;
                    margin-right: 10px;
                }

            .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent {
                padding: 0 10px;
                line-height: 2.12;
                letter-spacing: 0.54px;
                color: #2f3c51;
                /*margin-left:40px;*/
            }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .text-style-1 {
                    font-weight: bold;
                    color: #1d86a3;
                }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .text-style-2 {
                    font-weight: bold;
                    color: #163765;
                }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .text-style-3 {
                    font-weight: bold;
                    color: #1d86a3;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .text-style-3::before {
                        margin-right: 10px;
                        content: '●'; /* 必須設置content，否則偽元素不會顯示 */
                        color: #ceecf4;
                    }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .cycle {
                    width: 28px;
                    height: 28px;
                    border-radius: 50%;
                    background-color: #34639b;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                    color: #fff;
                }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .cycle2 {
                    color: #fff;
                    border-radius: 98px;
                    background-color: #3879a8;
                    text-align: center;
                }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table {
                    width: 100%;
                    border-collapse: collapse;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table th {
                        background-color: #f3f8fb;
                        color: #86a1a9; /* 讓表頭文字顏色為白色 */
                        padding: 10px;
                        text-align: center;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table td {
                        padding: 10px;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table a {
                        color: #307bbe;
                        text-decoration: underline;
                    }

                    /*表格縮合*/
                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table .tr-collapse {
                        cursor: pointer;
                        background-color: #4b8dbd;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table .td1-collapse {
                        color: #fff;
                        padding: 10px;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table .td2-collapse {
                        width: 50px;
                        text-align: center;
                        color: #fff;
                    }

                .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 {
                    width: 100%;
                    border-collapse: collapse;
                    white-space: nowrap;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 th {
                        background-color: #4b8dbd;
                        color: #fff; /* 讓表頭文字顏色為白色 */
                        padding: 10px;
                        text-align: center;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 td {
                        padding: 10px;
                        text-align: center;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 tr:hover td {
                        background-color: #caeef1;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 tr:nth-child(even) td {
                        background-color: #f3f8fb;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 tr:nth-child(even):hover td {
                        background-color: #caeef1;
                    }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent .content-table2 a {
                        color: #307bbe;
                        text-decoration: underline;
                    }

            /*.content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent ul li {
                color: #1d86a3;
                font-weight: bold;
            }

            .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent ul ul li {
                color: #2f3c51;
                font-weight: normal;
            }

            .content .boxSix .boxSixContent .plan .plan-content .contentItemSubContent.black ul li {
                color: #2f3c51;
                font-weight: normal;
            }*/

            .content .boxSix .boxSixContent .plan .plan-content .detailBox {
                border-radius: 17px;
                background-color: #effafa;
                margin: 10px;
                padding: 24px 24px;
                display: -webkit-inline-box;
            }

                .content .boxSix .boxSixContent .plan .plan-content .detailBox .slide {
                    width: 4px;
                    border-radius: 50px;
                    margin-right: 1rem;
                    height: auto;
                    background-color: #29a39f;
                }

                .content .boxSix .boxSixContent .plan .plan-content .detailBox > .text .title {
                    font-size: 18px;
                    font-weight: bold;
                    letter-spacing: 0.57px;
                    color: #454545;
                    margin-bottom: 10px;
                }

                .content .boxSix .boxSixContent .plan .plan-content .detailBox > .text .desc {
                    line-height: 1.81;
                    letter-spacing: 0.51px;
                }

            .content .boxSix .boxSixContent .plan .plan-content .references {
                padding: 0 10px;
                font-size: 13px;
                line-height: 2.53;
                letter-spacing: 0.47px;
                color: #878f9d;
                margin-top: 16px;
            }

            .content .boxSix .boxSixContent .plan .plan-content .imgContent {
                text-align: center;
                margin: 24px 0;
            }

                .content .boxSix .boxSixContent .plan .plan-content .imgContent .imgTitle {
                    font-size: 20px;
                    font-weight: bold;
                    letter-spacing: 0.7px;
                    color: #2f3c51;
                    margin: 16px 0;
                }

                .content .boxSix .boxSixContent .plan .plan-content .imgContent .references {
                    font-size: 13px;
                    line-height: 2.53;
                    letter-spacing: 0.47px;
                    color: #878f9d;
                    margin-top: 16px;
                }

                .content .boxSix .boxSixContent .plan .plan-content .imgContent img {
                    max-width: 100%;
                    width: 100%;
                }

        .content .boxSix .boxSixContent .plan .tour-content > .title {
            font-size: 20px;
            letter-spacing: 0.95px;
            color: #2f3c51;
        }

        .content .boxSix .boxSixContent .plan .tour-content .tourUl {
            list-style-type: none;
            padding: 0;
        }

            .content .boxSix .boxSixContent .plan .tour-content .tourUl > li {
                background-color: #21a09c;
                color: #fff;
                padding: 5px 10px;
                letter-spacing: 0.5px;
                font-weight: bold;
            }

            .content .boxSix .boxSixContent .plan .tour-content .tourUl ul {
                list-style-type: none;
            }

                .content .boxSix .boxSixContent .plan .tour-content .tourUl ul li {
                    padding: 5px 0px;
                    letter-spacing: 0.5px;
                }

                    .content .boxSix .boxSixContent .plan .tour-content .tourUl ul li > a:hover {
                        color: #21a09c;
                    }

    @media (max-width: 768px) {
        .content .boxSix .boxSixContent .plan:not(:first-child) {
            margin-top: 0.75rem;
        }

        .content .boxSix .boxSixContent .plan .header {
            border-top-right-radius: 1rem;
            border-top-left-radius: 1rem;
            padding: 0 1.5rem;
        }

            .content .boxSix .boxSixContent .plan .header > div {
                padding: 1.5rem 0;
                border-bottom: 1px solid #e9eef3;
            }

            .content .boxSix .boxSixContent .plan .header .title {
                font-family: NotoSansCJKtc;
                font-size: 24px;
                letter-spacing: 0.95px;
                color: #21a09c;
            }

                .content .boxSix .boxSixContent .plan .header .title.tab {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    padding: 0 10px;
                }

                    .content .boxSix .boxSixContent .plan .header .title.tab > div {
                        font-size: 16px;
                        letter-spacing: 0.57px;
                        color: #8e9d9c;
                        margin-right: 16px;
                    }

                        .content .boxSix .boxSixContent .plan .header .title.tab > div:last-child {
                            margin-right: 0;
                        }

                        .content .boxSix .boxSixContent .plan .header .title.tab > div.active {
                            color: #21a09c;
                        }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem:not(:last-child) {
                margin-right: 1.25rem;
            }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem .form-check-input:checked {
                background-color: #75dfbd;
                border-color: #a9b6c3;
            }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem .btn.ckeckform .icon {
                background-image: url("../images/common/icon-confirm.svg");
            }

            .content .boxSix .boxSixContent .plan .header .operate .nav-link {
                color: #666666;
            }

            .content .boxSix .boxSixContent .plan .header .operate .icon {
                width: 24px;
                height: 24px;
                margin-right: 0.5rem;
                background-position: center;
                background-size: 100%;
                background-repeat: no-repeat;
            }

            .content .boxSix .boxSixContent .plan .header .operate ul li:not(:last-child) {
                border-bottom: 1px solid #e9eef3;
            }

            .content .boxSix .boxSixContent .plan .header .operate .edit div {
                margin: 0 0.3rem;
            }

        .content .boxSix .boxSixContent .plan .plan-content {
            padding: 0 1.5rem 3rem !important;
        }

            .content .boxSix .boxSixContent .plan .plan-content .contentItem {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 1rem 0;
                border-bottom: solid 2px #c6dfdd;
                border-bottom-style: dashed;
            }

                .content .boxSix .boxSixContent .plan .plan-content .contentItem .left {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .arrow {
                        margin-right: 0.5rem;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .arrow img {
                            width: 24px;
                        }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .title {
                        font-size: 20px;
                        letter-spacing: 0.7px;
                        color: #2f3c51;
                    }

                .content .boxSix .boxSixContent .plan .plan-content .contentItem .right {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .right .download {
                        padding: 10px 21px 14px 22px;
                        border-radius: 24.5px;
                        background-color: #38c0bb;
                        color: #fff;
                        font-size: 16px;
                        font-weight: 500;
                        letter-spacing: 0.54px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .contentItem .right .download img {
                            margin-right: 0.25rem;
                        }
    }

    @media (max-width: 576px) {
        .content .boxSix .boxSixContent .plan:not(:first-child) {
            margin-top: 0.75rem;
        }

        .content .boxSix .boxSixContent .plan .header {
            border-top-right-radius: 1rem;
            border-top-left-radius: 1rem;
            padding: 0 1.5rem;
        }

            .content .boxSix .boxSixContent .plan .header > div {
                padding: 1.5rem 0;
                border-bottom: 1px solid #e9eef3;
            }

            .content .boxSix .boxSixContent .plan .header .title {
                font-family: NotoSansCJKtc;
                font-size: 18px;
                letter-spacing: 0.95px;
                color: #21a09c;
            }

                .content .boxSix .boxSixContent .plan .header .title.tab {
                    display: block;
                    padding: 0 10px;
                }

                    .content .boxSix .boxSixContent .plan .header .title.tab > div {
                        font-size: 16px;
                        letter-spacing: 0.57px;
                        color: #8e9d9c;
                        margin-right: 16px;
                    }

                        .content .boxSix .boxSixContent .plan .header .title.tab > div:last-child {
                            margin-right: 0;
                        }

                        .content .boxSix .boxSixContent .plan .header .title.tab > div.active {
                            color: #21a09c;
                        }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem:not(:last-child) {
                margin-right: 1.25rem;
            }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem .form-check-input:checked {
                background-color: #75dfbd;
                border-color: #a9b6c3;
            }

            .content .boxSix .boxSixContent .plan .header .operate .operateItem .btn.ckeckform .icon {
                background-image: url("../images/common/icon-confirm.svg");
            }

            .content .boxSix .boxSixContent .plan .header .operate .nav-link {
                color: #666666;
            }

            .content .boxSix .boxSixContent .plan .header .operate .icon {
                width: 24px;
                height: 24px;
                margin-right: 0.5rem;
                background-position: center;
                background-size: 100%;
                background-repeat: no-repeat;
            }

            .content .boxSix .boxSixContent .plan .header .operate ul li:not(:last-child) {
                border-bottom: 1px solid #e9eef3;
            }

            .content .boxSix .boxSixContent .plan .header .operate .edit div {
                margin: 0 0.3rem;
            }

        .content .boxSix .boxSixContent .plan .plan-content {
            padding: 0 1.5rem 3rem !important;
        }

            .content .boxSix .boxSixContent .plan .plan-content .contentItem {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                padding: 1rem 0;
                border-bottom: solid 2px #c6dfdd;
                border-bottom-style: dashed;
            }

                .content .boxSix .boxSixContent .plan .plan-content .contentItem .left {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .arrow {
                        margin-right: 0.5rem;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .arrow img {
                            width: 24px;
                        }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .left .title {
                        font-size: 14px;
                        letter-spacing: 0.7px;
                        color: #2f3c51;
                    }

                .content .boxSix .boxSixContent .plan .plan-content .contentItem .right {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }

                    .content .boxSix .boxSixContent .plan .plan-content .contentItem .right .download {
                        padding: 10px 21px 14px 22px;
                        border-radius: 24.5px;
                        background-color: #38c0bb;
                        color: #fff;
                        font-size: 12px;
                        font-weight: 500;
                        letter-spacing: 0.54px;
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        min-width: 116px;
                    }

                        .content .boxSix .boxSixContent .plan .plan-content .contentItem .right .download img {
                            margin-right: 0.25rem;
                        }

        .content .boxSix .boxSixContent .plan .tour-content > .title {
            font-size: 15px;
        }
    }

    .customTable {
        margin: 2rem 0 1rem;
    }

        .customTable tr th {
            text-align: center;
            font-family: NotoSansCJKtc;
            font-size: 15px;
            color: #132136;
            padding: 0.25rem 0;
        }

            .customTable tr th.bottomLine {
                border-bottom: solid 1px #e7e7e7;
            }

        .customTable tr:first-child {
            border-top: solid 1px #e7e7e7;
        }

            .customTable tr:first-child th:last-child {
                border-bottom: solid 1px #e7e7e7;
            }

        .customTable tr:nth-child(3) {
            border-bottom: solid 1px #e7e7e7;
        }

        .customTable tr:last-child {
            border-bottom: solid 1px #e7e7e7;
        }

        .customTable tr:hover td {
            background-color: #caeef1;
        }

        .customTable tr:nth-child(even) td {
            background-color: #f3f8fb;
        }

        .customTable tr:nth-child(even):hover td {
            background-color: #caeef1;
        }

        .customTable tr td {
            font-family: NotoSansCJKtc;
            font-size: 14px;
            color: #485465;
            padding: 1rem 0;
            text-align: center;
        }

            .customTable tr td a {
                color: #485465;
                text-decoration: none;
                cursor: default;
            }

    .font-size-20pt {
        font-size: 20pt;
    }

    .font-size-18pt {
        font-size: 18pt;
    }

    .font-size-75rem {
        font-size: 0.75rem !important;
    }
.font-size-120rem {
    font-size: 1.2rem !important;
}

    .me-1px {
        margin-right: 1px;
    }

    .titlebar {
        width: 7px;
        height: 35px;
        background-color: #1d9ac2;
        display: inline-block;
        vertical-align: middle;
        margin-right: 15px;
    }

    .pt-31px {
        padding-top: 31px;
    }

    .pt-18px {
        padding-top: 18px;
    }

    .Rectangle-1283 {
        height: 42px;
        border-radius: 12px;
        box-shadow: 0 4px 30px 0 rgba(149, 157, 162, 0.25);
        background-color: #eaf9f8;
    }

    /*Dashboard背景圖*/
    .bg-img-1 {
        background-image: url('../Im/bg-1.webp');
    }

    /*資源循環指標總覽背景圖*/
    .bg-img-2 {
        background-image: url('../Im/bg-2.webp');
    }

    /*公告訊息背景圖*/
    .bg-img-3 {
        background-image: url('../Im/bg-2.webp');
    }

    /*廢棄物即時月報 報表外框*/
    .shadow-sm-report {
        border-radius: 12px;
        box-shadow: 0 4px 30px 0 rgba(162, 162, 162, 0.25) !important;
        background-color: #fff;
    }

    /*資源循環指標總覽 各指標背景色*/
    .bg-61c1bd {
        background-color: #61c1bd !important;
    }

    .bg-63b3cc {
        background-color: #63b3cc !important;
    }

    .bg-699ece {
        background-color: #699ece !important;
    }

    .bg-738ccc {
        background-color: #738ccc !important;
    }

    .bg-6cbd8c {
        background-color: #6cbd8c !important;
    }

    .bg-b1bc6d {
        background-color: #b1bc6d !important;
    }

    .bg-7ebccf {
        background-color: #7ebccf !important;
    }

    /*左側選單顯示時，將Dashboard的位置上移*/
    @media (min-width: 1235px) {
        .Dashboard {
            margin-top: -300px;
        }
    }

    /*tooltip樣式*/
    .tooltip-container .tooltip {
        color: #ffffff;
        background-color: #19274ce6;
        border-radius: 5px; /* 圓角 */
    }

    /*問號樣式*/
    .circle {
        display: inline-flex; /* 使圓圈和文字在同一行 */
        justify-content: center;
        align-items: center;
        width: 20px; /* 圓圈寬度 */
        height: 20px; /* 圓圈高度 */
        border-radius: 50%; /* 使其成為圓形 */
        background-color: #19548c; /* 底色 */
        color: #fff; /* 文字顏色 */
        font-size: 16px; /* 文字大小 */
        font-weight: bold; /* 字體加粗 */
        text-align: center; /* 文字居中 */
        cursor: pointer;
    }

    .title-content {
        font-size: 1.1rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.89;
        letter-spacing: normal;
        color: #2d496b;
        text-align: justify;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }

    /*總體物質流布-歷年趨勢圓底圖*/
    .Rectangle-linechart {
        width: 121px;
        height: 121px;
        flex-grow: 0;
        border-radius: 59px;
        background-color: #61c1bd;
        display: flex;
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
    }

    /*總體物質流布-組成比例圓底圖*/
    .Rectangle-piechart {
        width: 121px;
        height: 121px;
        flex-grow: 0;
        border-radius: 59px;
        background-color: #738ccc;
        display: flex;
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
    }

    /*總體物質流布-定義圓底圖*/
    .Rectangle-def {
        width: 121px;
        height: 121px;
        flex-grow: 0;
        border-radius: 59px;
        background-color: #6ac6e3;
        display: flex;
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
    }

    .Rectangle-title-background {
        width: 113px;
        height: 30px;
        flex-grow: 0;
        border-radius: 23px;
        background-color: #edeef2;
    }

        .Rectangle-title-background span {
            width: 60px;
            height: 14px;
            flex-grow: 0;
            font-family: Inter;
            font-size: 14px;
            font-weight: 600;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: normal;
            text-align: center;
            color: #355571;
        }

    img.img_popup_1 {
        width: 66.4px;
        height: 53.9px;
        flex-grow: 0;
        object-fit: contain;
    }

    img.img_popup_2 {
        width: 65.5px;
        height: 65.7px;
        flex-grow: 0;
        object-fit: contain;
    }

    img.img_popup_3 {
        width: 60.9px;
        height: 66.7px;
        flex-grow: 0;
        object-fit: contain;
    }

    /*footer menu*/
    .webmap {
        z-index: 50;
        background-color: #27364d;
        position: relative;
        padding: 5rem 0 2rem;
        /*min-height:873px;*/
    }


        .webmap .dropdown-item {
            color: #fff;
        }

        .webmap .itemBox {
            padding: 0 1rem;
        }

            .webmap .itemBox .title {
                font-size: 20px;
                letter-spacing: 2.3px;
                color: #409ab1;
                text-align: center;
                border-bottom: 1px solid #9daec9;
                padding: 10px 0;
                display: block;
            }

            .webmap .itemBox .item {
                cursor: pointer;
                font-size: 16px;
                line-height: 1.29;
                color: #2f3c51;
                margin: 20px 0;
                text-align: center;
                font-weight: 500;
            }

    .bg-pos-2 {
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        max-width: 244px;
        z-index: 52;
        -webkit-filter: drop-shadow(1px 1px 1px #ccc);
        filter: drop-shadow(1px 1px 1px #ccc);
    }

    /*左側功能表第1層*/
    .accordion-body ul, .accordion-body {
        padding: 0;
        margin: 0;
    }

    .level1:hover,
    .level1:hover > a,
    .level1.active,
    .level1 a:hover,
    .level1.active a,
    .level1.accordion-item button:hover {
        color: #0c8f8b !important;
        background: #ffffff !important;
        border: 0;
        font-family: Inter;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left !important;
    }

    .level1.accordion-item,
    .level1.accordion-item button,
    .level1,
    .level1 a {
        color: #0c8f8b !important;
        background: #ffffff !important;
        border: 0;
        font-family: Inter;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left !important;
        padding-left: 20px !important;
    }

    /*左側功能表第2層*/
    .level2:hover,
    .level2:hover > a,
    .level2.active,
    .level2 a:hover,
    .level2.active a,
    .level2.accordion-item button:hover {
        color: #ffffff !important;
        background: #41c4c6 !important;
        border: 0;
        border-radius: 0;
        text-align: left !important;
        font-family: Inter;
        font-weight: 500 !important;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
    }

    .level2.accordion-item,
    .level2.accordion-item button,
    .level2,
    .level2 a {
        color: #ffffff !important;
        background: #178ba7 !important;
        border: 0;
        border-radius: 0;
        text-align: left !important;
        font-family: Inter;
        font-weight: 500 !important;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
    }

    .menuItem.level2,
    .menuItem.level2 a {
        padding-left: 20px !important;
        display: inline-block;
        width: 100%;
    }

    .level2 .accordion-button,
    .level2 .accordion-button:not(.collapsed) {
        box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 #b0dce5 !important;
    }

    .menuItem.level2:not(:last-child) {
        border-bottom: 1px solid #b0dce5;
    }

    /*左側功能表第3層*/
    .level3:hover,
    .level3:hover > a,
    .level3.active,
    .level3 a:hover,
    .level3.active a {
        color: #fff !important;
        background: #41c4c6 !important;
        border: 0;
        border-radius: 0;
        font-weight: bold !important;
        text-align: left !important;
    }

    .level3.accordion-item,
    .level3.accordion-item button,
    .level3,
    .level3 a {
        color: #2f6e7d !important;
        background: #d8eef3 !important;
        border: 0;
        border-radius: 0;
        font-weight: bold !important;
        text-align: left !important;
    }

    .menuItem.level3,
    .menuItem.level3 a {
        padding-left: 26px !important;
        display: inline-block;
        width: 100%;
        border-radius: 0 !important;
    }

    .level3 .accordion-button,
    .level3 .accordion-button:not(.collapsed) {
        box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 #aedde8 !important;
        padding-left: 22px !important
    }

    .menuItem.level3:not(:last-child) {
        border-bottom: 1px solid #aedde8;
    }


    /*左側功能表第4層*/
    .level4:hover,
    .level4:hover > a,
    .level4.active,
    .level4 a:hover,
    .level4.active a {
        color: #fff !important;
        background: #40C4C6 !important;
        border: 0;
        font-weight: bold !important;
        text-align: left !important;
    }

    .level4,
    .level4 a {
        color: #29383b !important;
        background: #feffff !important;
        border: 0;
        font-weight: bold !important;
        text-align: left !important;
        padding-left: 65px !important;
    }

        .level4.accordion:not(:last-child),
        .menuItem.level4:not(:last-child) {
            border-bottom: 1px solid #89c3c3;
        }

    /*左側功能表位置*/
    .content .boxSix .boxSixContent .sidebar {
        padding-right: 0px;
    }

    /* 隱藏前置的展開縮合符號 */
    .menuList .accordion-button::after {
        display: none;
    }

    /* 縮合/展開使用全形的+-符號，並放置前面 */
    .menuList .accordion-button::before {
        content: "＋";
        font-size: 23px;
        margin-right: 5px;
    }

    .menuList .accordion-button:not(.collapsed):before {
        content: "－";
        font-size: 23px;
        margin-right: 5px;
    }
    /*縮合符號位置*/
    .menuList .accordion-header button, .accordion-button:not(.collapsed) {
        display: flex;
        padding-left: 10px;
    }
    /*關閉縮合時按鈕樣式的右下圓角*/
    .menuList .accordion-item .accordion-button.collapsed {
        border-radius: 0;
    }

    /*手機版menu選單: start*/

    /*level 1*/
    .mobile .accordion .accordion-item.mobilelevel1 button,
    .mobile .accordion .accordion-item.mobilelevel1 a {
        color: #fff !important;
        background: #178ba7 !important;
    }
    /*level 2*/
    .mobile .accordion .accordion-body.mobilelevel2 a {
        color: #2f6e7d !important;
        background: #d8eef3 !important;
        font-size: 1rem !important;
        padding-left: 38px;
    }

    .mobile .accordion .accordion-item.mobilelevel2.childer-item button {
        color: #2f6e7d !important;
        background: #d8eef3 !important;
        font-size: 1rem !important;
        text-align: left;
        padding-left: 32px;
    }

    .mobile .accordion .accordion-item.mobilelevel2.childer-item {
        border: 1px solid #aedde8;
    }

    .mobile .accordion .accordion-body.mobilelevel2 .item {
        background: #d8eef3 !important;
        border: 1px solid #aedde8;
    }

    /*level 3*/
    .mobile .accordion .accordion-body.mobilelevel3 a {
        color: #29383b !important;
        background: #feffff !important;
        font-size: 1rem !important;
        padding-left: 58px;
    }

    .mobile .accordion .accordion-item.mobilelevel3.childer-item button {
        color: #29383b !important;
        background: #feffff !important;
        font-size: 1rem !important;
        text-align: left;
        padding-left: 40px;
    }

    .mobile .accordion .accordion-body.mobilelevel3 .item {
        background: #feffff !important;
        border-bottom: 1px solid #aedde8;
    }

    /*level 4*/
    .mobile .accordion .accordion-body.mobilelevel4 a {
        color: #29383b !important;
        background: #feffff !important;
        font-size: 1rem !important;
        padding-left: 66px;
    }

    .mobile .accordion .accordion-item.mobilelevel4.childer-item button {
        color: #29383b !important;
        background: #feffff !important;
        font-size: 1rem !important;
        text-align: left;
        padding-left: 55px;
    }

    .mobile .accordion .accordion-body.mobilelevel4 .item {
        background: #feffff !important;
        border-bottom: 1px solid #aedde8;
    }

    /* 隱藏前置的展開縮合符號 */
    .mobile .accordion-button::after {
        display: none;
    }
    /* 縮合/展開使用全形的+-符號，並放置前面 */
    .mobile .accordion-button::before {
        content: "＋";
        font-size: 23px;
        margin-right: 5px;
    }

    .mobile .accordion-button:not(.collapsed):before {
        content: "－";
        font-size: 23px;
        margin-right: 5px;
    }
    /*縮合符號位置*/
    .mobile .accordion-header button, .accordion-button:not(.collapsed) {
        display: flex;
        padding-left: 10px;
    }

    header > .mobile.displayBox #navbarToggleExternalContent {
        position: fixed;
        width: 100%;
        left: 0;
        z-index: 1050;
        margin-top: 100px;
        height: 100%;
        overflow: auto;
        top: 0;
        background-color: rgba(0, 0, 0, 0.8); /* 半透明背景 */
    }

        header > .mobile.displayBox #navbarToggleExternalContent .accordion-item .item {
            padding: 1rem;
            cursor: pointer;
        }

    /*手機版menu選單: end*/

    .bg-mask-group {
        background-image: url('../Im/mask-group-detail.webp');
        background-size: cover; /* 使背景圖片覆蓋整個 header */
        background-position: center; /* 背景圖片居中 */
        width: 100%;
    }

    .mask-group-detail {
        width: 100%;
        height: 120px;
        position: relative; /* 使內部定位有效 */
    }

        .mask-group-detail .title-text {
            position: absolute; /* 絕對定位 */
            left: 15%;
            top: 40%;
            font-family: Inter;
            font-size: 42px;
            font-weight: 500;
            font-stretch: normal;
            font-style: normal;
            line-height: normal;
            letter-spacing: 3.12px;
            text-align: left;
            color: #1d3e5d;
        }

    .box-style {
        margin: 30px 0 37px;
        padding: 27px 39px 10px 35px !important;
        border-radius: 9px;
        background-color: #e7f9ff;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 2;
        letter-spacing: normal;
        text-align: left;
        color: #1d6888 !important;
    }

    .contentItemSubContent-text {
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 2;
        letter-spacing: normal;
        text-align: left;
        color: #20527d;
    }

    .contentItemSubContent .border-left-style {
        border-color: #a6d2de;
        border-left-width: 6px;
        border-left-style: solid;
    }

    .link-style {
        color: #307bbe;
        text-decoration: underline;
    }

    @media (max-width: 860px) {
        .desktop {
            display: none !important;
        }

        .header_logo {
            width: 173px;
            height: 40px;
        }

        .mobile {
            display: contents;
        }

        .mobile-img-height-250 {
            height: 250px !important;
        }

        .mobile-padding-top {
            padding-top: 70px;
        }
    }

    .bg-55b6b4 {
        background-color: #55b6b4;
        color: #ffffff;
    }

    .bg-7f7f7f {
        background-color: #7f7f7f;
        color: #ffffff;
    }

    /*保持在最上方*/
    @media (max-width: 768px) {
        .keep-top {
            position: fixed;
            top: 0;
            z-index: 1000;
        }
    }

/*版2 footer menu*/
.webmap2 {
    z-index: 50;
    background-color: #2c4976;
    position: relative;
    padding: 5rem 0 2rem;
    /*min-height:873px;*/
}


    .webmap2 .dropdown-item {
        color: #fff;
    }

    .webmap2 .itemBox {
        padding: 0 1rem;
    }

        .webmap2 .itemBox .title2 {
            font-size: 20px;
            letter-spacing: 2.3px;
            color: #409ab1;
            text-align: left;
            padding: 10px 0;
            display: block;
            margin-left: 20px;
        }

        .webmap2 .itemBox .item {
            cursor: pointer;
            font-size: 16px;
            line-height: 1.29;
            color: #2f3c51;
            margin-right: 20px;
            margin-left: 20px;
            text-align: left;
            font-weight: 500;
        }
        /*分隔線*/
        .separator-193051 {
            border-right: 1px solid #193051;
        }
        .separator-white {
            border-right: 1px solid #fff;
        }


/*版2 footer*/
.footer2 {
    z-index: 50;
    background-color: #1e3a64;
    position: relative;
    padding: 3rem 0;
}


    .footer2 .linkBox .detect.desktop {
        flex-direction: row;
        display: flex;
        align-items: flex-start;
    }

    .footer2 .linkBox .detect {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.57px;
        text-align: center;
        color: #fff;
        -webkit-box-pack: center;
        justify-content: center;
        cursor: pointer;
    }

        .footer2 .linkBox .detect .link {
            font-family: PingFangTC;
            font-size: 18px;
            letter-spacing: 0.57px;
            text-align: center;
            color: #fff;
            -webkit-box-pack: center;
            justify-content: center;
            cursor: pointer;
            text-decoration: underline;
        }

    .footer2 .address {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.07px;
        color: #fff;
        text-align: center;
        margin-top: 3rem;
    }

    .footer2 .copyright {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.07px;
        color: #fff;
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 20px;
        margin-top: 20px;
        position: relative; /* 用於定位偽元素 */
    }


        .footer2 .copyright::after {
            content: "";
            display: block;
            margin: 0 auto; /* 居中對齊 */
            width: 90%; /* 控制線條的長度，可根據需要調整 */
            border-bottom: 1px solid #6e87ac; /* 邊線樣式 */
            position: absolute;
            bottom: 0; /* 定位到底部 */
            left: 0;
            right: 0;
        }


    .footer2 .suggest {
        font-family: PingFangTC;
        font-size: 18px;
        letter-spacing: 0.57px;
        color: #86919f;
        text-align: center;
    }

/*公告訊息*/
.News {
}
    .News .content {
        border-radius: 6px;
        background: #fff;
    }
        .News .content .hr {
            color: #e1edf4;
            background: #e1edf4;
            height: 1px;
            margin: 0 auto
        }
    .News div.mark {
        text-align: center;
        background: none;
        padding: 0;
        margin: 0;
    }

        .News div.mark > div
         {
            border-radius: 100%;
            width: 10px;
            height: 10px;
            background: #38c0bb;
            padding: 0;
            margin: 0;
            margin: 0 auto;
            vertical-align: middle;
            cursor: pointer;
        }

        .News div.mark > div {
            display: inline-block;
        }

    .News .content .row .date {
        text-align: right;
        color: #4081be;
    }
.li-news-tab {
    background-color: #fff;
    color: #376fa4;
    padding-top: 10px;
    padding-right: 100px;
    padding-bottom: 10px;
    padding-left: 100px;
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
}
    .li-news-tab.selected {
        background-color: #19548c;
        color: #fff;
        padding-top: 10px;
        padding-right: 100px;
        padding-bottom: 10px;
        padding-left: 100px;
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0;
    }

.btn-news-more {
    height: 50px;
    border-radius: 6px;
    background-color: #219cb7;
    color: #fff;
    border: 1px;
    padding: 0px 30px 0px 30px;
}
.font-174066 {
    color: #174066;
}

@media (max-width: 425px) {
    .wrapper header .primary-title {
        font-size: 1rem;
    }
}
@media (max-width: 375px) {
    .wrapper header .primary-title {
        font-size: 0.9rem;
    }
}
@media (max-width: 320px) {
    .wrapper header .primary-title {
        font-size: 0.7rem;
    }
}

.font-color-1e9faa {
    color: #1e9faa !important;
}

.btn-flow {
    height: 50px;
    border-radius: 6px;
    background-color: #219cb7;
    color: #fff;
    border: 1px;
    padding: 0px 30px 0px 30px;
}

@media (max-width: 425px) {
    .btn-flow {
        width: 95%
    }
}

.resources-svg {
    margin: 38px 0 0 !important;
    padding: 28px 47px 43px 52px !important;
    background-color: #f3f8fb !important;
}

.resources-svg .svg-title {
    font-size: 27px;
    color: #4c526c;
}

.resources-svg .svg-button {
  border: 1px;
  padding: 11px 23px 13px 21px;
  border-radius: 54px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #4b6e82
}

.btn-close-modal {
    height: 50px;
    border-radius: 6px;
    background-color: #c6c9ca;
    color: #ffffff;
    border: 1px;
    padding: 0px 10px 0px 10px;
    width: 99%;
}

.btn-modal {
    height: 50px;
    border-radius: 6px;
    background-color: #219cb7;
    color: #fff;
    border: 1px;
    padding: 0px 10px 0px 10px;
    width: 99%;
}

.div-img-def {
    border-radius: 6px;
    background-color: #f3f8fb;
    margin-left: 10px;
    margin-right: 10px;
}

.div-img {
    padding: 0px;
}

.div-img img{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.div-def {
    padding: 30px;
}

.def-label {
    background-color: #cce1e6;
    border-radius: 9px;
    color: #81a7bc;
    width: 80px;
    height: 40px;
    text-align: center;
    padding-top: 7px;
    margin-bottom: 10px;
}

.resources-label {
    background-color: #cce1e6;
    border-radius: 9px;
    color: #81a7bc;
    width: 120px;
    height: 40px;
    text-align: center;
    padding-top: 7px;
    margin-bottom: 10px;
    margin-left:-15px;
}

.resources-label.active,
.def-label.active {
    background-color: #219cb7;
    color: #ffffff;
    z-index:1;
}