@charset "utf-8";

/*
========================
Variable
========================
*/
:root {
	/* 中性色 第一色系 */
	--neutral-1: #595D61;
	--neutral-2: #91989F;
	--neutral-3: #787878;
	--neutral-4: #828282;
	--neutral-5: #BBBBBB;
	--neutral-6: #D9D9D9;
	--neutral-7: #F3F3F3;
	/* 中性色 第二色系 */
	--neutral-dark: #35383A;
	--neutral-mid: #666666;
	--neutral-light: #CACACA;
	--neutral-lighter: #DEE0E2;

	--theme-bg-color: var(--neutral-1);
	--theme-bg-transparent: #595D61ef;
	--mid-bg-color: var(--neutral-2);
	--light-bg-color: var(--neutral-7);
	--soft-bg-color: var(--neutral-7);
	--anchor-bg-color: var(--neutral-lighter);
	--theme-text-color: var(--neutral-1);
	--dark-text-color: var(--neutral-1);   /* 最深字色下修為 #595D61（原 #35383A 太重）*/
	--mid-text-color: var(--neutral-4);
	--light-text-color: var(--neutral-5);
	/* 米金色系保留：全灰畫面中唯一的暖色重點 */
	--highlight-bg-color: #FBF6E8;
	--highlight-text-color: #E7D6A7;
	--highlight-mid-text-color: #D7C79D;
	--highlight-dark-text-color: #C2B38C;
	--theme-border-color: var(--neutral-1);
	--mid-border-color: var(--neutral-light);
	--light-border-color: var(--neutral-6);
	--lighter-border-color: var(--neutral-lighter);
	--highlight-border-color: #D7C79D;
	--soft-border-color: var(--neutral-lighter);
	--scrollbar-track: var(--neutral-6);
	--scrollbar-thumb: var(--neutral-3);
}


/*
========================
Confirm
========================
*/
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-red,
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-theme			{ background-color: var(--theme-bg-color); color: #fff; }


/*
========================
Structure
========================
*/
#container								{ padding-top: 64px; }
.inner									{ width: 86%; margin:auto; max-width: 1440px; }
.inner-lg								{ width: 86%; margin:auto; }


/*
========================
Header
========================
*/
#header-wrapper							{ position: fixed; left: 0; top: 0; width: 100%; z-index: 1000; }
#header-inner							{ height: 64px; padding:0 0; position: static; }
#header-inner h1						{ width: 110px; flex-grow:0; flex-shrink: 0; margin-left: 10px; transform: translateY(-2px); }
#header-inner h1 a						{ display: block; width: 100%; height: 0; padding-top:26.49%;  background: url(../image/logos/logo-white.svg) no-repeat 50% 50%; background-size: contain; text-indent: -999px; overflow: hidden;}
#header-nav								{ margin-right: auto; margin-left: 6%; }
#header-nav ul 							{ display: none;}
#header-nav	li							{ margin-left: 60px;}
#header-nav li:first-child				{ margin-left: 0;}
#header-nav i 							{ margin-right: 10px;}
#header-nav a							{ opacity: .86; transition: opacity .2s; cursor: pointer;}
#header-nav a:hover 					{ opacity: 1; }
#header-icons  							{ margin-right: 25px;  }
#header-icons li 						{ margin-left: 20px;}
#header-icons li:first-child			{ margin-left: 0;}
#header-icons i							{ margin-right: 5px; font-size: 1.5em;}
#header-icons a							{ opacity: .86; transition: opacity .2s; cursor: pointer;}
#header-icons a:hover 					{ opacity: 1; }
#header-corner-lt,
#header-corner-rt 						{ width: 28px; height: 28px; position: absolute; bottom:-28px; fill: var(--theme-bg-color); }
#header-corner-lt						{ left: 0;}
#header-corner-rt						{ right: 0;}

.headroom #header-wrapper				{ will-change: transform;	transition: transform 400ms;}
.headroom--pinned #header-wrapper   	{ transform: translateY(0%);}
.headroom--unpinned #header-wrapper		{ transform: translateY(-100%);}


/*
========================
Main
========================
*/
#main-wrapper							{ padding:60px 0; /*min-height: 600px;*/ }
#main-inner								{}
#main-inner > h2 						{ margin-bottom: 50px;}

/*
========================
Footer
========================
*/
#footer-wrapper							{ }
#footer-inner							{ padding: 15px 0; border-top: 1px solid var(--mid-border-color); color: var(--theme-text-color);}
#footer-inner .footer-nav				{ }
#footer-inner .footer-nav li			{ margin: 5px 60px 5px 0; font-size: 1.1em; }
#footer-inner .social-links li 			{ margin-left: 15px;}
#footer-inner .social-links li:first-child { margin-left: 0;}
#footer-inner .social-links li a 		{ display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; border: 1px solid var(--light-border-color);}
#footer-copyright						{ font-size: 13px; }

#footer-inner .toolbar					{ margin: 15px 0; font-size: .95em;}
#footer-inner .toolbar .label			{ font-weight: 500; }
#footer-inner .toolbar li				{ margin-left: 15px;}
#footer-inner .toolbar li.active a		{ text-decoration: underline;}

/*
========================
Feedback
========================
*/
#feedback-index 					{ overflow-x: hidden; /* Fix select2 dropdown width issue */ }
#feedback-header 					{ height: 400px; background: url(../image/profile-banner.jpg) no-repeat 50% 50%; background-size: cover; position: relative; }
#feedback-header::before			{ content: ''; position:absolute; left: 0; top: -64px; width: 100%; height: 64px; background-color:var(--theme-bg-color);}
#feedback-header .inner 			{ height: 100%;}
#feedback-header .content 			{ margin: auto 0; color: var(--dark-text-color);}
#feedback-header .content h2 		{ font-size: 2.25em; letter-spacing: .1em; margin-bottom: 20px;  color: var(--dark-text-color); }
#feedback-header .content .fr-view	{ font-size: 1.1em; line-height: 1.5em; }

.feedback-form legend 				{ font-size: 1.4em; font-weight: 600; letter-spacing: .1em; color: var(--theme-text-color);} 
.feedback-form .form-body 			{ padding: 40px 4%; border: 1px solid var(--light-border-color);}
.feedback-form strong.label 		{ white-space: nowrap; margin: 0 20px 0 0 !important; font-weight: 500; font-size: 1.1em; color: var(--theme-text-color);}
.feedback-form input[type="text"],
.feedback-form input[type="email"],
.feedback-form input[type="password"],
.feedback-form textarea,
.feedback-form .select2-container--default .select2-selection--single { border: 1px solid var(--light-border-color); background-color: #fff;}
.feedback-form textarea				{ height: 200px;}
.feedback-form .bottom-row 			{ margin-top: 30px;}
.feedback-form .bottom-row .button 	{ min-width: 150px; height: 42px; position: relative; }
.feedback-form .bottom-row .button.loading::after { content: '\f3f4'; font: var(--fa-font-regular); margin-left: 5px; animation: rotation 1.5s linear infinite; position: absolute; left: 50%; top: 50%; margin-left: 30px; }
.feedback-form .result 				{ font-size: 1.1em; color: var(--theme-text-color);}