@charset "UTF-8";
/* 1. 全域 reset */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}

/* 2. HTML 基本設定（縮放 + 滑動） */
html {
  scroll-behavior: smooth;
  /* -webkit-text-size-adjust: 100%;  // 要用再打開 */
}

/* 3. 頁面背景（你原本的設定，可移到 layout.css 也可以留這） */
body {
	background:url(images/bg.png);
	background-repeat:no-repeat;
		background-size: cover;
}

/* 4. 列表（如果你確定整站都不需要點點，就留） */
ol, ul {
  list-style: none;
}

/*LAYOUT*/

/*HEADER*/
header {
	width:100%;
	height:auto;
	overflow:hidden;
	margin:0 auto 0 auto;
	background:#727171;
}
img.logo{
	margin-left:20px;
}


.title{
	width:100%;
	text-align:center;
}

.title .title_pc{
	width:1200px;
	margin:10px auto;
	
}
.title_pc img{
	width:1080px;
}

.title_pc .teacher_photo{
	width:300px;
position: absolute;
	top:50px;
	margin-left:-300px;
}

.title .title_m {
	display:none;
}

article{
	width:100%;
	margin:0 auto;
	text-align:center;	
	background:#d53962;
	position: relative;
	z-index:99;
		height:auto;
		overflow:hidden;
}

.note{
	width:1200px;
	height:60px;
	padding:15px 0 10px 110px;
	position: relative;
	z-index:99;
	text-align:left;
	margin:0 auto;
}
.note img{
	width:643px;
	height:auto;
}

	nav.menu {
		width:100%;
		height:40px;
		margin:20px auto 20px auto;
	}
	
	.menu-list {
	    width: 1000px;
			height:auto;
			overflow:hidden;
	    margin: 0 auto; 
		display: grid; /* 預設區塊模式 */
		grid-template-columns: repeat(5,1fr);
		gap: 20px; /* 間距 */
	}
	
	.menu-list li{
			padding:10px 0;
	}
	
	.signup {
    width: 100%;            /* 橫跨整個螢幕寬度 */
    height: auto;
    position: fixed;        /* 關鍵：固定定位 */
    bottom: 0;              /* 關鍵：貼緊底部 */
    left: 0;                /* 關鍵：從左邊開始 */
    background: #9d065d;
    z-index: 9999;          /* 確保不會被其他圖層遮住 */
    padding: 0 0;        /* 上下留白，左右不需留白因為已滿版 */
  color: #FFF;
    font-weight: bold;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* 加點陰影增加層次感 */


}
.signup ul{
    width: 100%;
    max-width:980px; /* 建議用 max-width 避免破版 */
		margin:0 auto;
		grid-template-columns: repeat(4,1fr);
		gap: 0; /* 間距 */display: grid;
    align-items: center;   /* Grid 的垂直置中 */
    justify-items: center; /* Grid 的水平置中 */

    list-style: none; /* 記得加上這行移除點點 */
    padding: 0 0;
}

.signup p{
		color:#ffff00;
		text-align:left;
    font-weight:450;
    padding:3px 0;
}

.signup h2 {
		color:#FFF;
		text-align:left;
    padding:3px 0;
}
.signup span{
    font-weight:450;
}

button {
background-color: #fff;
    color: #9d065d;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size:1.8rem;
}


section{
	width:100%;
	height:height;	
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	}
	
section div{
	width:1000px;
	height:auto;	
	overflow:hidden;
	margin:10px auto;
  background:#FFF;
  text-align:left;
  padding:20px 30px;
}	

/* 標題裝飾 */
.info-title {
    margin: 10px 0 20px 0;
    display:inline-block;
    font-size:1.5rem;
    border-radius: 10px;
    background:#009bcb;
    color:#FFF;
    padding:10px;
}

/* --- 清單與勾選圖示 --- */
.info-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 25px 0;
    font-size:1.2rem;
}
.normal{
    font-size:1rem;
}

.info-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
    line-height: 1.7;
}


/* 強調文字與備註 */
.info-list span {
    font-weight: 700;
    font-size:1.25rem;
}

/* 強調文字與備註 */
.info-list span {
    font-weight: 700;
    font-size:1.25rem;
}
.teacher_info h3{
		font-size:1.3rem;

}

.teacher_info img{
		width:200px;
		height:auto;
		margin:0 25px 0 0;
	float:left;
}
.teacher_info .info-list {
    margin: 0 0 0 225px;
}

/* 藍色勾選圓圈 */
.info-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    width: 18px;
    height: 18px;
    background: #e72051;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}
/*FOOTER*/

#TOP{
	width:40px;
	height:40px;
	border-radius:10px;
	position:fixed; /*固定位置定位*/
  bottom:100px; 
  right:10px;
	text-align:center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	opacity: 0.65;
	transition: opacity 0.5s ease;
 	z-index: 999;
 	display: none; 
}	

footer {
	padding: 5px 15px ;
	text-align: center;
	letter-spacing: 0.065rem;
	position: relative;
	z-index:99;
	margin-bottom:98px;
}


iframe {
		width:540px;
		height:400px;
}


/* 彈跳視窗背景 */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

/* 彈跳視窗內容 */
.modal-content {
    background: white;
    padding: 10px;
    border-radius: 10px;
    width: 650px;
    margin: 3% auto 5% auto;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in-out;

    /* 新增以下屬性 */
    max-height: 85vh;    /* 限制最高為螢幕高度的 85% */
    overflow-y: auto;    /* 垂直內容超出時自動顯示捲軸 */
}

/* 關閉按鈕 */
.close {
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}


table{
	width:95%;
  border-collapse: collapse;
  margin:30px auto 0 auto;
	font-size:1.25rem;
	text-align: center;
}

table thead{
	font-weight:bold;
	line-height:1.8;
}
	
table tbody{
}

table tbody tr{
  border: solid 1px #EEE;
}

table tbody th{
  width: auto;
  height:auto;
	font-weight:500;
  align-content: center;
	background:#118bc8;
	color:#FFF;
}

table tbody td{
  width: 80%;
  padding: 15px 0 15px 20px;
	color:#333;
	text-align:left;
}
table tfoot td{
  width: 80%;
  padding: 15px 0;
}
td div{
	margin:0 0 0 0;
	padding:0;
	line-height:1.65;
	font-size:1.135rem;
}

input[type=text], input[type=password] {
  width:90%;
  padding: 10px 15px;
  margin:  0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
	font-size:1.25rem;
}

input[type=radio], input[type=checkbox]{
	height:18px;
	width:18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right:8px;
  margin-left:8px;
}


input[type=submit]{
   border: 1px solid #FFFFFF;
   border-radius: 8px;
   color: #FFFFFF;
    font-weight: bold;
    text-align: center;
  letter-spacing: 3px;
    transition-duration: 0.4s;
    padding: 5px 25px;
    box-shadow: 0 5px 15px #ffc2e5;
  	letter-spacing: 3px;
  	margin:0 10px 0 10px;
   cursor: pointer;
		font-size:1.5rem;
    background: #ff4f81;
}

table tbody td span{
	float:left;
}

input[type=submit].del{
	padding:3px 5px;
	font-weight:400;
	color:#111;
	background:#CEC;
	font-size:0.95rem;
  box-shadow: none;
  border:1px solid #EEE;
  letter-spacing: 0;
  float:left;
  margin: 2px 0 0 8px;
}

table a {
	font-size:1.05rem;
	margin:0 8px ;
	}
	
table button {
	border:none;
	background:#118bc8;
	color:#FFF;
	font-size:1.35rem;
   cursor: pointer;
	padding:5px 8px 5px 8px;
	font-weight:550;
	display:inline-block;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	
	}
form a{
	padding:3px 8px 3px 8px;
	font-weight:400;
	display:inline-block;
	color:#111;
	background:#e5f5f4;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	margin:8px 8px 0 8px;
	font-size:0.95rem;
	}
form a:hover{
	background:#CEC;
}

#navFixed {
  z-index: 999999;          
  position: fixed;
  bottom: 0;
  left: 0;
  min-width: 100%;
	text-align:center;
	padding:10px 0;
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    background: #9d065d;


}

#navFixed input[type=submit]{
	
background-color: #fff;
    color: #9d065d;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size:1.8rem;
}
mark{
	background:#dfeaee;
	color:#0f2305;
	padding:1px 8px;
	margin-right:12px;
}




@media screen and ( max-width: 768px ){
.title .title_pc{
	display:none;
}

.title .title_m {
	display:block;
	width:100%;
}

img.logo{
	margin-left:5px;
}

.note{
	display:none;
}

	.menu-list {
	    width: 100%;
		grid-template-columns: repeat(3,1fr);
		gap: 10px; /* 間距 */
	}
	.title-3{
	font-size:1rem;
	}

section{
	width:100%;
	height:auto;	
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	}
	
section div{
	width:98%;
	height:auto;	
	overflow:hidden;
	margin:20px auto;
}	
	
/* 標題裝飾 */
.info-title {
    margin: 5px 0 5px 0;
    font-size:1.25rem;
    padding:10px;
}
.info-list {
    margin: 10px 0 15px 0;
    font-size:1.15rem;
}

.normal{
    font-size:.985rem;
}

.teacher_info {
padding:0;
text-align:center;
}
.teacher_info h3{
		font-size:1.2rem;

}

.teacher_info img{
		width:180px;
		height:auto;
		margin:5px auto;
	float:none;
}
.teacher_info .info-list {
    margin: 3px auto;
text-align:left;
}
iframe {
		width:320px;
		height:280px;
}

.signup ul{
		grid-template-columns: repeat(2,1fr);
		height:160px;

}
    .signup ul li:first-child {
    		display:none;
    }

button {
    position: absolute;
    margin-top:-90px;
    margin-left:6%;

}

/*FOOTER*/


footer {
	margin-bottom:160px;
}

 footer BR{
	display:none;
}


table{
	width:100%;
  margin:20px auto 0 auto;
	font-size:0.985rem;
}
	
table td{
  width: 80%;
}

table tbody td{
  width: 80%;
  padding: 15px 0 15px 10px;
}

table tbody td.question{
  padding: 0 0 0 10px;
}


input[type=text], input[type=password] {
  width:95%;
  padding: 8px;
	font-size:1.05rem;
}
input[type=radio]{
	height:15px;
	width:15px;
  margin-right:5px;
  margin-left:5px;
}


input[type=submit]{
    padding: 5px 15px;
		font-size:1.125rem;
}

table a {
	font-size:0.875rem;
	}
	
.modal-content {
    width: 100%;
}

table button {
	font-size:1.25rem;
	}




	}