@charset "utf-8";	
body{
	background: #e6e5e3;

}
.headercolor1{
		background: #a8a8a8;
	}
	.headercolor2{
		background: #e6e5e3;
	}

@media screen and (min-width: 1441px) {
	header{
		position: fixed;
		height: 120px;
		background: #e6e5e3;
		z-index: 1000;
	}	
	article{
		padding-top: 200px;
	}
	
	#ServiceForm{
		width: 100%;
		background: #e6e5e3;
		padding-bottom: 120px;
	}
	#Service{
		/* width: calc(100% - 160px); */
		max-width: 1760px;
		/* min-width: 1300px; */
		height: 562px;
		margin: 0 auto;
		border: 1px solid #a8a8a8;
		padding-top: 87px;
		border-left: none;
		border-right: none;
	}
	#ServiceTitleMenu{
		max-width: 1400px;
		height: 110px;	
		box-sizing: border-box;
		margin: 0 auto;
		padding-left: 50px;

	}
	#ServiceTitleMenuText1{
		width: 326px;
		font-size: 60px;
		
		font-weight: 200;
		font-style:italic;
		text-transform: uppercase;	
		float: left;
		letter-spacing: 1.3px;
	}
	#ServiceTitleMenuText2{
		width: 400px;
		font-size: 26px;
		font-weight: 400;
		float: left;
		letter-spacing: 6.8px;
		padding-top: 15px;
	}
	#ServiceTitleMenuText3{
		width: 450px;
		line-height: 25px;
		font-size: 12px;
		
		font-weight: 200;	
		padding-top: 12px;
		float: right;
		color: #a8a8a8;
		letter-spacing: 0.7px;
		padding-right: 50px;
		box-sizing: border-box;
	}
	#ServiceList{
		width: 100%;
		height: 400px;
		
	}
	#ServiceListForm{
		width: 100%;
		height: 400px;
		display:flex;
		justify-content: center;
		align-items: center;
	}

	.ServiceItem{
		width: 300px;
		height: 300px;
		background: #FFF;
		border-radius: 50%;	
		padding-top: 117px;
		box-sizing: border-box;	
		cursor: pointer;
		margin-left: -12.5px;
		margin-right: -12.5px;
		text-decoration: none;
		color: #000;
		transition: all 0.2s linear;
	
		
	}
	.ServiceItem:hover{
		width: 320px;
		height: 320px;	
		background: #c7c3bc;
		border-radius: 0%;
		margin-left: -22.5px;
		margin-right: -22.5px;	
		z-index: 100;
		padding-top: 127px;
		transition: all 0.2s linear ;		
	}

	.ServiceActive{
		width: 320px;
		height: 320px;	
		background: #c7c3bc;		
		border-radius: 0%;
		margin-left: -22.5px;
		margin-right: -22.5px;	
		padding-top: 127px;
		z-index: 110 !important;
		transition: all 0.2s linear;	
		
		
	}
	.ItemText1{
		width: 100%;
		height: 58px;
		font-size: 28px;
		font-weight: 400;
		text-align: center;
		display: block;
		letter-spacing: 2.5px;
	}
	.ItemText2{
		width: 100%;
		height: 40px;
		font-size: 20px;
		font-style: italic; 
		font-weight: 200;
		font-style: italic;              
		text-align: center;
		transition: all 0.2s linear;
		letter-spacing: 0.7px;
	}
	.ServiceItem:hover > .ItemText2{
		font-style:normal;   
		transition: all 0.2s linear;
		font-style: italic; 
	}
	#ServiceTitleForm{
		width: 100%;
		min-height: 450px;
		margin-top: 100px;
		padding-bottom: 200px;

	}
	#ServiceTitle{
		max-width: 1400px;		
		box-sizing: border-box;
		margin: 0 auto;
		padding-bottom: 200px;
		padding-left: 50px;
		padding-right: 0px;
		box-sizing: border-box;
	}
	#ServiceTitle:after{
		content: ".";
		visibility: hidden;
		display: block;
		height: 0;
		clear: both; 
	}
	#ServiceTitleLeft{
		width: 300px;
		height: 450px;
		float: left;
		padding-top: 94px;
		padding-left: 50px;

		box-sizing: border-box;
	}
	#ServiceTitleRight{
		width: calc(100% - 300px);
		max-width: 1000px;
		height: 450px;
		float: right;
	}

	#TitleName{
		width: 250px;
		height: 91px;
		font-size: 32px;
		border-bottom: 2px solid #a8a8a8;
		font-weight: 400;
		letter-spacing: 6px;
	}
	#TitleNameEn{
		width: 100px;
		height: 100px;
		font-size: 50px;
		
		font-weight: 200;
		font-style: italic;  
		padding-top: 40px;
	}
	#ServiceTitleText{
		width: 410px;
		font-weight: 400;
		line-height: 32px;
		margin-top: 95px;
		margin-left: 100px;
		letter-spacing: 1.5px;
		color: #FFF;
		position: absolute;
		text-align: justify;
	}
	#ServiceTitleBg{
		max-width: 1000px;
		height: 450px;
	}
	#ServiceTitleBg img{
		width: 100%;
	}
	#ServiceImg1{
		width: 100%;
		min-height: 100px;
		text-align: center;
	}
	#ServiceImg1 img{
        width: 1100px;
    }
	#MarkForm{
		width: 100%;
		padding-top: 200px;
		background: #a8a8a8;
		padding-bottom: 140px;
	}
	.Mark, .Mark1{
		width: 1300px;	
		height: auto;
		margin: 0 auto;	


	}
	.Mark:after, .Mark1:after{
		content: ".";
		visibility: hidden;
		display: block;
		height: 0;
		clear: both; 
	}
	.MarkLeft,.MarkLeft1{
		width: 50px;
		height: 100%;		
		float: left;
		margin-left: 50px;
		
		padding-top: 30px;
	}

	.MarkRight,.MarkRight1{
		width: 1100px;
		float: right;	
		margin-right: 50px;
	}
	.MarkLeftText, .MarkLeftText1{
		width: 30px;
		font-size: 26px;
		font-weight: 400px;
		padding-bottom: 30px;
		font-weight: normal;
		-webkit-writing-mode: vertical-lr;
		writing-mode: vertical-lr;
		letter-spacing: 6px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
	}
	.MarkRight:after, .MarkRight:after{
		content: ".";
		visibility: hidden;
		display: block;
		height: 0;
		clear: both; 
	}
	.MarkImg1{
		width: 510px;
		margin-bottom: 50px;


	}	
	.MarkImg1:nth-child(odd){
		float: left;
	}
	.MarkImg1:nth-child(even){
		float: right;
	}


	.MarkLeftLine, .MarkLeftLine1{
		width: 15px;
		border-right: 2px solid #d4d4d4;
		position: absolute;


	}	
	.Space{
		max-width: 1760px;
		height: 1px;
		background: #FFF;
		margin: 0 auto;
		margin-top: 100px;
		margin-bottom: 150px;


	}
	.MarkImg{
		width: 100%;	
		margin-bottom: 70px;
	}
		.MarkList{
		width: 1100px;
		height: 500px;
		margin: 30px;
	}
	
	.MarkImg{
		width: 450px;
		height: 450px;
		float: left;
		
	}
	#MarkImg1{
		width: 450px;
		height: 450px;
		background: url("/Assets/Web/Images/Service/service_11.jpg") no-repeat center center;
		background-size: auto 450px;
	}
	#MarkImg2{
		width: 450px;
		height: 450px;
		background: url("/Assets/Web/Images/Service/service_12.jpg") no-repeat center center;
		background-size: auto 450px;
	}
	#MarkImg3{
		width: 450px;
		height: 450px;
		background: url("/Assets/Web/Images/Service/service_13.jpg") no-repeat center center;
		background-size: auto 450px;
	}
	.MarkImgText{
		width: 55px;
		height: 200px;
		line-height: 30px;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		font-size: 20px;
		font-weight: normal;
		color: #FFF;
		margin-left:280px;
		margin-top: 60px;
		float: left;
		letter-spacing: 2px;
	}
	.MarkCircular{
		width: 150px;
		height: 150px;
		margin-top: 30px;
		background: #FFF;
		border-radius: 50%;
		font-size: 40px;
		font-weight: 900;
		color: #806d60;
		position: absolute;
		font-family: "Noto Sans TC", serif;
		text-align: center;
		line-height: 140px;
		margin-left: 375px;
	}
	.MarkInfo{
		width: 650px;
		height: 450px;
		background: #666666;
		float: left;
	}
	.MarkTitle{
		width: 480px;
		height: 120px;
		border-bottom: 1px solid #FFF;
		margin-left: 120px;
		padding-top: 50px;
	}
	.MarkTitle1{
		width: 480px;
		height: 130px;
		border-bottom: 1px solid #FFF;
		margin-left: 120px;
		padding-top: 40px;
	}
	.MarkTitle2{
		width: 480px;
		height: 60px;
		margin-left: 120px;
		padding-top: 40px;
	}
	.MarkTitleText1{
		width: 100%;
		height: 40px;
		font-size: 26px;
		font-weight: normal;
		color: #FFF;
	}
	.MarkTitleText2{
		width: 100%;
		height: 50px;
		font-size: 32px;
		font-weight: bold;
		color: #FFF;
	}
	.MarkTb1{
		width: 100%;
	}
	.MarkHead{
		width: 50px;
		height: 50px;
		float: left;
		font-weight: normal;
		font-size: 16px;
		padding-top: 40px;
		color: #FFF;
		padding-left: 50px;
	}
	.MarkTitleText3{
		width: 237px;
		line-height: 30px;
		float: left;
		color: #FFF;
		font-size: 16px;
		font-weight: normal;
	}
	.MarkTitleText4{
		width: 243px;
		line-height: 30px;
		float: left;
		color: #FFF;
		font-size: 16px;
		font-weight: normal;
	}
	.MarkTitleText5{
		width: 480px;
		line-height: 30px;
		float: left;
		color: #FFF;
		font-size: 16px;
		font-weight: normal;
	}
	.MarkWList{
		width: 510px;		
		
	}
	.MarkWList:nth-child(odd){
		float: left;
	}
	.MarkWList:nth-child(even){
		float: right;
	}
	.MarkWImg{
		width: 510px;
		height: 270px;
	}
	#MarkWImg1{
		width: 510px;
		height: 270px;
		background: url("/Assets/Web/Images/Service/service_14.jpg") no-repeat center center;
		background-size: 510px;
	}
	#MarkWImg2{
		width: 510px;
		height: 270px;
		background: url("/Assets/Web/Images/Service/service_15.jpg") no-repeat center center;
		background-size: 510px;
	}
	.MarkWImgText1{
		width: 410px;
		height: 60px;
		font-size: 32px;
		font-weight: bold;
		margin-left: 50px;
		color: #FFF;
		margin-top: 130px;
		float: left;
	}
	.MarkWImgText2{
		width: 410px;
		height: 50px;
		font-size: 26px;
		font-weight: normal;
		margin-left: 50px;
		color: #FFF;
	}
	.MarkWText{
		width: 510px;
		height: 570px;
		background: #FFF;
	}
	.MarkWHead{
		width: 120px;
		padding-left: 50px;
		box-sizing: border-box;
		float: left;
		padding-top: 50px;
		font-weight: normal;
	}
	.MarkWContent{
		width: 300px;
		float: left;
		padding-top: 50px;
		line-height: 32px;
		font-weight: normal;
		font-size: 16px;
		padding-bottom: 30px;
	}
	#MWC3{
		padding-top: 40px; 
		padding-bottom: 57px;
	}
	.MarkWFoot{
		width: calc(100% - 100px);
		height: 100px;
		margin-left: 50px;
		border-top: 1px solid #a8a8a8;
		float: left;		
	}
	.MarkWFootT1{
		width: 70px;
		float: left;
		padding-top: 30px;
		font-size: 16px;
		font-weight: normal;
	}
	.MarkWFootT2{
		width: 340px;
		float: left;
		padding-top: 30px;
		font-size: 16px;
		font-weight: normal;
	}
	.MarkWLine{
		width: 410px;
		height: 1px;
		margin-left: 60px;
		margin-right: 50px;
		border-bottom: 1px solid #666;
		float: left;
	}
	.MarkWList1{
		width: 50%;
		float: left;
	}
	#MarkLine1{
		height: 1355px;
	}
	#MarkLine2{
		height: 685px;
	}
	#Branding{
		width: 1350px;
		padding-top: 200px;
		padding-left: 50px;
		margin: 0 auto;		

	}
	.BrandList{
		width: 100%;
	}
	.BrandItem{
		width: 100%;
		height: 60px;
	}
	.BrandTitle{
		width:250px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		background: #666666;
		margin-right: 100px;
		font-size: 24px;
		font-weight: 400;
		color: #FFF;
		float: left;
		letter-spacing: 6px;
	}
	.BrandMenu{
		width: calc(100% - 350px);
		height: 60px;
		float: left;
	}
	.BrandChildMenu{
		height: 60px;		
		padding-right: 20px;
		line-height: 55px;
		text-align: center;
		font-size: 24px;
		font-weight: 300;
		letter-spacing: 6px;
	}
	.BrandInfoForm{
		width: calc(100% - 350px);
		margin-left: 350px;
		padding-bottom: 92px;
		

	}
	.BrandInfoForm:after{
		content: ".";
		visibility: hidden;
		display: block;
		height: 0;
		clear: both; 
	}
	.BrandInfoFormLine{
		width: calc(100% - 350px);
		height: 1px;
		margin-left: 350px;
		margin-bottom: 90px;
		border-bottom: 1px solid #a8a8a8;
	}
	.BrandInfo{
		width: 450px;
		padding-top: 50px;
		display: table-row;
	}
	.BrandInfoForm .BrandInfo:nth-child(odd){		
		float: left;
	}
	.BrandInfoForm .BrandInfo:nth-child(even){		
		float: right;
	}
	.BrandImgName{
		position: absolute;
		font-size: 24px;
		font-weight: 400;
		color: #FFF;
		margin-top: 140px;
		margin-left: 30px;
		letter-spacing: 5px;
	}
	.BrandImg{
		width: 450px;
		height: 200px;
		overflow: hidden;
	}
	.BrandImg img{
		max-width: 450px;
	}
	.BrandText{
		width: 450px;
		line-height: 33px;
		font-size: 16px;
		letter-spacing: 1.3px;
		font-weight: 300;
		padding-top: 20px;
		text-align: justify;
	}
	#BtnForm{
		width: 100%;
		height: 100px;
	}
	#Btn01{
		width: 350px;
		height: 80px;
		line-height: 80px;
		font-size: 18px;
		font-weight: normal;
		display: block;
		box-sizing: border-box;
		text-decoration: none;
		color: #666666;
		padding-left: 35px;
		padding-right: 25px;
		letter-spacing: 2px;
		background-color: #FFF;
		background-image: url("/Assets/Web/Images/Service/is_arrow_02.svg");
		background-repeat: no-repeat;
		background-size: 91px;
		background-position: top 35px right 25px;
		float: right;
		cursor: pointer;			
	}
	#BtnNextForm{
		width: 750px;
		height: 90px;
		margin: 0 auto;
		padding-top: 135px;
		padding-left: 15px;
		padding-right: 60px;
		padding-bottom: 90px;
		box-sizing: border-box;
	}
	#BtnPrv{
		width: 235px;
		height: 95px;
		float: left;
		cursor: pointer;
		background: url("/Assets/Web/Images/Service/BtnLeft.png") left center no-repeat;
		text-decoration: none;
		font-weight: 200;
		color: #000;
		margin-right: 50px;
		letter-spacing: 5px;
	}
	#BtnPrv:hover .BtnName{
		background: #FFF;
		font-weight: 200;
		transition: all .5s;
	}
	#BtnNext:hover .BtnName{
		background: #FFF;
		font-weight: 200;
		transition: all .5s;
	}
	#BtnNext{
		width: 235px;
		height: 95px;
		float: right;
		cursor: pointer;
		text-decoration: none;
		color: #000;
		font-weight: 200;
		background: url("/Assets/Web/Images/Service/BtnRight.png") right center no-repeat;
	}
	.BtnName{
		width: 90px;
		height: 90px;
		line-height: 90px;
		border-radius: 50%;
		text-align: center;
		font-size: 22px;

		background: #e6e5e3;
		transition: all .5s;
	}

	.FloatLeft{
		float: left;
	}
	.FloatRight{
		float: right;
	}
	#FooterLine{
		width: calc(100% - 160px);
		max-width: 1760px;
		min-width: 1300px;
		height: 120px;
		margin: 0 auto;
		border-top: 1px solid #a8a8a8;
		padding-top: 80px;
	}

	#BrandingBg{
		max-width: 1760px;
		padding-top: 200px;
		padding-bottom: 200px;
		margin: 0 auto;
		text-align: center;
		border-bottom: 1px solid #a8a8a8;	
	}	

	#BtnShow{
		width: 200px;
		height: 78px;
		background: #666666;
		font-size: 18px;
		letter-spacing: 2px;
		margin-left: 30px;
		font-weight: 400;
		float: right;
		cursor: pointer;
		display:flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
	}
	#BtnShow1{
		width: 200px;
		height: 78px;
		background: #666666;
		font-size: 18px;
		letter-spacing: 2px;
		margin-left: 30px;
		font-weight: 400;
		float: right;
		cursor: pointer;
		display:flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
	}
	/* 專案*/
	#ProjectForm{
		width: 1400px;
		padding-top: 100px;
		padding-bottom: 50px;
		border-top: 1px solid #a8a8a8;	
		margin: 0 auto;
		margin-top: 200px;		
		overflow: hidden;
		display: none;
		

	}
	#Project{
		min-width: 1400px;
		display:flex;
		justify-content:center;
		align-items: baseline;
		padding-top: 50px;
		
	}
	.Project{
		width: 360px;
		margin: 50px;
		padding: 30px;
		background: #a8a8a8;	
		box-sizing: border-box;
		border-radius: 10px;
		
		align-self: flex-start;

	}
	.Project:hover {
    	box-shadow: 0px 5px 20px #bbbbbb;
    	transition: all .3s;
  }
	.Leven{
		width: 360px;
		font-size: 55px;
		color: #666666;
		position: absolute;
		font-style: italic;
		margin-top: -61px;

	}
	.ProName{
		width: 100%;
		height: 50px;
		line-height: 37px;
		font-size: 26px;
		font-weight: bold;
		padding-top: 15px;
	}
	.Star1{
		background: url("/Assets/Web/Images/Service/1Star.png") right center no-repeat;
	}
	.Star2{
		background: url("/Assets/Web/Images/Service/2Star.png") right center no-repeat;
	}
	.Star3{
		background: url("/Assets/Web/Images/Service/3Star.png") right center no-repeat;
	}
	.ProText1{
		width: 100%;
		height: 60px;
		line-height: 20px;
		border-bottom: 1px solid #FFF;
		font-size: 20px;
		letter-spacing: 2px;
	}
	.ProContent{
		width: 100%;	
		min-height: 160px;
		padding-top: 50px;
		padding-bottom: 50px;
		box-sizing: border-box;

	}
	.ProContent:after{
		content: ".";
		visibility: hidden;
		display: block;
		height: 0;
		clear: both; 
	}
	.ProText2{
		height: 40px;
		font-size: 18px;
		color: #FFF;
		float: left;
		box-sizing: border-box;
		font-weight: normal;
	}
	.ProContent .ProText2:nth-child(odd){
		width: 150px;
		padding-left: 10px;

	}
	.ProContent .ProText2:nth-last-child(even){
		width: 150px;

	}
	.BtnContact{
		width: 160px;
		height: 55px;
		background: #806d60;
		color: #FFF;
		display: block;
		font-size: 20px;
		font-weight: 400;
		line-height: 20px;
		text-align: center;
		justify-content: center;
		align-content: center;
		text-decoration: none;
		position: absolute;
		margin-bottom: -80px;
		margin-left: 70px;
	}

	
	/*
	.MarkImg{
		width: 100%;
		height: 450px;
		margin-bottom: 80px;
	}
	.MarkTitle{
		width: 450px;
		height: 450px;
		float: left;
		overflow: hidden;
			
	}
	.MarkTitle img{
		height: 450px;
	}
	.MarkText {
		width: calc(100% - 450px);
		height: 450px;
		background: #666666;
		float: left;
	}
	.MarkNumber{
		width: 150px;
		height: 150px;
		line-height: 150px;
		border-radius: 50%;
		background: #FFF;
		font-size: 40px;
		font-weight: bold;
		position: absolute;
		margin-left: 375px;
		color: #806d60;
		text-align: center;
		margin-top: 30px;
	}
	.MarkList{
		width: 100%;
		padding:35px 50px ;
		box-sizing: border-box;
		color: #FFF;
	}
	.MarkList:after{
		content: '.';
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}
	.MarkText1{
		font-size: 26px;
		font-weight: normal;
		padding-left: 70px;
		padding-top: 15px;
		
	}
	.MarkText2{
		font-size: 32px;
		font-weight: bold;
		padding-left: 70px;
	}
	.MarkLine{
		width: calc(100% - 170px);
		height: 1px;
		background: #FFF;
		margin-left: 120px;
	}
	.MarkLeft{
		width: 35px;		
		float: left;
		font-size: 16px;
		font-weight: normal;
	}
	.MarkText3{
		width: calc(100% - 90px);	
		line-height: 32px;
		margin-left: 35px;
		float: left;
		font-size: 16px;
		font-weight: normal;
	}
	*/
}