.nav{
  position: fixed;
  z-index: 999;
  margin: none;
  height: 12%;
  width: 100%;
  color: black;
  background-color: #fce6ff89;
  border: 2px solid #bfc6ff;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #76fdff;
}
.a-link{
  margin: 0 8%;
}
.ram{
  margin: 0 5%;
}
.a-link a{
  text-decoration: none;
  font-family: 微軟正黑體;
  font-size: 20px;
  font-weight: bolder;
  color: #cefdff;
  border: 2px solid transparent;
  margin: 0 12px;
  padding: 0 0 5px;
  transition: .4s;
}
.a-link a:hover{
    color: #24e5ff;
    border-bottom-color: #cefdff;
}
.a-link .dropdown,
.a-link .droplink {
  position: relative;
  display: inline-block;
}
.droplink .dropdown-content {
  padding: 0;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  border: 2px solid #76fdff;
  background: #d6dbff69;
  /* box-shadow: 2px 2px 10px #d1d9ff; */
  z-index: 100;
  /* border-radius: 20%; */
}
.droplink .dropdown-content li {
  list-style: none;
}
.droplink .dropdown-content li a {
  display: block;
  text-decoration: none;
}
.droplink:hover .dropdown-content,
.droplink:focus-within .dropdown-content {
  display: block;
}
.droplink .dropdown-content li a:hover {
  border: 2px solid transparent;
}
.box1 .logo1{
  width: 800px;
  height: auto;
  opacity: 0;         
  transform: translateY(-100px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.box1 .logo1.animate {
    animation: jumpUp 1s ease forwards;
} 
@keyframes jumpUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 
.btn-a{
  color: #ff8045;
  font-family: 微軟正黑體;
}
.btn{
  background-color: #bfc0ff4b;
  width: 150px;
  height: 48px;
  border-radius: 30em;
  font-size: 24px;
  font-weight: 600;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 10px #c5c5c5,0 0 10px #ffffff;
}
.btn::before {
  content: '';
  width: 0;
  height: 48px;
  border-radius: 30em;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #5145D9 0%, #F8B0FC 100%);
  transition: .5s ease;
  z-index: -1;
}
.btn:hover::before {
  width: 9em;
}
.btn:hover {
  animation: gradientMove 2s linear infinite;
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
/* 導覽列 */

.box2 .text{
  width: 1250px;
}
.box3 .title{
  margin-bottom: 3%;
}
.box3 .text{
  width: 1100px;
  height: 400px;
  margin-right: 5%;
}
.box3 .tit{
  margin-bottom: 5%;
}
.box3 .pic1{
  width: 100px;
  height: auto;
}
.box3{
  animation: run 6 initial;
}

@keyframes run{
  0%{background-image: url(../images/run1.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  20%{
    background-image: url(../images/run2.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  40%{
    background-image: url(../images/run3.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  60%{
    background-image: url(../images/run4.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  80%{
    background-image: url(../images/run1.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
  100%{
    background-image: url(../images/run2.png);
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* 故事介紹 */

.box-4 .text{
  padding-top: 20px;
}
.tabs, .tabs1 {
  width: 250px;
  height: 100px;
  margin: 5% 0;
  opacity: initial;
}
.tab {
  width: 250px;
  height: 100px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s, color 0.3s;
}
.tab.active {
  width: 100%;
  background-color: #6d3ef996;
  color: #000000;
}
.tab-contents{
  width: 100%;
  height: 650px;
}
.tab-content {
  display: flex;
  justify-content: center;
  background-color: #42424279;
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 1000px;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.tab-content.active {
  display: flex;
  opacity: 1;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 起承轉合 */

.box4 .text{
  width: 100%;
  height: 5%;
  margin-bottom: -3%;
}
.box4 .pic{
  padding-bottom: -100px;  
}
.box4 .logo{
  border: 2px solid #ffffffc2;
  border-radius: 20px;
  width: 800px;
  height: 400px;
  overflow: hidden;
  background-color: #0a001982;
  transition: .4s;
}
.box4 .logo:hover{
  transform: scale(.9);
  box-shadow: 0 0 30px #bfc6ff;
}
.box4 .logo2{
  width: 700px;
  height: auto;
  transition: .3s;
}
.mt{
  margin-top: 200px;
}
.logo-flyin{
  opacity: 0;
  transform: translateX(1000px);
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}
.logo-flyin.active{
  opacity: 1;
  transform: translateX(0);
}
/* logo設計 */

.box5 h2{
  margin-bottom: 30px;
}
.box5 .text1{
  margin-right: 10%;
}
.box5 .pic{
  margin-top: 20px;
  width: 650px;
  height: auto;
  border: none;
  border-radius: 20px;
  transition: .5s;
}
.box5 .pic:hover{
  transform: scale(1.1);
  border: 20px solid #cefaff;
  box-shadow: 0 0 20px #c7f4ff;
}
/* 甘特圖 */

.box7 .title1{
  margin-top: -10%;
  padding-bottom: 3%;
}
.member-pic {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px solid transparent;
  border-radius: 50%;
  transition:.2s;
  object-fit: cover;
}

/* hover 時切換動畫 */
.member-pic:hover {
  border-width: 3px;
  border-style: solid;
  border-radius: 50%;
  animation: memberBorderShift 2s linear infinite;
  /* 先給個起始值，避免第一次 hover 未顯示 */
  border-image: linear-gradient(90deg, #ffc0cb, #ffff99) 1;
}

@keyframes memberBorderShift {
  0% {
    border-image-source: linear-gradient(90deg, #ffc0cb, #ffff99); /* 粉黃 */
  }
  50% {
    border-image-source: linear-gradient(90deg, #87cefa, #dda0dd); /* 藍紫 */
  }
  100% {
    border-image-source: linear-gradient(90deg, #ffc0cb, #ffff99); /* 回粉黃 */
  }
}
.member-text {
  opacity: 0;
  transform: translateY(300px);
  transition: all 0.8s ease-out;
}

.member-text.show {
  opacity: 1;
  transform: translateY(0);
}
.stim1, .stim2, .stim3, .stim4, .stim5{
  width: 250px;
  height: auto;
  border-radius: 50%;
}
.stim1:hover, .stim2:hover, .stim3:hover, .stim4:hover, .stim5:hover{
  border-radius: 0;
}
.box7 img{
  transition: .4s;
}
.box7 img:hover{
  transform: scale(1.1);
}
.stu2 img:hover{
  transform: scale(1.1);
}
.stu4 img:hover{
  transform: scale(1.1);
}
.stu1, .stu2, .stu3, .stu4, .stu5{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 250px;
  margin-right: 30px;
}
.box7 .text{
  margin-top: 15%;
  text-align: center;
}
.box7 h3{
  font-size: 42px;
  color: rgb(152, 243, 255);
}
/* 成員介紹 */

.text-light{
  margin-top: 50px;
}
.cat1{
    padding-top: -200px;
}
.fade-image {
    transition: opacity 1s ease, transform 0.3s ease;
    cursor: pointer;
    width: 700px;
    height: auto;
  }
.fade-image:hover {
  transform: scale(1.1);
}
  
.second-image {
  width: 400px;
  height: auto;
}
.text{
    font-size: 20px;
}
.rpic1 img{
  width: 70%;
  height: auto;
}
.text-light .p1 .pic2{
  width: 500px;
  height: auto;
  cursor: cell;
  transition: .3s;
}
.text-light .p1 ,.pic2:hover{
  transform: scale(1.2);
}
/* 角色介紹頁專用 */

.scene{
  width: 100%;
  height: 100vh;
}
.scene .title1{
  padding-top: 10%;
  padding-bottom: 50px;
}
.sce2, .sce3, .sce4, .sce5, .sce6{
padding-left:3%;
}

.scene img{
  width: 500px;
  height: auto;
}
.storyboard{
  padding-bottom: 10%;
  width: 100%;
  height: 100vh;
}
.storyboard .stb{
  padding: 3%;
}
.storyboard .stb img{
  width: 70%;
  height: auto;
}
/* 分鏡圖 */

.end{
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: #bfc6ff;
}
.end p{
  font-size: 30px;
  font-family: 微軟正黑體;
  font-weight: bold;
  color: #000;
}

.p1 .pic1{
  width: 800px;
  height: auto;
  transition: .3s;
}
.p1 .pic1:hover{
  transform: scale(1.1);
}
/* 918新加 */
.scene {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel {
  position: relative;
  width: 85%;
  overflow: hidden;
  margin-top: 20px;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.btnt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}

.btnt.left { left: 20px; }
.btnt.right { right: 20px; }