*{ padding:0; margin:0; box-sizing: border-box;}
html *{ position: relative;}
ul, ol{ list-style-type: none;}
body{ background: #eee; font:15px/1 Arial,'微軟正黑體','細明體'; letter-spacing: 1px;}
a{ text-decoration: none;}
a:hover{ text-decoration: underline;}
img{ border:0;}

.card{ background: #fff; border: 1px solid; border-color: #e5e6e9 #dfe0e4 #d0d1d5; border-radius: 3px;}
.wrap{ width:960px; margin:1em auto;}
.hdr, .ftr{ background: #f6f6f6; padding: 1em;}
.hdr, .main, .box{ margin-bottom: 1em;}
.hdr{ height: 55px;}
.site-name{ position: absolute; top:-10px;}
.site-name a{ display: block; background: url('../images/logo.png'); width: 65px; height: 79px; text-indent: -9999px;}
.site-name a:hover { background-position: 0 -76px;}
.site-desc{ font-size: 13px; font-weight: 100; color:#999; top:-3px; left:75px; width: 235px; line-height: 1.3;}

.main:after{ content: ''; display: block; clear: both;}
.post-article{width:70%; float: left; padding: 15px;}
.sidebar{ width: 30%; float: right; padding: 15px;}

.l-flip .post-article{
	float: right;
}
.l-flip .sidebar{
	float: left;
}

.post-title{ margin-bottom: .5em; font-size: 30px; font-weight: 100;}
.post-content p, .post-content img{ margin-bottom: 1.5em;}
.post-content p{ line-height: 1.6;}
.post-content h2{ color: #e36c09; font-size: 22px; font-weight: 100; margin-bottom: .5em;}
.post-content img{ max-width:100%; background-color: #F6F6F6; border: 1px solid #E6E6E6; padding: .5em; box-sizing:border-box;}

.box-hdr{ border-bottom:solid 2px #ddd; margin-bottom: 1em;}
.boxTitle{ font-size: 18px; font-weight: 100; border-bottom: solid 2px #09c; display: inline-block; padding-bottom: .3em; top:2px;}
.list1 li{ margin-top: 10px; border-top: solid 1px #ddd; padding-top: 10px;}
.list1 li:first-child{ margin-top: 0; padding-top: 0; border: 0;}
.list1 li > a{ float:left;}
.list1-con{ margin-left:70px; height: 60px;}
.list1-con a{ font-size: 14px; line-height: 1.4; height: 40px; overflow: hidden; display: inline-block; color:#09c;}
.list1-con a:hover{ text-decoration: none; color: #000;}
.views .fa{ color:#666; margin-left: 3px;}
.list1-con .views{ font-size: 13px; color:#999; text-align: right;}
.list2 a{ display: block; margin-top: 1em; border:solid 1px #ddd;}
.list2 a:hover{ border-color: #09c;}
.list2 img{ width: 100%; height: auto; display: block;}
.msg{ line-height: 1.5;}

.loading{ height: 20px; left:50%; margin-left: -10px;}
.loading span{ border-radius:50%; width:20px; height:20px; border:solid 1px #ccc; position:absolute;}
.line1{
	border-color:#06F;
	-webkit-animation:r1 2s infinite linear;}
.line2{
	border-color:#F0F;
	-webkit-animation:r2 1.5s infinite linear;}
.line3{
	border-color:#FF0;
	-webkit-animation:r3 .8s infinite linear;}

@-webkit-keyframes r1{
	from{ -webkit-transform:rotateX(0) rotateY(0)}
	to{  -webkit-transform:rotateX(360deg) rotateY(360deg)}
}
@-webkit-keyframes r2{
	from{ -webkit-transform:rotateX(0)}
	to{  -webkit-transform:rotateX(360deg)}
}
@-webkit-keyframes r3{
	from{ -webkit-transform:rotateY(0)}
	to{  -webkit-transform:rotateY(360deg)}
}
.cr{ font-size: 12px;}
.cr sub{}


.btn__inner{
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
.btn{
	display: inline-block; padding: 7px 15px;
	line-height: 1;
	border: none; border-radius: 3px;
}

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

.btn-peace{
	background-color: #007bff;
	color: #fff;
}
.btn-peace:hover{
	background-color: #006add;
}

.dropdown--arrow:after{
	content: '';
	display: inline-block;
	border: solid 5px transparent;
	border-top-color: #fff;
	margin-left: 5px;
	position: relative;
	top: 2px;
}
.dropdown__body{
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 1; border-radius: 3px;
	background-color: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,.3);
}
.dropdown__body a{
	display: block;	padding: 10px 15px;
	border-top: solid 1px #ddd;
	color: #666;
	text-decoration: none;
}

.dropdown__body a:hover{
	background-color: #ddd;
}

.dropdown__body a:first-child{
	border-top: none;
}

.is-hidden{
	display: none;
}