﻿@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:1000px;
}

.title .title_m {
	display:none;
}

	
article{
	width:100%;
	margin:0 auto;
	text-align:center;	
}

section{
	width:100%;
	height:auto;	
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	}
	
section div{
	width:1100px;
	height:auto;	
	overflow:hidden;
	margin:0 auto;
}	

h1{
	font-size:1.85rem;
	color:#f0e80a;
	font-weight:500;
	padding:5px;
}

section p{
width:950px;
	color:#FFF;
	font-size:1.2rem;
	margin:0 auto;
}

ul{
	width:1000px;
	height:auto;
	overflow:hidden;
	margin:20px auto 20px auto;
		display: grid; /* 預設區塊模式 */
		grid-template-columns: repeat(3,1fr);
		gap:18px; /* 間距 */
}	

li{
    align-items: center; /* 置中對齊 */
    gap: 10px; /* 設定間距 */
}

li{ 
	transition-duration:0.3s;
	transition-property:transform;
	transition-timing-function:ease-out;
} 
li:hover {
	transform: scale(0.95);
}

li a:hover{
	width:120%;
}

li img{
	width:100%;
	height:auto;
	margin:0;padding:0;
}
	



	
/*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: 9;
 	display: none; 
}	

footer {
	padding: 5px 15px ;
	text-align: center;
	letter-spacing: 0.065rem;
}


@media screen and ( max-width: 768px ){
.title .title_pc{
	display:none;
}

.title .title_m {
	display:block;
	width:100%;
}

img.logo{
	margin-left:5px;
}

section{
	width:100%;
	height:auto;	
	margin:0 auto;
	overflow:hidden;
	text-align:center;
	}
	
section div{
	width:98%;
	height:auto;	
	overflow:hidden;
	margin:20px auto;
}	
	


h1{
	font-size:1.35rem;
}

section p{
width:95%;
	font-size:1.12rem;
}

ul{
	width:75%;
	height:auto;
	overflow:hidden;
	margin:10px auto 10px auto;
		display: grid; /* 預設區塊模式 */
		grid-template-columns: repeat(1,1fr);
		gap:5px; /* 間距 */
}	



/*FOOTER*/

 footer BR{
	display:none;
}


	}