@charset "utf-8";


/*檔案下載列表------------------------*/
.PageDownload{ width:100%; height:auto; overflow:hidden; margin:0 auto;}
.PageDownload * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageDownload ul { width:100%; height:auto; overflow:hidden; text-decoration:none;
display: flex; flex-wrap:wrap;}
.PageDownload li { flex-shrink:0; width:calc( 33.33% - 30px ); height:auto; overflow:hidden; float:left; margin:15px; background: #fff; border: 1px solid #e0e0e0; border-radius: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; border-left:3px solid #5185c5;}
.PageDownload li:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);border: 1px solid #fbdca8; border-left:3px solid #fbdca8;}
.PageDownload li .Subject{ display:block; width:100%; height:auto; overflow:hidden; padding:10px; font-size: 22px; font-weight: bold; color: #5185c5;  position:relative;
  padding-left:25px;
}

.PageDownload li .Subject:before{
  content:"";
  width: 4px;
  height:60%;
  background:#5185c5;
  position:absolute;
  top:20%;
  left:10px;
}
.PageDownload li a.Subject:link,
.PageDownload li a.Subject:visited{ color: #5185c5;}
.PageDownload li a.Subject:hover,
.PageDownload li a.Subject:active{ color: #f5a623;}
.PageDownload li a span.key { display:inline-block; margin-left:5px; color:goldenrod; font-size:0.8rem; font-weight:bold;}
.PageDownload li a:link,
.PageDownload li a:visited { color:black; }
.PageDownload li a:hover,
.PageDownload li a:active { color:#f5a623; background:none;}
/*取消下載列表的按鈕外框*/
.PageDownload li a.btn { width:calc( 50% - 20px ); margin:0 10px 10px 10px; float:left; text-align:center; border:1px solid #ccc;}
.PageDownload li a.btn:hover,
.PageDownload li a.btn:active { background:#f5a623; color:white; border:1px solid #f5a623;}

.page-content-with-left .page-content-right .max-w-box { padding:10px 20px 20px 20px;}
.page-content-with-left .page-content-right .max-w-box > .down-detail { background:rgba(255,255,255,0.8 ); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); padding:20px; border-radius: 20px; border-top:3px solid #5185c5;}
.page-content-with-left .page-content-right .max-w-box > .down-detail .download-detail a.btn { float:left; text-align:center; border:1px solid #ccc;color:black;}
.page-content-with-left .page-content-right .max-w-box > .down-detail .download-detail a.btn:hover,
.page-content-with-left .page-content-right .max-w-box > .down-detail .download-detail a.btn:active { background:#f5a623; color:white; border:1px solid #f5a623;}

@media only screen and (min-width:0px) and (max-width:1280px) {
.PageDownload li { width:calc( 50% - 20px ); height:auto; overflow:hidden; float:left; margin:20px 10px;}
}

@media only screen and (min-width:0px) and (max-width:768px) {
	.page-content-with-left .page-content-right .down-box { padding:0;}
	.PageDownload li { width:calc( 100% - 10px ); margin:5px; margin-bottom:15px;}
	.PageDownload li a { padding:5px 10px; padding-right:10px;}
	.PageDownload li a.btn,
	.PageDownload li a.btn.download,
	.PageDownload li a.btn.image { position:static; top:auto; right:auto; float:left; margin-right:10px;}
	}

@media only screen and (min-width:0px) and (max-width:480px) {
	.page-content-with-left .page-content-right .max-w-box > .down-detail { border:0; padding:0; margin-bottom:20px; box-shadow:none;}
	}