@charset "utf-8";

/*
========================
Variables
========================
*/
:root {
	--background-color: #e7e7e7;
	--background-color-light: #cfd8df;
	--background-color-dark: #253951;
	--background-color-darker: #213247;
	--background-color-gradient: linear-gradient(180deg, rgba(231,231,231,1) 50%,rgba(37,57,81,1) 50%);
	--background-fixed-gradient: linear-gradient(180deg, rgba(231,231,231,1) 400px,rgba(37,57,81,1) 400px);
	--background-mask-gradient: linear-gradient(180deg, rgba(37,57,81,1) 0%, rgba(37,57,81,0.2) 100%);
	--text-color: #666666;
	--text-color-light: #808080;
	--text-color-dark: #253951;
	--text-color-highlight: #cfd8df;
	--border-color: #c0c4c9;
	--border-color-dark: #5b6678;
	--button-color: #253951;
	--button-color-light: #afb8c1;
	--button-color-hover: #131e2b;
}

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

a						{ color:inherit; text-decoration:none; transition: all .2s; }
a:hover 				{ color: var(--text-color-dark);}
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, h2, h3,
h4, h5, h6 				{ color: var(--text-color-dark); font-weight:500; }
h1 						{ font-size: 1.7em; }
h2 						{ font-size: 1.5em; }
h3 						{ font-size: 1.4em; margin-bottom: 20px; }
h4 						{ font-size: 1.2em; margin-bottom: 15px; }
h5 						{ font-size: .83em; }
h6 						{ font-size: .75em; }

/** Article **/
article							{ min-height: 50vh; }
article h1						{ margin-bottom: 1em;}
article	.contents				{ color: var(--text-color); }
article	.article-meta span 		{ color: var(--text-color-dark); margin-right: 15px; font-weight: 500;}
article	.article-meta a i		{ margin-left: 5px;}
article	.article-meta 			{ margin-top: 25px; color: var(--text-color-light);}
body:not(.en) article .fr-view 	{ text-align: justify;}
.article-body 					{ margin: 30px 0;}
.article-content 				{ flex-grow: 1;}
.article-content .swiper 		{ margin-bottom: 30px;}
.article-content .swiper-slide  { width: 100% !important;}
.article-aside 					{ flex-shrink: 0; width: 300px; margin-left: 6%; padding-top: 10px;}
.article-buttons				{ position: absolute; right: 4%; top: 35px;}
.article-buttons .btn 			{ margin-left: 40px; color: var(--text-color-light); cursor: pointer;}
.article-buttons .btn:first-child { margin-left: 0;}
.article-buttons .btn:hover 	{ color: var(--text-color-dark);}
.article-buttons i 				{ margin-right: .2em;}

/** Paragraph **/
.paragraph 						{ margin: 36px 0;}
.paragraph:first-child			{ margin-top: 0;}
.paragraph:last-child			{ margin-bottom: 15px;}
body:not(.en)  .paragraph .fr-view { text-align: justify; }

/** 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; }


/** Background **/
.bg-dark 				{ background-color: var(--background-color-dark); position: relative;}
.bg-light 				{ background-color: var(--background-color); position: relative;}
.bg-image 				{ position: absolute; left: 0; top:0; right: 0; bottom:0; }
.bg-image::before			{ content: ''; position: absolute; left: 0; top:0; right: 0; bottom:0; background: var(--background-mask-gradient); }
.bg-offset::before  		{ top:400px; }
.bg-offset::after 			{ content: ''; display: block; height: 400px; background-color: var(--background-color);}
.bg-offset-short::before 	{ top:360px; }
.bg-offset-short::after 	{ content: ''; display: block; height: 360px; background-color: var(--background-color);}
.bg-gradient			{ background: var(--background-color-gradient); position: relative; }
.bg-gradient::before	{ content: ''; position: absolute; left: 0; top:50%; right: 0; bottom:0; background:url(../image/pattern.png) repeat-x 0 0;}
.bg-gradient.fixed		{ background: var(--background-fixed-gradient); }


/** 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: 2.4em; }
.select2-container--default .select2-selection--single .select2-selection__arrow 		{ height: 36px; width: 36px; }

/** fr-view **/
.fr-view				{ font-size: 1.05em; line-height:1.6em; color: var(--text-color);}
.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; }


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

/** Swiper **/
.swiper-slide 									{ width: 100%;}
.swiper-button-next,
.swiper-button-prev 							{ outline: none; height: auto; margin: 0; font-size: 1.285rem; color:var(--button-color); }
.swiper-button-next:after, 
.swiper-button-prev:after 						{ display: none; }
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled		{ pointer-events: unset;}
.swiper-pagination								{ position: static; font-size: .8em; color:var(--button-color);}
.swiper-pagination-bullets.swiper-pagination-horizontal { bottom:-50px; }
.swiper-pagination-bullet-active				{ background-color: #222;}
.swiper-pagination-horizontal.swiper-pagination-bullets	{ position: absolute;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 6px; background-color: #fff;}
.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;}

.swiper-outer-nav .swiper-button-next,
.swiper-outer-nav .swiper-button-prev 				{ outline: none; margin: 0 !important; width: 48px; height: 48px; line-height: 3.428rem; border-radius: 50%; background-color:#fff; transform: translateY(-50%); }
.swiper-outer-nav .swiper-button-prev				{ left: 0; transform: translate(-200%, -50%);}
.swiper-outer-nav .swiper-button-next				{ right: 0; transform: translate(200%, -50%);}
.swiper-outer-nav .swiper-button-next:after, 
.swiper-outer-nav .swiper-button-prev:after 			{ color: var(--button-color);}

.swiper-bottom-nav 								{ margin-top: 20px; }
.swiper-bottom-nav .swiper-button-next,
.swiper-bottom-nav .swiper-button-prev 			{ position: static; transform: none;}


/** Flex layout **/
.flex         				      		{ display:flex; }
.flex-center  				  	 		{ display:flex; align-items:center; }
.flex-top  				  	 			{ display:flex; align-items:flex-start; }
.flex-bottom  				  	 		{ display:flex; align-items:flex-end; }
.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:23.5%; margin-right:2%; margin-top:2%; }
.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; background-color:#f2f2f2; }
.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.04, 1.04); }
.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:8%; top:10%; right:8%; bottom:10%; 
											width:auto; height:auto; max-width:84%; max-height:80%; 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; font-weight: 500;
											background:var(--button-color); color:#ffffff; border:none; border-radius:2px; text-align: center; text-decoration: none !important; }
.button									{ font-size:1em; }
.button-md				  	  			{ font-size:1.1em; padding:.9em 1.2em; }									
.button-lg				  	  			{ font-size:1.4em; padding:1em; }									
.button i,
.button-md i,
.button-lg i			   		  		{ margin-left:.4em; }
.button-wrapper							{ display:block; margin-top: 25px; }
.button.disabled,
.button-md.disabled,
.button-lg.disabled						{ pointer-events: none; background:#ccc; color:#888;}
.button:hover,
.button-md:hover,
.button-lg:hover						{ color:#fff; background-color: var(--button-color-hover);}																					

/** Link **/
.link-wrapper				  			{ margin-top: 25px; }
.link									{ font-size:1.05em; font-weight: 500; color: var(--button-color); }
.link i									{ margin-left:.4em; }
.link:hover 							{ color: var(--button-color-hover);}

/** Tab **/
.tabs-wrapper							{ margin-bottom: 30px;}
.tabs 									{ display: flex; flex-wrap: wrap; /*overflow-x: auto;*/ }
.tabs .tab 								{ margin-right: 5px; margin-bottom: 5px; width: auto;}
.tabs .tab:last-child					{ margin-right: 0;}
.tabs .tab a							{ display: block; padding: 1em 1.5em; white-space:nowrap; background-color: var(--button-color-light); color: var(--button-color); }
.tabs .tab a:hover,
.tabs .tab a.active 					{  background-color: var(--button-color); color: #fff; }

/** 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:0.857rem; }

/** File list **/
.file-list 								{ margin-bottom: 30px; }
.file-list li 							{ background-color:#f7f7f7; border-radius: 5px; margin-bottom: 10px; padding: 20px; display: flex; align-items: center; justify-content: space-between;}
.file-list .download 					{ color: var(--button-color);}

/** Audio list **/
.audio-list 							{ margin-bottom: 30px; }
.audio-list li 							{ margin-bottom: 15px;}
.audio-list audio 						{ width: 100%;}
.audio-list .filename 					{ margin: 5px; padding-bottom: 10px; text-align: right; color: var(--text-color); font-size: .96em; }

/** Breadcrumbs **/
.breadcrumbs							{ padding:0; display:flex; flex-grow:1; color: var(--text-color-light); }
.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:0.857rem; }
.breadcrumbs .item:last-child			{ margin-right:0; }
.breadcrumbs .item:last-child:after  	{ display:none; }
.breadcrumbs .home span 				{ display: none;}

/** Dropodown menu **/
.dropdown								{ position:relative; }
.dropdown .label						{ cursor:pointer; display: flex; align-items: center; justify-content: center; }
.dropdown .label i						{ font-size: 0.857rem; margin-left: 10px;}
.dropdown .menu							{ z-index: 99; position:absolute; display:none; padding-top: 4px; width: 100%; }
.dropdown .menu ul						{ background: #fff; padding:5px 10px; }
.dropdown .menu li						{ }
.dropdown:hover .menu 					{ display:block; }

/** Pagination **/
.pagination 							{ margin-top:30px; display:flex; justify-content: center; }
.pagination li 							{ border-radius: 50%; margin: 0 2px;}
.pagination a,
.pagination span 						{ display:inline-block; width: 36px; height: 36px; line-height:2.57rem; text-align: center; color:var(--button-color); }
.pagination a:hover 					{ color:var(--button-color-hover);}
.pagination .active	span				{ color:#fff; }
.pagination .active 					{ background-color: var(--button-color); color: #fff; }
.pagination .prev						{ font-size:1.1em; }
.pagination .next						{ font-size:1.1em; }
.pagination .pager						{ display: none;}

.in-dark .pagination a,
.in-dark .pagination span				{ color: #ccc;}
.in-dark .pagination a:hover 			{ color: #fff;}
.in-dark .pagination .active	span	{ color: var(--button-color); }
.in-dark .pagination .active 			{ background-color: #fff; color: var(--button-color); }

/** Tooltipster **/
.tooltipster-sidetip.tooltipster-shadow .tooltipster-box 							{ background-color: var(--background-color-dark);}
.tooltipster-sidetip .tooltipster-content 											{ padding: 0 16px;}
.tooltipster-sidetip.tooltipster-shadow.tooltipster-top .tooltipster-arrow-border 	{ border-top-color:var(--background-color-dark) ;}

/** Sharer **/
.social-share 							{ padding:0; background-color: var(--background-color-dark); color: #fff;}
.social-share .sharer-label 			{ margin-right: 15px; display: none;}
.social-share .sharer-icons				{ }
.social-share .jssocials-share-link 	{ border-radius: 50%; border: none !important; font-size:.7em; color: #fff; transition: opacity .2s; }
.social-share .jssocials-share-link:hover { opacity: .75; }
#post-share 							{ display: none; }

/** Title **/
.title-deco 							{ padding-bottom: .9em; margin-bottom: .9em; border-bottom: 1px solid var(--border-color);} 
.title-label 							{ background-color: var(--text-color-dark); color: #fff; padding: .8em 1em;}
.summary 								{ margin-bottom: auto; font-size: 1.05em; line-height: 1.7em; color: var(--text-color-light);}

/** Banner **/
.banner-box								{ padding-top: 44%; height: 0; overflow: hidden; position: relative;}
.banner-box .image						{ flex-grow: 1; position: absolute; left: 0; top: 0; bottom:0; width: 100%; }
.banner-box .image picture,
.banner-box .image a 					{ display: block; width: 100%; height: 100%; }
.banner-box .image img 					{ display: block; object-fit: cover; width: 100%; height: 100%; max-width: none; }
.banner-box.has-text .image 			{ width: 70%;}
.banner-box .info 						{ position: absolute; right: 0; top: 0; bottom:0; width: 30%; min-width: 270px; padding: 3.5% 3%; flex-shrink: 0; background-color: #fff; border-top: 4px solid var(--background-color-dark); }
.banner-box .subtitle					{ color: var(--text-color); margin-bottom: 15px;}
.banner-box h2 							{ font-size: 1.6em; line-height: 1.28em;}
.banner-box h3 							{ font-size: 1.4em; line-height: 1.28em;}
.banner-box .fr-view 					{ margin-bottom: auto;}

/** Article list **/
.article-list 							{ border-top: 1px solid var(--border-color); margin-top: 20px; }
.article-list li 					    { border-bottom: 1px solid var(--border-color); padding: 30px 0;}
.article-list li:last-child 			{ border-bottom: none;}
.article-list h3 						{ margin-bottom: 20px;}
.article-list .subtitle 				{ color: var(--text-color-dark); font-weight: 500; margin-bottom: 20px;}
.article-list .date						{ color: var(--text-color-light);}
.article-list .data 					{ flex-grow:1; }
.article-list .image 					{ flex-shrink: 0; width: 25%; margin-left: 5%; }

.article-link 							{ border-top: 1px solid var(--border-color); margin: 30px 0 10px 0; padding-top: 20px; color: var(--text-color-light);}
.article-link a:hover 					{ color: var(--text-color-dark);}
.article-link .prev i 					{ margin-right: 1em;}
.article-link .next i 					{ margin-left: 1em;}

/** Table list **/
.table-list 							{ display: table; border-top: 1px solid var(--border-color); width: 100%; margin: 30px 0; line-height: 1.2em;}
.table-list .row 						{ display: table-row; }
.table-list .cell						{ display: table-cell; padding: 16px 5px; border-bottom: 1px solid var(--border-color); color: var(--text-color);}
.table-list .title 						{ width: 60%; font-size: 1.1em; font-weight: 500; color: var(--text-color-dark);}
.table-list .link 						{ color: var(--text-color-light); font-weight: 400;}
.table-list .link i 					{ margin-left: 5px; }
.table-list .link:hover					{ color: var(--text-color-dark); }
.table-list .label 						{ color: var(--text-color-dark); font-weight: 500; min-width: 60px; }


/** Misc. **/
.center									{ text-align:center; }
.right 									{ text-align: right;}
.clear									{ clear:both; }
.shadow 								{ box-shadow: 0 0 15px rgba(0,0,0,.1);}

/** 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", "Noto Sans JP", "Noto Sans TC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Helvetica Neue", Helvetica, "Arial";  font-size:94%; }
.serif 									{ font-family:"Noto Serif JP", "Noto Serif TC", serif; font-weight: 600; }

/*
========================
Structure
========================
*/
#container								{ overflow-x: hidden;}
.wrapper 								{}
.inner									{ width:92%; max-width:85rem; margin:auto; position:relative; }

/*
========================
Header
========================
*/
#header-wrapper							{}
#header-inner							{ padding:50px 0; }
#header-inner h1 						{ width: 412px; margin: auto;}
#header-inner h1 a 						{ display: block; width: 100%; height: 0; padding-top: 13.35%; text-indent: -999px; overflow: hidden; background: url(../image/title.png) no-repeat 50% 50%; background-size: contain;}

#header-top								{ height: 48px; padding: 0 4%; border-bottom: 1px solid var(--border-color); }
#header-top .title-zh					{ font-weight: 500; letter-spacing: .05em; color: var(--text-color-dark);}
#header-top .title-en 					{ font-size: 0.8rem; font-weight: 500; letter-spacing: .05em; color: var(--text-color-dark);}

#language-toolbar						{ min-width: 160px;}
#language-toolbar .label 				{ display: none; }
#language-toolbar li 					{ margin-left: 30px; letter-spacing: .05em; color: var(--text-color-light); font-size: .95em; }
#language-toolbar li:first-child		{ margin-left: 0;}
#language-toolbar li.active 			{ color: var(--text-color-dark);}

/*
========================
Nav
========================
*/
#nav-wrapper							{ position: relative; z-index: 100;  }
#nav-inner								{ }
.top-nav 								{ height: 54px; background-color: #fff; flex-grow: 1; }
.top-nav a 								{ color: var(--text-color-light); }
.top-nav a:hover,
.top-nav li.active > a 					{ color: var(--text-color-dark);} 
.top-nav > li 							{ position: relative; flex-basis: 100%; }
.top-nav > li > a 						{ display: block; width: 100%; height: 100%; line-height: 3.5rem; text-align: center; font-size: 1.15em; font-weight: 500; letter-spacing: .08em;}
.top-nav > li::after					{ content: ''; position: absolute; right: 0; top: 10px; bottom:10px; border-left:1px solid var(--border-color);}
.top-nav > li:last-child::after			{ display: none;}
.sub-nav 								{ width: 100%; background-color: #fff; }
.sub-nav li 							{ border-top: 1px solid var(--border-color);}
.sub-nav li:first-child 				{ border-top: none;}
.sub-nav a 								{ display: block; width: 100%; text-align: center; padding: 14px 0; font-size: 1.1em; letter-spacing: .04em;}
.sub-nav li.active > a					{ color: var(--text-color-dark); }

#nav-search 							{ width: 20%; height: 54px; margin-left: 8px; background-color: #fff; position: relative;}
#nav-search input						{ height: 100%; padding-right: 0; background: none; border: none; font-size: 1.1em; color: var(--text-color-light) !important;}
#nav-search button 						{ flex-shrink: 0; width: 54px; font-size: 1.12em;  border: none; background: none; background-color: var(--button-color); color: #fff; }
#nav-search button span 				{ display: none;}

#nav-wrapper.sticky 					{ background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); }
#nav-wrapper.sticky .top-nav ,
#nav-wrapper.sticky #nav-search			{ box-shadow: none;}
#nav-wrapper.sticky #nav-search::before	{ content: ''; position: absolute; left: 0; top: 10px; bottom:10px; border-left:1px solid var(--border-color);}
#nav-wrapper.sticky #nav-search button	{ background-color: #fff; color: var(--button-color);}

#menu-button,
#search-button,
#menu-close								{ display: none;}


/*
========================
Main
========================
*/
#main-wrapper							{ position: relative; }

.section 								{ padding: 60px 0; position: relative;}
.section.padding-sm 					{ padding: 40px 0;}
.section.no-padding 					{ padding: 0;}
.section:first-child					{ padding-top: 40px;}
.section:last-child 					{ padding-bottom: 80px;}

.content-box							{ border-top: 4px solid var(--background-color-dark); width: 76%; min-height: 640px; padding: 35px 30px 40px 30px; background-color: #fff; position: relative;}
.content-box.full 						{ width: 100%;}
.content-box.no-bg 						{ background: none;}
.content-box.no-padding 				{ padding: 0;}
.content-box.no-border 					{ border-top: none;}
.content-box.auto-height				{ min-height: 0;}

.content-top 							{ margin-bottom: 40px;}

.no-content 							{ position: absolute; left: 50%; top: 50%; width: 92%; transform:translate(-50%, -50%); text-align: center; font-size: 1.4em; color: var(--text-color-light); }

.aside-box 								{ border-top: 4px solid var(--background-color-dark); width: 21%; padding: 35px 30px 40px 30px; background-color: #fff; background-repeat: no-repeat; background-position: 50% bottom; background-size:100%; }
.aside-box.bg::after 					{ content: ''; display: block; width: 100%; padding-top: 110%; }

.aside-menu 							{ border-top: 1px solid var(--border-color); margin-top: 20px;}
.aside-menu li 							{ border-bottom: 1px solid var(--border-color);}
.aside-menu li a 						{ display: flex; justify-content: space-between; align-items: center; padding: 1em .1em; font-size: 1.05em; font-weight: 500; line-height: 1.2em; color: var(--text-color-light); }
.aside-menu li a:hover					{ color: var(--text-color-dark); }					
.aside-menu li.active a 				{ color: var(--text-color-dark); }
.aside-menu li.active a::after			{ content: '\f178'; font-family: "Font Awesome 5 Pro"; }


/*
========================
Footer
========================
*/
#footer-wrapper							{ color: #fff; background:var(--background-color-darker); }
#footer-wrapper	a:hover 				{ color: rgba(255, 255, 255, .75);}
#footer-inner							{ padding: 40px 0;}

#footer-contact img 					{ width: 50px; margin-right: 30px; }
#footer-contact p,
#footer-contact address 				{ margin-bottom: 8px; line-height: 1.33em;}
#footer-contact p span 					{ display: inline-block; margin-right: 10px;}
#footer-links li 						{ padding: 0 25px; position: relative; }
#footer-links li::before				{ content: ''; position: absolute; left: 0; top: 0; bottom:0; transform: translateY(2px); border-left: 1px solid rgba(255,255,255,.5); }
#footer-links li:first-child::before	{ display: none;}
#footer-links li:first-child 			{ padding-left: 0;}
#footer-links li:last-child 			{ padding-right: 0;}

#footer-bottom							{ margin-top: 30px; height: 60px; border-top: 1px solid var(--border-color-dark); }
#footer-copyright						{ font-size: 0.928rem; opacity: .5; }
#footer-credit							{ font-size: 0.875rem; opacity: .5; }

#footer-inner .social_link_messenger 	{ z-index: 99; position: fixed; right: 25px; bottom:25px; right:25px; bottom:25px; width:48px; height:48px; line-height:3.428rem; border-radius:50%; text-align:center; background:#000; color:#fff; font-size:1.5em; }


/*
========================
Pages
========================
*/

/** Homepage **/
.hero-slider 							{ position: relative; }

.item-slider 							{ margin-top: 4%; margin-bottom: 40px; position: relative; }
.item-slider .swiper-slide				{ height: auto; width: 23%; margin-right: 2.666666666666667%; background-color: #fff;}
.item-slider .swiper-slide:last-child	{ margin-right: 0;}
.item-slider .info 						{ padding:30px;}
.item-slider .link-wrapper 				{ margin-top: 30px;}

#welcome .content-box					{ width: 74%;}
#welcome .aside-box						{ width: 23%;}
#welcome .summary 						{ max-width: 60rem;}

#aside-news li a 						{ display: block;}
#aside-news li span 					{ display: block;}
#aside-news li .date 					{ color: var(--text-color-dark); margin-top: 10px;}

/** People **/
.people-list .item 						{ padding: 20px 0; border-bottom:1px solid var(--border-color);}
.people-list .item:first-child			{ padding-top: 5px;}
.people-list .thumb						{ width: 180px; flex-grow: 0; flex-shrink: 0; margin-top: 10px; margin-left: 30px; }
.people-list .info 						{ flex-grow: 1; color: var(--text-color); }
.people-list .name 						{ margin: 5px 0 20px 0; font-size: 1.33em; letter-spacing: .06em; color: var(--text-color-dark);}
.people-list dl 						{ max-width: 600px;}
.people-list dt 						{ width: 25%; margin-bottom: 10px; line-height: 1.2em; color: var(--text-color-dark); font-size: 1.05em; font-weight: 500;}
.people-list dd 						{ width: 75%; margin-bottom: 10px; line-height: 1.2em; font-size: 1.05em;}
.people-list dd a i 					{ margin-left: 5px; font-size: 12px;}		
.people-list dd a:hover 				{ text-decoration: underline; color: var(--text-color-dark);}		

/** Archives **/
.page-menu 								{ width: 280px;}
.page-menu label 						{ color: var(--text-color); margin-right: 10px; white-space: nowrap;}
.page-menu .select2-container--default .select2-selection--single .select2-selection__arrow	{ background-color: var(--button-color); width: 34px; height: 34px; }
.page-menu .select2-container--default .select2-selection--single .select2-selection__arrow b { border-width:5px 4px; border-color: #fff transparent transparent transparent !important;}

/** Features **/
.banner-list .banner-box .info			{ padding: 3% 3%; border: none;} 
.banner-list .banner-box:first-child .info { border-top: 4px solid var(--background-color-dark); } 
.banner-list .banner-box				{ margin-bottom: 30px;} 
.banner-list .banner-box:last-child		{ margin-bottom: 0;}
.banner-list .image img
										{ position:absolute; left:8%; top:10%; right:8%; bottom:10%; 
											width:auto; height:auto; max-width:84%; max-height:80%; margin:auto; box-shadow: 0 0 10px rgba(0,0,0,.2);}

/** Feature detail **/
.image-anchor							{ display: inline-block; margin: 2px 0; padding: .1em .4em; background-color: #eee; border-radius: 3px; cursor: pointer; transition: all .2s;}
.image-anchor:hover 					{ background-color: var(--background-color-light); color: var(--text-color-dark);}

/** Contact **/
.contact-info 							{ margin: 3px 0;}
.contact-info .label 					{ display: inline-block; vertical-align: top; color: var(--text-color-dark); margin-right: 10px; width: 60px;}
.contact-info .value 					{ display: inline-block; vertical-align: top;}

/** Search **/
.search-info 							{ margin: 30px 0; color: var(--text-color);}
.search-list 							{ border-top: 1px solid var(--border-color);}
.search-list li 						{ padding: 25px 5px; border-bottom: 1px solid var(--border-color);}
.search-list h3 						{ margin-bottom: 15px;}
.search-list .fr-view 					{ max-width: 860px;}
.search-list em 						{ font-style: normal; background-color: var(--text-color-highlight); }