@charset "utf-8";

/*
========================
Variable
========================
*/
:root {
	--theme-bg-color:   #000000;
	--light-bg-color:   #f7f5f1;
	--midtone-bg-color:   #edebe7;
	--theme-text-color:   #000000;
	--theme-border-color:   #000000;
	--default-text-color: #363636;
	--dark-text-color: #242424;
	--light-text-color: #444444;
	--soft-text-color: #808080;
	--softer-text-color: #a19e98;
	--secondary-text-color: #e16b35;
	--dark-border-color: #999999;
	--light-border-color: #cccccc;
	--soft-border-color: #bbbbbb;
	--theme-button-color: #000000;
	--dark-button-color: #3d3c3c;
	--thumb-mask: #4162a50f;
	--scrollbar-track: #e2e2e2;
	--scrollbar-thumb: #999999;
	--form-row-gap: 15px;
	--form-input-height: 32px;
	--form-input-text-size: 1em;
	--form-input-border-radius: 2px;
	--form-select-height: 32px;

	--nav-edge-offset: 40px;
	--nav-fontsize: 1.33em;
	--nav-letter-spacing: .7em;
	--nav-filter-backdrop: 3px;
	--nav-open-speed: .5s;
	--nav-bg-color: rgba(252, 252, 252, 0.92);
	--nav-sub-label-width-west: 140px;
	--nav-sub-label-width-east: 220px;
	--nav-top-fontsize: 2.7em;
	--nav-sub-fontsize: 1.18em;
	--nav-sub-item-gap: 15px;
	--nav-sub-item-padding: 5px 8px 0 8px;
	--nav-sub-menu-fadeout: 25px;

	--detail-bg-color: rgba(252, 252, 252, 0.92);

	--page-loading-fontsize: 48px;

	--cursor-size: 15px;
	--cursor-ripple-size: 90px;

	--cover-slogan-fontsize: 2.5rem;
	--cover-slogan-line-height: 1.6em;

	--fancybox-zIndex: 999999;

}

/*
========================
Elements
========================
*/
*						{ box-sizing:border-box; }
html, body				{ cursor: none; scroll-behavior: smooth; }

a						{ color:inherit; text-decoration:none; transition: all .2s; cursor: none;}
strong					{ font-weight:500; }
em						{ font-style:italic; }

/** Table **/
table					{ width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table th,
table td				{ padding:8px; border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
caption					{ text-align:left; margin-bottom:10px; font-size:1.2em; }

/** Image **/
img						{ max-width:100%; }
img.grayscale 			{ filter: grayscale(100%); transition: filter .4s; }
img.grayscale:hover 	{ filter: grayscale(0%); }

/** Header **/
h1 						{ font-size: 2em; font-weight:500; }
h2 						{ font-size: 1.6em; font-weight:500; }
h3 						{ font-size: 1.17em; font-weight:500; }
h4 						{ font-size: 1.12em; font-weight:500; }
h5 						{ font-size: .83em; font-weight:500; }
h6 						{ font-size: .75em; font-weight:500; }

/** Article **/
article h1						{ margin-bottom: 1em;}
article	.contents				{ margin: 30px 0; }

/** Form **/
form							{ }
form fieldset					{ }
form legend						{ font-size:1.33em; margin-bottom:1.5em;  }
form .row						{ margin-bottom:var(--form-row-gap); position:relative; }
form .col						{ width:48%; }
form .label						{ margin-bottom:10px; }
form input[type="text"],
form input[type="date"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form textarea,
form select						{ width:100%; height: var(--form-input-height); padding:1em .2em; font-size: var(--form-input-text-size); background:#fff; border:1px solid #d2d2d2; border-radius:var(--form-input-border-radius); font-family:inherit; outline:none; -webkit-appearance: none; -moz-appearance: none; }
form textarea					{ height:140px; padding:.5em .2em; }
form select						{ padding:5px; }
form button						{ font-family:inherit; outline:none; }
form button:disabled			{ opacity: .5; pointer-events: none;}
form .error						{ display:block; text-align:right; margin-top:5px; color:#d54449; font-size:.96em; line-height:1.25em; }
form .result					{ margin-top:20px; color:#666; line-height: 1.4em; text-align: center; }
form .result:empty				{ display: none;}
form .loading-icon 				{ margin-left: 20px; color: #888; display: none; }
form.loading .loading-icon		{ display:unset;}
button.text-button 				{ border: none; background: none; color: #666; display: inline-block; /*cursor: pointer;*/ }
button.text-button:hover 		{ color: #000;}
input:-webkit-autofill 			{ box-shadow: 0 0 0 1000px transparent inset !important; transition: background-color 5000s ease-in-out 0s; /* 防止閃爍 */ }

.custom-cursor 					{ display: none; position: fixed; top: -20px; left: -20px; width: var(--cursor-size); height: var(--cursor-size); background-color: var(--secondary-text-color); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);}
@media (hover: hover) and (pointer: fine) {
  .custom-cursor {
    display: block;
  }
}

/** Custom scrollbar **/
.custom-scrollbar::-webkit-scrollbar 							{ width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track 						{ background: var(--scrollbar-track); }
.custom-scrollbar::-webkit-scrollbar-thumb 						{ background: var(--scrollbar-thumb); }
.custom-scrollbar::-webkit-scrollbar-thumb:hover 				{ background: var(--scrollbar-thumb); }

/** Select2 **/
.select2-container 																		{ width: 100% !important; }
.select2-container--default .select2-selection--single 									{ height: var(--form-select-height); border: 1px solid #d2d2d2; }
.select2-container--default .select2-selection--single .select2-selection__rendered 	{ line-height: var(--form-select-height); padding-left: 12px; color: var(--main-content-text-color); }
.select2-container--default .select2-selection--single .select2-selection__arrow 		{ height: var(--form-select-height); width: var(--form-select-height); }

/** fr-view **/
.fr-view				{ line-height:1.5em;}
.fr-view h1 			{ font-size: 1.4em; }
.fr-view h2 			{ font-size: 1.3em; }
.fr-view h3 			{ font-size: 1.2em; }
.fr-view h4 			{ font-size: 1.1em; }
.fr-view ul				{ list-style:inherit; padding-left:.8em; }
.fr-view ul li 			{ list-style:inherit; }
.fr-view ol				{ list-style:inherit; padding-left:15px;}
.fr-view ol li 			{ list-style:inherit; }
.fr-view img			{ /*cursor:default !important;*/ }
.fr-view a > img		{ /*cursor:pointer !important;*/ }
.fr-view a 				{ text-decoration:underline; }
.fr-view sup 			{ line-height:0; }
.fr-view blockquote		{ border-left:4px solid #aaa; background:#f5f5f5; color:#555; padding:1.1em; }

/** LogosDistort **/
.ld-smart-container .ld-transform-target,
.ld-smart-container .ld-3d-parent,
.ld-smart-container .ld-3d-object 				{ pointer-events: inherit;}


/** LightGallery **/
.lg-backdrop									{ background-color: #000;}

/** Fancybox **/
.fancybox__viewport.is-draggable 				{ cursor: none;}
.fancybox__backdrop								{ background-color: var(--nav-bg-color); backdrop-filter: blur(var(--nav-filter-backdrop)); }
.fancybox__caption 								{ color: var(--default-text-color); cursor: none;}
.fancybox__footer								{ background: none !important;}
.fancybox__footer .fancybox__caption			{ background-color: rgba(255,255,255,.86); }
.f-button 										{ background: none !important; cursor: none;}
.f-button svg 									{ display: none; }
.f-button::after								{ font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 24px; color: #888; }
.f-button[data-fancybox-close]					{ position: fixed; right: var(--nav-edge-offset); top: var(--nav-edge-offset); width: auto !important; height: auto !important;  }
.f-button[data-fancybox-close]::after			{ content: '\f00d'; } 
.f-button.is-prev 								{ left: var(--nav-edge-offset) !important; width: auto !important; height: auto !important; }
.f-button.is-next 								{ right: var(--nav-edge-offset) !important; width: auto !important; height: auto !important; }
.f-button.is-prev::after 						{ content: '\0f177'; }
.f-button.is-next::after 						{ content: '\0f178'; }
.f-button:hover::after							{ color: var(--secondary-text-color);}

.caption-title									{ display: block; text-align: center; max-width: 600px; margin: auto auto 5px auto; font-size: 1.02em; font-weight: 500; }
.caption-contents								{ display: block; text-align: center; max-width: 600px; margin: auto;}

/** Swiper **/
.swiper-slide 									{ width: 100%;}
.swiper-button-next,
.swiper-button-prev 							{ cursor: none; outline: none; margin: 0 !important; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background-color:transparent; transform: translateY(-50%); }
.swiper-button-next:after, 
.swiper-button-prev:after 						{ font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 21px; color: #888; transition: color .2s;}
.swiper-button-next:after 						{ content: '\0f178'; }
.swiper-button-prev:after 						{ content: '\0f177'; }
.swiper-button-next:hover:after,
.swiper-button-prev:hover:after 				{ color: var(--secondary-text-color);}
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled		{ pointer-events: unset; display: none;}
.swiper-pagination-bullet-active				{ background-color: #222;}
.swiper.swiper-disabled							{ height: auto; margin: 0 !important;}
.swiper.swiper-disabled .swiper-wrapper			{ display: block; height: auto !important; }
.swiper.swiper-disabled .swiper-slide			{ display: block; padding: 0 !important; margin-bottom: 5px;} 
.swiper.swiper-disabled .swiper-pagination,
.swiper.swiper-disabled .swiper-button-next,
.swiper.swiper-disabled .swiper-button-prev		{ display: none;}

/** Flex layout **/
.flex         				      		{ display:flex; }
.flex-right  				  	 		{ display:flex; justify-content: flex-end; }
.flex-center  				  	 		{ display:flex; align-items:center; }
.flex-stretch 				  	 		{ display:flex; align-items:stretch; }
.flex-top 				 	  			{ display:flex; align-items:flex-start; }
.flex-bottom 				 	  		{ display:flex; align-items:flex-end; }
.flex-justify 				  	 		{ display:flex; justify-content:space-between; }
.flex-evenly  				  	 		{ display:flex; justify-content:space-evenly; }
.flex-middle  				  	 		{ display:flex; justify-content: center; }
.flex-reverse 				 	  		{ display:flex; flex-direction:row-reverse; }
.flex-vertical 				 	  		{ display:flex; flex-direction:column; }
.flex-wrap 				 	  			{ display:flex; flex-wrap:wrap; }

/** Column layout **/
.column-2 							    { display:flex; flex-wrap:wrap; }
.column-2 .col-item 				    { width:45%; margin-top:10%; margin-right: 10%; }
.column-2 .col-item:nth-child(2n)	    { margin-right:0; }
.column-2 .col-item:nth-child(-n+2)    	{ margin-top:0; }

.column-3 								{ display:flex; flex-wrap:wrap; }
.column-3 .col-item 					{ width:30%; margin-right:5%; margin-top:5%; }
.column-3 .col-item:nth-child(3n)       { margin-right:0; }
.column-3 .col-item:nth-child(-n+3)     { margin-top:0; }

.column-4 								{ display:flex; flex-wrap:wrap; }
.column-4 .col-item			 			{ width:22%; margin-right:4%; margin-top:4%; }
.column-4 .col-item:nth-child(4n) 		{ margin-right:0; }
.column-4 .col-item:nth-child(-n+4) 	{ margin-top:0; }

/** Menu horizontal **/
.menu-horizontal						{ margin-bottom: 30px; }
.menu-horizontal li						{ display: inline-block; margin-right: 30px;}
.menu-horizontal li.active				{ text-decoration: underline; }

/** Image list **/
.image-list li							{ margin-top:15px; }
.image-list li:first-child				{ margin-top:0; }

/** Thumb **/
.thumb,
.thumb-sq,
.thumb-rect,
.thumb-banner,
.thumb-vl								{ width: 100%; overflow:hidden; position:relative; display: block; }
.thumb-sq picture,
.thumb-rect picture,
.thumb-banner picture,
.thumb-vl picture 						{ position:absolute; left:0; top:0; width:100%; height:100%; }
.thumb img,
.thumb-sq img,
.thumb-rect img,
.thumb-banner img,
.thumb-vl img							{ width:100%; transition:all .6s; }
.thumb.zoom:hover img,
.thumb-sq.zoom:hover img,
.thumb-rect.zoom:hover img,
.thumb-banner.zoom:hover img,
.thumb-vl.zoom:hover img				{ transform:scale(1.1, 1.1); }
.thumb-sq								{ padding-top:100%; }
.thumb-rect								{ padding-top:67%; }
.thumb-banner							{ padding-top:46.875%; }
.thumb-vl								{ padding-top:140%; }
.thumb-sq img,
.thumb-rect img,
.thumb-banner img,
.thumb-vl img							{ position:absolute; left:0; top:0; right:0; bottom:0; width:auto; height:auto; max-width:100%; max-height:100%; margin:auto;}
.thumb-fill img 						{ width: 100%; height: 100%; object-fit: cover;}

/** Thumb info **/
.thumb-info								{ padding: 15px 0;}
.thumb-info	.subtitle					{ margin-bottom: 8px; }
.thumb-info	.title						{ font-size: 1.2em; line-height: 1.2em;}
.thumb-info	.summary					{ margin-top: 10px; color: #888;}

/** Zoom button **/											
.zoom-button							{ position: absolute; right: 15px; top: 15px; opacity: 0; transition: opacity .4s; /*cursor: pointer;*/ }
.is-selected .zoom-button				{ opacity: 1; transition: opacity .4s .6s; }

/** Play button **/
.play-button							{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:block;
											width:60px; height:60px; background:#fff; border-radius:50%; opacity:.85;
											transition:opacity .4s; /*cursor: pointer;*/ z-index: 1; }
.play-button:after						{ content:''; position:absolute; left:50%; top:50%; transform:translate(-20%, -50%);
											border-left:12px solid var(--secondary-text-color); border-right:12px solid transparent;
											border-top:7px solid transparent; border-bottom:7px solid transparent;  }											
.play-button:hover						{ opacity:1; }

/** Button **/
.button,
.button-md,
.button-lg							  	{ display:inline-block; padding:.65em 1em .8em 1em; transition:background .2s; white-space:nowrap;
											background:#222; color:#fff; border:none; border-radius:2px; text-align: center; text-decoration: none !important; }
.button									{ font-size:1em; }
.button-md				  	  			{ font-size:1.1em; padding:1em; }									
.button-lg				  	  			{ font-size:1.4em; padding:1em; }									
.button i			   		  			{ margin-left:.8em; }
.button-wrapper							{ display:block; }
.button.disabled,
.button-md.disabled,
.button-lg.disabled						{ pointer-events: none; background:#ccc; color:#888;}																						
.button.full,
.button-md.full,
.button-lg.full							{ width: 100%;}

/** Link **/
.link									{ font-size:1.05em; }
.link i									{ margin-left:.8em; }
.link-wrapper				  			{ display:block; }

/** Tag **/
.tag-list								{ padding: 8px 0;}
.tag-list .tag							{ display:inline-block; margin:0 2px 5px 0; }
.tag-list .tag a						{ display:inline-block; padding:.36em 1em; background:#aaa; color:#fff; border-radius:15px; font-size:.96em; white-space:nowrap; transition:all .2s; }
.tag-list .tag a:hover,
.tag-list .tag a.active					{ background:#222; color:#fff; }
.tag-list .tag a i						{ margin-left:6px; font-size:12px; }

/** Breadcrumbs **/
.breadcrumbs							{ padding: 15px 0; display:flex; flex-grow:1; }
.breadcrumbs	.item					{ margin-right:18px; white-space:nowrap; }
.breadcrumbs	.item:after				{ /*font-family: "Font Awesome 5 Pro"; font-weight: 900;*/ content: "/"; margin-left:20px; font-size:12px; }
.breadcrumbs	.item:last-child		{ margin-right:0; }
.breadcrumbs	.item:last-child:after  { display:none; }

/** Dropodown menu **/
.dropdown								{ position:relative; }
.dropdown .label						{ /*cursor:pointer;*/ }
.dropdown .menu							{ z-index: 99; position:absolute; left:-10px; padding-top: 10px; display:none; }
.dropdown .menu ul						{ background: #fff; padding:5px 10px; }
.dropdown .menu li						{ margin:10px 0; white-space:nowrap; }
.dropdown:hover .menu 					{ display:block; }

/** Pagination **/
.pagination 							{ margin-top:30px; display:flex; }
.pagination a,
.pagination span 						{ padding:4px 9px; display:inline-block; line-height:normal; color:#999; }
.pagination a:hover 					{ color:#000;}
.pagination .active	span				{ color:#000; }
.pagination .prev						{ font-size:1.2em; transform:translateY(-3px); }
.pagination .next						{ font-size:1.2em; transform:translateY(-3px); }
.pagination .pager						{ display: none;}

/** Sharer **/
.social-share 							{ padding: 15px 0;}
.social-share .sharer-label 			{ margin-right: 15px;}
.social-share .sharer-icons				{ }
.social-share .jssocials-share-link 	{ border-radius: 50%; border: none !important; font-size:.8em; }
.social-share .jssocials-share-link:hover { color: #000; }

/** Toast message **/
.toast-message							{ position: fixed; left: 50%; top: 30px; max-width: 480px; transform: translateX(-50%); padding: .5em 1.2em; background: #222; color: #fff; border-radius: 15px; }

/** Confirm **/
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content { overflow: visible; color: #666; line-height: 1.2em; }

/** Misc. **/
.center									{ text-align:center; }
.clear									{ clear:both; }

/** 404 **/
.http-error								{ padding:100px 4%; text-align: center; position:fixed; left: 50%; top: 45%; transform: translate(-50%, -50%);}
.http-error .code						{ font-size: 4em ; margin-bottom: .4em; color: #999;}
.http-error	.message					{ font-size: 1.2em; font-weight: 500; color: #999; margin-bottom: 4em;}


/*
========================
Font
========================
*/
html, body 								{ font-family: "Noto Sans TC", sans-serif; font-optical-sizing: auto; font-style: normal; font-size:14px; color: var(--default-text-color); }
.deco-font 								{ font-family: "Montserrat", sans-serif; }

/*
========================
Mouse effect
========================
*/
.click-effect {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #e16b35;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    animation: ripple 0.4s ease-out forwards;
    opacity: 0.7;
    filter: blur(5px);
}

@keyframes ripple {
	to {
		width: var(--cursor-ripple-size);
		height: var(--cursor-ripple-size);
		opacity: 0;
	}
}

/*
========================
Structure
========================
*/
#container								{}
.wrapper 								{}
.inner									{ width:92%; max-width:1150px; margin:auto; position:relative; }
.inner-md								{ width:92%; max-width:800px; margin:auto; position:relative; }
.inner-sm								{ width:92%; max-width:520px; margin:auto; position:relative; }

.nav-button 							{ z-index: 1000; position: fixed; font-size: var(--nav-fontsize); letter-spacing: var(--nav-letter-spacing); transition:z-index 0s var(--nav-open-speed); }
.nav-button:hover						{ color: var(--secondary-text-color);}
.nav-button-north 						{ top: var(--nav-edge-offset); margin-left: calc(var(--nav-letter-spacing) * .4);  }
.nav-button-south 						{ bottom: var(--nav-edge-offset); margin-left: calc(var(--nav-letter-spacing) * .4); }
.nav-button-west						{ left: var(--nav-edge-offset); }
.nav-button-east 						{ right: var(--nav-edge-offset); }
.nav-button-north,
.nav-button-south 						{ left: 50%; transform: translateX(-50%);  }
.nav-button-west,
.nav-button-east 						{ top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }
.nav-button.active,
.nav-button.active-page 				{ color: var(--secondary-text-color); }

.en .nav-button 						{ letter-spacing: calc(var(--nav-letter-spacing) * .8); font-size: calc(var(--nav-fontsize) * .8); text-transform: uppercase;}

#nav-main 								{ position: relative; transition: opacity .5s;}
.nav-sub 								{ z-index: 1010; position: fixed; /*background-color:#fff;*/ transition: transform var(--nav-open-speed); background-color: var(--nav-bg-color); backdrop-filter: blur(var(--nav-filter-backdrop)); }
#nav-west,
#nav-east 								{ top:0; width: 50vw; height: 100vh; height: 100dvh; }
#nav-west								{ left: 0; transform: translateX(-100%);}
#nav-east 								{ right: 0; transform: translateX(100%);}
#nav-south 								{ z-index: 1030; bottom:0; width: 100vw; min-height: 50vh; max-height: 100vh; overflow-y: auto; transform: translateY(100%); }
#nav-south-close						{ font-size: 24px; color: #999; margin: calc(var(--nav-edge-offset) * .9) auto; text-align: center; width: 24px; transition: all .2s;  }		
#nav-south-close:hover 					{ color: var(--secondary-text-color);}	

#nav-mask 								{ visibility: hidden; opacity: 0; z-index: 1005; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; /*background-color: rgba(250, 250, 248, 0.7); backdrop-filter: blur(var(--nav-filter-backdrop));*/ transition:visibility 0s var(--nav-open-speed), opacity var(--nav-open-speed); }

body.show-nav-west,
body.show-nav-east,
body.show-nav-south 					{ overflow: hidden;}
body.show-nav-west #nav-west			{ transform: translateX(0); }
body.show-nav-east #nav-east			{ transform: translateX(0); }
body.show-nav-south #nav-south			{ transform: translateY(0); }
body.show-nav-west .nav-button-west,
body.show-nav-east .nav-button-east,
body.show-nav-south .nav-button-south	{ z-index: 1020; transition:z-index 0s; color: var(--secondary-text-color); }
body.show-nav-south .nav-button-south	{ z-index: inherit; color: inherit; }
body.show-nav-west #nav-mask,
body.show-nav-east #nav-mask,
body.show-nav-south #nav-mask 			{ visibility: visible; opacity: 1; transition:visibility 0s, opacity var(--nav-open-speed); }

body.show-nav-west #nav-west .nav-sub-container,
body.show-nav-east #nav-east .nav-sub-container,
body.show-nav-south #nav-south .nav-sub-container	{ visibility: visible; opacity: 1; transition: visibility 0s, opacity .8s var(--nav-open-speed); }

#nav-west 								{ padding: 40px calc(var(--nav-edge-offset) * 1) 40px calc(var(--nav-edge-offset) * 4);}
#nav-east 								{ padding: 40px calc(var(--nav-edge-offset) * 4) 40px calc(var(--nav-edge-offset) * 1) ;}
#nav-west .nav-sub-label 				{ width: var(--nav-sub-label-width-west); flex-grow: 0; flex-shrink: 0; }
#nav-east .nav-sub-label 				{ width: var(--nav-sub-label-width-east); flex-grow: 0; flex-shrink: 0; text-align: right;}
.nav-sub-container 						{ width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: visibility 0s, opacity .2s; }
.nav-sub-menu 							{ margin: auto 0;}
.nav-sub-menu .nav-sub-item 			{ margin: 40px 0; }
.nav-sub-menu .nav-sub-item.flex-reverse .nav-sub-label { margin-right: 0; }
.nav-sub-menu .nav-sub-label a 			{ font-size: var(--nav-top-fontsize); letter-spacing: .02em; white-space: nowrap; user-select: none; }
.nav-sub-menu .nav-sub-label.active-page { color: var(--secondary-text-color); }
.nav-sub-menu .nav-sub-swiper			{ width: calc(100% - var(--nav-sub-label-width-west)); overflow: hidden; margin: 0; }
.nav-sub-menu .swiper-wrapper			{ min-width: 100%; }
.nav-sub-menu .swiper-slide				{ width: auto; padding: var(--nav-sub-item-padding); margin-right: var(--nav-sub-item-gap);}
.nav-sub-menu .swiper-slide:last-child	{ margin-right: 0;}
.nav-sub-menu .swiper-slide a 			{ font-size: var(--nav-sub-fontsize); letter-spacing: .02em; white-space: nowrap; user-select: none; }
.nav-sub-menu .swiper-slide.selected,
.nav-sub-menu .swiper-slide.active-page { color: var(--secondary-text-color);}

@media (hover: hover) and (pointer: fine) {
  .nav-sub-menu .swiper-slide:hover { color: var(--secondary-text-color);}
}

#nav-west .nav-sub-menu .nav-sub-swiper {
  /* 建立淡出遮罩：整體可見，最後25px開始透明 */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--nav-sub-menu-fadeout)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(to right, black calc(100% - var(--nav-sub-menu-fadeout)), transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

#nav-east .nav-sub-menu .nav-sub-swiper {
  /* 左側 25px 淡出，右側完整可見 */
  -webkit-mask-image: linear-gradient(to right, transparent 0px, black var(--nav-sub-menu-fadeout));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;

  mask-image: linear-gradient(to right, transparent 0px, black var(--nav-sub-menu-fadeout));
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.swiper-slide[data-project-filter] 			{ opacity: 1; transition: opacity .2s;}
.swiper-slide[data-project-filter].disabled { opacity: 0.4; pointer-events: none; cursor: default; }

.en #nav-west .nav-sub-label 				{ width: calc(var(--nav-sub-label-width-west) * 1.5); min-width: 160px; }
.en #nav-east .nav-sub-label 				{ width: calc(var(--nav-sub-label-width-east) * 1.2); min-width: 210px; }

.nav-sub-menu .nav-sub-swiper[dir="rtl"]				{ width: calc(100% - var(--nav-sub-label-width-east)); overflow: hidden; margin: 0; }
.nav-sub-menu .nav-sub-swiper[dir="rtl"] .swiper-slide 	{ width: auto; margin-right: 0; margin-left: var(--nav-sub-item-gap);}
.nav-sub-menu .nav-sub-swiper[dir="rtl"] .swiper-slide:last-child	{ margin-left: 0;}

#language 								{ z-index: 1000; position: fixed; right: var(--nav-edge-offset); top: var(--nav-edge-offset); color: #999; font-size: 12px; letter-spacing: .04em;}
#social-links 							{ z-index: 1000; position: fixed; right: var(--nav-edge-offset); bottom: var(--nav-edge-offset); color: #ccc;  }
#social-links ul 						{ flex-direction: column; gap: 14px;}
#social-links li 						{ margin: 0 !important;}

@media (hover: hover) and (pointer: fine) {
#social-links a:hover 					{ color: var(--secondary-text-color);}
}

/*
========================
Header
========================
*/
#header-wrapper 						{ }
#header-wrapper h1 .zh					{ margin-right: .5em;}


/*
========================
Nav
========================
*/
#nav-wrapper							{ }


#menu-button 							{ display: none;}
#menu-close								{ display: none;}
#menu-back-button						{ display: none;}

/*
========================
Main
========================
*/
#main-wrapper							{}
#main-inner								{}

/*
========================
Footer
========================
*/
#footer-wrapper							{}
#footer-inner							{}

#nav-contact							{ width: 92%; max-width: 480px; margin: 60px auto 0 auto;}
#nav-contact input,
#nav-contact textarea 					{ border: none; border-bottom: 1px solid var(--dark-border-color); background: none !important; }
#nav-contact .title-zh					{ font-size: 1.33em; font-weight: 500; letter-spacing: .1em; margin-bottom: 10px;}
#nav-contact .title-en					{ font-size: .82em; letter-spacing: .33em; margin-bottom: 30px;}
#nav-contact .contact-info 				{ margin-bottom: 25px;}
#nav-contact .contact-info .lt,
#nav-contact .contact-info .rt			{ width: 48%;}
#nav-contact .contact-info address		{ margin: 8px 0; line-height: 1.4em;}
#nav-contact .contact-info p 			{ margin: 8px 0; }
#nav-contact .contact-info a:hover 		{ color: var(--secondary-text-color);}
#nav-contact .submit-wrapper			{ margin-bottom: 0;}
#nav-contact button 					{ min-width: 150px; background-color: var(--secondary-text-color);}

/*
========================
Loading icon
========================
*/

#loading-progress 						{ z-index: 20; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; background-color: #fff;}
#loading-progress-original 				{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(72vw, 54vh, 450px); aspect-ratio: 1/1; background: url(../assets/cover/stamp-gray.png) no-repeat left top; background-size: contain; }
#loading-progress-filled 				{ position: absolute; left: 0; top: 0; width: 100%; height: 0; background: url(../assets/cover/stamp-fill.png?ver=1) no-repeat left top; background-size: 100%; transition: height 2s; }

#page-loading 							{ z-index: 3000; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--page-loading-fontsize); color: #aaa; opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s; pointer-events: none;}
body.page-loading #page-loading			{ opacity: .5; visibility: visible; transition: opacity 1s, visibility 0s;}


/*
========================
Index
========================
*/

#cover-slider,
#cover-slider .swiper-wrapper,
#cover-slider .swiper-slide				{ width: 100vw; height: 100vh; height: 100dvh; background-color: #fff; overflow: hidden; position: relative; }
#cover-slider .swiper-slide .layers	{ width: 100%; height: 100%; transform: scale(1.08, 1.08); transition: transform 6s; }
#cover-slider .swiper-slide-active .layers { transform: scale(1, 1);}
#cover-slider .swiper-slide .layer,
#cover-slider .swiper-slide .layer a,
#cover-slider .swiper-slide picture 	{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
#cover-slider .swiper-slide .image-filled img { object-fit: cover; width: 100%; height: 100%;}
#cover-slider .swiper-slide .slide-image{ display: block; object-fit: contain; width: 87%; height: 87%; }
#cover-slider .swiper-slide .info 		{ z-index: 9; position: absolute; left: 50%; bottom:calc(var(--nav-edge-offset) * 3); padding: 15px 50px;  width: max-content; max-width: 800px; transform: translateX(-50%); border-radius: 0; background-color: #f2f2f099; backdrop-filter: blur(4px); }
#cover-slider .swiper-slide .pager 		{ margin-bottom: 8px; font-size: 1rem; letter-spacing: .3em;}
#cover-slider .swiper-slide .desc 		{ font-size: 1rem; line-height: 1.5em; color: #666;}
#cover-slider .swiper-slide .desc strong{ font-size: 1.02rem; color: var(--default-text-color);}
#cover-slider .swiper-slide .mouse-icon { width: 32px; display: block; margin: 8px auto 0 auto; opacity: .5;}
#cover-slogan 							{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%); width: 90%; max-width: 1200px; font-size: var(--cover-slogan-fontsize); font-weight: 300; line-height: var(--cover-slogan-line-height);}
#cover-slogan strong 					{ font-weight: normal; color: var(--secondary-text-color); border-bottom: 2px solid var(--secondary-text-color); }


/*
========================
Works
========================
*/

#work-list 								{ width: calc((100vw - var(--nav-edge-offset) * 2) * .86); margin: calc(var(--nav-edge-offset) + 90px) auto calc(var(--nav-edge-offset) + 50px) auto ; transition: opacity .2s, visibility 0s;}
#work-list .grid-sizer,
#work-list .grid-item 					{ width: 31.33333333333333%; margin-bottom: 3%; }
#work-list .gutter-sizer 				{ width: 3%; }
#work-list .thumb img 					{ object-fit: cover; width: 100%; height: 100%;}
#work-list .mask 						{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #e16b35DD; opacity: 0; transition:all .6s; }
#work-list .mask .info 					{ position: absolute; left: 25px; bottom:25px; right: 25px; color: #fff; }
#work-list .mask .info .title 			{ font-size: 1.22em; font-weight: 500; line-height: 1.3em; }
#work-list .mask .info .subtitle 		{ font-size: 1.05em; margin-top: 10px;}
#work-list .mask .info .subtitle span:not(:last-child)::after { content: '/'; margin: 0 8px;}

@media (hover: hover) and (pointer: fine) {
  #work-list .mask:hover {
    opacity: 1;
  }
}
#no-match-works 						{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #bbb; font-size: 1.7em; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }

.no-match-item #work-list 				{ opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.no-match-item #no-match-works 			{ opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s;}

#mobile-works-filter-button				{ display: none;}

/*
========================
Work detail
========================
*/

body.show-detail						{ overflow: hidden;}
#detail-holder							{ z-index: 2000; position: fixed; left: 0; top: 0; background-color: #fff; width: 100vw; height: 100vh; display: none; }
#detail-content                         { display: flex; flex-direction: column; width: 100%; height: 100vh; height:100dvh ; }
#detail-top, 							
#detail-bottom							{ padding: var(--nav-edge-offset) 0; text-align: center; }
#detail-top 							{ margin-left: calc(var(--nav-edge-offset) * 3); margin-right: calc(var(--nav-edge-offset) * 3);}
#detail-top h1 							{ letter-spacing:.1em; line-height: 1.25em; margin: auto; font-size: var(--nav-fontsize); font-weight: 400; color: var(--light-text-color); }	
#detail-body 							{ flex-grow: 1;}		
#detail-info-open-button				{ letter-spacing:var(--nav-letter-spacing); font-size: var(--nav-fontsize); transition: all .2s; }			
#detail-info-open-button:hover 			{ color: var(--secondary-text-color);}	
#detail-info-close-button				{ font-size: 24px; color: #999; margin: var(--nav-edge-offset) auto 0 auto; text-align: center; width: 24px; transition: all .2s;  }		
#detail-info-close-button:hover 		{ color: var(--secondary-text-color);}	
#detail-close-button 					{ position: fixed; left: var(--nav-edge-offset); top: var(--nav-edge-offset); color: #999; font-size: 24px; }
#detail-close-button:hover 				{ color: var(--secondary-text-color);}	
#detail-info							{ z-index: 2010; backdrop-filter: blur(var(--nav-filter-backdrop)); position: fixed; left: 0; bottom:0; right: 0; max-height: 100vh; max-height: 100dvh; overflow-y: auto; background-color: var(--detail-bg-color); padding: calc(var(--nav-edge-offset) * 2) 0 var(--nav-edge-offset) 0; transform: translateY(100%); transition: transform var(--nav-open-speed); }
body.show-detail-info #detail-info		{ transform: translateY(0);}

.en #detail-info-open-button			{ letter-spacing: calc(var(--nav-letter-spacing) * .8); font-size: calc(var(--nav-fontsize) * .8); text-transform: uppercase; }

#work-slider-pager						{ position: fixed; right: var(--nav-edge-offset); top: var(--nav-edge-offset); color: #999; width: auto; left: auto; bottom:auto; }
#work-slider-pager .swiper-pagination-current { margin-right: 5px;}
#work-slider-pager .swiper-pagination-total { margin-left: 5px;}

#work-slider 							{ height: 100%; }
#work-slider .thumb 					{ height: 100%; position: relative; overflow: visible;}
#work-slider img 						{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; transition: all .8s; }
#work-slider .work-slider-button		{ position: fixed; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; line-height: 36px; }
#work-slider #work-slider-prev 			{ left: var(--nav-edge-offset);}
#work-slider #work-slider-next 			{ right: var(--nav-edge-offset); }
#work-slider .swiper-slide				{ opacity: .25; transition: opacity .8s;}
#work-slider .swiper-slide-active 		{ opacity: 1;}
#work-slider .swiper-slide-prev img 	{ left: 100%; transform: translate(calc(-100% + 60px), -50%); }
#work-slider .swiper-slide-next img 	{ left: 0; transform: translate(-60px, -50%); }

#work-info .fr-view						{ line-height: 1.7em; text-align: justify;}
#work-info #work-meta  					{ margin-top: 10px;}
#work-info #work-meta .row 				{ display: flex; align-items: center; margin-bottom: 20px;}
#work-info #work-meta p:nth-child(1) 	{ width: 120px; margin-right: 20px; font-weight: 500; }
#work-info #work-meta p:nth-child(2) 	{ flex-grow: 1;}


/*
========================
Studio
========================
*/

#studio-content 						{ padding: calc(var(--nav-edge-offset) * 2 + 10vh) 0;}
#studio-content h2 						{ letter-spacing: .08em; margin-bottom: 40px;}
#studio-about .fr-view 					{ font-size: 1.05em; margin-bottom: 60px; text-align: justify;}

.publication-list 						{ border-top:1px solid var(--light-border-color); }
.publication-list li 					{ border-bottom:1px solid var(--light-border-color); }
.publication-list li .item-label 		{ display: flex; align-items: center; gap: 5px; padding: 15px 0; }
.publication-list li a:hover,
.publication-list li .fancybox:hover 	{ color: var(--secondary-text-color);}
.publication-list li .date 				{ width: 80px; flex-shrink: 0; flex-grow: 0;}
.publication-list li .title 			{ flex-grow: 1;}