@charset "UTF-8";

/**
 * homepage
 * 首頁
 */

@layer components {
  .main {
    background:
      url('../../img/layout/bg_lights.png'),
      url('../../img/layout/bg_fish.png'),
      url('../../img/layout/bg_bottom.png'),
      linear-gradient(to bottom, #afe3f6 50%, #0598db 100%);
    background-position:
      top 10% center,
      top 70% center,
      bottom max(4%, 4.5rem) center;
    background-repeat: no-repeat, repeat-y, no-repeat;
    background-size:
      100% auto,
      auto 100%,
      100% auto;
  }
  @media (max-width: 990px) {
    .main {
      background-position:
        top 10% center,
        top 70% center,
        bottom center;
    }
  }
}

/* 主區域-進入圖台 */
@layer components {
  .main-go-to-map {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    padding-top: 2.5rem;
    padding-bottom: 4.5rem;
    background-image: url('../../img/Homepage/go-to-map.png');
    background-size: cover;
    background-position: right bottom;
    aspect-ratio: 1510 / 275;
  }
  @media (max-width: 990px) {
    .main-go-to-map {
      aspect-ratio: auto;
      min-height: 240px;
      padding-top: 1.5rem;
      padding-bottom: 2rem;
      background-image: url('../../img/Homepage/go-to-map-sm.png');
    }
  }
  .go-to-map-container {
    width: 100%;
  }
  .go-to-map__title-main {
    align-items: flex-start;
    flex-direction: column;
  }
  .go-to-map__title-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
  }
  .go-to-map__footer {
    margin-top: 1rem;
  }

  @media (max-width: 990px) {
    .go-to-map__footer {
      justify-content: center !important;
    }
  }
  .go-to-map__btn {
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.95rem;
    letter-spacing: 0.125rem;
    padding-inline: 1rem;
    cursor: pointer;
    border: 2px #ccc solid;
    border-radius: 0.5rem;
  }
  .go-to-map__btn:hover {
    color: #fff;
    filter: brightness(0.9);
  }
  .go-to-map__btn:active {
    color: #fff;
    filter: brightness(0.8);
    border-color: var(--focus-border-color);
    outline: var(--focus-outline);
    box-shadow: var(--focus-box-shadow);
  }
}

/* 主區域-中間 */
@layer components {
  .main-center {
    --row-gap: 1.5rem;
    --column-gap: 0;
    display: grid;
    grid-template-columns: 1fr 589px;
    /* grid-template-rows: auto auto 1fr; */
    grid-template-areas:
      "project  project"
      "info     taiwan"
      "event    event";
    row-gap: var(--row-gap);
    column-gap: var(--column-gap);
  }

  @media (max-width: 1650px) {
    .main-center {
      display: block;
    }
  }
  .part__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
  }
  .part__title {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
    line-height: 1.4;
  }
  @media (max-width: 990px) {
    .part__title {
      width: 100%;
      text-align: center;
    }
  }
  .part__title-main {
    font-size: 1.75rem;
    color: var(--color-primary);
    font-weight: bold;
    letter-spacing: 0.125rem;
    text-shadow: 0.125rem 0.125rem 0 #fff;
  }
  .part__title-content {
    color: #666;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    letter-spacing: 0.1rem;
    line-height: 1.2;
  }
  .part__more-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-weight: bold;
    margin-left: auto;
    background-color: #fff;
    border: 1px transparent solid;
    border-radius: 5rem;
    padding: 0.375rem 1.25rem;
    display: flex !important;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    color: var(--color-primary) !important;
  }
}

/* 主區域-專案區域 */
@layer components {
  .main-project-area {
    grid-area: project;
    padding-top: var(--outside-padding);
    padding-left: var(--outside-padding);
    padding-right: var(--outside-padding);
  }
  @media (max-width: 1650px) {
    .main-project-area {
      padding-bottom: var(--outside-padding);
    }
  }
  .project-area-container {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
  }
  .project-area__link-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px transparent solid;
    border-radius: 5rem;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
    font-size: 0.85rem;
    font-weight: bold;
    background-color: #fff;
    color: var(--color-primary) !important;
  }
}

/* 主區域-資訊分享 */
@layer components {
  .main-information {
    grid-area: info;
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .part-information__header {
    flex-wrap: nowrap;
  }
  .part-information__title {
    flex-grow: 1;
    flex-shrink: 1;
  }
  @media (max-width: 990px) {
    .part-information__header {
      flex-direction: column;
      align-items: stretch;
    }
    .part-information__title {
      width: 100%;
      text-align: center;
    }
  }

  .information-container {
    background-color: #fdf0da;
    position: relative;
  }

  .information-container-main {
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
    z-index: 2;
    position: relative;
    padding-left: var(--outside-padding);
    padding-right: var(--outside-padding);
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
  }

  .information-wave {
    width: 100%;
    height: 7rem;
  }
  .information-wave-1 {
    width: 100%;
    transform: rotate(180deg) translateY(-60%);
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1;
  }
  .information-wave-2 {
    width: 100%;
    transform: translateY(-60%);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
  }
  .information__list {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    padding-inline: 1rem !important;
    overflow-y: visible !important;
    border-bottom: 1px #ddd solid;
    padding-bottom: 0.75rem !important;
  }
  @media (max-width: 990px) {
    .information__list {
      width: 100%;
      gap: 0.25rem;
      padding-inline: 0 !important;
    }
  }
  .information__list-tab-btn {
    position: relative;
    background-color: #fff;
    border: 1px transparent solid;
    border-radius: 5rem;
    padding: 0.375rem 1.25rem;
    display: flex !important;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
    font-size: 0.9rem !important;
  }
  @media (max-width: 990px) {
    .information__list-tab-btn {
      padding: 0.375rem 0.55rem;
    }
  }
  .information__list-tab-btn:hover,
  .information__list-tab-btn:focus {
    background-color: #f9f9f9;
  }
  .information__list-tab-btn:focus {
    box-shadow:
      0 0 0.375rem rgba(0, 0, 0, 0.2),
      var(--focus-box-shadow);
  }
  .information__list-tab-btn:active {
    background-color: #eee;
  }
  .information__list-tab-btn--selected,
  .information__list-tab-btn--selected:hover,
  .information__list-tab-btn--selected:focus,
  .information__list-tab-btn--selected:active {
    background-color: var(--color-primary);
    color: #fff;
  }
  .information__content:not(.information__content--show) {
    display: none;
  }
  .information__list-tab-btn--selected::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0.5rem 0.5rem 0.5rem; /* 上 右 下 左 */
    border-color: transparent transparent var(--color-primary) transparent;
    position: absolute;
    top: 100%;
    margin-top: 0.375rem;
  }
  .system-announcement__list {
    width: 100%;
    min-width: 0;
    overflow-y: visible !important;
    display: grid;
    grid-auto-flow: row;
    gap: 0.125rem;
  }
  .system-announcement__list-item {
    width: 100%;
    max-width: 100%; /* 強制限制最大寬度 */
    min-width: 0; /* 防止被內層 Flex 項目撐開 */
  }
  .system-announcement__list-link {
    width: 100%;
    padding: 0.25rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    color: #444 !important;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    background-color: transparent;
    text-align: left;
    border: 1px transparent solid;
    line-height: inherit;
  }
  .system-announcement__list-link:hover,
  .system-announcement__list-link:focus {
    color: var(--color-primary) !important;
    background-color: rgba(255, 255, 255, 0.8);
  }
  .system-announcement__list-link-dot {
    flex-grow: 0;
    flex-shrink: 0;
    color: var(--color-primary);
    margin-right: 0.5rem;
  }
  .system-announcement__list-link-date {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .system-announcement__list-link-content {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @media (max-width: 990px) {
    .system-announcement__list-link {
      display: grid;
      grid-template-columns: auto 1fr;
    }
    .system-announcement__list-link-dot {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
      height: 100%;
    }
    .system-announcement__list-link-date {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }
    .system-announcement__list-link-content {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: initial;
      text-overflow: initial;
    }
  }
  .system-announcement__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 0.5rem;
  }
  @media (max-width: 990px) {
    .system-announcement__footer {
      margin-top: 1.25rem;
      margin-bottom: 0.5rem;
    }
  }
  .information__content .links__list-link {
    aspect-ratio: initial;
    padding-block: 1.5rem;
  }
}

/* 主區域-活動賽事 */
@layer components {
  .main-event {
    grid-area: event;
    padding-left: var(--outside-padding);
    padding-right: var(--outside-padding);
  }
  @media (max-width: 1650px) {
    .main-event {
      padding-top: var(--outside-padding);
    }
  }
  .event-container {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
    padding: 1.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
  }

  .event__list {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .event__list-item {
    max-width: 420px;
    margin: 0 auto;
  }
  .event__list-item-none {
    display: none;
  }
  @media (max-width: 990px) {
    .event__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }
  }
}

/* 主區域-關於GoOcean */
@layer components {
  .main-goocean {
    padding-left: 1rem;
  }
  .goocean-container {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto 1fr;
    gap: 0.5rem;
  }
}

/* 主區域-全台 */
@layer components {
  .main-taiwan {
    /* grid-column: 2 / 3;
    grid-row: 1 / 4; */
    grid-area: taiwan;
    padding: var(--outside-padding) var(--outside-padding) 0 0;
    text-align: center;
  }
  @media (max-width: 1650px) {
    .main-taiwan {
      padding-left: var(--outside-padding);
    }
    .taiwan-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 2rem;
    }
  }
  .taiwan__header {
    justify-content: center;
    max-width: 589px;
  }
  .taiwan-content {
    margin-top: 1.25rem;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
    border-radius: 4rem;
  }
  @media (max-width: 800px) {
    .taiwan-content {
      width: 100%;
    }
  }
  .taiwan__activity-list {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 3rem 3rem 0 0;
    background-color: #fff;
    overflow: hidden;
  }
  .taiwan__activity-list-item {
    flex: 1;
    border: 0.375rem #fff solid;
    border-left-width: 0;
  }
  .taiwan__activity-list-item--first {
    border-top-left-radius: 3rem;
    border-left-width: 0.375rem;
  }
  .taiwan__activity-list-item--last {
    border-top-right-radius: 3rem;
  }
  .taiwan__activity-tab-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
    background-color: rgba(0, 0, 0, 0.02);
    border: 1px transparent solid;
    font-size: 0.9rem;
    line-height: 1;
    padding: 1rem 0.25rem 0.75rem;
  }
  .taiwan__activity-list-item--first .taiwan__activity-tab-btn {
    border-top-left-radius: 3rem;
  }
  .taiwan__activity-list-item--last .taiwan__activity-tab-btn {
    border-top-right-radius: 3rem;
  }
  .taiwan__activity-tab-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .taiwan__activity-tab-btn:active {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .taiwan__activity-tab-btn--selected,
  .taiwan__activity-tab-btn--selected:hover,
  .taiwan__activity-tab-btn--selected:active {
    background-color: var(--color-primary) !important;
    color: #fff;
  }
  .taiwan__activity-tab-btn-img,
  .taiwan__activity-tab-btn-img-selected {
    display: block;
    width: 3rem;
  }
  @media (max-width: 990px) {
    .taiwan__activity-tab-btn-img,
    .taiwan__activity-tab-btn-img-selected {
      width: 2rem;
    }
  }
  .taiwan__activity-tab-btn:not(.taiwan__activity-tab-btn--selected)
    .taiwan__activity-tab-btn-img-selected,
  .taiwan__activity-tab-btn--selected
    .taiwan__activity-tab-btn-img:not(.taiwan__activity-tab-btn-img-selected) {
    display: none;
  }
  .taiwan__activity-tab-btn-text {
  }
  .taiwan__contents {
    width: 589px;
    height: 538px;
    /* height: 589px; */
    background-color: #fff;
    overflow: hidden;
    border: 0.375rem #fff solid;
    border-top-width: 0;
    border-radius: 0 0 3rem 3rem;
  }
  @media (max-width: 700px) {
    .taiwan__contents {
      width: 100%;
      height: auto;
      aspect-ratio: 589 / 538;
    }
  }
  .taiwan__content {
    border-radius: 0 0 3rem 3rem;
    width: 100%;
    height: 100%;
  }
  .taiwan-img-container__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    border-radius: 0 0 3rem 3rem;
  }
  .taiwan__content:not(.taiwan__content--show) {
    display: none;
  }
  .taiwan__video {
    padding: 0.375rem;
    margin-top: 2rem;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 1rem;
    box-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.2);
  }
  @media (max-width: 1650px) {
    .taiwan__video {
      width: min(100%, 589px);
    }
  }
}