@charset "UTF-8";

/* ---google font--- */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=微軟正黑體:wght@300;350;400;450;500;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=sans-serif:wght@300;350;400;450;500;900&display=swap");

/* ---google icon--- */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");  /*全部Outlined*/

/* 全站文字基礎設定 */
html, body {
  font-family: 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
  color: #333;
	line-height: 1; 
  font-size: 1rem;
	letter-spacing: 0.05rem;
}

.mt--10 { margin-top: -5px;position: relative; }

.mt-20 { margin-top: 20px; }
.ml-15 { margin-left: 15px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.pl-10 { padding-left: 10px; }
.p-lr5 { padding: 0 5px; }
.p-tb5 { padding: 5px 0 ; }


.pb-10 { padding-bottom: 10px; }
.fw-700{font-weight:700;}
.fw-800{font-weight:800;}

.jc-end{
justify-content:flex-end;

}


/* 連結樣式 */
a {
  text-decoration: none;
  /*color: #0066cc;*/
}
a:hover {
  text-decoration: underline;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
 .text-right { text-align: right; }
/* 標題預設 */
h1 {
  font-size: 1.75rem;
  margin: 0 0 20px;
	letter-spacing: 0.1rem;
}
h2 {
  font-size: 1.5rem;
  margin: 0 0 18px;
}
h3 {
  font-size: 1.285rem;
  margin: 0 0 16px;
}

/* 段落 */
p {
	justify-content: center;
	line-height:1.5;
}

/* 小字 */
.small {
  font-size: 0.85rem;
}

/* 基本文字大小 */
.font-xxs { font-size: 0.7rem; }
.font-xs { font-size: 0.75rem; }
.font-sm { font-size: 0.875rem; }
.font-md { font-size: 1rem; }      /* 預設 */
.font-lg { font-size: 1.25rem; }
.font-xl { font-size: 1.3rem; }
.font-xxl { font-size: 1.5rem;}

 	
 	
/* 標題系統 */
.title-1 { font-size: 2rem; font-weight: 700; }
.title-2 { font-size: 1.75rem; font-weight: 700; }
.title-3 { font-size: 1.5rem; font-weight: 600; }
.title-4 { font-size: 1.105rem; line-height:normal;}
.title-5 { font-size: 0.925rem; }

/* 特殊用途 */
.membercar{ font-size:0.955rem; text-align:center;}
.font-size-85{ font-size:0.85rem; text-align:left;}
.caption { font-size: 0.825rem; }
.note { font-size: 0.7rem; }

.font-size-135{ font-size:1.35rem;}
.font-size-1185{ font-size:1.185rem;}
.font-size-115{ font-size:1.15rem;}
.font-size-105{ font-size:1.05rem;}
.font-size-995{ font-size:0.995rem;}
.font-size-925{ font-size:0.925rem;}
.font-size-95{ font-size:0.95rem;}
.font-size-9{ font-size:0.9rem;}
.font-size-855{ font-size:0.855rem;}
.font-size-785{ font-size:0.785rem;}
.font-size-795{ font-size:0.795rem;}

.font-size-8{ font-size:0.8rem;}

.highlight {
    font-weight: bold; /* 加粗 */
    font-size: 1.1rem; /* 字體變大 */
    color: #e4393c; /* 設定醒目的紅色d32f2f */
}


 	@media screen and ( max-width: 768px ){
 	
	.font-md { font-size: 0.95rem; }   
	.font-lg { font-size: 1.185rem; }
	.highlight {
    font-size: 1.05rem; /* 字體變大 */
}
	.font-size-105{ font-size: 0.9rem;}
	.font-size-135{ font-size:1.125rem; line-height:1.25;}
.title-4 { font-size: 1.025rem;}

 	}

/*ICON*/

.material-symbols-outlined { 
  height: 1em;
  vertical-align: middle;
  font-variation-settings:
  'FILL' 0,  /*是否填滿 0 or 1*/
  'wght' 400,  /*粗細 100 ~ 700*/
  'GRAD' 0,  /*視覺平衡粗細 -25 0 200*/
  'opsz' 48  /*大小*/
}


#membercar .material-symbols-outlined {	
position: relative;
margin:-4px -8px 0 0;
font-variation-settings:
'opsz' 10 
}

#membercar .login-content .material-symbols-outlined {
margin:3px 5px 3px 0;
font-variation-settings:
'FILL' 1, 
'wght' 300, 
'GRAD' 0, 
'opsz' 20 
}


.breadcrumb .material-symbols-outlined {
    font-size: 18px;
    margin: 0 5px;
    vertical-align: middle;
    color: #999; /* 箭頭顏色 */
}
.breadcrumb a, .breadcrumb span {
    display: flex;
    align-items: center;
}


#TOP .material-symbols-outlined {
color:#666;
margin-top:8px;
font-variation-settings:
'FILL' 0,
'wght' 400, 
'GRAD' 0,
'opsz' 25
}

.content .material-symbols-outlined:hover {
    color: #007bff;
}

		

#TOP-MENU .material-symbols-outlined  {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}


    .header-row .material-symbols-outlined {
position: relative;
margin:-4px -8px 0 10px;
        margin-right: 8px;
        color: #4a90e2;
    }