@charset "utf-8";

/*
========================
Variables
========================
*/
:root {
	--theme-color: #6aa965; 
	--theme-color-dark: #548b52; 
}

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

a						{ color:inherit; text-decoration:none; }
strong					{ font-weight:bold; }
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%; }

/** Header **/
h1 						{ font-size: 2em; }
h2 						{ font-size: 1.7em; margin-bottom: 1.5em; }
h3 						{ font-size: 1.4em; margin-bottom: 1.25em; }
h4 						{ font-size: 1.12em; }
h5 						{ font-size: .83em; }
h6 						{ font-size: .75em; }
h1, h2, h3,
h4, h5, h6 				{ font-weight:500; color:#222; }


/** Section **/
section 						{ padding: 50px 0; border-bottom: 1px solid #ddd;}

/** 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:20px; position:relative; }
form .col						{ width:48.5%; }
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: 42px; padding:.6em 1em; background:#f7f7f7; border:1px solid #d2d2d2; border-radius:4px; font-family:inherit; outline:none; -webkit-appearance: none; -moz-appearance: none; }
form textarea					{ height:180px; }
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; }
button.text-button 				{ border: none; background: none; color: #666; display: inline-block; cursor: pointer;}
button.text-button:hover 		{ color: #000;}

/** List **/
dt								{ width: 15%; line-height: 1.2em; flex-grow: 0; flex-shrink: 0; margin-bottom: 15px; font-weight: 500;  }
dd								{ width: 85%; line-height: 1.2em; margin-bottom: 15px; }

/** Select2 **/
.select2-container 																		{ width: 100% !important; }
.select2-container--default .select2-selection--single 									{ height: 36px; border: 1px solid #d2d2d2; }
.select2-container--default .select2-selection--single .select2-selection__rendered 	{ line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow 		{ height: 36px; width: 36px; }

/** fr-view **/
.fr-view				{ line-height:1.6em;}
.fr-view.small 			{ max-width: 800px;}
.fr-view h1 			{ font-size: 1.4em; }
.fr-view h2 			{ font-size: 1.4em; }
.fr-view h3 			{ font-size: 1.3em; }
.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; }

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

/** Swiper **/
.swiper-slide 									{ width: 100%;}
.swiper-button-next,
.swiper-button-prev 							{ outline: none; margin: 0 !important; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; background-color: rgba(0,0,0,.5); transform: translateY(-50%); }
.swiper-button-next:after, 
.swiper-button-prev:after 						{ font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 21px; color: #fff;}
.swiper-button-next:after 						{ content: '\0f178'; }
.swiper-button-prev:after 						{ content: '\0f177'; }
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled		{ pointer-events: unset;}
.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-center  				  	 		{ display:flex; align-items:center; }
.flex-stretch 				  	 		{ display:flex; align-items:stretch; }
.flex-justify 				  	 		{ display:flex; justify-content:space-between; }
.flex-evenly  				  	 		{ display:flex; justify-content:space-evenly; }
.flex-reverse 				 	  		{ display:flex; flex-direction:row-reverse; }
.flex-wrap 				 	  			{ display:flex; flex-wrap:wrap; }
.flex-vertical 				 	  		{ display:flex; flex-direction:column; }

/** Column layout **/
.column-2 							    { display:flex; flex-wrap:wrap; }
.column-2 .col-item 				    { width:49%; margin-top:2%; margin-right: 2%; }
.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:32%; margin-right:2%; margin-top:2%; }
.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 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 #000; 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:var(--theme-color); color:#fff; border:none; border-radius:6px; text-align: center; text-decoration: none !important; transition: background .2s; }
.button									{ font-size:1em; }
.button-md				  	  			{ font-size:1.1em; padding:1em 1.7em; letter-spacing: .05em; font-weight: 500; }									
.button-lg				  	  			{ font-size:1.4em; padding:1em; }									
.button i			   		  			{ margin-right:.5em; }
.button-wrapper							{ display:block; }
.button-wrapper .button 				{ margin: 3px 2px;}
.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%;}
.button-dark 							{ background:var(--theme-color-dark);}
.button:hover 							{ background:var(--theme-color-dark);}

/** 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 .label i 						{ margin: 0 0 0 .5em;}
.dropdown .menu							{ z-index: 99; position:absolute; right:0; padding-top: 21px; display:none; }
.dropdown .menu ul						{ background: #fff; padding:10px 20px; border-radius: 6px; border: 1px solid #ddd; box-shadow: 0 0 4px rgba(0,0,0,.2); text-align: left; }
.dropdown .menu li						{ margin:15px 0; white-space:nowrap; color: #888; }
.dropdown .menu a						{ transition: color .2s;}
.dropdown .menu a:hover 				{ color: var(--theme-color);}
.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;}
 
/** Paragraph **/
.paragraph 								{ display: flex; flex-direction:row-reverse; align-items: center; margin-bottom: 30px;}
.paragraph:last-child					{ margin-bottom: 0;}
.paragraph.reverse 						{ flex-direction: row;}
.paragraph.bg-light 					{ background: #f2f2f2; }
.paragraph .text 						{ width: 50%; padding: 30px 5%;}
.paragraph .image 						{ width: 50%;}
.paragraph .image img 					{ width: 100%;}

/*
========================
Font
========================
*/
html, body 								{ font-family:"Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, "Arial";  font-size:14px; color: #666; }
.summary 								{ font-size: 1.1em;} 
 

/*
========================
Structure
========================
*/
#container								{}
.wrapper 								{}
.inner									{ width:92%; max-width:1280px; margin:auto; position:relative; } 

/*
========================
Header
========================
*/
#header-wrapper							{ padding: 60px 0; }
#header-wrapper.headroom 				{ will-change: transform; transition: transform .4s; }
#header-wrapper.headroom--pinned 		{ transform: translateY(0%); }
#header-wrapper.headroom--unpinned 		{ transform: translateY(-100%); }

#header-inner							{ }
#header-inner h1						{ width: 300px; }
#header-inner h1 a 						{ display: block; width: 100%; height: 0; padding-top: 21.66%; text-indent: -999px; overflow: hidden; background: url(../images/title.svg?update=20251223-1) no-repeat 50% 50%; background-size: contain; } 

#header-inner nav li 					{ margin-left: 80px;}
#header-inner nav li a 					{ font-size: 1.2em; font-weight: 500; letter-spacing: .08em;}

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


/*
========================
Footer
========================
*/
#footer-wrapper							{ }
#footer-inner							{ padding: 40px 0 80px 0; color: #888; font-size: 13px; letter-spacing: .05em; }
#footer-inner p:first-child				{ font-weight: 500; }

#section-catalog						{ padding-top: 0;}
#mosaic 								{ margin-bottom: 40px;}
#mosaic img 							{ width: 16.25%; margin-bottom: .5%; opacity: 0; transition: opacity 1.5s; }
#mosaic img.loaded 						{ opacity: 1;}
#mosaic img.ready						{ transition: opacity .1s;}
#mosaic img[data-index="0"].ready 		{ opacity: var(--opcy-0); }
#mosaic img[data-index="1"].ready 		{ opacity: var(--opcy-1); }
#mosaic img[data-index="2"].ready 		{ opacity: var(--opcy-2); }
#mosaic img[data-index="3"].ready 		{ opacity: var(--opcy-3); }

#features 								{ margin-top: 80px;}
#features .icon 						{ height: 48px; }
#features .title 						{ font-size: 1.33em; font-weight: 500; color: #222; margin: 15px 0 10px 0;}

#section-contact dl 					{ margin-top: 40px; font-size: 1.05em; color: #444;}