/* Base --------------------------------------------------- */
*, *:before, *:after{ box-sizing: border-box;}
body{
    font-family: Arial, Helvetica, sans-serif, '微軟正黑體';
    font-size: 15px;
    background-color: #eee;
}
a{ text-decoration: none; color: #337ab7;}
a:hover{ text-decoration: underline;}
p{ line-height: 1.5;}

/* Helpers -------------------------------------------------------------- */
.img-out img{ display: block; max-width: 100%; height: auto;}
.push-left{ float: left;}
.clearfix:after{ content: ''; display: block; clear: both;}
.mx-auto{ margin-left: auto; margin-right: auto;}
.pd-15{ padding: 15px;}
.w-40{ width: 40%;}
.w-50{ width: 50%;}
.navi__item{ padding-right: 1rem;}
.clearfix:after{ content: ''; display: block; clear: both;}
.btn-info{ background-color: #5bc0de; border-color: #5bc0de;}
.btn-info:hover{ background-color: #55B6D2;}
.btn{ font-size: 15px; border-radius: 5px; color: #fff;	display: inline-block; padding: 0 15px;	line-height: 2;	border: solid 1px transparent;}
.btn:hover{ text-decoration: none;}
.text-center{ text-align: center;}
.shadow-light{ text-shadow: 1px 1px #FFF;}

.fix-clear::after {
	content: "";
	display: block;
	clear: both;
}

/* Layout -------------------------------------------------------------- */
.wrapper {
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.container {
	display: flex;
}
.navi {
	width: 15%;
}
.content {
	width: 55%;
}
.sidebar {
	width: 30%;
	padding-left: 15px;
}
.footer{
	padding: 15px;
	text-align: center;
	background-color: #ccc;
}

.siteName{ font-size: 6rem; color: #666; font-family: Verdana; margin-top: 1rem; margin-bottom: 2rem;}
.list{ list-style-type: none; padding: 0; margin: 0;}
.naviList{ border-bottom: solid 1px #ddd;}
.naviList .list__item a{ line-height: 2; display: block;}
.card{ border: solid 1px #ddd; background-color: #fff; position: relative;}
.sidebar .card + .card{ margin-top: 15px;;}
.card-body{ padding: 1rem;}
.card-title{ margin: 0; margin-bottom: .75rem; line-height: 1.2; font-size: 1.4rem;}
.card-desc{ margin: 0; font-size: 14px; color: #aaa; line-height: 1.5; margin-bottom: 1rem;}
.content__card{ margin-bottom: 15px;}
.content__card .card-body{ margin-left: 40%;}
.content__card .card-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem;}
.content__card .card-desc{ margin-bottom: 0;}
.card-desc p{ margin-top: 1rem; margin-bottom: 0;}

/* Module ------------------------------------ */
.tab{ margin-bottom: 1em;}
.tab-ls{
	padding: 0; margin: 0;
	list-style-type: none;
}
.tab-content{ display: none;}
.tab-content p{ line-height: 1.5;}

/* tab-base ------------------------- */
.tab-base .tab-ls:after{
	content: ''; display: block; clear: both;
}
.tab-base .tab-item{
	float: left; margin-right: -1px; padding: 0 1em;
	line-height: 2.5;
	background-color: #f9f9f9; cursor: pointer; color: #999;
	border: solid 1px #ddd;
}
.tab-base .tab-item:hover{
	background-color: #fff; color: #337ab7;
}
.tab-base .is-tab-active{
	z-index: 1;	position: relative;
	margin-top: -1px;
	background-color: #fff; color: #337ab7;
	border-bottom-color: #fff; border-top: solid 2px #337ab7;
}
.tab-base .tab-body{
	position: relative; top: -1px;
	padding: 1em;
	background-color: #fff; border: solid 1px #ddd;
}