/* ------------- 篩選頁籤 ------------- */
.navtabs {position:relative; margin:50px auto;}
.bigtitle {display:block; width:100%; max-width:1100px; margin:auto;} 

.navbar {position:absolute; width:100%; top:50%; transform:translateY(-50%); background:#e4df00; padding:15px 0px;}
.project_nav {display:flex; width:90%; max-width:1100px; margin:auto; flex-wrap:nowrap; justify-content:space-between; align-items:center;}

.project_nav li {padding:5px 20px; font-size:18px; font-family:'Red Hat Display'; position:relative; color:black; white-space:nowrap; overflow:hidden; /*--c: white !important;
  background: 
  linear-gradient(90deg,black 50%,var(--c) 0) calc(100% - var(--_p,0%))/200% 100%,
  linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) 100% no-repeat;
-webkit-background-clip: text,padding-box;
        background-clip: text,padding-box;
transition: 0.5s;*/}
.project_nav li::before {display:block; content:''; width:100%; height:100%; background:white; position:absolute; top:0; left:-100%; z-index:-1;}
.project_nav li:hover::before {left:0; transition: 0.5s;}
.project_nav li span {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
/* .project_nav li:hover {--_p: 100%} */
.project_nav li.active::after {display:block; content:''; width:100%; height:100%; background:rgba(255,255,255,0.5); position:absolute; top:0; left:0; z-index:-2;}

.project_nav li p.hde {opacity:0;}



/* .projectIndex .project_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 20px;
}

.projectIndex .project_nav li {
  width: 10.5%;
  text-align: center;
  border: 1px solid #ddd;
  padding: 20px 0;
  pointer-events: cursor;
}

.projectIndex .project_nav li.active {
  color: #fff;
  background: #000;
}

.projectIndex .project_nav li:hover {
  color: #000;
  background: #ddd;
} */


/* 輪播改 Grid 佈局 */
.projectIndex .project_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 一列三欄 */
  gap: 40px 20px;
  padding: 50px 0 20px 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.projectIndex .project_list li {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 防爆框 */
  box-sizing: border-box;
  width: 100%;
}

.projectIndex .project_list li a {
  display: block;
  width: 100%;
  text-decoration: none;
}

.projectIndex .project_list li a:hover {
  opacity: 0.8;
}

.projectIndex .project_list .project_item {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.projectIndex .project_list .project_item .img {
  position: relative;
  background: whitesmoke;
  width: 100%;
  box-sizing: border-box;
}

.projectIndex .project_list .project_item .img .imgcon {
  position: relative;
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.projectIndex .project_list .project_item .img::after {
  display: block;
  /* content: ''; */
  background: #e4df00;
  width: 150px;
  height: 150px;
  position: absolute;
  left: -10px;
  bottom: -10px;
  z-index: -1;
}

.projectIndex .project_list .project_item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  box-sizing: border-box;
}

.projectIndex .project_list .project_item .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 20px;
}

.projectIndex .project_list .project_item .hashtag {
  color: #e4df00;
}


@media screen and (max-width: 1100px) {
  .project_nav { overflow-x: scroll; }
  .project_nav li { overflow: visible; }
  .project_nav li::before { display: none; }
  .projectIndex .project_list { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 768px) {
  .projectIndex .project_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .navtabs { margin: 30px auto 60px auto; }
  .navbar { top: 50px; transform: translateY(0px); overflow-x: scroll; }
  .projectIndex .project_list { grid-template-columns: 1fr; }
}

/* ------------- 箭頭＆計數 ------------- */
/* .countSlide {display:flex; justify-content:center; align-items:center; margin-bottom:50px;}
.countSlide span {font-size:26px; font-family:'Noto Sans TC', 'PingFangTC-Regular', '微軟正黑體', sans-serif; color:#ccc;}
.countSlide span.current {color:#e4df00;}

.project_list .slick-arrow {position:absolute; background:#e4df00; width:40px; height:40px; background-size:26px; background-position:center; background-repeat:no-repeat; color:transparent; border:0px; z-index:10;}
.project_list .slick-prev {bottom:-42px; left:50%; transform:translateX(-85px); background-image:url(../images/arrow_rev.png);}
.project_list .slick-next {bottom:-42px; right:50%; transform:translateX(85px);background-image:url(../images/arrow.png);} */