@charset "UTF-8";
/* ===== 主畫面 ===== */
.hero {
  width: 100%;
  min-height: 100vh;   /* 滿版首屏 */
  background-image: url("../images/hero.jpg");
  background-size: cover;
  background-position: center;
  margin: 0;
}
.hero-wrap{
  padding: 10rem 3rem;
}
.hero-text{
  display: flex;
  flex-direction: column;
}
.wh9-logo img{
  width: 10rem;
}
.meta{
  margin-top: 2rem;
}
.diagonal-line {
  width: 60px;          /* 線長 */
  height: 1px;          /* 線粗 */
  background: rgba(0,0,0,.35);
  transform: rotate(-45deg);
  transform-origin: left center;
  margin-top: 4rem;
  margin-bottom: 1rem;
}
.phone-wrap{
  margin: auto 3rem;
}

/* ===== 第二頁-建築外觀 ===== */

.section-2 {
  padding: 6rem 0 0;
}

.section-2-wrap {
  display: grid;
  grid-template-rows: auto auto;
  gap: 3rem;
}
.concept-media{
  width: 100%;
  display: grid;
  overflow: hidden;
}
.concept-media img {
  width: 50%;
  justify-self: end;
}
.concept-text h3{
  margin-top: 1rem;
}

/* 第三、四頁（圖片 + 文字） */
.section-block{
  margin-top: 6rem;
}

.section-block-wrap{
  display: grid;
  grid-template-rows: auto auto;
  gap: 2rem;
}
.section-block-media{
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.section-block-media img{
  width: 100%;
  height: 100%;
  transform-origin: center;
  object-fit: cover;
}
.section-block-text h3{
  margin-top: 1rem;
}
/* ===== 第五頁-環區圖 ===== */
.section-5 {
  margin: 3rem 0 4rem;
}

/* ===== 第六頁-捷運藍線-延伸線 ===== */
.mrt-blue{
  margin: 3rem 1rem 0;
}
.mrt-blue img{
  width: 100%;
}

/* ===== 第七頁-成大智慧醫療 ===== */
.hospital-3Dimg{
  margin-top: 2.5rem;
  width: 100%;
  height: 13rem;
  background-color: #cbc6b7;
  display: flex;
}
.hospital-3Dimg img{
  width: 75%;
  margin: auto auto;
}

/* ===== 文字與箭頭 ===== */
.cta{
  margin-top: 1rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 24px 0 40px;   /* 一定要留下面空間 */
  color: #6f6f6f;
  text-decoration: none;
}
.cta-big-text{
  font-size: 0.85rem;
}

.cta-circle{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #9a8774;
  color: #fff;
  font-size: 1.5rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 呼吸動畫 */
  animation: breathe 3s ease-in-out infinite;

}

/* 點擊瞬間給一點實體感 */
.cta:active .cta-circle{
  transform: scale(.96);
}

/* 呼吸動畫（非常淡） */
@keyframes breathe{
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.03);
    filter: brightness(1.08);
  }
}

/* ------------------------------------------------- */

/* 平板專用樣式 */
  @media (min-width: 768px) and (max-width: 1023px){
   .phone-wrap{/* 畫面留白區域 */
    margin: 3rem 6.5rem;
  }
  .ipad-wrap{
    margin: 0rem 3rem;
  }
  
  .hero-wrap{
   padding-top: 15rem;
   padding-left: 8rem;
  }
  .wh9-logo img{
    width: 16rem;
  }
  .meta{
    margin-top: 3rem;
  }
  .meta h1{
    font-size: 2.3rem;
    line-height: 1.4;
  }
  .diagonal-line {
    width: 70px;          /* 線長 */
    margin-top: 4.5rem;
    margin-bottom: 1.5rem;
  }
  .quote{
    font-size: 1rem;
  }

  /* ipad 第三、四頁（圖片 + 文字） */
  .section-block{
    margin-top: 8rem;
  } 
  /* ipad第六頁-捷運藍線-延伸線 */
  .mrt-blue{
    margin: 3rem 1rem 0;
    display: flex;
    justify-content: center;
  }
  .mrt-blue img{
    width: 80%;
  }

  /* ipad第七頁-成大智慧醫療 */
  .hospital-3Dimg{
    height: 27rem;
  }
  .hospital-3Dimg img{
    width: 75%;
  }

  /* ipad文字與箭頭 */
  .cta{
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding: 0;
  }
  .cta-circle{
  width: 100px;
  height: 100px;
  font-size: 1.5em;
  }
  .cta-big-text{
  font-size: 1.5rem;
  }

 }

  /* ------------------------------------------------- */

  /* 桌機小螢幕（含 iPad 橫向）優化樣式 */
  @media (min-width: 1024px) and (max-width: 1279px) {
    .phone-wrap{
     margin: 0;
    }
    .row-wrap{
     margin: 4rem 7rem;
     transition: width 0.35s ease;
    }
    .br-none{
      display: none;
    }
     /* 桌機小螢幕-第一頁 */
    .hero {
      background-image: url("../images/hero-2.jpg");
    }
    .hero-wrap{
     padding: 12rem 0 0 8rem;
    }

    .wh9-logo img{
      width: 13rem;
    }
    .meta{
      margin-top: 3rem;
    }
    /* 桌機小螢幕-第二頁-建築外觀 */
    .section-2 {
      padding: 4rem 0;
    }
    .section-2-wrap {
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas: "text media";
      margin: auto 4rem;
    }
    .concept-media{
      grid-area: media;
      width: 100%;
      display: grid;
      overflow: hidden;
    }
    .concept-media img {
      width: 70%;
      display: block;
      justify-self:end;
    }
    .concept-text{
      grid-area: text;
      margin: auto auto;
      text-align: justify;
      
    }


    /* 桌機小螢幕-第三頁-裝潢屋 */
    .section-block{
      margin-top: 6rem;
    }

    .section-block-wrap{
      grid-template-columns: 1.2fr 0.8fr;
      grid-template-areas: "media text";
      gap: 3rem;
    }
    .section-block-wrap.reverse{
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas: "text media";
    }

    .section-block-media{
      width: 100%;
      height: auto;
      grid-area: media;
    }
    .section-block-text{
      margin: auto 2rem;
      grid-area: text;
      text-align: justify;
    }
    .section-block-media-reverse{
      grid-area: media;
    }
    .section-block-text-reverse{
      grid-area: text;
    }

    /* 桌機小螢幕-第五頁-環區圖 */
    .section-5 {
      width: 70%;
      margin: 4rem auto 5rem;
    }
    .mrt-blue{
      margin: 2rem auto 10rem;
    }
    .mrt-blue{
      width: 70%;
    }
    /* 桌機小螢幕-第七頁-成大智慧醫療*/
    .hospital-3Dimg{
      display: none;
    }
    .cta{
      margin: 3rem 8rem; 
      justify-content:center;
      gap: 5rem;
    }
    .cta-circle{
    width: 100px;
    height: 100px;
    font-size: 1.5em;
    }
    .cta-big-text{
    font-size: 1.5rem;
    }
  }

    /* ------------------------------------------------- */
    
    /* 一般桌機 */
    @media (min-width: 1280px) and (max-width: 1599px){

    .phone-wrap{/* 畫面留白區域 */
     margin: 0;
    }
    .row-wrap{
      width: min(1200px, calc(100% - 10rem));
      padding: 0 2rem;
      margin: 8rem auto;
      transition: width 0.35s ease;
    }
    .br-none{
      display: none;
    }
     /* 一般桌機-第一頁 */
    .hero {
      background-image: url("../images/hero-2.jpg");
    }
    .hero-wrap{
     padding: 15rem 0 0 12rem;
    }

    .wh9-logo img{
      width: 18rem;
    }
    .meta{
      margin-top: 3rem;
    }
    /* 一般桌機-第二頁-建築外觀 */
    .section-2 {
      padding: 2.5rem 0;
    }
    .section-2-wrap {
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas: "text media";
      margin: auto 4rem;
    }
    .concept-media{
      grid-area: media;
      width: 100%;
      display: grid;
      overflow: hidden;
    }
    .concept-media img {
      width: 70%;
      display: block;
      justify-self:end;
    }
    .concept-text{
      grid-area: text;
      margin: auto auto;
    }


    /* 一般桌機-第三頁-裝潢屋 */
    .section-block{
      margin-top: 6rem;
    }
    .section-block-wrap{
      grid-template-columns: 1.2fr 0.8fr;
      grid-template-areas: "media text";
      gap: 3rem;
    }
    .section-block-wrap.reverse{
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas: "text media";
    }

    .section-block-media{
      width: 100%;
      height: auto;
      grid-area: media;
    }
    .section-block-text{
      margin: auto 2rem;
      grid-area: text;
      text-align: justify;
    }
    .section-block-media-reverse{
      grid-area: media;
    }
    .section-block-text-reverse{
      grid-area: text;
    }

    /* 一般桌機-第五頁-環區圖 */
    .section-5 {
      width: 70%;
      margin: 4rem auto 10rem;
    }
    .mrt-blue{
      margin: 2rem auto 10rem;
    }
    .mrt-blue{
      width: 70%;
    }
    /* 一般桌機-捷運藍線-延伸線 */
    .mrt-blue{
      margin: 3rem auto 10rem;
       width: 60%;
    }
    .mrt-blue img{
      width: 100%;
    }
    /* 一般桌機-第七頁-成大智慧醫療*/
    .hospital-3Dimg{
      display: none;
    }
    /* 一般桌機-第八頁-文字與箭頭*/
    .cta{
      margin: 5rem auto; 
      justify-content:center;
      gap: 2rem;
    }
    .cta-circle{
    width: 90px;
    height: 90px;
    font-size: 1.5em;
    transition: all 0.3s ease;
    }
    .cta-big-text{
    font-size: 1.3rem;
    }

    .cta-circle:hover{
     background: #c6a482;
    }
  }

  /* ------------------------------------------------- */

  /* 大螢幕專用樣式 */
  @media (min-width: 1600px) {
    .phone-wrap{/* 畫面留白區域 */
      margin: 0;
    }
    .row-wrap{
      width: min(1280px, calc(100% - 8rem));
      padding: 0 2rem;
      margin: 10rem auto;
      transition: width 0.35s ease;
    }
    .br-none{
      display: none;
    }
     /* 大螢幕桌機-第一頁 */
    .hero {
      background-image: url("../images/hero-2.jpg");
    }
    .hero-wrap{
     padding: 15rem 0 0 12rem;
    }

    .wh9-logo img{
      width: 18rem;
    }
    .meta{
      margin-top: 3rem;
    }
    /* 大螢幕桌機-第二頁-建築外觀 */
    .section-2 {
      padding: 4rem 0;
    }
    .section-2-wrap {
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas: "text media";
      margin: auto 2rem;
    }
    .concept-media{
      grid-area: media;
      width: 100%;
      display: grid;
      overflow: hidden;
    }
    .concept-media img {
      width: 70%;
      display: block;
      justify-self:end;
    }
    .concept-text{
      grid-area: text;
      margin: auto auto;
    }


    /* 大螢幕桌機-第三頁-裝潢屋 */
    .section-block{
      margin-top: 6rem;
    }
    .section-block-wrap{
      grid-template-columns: 1.2fr 0.8fr;
      grid-template-areas: "media text";
      gap: 3rem;
    }
    .section-block-wrap.reverse{
      grid-template-columns: 0.8fr 1.2fr;
      grid-template-areas: "text media";
    }

    .section-block-media{
      width: 100%;
      height: auto;
      grid-area: media;
    }
    .section-block-text{
      margin: auto 2rem;
      grid-area: text;
      text-align: justify;
    }
    .section-block-media-reverse{
      grid-area: media;
    }
    .section-block-text-reverse{
      grid-area: text;
    }

    /* 大螢幕桌機-第五頁-環區圖 */
    .section-5 {
      max-width: 1000px;
      margin: 4rem auto 10rem;
    }
    .mrt-blue{
      margin: 2rem auto 10rem;
    }
    .mrt-blue{
      width: 70%;
    }
    /* 大螢幕桌機-捷運藍線-延伸線 */
    .mrt-blue{
      margin: 3rem auto 10rem;
      width: 60%;
    }
    .mrt-blue img{
      width: 100%;
    }
    /* 大螢幕桌機-第七頁-成大智慧醫療*/
    .hospital-3Dimg{
      display: none;
    }
    /* 大螢幕桌機-第八頁-文字與箭頭*/
    .cta{
      margin: 5rem auto; 
      justify-content:center;
      gap: 2rem;
    }
    .cta-circle{
    width: 90px;
    height: 90px;
    font-size: 1.5em;
    transition: all 0.3s ease;
    }
    .cta-big-text{
    font-size: 1.3rem;
    }

    .cta-circle:hover{
     background: #c6a482;
    }

  }