* {
 font-family:'Noto Sans TC','Microsoft JhengHei', sans-serif;
}
body{
 background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/Grid_BG.png) no-repeat;
 overflow-x: hidden;
}

html{
   overflow-x: hidden;
}

a{
 color: #1A1B1E;
 text-decoration: none;
}
a:hover{
 text-decoration: none;
 color: #4A5565;
}
a:active{
 text-decoration: none;
 color: #4A5565;
}
hr{
 color: #B2B2B2;
}

.btn {

}

.ellipsis {
 overflow:hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.multiline-ellipsis {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
}

.tripleline-ellipsis {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
}

.fs--1{
 font-size: 0.8rem;
}
.fc-white{
 color: #FFF;
}
.fc-gray{
   color: #C9C9C9;
}
.fc-purple{
   color: #2229B5;
}

.fc-ored{
   color: #F56962;
}
.fc-blue{
   color: #7BB8E0;
}
.fc-darkblue{
   color: #183650;
}

.fc-yellow{
   color: #F9D440;
}
.fc-red{
   color: red;
}
.fc-orange{
   color: #ED6F30;
}
.fc-green{
   color: #2DA7A4;
}
.bg-grayblue{
   background-color: #D9E3EC;
}
.bg-green{
   background-color: #2DA7A4;
}
.bg-gray{
   background-color: #DDD;
}
.bg-yellow{
   background-color: #FFF9E1;
}
.bg-transparent{
   background-color: transparent;
}
.bg-lightblue{
   background-color: #EAF6FA;
}


.btn-primary{
   color: #FFF;
   background-color: #ED6F30;
   border-color: #ED6F30;
}

.btn-primary:hover{
   color: #FFF;
   background-color: #af3e06;
   border-color: #af3e06;
}

.btn-outline-primary {
 color: #ED6F30;
 border-color: #ED6F30;
}

.btn-outline-primary:hover {
 color: #fff;
 background-color: #d34b07;
 border-color: #d34b07;
}

.btn-success{
   color: #FFF;
   background-color: #2DA7A4;
   border-color: #2DA7A4;
}

.btn-success:hover{
   color: #FFF;
   background-color: #227e7c;
   border-color: #227e7c;
}

.btn-outline-light {
   color: #000000;
   border-color: #279DEC;
   background-color: #EFF9FF;
}

.btn-outline-light:hover{
   color: #FFF;
   background-color: #279DEC;
}


/*========================*/
/*========= 首頁  ========*/
/*========================*/

/*===== Header =====*/

#myHeader{
   position: fixed;
   top: 0;
   transition: 0.3s;
   z-index: 999;
   background-color: #FFF;
   width: 100%;
}

.small-header{
   background: #F3FAFF;
   width: 100%;
   height: 30px;
}

.topLinks .slink{
 font-size: 0.95rem;
 color: #6D6D6D;
 text-decoration: none;
}

.topLinks .slink::after{
   content: "|";
   color: #6D6D6D;
   margin-right: 8px;
   margin-left: 8px;
}

.topLinks .slink:nth-last-child(1)::after{
   content: "";
}

.topLinks .slink:hover{
   font-size: 0.95rem;
   color: #2b5c54;
   font-weight: 700;
   text-decoration: none;
}

#navbarNav a{
   white-space: nowrap;
   font-size: 1.1rem;
   font-weight: 500;
   color: #4A5565;
   padding-bottom: 0;
   line-height: 3;
   border-bottom: 8px solid transparent;
}

#navbarNav a:hover{
   border-bottom: 8px solid #1CA4FF;
}

#navbarNav .nav-item:last-child a:hover{
   border-bottom: 8px solid transparent;
}

.topLinks .subscribe-btn{
   font-size: 0.95rem;
   text-decoration: none;
   color: #2DA7A4;
   font-weight: 700;
   background-color: #FFF;
   padding: 13.5px;
}

.topLinks .subscribe-btn:hover{
   text-decoration: none;
   color: #FFF;
   background-color: #217c7a;
   font-weight: 700;
}

#headernav{
   background-color: #FFF;
   padding-bottom: 0;
}

@media (min-width: 992px){
   #headernav {
      padding-left: 0;
      padding-right: 0;
   }
}



/*===== 輪播 =====*/
/*.carousel-inner{
   max-height: 750px;
}

.carousel-inner .carousel-item {
  height: 920px;
  object-fit: cover;
}

.carousel-inner img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}*/

.cus-my{
   margin-top: 130px;
   margin-bottom: 20px;
}

.carousel-control-next, .carousel-control-prev {
   opacity: 1;
   bottom: -20%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
   width: 3rem;
   height: 7rem;
   background-color: #1CA4FF;
}

.carousel-control-next{
   justify-content: flex-end;
}

.carousel-control-prev{
   justify-content: flex-start;
}



/*=====  index共用  =====*/

.section{
   z-index: 50;
   margin-top: 20px;
}

.section.-first{
   margin-top: 0;
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/sec01bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   padding: 50px 100px 100px 100px
}

.section.-third{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/sec03bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   min-height: 900px;
}

.section.-fourth{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/sec04bg.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}

.section.-fifth{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/sec05bg.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom;
   min-height: 560px;
}


.section-title{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/section-title-bg.png);
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   height: 60px;
}

.section-title .text{
   font-size: 3rem;
   display: flex;
   align-items: center;
}

.section-title .engText{
   color: #1F1F1F;
}

/*===== CTA Button=====*/

.Cta-btn{
  position: fixed;
  z-index:1001;
  right: 2%;
  bottom: 8%;
}

.Cta-btn a{
 position: relative;
 right: 5px;
 text-align: center;
 display: block;
 margin-bottom: 20px;
 transition: all 0.6s ease-in;
 width: 70px;
 transform: scale(1.2);
}

.Cta-btn a:nth-child(1):hover{
 transition: all 0.6s ease-in;
 transform: scale(1.6) translateY(-10px);
 top: -10%;
}

.Cta-btn a:nth-child(2):hover{
 transition: all 0.6s ease-in;
 transform: scale(1.6) translateY(10px);
 top: -10%;
}

.cta-img-item .movie-item {
  clip-path: circle(50% at 50% 50%);
  position: relative;
}

.cta-img-item:hover .overlay {
  top: 0;
}

.cta-img-item .overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  position: absolute;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0;
  white-space: nowrap;
  top: 100%;
  transition: all 0.6s ease-in;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*===== back to top=====*/
#gotopbutton {
 display: inline-block;
 width: 40px;
 height: 65px;
 background: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/gotop.svg) no-repeat center;
 text-align: center;
 border-radius: 4px;
 position: fixed;
 bottom: 30px;
 right: 2%;
 display: block;
 width: 80px;
 text-align: center;
 transition: background-color .3s, opacity .5s, visibility .5s;
 opacity: 0;
 visibility: hidden;
 z-index: 1000;
}

#gotopbutton div{
   color: #BCBCBC;
}

#gotopbutton:hover {
 cursor: pointer;
 font-weight: 700;
}

#gotopbutton.show {
 opacity: 1;
 visibility: visible;
}


/*=====  競賽場館分布  =====*/
.mapBox{
   position: relative;
   bottom: -8%;
}

.cities{
   font-size: 1.25rem;
}

/*modal*/
.modal-header{
   background-color: #279DEC;
   border-top-left-radius: calc(.8rem - 1px);
   border-top-right-radius: calc(.8rem - 1px);
}

.modal-header .modal-title{
   color: #FFF;
}

.modal-header .btn-close{
   background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.modal-header02 {
 display: flex;
 justify-content: end;
}

.modal-header02 .btn-close {
 padding: 20px;
}

.modal-content {
   border-radius: 0.8rem;
}

.modal-footer{
   border-top: unset;
   border-bottom-right-radius: calc(0.8rem - 1px);
   border-bottom-left-radius: calc(0.8rem - 1px);
}

#modal-tab .nav-link{
   font-size: 1.2rem;
   font-weight: 700;
   white-space: nowrap;
   padding: 10px;
   border-radius: 10px;
   width: 80px;
   height: 80px;
   background: #E3E3E3;
   color: #434343;
   margin-top: 10px;
   margin-right: 14px;
   margin-left: 14px;
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

#modal-tab::before{
   content: "———";
   margin-top: 35px;
}

#modal-tab::after{
   content: "———";
   margin-top: 35px;
}

#modal-tab .nav-link div{
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

#modal-tab .nav-link.active, #modal-tab .show>.nav-link {
 color: #fff;
 background-color: #E6A72C;
}

.modalRow{
   height: 100px;
}

.modalLink {
   display: block;
   text-align: center;
   height: 100%;
   color: #000000;
   border: 1px solid #279DEC;
   background-color: #EFF9FF;
   padding: 0.375rem 0.75rem;
   font-size: 1rem;
   border-radius: 0.25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.modalLink:hover{
   color: #FFF;
   background-color: #279DEC;
}


/*=====  訊息公告(轉換區塊)  =====*/

.leftBox, .rightBox{
   border: 1.5px solid #7BB8E0;
   border-radius: 15px;
   padding: 50px 15px 15px 15px;
   background-color: #FFF;
   position: relative;
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.leftBox .titlePNG{
   position: absolute;
   top: -50px;
   left: 0;
}

.leftBox .list-group-item{
   border: 0;
   line-height: 2.2rem;
   border-bottom: 1px solid #E8E8E8;
}

.card-tag{
   font-size: 0.9rem;
   color: #1A1311;
   background-color: #E6E6E6;
   border-radius: 8px;
   padding: 0px 10px;
   margin-right: 10px;
}

.iconBox{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon/news.png);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   min-width: 50px;
   min-height: 50px;
}

.list-group-item.-blue a:hover .iconBox{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon/blue-hover.png);
}
.list-group-item.-orange a:hover .iconBox{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon/orange-hover.png);
}
.list-group-item.-green a:hover .iconBox{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon/green-hover.png);
}
.list-group-item.-yellow a:hover .iconBox{
   background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon/yellow-hover.png);
}

.list-group-item a:hover .title{
   color: #005A97;
}

.rightBox #msg-tab{
   position: absolute;
   top: -4%;
   left: 0;
}

.leftBox #leftBox-tab{
   position: absolute;
   top: -4%;
   left: 0;
}

#msg-tab .nav-link, #leftBox-tab .nav-link {
   position: relative;
   display: block;
   font-size: 1.2rem;
   padding: 0.3rem 1rem 0.3rem 3.2rem;
   color: #5A5959;
   text-decoration: none;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
   border: 3px solid;
   background-color: #FFF;
   transform: skewX(-155deg);
   margin-right: 24px;
}

#msg-tab .nav-link.-blue, #leftBox-tab .nav-link.-blue{
   border-color: #326ABB;
}

#msg-tab .nav-link.-blue.active, #msg-tab .show>.nav-link.-blue,
#leftBox-tab .nav-link.-blue.active, #leftBox-tab .show>.nav-link.-blue {
  color: #fff;
  background-color: #00398A;
}

#msg-tab .nav-link.-orange, #leftBox-tab .nav-link.-orange{
   border-color: #F1633F;
}

#msg-tab .nav-link.-orange.active, #msg-tab .show>.nav-link.-orange,
#leftBox-tab .nav-link.-orange.active, #leftBox-tab .show>.nav-link.-orange {
  color: #fff;
  background-color: #D62E02;
}

#msg-tab .nav-link.-yellow, #leftBox-tab .nav-link.-yellow{
   border-color: #F1AB3F;
}

#msg-tab .nav-link.-yellow.active, #msg-tab .show>.nav-link.-yellow,
#leftBox-tab .nav-link.-yellow.active, #leftBox-tab .show>.nav-link.-yellow {
  color: #fff;
  background-color: #CE8F2F;
}

#msg-tab .nav-link.-green, #leftBox-tab .nav-link.-green{
   border-color: #A3DFA0;
}

#msg-tab .nav-link.-green.active, #msg-tab .show>.nav-link.-green,
#leftBox-tab .nav-link.-green.active, #leftBox-tab .show>.nav-link.-green {
  color: #fff;
  background-color: #5CB757;
}

#msg-tab .nav-link span, #msg-tab .nav-link img,
#leftBox-tab .nav-link span, #leftBox-tab .nav-link img{
   transform: skewX(155deg);
   display: inline-block;
}

#msg-tab .nav-link img, #leftBox-tab .nav-link img {
   position: absolute;
   width: 76px;
   top: -22px;
   left: -23px;
}

.rightBox .list-group-item{
   border: 0;
   line-height: 2.25rem;
   border-bottom: 1px solid #E8E8E8;
}


#tab-owl .card, #tabLeft-owl .card{
   margin-top: 10px;
   border-radius: 15px;
   border: 1px solid #ECECEC;
}

#tab-owl a:hover .card{
   border: 3px solid #FCD040;
}

#tabLeft-owl a:hover .card{
   border: 1px solid #FCD040;
}

#tab-owl .card-quota{
   background-color: #F0F0F0;
   border-radius: 10px;
   padding: 5px 10px;
   color: #00398A;
   font-weight: 500;
   display: flex;
   justify-content: space-between;
}

#tabLeft-owl .card-quota{
   background-color: #F0F0F0;
   border-radius: 10px;
   padding: 4px 8px;
   color: #00398A;
   font-weight: 500;
   display: flex;
   justify-content: space-between;
}

#tab-owl .card-quota .amount, #tabLeft-owl .card-quota .amount{
   color: #F1633F;
   font-weight: 700;
   font-size: 1.2rem;
   display: inline-block;
}

#tab-owl .owl-dots .owl-dot span, #tabLeft-owl .owl-dots .owl-dot span {
   width: 50px;
   height: 7px;
   margin: 5px 0px;
   background: #E5E5E5;
   display: block;
   -webkit-backface-visibility: visible;
   transition: opacity .2s ease;
   border-radius: 30px;
}

#tab-owl .owl-dots .owl-dot:hover span, #tabLeft-owl .owl-dots .owl-dot:hover span{
   background-color: #8F959F;
}

#tab-owl .owl-dots .owl-dot.active span, #tabLeft-owl .owl-dots .owl-dot.active span{
   background-color: #8F959F;
   width: 45px;
}


/*======  影音精選  ======*/

#video-owl{
   margin-top: 50px;
}

#video-owl .item .card{
  border: unset;
  background-color: transparent;
}

#video-owl .item .card-title{
   color: #515151;
   font-size: 1.5rem;
   font-weight: 700;
}

#video-owl .item .card-body{
   padding: 0rem 2rem 0rem 0rem;
}

#video-owl .item .card-text{
   color: #515151;
}

#video-owl .owl-dots{
   position: absolute;
   bottom: 0;
}

#video-owl .owl-dots .owl-dot span {
  width: 30px;
  height: 7px;
  margin: 5px 7px;
  background: #E5E5E5;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 30px;
}

#video-owl .owl-dots .owl-dot:hover span{
   background-color: #8F959F;
}

#video-owl .owl-dots .owl-dot.active span{
   background-color: #8F959F;
   width: 45px;
}


/*======  活動花絮  ======*/

#activity-owl .item{
   background-color: #FFF;
   display: flex;
   justify-content: center;
   align-items: center;
}

/*#activity-owl .item img{
   height: 100%;
   width: auto !important;
}*/

#activity-owl .item .card{
  border: 1px solid #D2D2D2;
  border-radius: 8px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

#activity-owl .item .card-title{
   color: #6C7582;
   font-size: 1.2rem;
   font-weight: 700;
   margin-top: 10px;
   margin-bottom: 10px;
}

#activity-owl .item .card-body{
   position: relative;
}

#activity-owl .item .card-text{
   color: #6C7582;
}

#activity-owl .item .card-date{
   color: #747474;
   font-size: 0.9rem;
}

#activity-owl .item .card-tag{
   position: absolute;
   right: 0;
   top: -15%;
   font-size: 1rem;
   padding: 4px 30px;
   border-radius: 14px 5px 14px 5px;
   color: #FFF;
   background-color: #F1AB3F;
   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

#activity-owl .owl-dots .owl-dot span {
  width: 30px;
  height: 7px;
  margin: 5px 7px;
  background: #E5E5E5;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 30px;
}

#activity-owl .owl-dots .owl-dot:hover span{
   background-color: #8F959F;
}

#activity-owl .owl-dots .owl-dot.active span{
   background-color: #8F959F;
   width: 45px;
}

/*======  世壯運志工召募現況  ======*/
.dataBox{
   /*height: 265px;*/
}

.section.-fifth .dataBox div:nth-child(2), .section.-fifth .dataBox div:nth-child(5){
 margin-top: -25px;
}

.dataItem{
   position: relative;
   background-color: #FFF;
   padding: 70px 25px 25px 25px;
   border: 1px solid #EAEAEA;
   border-radius: 14px;
   margin-bottom: 15px;
}

.itemTitle{
   position: absolute;
   background-color: #FFF;
   color: #373737;
   border: 1px solid #1CBBFF;
   border-radius: 10px;
   padding: 6px 24px;
   top: -6%;
   left: 24%;
}

.circle {
   width: 150px;
   display: inline-block;
   position: relative;
   text-align: center;
   line-height: 1.2;
}



.circle strong {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
  font-size: 1.6rem;
  color: #5ECFFF;
}

.circle strong i {
  font-style: normal;
  font-size: 0.6em;
  font-weight: normal;
}



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

.footer-above{
   background-color: #E8F2F9;
}

.footer-below{
   font-size: 0.8rem;
   color: #515151;
   background-color: #D9E3EC;
   padding: 15px;
}

.footer-above .slink{
   color: #4A5565;
}

.footer-above .slink::after{
   content: "　|　";
   color: #AAA;
}
.footer-above .slink:nth-last-child(1)::after{
   content: "";
   margin-right: 15px;
}
.footer-above .f-title{
   color: #4A5565;
   font-size: 1.4rem;
   margin-top: 15px;
   margin-bottom: 15px;
}
.footer-above .f-title::after{
   content: "";
   border-bottom: 1px solid #c5c5c5;
   display: block;
   width: 30px;
   margin-top: 10px;
}

.footer-above .f-link{
   color: #4A5565;
   text-align: left;
}
.footer-above .f-link:hover{
   text-decoration: underline;
}

.footer-above .slink{
   color: #5E9EC8;
   white-space: nowrap;
}
.footer-above .slink:hover{
   text-decoration: underline;
}

.infoBox{
   color: #4A5565;
}


/*========================*/
/*===== index - RWD  =====*/
/*========================*/

/* laptop */
@media (max-width: 1440px) {
   /*.carousel-inner{
      max-height: 575px;
   }
   .carousel-inner .carousel-item {
      height: 700px;
      object-fit: cover;
   }*/
   .mapBox {
      bottom: -2%;
   }
   .section.-fifth .dataBox div:nth-child(2), .section.-fifth .dataBox div:nth-child(5){
    margin-top: 30px;
 }
}

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

   /*.carousel-inner{
      max-height: 575px;
   }
   .carousel-inner .carousel-item {
      height: 700px;
      object-fit: cover;
   }*/
   .dataItem {
      padding: 20px 0px 0px 7px;
   }
   .itemTitle {
      left: 20%;
   }
   .container.-sp{
      max-width: unset;
   }
   #msg-tab .nav-link img, #leftBox-tab .nav-link img {
      position: absolute;
      width: 72px;
      top: -22px;
      left: -22px;
   }
   #msg-tab .nav-link, #leftBox-tab .nav-link {
      position: relative;
      display: block;
      font-size: 1.2rem;
      padding: 0.3rem 0.55rem 0.3rem 2.5rem;
      color: #5A5959;
      text-decoration: none;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
      border: 3px solid;
      background-color: #FFF;
      transform: skewX(-155deg);
      margin-right: 18px;
   }
    #navbarNav a {
        font-size:1.05rem;
    
    }
}

@media (max-width: 1280px) {

   .dataBox {
      /*height: 245px;*/
      margin-top: 30px;
   }
   #msg-tab .nav-link img, #leftBox-tab .nav-link img {
      width: 68px;
      top: -18px;
      left: -26px;
   }
   #msg-tab .nav-link, #leftBox-tab .nav-link {
      position: relative;
      display: block;
      font-size: 1.2rem;
      padding: 0.3rem 0.7rem 0.3rem 2rem;
      color: #5A5959;
      text-decoration: none;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
      border: 3px solid;
      background-color: #FFF;
      transform: skewX(-155deg);
      margin-right: 23px;
   }

   .topLinks .slink::after {
      margin-right: 5px;
      margin-left: 5px;
   }
   #navbarNav .nav-item img{
      max-width: 140px;
   }
}

@media (max-width: 1024px) {

   .cus-my{
      margin-top: 65px;
      margin-bottom: 20px;
   }

   /*.section.-fifth .row{
      flex-direction: column;
      --bs-gutter-x: 5.5rem;
   }*/
   
   .dataItem {
      min-width: 153px;
      padding: 20px 0px 0px 0px;
   }
   .dataBox {
      /*height: 200px;*/
      margin-top: 15px;
   }
   .progressbar{
      text-align: center;
   }
   /*.section.-fifth .section-title .text div{
      color: #000!important;
   }*/
   #msg-tab .nav-link, #leftBox-tab .nav-link {
      position: relative;
      display: block;
      font-size: 1rem;
      padding: 0.3rem 0.4rem 0.3rem 1.7rem;
      color: #5A5959;
      text-decoration: none;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
      border: 3px solid;
      background-color: #FFF;
      transform: skewX(-155deg);
      margin-right: 21px;
   }
   #msg-tab .nav-link img, #leftBox-tab .nav-link img {
     width: 58px;
     top: -14px;
     left: -25px;
  }  

   #navbarNav a{
      font-size: 1rem;
   }


}

/* tablets */
@media (max-width: 992px) {
   #navbarNav a{
      padding: .5rem 1rem;
      line-height: 1.5;
      border-bottom: 0;
   }
   #navbarNav a:hover{
      border-bottom: 0;
   }
   #navbarNav .nav-item:last-child a:hover{
      border-bottom: 0;
   }
   /*.carousel-inner{
      max-height: 400px;
   }
   .carousel-inner .carousel-item {
      height: 500px;
      object-fit: cover;
   }*/
   .carousel-control-next-icon, .carousel-control-prev-icon {
      width: 2rem;
      height: 4rem;
   }
   .section.-first{
      background-image: unset;
      background-color: #F3FAFF;
      padding: 0;
   }
   .mapBox {
      bottom: 0;
   }
   footer{
      background: unset;
      background-color: #2DA7A4;
   }
   .dropdown-menu[data-bs-popper]{
      margin-top: 0.125rem;
   }
   .itemTitle {
      left: 26%;
   }
   .dataBox {
      /*height: 245px;*/
      margin-top: 30px;
   }
   .Cta-btn a {
      width: 60px;
   }
   .section.-fifth{
      background-image: unset;
      background-color: #7FBDDF;
   }
   .footer-above .f-link {
      text-align: center;
   }
   #modal-tab::before{
      content: "";
   }
   #modal-tab::after{
      content: "";
   }
   #modal-tab .nav-link {
      margin-top: 35px;
      margin-right: 35px;
      margin-left: 35px;
   }
   .footer-above .f-title::after{
      margin-left: 43%;
   }

   .section.-fifth .section-title .text div{
      color: #FFF!important;
   }
   .section.-fifth .row {
      flex-direction: row;
      --bs-gutter-x: 1.5rem;
   }
}

@media (max-width: 768px) {
   .dataBox {
      height: auto;
      margin-top: 25px;
   }
   .dataItem {
      padding: 20px 0px 0px 0px;
   }
   .progressbar{
      text-align: center;
   }
   .itemTitle {
      left: 30%;
   }
   #msg-tab .nav-link, #leftBox-tab .nav-link {
      position: relative;
      display: block;
      font-size: 1.2rem;
      padding: 0.3rem 1rem 0.3rem 3.2rem;
      color: #5A5959;
      text-decoration: none;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
      border: 3px solid;
      background-color: #FFF;
      transform: skewX(-155deg);
      margin-right: 24px;
   }
   #msg-tab .nav-link img, #leftBox-tab .nav-link img {
      position: absolute;
      width: 76px;
      top: -22px;
      left: -23px;
   }

   #navbarNav a{
      font-size: 1.1rem;
   }

   #navbarNav .nav-item img{
      max-width: 165px;
   }
      
}


/* phones */
@media (max-width: 576px) {
   .navbar-brand img{
      width: 75%;
   }
   /*.carousel-inner{
      max-height: 220px;
   }
   .carousel-inner .carousel-item {
      height: 300px;
      object-fit: cover;
   }*/

   .cus-my {
      margin-top: 100px;
      margin-bottom: 20px;
   }
   .carousel-control-next-icon, .carousel-control-prev-icon {
      width: 1rem;
      height: 3rem;
   }
   .carousel-control-next, .carousel-control-prev {
      bottom: -40%;
   }
   .section-title{
      height: 80px;
      background-position: bottom;
   }
   .section-title .text{
      font-size: 1.8rem;
   }
   .cities{
      font-size: 1rem;
   }
   footer{
      background: unset;
      background-color: #2DA7A4;
   }
   .footer div{
      max-width: 85%;
   }
   .dataBox {
      height: auto;
      margin-top: 0;
   }
   .dataItem {
      padding: 20px 0px 0px 0px;
   }
   .progressbar{
      text-align: center;
   }
   .itemTitle {
      left: 37%;
   }
   .section.-fifth{
      background-image: unset;
      background-color: #7FBDDF;
   }
   .footer-above .f-title {
      font-size: 1.1rem;
      font-weight: 700;
   }
   #modal-tab .nav-link {
      margin-top: 30px;
      margin-right: 15px;
      margin-left: 15px;
   }
   #video-owl {
      margin-top: 0px;
   }
   #msg-tab .nav-link, #leftBox-tab .nav-link {
      font-size: 1rem;
      padding: 0.3rem 0.5rem 0.3rem 1.75rem;
      margin-right: 15px;
      transform: skewX(-165deg);
   }
   #msg-tab .nav-link img, #leftBox-tab .nav-link img{
      width: 55px;
      top: -13px;
      left: -20px
   }
   #msg-tab .nav-link span, #msg-tab .nav-link img,
   #leftBox-tab .nav-link span, #leftBox-tab .nav-link img{
      transform: skewX(165deg);
   }
   .Cta-btn a{
      width: 70px;
   }
   #navbarNav .topLinks.-inpnmode a{      
      font-size: 1rem;
   }
}


/*===========================*/
/*===== index - RWD  END=====*/
/*===========================*/


/*vnstyle*/
.title {
 font-weight: bold;
}

.bread {
 background-image: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/bread-bg.png');
 color: #FFF;
 background-size: cover;
 margin-top: 8em;
 padding: 50px 0 110px;
 margin-bottom: 20px;
}

.breadcrumb li, .breadcrumb li a, .breadcrumb-item.active, .breadcrumb-item+.breadcrumb-item::before {
 color: #FFF;
}


/*map-index修改*/
.allclass, .citybox {
 position: absolute;
 z-index: 1;
}

.allclass {
 left: 11%;
 top: 0;
 font-size: 1.5rem;
 color: #1A1311;
}

.allclass::after {
 position: absolute;
 content: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/text-bg.png');
 width: 214px;
 height: 46px;
 left: 0;
 bottom: 0%;
 z-index: -1;
}

.allclass span {
 color: #3DBBBC;
 font-size: 5.5rem;
 font-weight: 900;
 -webkit-text-stroke: 2px #fff;
 text-shadow: 7px 4px 0px #747474;
 font-style: italic;
 margin-right: 10px;
}

.citybox .citycontain {
 background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/bg01.png);
 width: 358px;
 height: 121px;
 position: relative;
 color: #000;
 background-size: cover;
}

.citybox .citycontain ul {
 list-style: none;
 padding-left: 32%;
 padding-top: 25px;
 line-height: 20px;
 font-size: 0.9rem;
}

.citybox .citycount {
 background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/bg02.png);
 color: #FFF;
 position: absolute;
 width: 134px;
 height: 36px;
 z-index: 1;
 left: 9%;
 top: 15%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding-left: 40px;
 font-size: 1.5rem;
 font-weight: bolder;
 top: -17px;
}

.citybox .citytitle {
 background-image: url(https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/bg03.png);
 color: #FFF;
 position: absolute;
 width: 114px;
 height: 114px;
 z-index: 3;
 display: flex;
 justify-content: center;
 align-items: center;
 background-size: contain;
 padding-right: 10px;
 font-size: 1.2rem;
 font-weight: bold;
 top: -34px;
}

.city01 {
 bottom: 8%;
 left: 10%;
}

.city02 {
 left: 13%;
 top: 46%;
}

.city03 {
 left: 25%;
 top: 24%;
}

.city04 {
 left: 50%;
 top: 16%;
}

.city05 {
 right: 0%;
 top: 40%;
}

.city06 {
 bottom: 10%;
 right: 2%;
}

.mapBox {
 bottom: 0;
}

.section.-first {
  padding-bottom: 0;
  margin-bottom: 100px;
}

.phone {
 display: none;
}

.modal-header {
 background-color: #197FC2;
}

.linkbox {
 list-style: none;
 display: flex;
 justify-content: center;
}

.linkbox li a {
 color: #0153B1;
}

.linkbox li::after {
 content: "|";
 color: #A8A8A8;
 position: relative;
 margin-left: 6px;
 margin-right: 6px;
}

.linkbox li:nth-last-child(1)::after {
 content: none;
}

.btn-success {
 background-color: #329F38;
}

.card {
 border: none;
 box-shadow: 0 0 15px rgb(0 0 0 / 10%);
 margin-bottom: 20px;
 padding: 16px;
}

.content-box {
 padding-bottom: 50px;
}

.btn-blue {
 background-color: #00405C;
 color: #FFF;
}

.btn-blue:hover {
 color: #FFF;
 background-color: #002d40;
}

.border-radius-12 {
 border-radius: 12px;
}

.peoplecard {
 margin-bottom: 50px;
}

.peoplecard .blue-tag {
 border-radius: 10px;
 border: 1px solid #00A5E3;
 background-color: #FFF;
 color: #373737;
 padding: 8px 16px;
 max-width: 80%;
 position: absolute;
 top: -16px;
 transform: translate(-50%);
 left: 50%;
 font-size: 1.2rem;
}


.peoplecard .blue-tag span.more {
 background-color: #007AB8;
 position: absolute;
 border-radius: 30px;
 padding: 6px 16px;
 color: #FFF;
 top: -25px;
 right: -25px;
 cursor: pointer;
}

.peoplecard .title {
 color: #007AB8;
 font-size: 1.6rem;
 margin-top: 30px;
 margin-bottom: 20px;
 text-align: justify;
 line-height: 1.8rem;
 height: 87px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 box-sizing:border-box;
}

.green-tag, .blue-tag, .brown-tag {
 list-style: none;
 display: flex;
 padding: 0;
 margin-right: 8px;
 position: relative;
}

.green-tag li, .blue-tag li, .brown-tag li {
 border-radius: 30px;
 padding: 3px 16px;
 margin-right: 10px;
 position: relative;
 font-size: 1.2rem;
}

.green-tag li {
 color: #329D37;
 border: 1px solid #329D37;
 background-color: #FFF;
}

.blue-tag li {
 border: 1px solid #00A5E3;
 background-color: #FFF;
 color: #007AB8;
}

.brown-tag li {
 border: 1px solid #9D5332;
 background-color: #FFF;
 color: #9D5332;
}


.peoplecard .green-tag li {
 border-radius: 30px;
 color: #329D37;
 border: 1px solid #329D37;
 padding: 3px 16px;
 margin-right: 10px;
 position: relative;
}

.peoplecard .green-tag li .more {
 border-radius: 30px;
 background-color: #329D37;
 top: -17px;
 font-size: 0.8rem;
 right: -15px;
 position: absolute;
 color: #FFF;
 padding: 3px 16px;
 cursor: pointer;
}

.bureaucard{
   border: 1px solid #D4D4D4;
   padding: 0;
   border-radius: 8px;
}


.bureaucard .title {
 color: #007AB8;
 font-size: 1.6rem;
 padding-bottom: 5px;
 text-align: justify;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;
 box-sizing:border-box;
}

.bureaucard .info{
   padding-top: 10px;
}

.bureaucard .btnTitle {
   font-size: 1.6rem;
   font-weight: 700;
}

.bureaucard .leftPart .tagBox{
   margin-left: 10px;
}

.bureaucard .leftPart .tagBox .tag{
   display: inline-block;
}

.bureaucard .tagBox .greenbg-tag {
   font-size: 1rem;
   font-weight: 500;
   border-radius: 30px;
   color: #329F38;
   background-color: rgba(50, 159, 56, 0.1);
   border: 1px solid #329F38;
   padding: 3px 16px;
   margin-right: 4px;
}

.bureaucard .tagBox .bluebg-tag {
   font-size: 1rem;
   font-weight: 500;
   border-radius: 30px;
   color: #00A5E3;
   background-color: rgba(0, 165, 227, 0.08);
   border: 1px solid #00A5E3;
   padding: 3px 16px;
   margin-right: 4px;
}

.bureaucard .tagBox .orangebg-tag {
   font-size: 1rem;
   font-weight: 500;
   border-radius: 30px;
   color: #AD7005;
   background-color: #FFF5E5;
   border: 1px solid #AD7005;
   padding: 3px 16px;
   margin-right: 4px;
}

.bureaucard .leftPart{   
   transition: 0.7s;
   background-color: #FFF;
}

.bureaucard:hover .leftPart {
   background-color: #EAF6FA;
}

.list-box {
 list-style: none;
 padding: 0;
 border-bottom: 1px solid #DCDCDC;
 padding-bottom: 16px;
 margin-bottom: 16px;
}

.list-box li {
 color: #545454;
 font-size: 1.2rem;
}

.list-box li i {
 color: #C9C9C9;
}

.graybox {
 background-color: #F0F0F0;
 padding: 8px 16px;
 border-radius: 13px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 10px;
}

.graybox.no-recruit {
 justify-content: flex-start;
 height: 49px;
}

.graybox .titlebox {
 color: #00398A;
 font-size: 1.2rem;
 display: flex;
 align-items: center;
}

.graybox .peoplebox {
 list-style: none;
 display: flex;
 margin-bottom: 0;
 color: #828282;
}

.graybox .peoplebox li::after {
 content: "|";
 color: #CECECE;
 margin: 0 10px;
}

.graybox .peoplebox li:nth-last-child(1)::after {
 content: none;
}

.graybox .peoplebox .big-size {
 font-size: 1.4rem;
 font-weight: 900;
 width: 40px;
 display: inline-block;
 text-align: right;
}

.btn {
 font-size: 1.1rem;
}

.text-blue {
 color: #00398A;
}

.btn-secondary {
 background-color: #4A5464;
}

.page-link {
 border-color: #DEE2E6;
 color: #153656;
}


.page-item.active .page-link {
 background-color: #191210;
 color: #FFF;
 border-color: #191210;
}

.page-item.disabled .page-link {
 color: #CFCFCF;
}

.page-link:hover {
 color: #153656;
}

.big-title {
 color: #007AB8;
 font-size: 1.5rem;
 font-weight: bold;
 margin-bottom: 20px;
}

.s-title {
 color: #4D4D4D;
 font-weight: bold;
}

.warning {
 color: #E10505;
 font-size: 2rem;
 font-weight: bolder;
}

.btn-outline-info {
 border-color: #0099d1;
 color: #383838;
}

.btn-outline-info i {
 color: #0099d1;
}

.btn-outline-info:hover {
 background-color: #0099d1;
 color: #FFF;
}

.btn-outline-info:hover i {
 color: #FFF;
}

.table-list {
 border-top: 3px solid #7BB8E0;
 color: #545454;
}

.table-list th {
 background-color: #F2F2F2;
 color: #292929;
 text-align: center;
 vertical-align: middle;
 width: 300px;
}

.w-icon {
 width: 20px;
}

.peoplecard .green-tag li {
 padding: 3px 8px;
}

.fc-teal {
 color: #00A170;
}

.add-freind {
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 margin-top: 50px;
}

.add-freind::after {
 content: "";
 width: 100%;
 height: 3px;
 background-color: #00405C;
 position: absolute;
}

.add-freind .btn {
 z-index: 1;
}

.text-info {
 color: #0099d1 !important;
}

.btn-outline-info.text-info, .btn-outline-danger, .btn-outline-success {
 background-color: #FFF;
}

.btn-outline-info.text-info:hover {
 color: #FFF !important;
 background-color: #006c93;
}

.table-striped.style01 {
 vertical-align: middle;
 background-color: #FFF;
}

.table-striped.style02 {
 vertical-align: middle;
}

.table-striped.style01 thead {
 background-color: #7BB8E0;
 color: #292929;
}

.table-striped.style01>tbody>tr:nth-of-type(odd)>* {
 --bs-table-accent-bg: #FFF;
}

.table-striped.style02>tbody>tr:nth-of-type(odd)>* {
 --bs-table-accent-bg: #FFF;
 border-color: #F8F8F8;
}

.table-striped.style01>tbody>tr:nth-of-type(even)>* {
 background-color: #E7F1F9;
}

.table-striped.style02>tbody>tr:nth-of-type(even)>* {
 background-color: #F8F8F8;
 border-color: #F8F8F8;
}

.table-striped.style02 td .form-check .form-check-input {
 float: none;
}

.table.table-striped.style02 tbody {
 border-color: #476ADC;
}

.nav-pills.style01 .nav-item .nav-link {
 position: relative;
 border-radius: 15px;
 box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2);
 width: 85%;
 background-color: #FFF;
 font-size: 1.2rem;
 padding-top: 15px;
 padding-bottom: 15px;
 color: #4A4A4A;
 border: 1.5px solid #7BB8E0;
}

.nav-pills.style01 .nav-item .nav-link.active::after {
 content: "";
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 19px 11px 0 11px;
 border-color: #50bb4b transparent transparent transparent;
 position: absolute;
 bottom: -19px;
 left: 50%;
 transform: translateX(-50%);
}

.nav-pills.style01 .nav-item .nav-link::before {
 content: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon01.png');
 width: 70px;
 height: 70px;
 position: absolute;
 left: -40px;
 top: -25%;
}

.nav-pills.style01 .nav-item:nth-child(1) .nav-link, .nav-pills.style01 .nav-item:nth-child(1) .nav-link.active {
 background-color: #52BA4D;
 border-color: #52BA4D;
 color: #FFF;
}

.nav-pills.style01 .nav-item:nth-child(2) .nav-link::before {
 content: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon02.png');
}

.nav-pills.style01 .nav-item:nth-child(2) .nav-link.active {
 background-color: #FFF;
 border-color: #ED5D3B;
 color: #ED5D3B;
}

.nav-pills.style01 .nav-item:nth-child(2) .nav-link.active::after {
 border-color: #EE623E transparent transparent transparent;
}

.nav-pills.style01 .nav-item:nth-child(3) .nav-link::before {
 content: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon03.png');
}

.nav-pills.style01 .nav-item:nth-child(3) .nav-link.active {
 background-color: #FFF;
 border-color: #EEA93E;
 color: #EEA93E;
}

.nav-pills.style01 .nav-item:nth-child(3) .nav-link.active::after {
 border-color: #EEA93E transparent transparent transparent;
}

.nav-pills.style01 .nav-item:nth-child(4) .nav-link::before {
 content: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon04.png');
}

.nav-pills.style01 .nav-item:nth-child(4) .nav-link.active {
 background-color: #FFF;
 border-color: #003889;
 color: #003889;
}

.nav-pills.style01 .nav-item:nth-child(4) .nav-link.active::after {
 border-color: #003889 transparent transparent transparent;
}

.nav-pills.style01 .nav-item:nth-child(5) .nav-link::before {
 content: url('https://webarchive.lib.ntu.edu.tw:443/archive/wayback/20250701074447/https://newcv101.gov.taipei/areas/frontend/assets/img/icon05.png');
}

.nav-pills.style01 .nav-item:nth-child(5) .nav-link, .nav-pills.style01 .nav-item:nth-child(5) .nav-link.active {
 background-color: #575656;
 border-color: #575656;
 color: #FFF;
}

.nav-pills.style01 .nav-item:nth-child(5) .nav-link.active::after {
 border-color: #575656 transparent transparent transparent;
}

.calendar-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 30px;
 flex-wrap: wrap;
}

.calendar-header .calendar-title {
 font-size: 1.5rem;
 color: #1E1E1E;
}

.calendar-tag {
 list-style: none;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 margin: 0;
 padding: 0;
}

.calendar-tag li {
 display: flex;
 align-items: center;
 color: #51BB4B;
 margin-right: 10px;
}

.calendar-tag li:nth-child(2) {
 color: #007DBA;
}
.calendar-tag .tag-green,
.calendar-tag .tag-blue,
.tips-tag.tag-green, .tips-tag.tag-blue {
 width: 30px;
 height: 30px;
 color: #FFF;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: 50%;
 margin-right: 3px;
}

.calendar-tag .tag-green,
.tips-tag.tag-green {
 background-color: #51BB4B;
}

.calendar-tag .tag-blue,
.tips-tag.tag-blue {
 background-color: #007DBA;
}

.calendar-box td {
 position: relative;
 height: 150px;
 max-width: 50px;
}

.calendar-date {
 color: #303030;
 position: absolute;
 right: 5px;
 bottom: 5px;
}

.table-bordered {
 border: 1px solid #dfdfdf;
}

td.null {
 background-color: #F3F3F4;
 color: #A1A0A1;
}

.calendar-box thead {
 background-color: #E5E6E8;
 color: #272526;
 height: 100px;
 text-align: center;
 vertical-align: middle;
 border:8px solid #FFF;
}

.tips-tag.tag-green, .tips-tag.tag-blue {
 /*position: absolute;*/
 left: 5px;
 bottom: 5px;
 font-size: 1.4rem;
 width: 40px;
 height: 40px;
 cursor: pointer;
}

.fc-mainblue, .fc-mainblue a {
 color: #197FC2;
}

.blue-border {
 border: 1px solid #279DEC;
 border-radius: 15px;
 padding: 10px;
 list-style: none;
}

.book-line {
 list-style: none;
 position: relative;
}

.book-line::before {
 content: "";
 width: 1px;
 height: 100%;
 background-color: #D4D4D4;
 position: absolute;
 left: 23px;
}

.book-line li {
 padding-left: 30px;
 position: relative;
 margin-bottom: 20px;
}

.blue-border li {
 padding-left: 20px;
 position: relative;
}

.blue-border li span, .book-line li span {
 display: inline-block;
}

.blue-border li .time-tag {
 color: #F1633F;
 border-radius: 30px;
 border: 1px solid #F1633F;
 padding: 2px 12px;
 margin-left: 10px;
 margin-bottom: 5px;
}

.blue-border li::before, .book-line li::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background-color: #279DEC;
 position: absolute;
 left: 8px;
 top: 12px;
}

.calendar-title01 {
 background-color: #E8E8E8;
 color: #333333;
 text-align: center;
 border-radius: 24px;
 padding: 8px;
 margin-bottom: 20px;
}

.am, .pm, .fm {
 background-color: #BD3900;
 color: #FFF;
 border-radius: 7px;
 padding: 3px 5px;
 margin-bottom: 5px;
 margin-left: 8px;
 margin-right: 8px;
}

.pm {
 background-color: #52007A;
}

.fm {
 background-color: #007E3B;
}

.linkstyle {
 color: #0065CB;
}

.address-flex {
 display: flex;
}

.address-flex > * {
 margin-right: 15px;
}

.address-flex > *:nth-last-child(1) {
 margin-right: 0;
}

.address-flex #address01, .address-flex .form-select {
 width: 130px;
}

.course {
 color: #707070;
 margin-top: 30px;
 line-height: 30px;
}

.nav-pills.style02 .nav-item .nav-link {
 background-color: rgba(254,193,4,0.13);
 border: 1.5px solid #FEC104;
 color: #171717;
}

.nav-pills.style02 .nav-item .nav-link.active {
 background-color: rgba(254,193,4,1);
 color: #171717;
}

.btn-box {
 list-style: none;
 display: flex;
 justify-content: flex-end;
 align-items: center;
}

.btn-box li {
 position: relative;
 padding-right: 20px;
}

.btn-box li a {
 color: #FFF;
}

.btn-box li span {
 display: none;
}

.btn-box li:hover span {
 display: inline-block;
}

.btn-box li:hover::after {
 content: "";
 height: 61%;
 position: absolute;
 width: 90%;
 z-index: -1;
 right: 0;
 top: 50%;
 transform: translateY(-50%);
 border-radius: 30px;
}

.btn-box li:nth-child(1)::after {
 background-color: #3487BD;
}

.btn-box li:nth-child(2)::after {
 background-color: #51BB4B;
}

.btn-box li:nth-child(3)::after {
 background-color: #EA5C3A;
}

.page-pn {
 display: flex;
 align-items: center;
 white-space: nowrap;
 padding-left: 1rem;
}

.btn-outline-secondary.disabled {
 border-color: #6E6D6D;
 color: #6E6D6D;
 background-color: #E6E6E6;
}

.btn-group .btn-secondary {
 background-color: #5A5858;
}

.btn-group .btn-secondary.active {
 background-color: #000000;
}

.calendar-item-list {
 border: 1px solid #000;
 color: #030303;
 display: flex;
 justify-content:space-between;
 padding: 5px;
 border-radius: 5px;
 margin-bottom: 3px;
 flex-wrap: wrap;
}

.calendar-item-list .d-flex div {
 display: flex;
 margin-right: 10px;
}

.calendar-item-list .d-flex div:nth-last-child(1) {
 margin: 0;
}

.calendar-item-list .d-flex span {
 background-color: #FFBEAD;
 border-radius: 50%;
 width: 23px;
 height: 23px;
 display: flex;
 justify-content: center;
 align-items: center;
 margin-right: 5px;
}

.calendar-item-list.amstyle {
 border-color: #F3947C;
}

.calendar-item-list.fmstyle {
 border-color: #73C8E7;
}

.calendar-item-list.fmstyle .d-flex span {
 background-color: #A3E5FF;
}

.calendar-item-list.pmstyle {
 border-color: #89D29C;
}

.calendar-item-list.pmstyle .d-flex span {
 background-color: #86E9A1;
}

p {
 color: #545454;
 line-height: 30px;
 font-size: 1.1rem;
 letter-spacing: 1px;
}

.big-title {
    font-size: 2.5rem;
    font-weight: bold;
}

/*=====RWD=====*/

@media(max-width:1400px) {
   .peoplecard .green-tag li {
      font-size: 0.95rem;
   }
   .graybox .titlebox {
     font-size: 1rem;
   }
   .graybox .peoplebox {
     padding-left: 0;
   }
   .graybox .peoplebox .big-size {
     font-size: 1.2rem;
   }
   .graybox .peoplebox li::after {
     margin: 0;
   }
   .calendar-box td {
     min-width: 180px;
   }

}

@media(max-width:1300px) {
   .allclass {
     left: 0;
   }

   .city01 {
     left: 0;
     bottom: 5%;
   }

   .city02 {
     left: 5%;
   }

   .city03 {
     left: 15%;
   }

   .city04 {
     left: 40%;
     top: 12%;
   }

   .city05 {
     right: 0%;
   }

   .city06 {
     right: 0%;
   }

   .nav-pills.style01 .nav-item .nav-link {
     padding-right: 0;
     padding-left: 1.5rem;
   }


}


@media(max-width:1200px) {
   .citybox .citycontain {
     width: 300px;
     height: 121px;
   }
   .citybox .citycontain ul {
     padding-left: 35%;
     font-size: 0.8rem;
   }
   .citybox .citycontain ul li:nth-child(4) {
     display: none;
   }
   .allclass {
      top: -6%;
   }
   .peoplecard .green-tag li {
      font-size: 1.3rem;
   }
   .bureaucard .leftPart .title .tag{
      display: inline-flex;
   }   

}

@media(max-width:1168px) {
   .city01, .city06 {
     bottom: -3%;
   }
   .city05 {
     top: 45%;
   }
   .city04 {
     left: 45%;
   }
   .city02 {
     left: 3%;
   }
   .allclass {
     top: -13%;
   }
   .bread {
     padding-top:30px;
   }
}

@media(max-width:1000px) {
   .citybox, .pc {
     display: none;
   }
   .phone {
     display: block;
   }

   .phone .allclass {
     position: relative;
     font-size: 1rem;
   }
   .allclass span {
     font-size: 3rem;
     -webkit-text-stroke: 1px #fff;
   }
   .phone .citybox {
     display: block;
     position: relative;
   }

   .phone .citycount02 {
     color: #FFF;
     position: absolute;
     z-index: 4;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 30px;
     height: 30px;
     left: 70px;
     top: 10px;
   }

   .phone .citycount02::after {
     content: "";
     width: 30px;
     height: 30px;
     background-color: #203A47;
     border-radius: 3px;
     position: absolute;
     z-index: -1;
     right: 0;
     transform: rotate(-45deg);
   }

   .phone .citybox .citytitle {
     position: relative;
     top: 0;
   }


}

@media (max-width:996px) {
   .calendar-box td {
     height: 100px;
   }
   .nav-pills.style01 .nav-item {
     width: 50%;
     margin-bottom: 15px;
     display: flex;
     justify-content: center;
   }
   .graybox {
     flex-wrap: wrap;
   }
}

@media (max-width:991px) {
 .peoplecard .green-tag li {
     font-size: 0.9rem;
     margin-right: 5px;
   }
}

@media (max-width:768px) {
 .calendar-header .calendar-tag {
     margin-top: 20px;
   }
   .green-tag {
     justify-content: center;
   }
   .peoplecard .green-tag li {
     font-size: 1.2rem;
   }
   .bread {
     padding-top: 15px;
   }
   .bureaucard .leftPart .tagBox {
      margin-left: 0px;
   }
}

@media (max-width:466px) {
 .calendar-tag {
  margin-top: 20px;
}
}

@media (max-width:445px) {
 .nav-pills.style01 .nav-item {
  width: 100%;
}
}

@media (max-width:420px) {
 .peoplecard .green-tag li {
  font-size: 1rem;
}
}

@media (max-width:373px) {
 .peoplecard .green-tag li {
  font-size: 0.75rem;
}
}


/*11/3*/

/*首頁訊息...*/
.leftBox .list-group-item div.d-flex {
  width: calc(100% - 30px);
}

.leftBox .list-group-item .title {
 width: 100%;
}

.graybox {
 min-height: 49px;
}

.w-100px {
 max-width: 100px;
}

.calendar-item-list:hover {
 color: #000;
 transition: .3s;
}

.calendar-item-list.amstyle:hover {
 background-color: #F3947C;
}

.calendar-item-list:hover .d-flex span {
 background-color: #FFF;
}

.calendar-item-list.fmstyle:hover {
  background-color: #73C8E7;
}

.calendar-item-list.pmstyle:hover {
  background-color: #89D29C;
}

@media (max-width: 1400px) {
 .graybox.no-recruit .peoplebox {
   padding-left: 20px;
}
}

@media (max-width:996px) {
 .graybox.no-recruit {
   flex-flow: column;
   height: 73px;
   justify-content: space-between;
   align-items: baseline;
}
}

@media (max-width:768px) {
 .graybox.no-recruit {
  flex-flow: nowrap;
  height:49px;
  align-items: center;
  justify-content: flex-start;
}
}

/*1218vnadd*/
/*tableRWD寬度*/
@media(max-width:1024px) {
 .table-list th {
  width: 150px;
}
}

.table-list .table.style03 th {
   background-color: #FFF;
   width: auto;
}

.table.style03>:not(:first-child) {
  border-top-color: #476ADC;
}

.table-list .table.style03 tbody tr:nth-child(even) {
 background-color: #F8F8F8;
}

.icon-title {
 display: flex;
 align-items: center;
 position: relative;
 margin-bottom: 20px;
}

.icon-title .title {
 position: relative;
 color: #007AB8;
 font-size: 1.3rem;
 padding-left: 10px;
}

.icon-title::before {
 content: "";
 position: absolute;
 width: 3px;
 height: 15px;
 background-color: #C2EBFF;
 left: 12%;
}

.icon-title::after {
 content: "";
 position: absolute;
 width: 88%;
 height: 3px;
 background-color: #C2EBFF;
 right: 0;
}

.linksbox {
 padding: 0;
 list-style: none;
}

.linksbox li {
 margin-bottom: 10px;
}

.linksbox a {
 font-size: 1.1rem;
}

.linksbox a i {
 color: #00A5E3;
}


/*1106 modify*/
.list-group-item .title.-right{
   max-width: 580px;
}

@media (max-width: 1440px) {
 .list-group-item .title.-right{
   max-width: 520px;
}
}

@media (max-width: 1366px) {
 .list-group-item .title.-right{
   max-width: 580px;
}
}

@media (max-width: 1200px) {
 .list-group-item .title.-right{
   max-width: 520px;
}
}

@media (max-width:996px) {
 .list-group-item .title.-right{
   max-width: 420px;
}
}

@media (max-width:768px) {
 .list-group-item .title.-right{
   max-width: 660px;
}
}

@media (max-width:425px) {
 .list-group-item .title.-right{
   max-width: 360px;
}
}

@media (max-width:375px) {
 .list-group-item .title.-right{
   max-width: 300px;
}
}

/*網頁導覽*/
.accesskeyBlock{
   background-color: #F3FAFF;
   border: 1px solid #279DEC;
   padding: 15px 30px;
}

.accesskeyBlock div{
  margin-bottom: 8px;
}

.ackeyTitle{
   background-color: #007AB8;
   font-size: 1.5rem;
   font-weight: bolder;
   padding: 8px 12px;
}

.ackeyItem{
   margin-bottom: 8px;
   margin-top: 8px;
   font-size: 1.2rem;
}

/*申請成為運用單位_申請頁*/

#accordionApply .accordion-item{
   margin-bottom: 30px;
}

#accordionApply .accordion-button{
   color: #FFF;
   font-weight: bold;
   font-size: 1.3rem;
   background-color: #1484C8;
   border: 1px solid #49B6FF;
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

#accordionApply .accordion-button:not(.collapsed) {
   color: #FFF;   
   background-color: #1484C8;
   border: 1px solid #49B6FF;
   box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

#accordionApply .accordion-button::after {    
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#accordionApply .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}
/*0118*/
@media (max-width:768px) {
    .address-flex {
        flex-flow: wrap;
    }

        .address-flex input.w-100px {
            width: 100%;
            margin-bottom: 8px;
            max-width: none;
        }

        .address-flex .form-select {
            width: calc(50% - 15px);
            margin-bottom: 8px;
        }

        .address-flex > *:nth-last-child(1) {
            margin-right: 15px;
        }
}

/*0207*/
.card-title .-place {
    min-height:48px;
}
@media (max-width:1440px) {

    #tab-owl .card-quota {
    padding: 4px 4px;
    
    }

}

/*240418*/
#relatedweb-tab .nav-link {
    padding: .5rem 2rem;
    color: #525252;
    background-color: #FBF3DA;
    border: 1px solid #FEC104;
    margin-right: 10px;
    font-weight: bold;
}

    #relatedweb-tab .nav-link.active, #relatedweb-tab .show > .nav-link {
        color: #231F16;
        background-color: #FEC104;
    }

.linkBox {
    list-style: none;
    padding-left: 1rem;
}

    .linkBox li {
        border-bottom: 1px solid #C3C3C3;
        padding: 12px 0px;
    }

        .linkBox li:last-child {
            border-bottom: 0;
        }

@media (max-width:768px) {

    #relatedweb-tab .nav-link {
        padding: .5rem 1rem;
    }

    .resourceTable {
        min-width: 800px;
    }
}

@media (max-width:425px) {

    #relatedweb-tab .nav-link {
        padding: .5rem 0.8rem;
        margin-right: 5px;
        margin-top: 5px;
    }
}

/*240422*/
.highlightCard .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 15px;
}

.highlightCard {
    padding: 0;
}

    .highlightCard:hover {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

    .highlightCard .card-img-top {
        width: 100%;
        height: 16vw;
        object-fit: cover;
        border-radius: calc(.25rem - 1px);
    }

    .highlightCard a.stretched-link:focus {
        border: 3px solid orange;
    }


@media (max-width: 1440px) {
    .highlightCard .card-img-top {
        height: 20vw;
    }
}

@media (max-width: 576px) {
    .highlightCard .card-img-top {
        height: 50vw;
    }
}

/*燈箱*/
.inner-highlightCard .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 15px;
}

.inner-highlightCard {
    padding: 0;
}

    .inner-highlightCard:hover {
        box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    }

    .inner-highlightCard a:focus {
        border: 2px solid orange;
    }

    .inner-highlightCard .card-img-top {
        width: 100%;
        height: 16vw;
        object-fit: cover;
        border-radius: calc(.25rem - 1px);
    }

@media (max-width: 1440px) {
    .inner-highlightCard .card-img-top {
        height: 20vw;
    }
}

@media (max-width: 576px) {
    .inner-highlightCard .card-img-top {
        height: 50vw;
    }
}

.inner-highlightCard .item {
    cursor: pointer;
}

.inner-highlightCard .card-body {
    padding: 1rem 1rem 2rem 1rem;
    min-height: 110px;
}

.photo-ctr {
    color: blue;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    bottom: 3px;
    cursor: pointer;
}

.photo-content {
    height: 65px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease-out;
}

.toggled {
    overflow: hidden;
    height: auto;
    transition: all 0.5s ease-in;
}

/*活動影音*/
.videoCard .card-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 15px;
}

.videoCard {
    padding: 0;
}

    .videoCard .card-body {
        padding: 1rem 1rem 2rem 1rem;
        position: relative;
    }

.video-content {
    font-size: 1.1rem;
    color: #545454;
    line-height: 30px;
    height: 90px;
    overflow: hidden;
    transition: all 0.5s ease-out;
}

.video-ctr {
    color: blue;
    font-weight: bold;
    position: absolute;
    right: 4%;
    text-align: center;
    bottom: 5px;
    cursor: pointer;
}

.video-content {
    font-size: 1.1rem;
    color: #545454;
    line-height: 30px;
    height: 90px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s ease-out;
}

.toggled {
    overflow: hidden;
    height: auto;
    transition: all 0.5s ease-in;
}

@media (max-width: 768px) {
    .big-title {
        font-size: 1.8rem;
    }
}







/*
     FILE ARCHIVED ON 7:44:47 七月 1, 2025 AND RETRIEVED FROM THE
     AN OPENWAYBACK INSTANCE ON 15:30:14 五月 24, 2026.
     JAVASCRIPT APPENDED BY OPENWAYBACK, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/