@charset "utf-8";
/* CSS Document */
@media screen  and (max-width: 767px) {
	:root {
		--MaxWidth: 450px;
	}
	/* 錨點 Start */
	#ServiceM{
		width: 0px;
		height: 0px;
		position: absolute;
		margin-top: -60px;
	}	
	#EF2FormM{
		width: 0px;
		height: 0px;
		position: absolute;
		margin-top: -60px;
	}
	/* 錨點 End */
	body,html{
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		font-family: brisbane, "Noto Sans TC", sans-serif;	
	}
	#Banner{
		width: 100%;
		height: 900px;
		
	}

	#BannerRight{
		width: 100%;
		height: 605px;
		background: url("/Assets/Web/Images/Service/Banner.jpg") no-repeat top center;
		background-size: cover;
		position: absolute;
		top: 60px;
		padding: 30px;
		box-sizing: border-box;
	}
	#BannerRightText{
		max-width: var(--MaxWidth);
		text-align: right;
		font-size: 35px;
		font-weight: 600;
		color: #FFF;
		padding-top: 80px;
		margin: 0 auto;
	}
	#BannerLeft{
		width: 100%;
		height: 377px;
		position: relative;
		width: calc(100% - 60px);
		max-width: var(--MaxWidth);
		background: #c8a97d;
		box-sizing: border-box;
		margin: 0 auto;
		top: 480px;
		z-index: 100;
		padding: 50px 30px;
	}

	#BannerTitle{
		width: 100%;
		height: 50px;
		line-height: 18px;
		font-size: 22px;
		font-weight: 600;
		color: #FFF;
		padding-left: 30px;
		border-left: 6px solid #92d1d5;
		letter-spacing: 5px;
		margin-bottom: 30px;
	}
	#BannerLeftText{
		width: 100%;
		line-height: 30px;
		font-size: 15px;
		color: #FFF;
		font-weight: 600;
		letter-spacing: 3px;
		margin-bottom: 30px;
	}
	.BannerBtn01{
		width: 120px;
		height: 45px;
		line-height: 45px;
		background: #FFF;
		font-size: 16px;
		font-weight: bold;
		color: #646464;
		text-align: center;
		letter-spacing: 5px;
		cursor: pointer;
	}
	#Btn01{
		float: left;
	}
	#Btn02{
		float: right;
	}
	
	/* 客製化服務 Start */
	#Service{
		width: 100%;
		
		box-sizing: border-box;
		background: #a1734a;
		
	}
	#ServiceForm{
		width: 100%;
		max-width: var(--MaxWidth);
	
		margin: 0 auto;
	}
	#ServiceTitle{
		width: 100%;		
		background: #a1734a;
		padding: 30px;	
		box-sizing: border-box;
	}
	#ServiceTitleLeft{
		width:calc(100% - 30px);
		height: 75px;
		line-height: 50px;
		font-size: 22px;
		font-weight: bold;		
		color: #FFF;
		letter-spacing: 4px;
		border-bottom: 1px solid #FFF;
		padding-top: 0px;
		box-sizing: border-box;
		margin: 0 auto;

	}
	#ServiceTitleRight{
		padding-top: 30px;
		width: 100%;
		line-height: 30px;
		font-size: 14px;
		font-weight: 400;
		color: #FFF;
		letter-spacing: 1px;	
		box-sizing: border-box;
		padding-left: 10px;
			
	}
	
	/* 客製化服務  End */	
	/* 客製項目 Start*/
	#Packaging{
		width: 100%;
		padding: 60px 30px;
		box-sizing: border-box;
	}
	#PackagingLeft{
		display: none;
	}	
	.PackagingMenu{
		width: 100%;
		height: 40px;
		line-height: 25px;
		font-size: 20px;
		font-weight: bold;
		color: #646464;
		padding-left: 20px;
		box-sizing: border-box;
		margin-bottom: 20px;			
		background-position: -22px top;
		cursor: pointer;
		
		transition: all .5s;
	}
	.PackagingMenuAct{
		color: #92d1d5;
		background-image: url("/Assets/Web/Images/Service/listarrowNb_LB.png");
		background-repeat: no-repeat;
		background-position: 10px top;
		padding-left: 40px;
		box-sizing: border-box;
		transition: all .5s;
	}
	.PkList{
		width: 100%;
	}
	.PkListTitle{
		width: 100%;
		border-bottom: 1px solid #646464;
	}
	.ListTitleText1{
		width: 100%;
		padding-bottom: 20px;
		color: #646464;
		font-size: 22px;
		line-height: 30px;
		font-weight: bold;
		letter-spacing: 6px;
	
	}
	.ListTitleText2{
		width: 100%;
		height: 70px;
		line-height: 20px;
		color: #a5a5a5;
		
		font-size: 14px;
		font-weight: 600;
		
		letter-spacing: 1px;
	}
	.ListTitleText3{
		width: 100%;	
		font-size: 14px;		
		font-weight: 500;
		line-height: 30px;
		box-sizing: border-box;
		color: #000;
		letter-spacing: 1px;
		padding-top: 30px;
		
	}
	.PKSlickList{
		width: 100%;
		padding-top: 30px;
	}
	.PKSlickImg{
		width: 100%;
	}
	.PKSlickImg img{
		max-width: 100%;
	}
	#Equipment{
		width: 100%;
		box-sizing: border-box;
	
	}
	#EquipmentForm{
		width: 100%;	
		max-width: var(--Width);
		height: 400px;		
		padding: 30px;
		margin: 0 auto;
		box-sizing: border-box;
		background: #646464;
	}
	#EFLeft{
		width: 100%;
		box-sizing: border-box;
		position:absolute;
		margin-top: 320px;
	}
	#EFMImg{		
		width: 100%;
		padding: 30px;
		box-sizing: border-box;
		margin-top: -80px;
	}
	#EFMImg img{
		width: 100%;
	}
	#EFRight{
		width: 100%;
		padding: 30px;
		box-sizing: border-box;
	}
	#EFRightTitle{
		width: 100%;
		height: 65px;
		font-size: 22px;
		font-weight: 700;
		color: #FFF;
		border-bottom: 1px solid #FFF;

		letter-spacing: 6px;
	}
	#EFRightText{
		width: 100%;
		font-size: 14px;
		line-height: 30px;
		color: #FFF;
		font-weight: 500;
		padding-top: 30px;
		letter-spacing: 1px;
	}
	#EF2Form{
		width: 100%;
		padding: 30px;
		box-sizing: border-box;
	}
	.EF2Title{
		width: 100%;
		height: 40px;
		font-weight: bold;
		font-size: 22px;
		color: #646464;
		margin-bottom: 15px;
		letter-spacing: 6px;
	}
	.EF2List{
		width: 100%;
		min-height: 44px;
		color: #FFF;
		background: #646464;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 2px;
		padding: 10px 20px;
		margin-bottom: 30px;
		box-sizing: border-box;
	}
	#EF2RIght{
		width: 100%;
		padding-top: 30px;
		
	}
	#EF2Img1{
		width: 100%;
		width: calc(100% + 30px);
		margin-left: -30px;
		margin-bottom: 50px;
	}
	#EF2Img1 img{
		max-width: 100%;
	}
	#EF2Img2{
		width: calc(100% + 30px);
	}
	#EF2Img2 img{
		max-width: 100%;
	}
}
