@charset "utf-8";

/* reset ------------------------ */

html {
	scroll-behavior: smooth;
}

body {
	font-family: Arial, Helvetica, "微軟正黑體", sans-serif;
	background-color: #ddd;
}

/* helper ------------------ */


.container {
	max-width: 1200px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* header ---------------------- */

.header {
	height: 200px;
	background: url('../images/hdr.jpg') 0 -50px;
	background-size: cover;
	position: relative;
}

.header__desc {
	color: #ccc;
	font-size: 40px;
	position: absolute;
	left: 20px;
	top: 80px;
}

.header__title {
	position: absolute;
	top: 20px;
	left: 20px;
	font-size: 26px;
	font-weight: 600;
}

.header__link {
	color: #fff;
	text-decoration: none;
}

.header__small {
	width: 200px;
	font-size: 15px;
	color: #999;
	font-weight: 100;
	line-height: 1.3;
	position: absolute;
	left: 160px;
	top: 5px;
}

.header__small::before {
	content: '－';
	position: absolute;
	left: -18px;
}

/* nav ------------------------- */

.nav {
	padding: 1rem;
	background-color: #eee;
}

.nav__ul {
	display: flex;
	justify-content: center;
}

.nav__li {
	margin-left: .5rem;
	margin-right: .5rem;
}

.nav__btn {
	display: block;
	color: #333;
	padding: .7rem 1rem;
	border-radius: 3px;
	text-decoration: none;
	background-color: #ccc;
}

.nav__btn:hover {
	background-color: #999;
	color: #fff;
}

/* main -------------------------- */

.main {
	display: flex;
	background-color: #fff;
}

.primary, .sidebar {
	padding: 1rem;
	box-sizing: border-box;
}

.primary {
	width: 66.666666%;
}

.sidebar {
	width: 33.333333%;
}

/* switch ---------------------- */

.switch {
	margin-bottom: 1rem;
	text-align: right;
}

.switch__btn {
	background-color: #eee;
	border: 0;
	font-size: 1rem;
	line-height: 1;
	padding: .5rem;
}

.switch__btn:hover,
.switch__btn:disabled {
	background-color: #ddd;
}

.switch__btn:hover {
	cursor: pointer;
}

.switch__btn:disabled {
	cursor: default;
}

/* box --------------------------- */

.box + .box {
	margin-top: 2rem;
}

.box__title {
	padding-left: 1rem;
	border-left: solid 5px #900;
	font-size: 150%;
	font-weight: 600;
}

.box__desc {
	margin-top: 1rem;
	line-height: 1.7;
	color: #666;
	text-align: justify;
}

.box__link {
	color: #1775d5;
}

.box__link:hover {
	text-decoration: none;
}

/* card ------------------------------- */

.card {
	padding: .5rem;
}

.card + .card {
	margin-top: 1rem;
}

.card-success {
	border: 1px solid #BADB58;
}

.card-warning {
	border: 1px solid #FFA40E;
}

.card__title {
	line-height: 2;
	padding: 0 1rem;
	font-weight: 600;
	margin-bottom: 1em;
	position: relative;
}

.card__title::after {
	content: "";
	display: block;
	border: solid 10px transparent;
	position: absolute;
	top: 100%;
}

.card-success .card__title {
	background-color: #D8EAA2;
	color: #007130;
}

.card-warning .card__title {
	background-color: #FFA40E;
	color: #fff;
}

.card-success .card__title::after {
	border-top-color: #D8EAA2;
}

.card-warning .card__title::after {
	border-top-color: #FFA40E;
}

.card__ul {
	list-style: square inside;
	color: #999;
	margin-left: 1rem;
	line-height: 1.5;
}

.card__link:hover {
	text-decoration: none;
}

.card-success .card__link {
	color: #007130;
}

.card-warning .card__link {
	color: #81511C;
}

/* footer ------------------------ */

.footer {
	color: #ccc;
	text-align: center;
	line-height: 3;
	font-size: 20px;
	border-top: solid 1px #ddd;
	background-color: #666;
}

/* aside ------------------------------ */

.aside {
	position: fixed;
	right: 15px;
	bottom: 150px;
}

.aside__link {
	text-align: center;
	background-color: rgba(0, 0, 0, .5);
	color: #fff;
	display: block;
	line-height: 70px;
	width: 70px;
	text-decoration: none;
}

.aside__link:hover {
	background: #000;
	text-decoration: none;
}