
/*========================================================*/
/*-------下載模組css樣式--------*/
/*========================================================*/


.download_bg{
	display: flex;
	flex-direction: column;
	gap: 2.25rem; /*35px*/
}

.download_bg .text_area{
	/*margin-bottom: 2.25rem;*/ /*35px*/
	/* color: #fff; */
}

.download_area{
	font-size: min(max(0.8vw, 14px), 17px); /*字體大小 2.5vw、最小值 12px、最大值 18px*/
	font-size: .875rem; /*14px*/
}
	
		.download_area table{
			font-size: inherit;
		}
			.download_area .no_bg  th{
				font-size: inherit;
				padding: .625rem .125rem; /*10px 2px*/
				font-weight: 500;
				background: transparent;
				color: inherit;
			}
			.download_area .no_bg  th strong{
				font-size: inherit;
				padding: 0.9375rem 0px; /*15px*/
				font-weight: inherit;
				position: relative;
				display: block;
			}
			.download_area .no_bg  th strong:before{
				position: absolute;
				content:"";
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				background-color: var(--dark_color2);
				/* width: 90%; */
				width: 100%;
				height: 2px;
			}
			.download_area td{
				padding: .3125rem .125rem; /*5px 2px*/
				font-size: inherit;
				border: none;
				background: transparent;
				font-weight: 400;
			}
	
			.download_area .no_bg tbody tr:nth-child(2n+1) td {
				background: #fff0;
			}



			.download_area .no_bg tbody tr td:first-of-type{
				border-left: 0px solid var(--second_color);
				/* border-left: none; */
			}
			.download_area .no_bg tbody tr td:last-of-type{
				/* border-right:1px solid #fff; */
				border-right:none;
			}
			.download_area .no_bg tbody tr:last-of-type{
				/* border-radius: 0 0 35px 35px; */
			}
			.download_area .no_bg tbody tr:nth-child(2n+1) td{
				background: #fff0;
			}
			.download_area .no_bg tbody tr td:last-of-type{
				border-right: 0px solid var(--second_color);
			}



			.download_area .file-name{
				text-align: left;
			}
				.download_area .file-name a{
					text-decoration: none;
					color: inherit;
					display: block;
				}
				.download_area .file-name a:hover{
					opacity: 0.5;
				}



			/* 下載按鈕 */
			.button_area{				
				display: flex;					
				flex-wrap: wrap;
				justify-content: center;
				gap: 5px;				
			}
				.button_area .button{
					color: var(--primary_color);
					/* display: flex;
					flex-wrap: wrap;
					justify-content: center; */
				}
					.button_area .button a{
						text-decoration: none;
						display: flex;
						align-items: anchor-center;
						justify-content: center;
						border-radius: 30px;
						overflow: hidden;
						padding: .1875rem .4375rem; /*3px 7px*/
						gap: .3125rem; /*5px*/
						background-color: #fff;
						border:  var(--primary_color) 1px solid;
					}
					.button_area .button a:hover{
						opacity: 0.7;
					}
						.button_area .button img{
							width: 1.25rem; /*20px*/
							height: auto;
							padding: .125rem; /*2px*/
						}
						.button_area .button .title{
							font-size: inherit;
						}
	
	
	
	
	
			/* 驅動下載--------------------------------------- */
			.button_storage_area{
				width: fit-content;
    			margin: 0 auto;
			}
				.button_storage_area .driver_title{
					text-decoration: none;
					display: inline-flex;
					align-items: anchor-center;
					justify-content: center;
					border-radius: 30px;
					overflow: hidden;
					padding: .1875rem .6875rem; /*3px 711px*/
					gap: .3125rem; /*5px*/
					background-color: #fff;
					border:  var(--primary_color) 1px solid;
					font-size: inherit;
					color: var(--primary_color);
					cursor: pointer;
				}
				.button_storage_area .driver_title img{
					width: 1.25rem; /*20px*/
					height: auto;
					padding: .125rem; /*2px*/
				}
				.button_storage_area .driver_title img.add{
				}
				.button_storage_area .driver_title img.reduce{
					display: none;
				}
				.button_storage_area .driver_title strong{
					font-size: inherit;
					padding: 0;
					margin: 0;
					font-weight: inherit;
				}

				.button_storage_area .driver_title:hover{
					opacity: 0.5;
				}
				.button_storage_area .button_area{
					/* width: 100%; */
					gap: 0;
					display: none;
					transition: display 0.3s;
				}
					.button_storage_area .button_area .button{
						/* width: 100%;
						gap: 0; */
					}
						.button_storage_area .button_area .button a{			
							border-radius: 0;							
							/* border-top: none; */
						}
						.button_storage_area .button_area .button:not(:first-child) a{									
							border-top: none;
						}




			.button_storage_area.active{				
			}
			.button_storage_area.active .driver_title{
				border-radius: 15px 15px 0 0;
				border-bottom: none;
				background: var(--third_color);
				border-color: var(--third_color);
			}
			.button_storage_area.active .button_area{
				display: flex;
				transition: display 0.3s;
			}
			.button_storage_area.active .driver_title img.add{
				display: none;
			}
			.button_storage_area.active .driver_title img.reduce{
				display: block;
			}

	

@media screen and (min-width: 991px){ 

	/*超過數量附加 scroll*/
	.download_area .no_bg{
		width: 100%;
		overflow-x: auto;
		padding-bottom: 5px;
		overflow-y: auto;
	}

	.download_area table{
		min-width: 1000px;
		width: 100%;
		table-layout: fixed;
		border-collapse: collapse;
		border-spacing: 0;
		word-wrap: break-word;
		word-break: break-all;
		/* margin-bottom: 5px; */
	}
	
	.download_area .no_bg::-webkit-scrollbar {/*滾動條整體樣式*/
		width: 5px;     /*高寬分別對應橫豎滾動條的尺寸*/
		height: 5px;
	}
	.download_area .no_bg::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
		border-radius: 5px;
		/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
		background: var(--primary_color);
		/*background: #fff0; */
		/* background-image: linear-gradient(to top, #afafaf 0%, #e5e5e5 100%);		 */
	
		border-radius: 15px; /*Judy修改20240409*/
	}
	.download_area .no_bg::-webkit-scrollbar-track {/*滾動條裡面軌道*/
		/* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
		border-radius: 5px;
		background: #fff0;
		/* background: #EDEDED; */
	}	
		
		
		
}	
	

@media(max-width:990px){

	
.download_bg{
	gap: .9375rem; /*15px*/
}
	
	.download_area {
		font-size: 1rem;
	}
	/*第一個td*/
	.download_area .no_bg tr td:first-of-type {
		padding: .3125rem .125rem; /*5px 2px*/
		padding-top: 0.9375rem; /*15px*/
	}

	/*最後一個td*/
	.download_area .no_bg td:last-of-type {
		padding: .3125rem .125rem; /*5px 2px*/
		padding-bottom: 0.9375rem; /*15px*/
	}
	.download_area .no_bg td:before {
        font-weight: 600;
    }


	.download_area .no_bg td:nth-child(n+4):nth-child(-n+6){
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}



		/* 下載按鈕 */
		.button_area{
			justify-content: unset;
			margin-top: 0;
		}
		/* 驅動下載--------------------------------------- */
		.button_storage_area{
			margin: 0px 0 0;
		}
		.button_storage_area .driver_title {
			padding: .1875rem .75rem; /*3px 12px*/
		}
	    .button_storage_area .button_area {
			margin-top: 0px;
			flex-direction: column;
		}
}
	
	













/*========================================================*/
/*-------檔案搜尋區塊_樣式--------*/
/*========================================================*/

/*檔案搜尋區塊-----------------------------------------*/                        
.file_search_area{
	font-size: clamp(.75rem, 0.7292vw, .875rem);
	/*display: grid;*/
	/* grid-template-columns: minmax(170px , 1fr) minmax(auto , 2fr); */
	grid-template-columns: minmax(clamp(6.87rem, 8.85vw, 10.62rem) , 1fr) minmax(auto , 2fr); /* 最小值 110px、大小約 8.8542vw、最大值 170px */

	
	gap: 0.625rem; /*10px*/
	/* max-width: 600px; */
	max-width: clamp(19.3359rem, 31.2500vw, 37.5rem); /* 最小值 309.38px、大小約 31.25vw、最大值 600px */
	max-width: 18.75rem; /*300px*/
}



	/*檔案搜尋區塊 select-----------------------------------------*/                        
	.file_search_area select{
		width: 100%;
		font-size: inherit;

		display: none;;
	}

	/*檔案搜尋區塊-----------------------------------------*/
	.file_content_site {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		padding-left:  0;
		vertical-align: middle;
		width:  100%;
		/* color: var(--font_color); */
	}


		.file_search_content {
			position:relative;
			box-sizing:border-box;
			padding-right:  clamp(.9375rem, 1.5625vw, 1.875rem);
			background: #e8e8e8;
			width: auto;
			/* border-radius: 3.125rem; */
		}
			.file_search_content input[type='text'] {
				border: none;
				background: none;
				height: 2.625rem; /*42px*/
				/*height: 1.5rem;*/ /*24px*/
				font-size:inherit;
				padding: .0625rem  clamp(.4375rem, .7292vw, .875rem) 0;
				color: inherit;
				line-height: normal;
			}
			.file_search_content label {
				position:absolute;
				top: 50%;
				right: 5px;
				transform: translateY(-50%);
				color: inherit;
				padding: 0;
			}
				.file_search_content i {
					font-size: inherit;
					color: var(--dark_color);
				}
				.file_search_content input[type='submit'] {
					display:none;
				}	


				.file_search_content ::placeholder { /* CSS 3 標準 */
					color: var(--font_color);
				}
				.file_search_content ::-webkit-input-placeholder { /* Chrome, Safari */
					color: var(--font_color);
				}				
				.file_search_content :-ms-input-placeholder { /* IE 10+ */
					color: var(--font_color);
				}
				.file_search_content ::-moz-placeholder { /* Firefox 19+ */
					color: var(--font_color);
					opacity: 1;
				}

				


@media(max-width:990px){

	/*檔案搜尋區塊-----------------------------------------*/                        
	.file_search_area{
		font-size: 1rem;
	}
		.file_search_content i {
			font-size: 1.5625rem; /*25px*/
		}

		.file_search_content input[type='text'] {
			padding-right: 15px;
		}
}





