@charset "utf-8";

/* ==========================================================================
   1. SETTINGS
   ========================================================================== */

:root {
	
	--header-height: 150px; 
	
	
	/* --- Typography --------------- */
	--text:16px;
	
	--text-xs: calc(var(--text) * 0.75); /* 12px */
	--text-sm: calc(var(--text) * 0.875); /* 14px */
	--text-base: calc(var(--text) * 1);
	--text-lg: calc(var(--text) * 1.125); /* 18px--h4 */
	--text-xl: calc(var(--text) * 1.25); /* 20px--h3 */
	--text-2xl: calc(var(--text) * 1.5); /* 24px--h2 */
	--text-3xl: calc(var(--text) * 1.875); /* 30px--h1 */
	--text-4xl: calc(var(--text) * 2.25); /* 36px */
	--text-5xl: calc(var(--text) * 3); /* 48px */
	

	/* --- Space --------------- */
	--spacing: 1rem;
	
	--spacing-2xs: calc(var(--spacing) * 0.25); /*4px*/
	--spacing-xs: calc(var(--spacing) * 0.5); /*8px*/
	--spacing-sm: calc(var(--spacing) * 0.75); /*12px*/
	--spacing-base: calc(var(--spacing) * 1);
	--spacing-md: calc(var(--spacing) * 1.5); /*24px*/
	--spacing-lg: calc(var(--spacing) * 2); /*32px*/
	--spacing-xl: calc(var(--spacing) * 3); /*48px*/
	--spacing-2xl: calc(var(--spacing) * 4); /*64px*/
	--spacing-3xl: calc(var(--spacing) * 6); /*96px*/
	--spacing-4xl: calc(var(--spacing) * 8); /*128px*/


	--color-case-result:#F6781D; /*案件-成果*/
	--color-case-ongoing:#178CF7; /*案件-進行中*/
	--color-case-finish:#EF4124; /*案件-已完成*/
	
	--color-case-petition:#4d8a2a; /*案件-我要陳情*/
	
	--color-reserve:#e2630d; /*預約*/
	--color-meeting:#4FAE5C; /*會議*/
	
	--color-apply:#4FAE5C; /*立即申請*/
	--color-addcart:#D54545; /*立即購買*/
	
	/*icon*/
	--color-fb:#395693;
	--color-line:#38C702;
	--color-ig:#CF39AB;
	--color-youtube:#FB0000;
	--color-twitter:#489AD4;
	--color-weibo:#DE2127;
	--color-wechat:#04CF66;
	--color-mail:#3785C4;
	--color-website:#4FAE5C;
	--color-home:#9D1C1F;
	
	
	--svg-albums-mask: url('../images/albums-mask-01.svg');
	--svg-albums-dec: url('../images/albums-mask-02.png');
	
	--dec-heading-title: url('../images/heading-dec-01.svg');
	--dec-heading-subtitle: url('../images/heading-dec-02.svg');
	
}



/* ==========================================================================
   3. GENERIC (RESET)
   ========================================================================== */

*,
*::before,
*::after{
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
			box-sizing:border-box
}

html, body, div, ul, ol, li, 
form, input, button,textarea, blockquote,p{
	margin:0;
	padding:0;
}

ol, ul, li{list-style:none;}

h6, h5, h4, h3, h2, h1{
	margin-top:0;
	margin-bottom:0.5rem;
	font-weight:500;
	line-height:1.2;
}

p{
	margin-top:0;
	margin-bottom:0.5rem;
}

a{
    text-decoration:none;
}
a:hover{
	outline:none;
}


button{
	border-radius:0;
}

button:focus:not(:focus-visible){
	outline:0;
}

input, button, select, optgroup, textarea{
	margin:0;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;

	outline:none;
}

button, select{
	text-transform:none;
}

[role=button]{
	cursor:pointer;
}

select{
	word-wrap:normal;
}
select:disabled{
	opacity:1;
}

[list]::-webkit-calendar-picker-indicator{
	display:none;
}

button,
[type=button],
[type=reset],
[type=submit]{
	-webkit-appearance:button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled){
	cursor:pointer;
}

::-moz-focus-inner{
	padding:0;
	border-style:none;
}

textarea{
	resize:vertical;
}

fieldset{
	min-width:0;
	padding:0;
	margin:0;
	border:0;
}

legend{
	float:left;
	width:100%;
	font-size:var(--text-lg);
	line-height:inherit;
	padding:0;
	margin-bottom:0.5rem;
}
@media (min-width:1200px){
	legend{
		font-size:var(--text-xl);
	}
}
legend + *{
	clear:left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field{
	padding:0;
}

::-webkit-inner-spin-button{
	height:auto;
}

[type=search]{
  outline-offset:-2px;
  -webkit-appearance:textfield;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"]{
	direction:ltr;
}
*/
::-webkit-search-decoration{
	-webkit-appearance:none;
}

::-webkit-color-swatch-wrapper{
	padding:0;
}

::file-selector-button{
	font:inherit;
}

::-webkit-file-upload-button{
	font:inherit;
	-webkit-appearance:button;
}

iframe{
	border:0;
}


/* HTML5 display-role reset for older browsers */
article, aside, details,
figcaption, figure,
footer,
header,
hgroup,
menu, nav,
section,
main{ 
	display:block;
}



/* ==========================================================================
   4. ELEMENTS
   ========================================================================== */

/* 修正粗體 (碧筵綰在粗體時會隔很遠) */
@font-face{
    font-family:'微軟正黑體修正';
    unicode-range:U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style:normal;
    font-weight:bold;
    src:local(Yu Gothic), local(MS Gothic);
	
	font-display: block;
	/* Instructs browser to block rendering until loaded */
}
/* 一般粗細的時候改回微軟正黑 */
@font-face{
    font-family:'微軟正黑體修正';
    unicode-range:U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style:normal;
    font-weight:normal;
    src:local(微軟正黑體);
	
	font-display: block;
}

body{
	background-color:var(--color-background);
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	background-attachment:fixed;
	
	font-family:"Microsoft JhengHei","微軟正黑體修正","微軟正黑體",sans-serif;
	color:#333;
	font-size:16px;
	line-height: 1.5;
}


h1, .font--xxl { font-size: var(--text-3xl); }

h2, .font--xl { font-size: var(--text-2xl); }

h3, .font--lg { font-size: var(--text-xl); }

h4, .font--md { font-size: var(--text-lg); }

small, .font--sm { font-size: var(--text-sm); }

h1, h2, h3, h4, form legend {
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: var(--spacing-xs);
}
p{
	margin-top:var(--spacing-xs);
	margin-bottom:var(--spacing-xs);
}



/* ==========================================================================
   5. OBJECTS → Layout / Grid / 骨架
   ========================================================================== */

.container, .container-fluid{
	width: 100%;
	padding-right: var(--gutter-x, 1rem);
	padding-left: var(--gutter-x, 1rem);
	margin-right: auto;
	margin-left: auto;
}

@media (min-width:576px){
	.container, .container-fluid{
		padding:0 15px;
	}
}
@media (min-width:768px){
}
@media (min-width:992px){
}
@media (min-width:1200px){
    .container{ width:96%; }
}
@media (min-width:1400px){
    .container{ width:80%; }
}
@media (min-width:1920px){
    .container{ width:70%; }
}


.row {
	--gutter-x: 2rem;
	--gutter-y: 2rem;
	
	display: flex; flex-wrap: wrap;
	margin-top: calc(var(--gutter-y) * -1);
	margin-right: calc(var(--gutter-x) / -2);
	margin-left: calc(var(--gutter-x) / -2);
}
.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--gutter-x) / 2);
	padding-left: calc(var(--gutter-x) / 2);
	margin-top: var(--gutter-y);
}

.g-0, .gx-0 { --gutter-x: 0; }
.g-0, .gy-0 { --gutter-y: 0; }

.g-1, .gx-1 { --gutter-x: 0.25rem; }
.g-1, .gy-1 { --gutter-y: 0.25rem; }

.g-2, .gx-2 { --gutter-x: 0.5rem; }
.g-2, .gy-2 { --gutter-y: 0.5rem; }

.g-3, .gx-3 { --gutter-x: 1rem; }
.g-3, .gy-3 { --gutter-y: 1rem; }

.g-4, .gx-4 { --gutter-x: 1.5rem; }
.g-4, .gy-4 { --gutter-y: 1.5rem; }

.g-5, .gx-5 { --gutter-x: 3rem; }
.g-5, .gy-5 { --gutter-y: 3rem; }


.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > *{ flex:0 0 auto; width:100%; }
.row-cols-2 > *{ flex:0 0 auto; width:50%; }
.row-cols-3 > *{ flex:0 0 auto; width:33.3333333333%; }
.row-cols-4 > *{ flex:0 0 auto; width:25%; }
.row-cols-5 > *{ flex:0 0 auto; width:20%; }
.row-cols-6 > *{ flex:0 0 auto; width:16.6666666667%; }


.col {
	flex: 1 0 0%;
}
.col-full {
	flex:1 1 auto;
    width:1%; min-width:0;
}
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 {flex: 0 0 auto; width: 16.66666667%; }
.col-3 {flex: 0 0 auto; width: 25%; }
.col-4 {flex: 0 0 auto; width: 33.33333333%; }
.col-5 {flex: 0 0 auto; width: 41.66666667%; }
.col-6 {flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }


@media (min-width:576px){
	.g-sm-0, .gx-sm-0 { --gutter-x: 0; }
	.g-sm-0, .gy-sm-0 { --gutter-y: 0; }
	
	.g-sm-1, .gx-sm-1 { --gutter-x: 0.25rem; }
	.g-sm-1, .gy-sm-1 { --gutter-y: 0.25rem; }
	
	.g-sm-2, .gx-sm-2 { --gutter-x: 0.5rem; }
	.g-sm-2, .gy-sm-2 { --gutter-y: 0.5rem; }
	
	.g-sm-3, .gx-sm-3 { --gutter-x: 1rem; }
	.g-sm-3, .gy-sm-3 { --gutter-y: 1rem; }
	
	.g-sm-4, .gx-sm-4 { --gutter-x: 1.5rem; }
	.g-sm-4, .gy-sm-4 { --gutter-y: 1.5rem; }
	
	.g-sm-5, .gx-sm-5 { --gutter-x: 3rem; }
	.g-sm-5, .gy-sm-5 { --gutter-y: 3rem; }

	.col-sm { flex: 1 0 0%; }
	
	.row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-sm-1 > *{ flex: 0 0 auto; width:100%; }
    .row-cols-sm-2 > *{ flex: 0 0 auto; width:50%; }
    .row-cols-sm-3 > *{ flex: 0 0 auto; width:33.3333333333%; }
    .row-cols-sm-4 > *{ flex: 0 0 auto; width:25%; }
    .row-cols-sm-5 > *{ flex: 0 0 auto; width:20%; }
    .row-cols-sm-6 > *{ flex: 0 0 auto; width:16.6666666667%; } 
	
	.col-sm-auto { flex: 0 0 auto; width: auto; }
	.col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-sm-3 { flex: 0 0 auto; width: 25%; }
	.col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-sm-6 { flex: 0 0 auto; width: 50%; }
	.col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-sm-9 { flex: 0 0 auto; width: 75%; }
	.col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width:768px){
	.g-md-0, .gx-md-0 { --gutter-x: 0; }
	.g-md-0, .gy-md-0 { --gutter-y: 0; }
	
	.g-md-1, .gx-md-1 { --gutter-x: 0.25rem; }
	.g-md-1, .gy-md-1 { --gutter-y: 0.25rem; }
	
	.g-md-2, .gx-md-2 { --gutter-x: 0.5rem; }
	.g-md-2, .gy-md-2 { --gutter-y: 0.5rem; }
	
	.g-md-3, .gx-md-3 { --gutter-x: 1rem; }
	.g-md-3, .gy-md-3 { --gutter-y: 1rem; }
	
	.g-md-4, .gx-md-4 { --gutter-x: 1.5rem; }
	.g-md-4, .gy-md-4 { --gutter-y: 1.5rem; }
	
	.g-md-5, .gx-md-5 { --gutter-x: 3rem; }
	.g-md-5, .gy-md-5 { --gutter-y: 3rem; }
	
	.col-md { flex: 1 0 0%; }
	
	.row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-md-1 > *{ flex: 0 0 auto; width:100%; }
    .row-cols-md-2 > *{ flex: 0 0 auto; width:50%; }
    .row-cols-md-3 > *{ flex: 0 0 auto; width:33.3333333333%; }
    .row-cols-md-4 > *{ flex: 0 0 auto; width:25%; }
    .row-cols-md-5 > *{ flex: 0 0 auto; width:20%; }
    .row-cols-md-6 > *{ flex: 0 0 auto; width:16.6666666667%; } 
	
	
	.col-md-auto { flex: 0 0 auto; width: auto; }
	.col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-md-3 { flex: 0 0 auto; width: 25%; }
	.col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-md-9 { flex: 0 0 auto; width: 75%; }
	.col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; } 
}
@media (min-width:992px){
	.g-lg-0, .gx-lg-0 { --gutter-x: 0; }
	.g-lg-0, .gy-lg-0 { --gutter-y: 0; }
	
	.g-lg-1, .gx-lg-1 { --gutter-x: 0.25rem; }
	.g-lg-1, .gy-lg-1 { --gutter-y: 0.25rem; }
	
	.g-lg-2, .gx-lg-2 { --gutter-x: 0.5rem; }
	.g-lg-2, .gy-lg-2 { --gutter-y: 0.5rem; }
	
	.g-lg-3, .gx-lg-3 { --gutter-x: 1rem; }
	.g-lg-3, .gy-lg-3 { --gutter-y: 1rem; }
	
	.g-lg-4, .gx-lg-4 { --gutter-x: 1.5rem; }
	.g-lg-4, .gy-lg-4 { --gutter-y: 1.5rem; }
	
	.g-lg-5, .gx-lg-5 { --gutter-x: 3rem; }
	.g-lg-5, .gy-lg-5 { --gutter-y: 3rem; }
	
	.col-lg { flex: 1 0 0%; }
	
	.row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }    
	.row-cols-lg-1 > *{ flex: 0 0 auto; width:100%; }
    .row-cols-lg-2 > *{ flex: 0 0 auto; width:50%; }
    .row-cols-lg-3 > *{ flex: 0 0 auto; width:33.3333333333%; }
    .row-cols-lg-4 > *{ flex: 0 0 auto; width:25%; }
    .row-cols-lg-5 > *{ flex: 0 0 auto; width:20%; }
    .row-cols-lg-6 > *{ flex: 0 0 auto; width:16.6666666667%; } 
	
	
	.col-lg-auto { flex: 0 0 auto; width: auto; }
	.col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-lg-9 { flex: 0 0 auto; width: 75%; }
	.col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-lg-12 { flex: 0 0 auto; width: 100%; } 
}
@media (min-width:1200px){
	.g-xl-0, .gx-xl-0 { --gutter-x: 0; }
	.g-xl-0, .gy-xl-0 { --gutter-y: 0; }
	
	.g-xl-1, .gx-xl-1 { --gutter-x: 0.25rem; }
	.g-xl-1, .gy-xl-1 { --gutter-y: 0.25rem; }
	
	.g-xl-2, .gx-xl-2 { --gutter-x: 0.5rem; }
	.g-xl-2, .gy-xl-2 { --gutter-y: 0.5rem; }
	
	.g-xl-3, .gx-xl-3 { --gutter-x: 1rem; }
	.g-xl-3, .gy-xl-3 { --gutter-y: 1rem; }
	
	.g-xl-4, .gx-xl-4 { --gutter-x: 1.5rem; }
	.g-xl-4, .gy-xl-4 { --gutter-y: 1.5rem; }
	
	.g-xl-5, .gx-xl-5 { --gutter-x: 3rem; }
	.g-xl-5, .gy-xl-5 { --gutter-y: 3rem; }
	
	.col-xl { flex: 1 0 0%; }
	
	.row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }    
    .row-cols-xl-1 > *{ flex: 0 0 auto; width:100%; }
    .row-cols-xl-2 > *{ flex: 0 0 auto; width:50%; }
    .row-cols-xl-3 > *{ flex: 0 0 auto; width:33.3333333333%; }
    .row-cols-xl-4 > *{ flex: 0 0 auto; width:25%; }
    .row-cols-xl-5 > *{ flex: 0 0 auto; width:20%; }
    .row-cols-xl-6 > *{ flex: 0 0 auto; width:16.6666666667%; } 


	.col-xl-auto { flex: 0 0 auto; width: auto; }
	.col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-xl-3 { flex: 0 0 auto; width: 25%; }
	.col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-xl-6 { flex: 0 0 auto; width: 50%; }
	.col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-xl-9 { flex: 0 0 auto; width: 75%; }
	.col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-xl-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width:1600px){
	.g-xxl-0, .gx-xxl-0 { --gutter-x: 0; }
	.g-xxl-0, .gy-xxl-0 { --gutter-y: 0; }
	
	.g-xxl-1, .gx-xxl-1 { --gutter-x: 0.25rem; }
	.g-xxl-1, .gy-xxl-1 { --gutter-y: 0.25rem; }
	
	.g-xxl-2, .gx-xxl-2 { --gutter-x: 0.5rem; }
	.g-xxl-2, .gy-xxl-2 { --gutter-y: 0.5rem; }
	
	.g-xxl-3, .gx-xxl-3 { --gutter-x: 1rem; }
	.g-xxl-3, .gy-xxl-3 { --gutter-y: 1rem; }
	
	.g-xxl-4, .gx-xxl-4 { --gutter-x: 1.5rem; }
	.g-xxl-4, .gy-xxl-4 { --gutter-y: 1.5rem; }
	
	.g-xxl-5, .gx-xxl-5 { --gutter-x: 3rem; }
	.g-xxl-5, .gy-xxl-5 { --gutter-y: 3rem; }
	
	.col-xxl { flex: 1 0 0%; }
	
	.row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; }    
    .row-cols-xxl-1 > *{ flex: 0 0 auto; width:100%; }
    .row-cols-xxl-2 > *{ flex: 0 0 auto; width:50%; }
    .row-cols-xxl-3 > *{ flex: 0 0 auto; width:33.3333333333%; }
    .row-cols-xxl-4 > *{ flex: 0 0 auto; width:25%; }
    .row-cols-xxl-5 > *{ flex: 0 0 auto; width:20%; }
    .row-cols-xxl-6 > *{ flex: 0 0 auto; width:16.6666666667%; } 

	
	.col-xxl-auto { flex: 0 0 auto; width: auto; }
	.col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
	.col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-xxl-3 { flex: 0 0 auto; width: 25%; }
	.col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-xxl-6 { flex: 0 0 auto; width: 50%; }
	.col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
	.col-xxl-9 { flex: 0 0 auto; width: 75%; }
	.col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
	.col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
	.col-xxl-12 { flex: 0 0 auto; width: 100%; }
}



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



/*-------------------------------------------------------------------
	#sidebar [側邊攔]
-------------------------------- */
.sidebar{}
.sidebar_row{
	display:flex; flex-wrap:wrap;
}
.sidebar-left{
	width:100%;
}
.sidebar-right{
	position:relative;
	width:100%;
	margin-top:2rem;
}
@media (min-width:992px){
	.sidebar-left{
		width:240px;
		margin-right:80px;
	}
	.sidebar-right{
		width:calc( 100% - 320px );
		margin-top:0;
	}
}


/*@media (min-width:992px){
	.sidebox{
		position:relative;
		background:rgba(var(--color-primary-rgb), 0.1);
		border-radius:10px;
		padding:var(--spacing-md);
		overflow:hidden;
	}
	.sidebox:before{
		position:absolute; z-index:-1; top:0; left:0; content:"";
		width:100%; height:100%;
		background-color: var(--color-primary);
	
		-webkit-mask-position: center;
				mask-position: center;
		
		-webkit-mask-repeat: no-repeat;
				mask-repeat: no-repeat;
		
		-webkit-mask-size: cover;
				mask-size: cover;
				
		-webkit-mask-image: url(../images/web-05.svg);
				mask-image: url(../images/web-05.svg);
		
		opacity:0.2;
	}
}
*/


/* ==========================================================================
   6. COMPONENTS    → UI 元件
   ========================================================================== */

/*-------------------------------------------------------------------
	{C} #heading_group [呈一列]
-------------------------------- */
.heading_group{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:var(--spacing-sm);
}
.heading_group .heading-icon, 
.heading_group .heading-text, 
.heading_group .heading-subtext{
	display:block;
}
.heading-icon img{
	display:block; max-width:100%; height:auto;
}



/*-------------------------------------------------------------------
	{C} #editor [後台編輯器]
-------------------------------- */
.editor{
	line-height:1.8;
	overflow-wrap: break-word;
	word-break: break-all;
}

.editor h1 { margin-bottom: var(--spacing-md); }

.editor h2,
.editor h3,
.editor h4 {
	margin-top: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
}

.editor ul,
.editor ol,
.editor p {
	margin-bottom: var(--spacing-sm);
}

.editor ul,
.editor ol {
	list-style-position: outside;
	padding-left: var(--spacing-lg);
}

.editor ul { list-style-type: disc; }
.editor ol { list-style-type: decimal; }
.editor ul li,
.editor ol li {
	display:list-item;
	list-style:inherit;
	line-height: var(--line-height-body);
}

.editor em { font-style: italic; }
.editor u { text-decoration: underline; }

.editor img{ max-width:100%; height:auto; }
.editor iframe{ max-width:100%; }

/* ===== a連結 */
.editor{
	color:#333;
}
.editor a{
	color:rgba(0,0,238,1); /*預設藍*/
}
.editor a:hover{
	color:var(--color-primary);
}



/*-------------------------------------------------------------------
	{C} #iconsvg [圖標]
-------------------------------- */
.iconsvg {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;

} 
.iconsvg:before {
	position: absolute; top: 0; left: 0; content: "";
	width:100%; height:100%;
    background-color: #333;

    -webkit-mask-position: center;
			mask-position: center;
    
    -webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
    
    -webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
}



/*-------------------------------------------------------------------
	{C} #btn
-------------------------------- */
.btnbar,
.card-btnbar,
.form-btnbar{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:var(--spacing-base);
	
	position:relative; 
	text-align:center;
}
.btnbar{ margin:var(--spacing-sm) 0; }
.card-btnbar{ z-index:10; margin-bottom:var(--spacing-sm); }
.form-btnbar{ margin-top:var(--spacing-md); padding:var(--spacing-sm) 0; }

.btn, 
.card-btn, 
.formbtn{
	position:relative;
	display: inline-flex;
	align-items:center; justify-content:center;
	gap:var(--spacing-2xs);
	
	position: relative;
	background-color:transparent;
	border:1px solid transparent;
	color:#333;
	font-size:var(--text-base); font-weight:600; line-height: 1;
	padding: var(--spacing-2xs);
	text-decoration: none;
	white-space: nowrap;
	cursor:pointer;
	overflow:hidden;
	
	-webkit-user-select:none;
	   -moz-user-select:none;
			user-select:none;
}
@media (prefers-reduced-motion:reduce){
	.btn, .card-btn, .formbtn{ transition:none; }
}
.btn:active, .card-btn:active, .formbtn:active { transition: none; }

.btn .iconsvg, .btn-text,
.card-btn .iconsvg, .card-btn-text{
	position:relative; z-index:2;
	line-height:1;
}

.btn .iconsvg,
.card-btn .iconsvg{
	width:20px; height:20px;
}
.btn .iconsvg:before,
.card-btn .iconsvg:before{
	background-color:#333;
}

.btn-check:focus + .btn,
.btn:focus,
.card-btn:focus,
.formbtn:focus{
	outline:0;
	box-shadow:0 0 0 0.15rem rgba(13, 110, 253, 0.15);
}



/*-------------------------------------------------------------------
	{C} #Sidelink [右側/底部固定列]
-------------------------------- */
.scrolltop{
	cursor:pointer;
}


/* ===== [in 大螢幕時-右側固定列] */
.sidefixed_right{
	display:none;
	position:fixed; z-index:90; right:5px; bottom:100px;
	
	opacity:0;
	pointer-events:none;
	visibility:hidden;
}
@media (min-width:992px){
	.sidefixed_right{ display:block; }
}
.sidefixed_right.is-show{
	opacity:1;
	pointer-events:auto;
	visibility:visible;
}

.sidefixed_right_list > li{
	margin:0.25rem;
}


/* ===== [in 小螢幕時-底部固定列] */
.sidefixed_btm{
	position:fixed; z-index:990; bottom:0; left:0;
	width:100%; height:auto;
	background:#fff;
	box-shadow:0 -3px 4px 0 rgb(0,0,0,0.2);
}
@media (min-width:992px){
	.sidefixed_btm{ display:none; }
}

.sidefixed_btm_list{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
}
.sidefixed_btm_list > li{
	width:calc(100% / 8);
	border-left:1px solid rgba(0,0,0,0.1);
}
.sidefixed_btm_list > li.sideline_fillup{
    flex:1 1 auto;
    width:1%; min-width:0;
}


/* ===== sidelink */
.sidelink{ 
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	
	font-size:var(--text-sm); font-weight:600; letter-spacing:0px;
	text-align:center;
}
.sidelink span{ display:block; }

iframe.line-it-button {
	min-width:30px;
	min-height:30px;
}

.sidelink .iconsvg:before{ background-color:var(--color-primary); }

.sidelink_wechat .iconsvg:before{ background-color:var(--color-wechat); }
.sidelink_line .iconsvg:before{ background-color:var(--color-line); }
.sidelink_fb .iconsvg:before{ background-color:var(--color-fb); }
.sidelink_ig .iconsvg:before{ background-color:var(--color-ig); }
.sidelink_reserve .iconsvg:before{ background-color:var(--color-reserve); }


/* ===== [in sidefixed_right]：大螢幕時-右側固定列 */
.sidefixed_right .sidelink{
	width:40px; height:40px;
	background:#fff;
	border:1px solid #fff;
	border-radius:3px;
	color:#333;
	box-shadow:1px 1px 2px rgba(0,0,0,0.3);
	overflow:hidden;
}
.sidefixed_right .sidelink:hover{
	box-shadow:2px 2px 4px rgba(0,0,0,0.5);
}
.sidefixed_right .sidelink a{
	position:relative;
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	width:100%; height:100%;
}
.sidefixed_right .sidelink .iconsvg{
	z-index:2;
	width:22px; height:22px;
}
.sidefixed_right .sidelink-text{ display:none; }


.sidefixed_right .sidelink_scroll .iconsvg:before{
	background-color:#333;
}
.sidefixed_right .sidelink_scroll:hover{
	background-color:var(--color-primary);
}
.sidefixed_right .sidelink_scroll:hover .iconsvg:before{
	background-color:#fff;
}



/* ===== sidelink [in sidefixed_btm]：小螢幕時-底部固定列 */
.sidefixed_btm .sidelink a{
	width:100%;
	padding:0.5rem 0;
	color:#fff;
	text-align:center;
}
.sidefixed_btm .sidelink .iconsvg{
	width:24px; height:24px;
	margin:0 auto 1px auto;
}
.sidefixed_btm .sidelink-text{
	color:#666;
	font-size: var(--text-xs); font-weight:600; line-height:1;
	margin-top:0.25rem;
}

.sidefixed_btm .sidelink_toggler .iconsvg:before,
.sidefixed_btm .sidelink_scroll .iconsvg:before{
	background-color:#333;
}



/*----------------------------------------------------------------------
	{C} #language [語系-列表式]
-------------------------------- */
.language_box{ display:none; }
@media (min-width:992px){
	.language_box{
		display:block;
		margin-bottom:var(--spacing-base);
	}
}

.language_list{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:flex-end;
	gap:var(--spacing-xs);
}

.language{ 
	background:rgba(255,255,255,0.2);
	border:1px solid transparent;
	border-radius:3px;
    font-size:var(--text-sm); font-weight:600;
	color:#fff;
	padding:var(--spacing-xs) var(--spacing-sm);
}
@media (min-width:992px){
	.language{
		padding:var(--spacing-2xs) var(--spacing-xs);
	}
}
.language:hover{
	background:#fff;
    color:var(--color-primary);
}
.language.active{
	background:transparent;
	border-color:transparent;
	color:#fff;
	cursor:default;
}



/*----------------------------------------------------------------------
	{C} #language_member [會員管理(語系條列式與下拉式裡的css命名皆同)]
-------------------------------- */
.language_member{
	display:block;
	position:relative;
	width:44px; height:44px; min-width:auto;
	background:#fff;
	border:1px solid rgba(255,255,255,0.2);
	border-radius:50%;
	font-size:0;
	margin-left:var(--spacing-sm);
}
@media (min-width:992px){
	.language_member{
		width:36px; height:36px;
		background:rgba(255,255,255,0.2);
	}
}
.language_member:before{
	position:absolute; z-index:1; top:0; left:0; content:"";
	width:100%; height:100%;
	
	background-color:#fff;
	
	-webkit-mask-position:center;
			mask-position:center;
	
	-webkit-mask-repeat:no-repeat;
			mask-repeat:no-repeat;
	
	-webkit-mask-size:50% 50%;
			mask-size:50% 50%;
	
	-webkit-mask-image:url(../images/icon/icon_person.svg);
			mask-image:url(../images/icon/icon_person.svg);
}

.language_member:hover{
	background:#fff;
	border-color:var(--color-primary);
}
.language_member:hover:before{
	background-color:var(--color-primary);
}


/* ===== language_dropbox ：語系下拉模式 */
.language_dropbox{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
				
	text-align:center;
}



/*----------------------------------------------------------------------
	{C} #logo
-------------------------------- */
.logo a{
	display:block;
}

/* =====圖片式*/
.logo-photo{
	max-width:300px;
}
.logo-photo img{
	display:block; max-width:100%; height:auto;
}

/* =====文字式*/
.logo-text{
	display:inline-block;
	color:#fff;
	font-size:var(--text-lg); font-weight:600; line-height:1.3;
}



/*----------------------------------------------------------------------
	{C} #menu
-------------------------------- */
.menu{
	display:none;
}
@media (min-width:992px){
	.menu{
		display:flex; flex-wrap:wrap;
		justify-content:flex-end;
		gap:var(--spacing-xs);
	}
}

.menu .menulink a{
	position:relative;
    display:block;
    color:#000;
    font-size:var(--text-base); font-weight:600; line-height:1.5;
    padding:var(--spacing-2xs) var(--spacing-xs);
    /*transition:transform 0.2s ease;*/
}
.menu .menulink a:hover{
	color:#fff;
    /*transform:translateY(-3px);*/
}

.menu .menulink a .menu-subtext{
	display:none;
}



/*----------------------------------------------------------------------
	{C} #sign_hamburger [三選單圖樣]
-------------------------------- */
.sign_hamburger{
	position:relative;
	display:block;
	width:100%; height:100%;
}
.sign_hamburger:before,
.sign_hamburger:after,
.sign_hamburger-line{
	position:absolute; left:0; top:0; content:"";
	width:100%; height:2px;
	margin-top:-1px;
	background:#333;
	border-radius:2px;
	transition:top 0.3s ease-in-out , transform 0.3s ease-in-out;
}
.sign_hamburger:before{ top:20%; }
.sign_hamburger:after{ top:80%; }
.sign_hamburger-line{ top:50%; }

.sign_hamburger.is-open:before{
	top:50%;
	-webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
.sign_hamburger.is-open:after{
	top:50%;
	-webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}
.sign_hamburger.is-open .sign_hamburger-line{
	opacity:0;
}




/*----------------------------------------------------------------------
	{C} #navbar_toggler [側邊隱藏區塊-觸發鈕]
-------------------------------- */
.navbar_toggler{
	position:relative;
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:flex-end;
	
	width: 60px; height:60px;
	margin: 0 0 0 auto;
	
	/*取消連結的醒目點選標示*/
	-webkit-tap-highlight-color: transparent;
}
.navbar_toggler:before{
	position:absolute; z-index:-1; top:0; left:0; content:"";
	width:100%; height:100%;
    
	background-color:var(--color-primary);
	
    -webkit-mask-position: center right;
			mask-position: center right;
    
    -webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
    
    -webkit-mask-size: cover;
			mask-size: cover;
			
    -webkit-mask-image: url(../images/web-10.svg);
			mask-image: url(../images/web-10.svg);
}
.navbar_toggler .navbar_toggler-icon,
.navbar_toggler .navbar_toggler-text{
	display:block;
	line-height:1;
}
.navbar_toggler .navbar_toggler-icon{
	width:26px; height:30px;
	margin-left:auto; margin-right:auto;
}
.navbar_toggler .sign_hamburger:before, 
.navbar_toggler .sign_hamburger:after, 
.navbar_toggler .sign_hamburger-line{
	height:4px;
	background:var(--color-on-primary);
}
.navbar_toggler .navbar_toggler-text{
	display:none;
	/*font-size:var(--text-md); font-weight:600;
	color:var(--color-one);*/
}



/*----------------------------------------------------------------------
	{C} #header
-------------------------------- */
.header{
	position:absolute; z-index:900; top:0; left:0;
	width:100%; height:auto; 
	background:rgba(var(--color-primary-rgb),0.5);
	/*background:rgba(255,255,255,0.8);*/
	box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.header_row{
	display:flex; flex-wrap:wrap;
	align-items:center;
}

.header_main{
	padding:var(--spacing-sm) 0;
}
.header_main .header_row{
	align-items:center;
}
.header_main .header-left{
	flex:1 1 auto;
    width:1%; min-width:0;
}
.header_main .header-center{
	display:none;
}
.header_main .header-right{
	width:80px;
}
@media (min-width:992px){
	.header_main .header-left{
		flex:none;
		width:250px;  min-width:auto;
		margin-right:var(--spacing-lg);
	}
	.header_main .header-center{
		display:block;
		flex:1 1 auto;
    	width:1%; min-width:0;
	}
	.header_main .header-right{
		display:none;
	}
}


/*----------------------------------------------------------------------
	#header_fixed.is-sticky [卷軸下捲時固定]
-------------------------------- */
/*.header_main.is-sticky{
	position:fixed; z-index:900; top:0; left:0;
	width:100%; height:auto; 
	background:rgba(var(--color-primary-rgb),1);
	box-shadow:0 3px 6px rgba(0,0,0,0.3);
}
@media (min-width:992px){
	.header_main.is-sticky{
		display:none;
	}
}*/

.header_main.is-scroll{
	background:rgba(var(--color-primary-rgb),0.95);
	box-shadow:0 2px 6px rgba(0,0,0,0.1);
}
.header_main.is-scroll .language_box{
	display:none;
}




/*----------------------------------------------------------------------
	#logo [in header]
-------------------------------- */
.header .logo{
	margin:var(--spacing-xs) 0;
}




/*----------------------------------------------------------------------
	{C} #marquee [跑馬燈] [use swiper js]
-------------------------------- */
.marquee-wrap{
	margin:1rem 0;
}

.marquee{
	position:relative;
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:1rem;
	
	background:rgba(var(--color-primary-rgb),0.05);
	border:1px solid rgba(var(--color-primary-rgb),0.2);
	border-radius:5px;
	padding:0.25rem 0.5rem;
	overflow:hidden;
}
/*.marquee:before{
	position:absolute; z-index:-1; top:0; left:0; content:"";
	width:100%; height:100%;
    background-color: var(--color-secondary);

    -webkit-mask-position: center;
			mask-position: center;
    
    -webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
    
    -webkit-mask-size: cover;
			mask-size: cover;
			
    -webkit-mask-image: url(../images/web-06.svg);
			mask-image: url(../images/web-06.svg);
	opacity:0.15;
}*/
/*.marquee:hover{
	background:rgba(255,255,255, 0.4);
}*/
.marquee-title{ display:none; }
.marquee-icon{}
@media (min-width:992px){
	.marquee-title{ display:block; }
	.marquee-icon{ display:none; }
}
.marquee_main{
	flex:1 1 auto;
	width:1%; min-width:0;
}

/* ===== 跑馬燈-標題 */
.marquee-title{
	position:relative;
	background:#E94847;
	border-radius:3px;

	font-size:0.875rem; font-weight:600;
	color:#fff;
	text-align:center;

	padding:0.25rem 0.5rem;
}
.marquee-title:before{
	position:absolute; top:50%; right:-5px; content:"";
	width:0; height:0;
	margin-top:-6px;

	border-width:6px 0 6px 6px;
	border-style:solid;
	border-color:transparent;

	border-left-color:#E94847;
}

/* ===== 跑馬燈-icon */
.marquee-icon{
	width:34px; height:34px;
	background:#E94847;
	border:2px solid #fff;
	border-radius:50%;
}
.marquee-icon .iconsvg:before{
	background-color:#fff;

	-webkit-mask-size: 80% 80%;
			mask-size: 80% 80%;
}

/* 必須限制 swiper 容器的高度 */
.swiper-marquee {
	height: 40px; /* 必須等於或小於 marquee-text 的高度 */
	overflow: hidden;
}

.marquee-text{
	height:40px;
	font-size:1.125rem; font-weight:600;
	line-height:40px;
}
.marquee-text a{ 
	display:block; 
	color:#000;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.marquee-text a:hover{
	color:var(--color-primary);
}






/*----------------------------------------------------------------------
	{C} {idx} #secbox_idx [首頁區塊]
-------------------------------- */
.secbox_idx .secbox_bg{
	padding: var(--spacing-2xl) 0;
}



/*----------------------------------------------------------------------
	{C} {idx} #heading_sec [首頁大標]
-------------------------------- */
.heading_sec{
	display: flex; flex-direction: column;
    align-items: center; justify-content: center;
	
	margin-bottom:var(--spacing-lg);
}

.heading_sec .heading-subtext{
	/*display:none;*/
	order:1;
	
	position:relative;
	font-size:var(--text-base);
	font-weight:300; line-height:1; letter-spacing:3px;
	font-weight:600;
    color:var(--color-primary);
	writing-mode: vertical-rl;
	padding-bottom:62px;
	margin-bottom:var(--spacing-sm);
}
.heading_sec .heading-subtext:before{
	position:absolute; bottom:0; left:50%; content:"";
	width:20px; height:60px;
	margin-left:-10px;
    background-color: var(--color-primary);

    -webkit-mask-position: center;
			mask-position: center;
    
    -webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
    
    -webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
			
    -webkit-mask-image: var(--dec-heading-subtitle);
			mask-image: var(--dec-heading-subtitle);
			
}

.heading_sec .heading-text{
	order:2;
	
	position:relative;
	font-size:var(--text-4xl);
    font-weight:600;
    color: #000;
	text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}
.heading_sec .heading-text:before{	
	position: absolute; z-index:-1; top: 0; left: 50%; content: "";
	width:200px; height:80px;
	margin-left:-100px;
    background-color: var(--color-tertiary);

    -webkit-mask-position: center;
			mask-position: center;
    
    -webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
    
    -webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
			
    -webkit-mask-image: var(--dec-heading-title);
			mask-image: var(--dec-heading-title);
}
@media (min-width:992px){
	.heading_sec{
		margin-bottom:var(--spacing-xl);
	}
}





/*----------------------------------------------------------------------
	#swiper js
-------------------------------- */
.swiper-slide {
	width: 100%; /* 這是 mobile first 的預設 */
}

.swiper-pagination{
}
.swiper-pagination-bullet{
	vertical-align:middle;
	width:10px; height:10px;
	background: #ccc;
	margin:2px;
}
.swiper-pagination-bullet:hover{
	background:#fff;
	 opacity: 1;
}
.swiper-pagination-bullet-active {
	width:12px; height:12px;
    background: #fff;
    opacity: 1;
}






/* 避免載入時閃爍與確保初次進場動畫 */
/* 在 JS 尚未加上 data-aos 屬性前，強制將目標隱藏 */
/*.enable-aos .aos-target:not([data-aos]) {
	opacity: 0;
}*/






/* ===== 輪播圖 [use swiper js] */
.banner-container{
	position:relative;
}
/* 確保 swiper 容器有明確的高度或隨內容撐開 */
.swiper-banner {
	width: 100%;
	height: auto;
}
.banner-next, 
.banner-prev {
	position:absolute; z-index:10; top:50%;
	width: 60px; height: 100%;
	transform:translate(0,-50%);
	transition: all 0.3s ease;
}
.banner-next { right: 0; }
.banner-prev { left: 0; }

.banner-next:before, 
.banner-prev:before{
	position:absolute; z-index:1; top:50%; left:50%; content:"";
	width:40px; height:40px;
	
	background-color:#fff;
	
	-webkit-mask-position:center;
			mask-position:center;
	
	-webkit-mask-repeat:no-repeat;
			mask-repeat:no-repeat;
	
	-webkit-mask-size:100% 100%;
			mask-size:100% 100%;
			
	transform:translate(-50%,-50%);
}
.banner-next:before{
	-webkit-mask-image:url(../images/icon/icon_arrow_right.svg);
			mask-image:url(../images/icon/icon_arrow_right.svg);
}
.banner-prev:before{
	-webkit-mask-image:url(../images/icon/icon_arrow_left.svg);
			mask-image:url(../images/icon/icon_arrow_left.svg);
}
@media (min-width:992px){
	.banner-next:hover, 
	.banner-prev:hover{
		background:rgba(255,255,255,0.1);
	}
	.banner-next:hover:before, 
	.banner-prev:hover:before{
		background-color:#fff;
	}
}

.idx-banner img{
	display:block; max-width:100%; height:auto;
    margin:0 auto;
}