/* --------------------------------------------------------------------------
   sub-detail.css 用途：圖文詳細頁共用
   -------------------------------------------------------------------------- */
@charset "utf-8";
/* CSS Document */

/*listDetail*/
.listDetail{padding-bottom:2em;}
	.listDetail .toolbar{margin-bottom: 2em;}
	.listDetail .toolbar:after{clear:both; display:block; visibility:hidden; height:0; content:".";}
	.listDetail .toolbar a{ color: #747474;}
	.listDetail .date{float:left; font-size:0.9em; color:#666;}
	.listDetail .date span{padding:0 10px; color:#999;}
	.listDetail .share{float:right;}
	.listDetail .share a{border:#ccc 1px solid; width:40px; height:40px; text-align:center; line-height:40px; display:inline-block; border-radius:40px; line-height:40px;}


/*.Detail*/
.Detail .img{padding-bottom:1.5em; text-align:center;}
	.Detail h3{ font-weight: bold; font-size: 1.2em; margin-top: 1.5em;}
	.Detail img.floatLeft{position: relative; display: block; width: calc(100% / 2 - 1em);margin: 0.5em;outline: 6px solid rgba(255, 255, 255, 0.35);outline-offset: -6px;}
	.img_border{ position: relative;  height: 100%;  overflow: hidden;  top: 0;  left: 0;  display: block;  width: calc(100% / 2 - 1em); float: left;  margin: 0.5em;}
	.img_border img{width: 100%;}
	.img_border::after{ display: block; width: 100%; height: 100%; position: absolute; border: 5px solid rgba(255, 255, 255, 0.36); content: ''; box-sizing: border-box; top: 0;}

/* support */
.history_wp{margin-top: 8em; padding-bottom: 8em; position: relative;}
.history_wp:before { content: ''; display: block; width: 2px; height: 100%; position: absolute; /* left: 50%; */ top: 11px; margin-left: -3px;
					 background: #aee071; /* Old browsers */
					background: -moz-linear-gradient(top, #aee071 1%, #0092cb 44%, #54cffe 100%); 
					background: -webkit-linear-gradient(top, #aee071 1%,#0092cb 44%,#54cffe 100%); 
					background: linear-gradient(to bottom, #aee071 1%,#0092cb 44%,#54cffe 100%); 
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2aaea5', endColorstr='#004098',GradientType=0 ); 
					}
.history_wp { margin-top: 3em; padding-bottom: 0em;}
.history_wp ul { /* width: 43%; */  margin: 3em 0 3em 3%;}
.history_wp ul:nth-of-type(2n+1) {/* margin: 0 0 0 -0.1%; */}
.history_wp .txt { font-size: 1em;padding-left: 1em;position: relative;}
.history_wp .txt:after { content: '◆'; display: inline-block; position: absolute; left: 0; top: 0;}
.history_wp  .year { position: relative; font-size: 1.7em; margin-bottom: 0.5em;}
.history_wp  .year:before { content: ''; display: block; background-color: #00A5E0; width: 1.5%; height: 2px; position: absolute; left: -3%; top: 0.525em;}
.history_wp  .year:after { position: absolute; left: -3.6%; top: 0.5em; background-color: #fff; content: ""; display: block; overflow: hidden; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #000; z-index: 85; margin: -6px 0 0 -6px;}
/* .history_wp ul:nth-of-type(2n+1) .year:before { left: auto; right: -16%;} */
/* .history_wp ul:nth-of-type(2n) .year:after { left: -5.8%; right: auto; top: 57%; position: absolute;} */
/* .history_wp ul:nth-of-type(2n+1) .year:after { left: auto; right: -18.5%; top: 57%; position: absolute;} */
/*.history_wp  .year:before  Color*/
	.history[data-color='#2aaea5'] .year:before {background-color: #aee071;}
	.history[data-color='#2aaea5'] .year:after {border-color: #aee071;}
	.history[data-color='#24aaab'] .year:before {background-color: #24aaab;}
	.history[data-color='#24aaab'] .year:after {border-color: #24aaab;}
	.history[data-color='#18a2b5'] .year:before {background-color: #18a2b5;}
	.history[data-color='#18a2b5'] .year:after {border-color: #18a2b5;}
	.history[data-color='#119ebb'] .year:before {background-color: #119ebb;}
	.history[data-color='#119ebb'] .year:after {border-color: #119ebb;}
	.history[data-color='#0898c4'] .year:before {background-color: #0898c4;}
	.history[data-color='#0898c4'] .year:after {border-color: #0898c4;}
	.history[data-color='#008cc8'] .year:before {background-color: #008cc8;}
	.history[data-color='#008cc8'] .year:after {border-color: #008cc8;}
	.history[data-color='#0079bc'] .year:before {background-color: #0079bc;}
	.history[data-color='#0079bc'] .year:after {border-color: #0079bc;}
	.history[data-color='#0071b6'] .year:before {background-color: #0071b6;}
	.history[data-color='#0071b6'] .year:after {border-color: #0071b6;}
	.history[data-color='#0059a7'] .year:before {background-color: #0059a7;}
	.history[data-color='#0059a7'] .year:after {border-color: #0059a7;}
	


/*.otherlist*/
.otherlist{border-top:#eee 2px solid; padding-top:1.5em;}
	.otherlist p{padding:0; margin:0; padding-bottom:1em; font-size:1.1em; font-weight:bold;}
	.otherlist ul{margin-left:25px;}
	.otherlist li{list-style:square;}
	.otherlist .date{font-size:0.9em; color:#999; padding-left:5px;}
	.otherlist .more{padding:1em 0 0; margin:0;}
	.otherlist .more a{ display: inline-block; color: #fff; background: #6fc4f8; padding: 4px 2em; border-radius: 6px;}
	.otherlist .more a:hover{background:#acda6d;}
	.otherlist i{color:#c00; padding-right:5px;}




@media screen and (max-width: 760px) {
	/*.toolbar*/
	.toolbar .date{display: none;}
	/*.Detail*/
	.img_border{width: 100%; margin: 0.5em 0;}
}
@media screen and (max-width: 500px) {
}