@charset "UTF-8";

/*-----------------------------------------------------------------------------------
	
	Style | Version: 1.2.0 | 2021 09 26

-----------------------------------------------------------------------------------*/

/* ----------------------------------------------------------------

	- Base
	- Header
	- Main
		- Content Element
		- Pages 1 | 'Sidebar', 'Main Content'
		- Pages 2 | 'Main Content'
		- Pages 3 | 'Main Content' : service / Background Image Fixed
		- Pages 4 | 'Main Content' : contact / Map 
		- Detail 1 | fancybox-v3-5 : works's detail / Fancybox
	- Footer
	- Media Screen
	- Icons
	- Edit

---------------------------------------------------------------- */

/* ----------------------------------------------------------------
	Base 
-----------------------------------------------------------------*/

	body {
		font-family: '微軟正黑體';
	}

	a {
		text-decoration: none;
		color: #444a51;
	}

	img {
		max-width: 100%;
		max-height: 100%;
	}

	p {
		display: block;
	}

	.center { width: 100%; text-align: center; }

	.clear { width: 100%; height: 0; clear: both; }

	/*Selection*/
		::selection {background:darkslategrey;/* Safari */ color:#fff;}
		::-moz-selection {background:darkslategrey;/* Firefox */ color:#fff;}
		::-webkit-input-placeholder {background:darkslategrey;color: #fff;}
		:-moz-placeholder {color: #333;}
		:-ms-input-placeholder {color: #333;}

/* ----------------------------------------------------------------
	Header
-----------------------------------------------------------------*/

	/* index */
		header.header.index-header {
			height: 75px;
			position: relative;
		}
			.index-logo {
				padding-top: 15px;
			}
			.index-logo a, .index-logo a:hover { color: #000; }
			/*.index-logo a, .index-logo .row { display: block; width: 100%; }*/
			.index-logo img, .index-logo .title-tw, .index-logo .title-en {
				display: block;
				float: left;
				height: 45px;
				line-height: 45px;
			}
				.index-logo img {
					padding-top: 5px;
					padding-bottom: 5px;
				}
				.index-logo .title-tw {
					color: #000;
					font-size: 27px;
					font-weight: 600;
					margin-left: 10px;
				}
				.index-logo .title-en {
					color: #b7b9bc;
					display: block;
					font-size: 15px;
					float: right;
					opacity: 0.6;
				}
			@media screen and (max-width: 768px) {
				.index-logo {
					opacity: 0 !important;
					display: none !important;
				}
			}
			@media screen and (min-width: 768px) {
				header.header.index-header .luxbar {
					opacity: 0 !important;
					display: none !important;
				}
			}
	/* header */
		header {
			background-color: #fff;
			position: fixed;
			top: 0;
			left: 0; right: 0;
			z-index: 9999;
		}

/* ----------------------------------------------------------------
	Main
-----------------------------------------------------------------*/
	
	.mainContent {
		min-height: calc(100vh - 96px);
	}
		.mainContent > .container {
			padding-left: 15px;
			padding-right: 15px;
		}
		.mainContent.dark {
			background-color: #000;
		}

	.title {
		font-size: 32px;
		line-height: 32px;
		display: block;
		text-align: left;
		width: 100%;
		margin-top: 45px;
		margin-bottom: 25px;
	}
		.title.center {
			text-align: center;
		}
		.title.right {
			text-align: right;
		}
			.title:after {
				content: ' '; display: block;
				background: #000;
				width: 40px;
				height: 2px;
				margin-top: 25px;
				margin-bottom: 0;
			}
			.title.center:after {
				margin-left: auto;
				margin-right: auto;
			}

	.line.clear, .line-dashed.clear, .line-dotted.clear {
		width: 100%;
		margin-top: 25px;
		margin-bottom: 25px;
	}
	.line { border-bottom: 1px solid #444a51; }
	.line-dashed { border-bottom: 1px dashed #444a51; }
	.line-dotted { border-bottom: 1px dotted #444a51; }

/* Pages 1 | Left side of the 'Sidebar', 'Main Content' on the Right
** works / Works List
------------------------------------------------------------ */

	/* Sidebar */
		.mobile-hide { display: none !important; }
		.side-menu {}
			.side-navigation {
				list-style: none;
				padding: 5px 0;
				display: block;
			}
			.side-item {
				color: #444a51;
				display: block;
				padding: 8px 14px;
				border-left: 1px solid #B8BABC;
				/*border-left: 2px solid #ebebec;*/
				position: relative;
			}
				.side-item a {
					font-size: 16px;
					color: #8e8e8e;
					/*color: #444a51;*/
					text-decoration: none;
				}
				.side-item a:hover { color: #444a51; }
				.side-item:before {
					content: ' ';
					display: block;
					background: #B8BABC;
					width: 0;
					height: 1px;
					/*position*/
					position: absolute;
					top: 20px;
					left: 0;
					transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
				}
				.side-item:hover:before {
					width: 12px;
					transition-delay: 0s, 0s, 0.3s;
				}
				.side-dropdown .side-item:hover:before {
					top: 17px;
				}

	/* Side Dropdown */
	
		.side-dropdown {}
			.side-dropdown ul {
				list-style: none;
				padding: 0;
			}
			.side-dropdown .side-item {
				font-size: 13px;
				padding: 5px 0 5px 14px;
				/* padding: 5px 0 5px 20px; */
				border-left: 0;
				border-left: none;
			}
			.side-dropdown .side-item a {
				color: #B8BABC;
				/*color: #8e8e8e;*/
				display: block;
			}
			.side-dropdown .side-item a:hover { color: #8e8e8e; }
			.side-dropdown > a {}

	/* Main Content | List Block */
		.listBlock {
			padding-top: 35px;
		}
			.listBlock_item {
				position: relative;
				margin-bottom: 1.5em;
			}
				
				.listBlock_item .itemImage {
					position: relative;
					overflow: hidden;
					display: inline-block;
				}
				
					.listBlock_item img {
						max-width: 100%;
						vertical-align: top;
					}
				
				.listBlock_item .itemContent {
					text-align: right;
					background: rgba(255,255,255,0.8);
				}

					.listBlock_item .itemContent a {
						text-decoration: none;
					}
		
					.listBlock_item .tit {
						font-size: 1.2em;
						line-height: 1.5;
						color: #84898d;
						margin: 0;
						font-weight: 300;
					}
					
					.listBlock_item .txt {
						font-size: 1em;
						line-height: 1.5em;
						color: #444a51;
						font-weight: 300;
						margin-top: 0;
						margin-bottom: 0;
					}
			
		@media screen and (max-width: 769px) {
		
			.listBlock_item {
				margin-bottom: 0;
			}
		
		}
		@media screen and (min-width: 769px) {

			/* List Block */
			.listBlock_item {}
				.listBlock_item_content {
					display: inline-block;
					vertical-align: top;
				}
				.listBlock_item_content,
				.listBlock_item .itemImage,
				.listBlock_item .itemImage img {
					width: 100%;
				}
				.listBlock .itemContent {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 1em;
					-webkit-transition: all 1s;
					transition: all 1s;
				}
				.listBlock .itemImage:not(:hover) {
					filter: gray;
					-moz-filter: grayscale(100%);
					-webkit-filter: grayscale(100%);
					filter: grayscale(100%);
					-webkit-transition: all 1s;
					transition: all 1s;
				}
				.listBlock .itemImage:not(:hover) .itemContent {
					-webkit-transform: translateY(100%);
							transform: translateY(100%);
				}
		}

/* Pages 2 | 'Main Content' on the Middle
** about us / Banner & Edit
------------------------------------------------------------ */

	/* Banner */
		.banner-parallax {
			height: 350px;
			background-position: top center;
			background-repeat: repeat;
			/*background-size: cover;*/
			background-attachment: fixed;
		}
			.banner-parallax.banner-about { background-image: url('../images/parallax/5.jpg'); }
			.banner-parallax h2, .banner-parallax span { display: none; }

	/* Team */
		.team-list {
			margin-top: 45px;
			margin-bottom: 45px;
		}
			.team-list .team-item {}
			.figure-images {}
				.figure-images img {
					width: 100%;
					max-width: 100%;
				}
			.t-name {}
				.t-name {
					display: block;
					padding-top: 10px;
				}
			.t-tit {
				width: 60px;
			}
			.team-item .line-dotted { border-bottom: 1px dotted #d1d1d1; }
		.team-list .line {
			margin-top: 45px;
			margin-bottom: 45px;
			border-bottom: 1px solid #f1f1f1;
		}

/* Pages 3 | 'Main Content' on the Middle 
** service / Background Image Fixed
------------------------------------------------------------ */

	/* Banner */
		.bg-parallax {
			padding-top: 70px;
			/*height: 100vh;*/
			/*height: calc(100vh - 96px);*/
			/*min-height: 100vh;*/
			min-height: calc(100vh - 96px);
			box-sizing: border-box;
			background-position: center;
			background-repeat: repeat;
			/*background-size: cover;*/
			background-attachment: fixed;
		}
			.bg-parallax.bg-about { background-image: url('../images/parallax/bg_about.jpg'); background-size: cover; }
			.bg-parallax.bg-service { background-image: url('../images/parallax/bg_service.jpg'); background-size: cover; }
			.bg-parallax.dark {
				color: #fff;
				background-color: #000;
			}
				.bg-parallax > .container { position: relative; z-index: 2; }
				.bg-parallax.light:before { background: url('../images/bg-light.png'); }
				.bg-parallax.dark:before { background: url('../images/bg-dark.png'); }
				.bg-parallax:before {
					content: ' '; display: block;
					width: 100%; height: 100%;
					position: absolute;
					top: 0; bottom: 0;
					left: 0; right: 0;
					z-index: 1;
				}
				.bg-parallax.dark a {
					color: #fff;
				}
				.bg-parallax.dark .title:after {
					background: #fff;
				}
	/* Icon */
		.service-list {}
			.service-item {
				text-shadow: 0 0 10px rgba(0,0,0,0.3);
				text-align: center;
				background-color: rgba(0,0,0,0.4);
				padding-top: 20px;
				padding-bottom: 35px;
				border: 1px solid rgba(255,255,255,0.3);
			}
				.service-item .item-icon {
					display: block;
					background-color: rgba(0,0,0,0.1);
					/*border: 1px solid rgba(255,255,255,0.6);*/
					width: 75px; height: 75px;
					margin-left: auto;
					margin-right: auto;
					margin-bottom: 15px;
				}
				.item-icon .icon {
					display: block;
					/*width: 45px; height: 45px;*/
					width: 75px; height: 75px;
					margin-top: 15px;
					margin-bottom: 15px;
					margin-left: auto;
					margin-right: auto;
				}
				/* Service Icon */
					.service-icon1 { background: url('../images/service/icon01.svg') center no-repeat; background-size: cover; }
					.service-icon2 { background: url('../images/service/icon02.svg') center no-repeat; background-size: cover; }
					.service-icon3 { background: url('../images/service/icon03.svg') center no-repeat; background-size: cover; }
					.service-icon4 { background: url('../images/service/icon04.svg') center no-repeat; background-size: cover; }

/* Pages 4 | 'Main Content' on the Middle 
** contact / Map 
------------------------------------------------------------ */

	/*Lift*/
	.map-main {}
		.googleMap {
			width: 100%;
			height: 100vh;
		}
			.googleMap iframe,
			.googleMap #map {
				width: 100%;
				height: 100%;
			}
	/*Right*/
	.map-info {
		color: #444a51;
		background-color: #f2f2f2;
		padding-top: 70px;
	}
		.map-info-middle {
			padding-left: 20px;
			padding-right: 20px;
			margin-top: -25%;
			vertical-align: middle;
			position: absolute;
			top: 50%; bottom: 50%;
			left: 0; right: 0;
		}
	@media screen and (max-width: 768px) {
		/*Lift*/
			.map-main, .googleMap {
				height: 80vh;
			}
		/*Right*/
			.map-info {
				/*position: relative;*/
				padding-top: 35px;
				padding-bottom: 35px;
			}
				.map-info-middle {
					position: relative;
					top: initial; bottom: initial;
					left: initial; right: initial;
					margin: initial;
				}
	}

/* Detail 1 | fancybox-v3-5 two column layout
** works's detail / Fancybox
------------------------------------------------------------ */

	.imglist {
		padding-top: 75px;
		margin-bottom: 25px;
	}
	.imglist .xzoom-thumbs {
		display: grid;
		grid-template-columns: 49% 49%;
		row-gap: 1%;
		column-gap: 1%;
		gap: 1% 1%;
		/*max-width: 400px;*/
	}
		.imglist .imglist-item {
			display: block;
			/*float: left;*/
			/*width: 48%;*/
			/*margin-right: 1%; margin-left: 1%;*/
			border: 1px solid #cecece; 
		}
			.imglist .imglist-item img {
				/*width: 100%;*/
				max-width: 100%;
				max-height: 110px;
			}
		.xzoom-source {
			background-color: transparent !important;
		}
		.xzoom-preview {
			display: none !important;
			opacity: 0 !important;
			z-index: -1;
		}
	/* text */
		.works-detail {
			font-family: '微軟正黑體';
			color: #444a51;
			padding-top: 75px;
			margin-bottom: 25px;
		}
		.works-detail .tit,
		.imglist .tit {
			font-size: 32px;
		}
		.works-detail .sub,
		.imglist .sub {
			font-size: 16px;
		}

		@media screen and (max-width: 768px) {
			.works-detail {
				padding-top: 0;
			}
			.works-detail .tit {
				font-size: 26px;
				display: block;
				width: 100%;
				border-bottom: 1px solid rgba(0,0,0,.1);
				margin-bottom: 1em;
			}
			.works-detail hr { display: none; }
			.works-detail .sub { display: none; }
		}
	.detail-pdf-btn {
		display: block;
		background-color: #f2f2f2;
		color: #000;
		text-decoration: none;
		padding: 10px 15px 10px 30px;
		margin-bottom: 5px;
		/* Button Fill */
		position: relative;
		overflow: hidden;
		transform-style: preserve-3d;
		/*-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);*/
		-webkit-backface-visibility: hidden;
	}
			.detail-pdf-btn span { position: relative; }
			.detail-pdf-btn:before {
				content: ' ';
				background-color: #444;
				width: 0;
				height: 100%;
				position: absolute;
				top: 0;
				left: auto; right: 0;
				-webkit-transition: all .4s ease;
				-o-transition: all .4s ease;
				transition: all .4s ease;
				-webkit-backface-visibility: hidden;
			}
		@media screen and (min-width: 768px) {
			.detail-pdf-btn:hover {
				text-decoration: none;
				padding: 10px 15px 10px 15px;
				background-color: #666;
				color: #f1f1f1;
				color: #FFF;
				text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
			}
				.detail-pdf-btn:hover:before {
					width: 100%;
				}

			body:not(.device-touch) .detail-pdf-btn {
				-webkit-transition: all .2s ease-in-out;
				-o-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
			}
		}
		/* Icon */
			.detail-pdf-btn .icon {
				-webkit-transition: all .2s;
				-o-transition: all .2s;
				transition: all .2s;
			}
			/* > */
				.detail-pdf-btn .right-arrow.icon {
					margin: auto;
					position: absolute;
					top: 0; bottom: 0;
					left: 8px;
					opacity: 1;
				}
					.detail-pdf-btn:hover .right-arrow.icon {
						opacity: 0;
					}
			/* -> */
				.detail-pdf-btn .right-line-arrow.icon {
					margin: auto;
					position: absolute;
					top: 0; bottom: 0;
					right: 35px;
					opacity: 0;
				}
					.detail-pdf-btn:hover .right-line-arrow.icon {
						right: 10px;
						opacity: 1;
					}
			/* -> : Light */
				.detail-pdf-btn .right-line-light-arrow.icon {
					margin: auto;
					position: absolute;
					top: 0; bottom: 0;
					right: 10px;
				}
					/*.detail-pdf-btn:active:hover:focus:visited:focus-within .right-line-light-arrow.icon {
						background-image: url('../images/works/003-right-line-arrow.svg');
						background-size: cover;
					}*/


/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/

	.footer {
		background: #ebebec;
		color: #84898d;
		position: relative;
		z-index: 2;
	}
		.footer .footerContent {
			width: 1250px;
			max-width: 100%;
			margin: auto;
			padding: 24px 16px;
		}
		.footer .contactInfo {
			color: #97999C;
			padding-left: 51px;
			background:url('../images/icon-foot.png') no-repeat left center;
			font-weight: 300;
		}
		.footer .contactInfo a {
			color: #444a51;
			text-decoration: none;
		}
		.footer .contactInfo a:hover {
			/*color: #97999C;*/
			text-decoration: underline;
		}

	/* Keyreply */
		.keyreply-brand {
			color: transparent !important;
			opacity: 0 !important;
			display: none !important;
		}
		@media screen and (min-width: 769px) {
			#keyreply-container {
				opacity: 0.3;
				-webkit-transition: all 0.8s;
				transition: all 0.8s;
			}
				#keyreply-container:hover {
					opacity: 1;
				}
		}

/* ----------------------------------------------------------------
	Media Screen
-----------------------------------------------------------------*/
	
	/*min*/
		@media screen and (min-width: 1200px) {
			
			.container {
				max-width: 1000px;
			}

		}
		@media screen and (min-width: 768px) {
			.mobile-hide { display: block !important; }
			.desktop-hide { display: none !important; }
		}
	
	/*max*/
		@media screen and (max-width: 768px) {}

/* ----------------------------------------------------------------
	Icons
-----------------------------------------------------------------*/

	.icon {}

	/* + */
		.plus.icon {
			color: #000;
			position: absolute;
			margin-left: 3px;
			margin-top: 10px;
		}

			.plus.icon:before {
				content: '';
				position: absolute;
				width: 15px;
				height: 1px;
				background-color: currentColor;
			}

			.plus.icon:after {
				content: '';
				position: absolute;
				width: 15px;
				height: 1px;
				background-color: currentColor;
				-webkit-transform: rotate(90deg);
					transform: rotate(90deg);
			}
	/* - */
		.minus.icon {
			color: #000;
			position: absolute;
			margin-left: 3px;
			margin-top: 10px;
			width: 15px;
			height: 1px;
			background-color: currentColor;
		}
	/* > */
		.right-arrow {
			background-image: url('../images/works/001-right-arrow.svg');
			background-repeat: no-repeat;
			background-size: cover;
			display: inline-block;
			width: 20px; height: 20px;
		}
	/* -> */
		.right-line-arrow {
			background-image: url('../images/works/001-right-line-arrow.svg');
			/*background-image: url('../images/works/002-right-line-arrow.svg');*/
			/*background-image: url('../images/works/003-right-line-arrow.svg');*/
			/*background-image: url('../images/works/004-right-line-arrow.svg');*/
			background-repeat: no-repeat;
			background-size: cover;
			display: inline-block;
			width: 20px; height: 20px;
		}
	/* -> : Light */
		.right-line-light-arrow {
			/*background-image: url('../images/works/001-right-line-arrow.svg');*/
			background-image: url('../images/works/002-right-line-arrow.svg');
			/*background-image: url('../images/works/003-right-line-arrow.svg');*/
			/*background-image: url('../images/works/004-right-line-arrow.svg');*/
			background-repeat: no-repeat;
			background-size: cover;
			display: inline-block;
			width: 20px; height: 20px;
		}
			*:active .right-line-light-arrow.icon,
			*:hover .right-line-light-arrow.icon,
			*:focus:visited .right-line-light-arrow.icon,
			*:focus-within .right-line-light-arrow.icon,
			*:focus-within .right-line-light-arrow.icon {
				background-image: url('../images/works/003-right-line-arrow.svg');
				background-size: cover;
			}
	/* X */
		.close.icon {
			color: #000;
			position: absolute;
			margin-top: 0;
			margin-left: 0;
			width: 50px;
			height: 50px;
		}

		.close.icon:before {
			content: '';
			position: absolute;
			top: 25px;
			width: 50px;
			height: 3px;
			background-color: currentColor;
			-webkit-transform: rotate(-45deg);
					transform: rotate(-45deg);
		}

		.close.icon:after {
			content: '';
			position: absolute;
			top: 25px;
			width: 50px;
			height: 3px;
			background-color: currentColor;
			-webkit-transform: rotate(45deg);
					transform: rotate(45deg);
		}


/* ----------------------------------------------------------------
	Edit
-----------------------------------------------------------------*/

	.detail-container {
		color: rgb(68, 74, 81);
		font-family: 微軟正黑體;
		font-weight: 400;
		box-sizing: border-box;
		table-layout: fixed;
	}
	.detail-label {
		color: rgb(48, 49, 51);
		font-weight: 600;
		box-sizing: border-box;
	}
	.detail-value {
		box-sizing: border-box;
	}
	
	.edit-type-01 {
		font-size: 15px;
		line-height: 1.75;
		box-sizing: border-box;
		margin: 1.2rem 0px 3rem;
	}
		.edit-type-01 .detail-container {
			display: table;
		}
		.edit-type-01 .detail-label {
			min-width: 108px;
			display: table-cell;
		}
		.edit-type-01 .detail-value {
			display: table-cell;
		}

	.edit-type-02 {}
		.edit-type-02 .detail-container+.detail-container {
			margin-top: 3rem;
		}
		.edit-type-02 .detail-label {
			margin-bottom: 1rem;
		}
		.edit-type-02 .detail-value {
		}