/*
 * --------------------------------
 * 1. 字體宣告與基本排版
 * --------------------------------
 */
@font-face{
  font-family: 'EduAUV';
  src: url(../fonts/EduAUVICWANTHand-VariableFont_wght.ttf) format("truetype");
}
/* 靜態字體檔案，統一用 EduAUV 並加上 weight 區分 */
@font-face {
  font-family: 'EduAUV';
  src: url(../fonts/static/EduAUVICWANTHand-Bold.ttf) format("truetype");
  font-weight: 700; /* Bold */
}
@font-face {
  font-family: 'EduAUV';
  src: url(../fonts/static/EduAUVICWANTHand-Medium.ttf) format("truetype");
  font-weight: 500; /* Medium */
}
@font-face {
  font-family: 'EduAUV';
  src: url(../fonts/static/EduAUVICWANTHand-Regular.ttf) format("truetype");
  font-weight: 400; /* Regular */
}
@font-face {
  font-family: 'EduAUV';
  src: url(../fonts/static/EduAUVICWANTHand-SemiBold.ttf) format("truetype");
  font-weight: 600; /* SemiBold */
}

/* 基本設定 */
html {
  font-size: 25px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background-color: black;
}

body {
  margin: 0;
  padding: 0;
  background-color: black !important;
  color: white;
  overflow-x: hidden;
}

/* 通用元素 */
p {
  line-height: 1.2;
  font-size: 30px;
  color: #fff;
  margin: 0 0 10px 0;
}

img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h4 {
  color: #fff !important;
  margin: 0;
}
h1{ font-size: 100px; }
h2{ font-size: 70px; }
h4{ font-size: 30px; }

/* 佈局容器 */
.container-fluid, .row {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.clearfix{ clear: both; }
#btest { background-color: blueviolet; }


/*
 * --------------------------------
 * 2. 區塊樣式設定
 * --------------------------------
 */

/* 標題區塊 (dtitle) */
.dtitle {
  position: relative;
  height: 1223px;
  background-image: url(../image/title.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.Tlogo, .Tbutton { float: left; width: 35%; height: 200px; }
.Tbutton { width: 15%; } /* Tbutton 覆蓋 Tlogo 的寬度設定 */
.Ttext { width: 100%; height: 1023px; }
#hlogo { position: relative; top: 50px; left: 50px; }

/* About 區塊 */
#aboutus-img { width: 40%; position: relative; left: 10%; top: 10%; }
#about2img { margin: 0; padding: 0; height: 300px; width: 100%; }

.aimg {
  width: 24.9%;
  height: 100%;
  float: left;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

#aimg1 { background-color: aqua; background-image: url(../image/about01.jpg); }
#aimg2 { background-color: brown; background-image: url(../image/about02.jpg); }
#aimg3 { background-color: aqua; background-image: url(../image/about03.jpg); }
#aimg4 { background-color: brown; background-image: url(../image/about04.jpg); }

/* Philosophy 區塊 */
#phi-text { width: 30%; position: relative; left: 55%; top: 30%; }
.about3p { position: relative; top: 30%; left: 35%; }

/* Service 區塊 */
#service { text-align: center; }
#service-img { width: 100%; }

/* Service 按鈕容器 */
.service-button { 
  margin-bottom: 10px; 
  text-align: center;
  width: 100%; 
}

/* Service 按鈕本身 */
.service-button a {
    display: block;
    margin: 0 auto;
    max-width: 500px;
    width: 80%;
}

#service-text { 
  overflow: hidden; 
  max-height: 100%; 
  top: 35%; 
  max-width: 100%; 
  height: auto; 
  display: block; 
  margin: 0 auto; 
}


/* Project 區塊 */
#projects {
  text-align: center;
  height: 80vh;
}

#project22img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  gap: 0;
  max-width: 100vw;
  overflow: hidden;
}

.p22g {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* Project 圖片 */
#p22-1 { background-image: url('../image/concert.jpg'); }
#p22-2 { background-image: url('../image/competition.jpg'); }
#p22-3 { background-image: url('../image/party.jpg'); }
#p22-4 { background-image: url('../image/presentation.jpg'); }

#project-text { position: relative; } /* 保留原樣式 */


/* Coverflow 區塊 */
.coverflow { 
  position: relative; 
  width: 100%; 
  height: auto; 
  overflow: hidden; 
}

.coverflow>a { 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
  transition: opacity 0.5s ease-in-out; 
  animation: slider 15s linear infinite; 
}
.coverflow>a>img{ max-width: 100%; }

/* 延遲動畫 */
.coverflow>a:nth-child(1) { animation-delay: 1s; }
.coverflow>a:nth-child(2) { animation-delay: 5s; }
.coverflow>a:nth-child(3) { animation-delay: 9s; }
.coverflow:hover>a { animation-play-state: paused; }

/*動畫關鍵影格*/
@keyframes slider {
  0%, 20% { opacity: 0; }
  25%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}


/* Footer 區塊 */
#footer-img { background:hsla(100, 0%, 0%, 0.3); }
#footer-text { height:500px; text-align:center; position:relative; }
.fttext-p { position:relative; top:40%; margin:0; }
#snslink, #handle-text { text-align:center; width:100%; }

#mt-5 { background-color: black; }
.target-area{ height: 600px; scroll-margin-top: 30px; }

/* 回到頂部按鈕 */
#myBtn, #topbuttom {
  display:none;
  position: fixed;
  bottom:20px;
  right:30px;
  z-index:99;
  width:80px;
  border:none;
  outline:none;
  cursor:pointer;
}


/*
 * --------------------------------
 * 3. 響應式設計 (RWD)
 * --------------------------------
 */

/* 平板：768px ~ 1200px */
/* 平板：768px ~ 1200px */
@media (min-width:768px) and (max-width:1200px) {
  html { font-size:20px; }
  h1{ font-size:60px; } 
  h2{ font-size:40px; }
  h4, p{ font-size:22px; }

  /* 1. 隱藏公司Logo：假設 Logo 在 .Tlogo 容器內 */
  .Tlogo { 
    display: none; /* 將 Logo 容器隱藏 */
    width: 0%; /* 將寬度設為 0 */
    float: none; /* 移除浮動 */
  }

  /* 2. 讓按鈕置中 */
  /* 讓 Tbutton 佔滿整個寬度並移除浮動 */
  .Tbutton { 
    width: 100%; /* 讓按鈕區塊佔滿整個寬度 */
    height:auto; 
    float: none; /* 移除 float: left; */
    text-align: center; /* 讓區塊內的 inline/inline-block 內容置中 */
  }
  
  /* 如果按鈕 (例如 HTML 結構中的 <div class="col"> 容器) 自身是 block 元素且寬度不是 100%，
     則需要確保其父層能實現置中效果。
     如果 Tbutton 內有按鈕列的容器，請確保該容器也置中 (margin: 0 auto)。
     如果您使用 Grid/Flexbox，則需要調整 justify-content。
     
     由於您使用了 col/row 類別，它可能是一個 Grid/Flexbox 結構，我們透過調整 Tbutton 父層來處理： */

  .Ttext { width:100%; height:auto; }

  /* About 區塊 */
  #aboutus-img { width:60%; left:0; top:0; margin:20px auto; display:block; }
  .aimg { width:50%; height:200px; }

  /* Philosophy 區塊 */
  #phi-text, .about3p { width:80%; left:0; top:0; margin:20px auto; text-align:center; }

  /* Service 區塊 */
  .service-button { 
    width: 100%; 
    float: none;
    margin-bottom:15px; 
  }
  .service-button a { width: 60%; }

  /* Footer 區塊 */
  #footer-text { height:auto; padding:40px 0; }
  .fttext-p { position:static; top:0; }
}

/* 手機：< 768px */
@media (max-width: 768px) {
  html { font-size:16px; }
  h1{ font-size:48px; }
  h2{ font-size:32px; }
  h4, p{ font-size:18px; }
  .handleLive_Logo { display: none; }

  /* Header 區塊 */
  .Tlogo, .Tbutton, .Ttext { width:100%; float:none; text-align:center; height:auto; }

  /* About 區塊 */
  #aboutus-img { width:80%; left:0; top:0; margin:20px auto; }
  .aimg { width:50%; height:150px; }
  
  /* Philosophy 區塊 */
  #phi-text, .about3p { width:90%; left:0; top:0; margin:20px auto; text-align:center; }

   /* Service 區塊 */
  .service-button { 
    width: 100%;
    float: none;
    margin-bottom:20px; 
  }
  .service-button a { width: 90%; }


  /* Footer 區塊 */
  #footer-text { height:auto; padding:40px 0; }
  .fttext-p { position:static; top:0; }
}