@charset "utf-8";
/* Base -------------------------------- */

*, *:before, *:after {
	box-sizing: border-box;
}

body {
	font-size: 1em;
	font-family: '微軟正黑體';
	background-color: #ddd;
}

ul, h2, h3, body {
	margin: 0;
	padding: 0;
}

/* Helper -------------------------------- */

.img-resp {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

/* Module ---------------------------------- */

.pic-warning .pic__tit {
	color: goldenrod;
}

.pic-danger .pic__tit {
	color: hotpink;
}

.pic-peace .pic__tit {
	color: #0074ad;
}

.pic-info .pic__tit {
	color: #2ebfb8;
}

/* Module Base ---------------------------------- */

.pic {
	width: 1220px;
	margin: 1em auto;
	background-color: #fff;
	border-radius: 5px;
}

.pic__ls {
	list-style-type: none;
	padding: 0 10px;
	display: flex;
}

.pic__item {
	width: 25%;
	margin: 20px 10px;
	border-radius: 5px;
	border: solid 1px #e6e6e6;
	overflow: hidden;
}

.pic__tit {
	padding: 10px 20px;
	margin: 0;
	font-size: 1.5em;
	border-bottom: solid 1px #e6e6e6;
}

.pic__name {
	padding: 10px;
	font-size: 1em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}