@charset "utf-8";

/* a鏈結字 */
a { color:#333;}
a:hover,
a:focus {
	color:var(--color-accent);
	text-decoration:none;
}



/*讓footer置底*/
html, body {
	height: 100%;
	margin: 0;
}
body{
	display: flex; /*使物件依序排列*/
	flex-direction: column; /*使物件垂直排列*/
	min-height: 100vh;
}
.wrapper {
	flex-grow: 1; /*可佔滿垂直剩餘的空間*/
	/*overflow-x:hidden;*/
}




.body_bg{
	background-color: #f8fafc;
}





/*-------------------------------------------------------------------------------------------
	#logo
-------------------------------- */
.logo{
	max-width:200px;
}
.logo img{
	display:block; max-width:100%; height:auto;
}

.header_no_search .logo{
	margin-left:auto; margin-right:auto;
}



.web-slogan{
	border-top:1px solid #eee;
	color:#333;
	font-size:var(--text-sm); font-weight:600;
	line-height:1.4;
	padding:1rem 0 0.25rem 0;
	margin-top:0.25rem;
	/*text-align:center;*/
}
.web-slogan br{ display:none; }
@media (min-width:992px){
	.web-slogan{
		border-top-width:0;
		font-size:var(--text-base);
		margin-left:2rem;
		/*text-align:left;*/
		padding:0;
		margin-top:0;
	}
	.web-slogan br{ display:block; }
}




/*----------------------------------------------------------------------
	#searchbar
-------------------------------- */
.searchbar{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	width: 100%; max-width: 300px;
	background: rgba(0,0,0,0.05);
	border-radius:28px;
	padding: 6px;
	margin-left:auto;
}
.search-input{
	flex:1 1 auto;
	width:1%; min-width:0;
	background: transparent;
	border-width: 0;
	color:#333;
	font-size: var(--text-lg); font-weight: 600;
	padding:0.5rem 0.75rem;
}
.search-input::placeholder{
	color:#666;
}
.search-btn{
	display: block;
	width:40px; height: 40px;
	background: #333;
	border-width:0;
	border-radius: 50%;
	margin:0;
	padding:0;
	transition: var(--transition);
}
.search-btn .iconsvg{
	width:100%; height: 100%;
}
.search-btn .iconsvg:before{
	background-color: #fff;
	-webkit-mask-size: 50% 50%;
    		mask-size: 50% 50%;
}

.search-btn:hover{
	background: var(--color-accent);
}
.search-btn:hover .iconsvg:before{
	background-color:#fff;
}


/*mini*/
.searchbar_sm .search-input{
	font-size: var(--text-sm);
	padding:0.25rem 0.5rem;
}
.searchbar_sm .search-btn{
	width:30px; height: 30px;
}




/*-------------------------------------------------------------------------------------------
	#idx
-------------------------------- */
.fullbg{
	position:relative;
	display:flex; flex-wrap:wrap;
	/*align-items:center;*/ justify-content:center;
	gap:1rem;
	
	background:url(../images/bg.jpg) no-repeat center;
	background-size:cover;
	
	width:100%; height:100%;
	min-height:100vh;
}
.fullbg:before {
	position: absolute; z-index:1; top: 0; left: 0; content: "";
	width: 100%; height: 100%;
	background: linear-gradient(135deg, rgba(30, 64, 175, 0.85) 0%, rgba(15, 23, 42, 0.9) 100%);
}

.fullbg_box{
	position:relative; z-index:3;
	width:100%;
	max-width:1400px;
	margin:2rem 0 6rem 0;
}
@media (min-width:992px){
	.fullbg_box{
		margin:4rem 0;
	}
}


.idx_copyright{
	position:absolute; z-index:99; bottom:0; left:0;
	width:100%; height:auto;
	padding:0.75rem 0.5rem;
	font-size:var(--text-sm);
	text-align:center;
}
.idx_copyright,
.idx_copyright a{
	color:#7394ff;
}
.idx_copyright a:hover{
	color:var(--color-accent);
}
@media (min-width:992px){
	.idx_copyright{
		padding:0.75rem 0.5rem 1.5rem 0.5rem;
	}
	.idx_copyright br{
		display:none;
	}
}





.headline_user{
	margin-bottom:var(--spacing-2xl);
	text-align:center;
}
.headline_user .iconsvg {
	width:40px; height:40px;
	margin:1rem auto;
}
.headline_user .iconsvg:before{
	background-color:#fff;
}
.heading_user{
	color:#fff;
	font-size:var(--text-4xl);
	margin-bottom:var(--spacing-md);
}
.heading-note{
	color: rgb(255,255,255,0.8);
	font-size:var(--text-xl);
}



/*-------------------------------------------------------------------------------------------
	#card_user
-------------------------------- */
.card_user{
	background-color: rgb(255,255,255,0.1);
	border:1px solid rgb(255,255,255,0.2);
	border-radius: 1rem;
	backdrop-filter: blur(12px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card_user a{
	display:block;
	padding: var(--spacing-lg);
}

.card_user .info-mark{
	margin-bottom:var(--spacing-lg);
}
.card_user .info-mark .iconsvg {
	width:50px; height:50px;
}
.card_user .info-mark .iconsvg:before{
	background-color:#fff;
}

.card_user .card-name{
	color:#fff;
	font-size:var(--text-3xl);
	margin-bottom: var(--spacing-base);
}

.card_user .card-text{
	color:rgb(255,255,255,0.8);
	font-size:var(--text-sm);
}

.card_user .info-btn{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	color:#fff;
	font-size:var(--text-sm); font-weight:600;
	margin-top:var(--spacing-lg);
}
.card_user .info-btn .iconsvg {
	width:16px; height:16px;
	transition: transform 0.3s ease;
}
.card_user .info-btn .iconsvg:before{
	background-color:#fff;
}
.card_user .info-btn:hover .iconsvg {
	color:var(--color-accent);
}
.card_user:hover .info-btn .iconsvg {
	transform: translateX(5px);
}


/*單位*/
.card_user.unit:hover{
	background:var(--color-one-gradient);
}
.card_user.unit .info-mark .iconsvg:before{
	background-color:rgba(var(--color-one-light-rgb),1);
}
.card_user.unit .info-btn{
	color:rgba(var(--color-one-light-rgb),1);
}
.card_user.unit .info-btn .iconsvg:before{
	background-color:rgba(var(--color-one-light-rgb),1);
}

/*政府*/
.card_user.gov:hover{
	background:var(--color-two-gradient);
}
.card_user.gov .info-mark .iconsvg:before{
	background-color:rgba(var(--color-two-light-rgb),1);
}
.card_user.gov .info-btn{
	color:rgba(var(--color-two-light-rgb),1);
}
.card_user.gov .info-btn .iconsvg:before{
	background-color:rgba(var(--color-two-light-rgb),1);
}

/*委員*/
.card_user.person:hover{
	background:var(--color-three-gradient);
}
.card_user.person .info-mark .iconsvg:before{
	background-color:rgba(var(--color-three-light-rgb),1);
}
.card_user.person .info-btn{
	color:rgba(var(--color-three-light-rgb),1);
}
.card_user.person .info-btn .iconsvg:before{
	background-color:rgba(var(--color-three-light-rgb),1);
}


.card_user:hover{
	box-shadow:0 25px 50px -12px rgb(0, 0, 0, 0.35);
	transform: translateY(-10px);
}
.card_user:hover .info-mark .iconsvg:before{
	background-color:#fff;
}
.card_user:hover .info-btn{
	color:#fff;
}
.card_user:hover .info-btn .iconsvg:before{
	background-color:#fff;
}







/*-------------------------------------------------------------------------------------------
	#form
-------------------------------- */
.form-control{
	background-color: #fff;
	border-color: #ccc;
	color: #333;
}
.form-control:focus{
	background-color: #fff;
	border-color:#000;
	outline: 2px solid #000;
    /*outline-offset: 2px;*/
	color: #000;
	box-shadow:none;
}

.form-title{
	color:#333;
}



.input-group_icon .form-control{
	padding-left: 50px;
}
.input-group_icon .input-group-row-auto{
	position:relative;
}
.input-group_icon .input-group-row-auto .iconsvg{
	position: absolute; top: 50%; left: 1rem;
	width:20px; height:20px;
	transform:translate(0, -50%);
}
.input-group_icon .input-group-row-auto .iconsvg:before{
	background-color:#666;
}




/*-------------------------------------------------------------------------------------------
	#minibox
-------------------------------- */
.limitbox{
	width:100%;
	max-width:1000px;
	margin:2rem auto;
}

.limitbox_login{
	max-width:400px;
}




/*-------------------------------------------------------------------------------------------

	#accountbox

-------------------------------- */
.accountbox{
	background:#fff;
	border-radius: 1rem;
	padding: var(--spacing-lg);
}
.account-mark{
	width:60px; height:60px;
	border-radius:50%;
	background:rgba(var(--color-one-light-rgb),0.2);
	margin:0 auto 0.5rem auto;
}
.account-mark .iconsvg{
	width:100%; height:100%;
}
.account-mark .iconsvg:before{
	background-color:rgba(var(--color-one-rgb),1);
	
	-webkit-mask-size: 50% 50%;
    		mask-size: 50% 50%;
}

.account-name{
	text-align:center;
	color:var(--color-one);
	font-size:var(--text-2xl);
	margin-bottom:1rem;
}

.account-text{
	text-align:center;
	font-size:var(--text-sm);
	margin-bottom:1rem;
}

.account-btn{
	width:100%;
	background:var(--color-one-gradient);
	color:#fff;
	margin:0;
}

.account_linkbar{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	font-size:var(--text-sm); font-weight:600;
	color:#333;
	margin-top:1.5rem;
}
.account_linkbar a{
	color:var(--color-one);
}
.account_linkbar a:hover{
	color:var(--color-accent);
}


.accountbox_gov .account-name{ color:var(--color-two); }
.accountbox_gov .account-mark{
	background:rgba(var(--color-two-light-rgb),0.2);
}
.accountbox_gov .account-mark .iconsvg:before{
	background-color:rgba(var(--color-two-rgb),1);
}
.accountbox_gov .account-btn{
	background:var(--color-two-gradient);
}

.accountbox_person .account-name{ color:var(--color-three); }
.accountbox_person .account-mark{
	background:rgba(var(--color-three-light-rgb),0.2);
}
.accountbox_person .account-mark .iconsvg:before{
	background-color:rgba(var(--color-three-rgb),1);
}
.accountbox_person .account-btn{
	background:var(--color-three-gradient);
}


.account-btn:hover{
	background:var(--color-accent-gradient);
	border-color:var(--color-accent);
	color:#fff;
}






/*-------------------------------------------------------------------------------------------
	#btn_primary
-------------------------------- */

.btn_primary_one{
	background:var(--color-one-gradient);
	border-color:var(--color-one);
	color:#fff;
}
a.btn_primary_one:hover{
	background:var(--color-accent-gradient);
	border-color:var(--color-accent);
	color:#fff;
	box-shadow:0 0 0 0.1rem rgba(var(--color-accent-rgb), 0.15);
}







/*-------------------------------------------------------------------------------------------
	#header
-------------------------------- */
.header{
	background:#fff;
	padding:0.5rem 0;
	box-shadow:0 1px 2px 0 rgb(0,0,0,0.05);
}
.header .col-one{
	order:1;
}
.header .col-two{
	order:4;
}
.header .col-three{
	order:3;
}
.header .col-four{
	order:2;
}

.header .searchbar{
	max-width:100%;
}
@media (min-width:992px){
	.header .col-one{
		order:1;
	}
	.header .col-two{
		order:2;
	}
	.header .col-three{
		order:3;
	}
	.header .col-four{
		order:4;
	}
	
	.header .searchbar{
		max-width:300px;
	}
}

.btn_logout{
	border-radius:5px;
	border-width:0;
}
a.btn_logout:hover{
	background:rgba(var(--color-accent-rgb),0.1);
	color:var(--color-accent);
	box-shadow:none;
}




/*-------------------------------------------------------------------------------------------
	#footer
-------------------------------- */
.footer{
	background:#fff;
    border-top: 1px solid #e2e8f0;
	box-shadow:0 1px 2px 0 rgb(0,0,0,0.05);
	margin-top:4rem;
	padding:2rem 0;
}

.web-foot{
	font-size:var(--text-sm);
}






/*-------------------------------------------------------------------------------------------
	#secbox
-------------------------------- */
.secbox{
	margin:2rem 0;
}
.secbox_pd{
	max-width:1200px;
	margin-left:auto; margin-right:auto;
}

.secbox_mini{
	max-width:800px;
	margin-left:auto; margin-right:auto;
}



/* ===== Breadcrumb-nav：導覽路徑 */
.breadcrumb-nav{
	position:relative;
	margin:0.5rem 0;
	padding-left:10px;
}

.breadcrumb li{ display:inline-block; }
.breadcrumb li:after{
	content:"/";
	color:rgba(var(--color-one-lighter),1);
	font-size:var(--text-xs);
	margin-left:4px;
}
.breadcrumb li:last-child:after{ display:none; }

.breadcrumb li{
	display:inline-block; vertical-align:middle;
	font-size:var(--text-sm); line-height:1.5;
}

.breadcrumb li,
.breadcrumb li a{
	color:rgba(var(--color-one-lighter-rgb),1);
}
.breadcrumb li a:hover{
	color:var(--color-accent);
}



/*====== secbox-header*/
.secbox-header{
	border-bottom:1px solid rgba(226, 232, 240, 1);
	margin-bottom:2rem;
	padding-bottom:1rem;
}
.secbox-header .row{
	align-items:flex-end;
}
.secbox-header .btnbar{
	margin:0;
	padding:0;
}
.secbox-header .btn{
	margin:0;
}


.info-finish{
	background:rgba(var(--color-finish-rgb),0.1);
	border-radius:5px;
	color:var(--color-finish);
	padding:1rem 2rem;
}
.info-finish .iconsvg:before{
	background-color:var(--color-finish);
}





/*-------------------------------------------------------------------------------------------
	#question
-------------------------------- */
.question-container{
	background:#fff;
	border:1px solid rgba(226, 232, 240, 1);
    border-radius: 0.75rem;
	box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.1);
	overflow:hidden;
	margin:2rem 0;
}

.question-header{
	background-color: rgb(248, 250, 252, 1);
	padding:1rem;
}


/*標題*/
.heading-question{
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:0.5rem;
}

.heading-question .tag{
	display:block;
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:1rem;
	width:40px; height:40px;
	background:rgba(var(--color-one-rgb),0.1);
	border-radius:50%;
	color:var(--color-one);
	font-size:var(--text-lg); font-weight:600;
}

.heading-question .heading-text{
	color:var(--color-one);
	margin:0;
}



/*問題列*/
.question-list{}
.question-list > li{
	border-bottom:1px dashed rgba(226, 232, 240, 1);
}
.question-list > li:last-child{ border-bottom-width:0; }
.question-list > li:hover{
	background:rgba(var(--color-one-rgb),0.03);
}

.question{
	padding:1rem 1rem;
}
.question .row{
	align-items:center;
}

.question-name{
	font-size:var(--text-base); font-weight:600;
}

/*配分標籤*/
.score-tag{
	display:inline-block;
	background:rgba(var(--color-one-rgb),0.07);
	border-radius:5px;
	color:rgba(var(--color-one-rgb),1);
	font-size:var(--text-sm); font-weight:600;
	padding:0.25rem 0.5rem;
	box-shadow:0 0 0 0.1rem rgba(255,255,255,0.4);
}

/*填寫*/
.question .btn_question{
	background:#fff;
	border-radius:5px;
	border:2px solid var(--color-one);
	color:var(--color-one);
	font-size:var(--text-sm);
	padding:0.5rem 1rem;
}
.question .btn_question .iconsvg:before{
	background-color:var(--color-one);
}

.question .btn_question:hover{
	background:var(--color-one);
	border-color:var(--color-one);
	color:#fff;
}
.question .btn_question:hover .iconsvg:before{
	background-color:#fff;
}


/*已填寫，修改*/
.question  .btn_finish{
	background:rgba(var(--color-finish-rgb),0.05);
	border-radius:5px;
	border:1px solid var(--color-finish);
	color:var(--color-finish);
	font-size:var(--text-sm);
	padding:0.5rem 1rem;
}
.question  .btn_finish .iconsvg:before{
	background-color:var(--color-finish);
}
.question .btn_finish:hover{
	background:var(--color-finish);
	border-color:var(--color-finish);
	color:#fff;
}
.question .btn_finish:hover .iconsvg:before{
	background-color:#fff;
}



/*字型調小*/
.question-container.text-sm .heading-question .tag{
	width:30px; height:30px;
	font-size:var(--text-base);
}
.question-container.text-sm .heading-question .heading-text{
	font-size:var(--text-lg);
}
.question-container.text-sm .question-name{
	font-size:var(--text-sm);
}









/*-------------------------------------------------------------------------------------------
	#answer
-------------------------------- */
.answer-container{
	background:#fff;
	border:1px solid rgba(226, 232, 240, 1);
    border-radius: 0.75rem;
	box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.1);
	overflow:hidden;
	margin:2rem 0;
}

.answer-header{
	background-color: rgb(var(--color-one-rgb),0.1);
	padding:1rem 2rem;
}

.answer-inner{
	padding:1rem;
}
@media (min-width:992px){
	.answer-inner{
		padding:1rem 2rem;
	}
}

.pageback + .answer-container{ margin-top:1rem; }


.heading-answer .heading-text{
	font-size:var(--text-xl);
}



/* 隱藏原始樣式醜陋的 input */
input[type="file"] {
  display: none;
}
.btn-upload {
	display:block;
	width:100%;
	background:#fff;
	border: 2px dashed #ccc;
	border-radius: 0.5rem;
	color:#333;
	padding:1rem;
	cursor: pointer;
	text-align:center;
}
.btn-upload:hover {
	background:rgba(var(--two-bright-rgb),0.1);
	border-color: rgba(var(--two-bright-rgb),1);
}

.btn-upload .title{
	margin:0.5rem 0;
}
.btn-upload .subtext{
	font-size: var(--text-xs);
	color:rgb(0,0,0,0.7);
}
.btn-upload .iconsvg{
	width:32px; height:32px;
	margin-left:auto; margin-right:auto;
}
.btn-upload .iconsvg:before{
	background-color:rgb(0,0,0,0.7);
}

.upload-group .info-text {
	margin-top: 1rem;
	color: #888;
	font-size: var(--text-sm);
	text-align:center;
}

/* 選中檔案後的高亮樣式 */
.has-file {
  color: var(--one-color);
  font-weight: bold;
}




/* ===== 返回*/
.pageback{
	display: inline-flex;
	align-items:center;
	
	width:100%;
	color:rgba(var(--one-lighter-rgb),1);
	font-size:var(--text-sm); font-weight:600;
}
.pageback .iconsvg{
	width:14px; height:14px;
	margin-right:4px;
}
.pageback .iconsvg:before{
	background-color:#333;
}
.pageback a{
	color:#333;
}
.pageback a:hover{
	color:var(--color-accent);
}

/*.pageback_pageend{
	justify-content:center;
	font-size:var(--text-base);
}*/






/*-------------------------------------------------------------------------------------------
	#flex-table
-------------------------------- */

/* 基礎設定 */
.flex-table {
	background: #fff;
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
    margin: 2rem 0;
}

.table-header, .table-row {
	display: flex; /*align-items: center;*/
	width: 100%;
	border-bottom: 1px solid #eee;
}

.table-header {
	background-color: rgb(248, 250, 252, 1);
	font-weight: bold;
}

.tbcol {
	flex: 1; /* 平分欄位寬度 */
	padding: 12px;
	text-align: left;
}

/* 針對特定欄位調整寬度 (例如序號可以窄一點) */
/*.tbcol:first-child {
	flex: 0 0 60px;
}*/

/* --- 行動端 RWD 轉換 (768px 以下) --- */
@media screen and (max-width: 992px) {
	.table-header {
		display: none; /* 隱藏原本的橫向標頭 */
	}
	
	.table-row {
		flex-direction: column; /* 改為直向排列 */
		padding: 10px 0;
		border-bottom: 3px solid #ccc; /* 加強每一組資料的分隔感 */
	}
	
	.tbcol {
		display: flex;
		/*justify-content: space-between;*/
		padding: 8px 15px;
		border: none;
	}
	
	/* 關鍵：利用偽元素顯示標題 */
	.tbcol::before {
		content: attr(data-label);
		width:120px;
		font-weight: bold;
		color: #666;
		margin-right: 10px;
	}
}


.table_rate{
	max-width:500px; margin:0 auto;
}
@media screen and (min-width: 992px) {
	.table_rate{
		max-width:100%;
	}
	.table_rate .tbcol.name{
		flex:2;
	}
	.table_rate .tbcol.serial,
	.table_rate .tbcol.person,
	.table_rate .tbcol.rate{
		text-align:center;
	}
}


.table_rate .tbcol.rate{ font-weight:600; }
.table_rate .tbcol.rate.gov{ color:#047857; }
.table_rate .tbcol.rate.expert{ color:#D97706; }


.btn_getrate{
	background:var(--color-two);
	border-radius:3px;
	color:#fff;
	font-size:var(--text-sm);
	padding:0.25rem 0.5rem;
}
.btn_getrate:hover{
	background:var(--color-accent);
	color:#fff;
}


.info_rated{
	color:var(--color-two);
	/*font-size:var(--text-sm);*/
}
.info_rated .iconsvg{
	width:16px; height:16px;
	margin-right:4px;
}
.info_rated .iconsvg:before{
	background-color:var(--color-two);
}






/*-------------------------------------------------------------------------------------------
	#unitbox
-------------------------------- */
.unitbox{
	background: #fff;
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
	padding:1rem;
    margin: 2rem 0;
}


.pageback + .unitbox{ margin-top:1rem; }



.unitbox .heading-text{ text-align:center; margin:0; }
.unitbox .infoline{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:0.5rem;
}
@media (min-width:1600px){
	.unitbox .heading-text{ text-align:left; }
	.unitbox .infoline{
		justify-content:flex-end;
	}
}


.info_rate{
	flex-direction: column; /* 改為直向排列 */
	
	min-width:100px;
	background:rgba(243,244,246,1);
	border:1px solid rgba(243,244,246,1);
	border-radius: 0.5rem;
	font-size: var(--text-sm);
	padding:0.5rem 0.75rem;
}

.info_rate span{
	display:block;
	width:100%;
	text-align:center;
}

.info_rate span:first-child{
	font-size: var(--text-xs);
	opacity:0.7;
}

.info_rate.score{
	background:rgba(var(--color-two-rgb),0.1);
	border-color:rgba(var(--color-two-rgb),0.1);
	color:var(--color-two-dark);
}


.info_rated_tag{
	justify-content:center;
	
	min-width:70px;
	background:rgba(var(--color-accent-rgb),0.1);
	border-color:rgba(var(--color-accent-rgb),0.1);
	border-radius:5px;
	color:var(--color-accent);
	font-size:var(--text-sm); font-weight:600;
	padding:0.25rem 0.5rem;
	box-shadow:0 0 0 0.1rem rgba(255,255,255,0.4);
}
.info_rated_tag .iconsvg{
	width:16px; height:16px;
}
.info_rated_tag .iconsvg:before{
	background-color:var(--color-accent);
}





/*-------------------------------------------------------------------------------------------
	#rate_view.php
-------------------------------- */
.unit-answer-box{
	background-color:#f8fafc;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    color: #333;
}

.btn_file_download{
	background:rgba(243,244,246,0.9);
	border-width:0;
	border-radius:5px;
	color:#333;
	font-size:var(--text-sm); font-weight:600; 
	padding:0.25rem 0.75rem;
}
.btn_file_download img{
	max-width:30px; height:auto;
	margin-right:2px;
}

.btn_file_download:hover{
	background:rgba(var(--color-accent-rgb),0.05);
	color:var(--color-accent);
	box-shadow:none;
}




.form-label.rate_mark .form-title{
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:4px;
	
	color:var(--color-one);
	font-size:var(--text-lg); font-weight:600;
}

.form-label.rate_mark .form-title .iconsvg{
	width:24px; height:24px;
}
.form-label.rate_mark .form-title .iconsvg:before{
	background-color:var(--color-one);
}





/*-------------------------------------------------------------------------------------------
	#msgbox
-------------------------------- */
.msgbox{
	max-width:500px;
	background: #fff;
    border: 1px solid rgba(226, 232, 240, 1);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
    overflow: hidden;
	padding:2rem 2rem 1rem 2rem;
    margin: 2rem auto;
}

.msgbox-heading{
	color:var(--color-accent);
	text-align:center;
	margin-bottom:1rem;
}
.msg-conent{
	font-size:var(--text-lg);
	text-align:center;
}

.msg-btnbar{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:1rem;
	margin-top:4rem;
}
.msg-btnbar .btn{
	min-width:150px;
}





/*----------------------------------------------------------------------
	{C} {page} #page [頁碼]
-------------------------------- */
.page{
	font-size:var(--text-sm); font-weight:600;
	text-align:center;
	color:#666;
	margin-top:var(--spacing-xl);
}
.page a ,
.page span{
	display:inline-block;
	min-width:38px;
	background: #fff;
    border: 2px solid #ccc;
	border-radius:5px;
	color:#333;
	font-size:var(--text-sm);
	padding:var(--spacing-xs) var(--spacing-sm);
	text-align:center;
	margin:var(--spacing-xs) var(--spacing-2xs);
}
.page span{
	background: rgba(var(--color-one-rgb),0.1);
	border-color:transparent;
	color: var(--color-one);
}
.page a:hover{
	border-color: var(--color-accent);
	color:var(--color-accent);
}