/* === Global Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none;}
body { font-family: Arial, sans-serif; line-height: 1.6; }

   * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: Arial, sans-serif; line-height: 1.6; }

	h1 { margin-bottom :0px; border-bottom: solid 2px; border-top: solid 2px;}

    /* --- 導覽列 --- */
    header {
      position: fixed; top: 0; left: 0; width: 100%;
      display: flex; justify-content: space-between; align-items: center;
      padding: 0.5rem 1rem; background: rgba(20,6,79,0.8);
      z-index: 1000; backdrop-filter: blur(20px);
    }
    header .logo { font-size: 1.5rem; font-weight: bold; color: #fff; }
	    /* Logo */
    .logo {
      display: flex; align-items: center;
      color: #fff; font-weight: bold;
      text-decoration: none; font-size: 1.2rem;
    }
    .logo img { height: 80px; margin-right: 0.5rem; }
/*	nav {
      width: 100%;
	  background: rgba(20,6,79,0.7);
      backdrop-filter: blur(6px);
      z-index: 1000;
    } */
    nav ul { list-style: none; display: flex; }
    nav ul li { position: relative; }
    nav ul li a { display: block; padding: 10px 20px; color: #fff; text-decoration: none; }
    nav ul li a:hover { background: rgba(25,55,155,0); color:#ffd745; }

    /* 下拉選單 (桌機版 hover) */
    nav ul ul {
      position: absolute; top: 100%; left: 0;
      background: rgba(0,6,79,0.9); 
      display: none; flex-direction: column; min-width: 180px;
    }
    nav ul li:hover > ul { display: flex; }
    nav ul ul li a { padding: 10px; }

    /* 漢堡選單按鈕 */
    .menu-toggle {
      display: none; flex-direction: column; cursor: pointer;
    }
    .menu-toggle div {
      width: 25px; height: 3px; background: #fff; margin: 4px 0;
      transition: all 0.3s ease;
    }

	.content { text-align: center; margin-top:10px; padding:10px; color:white; background: rgba(0, 0, 0, 0.5); border-radius: 15px;	}
	.content1 { width:80%; text-align: center; margin-top:0px; padding:10px; color:white; background: rgba(0, 0, 0, 0.5); border-radius: 5px; }

    /* 手機 / 平板樣式 */
    @media (max-width: 768px) {
	
	.img { width: 100%; height: auto; }
	
	.content1 { text-align: center; margin-top:10px; padding:5px; color:white; background: rgba(27, 20, 125, 0.7); border-radius: 5px; }
	.content { width:95%; text-align: center; margin-top:10px; padding:5px; color:white; background: rgba(27, 20, 125, 0.7); border-radius: 15px;	}
	h1{ font-size:20px;}
      nav {
        position: absolute; top: 60px; right: 0;
        width: 220px; background: rgba(0,0,0,0.95);
        max-height: 0; overflow: hidden;
        transition: max-height 0.3s ease-out;
      }
      nav.active { max-height: 500px; } /* 展開效果 */

      nav ul {
        flex-direction: column; width: 100%;
      }
      nav ul li { border-bottom: 1px solid rgba(255,255,255,0.1); }
      nav ul li a { padding: 12px 16px; }

      /* 手機版下拉選單：預設隱藏 */
      nav ul ul {
        position: static;
        display: none;
        background: rgba(0,0,0,0.8);
      }
      nav ul li.active > ul {
        display: flex;
      }

      .menu-toggle { display: flex; }
	  
/*	  .content {font-size:80%; width:95%; }*/
    }
	


    /* --- Section 1 (影片背景) --- */
    .hero {
      position: relative; height: 100vh; width: 100%; overflow: hidden;
      display: flex; justify-content: center; align-items: center;
    }
    .hero video {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      object-fit: cover; z-index: -1;
    }
    .hero .content {
      color: #fff; text-align: center; background: rgba(0,0,0,0.5);
      padding: 30px; border-radius: 15px;
    }

    /* --- Section 2 (卡片區) --- */
    .section {
      background: url('https://accmandarin.github.io/acc_mandarin/imgs/acc_building.jpg') no-repeat center center/cover;
      padding: 20px; padding-top:100px; display: flex; justify-content: center;  gap: 20px; flex-wrap: wrap;
    }
    .section2 {
      background: url('https://accmandarin.github.io/acc_mandarin/imgs/acc_building.jpg') no-repeat center center/cover;
      padding: 20px; padding-top:10px; display: flex; justify-content: center;  gap: 20px; flex-wrap: wrap;
    }
    .card {
	  text-align: center;
      background: #fff; width: 350px; padding: 20px;
      border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.8);
      opacity: 0; transform: translateY(50px);
	  text-decoration: none;
	  justify-content: left;
    }
    .card.show {
      animation: slideUp 1s forwards;
    }
	.card p {text-align:justify; text-decoration: none; }
	
	.clink {color: white; background-color: transparent; text-decoration: none; }
/*	a:visited {color: black; background-color: transparent; text-decoration: none; }
*/	
	
    @keyframes slideUp {
      to { opacity: 1; transform: translateY(0); }
    }
    .card img { max-width: 100%; border-radius: 10px; }
    .card h3 { margin: 15px 0 10px; }
    .card p { color: #333; }
	
	footer{
		background: -webkit-linear-gradient(top, rgba(26,6,79,0.5), rgba(13,7,41,1));
		/*background: -moz-linear-gradient(top, #000, #40205f);
		
		/*background: linear-gradient(top, rgba(26,6,79,0), rgba(134,98,227,1));
		/*background: rgba(64, 32, 95, 0.5);*/
	/*	opacity: 0.57;*/
		color: white !important;
		height: 100px
		padding: 2em;
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	
	footer p{ margin-top: 0.975em; font-size: 0.9em; line-height: 1.3; color: white; }

/* --- Modal (彈出視窗) 樣式 --- */
/* === Modal 背景層 === */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0; /* 等同 top/left/right/bottom: 0 */
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: flex-start; /* ⛔ 不置中，從上開始避免被擠爆 */
  overflow-y: auto; /* ✅ 手機可以滾動 */
  padding: 5vh 2vw; /* ✅ 上下左右留白 */
  box-sizing: border-box;
}

/* === Modal 內容 === */
.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 92%;
  max-width: 600px;
  max-height: calc(100dvh - 10vh); /* ✅ 使用動態視窗高度 (iOS安全) */
  overflow-y: auto; /* ✅ 超出可捲動 */
  margin: auto;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
  position: relative;
  animation: fadeIn 0.25s ease;
}

/* 關閉按鈕 */
.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.6rem;
  color: #333;
  cursor: pointer;
}

/* 動畫 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 手機微調 */
@media (max-width: 600px) {
  .modal {
    padding: 6vh 3vw;
  }
  .modal-content {
    padding: 15px;
    width: 94%;
    max-height: calc(100dvh - 12vh);
  }
}