.banner {
  position: relative;
  width: 100%;
  height: 100vh;
}

.banner > .title {
  width: 46%;
  max-width: 690px;
  position: absolute;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: banner_title 1.5s ease 1.8s forwards;
}

.banner > .title > img {
  width: 100%;
  object-fit: contain;
}

@keyframes banner_title {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1320px) {
  .banner > .title {
    width: 45%;
    min-width: 320px;
    position: absolute;
    top: 50%;
    left: 32%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: banner_title 1.8s ease 2.2s forwards;
  }
}

@media screen and (orientation: portrait) and (max-width: 900px) {
  .banner > .title {
    width: 72%;
    min-width: unset;
    max-width: unset;
    top: 25%;
    left: 50%;
  }
}

@media screen and (orientation: portrait) and (max-width: 576px) {
  .banner > .title {
    width: 90%;
    top: 25%;
    left: 50%;
  }
}

section {
  padding: 3rem 0;
}

/* about 活動介紹 */
#about {
  background: white;
  position: relative;
}

section#about::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background: linear-gradient(to top, #ffffff, #ffffff00);
}

section#about::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background: linear-gradient(to bottom, #ffffff, #ffffff00);
}

#about .title > h2 {
  background: var(--gradient);
  -webkit-background-clip: text; /* 讓背景被文字裁切 */
  -webkit-text-fill-color: transparent; /* 文字填色透明 */
}

#about .title > h4 {
  color: var(--gray_2);
}

/* Topic 發表主題 */
#topic .title > h4,
#topic .title > h2 {
  color: white;
}

#topic .content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 5%;
  align-items: stretch;
}

.t_item {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 30%;
  padding: 1.2rem 1rem;
}

.t_icon {
  width: 75px;
  height: 75px;
  margin: 0 auto 0.6rem;
}

.t_icon > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.t_item > h4 {
  color: var(--gray_1);
  margin: 0;
  text-align: center;
}

.t_item ul {
  margin: 1.2rem auto 0;
  width: max-content;
  max-width: 100%;
}

.t_item li {
  color: var(--gray_1);
  margin: 0.5rem 0;
  line-height: 1.5;
}

ul > li::before {
  top: calc(var(--p_size) * 1.5 / 2);
}

@media screen and (max-width: 1200px) {
  #topic .content {
    gap: 2rem 3.5%;
  }

  .t_item {
    width: 31%;
    padding: 1rem 1rem;
  }
}

@media screen and (max-width: 900px) {
  #topic .content {
    gap: 1.5rem 3%;
  }

  .t_item {
    width: 47%;
    padding: 1rem 1.2rem;
  }

  .t_icon {
    width: 60px;
    height: 60px;
  }
}

@media screen and (max-width: 576px) {
  #topic .content {
    gap: 1rem;
  }

  .t_item {
    width: 100%;
    padding: 1.2rem 2rem;
  }

  .t_icon {
    width: 60px;
    height: 60px;
  }
}

/* agenda 活動議程 */
#agenda .title > h4,
#agenda .title > h2 {
  color: white;
}

.date_list {
  display: flex;
  align-items: stretch;
  margin: 2rem 0;
}

.date_list > a {
  width: calc(100% / 7);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid white;
  padding: 0 0.5rem;
  text-align: center;
}

.date_list > a:first-child {
  border-left: 1px solid white;
}

.date_list > a:hover > span {
  background: var(--blue);
  color: white;
}

.date_list > a > span {
  font-size: var(--note_size);
  color: var(--gray_2);
  background: white;
  border-radius: 25px;
  padding: var(--label_padding);
  transition: 0.3s;
}

.date_list > a > p {
  color: white;
  margin: 0.5rem 0;
  font-weight: 400;
}

.date_list > a.active {
  pointer-events: none;
}

.date_list > a.active > span {
  background: var(--gradient);
  color: white;
}

.date_list > a.active > p {
  font-weight: 600;
}

.agenda_list {
  width: 100%;
  margin: 1rem 0 2rem;
}

.agenda_item {
  display: flex;
  align-items: stretch;
  gap: var(--item_spacing);
}

.agenda_detail {
  width: 55%;
  position: relative;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.agenda_detail > p {
  color: var(--blue);
  margin: 0;
}

.agenda_detail > h3 {
  margin: 0.5rem 0;
  color: var(--gray_1);
}

.agenda_schedule {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: var(--item_spacing);
}

.sch_item {
  display: flex;
  align-items: center;
  background: var(--white_bg);
  backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
}

.sch_item > p {
  margin: 0;
}

.sch_item > .time {
  width: 7.5rem;
  color: var(--gray_2);
  flex-shrink: 0;
}

.sch_item > .sch_detail {
  width: 100%;
  color: var(--gray_1);
  /* font-weight: 600; */
}

@media screen and (max-width: 1200px) {
  .date_list {
    flex-wrap: wrap;
    gap: 1.2rem 0;
  }

  .date_list > a {
    width: calc(100% / 5);
  }

  .date_list > a:nth-child(6) {
    border-left: 1px solid white;
  }

  .date_list > a > p {
    margin: 0.5rem 0 0;
  }

  .agenda_detail {
    width: 45%;
    padding: 1.5rem;
  }

  .agenda_schedule {
    width: 55%;
  }

  .sch_item {
    padding: 0.75rem 1.5rem;
  }

  /* .sch_item > .time {
    width: 30%;
  } */
}

@media screen and (max-width: 768px) {
  .date_list {
    flex-wrap: wrap;
    gap: 1.2rem 0;
  }

  .date_list > a {
    width: calc(100% / 4);
  }

  .date_list > a:nth-child(5) {
    border-left: 1px solid white;
  }

  .date_list > a:nth-child(6) {
    border-left: 0;
  }

  .agenda_list {
    width: 100%;
    margin: 1rem 0 2rem;
  }

  .agenda_item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--item_spacing) * 1.5);
  }

  .agenda_detail {
    width: 100%;
    position: relative;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .agenda_schedule {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--item_spacing);
  }

  .sch_item {
    display: flex;
    align-items: center;
    background: var(--white_bg);
    border-radius: var(--border-radius);
    padding: 0.75rem 1.5rem;
  }

  .sch_item > p {
    margin: 0;
  }

  .sch_item > .time {
    /* width: 25%; */
    color: var(--gray_2);
    flex-shrink: 0;
  }

  .sch_item > .sch_detail {
    width: 100%;
    color: var(--gray_1);
    font-weight: 600;
  }
}

@media screen and (max-width: 586px) {
  .date_list {
    flex-wrap: wrap;
    gap: 1.2rem 0;
  }

  .date_list > a {
    width: calc(100% / 3);
  }

  .date_list > a:nth-child(4),
  .date_list > a:nth-child(7) {
    border-left: 1px solid white;
  }

  .date_list > a:nth-child(5) {
    border-left: 0;
  }

  .agenda_detail {
    padding: 1rem;
  }

  .sch_item {
    padding: 0.75rem 1rem;
  }

  .sch_item > .time {
    width: 7rem;
  }
}

/* 注意事項 */
#notes {
  background: white;
  position: relative;
}

section#notes::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background: linear-gradient(to top, #ffffff, #ffffff00);
}

section#notes::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3.5rem;
  background: linear-gradient(to bottom, #ffffff, #ffffff00);
}

#notes .title > h2 {
  background: var(--gradient);
  -webkit-background-clip: text; /* 讓背景被文字裁切 */
  -webkit-text-fill-color: transparent; /* 文字填色透明 */
}

#notes .title > h4 {
  color: var(--gray_2);
}

/* 未開放 */
.unpublished {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: hsla(0, 0%, 0%, 0.1);
  animation: unpublished_bg 1.5s linear 2.5s forwards;
}

.info_box {
  position: absolute;
  width: 80%;
  max-width: 540px;
  padding: 2rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--white_bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  opacity: 0;
  animation: banner_title 1.5s linear 2.8s forwards;
}

.info_box > h2 {
  width: max-content;
  max-width: 100%;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
  background: var(--gradient);
  -webkit-background-clip: text; /* 讓背景被文字裁切 */
  -webkit-text-fill-color: transparent; /* 文字填色透明 */
}

.info_box > p {
  letter-spacing: 1px;
  color: var(--gray_1);
}

.info_box > p > span {
  color: var(--blue);
  font-weight: 600;
}

.info_box > a {
  width: max-content;
  background: white;
  color: var(--blue);
  font-weight: 600;
  font-size: var(--note_size);
  letter-spacing: 1px;
  padding: var(--btn_padding);
  border-radius: 25px;
  display: block;
  margin: 4rem auto 0;
  transition: 0.3s;
}

.info_box > a:hover {
  background: var(--gradient);
  color: white;
}

@keyframes unpublished_bg {
  0% {
    backdrop-filter: blur(0);
  }

  100% {
    backdrop-filter: blur(6px);
  }
}

@media screen and (max-width: 768px) {
  .info_box {
    width: 90%;
    padding: 2rem;
  }

  .info_box > a {
    margin: 2rem auto 0;
  }
}

/* 關注公眾號 */
#wechat .title > h4,
#wechat .title > h2 {
  color: white;
}

#wechat .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  position: relative;
  padding: 2rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.qrcode {
  width: 180px;
  flex-shrink: 0;
}

.qrcode > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#wechat .info {
  width: calc(100% - 2rem - 180px);
}

@media screen and (max-width: 768px) {
  #wechat .content {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .qrcode {
    width: 150px;
  }

  #wechat .info {
    width: 100%;
    text-align: center;
  }
}