/* 設定 body 擁有滿版的高度 */
html,
body {
	height: 100%;
}

body {
	font-family: 'Noto Sans TC', sans-serif;
}

/* 建立一個寬度一致且水平置中的容器，目的是讓每個區塊的內容寬度一致 */
.container {
	width: 75%;
	margin: auto;
	/* margin-right: auto; margin-left: auto ; 也可以水平置中 */
}

.h-100 {
	height: 100%;
}

/* header-------------------------------------------------------------------- */
#header {
	width: 75%;
	height: 60px;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	/* filter 是盒內元素輪廓的陰影 多函式之間不用逗點，box-shadow 是盒子本身的陰影 */
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
	z-index: 1;
}

#header .menu {
	width: 100%;
	height: 60px;
	text-align: center;
	background: url(../images/nav-bg-full.jpg) repeat-x center;

	position: absolute;
	top: 25px;
	font-size: 0;
	z-index: -1;
}

#header .menu li {
	display: inline-block;
	padding: 1rem 0;
	font-size: 1rem;
}

#header .menu li a {
	color: white;
	text-decoration: none;
	display: block;
	padding: 0.5rem 1.5rem;
	transition: 0.5s;
}

#header .menu li a:hover {
	background: rgba(255, 60, 0, 0.3);
}

/* 第三個 li 右側推移 15% 空間 */
#header .menu li:nth-child(3) {
	margin-right: 15%;
}

#header .menu::before {
	content: '';
	background: url(../images/nav-bg-left.png) no-repeat left top/cover;
	width: 12px;
	height: 60px;

	position: absolute;
	left: -10px;
}

#header .menu::after {
	content: '';
	background: url(../images/nav-bg-right.png) no-repeat right top/cover;
	width: 12px;
	height: 60px;

	position: absolute;
	right: -10px;
}

#header .logo {
	width: 15%;
	position: absolute;

	left: 50%;
	transform: translateX(-50%);
}

#header .logo img {
	width: 100%;
}

/* section01------------------------------------- */
#section01 {
	background: url(../images/section01-bg.jpg) no-repeat center/cover;
	position: relative;
}

#section01 .main-news {
	width: 100%;
	text-align: center;

	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#section01 .main-news h1 {
	font-size: 2.5rem;
	font-style: italic;
	color: yellow;
	text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1), 0 0 15px rgba(0, 0, 0, 1);
}

/* section02---------------------------------------------- */
#section02 {
	background: url(../images/section02-bg.jpg) no-repeat center/cover;
	position: relative;
}

#section02 .container {
	position: relative;
	height: 100%;
}

#section02 .row {
	width: 100%;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 0;
}

#section02 .col {
	/* box-sizing 可重新計算 box 總寬度、高度， width、height 包含了 padding、boder，排版時不用考慮 padding、boder */
	box-sizing: border-box;
	color: white;
	width: 50%;
	padding: 5rem 1rem;
	display: inline-block;
	font-size: 1rem;
}

#section02 .col h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
}
#section02 .col p {
	/* 行高: (字體大小 * 1.5)/2 ，也可以直接設定數值 */
	line-height: 1.5;
	text-indent: 2rem;
	letter-spacing: 1px;
	margin-bottom: 1rem;
}
#section02 .col iframe {
	width: 100%;
	height: 300px;
	border: 5px solid rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.8);
}

/* section03----------------------------------------------------------- */
#section03 {
	background: linear-gradient(45deg, #222 40%, #aaa 0%);
}

/* 切出上方角色資料容器 65% */
#section03 .col:nth-child(1) {
	height: 65%;
	/* background: lightblue; */
}

/* 切出下方角色選單內容 */
#section03 .col:nth-child(2) {
	height: 35%;
	/* background: lightyellow; */
}

/* 下方角色選單大區塊 */
#section03 .role_list {
	text-align: center;
	font-size: 0;
}
#section03 .role_list label {
	width: 7%;
	display: inline-block;
	margin: 0 0 5px 0;
	cursor: pointer;
	transition: 0.3s;
}

#section03 .role_list img {
	width: 100%;
}

#section03 .role_list label:hover {
	filter: drop-shadow(0 0 5px rgb(255, 0, 0)) drop-shadow(0 0 10px rgb(255, 0, 0));
}

/* 上方角色資料大區塊 */
#section03 .role_info > div {
	height: 100%;
}

/* 人物大圖 */
#section03 .role_info .role {
	box-sizing: border-box;
	width: 50%;
	height: 100%;
	padding: 5rem 1.5rem 0;
	float: left;
}

#section03 .role_info .role img {
	width: 100%;
	height: 100%;
}
/* 人物資料 */
#section03 .role_info .info {
	box-sizing: border-box;
	width: 50%;
	height: 100%;
	padding: 8rem 1rem 5rem;
	float: right;
}

#section03 .role_info h1 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
#section03 .role_info p {
	padding: 0.5rem 0;
	line-height: 1.2;
}

/* 隱藏 div */
#section03 .role_info > div {
	height: 100%;
	display: none;
}

/* 當 radio 選單被觸發成 :checked 狀態時，相鄰的 div 讓其顯示 */
#section03 .role_info input:checked + div {
	display: block;
}

#section03 .role_info input {
	display: none;
}

/* ~ 同層全體選擇器，選擇第三個之後出現的 label 都選 */
#section03 .role_list label:nth-child(3) ~ label {
	filter: brightness(0.4);
	cursor: auto;
}

/* footer-------------------------------------------------------------- */
#footer {
	background: black;
	color: white;
	padding: 2rem 0;
}
#footer .row {
	overflow: auto;
}

#footer .row .col {
	width: 25%;
	float: left;
}

#footer .card {
	box-sizing: border-box;
	padding: 1rem;
}

#footer h1 {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

#footer li {
	line-height: 1.4;
	padding-left: 1.5rem;
}

#footer .card h3 {
	margin-bottom: 1rem 0;
}

#footer .card > i {
	/* 將 icon 當作文字，可以使用 font-size、color */
	width: 30px;
	line-height: 3;
	font-size: 1.3rem;
	color: lightpink;
}

#footer .coayright {
	text-align: center;
	padding: 2rem 0 0;
}