﻿@charset "utf-8";


/*檔案下載列表------------------------*/

/*表單下載*/
.PageDownload { display:block; width:100%; height:auto; overflow:hidden; float:left;}
.PageDownload * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PageDownload ul { display:block; width:100%; height:auto; overflow:hidden; margin:0 auto; padding:calc( var(--basic-unit) * 0.5 ); padding-top:0;}
.PageDownload ul li { display:block; width:calc( 50% - 5px ); height:auto; overflow:hidden; background:white; margin-bottom:calc( var(--basic-unit) * 0.5 );
box-shadow:2px 2px 3px 0px rgba(0, 0, 0, 0.1); position:relative; border:1px solid #eee; margin-right:10px; float:left;
display: flex;
flex-wrap:wrap;
/*基礎動畫設定*/
transition:translate .5s;}
.PageDownload ul li:nth-child(even) { margin-right:0;}
.PageDownload ul li:last-child { margin-bottom:0;}
.PageDownload ul li:hover { border:1px solid gold;}
.PageDownload ul li:after { content:''; display:block; width:0; height:100%; position:absolute; left:0; bottom:0; z-index:0; background:gold;
/*基礎動畫設定*/
transition:all .5s;}
.PageDownload ul li:hover:after { width:100%;}
.PageDownload ul li a { display:block; width:calc( 100% - ( var(--basic-unit) * 5.5 ) ); height:auto; overflow:hidden; padding:calc( var(--basic-unit) * 0.5 ); line-height:calc( var(--basic-unit) * 1.5 ); float:left; text-align:left; float:left; position:relative; z-index:1;}
.PageDownload ul li.image-and-file a { width:calc( 100% - ( var(--basic-unit) * 11 ) );}
.PageDownload ul li a span.key { display:inline-block; margin-left:calc( var(--basic-unit) * 0.25 ); color:goldenrod; font-size:0.8rem; font-weight:bold;}
.PageDownload ul li a:link,
.PageDownload ul li a:visited { color:black; }
.PageDownload ul li a:hover,
.PageDownload ul li a:active { color:var(--maincolor-deep); background:none;}
/*取消下載列表的按鈕外框*/
.PageDownload ul li a.btn { border:0; padding:calc( var(--basic-unit) * 0.25 ) calc( var(--basic-unit) * 0.5 ); margin-bottom:0; margin:5px; font-size:calc( var(--basic-font-size) * 0.8 ); float:right; background:gold;}
.PageDownload ul li a.btn:hover { background:var(--maincolor); color:white;}
.PageDownload ul li a.btn.download { width:calc( var(--basic-unit) * 5 );}
.PageDownload ul li a.btn.image { width:calc( var(--basic-unit) * 5 );}
.PageDownload ul li a.btn i { line-height:30px;}

.download-detail a { width:100%;}
.download-detail a:link,
.download-detail a:visited { color:black; border:0; }
.download-detail a:hover,
.download-detail a:active { color:var(--maincolor); background:none;}

.btn-wrap.flex.flex-f-s.down-member-detail-btn { display:inline-block; width:auto; height:auto; overflow:hidden; float:left; margin-right:10px;}
.btn-wrap.flex.flex-f-s.down-member-detail-btn a:link,
.btn-wrap.flex.flex-f-s.down-member-detail-btn a:visited { color:black; background:gold; border:1px solid goldenrod;}
.btn-wrap.flex.flex-f-s.down-member-detail-btn a:hover,
.btn-wrap.flex.flex-f-s.down-member-detail-btn a:active { color:white; background:var(--maincolor); border:1px solid var(--maincolor-deep);}

@media only screen and (min-width:0px) and (max-width:1080px) {
	.page-content > .max-w-box { padding:0;}
	.page-content > .max-w-box .PageDownload { margin:10px auto;}
	}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.PageDownload ul li:after { display:none;}
	}


@media only screen and (min-width:0px) and (max-width:768px) {
	.PageDownload ul li { width:100%;}
	.PageDownload ul li:nth-of-type(even) { margin-left:0;}
	}
@media only screen and (min-width:0px) and (max-width:512px) {
	.PageDownload ul li a,
	.PageDownload ul li.image-and-file a{ width:100%;}
	.PageDownload ul li a.btn,
	.PageDownload ul li.image-and-file a.btn{ width:calc( 50% - 10px ); margin:5px; text-align:center; background:gold;}
	}