@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+TC:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*
   Globel
*/
*{
	margin: 0;
	padding: 0; 
	box-sizing: border-box;
	position: relative;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
}

body{
	background-color: #cccccc; /*ctrl+shift+C*/
	color: #101010;
	font-family: 'inter', sans-serif;


}

ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
/*	cursor: crosshair;*/
}

a:hover{

}

h1{
	margin: 0;
}

/*
	Layout
*/

.wrapper{
	display: block;
	max-width: 2480px;
	margin: 0 auto;
	padding: 0;
}

@media screen and (max-width: 1024px){
	
	.wrapper{
		padding: 0 8px;
	}

}

@media screen and (max-width: 767px){

	.wrapper{
		padding: 0px;
	}
}

.container{
	width: 100%;
	margin: 0 auto;
	float: left;
}



.row{
}

.col{
	float: left;
	/*border: 1px solid green;*/

	padding-left: 0px;
	padding-right: 0px;
}

.col-12{width: 100%;}
.col-8{width: 66.6666666%;}
.col-6{width: 50%;}
.col-4{width: 33.3333333%;}
.col-3{width: 25%;}
.col-2{width: 16.66666666%}

@media screen and (max-width: 1024px){
	.col-12-l{width: 100%;}
	.col-8-l{width: 66.6666666%;}
	.col-6-l{width: 50%;}
	.col-4-l{width: 33.3333333%;}
	.col-3-l{width: 25%;}
}

@media screen and (max-width: 860px){
	.col-12-m{width: 100%;}
	.col-8-m{width: 66.6666666%;}
	.col-6-m{width: 50%;}
	.col-4-m{width: 33.3333333%;}
	.col-3-m{width: 25%;}
}

@media screen and (max-width: 500px){
	.col-12-s{width: 100%;}
	.col-8-s{width: 66.6666666%;}
	.col-6-s{width: 50%;}
	.col-4-s{width: 33.3333333%;}
	.col-3-s{width: 25%;}
}

.col-12-square{width: 100%;}
.col-8-square{width: 66.6666666%;}
.col-6-square{width: 50%;}
.col-4-square{width: 33.3333333%;}
.col-3-square{width: 25%;}

.hero-200{margin-top:200px;}
.hero-170{ margin-top: 170px;}
.hero-120{ margin-top: 120px;}
.hero-100{ margin-top: 100px;}
.hero-70{margin-top: 70px;}
.hero-60{margin-top: 60px;}
.hero-50{margin-top: 50px;}
.hero-30{margin-top: 30px;}
.hero-20{margin-top: 20px;}
.hero-17{margin-top: 17px;}
.hero-10{margin-top: 10px;}

.max-width-1920{max-width: 1920px;}
.max-width-1400{max-width:1400px;}
.max-width-1200{max-width:1200px;}
.max-width-1024{max-width:1024px;}
.max-width-768{max-width: 768px;}



/* Elemet */
.sec-title-box{
	display: flex;
	flex-direction: row;
}

.sec-title-box.align-left{
	flex-direction: row;
}

.sec-title-box.align-right{
	flex-direction: row-reverse;
}



.sec-title-text{
	display: block;
	font-size: 28px;
	line-height: 26px;
	font-family: 'Inter', sans-serif;
	font-weight: 100;
	letter-spacing: 3px;
	color: #1f1f1f;
}

.sec-title-box.align-left .sec-title-text{
	padding-right: 50px;
}

.sec-title-box.align-right .sec-title-text{
	padding-left: 50px;
}

.sec-title-decorate{
	flex-grow: 1;
	flex-shrink: 1;
	height: 1px;
	background-color: #1f1f1f;
}

@media screen and (max-width: 1024px){
	.sec-title-box{
		width: 100%;
	}

	.sec-title-box.align-left,
	.sec-title-box.align-right{
		flex-direction: column;
	}

	.sec-title-box.align-left .sec-title-text,
	.sec-title-box.align-right .sec-title-text{
		padding: 0;
	}

	.sec-title-text{
		width: 100%;
		text-align: center;
		font-size: 24px;
	}

	.sec-title-decorate{
		flex-grow: 1;
		flex-shrink: 1;
		height: 1px;
		width: 40px;
		background-color: #1f1f1f;
		margin-top: 24px;
	}
}


@media screen and (max-width: 500px){
	.sec-title-box{
		width: 100%;
	}

	.sec-title-box.align-left,
	.sec-title-box.align-right{
		flex-direction: column;
	}

	.sec-title-box.align-left .sec-title-text,
	.sec-title-box.align-right .sec-title-text{
		padding: 0;
	}

	.sec-title-text{
		width: 100%;
		text-align: center;
		font-size: 24px;
	}

	.sec-title-decorate{
		flex-grow: 1;
		flex-shrink: 1;
		height: 1px;
		width: 40px;
		background-color: #1f1f1f;
		margin-top: 24px;
	}
}


/*Sytle*/
header{
	width: 100%;
	height: 80px;
	position: absolute;
	left: 0;
	top: 0;
	padding-top: 36px;
	z-index: 1000;
}

.header-logo{
	float: left;
	padding-top: 10px;
	padding-left: 54px;
}

.header-logo img{
	display:block;
	float: left	;
	height: 32px;
	width: 99px;
}

.nav-list{
	float:right;
	height: 36px;
	padding-right:54px;
}

.nav-box{
	display: none;
}

.nav-trigger-btn{
	display: none;
	z-index: 9999;
}

.nav-item{
	display: block;
	float:left;
}

.nav-item a{
	display: block;
	padding: 0 15px;
	font-family: 'Inter', sans-serif;
	color: #f0f0f0;
	font-weight: 300;
	font-size: 14px;
	line-height: 36px;
	letter-spacing: 2px;
}

.nav-item a::after{
	display: block;
	content: '';
	
	background-color: #f0f0f0;
	width: 100%;
	height: 1px;

	position: absolute;
	bottom: 0;
	left:0;
	transition: 1s;
	opacity: 0;
}

.nav-item a:hover::after{
	opacity: 1;
}

@media screen and (min-width: 501px) and (max-width: 1024px){
	header .header-logo{
		padding: 0px 0px 0px 40px;
	}

	.nav-list{
		float:right;
		height: 36px;
		padding-right:24px;
	}
}


@media screen and (max-width: 500px){


	header .header-logo{
		padding: 0px 0px 0px 20px;
	}

	header .header-logo img{
		height: 23px;
		width: 73px;
	}

	.nav-trigger-btn{
		display: block;
		position: absolute;
		z-index: 9999;

		width: 23px;height: 23px;

		right: 20px;
		top: 36px;

		transition: .5s;
	}

	.nav-trigger-btn::before{
		display: block;
		content:'';
		position: absolute;
		width: 100%; height: 1px;
		background-color: #f0f0f0;
		top: 50%;
		left: 0;
		transform: translateY(-50%);

		transition: .7s;
	}

	.nav-trigger-btn::after{
		display: block;
		content:'';
		position: absolute;
		width: 1px; height: 100%;
		background-color: #f0f0f0;
		top: 0;
		left: 50%;
		transform: translateX(-50%);

		transition: .7s;
	}

	.nav-trigger-btn.nav-open{
		transform: rotate(-135deg);
	}

	.nav-trigger-btn.nav-open::after,
	.nav-trigger-btn.nav-open::before{
		background-color: #101010;
	}

	


	.nav-box{
		display: block;
		position: fixed;
		z-index: 9998;
		top:0;
		right: 0;
		width: 100vw;
		height: 100vh;
		background-color: #d9d9d9;

		overflow: hidden;

		width: 0;

		transition: .5s;
	}



	.nav-box::after{
		display: block;
		content:'';
		position: absolute;
		width: calc(100% - 48px);
		height: 1px;
		background-color: #101010;
		bottom: 175px;
		left: 50%;
		transform: translateX(-50%);
	}

	.nav-box .nav-box-logo{
		display: block;
		position: absolute;
		width: 36px;

		bottom: 190px;
		left: 50%;
		transform: translateX(-50%);
	}



	.nav-list-s{
		display: block;
		float:left;
		width: 100%;

		position: absolute;
		top: 50%;
		transform: translateY(calc(-50% - 35px));
	}

	.nav-list-s .nav-item{
		width: 100%;
	}
	.nav-list-s .nav-item a{
		width: 100%;
		text-align: center;
		line-height: 54px;
		color: #101010;
	}


	.nav-box.nav-open {
		width: 100vw;
		height: 100vh;
	}
}



.layout
{
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;

	overflow: hidden;
}

.layout section{
	display: block;
	width: 100%;
/*	height: 200px;*/
}



.banner{
	background-color: #333333;
	width: 100%;
	padding-bottom: 50%;
	overflow: hidden;
}

.banner .carousel{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0; left:0;
}

.banner .carousel-cell{
	width: 100%;height: 100%;
	background-color: #333333;
}


.banner .carousel-cell img{
	width: 100%; height: 100%;
}

.bnr-mask{
	width: 100%;height: 100%;
	background-color: #28292C;
	opacity: .46;
	display: block;
	position: absolute;
	left: 0; top: 0;
}

.bnr-mark{
	width: 100%;
	padding: 44px 54px;

	display: block;
	position: absolute;
	bottom: 0; left: 0;
}

.bnr-decorate{
	width: 100%;
	height: 36px;

	border-top: 1px solid #f0f0f0;
	border-left:  1px solid #f0f0f0;
	border-top-left-radius: 36px;
}

.bnr-text-box{
	padding-left: 54px;
}


.bnr-text-box img{
	float: left;
	display: block;

	width: 692px;
	height: 88px;
}

.bnr-text-box .bnr-text-img{
	display: block;
}

.bnr-text-box .bnr-text-img-rwd{
	display: none;
}

@media screen and (min-width: 501px) and (max-width: 1024px){
	.banner{
		width: 100vw; height: 100vh;
	}

	.banner .carousel-cell img{
		 height: 100%;
		 width: auto;
		 display: block;
		 position: absolute;
		 /*left: 50%;
		 transform: translateX(-50%);*/
	}

	.bnr-mark{
		width: 100%;
		padding: 40px 40px;

		display: block;
		position: absolute;
		top: auto; 
		left: 0;
		bottom: 0;
		transform: translateY(0);
	}


	.banner .bnr-text-box{
		padding-left: 0px;
	}

	.banner .bnr-text-box::after{
		display: block;
		position: absolute;
		content:'';
		width: 100%;
		height: 1px;
		background-color: #fff;

		top: -40px;
		left: 0;
	}


	.banner .bnr-decorate{
		display: none;
	}

}

@media screen and (max-width: 500px){
	
	header .nav-list{
		display: none;
	}

	.banner{
		width: 100vw; height: calc(100vh - 100px);
	}

	.banner .carousel-cell img{
		 height: 100%;
		 width: auto;
		 display: block;
		 position: absolute;
		 left: 50%;
		 transform: translateX(-50%);
	}

	.bnr-mark{
		width: 100%;
		padding: 20px 20px;

		display: block;
		position: absolute;

		top: auto;
		bottom: 20px;
		left: 0;
		transform: translateY(0);
	}


	.banner .bnr-text-box{
		padding: 0 0;
		width: 100%;
		float: left;
	}

	.banner .bnr-text-box::after{
		display: block;
		position: absolute;
		content:'';
		width: 100%;
		height: 1px;
		background-color: #fff;

		top: -20px;
		left: 0;
	}

	.banner .bnr-text-box img{
		width: 100%;
	}


	.banner .bnr-text-img{
		display: none;
	}

	.banner .bnr-text-img-rwd{
		display: block;
		width: 100%;
	}

	.banner .bnr-decorate{
		display: none;
	}


}


/*---------------------------------------*/
/* works */
/*---------------------------------------*/
.works{
	padding: 80px 0;
	width: 100%;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.works .works-title-box{
	
	padding-top: 64px;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}


.works .works-title-box::before{
	display:block;
	content:'';
	position: absolute;
	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	top:0;
	left:0;
}

.works-title{
	display: block;
	float: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;
	height: 48px;

}
.works-subtitle{
	display: block;
	float: right	;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 200;
	color: #3f3f3f;
	letter-spacing: 1px;

	text-align: right;
}


.works-showreel-box{
	width: 100%;
	float: left;

	padding-top: 40px;
	padding-bottom: 40px;

	display: block;
}

.works-showreel-box-rwd{
	display: none;
}

.works-showreel-box .carousel{
	width: 100%	;
	float: left;
}

.works-showreel-box .carousel-cell{
	width: 60%;
	padding: 0 16px;
	margin: 0;

/*	border: 1px solid red;*/

}

.works-showreel-box .work-card{
	width: 100%;
	padding-bottom: 60%;
	background-color: #333;
}


.works-showreel-box .work-card .work-pic{
	position: absolute;
	width: 100%;
	height: 100%;

	top: 0;
	left: 0;
}

.works-showreel-box .work-card .work-pic img{
	width: 100%;
	height: 100%;
}


.works-showreel-box .work-card .work-title-box{
	position: absolute;
	display: none;
	float:left;
	right: 36px;
	bottom: 26px;

	width: 400px;
}

.works-showreel-box .is-selected .work-card .work-title-box{
	display: block;
}

.works-showreel-box .work-card .work-title-box .work-title{
	display: block;
	width: 100%;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 18px;
	color: #3f3f3f;
	letter-spacing: 2px;
	font-weight: 100;

	right: 0;
	text-align: right;
}

.works-showreel-box .work-card .work-title-box .work-subtitle{
	display: block;
	width: 100%;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 12px;
	color: #3f3f3f;
	letter-spacing: 1px;
	font-weight: 100;

	right: 0;

	text-align: right;
}


.works-showreel-box .work-card  .work-link{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;

	top: 0; left: 0;
}

.works .works-viewmore{
	width: 100%;
	height: 14px;
/*	border: 1px solid red;*/
}

.works .works-viewmore-btn{
	display: block;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 36px;

	color: #3f3f3f;
	letter-spacing: 4px;
	font-weight: 700;
	width: 150px;
	margin: 0 auto;

	text-align: center;
}


.works .works-viewmore-btn::after{
	display: block;
	position: absolute;
	content:'';

	width: 100%;
	height: 1px;
	left:0;
	bottom: 0;

	background-color: #1f1f1f;
	transition: .7s;
	opacity: 0;
}

.works .works-viewmore-btn:hover::after{
	opacity: 1;
}

@media screen and (min-width:501px) and (max-width: 1024px){
	.works{
		padding: 64px 0;
	}

	.works .works-title-box{
		padding: 40px 40px 20px 40px;
	}

	.works .works-title-box::before{
		left: 40px;
	}

	.works-showreel-box .carousel-cell{
		width: 80%;
		padding: 0 16px;
		margin: 0;
	}

	.works .works-viewmore-btn{
		border: none;
		border-bottom: 1px solid #1f1f1f;

		text-align: center;
	}

	.works .works-title-box .works-subtitle{
		letter-spacing: 0px;
	}
}

@media screen and (max-width: 500px){

	.works{
		padding: 64px 0;
	}

	.works .works-title-box{
		padding-top: 40px;
		padding-bottom: 20px;
		flex-direction: column;
	}

	.works .works-title-box .works-title{
		width: 100%;
		text-align: center;

		font-size: 36px;
		line-height: 36px;
		margin-bottom: 16px;
	}

	.works .works-title-box::before{
		width: 80px;
		left: 50%;
		transform: translateX(-50%);
	}

	.works .works-title-box .works-subtitle{
		width: 100%;
		text-align: center;

		font-size: 12px;
		letter-spacing: 0px;
	}

	.works .works-showreel-box{
		display: none;
	}

	.works .works-showreel-box-rwd{
		width: 100%;
		display: block;

		flex-direction: column;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.works .work-card{
		width: 100%;
		float: left;

		margin-bottom: 20px;
	}

	.works .work-pic{
		width: 100%;
		float: left;
	}

	.works .work-pic img{
		display: block;
		float: left;
		width: 100%;
	}

	.works .work-card .work-title-box{
		position: relative;
		display: bloxk;
		float:left;

		width: 100%;
		padding: 20px 20px;	
	}

	.works .work-card .work-title-box .work-title{
		display: block;
		width: 100%;
		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 14px;
		margin-bottom: 8px;

		color: #3f3f3f;
		letter-spacing: 2px;
		font-weight: 100;

		right: 0;
		text-align: left;
		}

	.works .work-card .work-title-box .work-subtitle{
		display: block;
		width: 100%;
		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 12px;
		color: #3f3f3f;
		letter-spacing: 1px;
		font-weight: 100;

		right: 0;

		text-align: left;
	}


	.works .work-card .work-link{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		
		top:0; left:0;
	}

	.works .works-viewmore{
		width: 100%;
		height: auto;
		float: left;
	}

	.works .works-viewmore-btn{
		display: bloxk;
		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 36px;

		width: 130px;
		margin: 0 auto;

		color: #3f3f3f;
		letter-spacing: 3px;
		font-weight: 700;
		

		border: none;
		border-bottom: 1px solid #1f1f1f;

		text-align: center;
	}
	
}



.about{
	padding: 80px 0;
	width: 100%;
}

.about-bg{
	width: 100%;
/*	height: calc(100% - 120px);*/
	height: 600px;
	display: block;
	position: absolute;

	overflow: hidden;
}

.about-bg img{
	width: 100%;
	height: auto;
	position: absolute;
	/*top: 50%; 
	left: 50%;
	transform: translate(-50%, -50%);*/
	opacity: .6;
}

.about-bg-mask{
	width: 100%;
	height: 600px;
	display: block;
	position: absolute;
	bottom: 0; left: 0;

 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
 		                                    rgba(204, 204, 204, 0) 40%,
 		                                    rgba(204, 204, 204, 0) 60%,
 		                                    rgba(204, 204, 204, 1) 100%);
}

.aboutbox{
	padding-top: 64px;
	padding-bottom: 300px;
	width: 100%;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;



}

.aboutbox::before{
	display:block;
	content:'';
	position: absolute;
	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	top:0;
	right:0;
}

.aboutbox .about-info-box{
	width: 100%;

	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.about-title{
	display: block;
	float: right;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;
	height: 48px;
}

.abouttext-tc{
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 2px;
	color: #1f1f1f;

	margin-bottom: 21px;
}


.abouttext-en{
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 2px;
	color: #1f1f1f;
}


.about-icon-box{
	width: 100%;
	padding-top: 90px;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}


.about-icon{
	display: block;

	width: 48px;
	height: 34px;
}

@media screen and (min-width: 501px) and (max-width: 1024px){
	.about{
		padding: 64px 40px;
	} 

	.about-bg{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;

		top: 0;
		left: 0;

		overflow: hidden;
	}

	.about-bg img{
		height: 150%;
		width: auto;
		position: absolute;
		top: 50%; 
		left: 30%;
		transform: translate(-50%, -50%);
		opacity: .6;
	}

	.about-bg-mask{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0; left: 0;

	 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
	 		                                    rgba(204, 204, 204, 0) 40%,
	 		                                    rgba(204, 204, 204, 0) 60%,
	 		                                    rgba(204, 204, 204, 1) 100%);
	}

}




@media screen and (max-width: 500px){
	.about{
		padding: 64px 0;
		width: 100vw;
/*		height: 130vw;*/
	}

	.about-bg{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;

		top: 0;

		overflow: hidden;
	}

	.about-bg img{
		height: 100%;
		width: auto;
		position: absolute;
		top: 50%; 
		left: 30%;
		transform: translate(-50%, -50%);
		opacity: .6;
	}

	.about-bg-mask{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0; left: 0;

	 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
	 		                                    rgba(204, 204, 204, 0) 40%,
	 		                                    rgba(204, 204, 204, 0) 60%,
	 		                                    rgba(204, 204, 204, 1) 100%);
	}
	.aboutbox{
		padding: 40px 20px;

	}

	.aboutbox::before{
		display:block;
		content:'';
		position: absolute;
		width: 80px;
		height: 1px;
		background-color: #1f1f1f;

		top:0;
		/*left:50%;
		transform: translateX(-50%);*/
		left: 20px;
	}

	.aboutbox .about-info-box{
		width: 100%;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}


	.aboutbox .about-title{
		width: 100%;
		display: block;
		float: left;
		text-align: left;

		font-size: 36px;
		line-height: 36px;
		margin-bottom: 40px;
	}

	.aboutbox .abouttext-tc,
	.aboutbox .abouttext-en{
		width: 100%;
		display: block;
		float: left;
		font-size: 12px;
		letter-spacing: 0px;
		line-height: 24px;
		margin-bottom: 8px;

		text-align: left;
	}

	.aboutbox .abouttext-tc{
		letter-spacing: 1px;
	}

	.about-icon-box{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}


	.aboutbox .about-icon{
		display: block;

		width: 32px;
		height: 23px;
	}
}




.ourteam{
	width: 100%;
	padding-bottom: 120px;

/*	height: 768px;*/
}

.ourteam-bg{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;

	top: 0;
	left: 0;

	overflow: hidden;
}

.ourteam-bg img{
	width: 100%;
}

.ourteam-bg-mask{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0; left: 0;

 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
 		                                    rgba(204, 204, 204, 0) 40%,
 		                                    rgba(204, 204, 204, 0) 60%,
 		                                    rgba(204, 204, 204, 0) 100%);
}

.ourteam .ourteam-box{
	padding: 24px 0 40px 0;
}

.ourteam-box::before{
	display:block;
	content:'';
	position: absolute;
	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	top:0;
	left:0;
}




.ourteam .ourteam-title-box{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.ourteam .ourteam-title-box{
	
	padding-top: 40px;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.ourteam .ourteam-title{
	display: block;
	float: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;
	height: 48px;

}
.ourteam .ourteam-subtitle{
	display: block;
	float: right	;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 200;
	color: #3f3f3f;
	letter-spacing: 1px;

	text-align: right;
}


.ourteam .carousel {
/*  background: #FAFAFA;*/
}

.ourteam .carousel-cell {
  width: 100%;

  border-radius: 5px;
  counter-increment: carousel-cell;

  float: left;
}



.ourteam-cards{
	width: 100%;
	padding: 80px 0;
	float: left;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;

}

.ourteam-member-card{
	padding: 0 32px;
}


.ourteam-member-pic{
	width: 100%;
	padding-bottom: 100%;
	float: left;

	border-radius: 50%;

	background-color: #333;
	overflow: hidden;

	margin-bottom: 40px;
}

.ourteam-member-pic img{
	display: block;
	position: absolute;
	width: 100%;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ourteam-member-name{
	display: block;
	float: right	;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 1px;

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

.ourteam-member-title{
	display: block;
	float: right	;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 14px;
	font-weight: 200;
	color: #fff;
	letter-spacing: 1px;

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

@media screen and (min-width: 501px) and (max-width: 1024px){
	.ourteam{
		width: 100%;
		padding: 64px 40px;
		float: left;
	}

	.ourteam-box::before{
		display:block;
		content:'';
		position: absolute;
		width: 93px;
		height: 1px;
		background-color: #1f1f1f;

		top:0;
		left:0;
	}

	.ourteam .ourteam-title{
		letter-spacing: 1px;
	}

	.ourteam .ourteam-subtitle{
		letter-spacing: 0px;
	}
}


@media screen and (max-width: 500px){
	.ourteam{
		width: 100%;
		padding: 64px 0;

	/*	height: 768px;*/
	}



	.ourteam-bg{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.ourteam-bg img{
		height: 150%;
		width: auto;

		top: 120px;
		left: 50%;
		transform: translateX(-50%);


	}

	.ourteam-bg-mask{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0; left: 0;

	 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
	 		                                    rgba(204, 204, 204, 0) 40%,
	 		                                    rgba(204, 204, 204, 0) 60%,
	 		                                    rgba(204, 204, 204, 0) 100%);
	}


	.ourteam .ourteam-box{
		padding: 40px 0;
		float:left;
	}

	.ourteam-box::before{
		display:block;
		content:'';
		position: absolute;
		width: 80px;
		height: 1px;
		background-color: #1f1f1f;

		top:0;
		left: 50%;
		transform: translateX(-50%);
	}


	.ourteam .ourteam-title-box{
		padding-top: 0;
		width: 100%;
		display: block;
		float: left;
		padding: 0px 20px;

		margin-bottom: 20px;
	}

	.ourteam .ourteam-title{
		display: block;
		float: left;
		width: 100%;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 36px;
		line-height: 36px;
		height: auto;
		font-weight: 100;
		color: #3f3f3f;
		letter-spacing: 2px;

		margin-bottom: 16px;

		text-align: center;

	}
	.ourteam .ourteam-subtitle{
		display: block;
		float: left	;
		width: 100%;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 12px;
		line-height: 24px;
		font-weight: 200;
		color: #3f3f3f;
		letter-spacing: 0px;

		text-align: center;
	}

	.ourteam .carousel{
		margin-top: 120px;
	}

	.ourteam .flickity-viewport{
		width: 100%;
	}

	.ourteam .carousel-cell {
	display: block;
	  width: 100%;

/*	  height: 200px;*/

	  border-radius: 5px;
	  counter-increment: carousel-cell;

	  float: left;
	}



	.ourteam-cards{
		width: 100%;
		padding: 20px 0;
		float: left;

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.ourteam-member-card{
		margin-bottom: 40px;
	}

	.ourteam-member-pic{
		margin-bottom: 20px;
	}
}


.awards{
	padding: 80px 0;
	background-color: #cccccc;
}


.awards .awards-title-box{
	
	padding-top: 64px;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.awards .awards-title-box::before{
	display:block;
	content:'';
	position: absolute;
	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	top:0;
	left:50%;
	transform: translateX(-50%);
}

.awards-title{
	display: block;
	float: left;

	width: 100%;
	text-align: center;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;
	height: 48px;


	margin-bottom: 20px;

}
.awards-subtitle{
	display: block;
	float: left;

	width: 100%;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 200;
	color: #3f3f3f;
	letter-spacing: 1px;
	text-align: center;
}


.awards-box{
	width: 100%;
	padding: 80px 0 0px 0;
}


.awards-carousel {
/*  background: #EEE;*/
}

.awards-carousel-cell {
/*  width: 16.6666667%;*/
/*  height: 200px;*/
/*  margin-right: 10px;*/
/*  background: #8C8;*/
/*  border-radius: 5px;*/
  counter-increment: carousel-cell;

  padding: 0 60px;
}

.awards-carousel-cell.is-selected {
/*  background: #ED2;*/
}
.flickity-button.flickity-prev-next-button{
	background-color: rgba(255,255,255,0);
}

.flickity-button.flickity-prev-next-button.previous{
	left: -50px;
}
.flickity-button.flickity-prev-next-button.next{
	right: -50px;
}

.awards-img{
	width: 100%;
	padding-bottom: 100%;
/*	border: solid 1px red;*/
}

.awards-img img{
	height: 70%;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.awards-info-box{
	padding: 20px 0 40px 0;
	width: 100%;
	opacity: 1;
	transition: .7s;
}


.awards-year{
	display: block;
	width: 100%;

	text-align: center;

	font-family: 'Inter', sans-serif;
	font-size: 16px;
	line-height: 16px;
	font-weight: 700 ;
	letter-spacing: 3px;
	color: #1f1f1f;

	margin-bottom: 20px;
}

.awards-grade{
	display: block;
	width: 100%;

	text-align: center;

	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 14px;
	font-weight: 300 ;
	letter-spacing: 3px;
	color: #1f1f1f;
}

@media screen and (min-width: 501px) and (max-width: 1024px){
	.awards{
		padding: 64px 0px;
	}

	.awards .awards-title-box{
		padding-top: 40px;
		width: 100%;
	}

	.awards .awards-box{
		width: 100%;
		padding: 40px 0 0px 0;
	}

	.awards-carousel-cell {
	  padding: 0 20px;
	}


}



@media screen and (max-width: 500px){
	.awards-carousel-cell{
		padding: 0 12px;
	}

	.awards{
		padding: 64px 0 64px 0;
		background-color: #cccccc;
	}


	.awards .awards-title-box{
		
		padding-top: 40px;
		width: 100%;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.awards .awards-title-box::before{
		width: 80px;
	}

	.awards-title{
		display: block;
		float: left;

		width: 100%;
		text-align: center;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 36px;
		line-height: 36px;
		height: 36px;
		font-weight: 100;
		color: #3f3f3f;
		letter-spacing: 2px;


		margin-bottom: 20px;

	}
	.awards-subtitle{

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 12px;
		line-height: 24px;
		letter-spacing: 0px;
		text-align: center;
	}

	.awards-box{
		width: 100%;
		padding: 40px 0 0px 0;
	}

	.awards-info-box{
		padding: 20px 0 20px 0;
		width: 100%;
		opacity: 1;
		transition: .7s;
	}


	.awards-year{
		display: block;
		width: 100%;

		text-align: center;

		font-family: 'Inter', sans-serif;
		font-size: 14px;
		line-height: 14px;
		font-weight: 700 ;
		letter-spacing: 3px;
		color: #1f1f1f;

		margin-bottom: 14px;
	}

	.awards-grade{
		display: block;
		width: 100%;

		text-align: center;

		font-family: 'Inter', sans-serif;
		font-size: 12px;
		line-height: 18px;
		font-weight: 300 ;
		letter-spacing: 1px;
		color: #1f1f1f;
	}


}




.contact{
	width: 100%;
	padding: 80px 0;
	height: 800px;
}


.contact-bg{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;

	overflow: hidden;

	top:0;
}

.contact-bg img{
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;

	opacity: .7;
}

.contact-bg-mask{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0; left: 0;

 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
 		                                    rgba(204, 204, 204, 0) 30%,
 		                                    rgba(204, 204, 204, 0) 60%,
 		                                    rgba(204, 204, 204, 0) 100%);
}


.contact .contact-title-box{
	width: 100%;
	padding: 64px 0 40px 0;

	float: left;
}


.contact .contact-title-box::before{
	display:block;
	content:'';
	position: absolute;
	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	top:0;
	left:0;
}

.contact .contact-title{
	display: block;
	float: left;

	width: 100%;
	text-align: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;
	height: 48px;
}

.contact-box{
	width: 100%;
	float: left;
}

.contact-box .contact-com-name{

	display: block;
	float: left;

	width: 100%;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 14px;
	font-weight: 900;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 20px;
}

.contact-box .contact-com-info-box{
	display: block;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;

	margin-bottom: 16px;
}

.contact-box .info-box{
	width: 100%;
	float: left;

	margin-bottom: 14px;
}

.contact-box .info-box .info-title{
	display: inline-block;
	float: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: 600;
	color: #3f3f3f;
	letter-spacing: 2px;
}

.contact-box .info-box .info-context{
	display: inline-block;
	float: left;

	padding-left: 20px;
}

.contact-box .info-box .info-context p,
.contact-box .info-box .info-context a{
	display: inline-block;
	float: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: 200;
	color: #3f3f3f;
	letter-spacing: 2px;
}

.contact-box .info-box .info-context a{
	width: 100%;
}

.contact-box .contact-com-info-2 p{
	display: block;
	float: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: 200;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 14px;
}


.contact-box .contact-link-btn{
	display: block;
	float: left;

	left: 50%;

	width: 180px;
	height: 36px;

	border: 1px solid #3f3f3f;
	border-radius: 18px;

	background-color: rgba(63,63,63,0);

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 34px;
	font-weight: 900;
	color: #3f3f3f;
	letter-spacing: 2px;
	text-align: center;

	transition: .7s;
}

.contact-box .contact-link-btn:hover{
	color: #cccccc;
	background-color: rgba(63,63,63,1);
}


@media screen and (min-width: 501px) and (max-width: 1024px){
	.contact{
		width: 100%;
		padding: 64px 40px;
		padding-bottom: 100%; 
	}

	.contact-bg{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;

		overflow: hidden;

		top:0;
		left: 0;
		bottom: auto; 
		right: auto;
	}

	.contact-bg img{
		height: 120%;
		width: auto;
		display: block;
		position: absolute;
		top: 0;
		left: 0;

		opacity: .7;
	}

	.contact-bg-mask{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0; left: 0;

	 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
	 		                                    rgba(204, 204, 204, 0) 30%,
	 		                                    rgba(204, 204, 204, 0) 60%,
	 		                                    rgba(204, 204, 204, 0) 100%);
	}

	.contact-box .info-box .info-context p,
	.contact-box .info-box .info-context a{
		letter-spacing: 1px;
	}

	.contact-box .contact-com-info-2 p{
		letter-spacing: 1px;
	}

	.contact-box .contact-link-btn:hover{
		color: initial;
		background-color: initial;
	}
}

@media screen and (max-width: 500px){
	.contact{
		width: 100%;
		padding: 64px 20px;
		height: 100vh;
	}

	.contact-bg{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;

		overflow: hidden;

		top:0;
		left: 0;
	}

	.contact-bg img{
		height: 120%;
		width: auto;
		display: block;
		position: absolute;
		top: 0;
		left: 0;

		opacity: .7;
	}

	.contact-bg-mask{
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: 0; left: 0;

	 	background: linear-gradient(to bottom, rgba(204, 204, 204, 1) 0%,
	 		                                    rgba(204, 204, 204, 0) 30%,
	 		                                    rgba(204, 204, 204, 0) 60%,
	 		                                    rgba(204, 204, 204, 0) 100%);
	}

	.contact .contact-title-box{
		width: 100%;
		padding: 40px 0 40px 0;

		float: left;
	}


	.contact .contact-title-box::before{
		display:block;
		content:'';
		position: absolute;
		width: 80px;
		height: 1px;
		background-color: #1f1f1f;

		top:0;
		left:0;
	}

	.contact .contact-title{
		display: block;
		float: left;

		width: 100%;
		text-align: left;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 36px;
		line-height: 36px;
		font-weight: 100;
		color: #3f3f3f;
		letter-spacing: 2px;
		height: 36px;
	}

	.contact-box{
		width: 100%;
		float: left;
	}

	.contact-box .contact-com-name{

		display: block;
		float: left;

		width: 100%;
		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 14px;
		font-weight: 900;
		color: #3f3f3f;
		letter-spacing: 2px;

		margin-bottom: 20px;
	}

	.contact-box .contact-com-info-box{
		display: block;
		width: 100%;
		display: flex;
		flex-direction: column-reverse; 
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;

		margin-bottom: 40px;
	}

	.contact-box .info-box{
		width: 100%;
		float: left;

		margin-bottom: 14px;
	}

	.contact-box .info-box .info-title{
		display: inline-block;
		float: left;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 22px;
		font-weight: 600;
		color: #3f3f3f;
		letter-spacing: 2px;
	}

	.contact-box .info-box .info-context{
		display: inline-block;
		float: left;

		padding-left: 10px;
	}

	.contact-box .info-box .info-context p,
	.contact-box .info-box .info-context a{
		display: inline-block;
		float: left;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 18px;
		font-weight: 200;
		color: #3f3f3f;
		letter-spacing: 2px;
	}

	.contact-box .info-box .info-context a{
		width: 100%;
	}

	.contact-box .contact-com-info-2{
		margin-bottom: 40px;
	}

	.contact-box .contact-com-info-2 p{
		display: block;
		float: left;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 14px;
		font-weight: 200;
		color: #3f3f3f;
		letter-spacing: 1px;

		margin-bottom: 14px;
	}


	.contact-box .contact-link-btn{
		display: block;
		float: left;

		left: 50%;
		transform: translateX(-50%);

		width: 180px;
		height: 36px;

		border: 1px solid #3f3f3f;
		border-radius: 18px;

		background-color: rgba(63,63,63,0);

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 34px;
		font-weight: 900;
		color: #3f3f3f;
		letter-spacing: 2px;
		text-align: center;

		transition: .7s;
	}

	.contact-box .contact-link-btn:hover{
		color: initial;
		background-color: initial;
	}

}




.footer{
	width: 100%;
	padding: 23px 54px 36PX 54px;

	background-color: #f4f4f4;
	float: left;
}


.footer .footer-logo{
	display: block;
	float: left;
	height: 32px; width: 99px;

	margin-right: 95px;
}

.footer .footer-logo img{
	width: 100%; height: 100%;
}

.footer .footer-social-list{
	float: left;
	height: 32%; width: 137px;
	padding: 6px 0;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.footer .footer-social-link{
	display: block;
	height: 20px;
	float: left;
}

.footer .footer-social-link img{
	display: block;
	height: 20px;
	float: left;
}


.footer .copyright-box{
	display: block;
	float: left;
	width: 100%;
	text-align: center;

	margin-top: 32px;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: #888888;
	letter-spacing: 2px;
}

.footer .footer-nav-list{
	display: block;
	float: right;
	height: 32px;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.footer .footer-nav-link{
	display: block;
	float:left;
	height: 32px;

	
}

.footer .footer-nav-link a{
	display: block;
	float: left;

	padding: 0 15px;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 30px;
	font-weight: 300;
	color: #3c3c3c;
	letter-spacing: 2px;
}

.footer .footer-nav-link a::after{
	display: block;
	content: '';
	position: absolute;

	width: 100%;
	height: 1px;
	bottom: 0;
	left:0;

	background-color: #3c3c3c;

	opacity: 0;

	transition: .7s;
}

.footer .footer-nav-link a:hover::after{
	opacity: 1;

}

@media screen and (min-width: 501px) and (max-width: 1024px){
	.footer{
		padding: 20px 40px;
	}

	.footer .footer-logo{
		margin-right: 48px;
	}

	.footer .footer-social-list{
		width: 110px;
	}
}


@media screen and (max-width: 500px){
	.footer{
		padding: 20px;
	}

	.footer .footer-logo{
		width: 73px;
		height: 23px;

		float: left;
	}

	.footer .footer-logo img{
		width: 100%; height: 100%;
	}

	.footer .footer-social-list{
		padding: 0;
		float: right;
	}

	.footer .footer-social-link{
		width: 20px; height: 20px;
	}

	.footer .footer-nav-list{
		display: none;
	}
}



.subpage .banner{
	width: 100%;
	height: 350px;
	overflow: hidden;

	padding-bottom:0;
}


.subpage .bnr-page-title{
	display: block;
	position: absolute;
	left: 90px;
	bottom: 87px;

	font-family: 'Inter', sans-serif;
	font-size: 64px;
	font-weight: 100;
	color: #f0f0f0;
	letter-spacing: 4px;
}


@media screen and (max-width:1024px){
	.subpage .banner{
		height: 300px;
	}

	.subpage .bnr-pic{
		width: 100%;height: 100%;
	}

	.subpage .bnr-pic img{
		height: auto; width: 100%;
		display: block;
		position: absolute;
		top:0	;
		left: 50%;
		transform: translateX(-50%);
	}

	.subpage .bnr-mask{
		width: 100%; height: 100%;
	}

	.subpage .bnr-page-title{
		left: 24px;
		bottom: 50px;
		font-size: 40px;
	}
}


@media screen and (max-width:500px){
	.subpage .banner{
		height: 300px;
	}

	.subpage .bnr-pic{
		width: 100%;height: 100%;
	}

	.subpage .bnr-pic img{
		height: 100%; width: auto;
		display: block;
		position: absolute;
		top:0	;
		left: 50%;
		transform: translateX(-50%);
	}

	.subpage .bnr-mask{
		width: 100%; height: 100%;
	}

	.subpage .bnr-page-title{
		left: 24px;
		bottom: 50px;
		font-size: 40px;
	}
}


.projects-page{
	background-color: #d9d9d9;
}


.projects-page .banner{
	width: 100%;
	height: 400px;
}

.projects-page .banner .bnr-pic{
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
}

.projects-page .banner .bnr-pic img{
	width: 100%;
}


.projects-page .banner .bnr-page-title{
	width: 100%;
	display: block;
	position: relative;

	top:0;
	left: 0;
	padding-top: 220px	;

	font-family: 'Inter', sans-serif;
	font-size: 48px;
	font-weight: 100;
	color: #f0f0f0;
	letter-spacing: 4px;
}



.projects-page .works-box{
	padding: 100px 0 200px 0;
}


.projects-page .works-box-bg{
	display: block;
	position: absolute;
	width: 100vw;
	padding-bottom: 60%;

	bottom: 0;
	left: 50%;
	transform: translateX(-50%);

	overflow: hidden;
}

.projects-page .works-box-bg img{
	display: block;
	position: absolute;
	width: 100%;
	top:0;
	left: 0;

	opacity: .6;
}

.projects-page .works-box-bg-mask{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;

	background: linear-gradient(to bottom, rgba(217, 217, 217, 1) 0%,
 		                                    rgba(217, 217, 217, 0) 30%,
 		                                    rgba(217, 217, 217, 0) 60%,
 		                                    rgba(217, 217, 217, 0) 100%);
}


.projects-page .catalog-box{
	width: 100%;
	height: 30px;

}

.projects-page .catalog-navlist{
/*	border: solid 1px blue;*/
	text-align: center;
}

.projects-page .catalog-navitem{
	display: inline-block;
	padding: 0 18px;
	height: 28px;

	border-right: solid 1px #888888;
}

.projects-page .catalog-navitem:last-child{
	border-right: none;
}


.projects-page .catalog-navitem a{
	padding: 0 10px;

	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 28px;
	font-weight: 300;
	color: #1f1f1f;
	letter-spacing: 3px;
	transition: .7s;
}

.projects-page .catalog-navitem a::after{
	display: block;
	position: absolute;
	content: '';
	width: 100%;
	height: 1px;
	background-color: #1f1f1f;
	left: 0;
	bottom: -10px;

	transition: .7s;

	opacity: 0;
}


.projects-page .catalog-navitem a:hover::after{
	opacity: 1;
}

@media screen and (min-width: 501px) and (max-width:1024px){
	.projects-page .banner{
		width: 100%;
		height: 300px;
	}

	.projects-page .banner .bnr-page-title{
		padding-top: 170px;
		padding-left: 40px;
	}

	.projects-page .banner .bnr-page-title{
		width: 100%;
		display: block;
		position: relative;

		top:0;
		left: 0;
		padding-top: 150px;
		padding-left: 20px;

		font-family: 'Inter', sans-serif;
		font-size: 36px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 4px;
	}

	.projects-page .works-box{
		padding: 64px 0 64px 0;
	}


}

@media screen and (max-width: 500px){

	.projects-page{
		background-color: #d9d9d9;
	}


	.projects-page .banner{
		width: 100%;
		height: 250px;
	}

	.projects-page .banner .bnr-pic{
		display: block;
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
	}

	.projects-page .banner .bnr-pic img{
		width: 200%; height: auto;
		top: 0; left: 50%;
		transform: translateX(-50%);
	}


	.projects-page .banner .bnr-page-title{
		width: 100%;
		display: block;
		position: relative;

		top:0;
		left: 0;
		padding-top: 150px;
		padding-left: 20px;

		font-family: 'Inter', sans-serif;
		font-size: 36px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 4px;
	}

	.projects-page .works-box{
		padding: 64px 0 64px 0;
	}



	.projects-page .works-box-bg{
		display: block;
		position: absolute;
		width: 100vw;
		padding-bottom: 60%;

		bottom: 0;
		left: 50%;
		transform: translateX(-50%);

		overflow: hidden;
	}

	.projects-page .works-box-bg img{
		display: block;
		position: absolute;
		width: 100%;
		top:0;
		left: 0;

		opacity: .6;
	}

	.projects-page .works-box-bg-mask{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;

		background: linear-gradient(to bottom, rgba(217, 217, 217, 1) 0%,
	 		                                    rgba(217, 217, 217, 0) 30%,
	 		                                    rgba(217, 217, 217, 0) 60%,
	 		                                    rgba(217, 217, 217, 0) 100%);
	}


	.projects-page .catalog-box{
		width: 100%;
		height: 18px;
	}

	.projects-page .catalog-navitem{
		display: inline-block;
		padding: 0 4px;
		height: 18px;

		border-right: solid 1px #888;
	}

	.projects-page .catalog-navitem a{
		padding: 0 10px;

		font-family: 'Inter', sans-serif;
		font-size: 14px;
		line-height: 18px;
		font-weight: 300;
		color: #1f1f1f;
		letter-spacing: 1px;
		transition: .7s;
	}



}


.projects-page .works-list{
	width: 100%;
	padding: 64px 0 80px 0;
	margin: 0 -16px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.projects-page .work-card{
/*	height: 300px;*/
/*	border: solid 1px red;*/

	padding: 0px 16px;
	margin-bottom: 90px;
}


.projects-page .work-img{
	display: block;
	width: 100%;
	padding-bottom: 62%;
	overflow: hidden;

	margin-bottom: 22px;
}


.projects-page .work-img img{
	width: 100%;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	transition: 1s;
}


.projects-page .work-img:hover img{
	width: 120%; 
}

.projects-page .work-title{
	display: block;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	font-weight: 100;
	color: #f0f0f0;
	letter-spacing: 3px;
	margin-bottom: 14px;

	color: #1f1f1f;

	padding-left: 14px;
}

.projects-page .work-subtitle{
	display: block;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 12px;
	font-weight: 100;
	color: #f0f0f0;
	letter-spacing: 2px;

	color: #1f1f1f;

	padding-left: 14px;
}


.projects-page .work-new-tag{
	
	display: block;
	position: absolute;
	width: 34px;height: 44px;

	right: 30px;
	top: -5px;


}

.projects-page .work-new-tag img{
	display: block;
	width: 100%;height: 100%;
}

.projects-page .footer-info-box::before{
	display: block;
	content:'';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #1f1f1f;
	top: -50px;
}

@media screen and (min-width: 501px) and (max-width: 1024px){
	.projects-page .footer-info-box::before{
		display: none;
	}

	.projects-page .works-list{
		padding: 40px 0 80px 0;
		margin: 0;
	}

	.projects-page .work-card{
		margin-bottom: 40px;
	}

	.projects-page .work-title{
		display: block;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 3px;
		margin-bottom: 8px;

		color: #1f1f1f;

		padding-left: 20px;
	}

	.projects-page .work-subtitle{
		display: block;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 12px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 2px;

		color: #1f1f1f;

		padding-left: 20px;
	}
}

@media screen and (max-width: 500px){
	.projects-page .footer-info-box::before{
		display: none;
	}


	.projects-page .works-list{
		width: 100%;
		padding: 40px 0 80px 0;
		margin: 0 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.projects-page .work-card{
	/*	height: 300px;*/
	/*	border: solid 1px red;*/

		padding: 0px 0px;
		margin-bottom: 40px;
	}


	.projects-page .work-img{
		display: block;
		width: 100%;
		padding-bottom: 62%;
		overflow: hidden;

		margin-bottom: 22px;
	}


	.projects-page .work-img img{
		width: 100%;
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		transition: 1s;
	}


	.projects-page .work-img:hover img{
		width: 120%; 
	}

	.projects-page .work-title{
		display: block;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 3px;
		margin-bottom: 8px;

		color: #1f1f1f;

		padding-left: 20px;
	}

	.projects-page .work-subtitle{
		display: block;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 12px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 2px;

		color: #1f1f1f;

		padding-left: 20px;
	}

	.projects-page .footer-info-box::before{
		display: block;
		content:'';
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: #1f1f1f;
		top: -50px;
	}
}


.work-page{
	background-color: #f4f4f4;
}


.work-page .banner{
	width: 100%;
	height: 450px;
}

.work-page .banner .bnr-pic{
	width: 100%; height: 100%;
	display: block;
	position: absolute;
	left: 0; top: 0;
}

.work-page .banner .bnr-pic img{
	width: 100%;
}


.work-page .bnr-page-title-box{
	display: block;
	float: left;
	width: 100%;
	max-width: 1200px;

	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 87px;
}

.work-page .bnr-work-title{
	display: block;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 50px;
	font-weight: 300;
	color: #f0f0f0;
	letter-spacing: 4px;
}

.work-page .bnr-work-subtitle{
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 100;
	color: #f0f0f0;
	letter-spacing: 3px;
}


@media screen and (min-width: 501px) and  (max-width: 1024px){
	.work-page .banner{
		height: 300px;
	}


	.work-page .banner .bnr-pic img{
		width: auto; height: 100%;
	}

	.work-page .bnr-page-title-box{
		display: block;
		float: left;
		width: 100%;
		max-width: 1200px;

		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 60px;
	}

	.work-page .bnr-work-title{
		display: block;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 36px;
		font-weight: 300;
		color: #f0f0f0;
		letter-spacing: 2px;
		padding-left: 40px;
	}

	.work-page .bnr-work-subtitle{
		display: block;
		font-family: 'Inter', sans-serif;
		font-size: 24px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 1px;
		padding-left: 40px;
	}
}


@media screen and (max-width: 500px){
	.work-page .banner{
		height: 300px;
	}


	.work-page .banner .bnr-pic img{
		width: auto; height: 100%;
	}

	.work-page .bnr-page-title-box{
		display: block;
		float: left;
		width: 100%;
		max-width: 1200px;

		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80px;
	}

	.work-page .bnr-work-title{
		display: block;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 28px;
		font-weight: 300;
		color: #f0f0f0;
		letter-spacing: 2px;
		padding-left: 20px;
	}

	.work-page .bnr-work-subtitle{
		display: block;
		font-family: 'Inter', sans-serif;
		font-size: 14px;
		font-weight: 100;
		color: #f0f0f0;
		letter-spacing: 1px;
		padding-left: 20px;
	}
}





.work-page .work-text-box{
	padding: 96px 0;
}

.work-page .work-text{
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-weight: 200;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 28px;
	letter-spacing: 2px;
	display: block;
	float: left;
	width: 100%;
	padding: 60px 0 96px;
}

.work-page .work-img-box{
	width: 100%;
	padding: 0;
	padding-top: 36px;
}

.work-page .work-img-box .work-img-link{
	width: 100%;
	float: left;
	margin-bottom: 36px;

	display: block;
	float: left;
}

.work-page .work-img-box .work-img-link.vrt-img-left{
	width: calc(50% - 18px);
	margin-right: 18px;
}

.work-page .work-img-box .work-img-link.vrt-img-right{
	width: calc(50% - 18px);
	margin-left: 18px
}

.work-page .work-img-box .work-img-link.vrt-img-left img{
	aspect-ratio: 9 / 12;
}

.work-page .work-img-box .work-img-link.vrt-img-right img{
	aspect-ratio: 9 / 12;
}


.work-page .work-img-box img{
	display: block;
	float: left;
	width: 100%;
}

.lightbox .lb-image{
	border: 0;
}


.work-page .work-btn-box{
	height: 14px;
	margin-top: 14px;
	margin-bottom: 200px;
}


.work-page .work-back-btn{
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 2px;

	float: left;
}


.work-page .work-contact-btn{
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 2px;

	float: right;
}

.work-page .work-btn-box a::after{
	display: block;
	position: absolute;
	content: '';

	width: calc(100% + 16px);
	height: 1px;
	background-color: #1f1f1f;

	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);

	transition: .7s;

	opacity: 0;
}

.work-page .work-btn-box a:hover::after{
	opacity: 1;
}




.work-page .footer-info-box::before{
	display: block;
	content:'';
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: #1f1f1f;
	top: -50px;
}



@media screen and (min-width: 501px) and  (max-width: 1024px){
	.work-page .work-text-box{
		padding: 40px 0px;
	}


	.work-page .work-text{
		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-weight: 200;
		color: #1f1f1f;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: 1px;

		padding: 60px 40px 60px;
	}

	.work-page .work-img-box{
		width: 100%;
		padding: 0 0;
	}


	.work-page .work-img-box img{
		width: 100%;
	}


	.work-page .work-btn-box{
		width: 100%;
		padding: 0 24px;
		float: left;
		margin-top:24px;
		margin-bottom: 100px;
	}


	.work-page .work-back-btn{
		display: block;
		float: left;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		color: #1f1f1f;
		font-size: 14px;
		line-height: 28px;
		letter-spacing: 2px;

		text-align: center;

		padding: 0px 8px;
		width: auto;

		
	}

	.work-page .work-back-btn::before{
		display: block;
		content:'';
		width: 100%;height: 1px;	
		position: absolute;
		left: 0; bottom: 0; top: auto;
		background-color: #1f1f1f;

		border: none;
	}


	.work-page .work-contact-btn{
		display: block;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		color: #1f1f1f;
		font-size: 14px;
		line-height: 28px;
		letter-spacing: 2px;

		width: 100px;
		text-align: center;

		float: right;

		margin-top: 0
	}


	.work-page .work-contact-btn::before{
		display: block;
		content:'';
		width: 100%;height: 1px;	
		position: absolute;
		left: 0; bottom: 0; top: auto;
		background-color: #1f1f1f;

		border: none;
	}


	.work-page .footer-info-box::before{
		display: none;
	}
}


@media screen and (max-width: 500px){
	.work-page .work-text-box{
		padding: 40px 0px;
	}

	.work-page .work-text{
		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-weight: 200;
		color: #1f1f1f;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: 1px;

		padding: 60px 20px 60px;
	}

	.work-page .work-img-box{
		width: 100%;
		padding: 0 0;
	}

	.work-page .work-img-box .work-img-link{
		width: 100%;
		float: left;
	}



	.work-page .work-img-box img{
		width: 100%;
	}


	.work-page .work-btn-box{
		width: 100%;
		padding: 0 24px;
		float: left;
		margin-top:24px;
		margin-bottom: 100px;
	}


	.work-page .work-back-btn{
		display: block;
		float: left;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		color: #1f1f1f;
		font-size: 14px;
		line-height: 28px;
		letter-spacing: 2px;

		text-align: center;

		padding: 0px 8px;
		width: auto;

		
	}

	.work-page .work-back-btn::before{
		display: block;
		content:'';
		width: 100%;height: 1px;	
		position: absolute;
		left: 0; bottom: 0; top: auto;
		background-color: #1f1f1f;

		border: none;
	}


	.work-page .work-contact-btn{
		display: block;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
		color: #1f1f1f;
		font-size: 14px;
		line-height: 28px;
		letter-spacing: 2px;

		width: 100px;
		text-align: center;

		float: right;

		margin-top: 0
	}


	.work-page .work-contact-btn::before{
		display: block;
		content:'';
		width: 100%;height: 1px;	
		position: absolute;
		left: 0; bottom: 0; top: auto;
		background-color: #1f1f1f;

		border: none;
	}


	.work-page .footer-info-box::before{
		display: none;
	}
}


.contact-page{
	background-color: #d9d9d9;
}

.contact-page header .nav-list .nav-item a{
	color: #1f1f1f;
}

.contact-page header .nav-list .nav-item a::after{
	background-color: #1f1f1f;
}


.contact-page .contact{
	padding: 160px 0 250px 0;
	height: auto;
}

.contact-page .contact-bg{
	display: block;
	position: absolute;
	width: 100vw;
	height: auto;
	padding-bottom: 60%;

	top: auto;
	bottom: 0;

	left: 50%;
	transform: translateX(-50%);

	overflow: hidden;
}

.contact-page .contact-bg img{
	display: block;
	position: absolute;
	width: 100%;

	bottom: 0;
	left: 0;

	opacity: .6;
}

.contact-page .contact-bg-mask{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;

	background: linear-gradient(to bottom, rgba(217, 217, 217, 1) 0%,
 		                                    rgba(217, 217, 217, 0) 30%,
 		                                    rgba(217, 217, 217, 0) 60%,
 		                                    rgba(217, 217, 217, 0) 100%);
}


.contact-page .contact-box{
	display: block;
	float: left;
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}


.contact-page .contact-info-box{
	display: flex;

	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

}

.contact-page .contact-title{
	display: block;
	float: left;

	width: 100%;
	text-align: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;
	height: 48px;

	margin-bottom: 140px;
}


.contact-page .contact-com-info-box{
	width: 100%;
	display: flex;

	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

}

.contact-page .contact-com-info-2{
	width: 100%;
	float: left;

	padding-bottom: 120px;

	margin-bottom: 70px;
}

.contact-page .contact-com-info-2::after{
	display:block;
	content:'';
	position: absolute;
	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	bottom:0;
	left:0;
}

.contact-page .contact-com-info-2 p{
	display: block;
	float: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 22px;
	font-weight: 200;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 14px;
}



.contact-page .contact-form{
	padding: 0
}





.contact-page form p{
	display: block;
	width: 100%;

	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 300;
	color: #1f1f1f;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 2px;
	padding-left: 25px;

	margin-bottom: 8px;
}

.contact-page form input,
.contact-page form textarea{
	width: 100%;
}


.contact-page form input,
.contact-page form select{
	height: 40px;
	font-size: 14px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 38px;
	padding: 0 25px;
	letter-spacing: 2px;

	background-color: #E0E0E0;	
	border: 1px solid #888888;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;

	margin-bottom: 28px;

	color: #1f1f1f;
}


.contact-page form select{
	padding-right: 20px;
	width: 100%	;
	appearance: none;

	/* background: url('../images/select-apperance.svg') calc(100% - 10px) center no-repeat ; */
}


.contact-form textarea{
	display: block;
	width: 100%;
	height: 300px;
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 28px;
	padding: 20px 25px;
	letter-spacing: 1px;
	text-align: justify;

	background-color: #E0E0E0;	
	border: none;
/*	border: 1px solid #333333;*/
	
/*	color: #757575;*/

	border: 1px solid #888888;
	border-top-left-radius: 25px;
	border-bottom-right-radius: 25px;
/*	border-right: 1px solid #333333;;*/
/*	border-left: 1px solid #333333;;*/
}

.contact-form textarea::-webkit-input-placeholder {
  color: #101010;
}

.contact-form input:focus,
.contact-form textarea:focus{
	outline: none;
}


.contact-form .submit-btn-box{
	display: block;
	float: right;
	border: 1px solid #3f3f3f;
	border-radius: 19px;
	margin-top: 28px;

	width: 180px;
	height: 38px; 

	transition: .7s;
}



.contact-form .submit-btn{
	display: block;
	width: 100%;
	height: 100%;

	border: none;

	background-color: rgba(255, 255, 255, 0);
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 16px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 1px;
	
	text-align: center;
	

	border-radius: 0;
	overflow: visible;

	transition: .7s;

}

.contact-form .submit-btn-box:hover{
	background-color: #3f3f3f;
}



.contact-form .submit-btn-box:hover .submit-btn{
	color: #ccc;
}



@media screen and (min-width: 501px) and (max-width: 1024px){
	.contact-page .contact{
		padding-left: 40px;
		padding-right: 40px;
		height: auto;
	}

	.contact-page .contact-title{
		margin-bottom: 40px;
	}

	.contact-page .contact-com-info-2{
		width: 100%;
		float: left;

		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	.contact-page .contact-com-info-2 p{
		font-size: 12px;
		line-height: 12px;
		letter-spacing: 1px;
		margin-bottom: 12px;
	}

	.contact-page .info-box .info-title,
	.contact-page .info-box .info-context p,
	.contact-page .info-box .info-context a{
		font-size: 12px;
	}

	.contact-page form p{
		font-size: 12px;
	}

	.contact-page form input,
	.contact-page form select{
		font-size: 12px;
		height: 36px;
		line-height: 32px;	
	}

	/*.contact-form .submit-btn{
		margin-top: 28px;
		margin-right: 18px;

		display: block;
		float: right;

		border: none;

		width: 80px;
		height: 16px;

		padding: 0;


		font-family: 'Noto Sans TC', sans-serif;
		font-size: 16px;
		line-height: 16px;
		font-weight: 500;
		letter-spacing: 1px;
		
		text-align: center;
		

		border-radius: 0;
		overflow: visible;


	}

	.contact-form .submit-underline{
		display: block;
		position: absolute;	

		float: right;
		width: 80px;
		height: 1px;
		background-color: #1f1f1f;

		

		right: 18px;
		bottom: -60px;

		opacity: 1;

		transition: .7s;
	}

	.contact-form .submit-btn:hover + .submit-underline{
		opacity: 1;
	}*/


}

@media screen and (max-width: 500px){
	.contact-page{
		background-color: #d9d9d9;
	}

	.contact-page .nav-trigger-btn::before,
	.contact-page .nav-trigger-btn::after{
		background-color: #1f1f1f;
	}

	.contact-page .contact{
		padding: 104px 0 150px 0;
		height: auto;
	}

	.contact-page .contact-bg{
		display: block;
		position: absolute;
		width: 100vw;
		height: auto;
		padding-bottom: 60%;

		top: auto;
		bottom: 0;

		left: 50%;
		transform: translateX(-50%);

		overflow: hidden;
	}

	.contact-page .contact-bg img{
		display: block;
		position: absolute;
		width: 100%;

		bottom: 0;
		left: 0;

		opacity: .6;
	}

	.contact-page .contact-bg-mask{
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;

		background: linear-gradient(to bottom, rgba(217, 217, 217, 1) 0%,
	 		                                    rgba(217, 217, 217, 0) 30%,
	 		                                    rgba(217, 217, 217, 0) 60%,
	 		                                    rgba(217, 217, 217, 0) 100%);
	}


	.contact-page .contact-box{
		display: block;
		float: left;
		width: 100%;

		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;

		padding: 0px 20px;
	}


	.contact-page .contact-info-box{
		display: flex;

		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;

	}

	.contact-page .contact-title{
		display: block;
		float: left;

		width: 100%;
		text-align: left;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 36px;
		line-height: 36px;
		font-weight: 100;
		color: #3f3f3f;
		letter-spacing: 2px;
		height: 36px;

		margin-bottom: 40px;
	}


	.contact-page .contact-com-info-box{
		width: 100%;
		display: flex;

		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
	}


	.contact-page .contact-com-info-2{
		width: 100%;
		float: left;

		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	.contact-page .contact-com-info-2::after{
		display:block;
		content:'';
		position: absolute;
		width: 80px;
		height: 1px;
		background-color: #1f1f1f;

		bottom:0;
		left:0;
	}

	.contact-page .contact-com-info-2 p{
		display: block;
		float: left;

		font-family: 'Inter', 'Noto Sans TC', sans-serif;
		font-size: 14px;
		line-height: 14px;
		font-weight: 200;
		color: #3f3f3f;
		letter-spacing: 1px;

		margin-bottom: 14px;
	}

	.contact-page .contact-com-info-1 .info-context p{
		font-size: 14px;
	}


	.contact-page .contact-form{
		padding: 0
	}


	.contact-page form p{
		display: block;
		width: 100%;

		font-family: 'Noto Sans TC', sans-serif;
		font-weight: 300;
		color: #1f1f1f;
		font-size: 14px;
		line-height: 14px;
		letter-spacing: 2px;
		padding-left: 25px;

		margin-bottom: 8px;
	}

	.contact-page form input,
	.contact-page form select,
	.contact-page form textarea{
		width: 100%;
	}


	.contact-page form input,
	.contact-page form select{
		height: 40px;
		font-size: 14px;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 18px;
		line-height: 38px;
		padding: 0 25px;
		letter-spacing: 2px;

		border-top-left-radius: 20px;
		border-bottom-right-radius: 20px;

		margin-bottom: 28px;

	}

	.contact-form textarea{
		display: block;
		width: 100%;
		height: 300px;
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 18px;
		line-height: 28px;
		padding: 20px 25px;
		letter-spacing: 1px;
		text-align: justify;

		border: none;
	/*	border: 1px solid #333333;*/
		
	/*	color: #757575;*/

		border: 1px solid #888888;
		border-top-left-radius: 25px;
		border-bottom-right-radius: 25px;
	/*	border-right: 1px solid #333333;;*/
	/*	border-left: 1px solid #333333;;*/
	}

	.contact-form textarea::-webkit-input-placeholder {
	  color: #101010;
	}

	.contact-form input:focus,
	.contact-form textarea:focus{
		outline: none;
	}

	.contact-form .submit-btn {
		background-color: rgba(255, 255, 255, 0);
	}
	/*.contact-form .submit-btn{
		margin-top: 28px;
		margin-right: 18px;

		display: block;
		float: right;

		border: none;

		width: 80px;
		height: 16px;

		padding: 0;


		font-family: 'Noto Sans TC', sans-serif;
		font-size: 16px;
		line-height: 16px;
		font-weight: 500;
		letter-spacing: 1px;
		
		text-align: center;
		

		border-radius: 0;
		overflow: visible;

		color: #1f1f1f;


	}

	.contact-form .submit-underline{
		display: block;
		position: absolute;	

		float: right;
		width: 80px;
		height: 2px;
		background-color: #1f1f1f;

		

		right: 18px;
		bottom: -60px;

		opacity: 1;

		transition: .7s;
	}

	.contact-form .submit-btn:hover + .submit-underline{
		opacity: 1;
	}*/
}



/* proecess page */
.process-page{
	background-color: #d9d9d9;
}

.process-page header .nav-list .nav-item a{
	color: #1f1f1f;
}

.process-page header .nav-list .nav-item a::after{
	background-color: #1f1f1f;
}


.process-page .process{
	padding: 160px 0 500px 0;
	height: auto;

	width: 100%;
}

.process-page .process-bg{
	display: block;
	position: absolute;
	width: 100vw;
	height: auto;
	padding-bottom: 60%;

	top: auto;
	bottom: 0;

	left: 50%;
	transform: translateX(-50%);

	overflow: hidden;
}

.process-page .process-bg img{
	display: block;
	position: absolute;
	width: 100%;

	bottom: 0;
	left: 0;

	opacity: .6;
}

.process-page .process-bg-mask{
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;

	background: linear-gradient(to bottom, rgba(217, 217, 217, 1) 0%,
 		                                    rgba(217, 217, 217, 0) 30%,
 		                                    rgba(217, 217, 217, 0) 60%,
 		                                    rgba(217, 217, 217, 0) 100%);
}

.process-page .process-box,
.process-page .pricing-box{
	display: block;
	float: left;
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}




.process-page .process-info-box,
.process-page .pricing-info-box{
	display: flex;

	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

}

.process-page .process-title,
.process-page .pricing-title{
	display: block;
	float: left;

	width: 100%;
	text-align: left;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 48px;
	line-height: 48px;
	font-weight: 100;
	color: #3f3f3f;
	letter-spacing: 2px;

	padding-bottom: 60px;
	margin-bottom: 60px
}


.process-page .process-title::after,
.process-page .pricing-title::after{
	display: block;
	position: absolute;
	content:'';

	width: 93px;
	height: 1px;
	background-color: #1f1f1f;

	left: 0;  bottom: 0;
}

.process-page .process-steps-title p{
	display: block;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: 300;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 14px;
}


.process-page .process-steps-title{
	margin-bottom: 60px;
}

.process-page .process-steps-box{
	width: 100%;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	margin-bottom: 40px;
}

.process-page .process-steps-left,
.process-page .process-steps-right{
/*	border: 1px solid red;*/
/*	height: 100px;*/


	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;


}



.process-page .process-step{
	width: 100%;
	display: flex;

	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	margin-bottom: 58px;
}


.process-page .process-step::after{
	display: block;
	content: '';
	position: absolute;
	width: 1px; height: 36px;
	background-color: #333;
	top: 100%;
	left: 25px;
}


.process-page .process-step:last-child::after{
	display: none;
}


.process-page .process-step .ps-icon{
	width: 50px;
	height: 26px;

/*	border: 1px solid green;*/
}

.process-page .process-step .ps-icon img{
	height: 26px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}


.process-page .process-step .ps-index{
	margin: 5px 18px 5px 0;
	width: 16px; height: 16px;
	border: 1px solid #333;
	border-radius: 8px;

	color: #333;
	text-align: center;
	line-height: 14px;
	font-size: 11px;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
}

.process-page .process-step .ps-info{
	width: calc(100% - 50px - 26px);

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

/*	border: 1px solid green;*/
}


.process-page .process-step .ps-info .ps-title{
	display: block;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-weight: 300;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 14px;
}

.process-page .process-step .ps-info .ps-content{
	display: block;
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 300;
	color: #3f3f3f;
	letter-spacing: 2px;

/*	margin-bottom: 14px;*/
}

.process-page .pricing-info{
	

	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;

	padding-bottom: 60px;
	margin-bottom: 60px;
}

.process-page .pricing-info::after{
	display: block;
	content:'';
	position: absolute;
	background-color: #1f1f1f;

	height: 1px; width: 93px;
	bottom: 0; left:0;
}

.process-page .pricing-info:last-child::after{
	display: none;
}


.process-page .pricing-info .pi-title{
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 16px;
	line-height: 14px;
	font-weight: 400;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 24px;
}

.process-page .pricing-info .pi-content{
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: 300;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 16px;
}


.process-page .pricing-info .pi-comment{
	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-bottom: 16px;

	display: block;
}

.process-page .pricing-info .pi-comment li{
/*	list-style-type:disc;*/
}


.process-page .link-contact-btn{
	display: block;
	width: 180px;
	height: 38px;

	border: 1px solid #333;
	border-radius: 19px;

	font-family: 'Inter', 'Noto Sans TC', sans-serif;
	font-size: 14px;
	line-height: 36px;
	font-weight: 900;
	color: #3f3f3f;
	letter-spacing: 2px;

	margin-top: 60px;
	text-align: center;

	transition: .7s;
}

.process-page .link-contact-btn:hover{
	background-color: #333;
	color: #ccc;
}

@media screen and (max-width: 1024px){
	.process-page .nav-trigger-btn::before,
	.process-page .nav-trigger-btn::after{
		background-color: #1f1f1f;
	}

	.process-page .process{
		padding-left: 40px;
		padding-right: 40px;
	}


}


@media screen and (max-width: 900px){
	.process-page .process{
		padding-left: 40px;
		padding-right: 40px;
		padding-bottom: 250px;
	}

	.process-page .process-steps-box{
		width: 100%;

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;

		margin-bottom: 40px;
	}

	.process-page .process-steps-left,
	.process-page .process-steps-right{
		width: 100%;
	}

	.process-page .process-steps-left .process-step:last-child::after{
		display: block;
	}

}

@media screen and (max-width: 500px){
	.process-page .process{
		padding-left: 20px;
		padding-right: 20px;
	}

	

}