@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 767px) {	
	:root {
		--MaxWidth: 450px;
	}
	#AboutPoint{
		width: 0px;
		height: 0px;
		position: absolute;
		margin-top: -20px;
	}
	body,html{
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
		font-family: brisbane, "Noto Sans TC", sans-serif;	
	}
	#Banner{
		width: 100%;
		padding: 30px;
		box-sizing: border-box;
		padding-top: 90px;
	}
	#BannerForm{
		width: 100%;
		max-width: var(--MaxWidth);
	
		padding-top: 0px;	
		background: #69a3aa;
		margin: 0 auto;
	}
	#BannerTitle{
		width: 100%;
		height: 350px;
		background: url("/Assets/Web/Images/About/BannerM.jpg") top center no-repeat;
		background-size: cover;
	}
	#BannerTitleText{
		width: 100%;
		height: 100px;
		line-height: 80px;
		text-align: right;
		font-size: 70px;
		font-weight: 300;
		font-style: italic;
		color: #FFF;
		padding-right: 30px;
		padding-top: 20px;
		box-sizing: border-box;
	}
	#AboutUsBox{
		width: 100%;
		background: #69a3aa;
		padding: 50px 30px 30px 30px;
		box-sizing: border-box;
	}
	#AboutUs{
		width: 100%;
		height: 60px;
		border-left: 6px solid #92d1d5;
		padding-left: 20px;
		font-size: 22px;
		font-weight: 700;
		letter-spacing: 7px;
		color: #FFF;		
	}
	#AboutUsText1{
		width: 100%;
		height: 32px;
		line-height: 20px;
	}
	#AboutUsText2{
		width: 100%;
	
		line-height: 20px;
	}
	.AboutBtn{
		width: 120px;
		height: 45px;
		line-height: 45px;
		background: #FFF;
		color: #646464;	
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		letter-spacing: 5px;
		display: inline-block;
		margin-right: 20px;
		margin-bottom: 20px;
		cursor: pointer;
	}
	#BannerBtnForm{
		width: 100%;
		padding: 0px 10px 30px 30px;
		box-sizing: border-box;
	}
	
	#Overview{
		width: 100%;
		padding: 30px;
		box-sizing: border-box;	
	}
	#OverViewM{
		width: 0px;
		height: 0px;
		position: absolute;
		margin-top: -80px;
			
	}
	
	#OverViewForm{
		width: 100%;
		max-width: var(--MaxWidth);
		margin: 0 auto;
		box-sizing: border-box;
	}
	#OverviewLeft{
		width: 100%;
		height: 60px;		
		border-bottom: 1px solid #a5a5a5;
	}
	#OverviewText1{
		width: 100px;
		font-size: 22px;
		font-weight: 700;
		color: #69a3aa;
		letter-spacing: 3px;
		float: left;
	}
	#OverviewText2{
		width: 120px;
		font-size: 22px;
		font-weight: 500;
		color: #a5a5a5;
		letter-spacing: 3px;
		float: right;
		
	}
	#OverviewRight{
		width: 100%;
		padding-top: 30px;
		line-height: 30px;
		font-weight: 500;
		font-size: 14px;
		box-sizing: border-box;
		letter-spacing: 1px;
	}
	#Values{
		width: 100%;
		background: #c8a97d;
		padding: 50px 30px 50px 30px;

		box-sizing: border-box;
	}
	#ValuesM{
		width: 0px;
		height: 0px;
		position: absolute;
		margin-top: -100px;
	}
	
	#ValuesForm{
		width: 100%;
		max-width: var(--MaxWidth);
		margin: 0 auto;	
	}
	#ValuesTitleM{
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #FFF;		
		color: #FFF;
		font-size: 22px;
		font-weight: 500;
		letter-spacing: 3px;
	}
	#valuesTitleMText1{
		float: left;
	}
	#valuesTitleMText2{
		float: right;
	}
	#ValuesFormM{
		width: 100%;
		max-width: var(--MaxWidth);
		margin: 0 auto;
	}
	.ValuesItem{
		width: 100%;
		padding: 10px;
		padding-top: 50px;		
		box-sizing: border-box;
		
	}
	.ValuesImg{
		width: 100%;
		text-align: center;
	}
	.ValuesImg img{
		max-width: 199px;
	}
	.ValuesName{
		width: 100%;
		height: 75px;
		line-height: 75px;
		text-align: center;
		color: #FFF;
		font-size: 20px;
		font-weight: 700;
		letter-spacing: 3px;
	}
	.ValuesLine{
		width: 100px;
		height: 10px;
		border-bottom: 1px solid #FFF;
		margin: 0 auto;
	}
	.ValueText{
		width: 100%;
		line-height: 30px;
		padding-top: 30px;
		padding-left: 15px;
		padding-right: 15px;
		color: #FFF;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 3px;
		box-sizing: border-box;
	}
	#Milestones{
		width: 100%;
		padding:50px 0px 30px 0px;
		box-sizing: border-box;
	}
	#MilestonesM{
		width: 0px;
		height: 0px;
		position: absolute;
		margin-top: -80px;
	}
	#MilestionesLeft{
		width: 100%;
		font-size: 22px;
		font-weight: 500;
		letter-spacing: 3px;
		
	}
	#MilestionsTitle{
		width: calc(100% - 60px);
		height: 60px;
		border-bottom: 1px solid #646464;
		margin: 0 auto;
	}
	#MLeftNameT{
		float: left;
	}
	#MLeftNameE{
		float: right;
		color: #646464;
	}
	#Mil1Info{
		width: 100%;
		padding: 0px 30px;
		box-sizing: border-box;
		
	}
	#Mil1Year{
		width: 100%;
		height: 50px;
		color: #69a3aa;
		font-size: 50px;
		font-weight: 300;
		font-style: italic;
		margin-bottom: 40px;	
		margin-top: 30px;
		text-align: center;
	}
	#Mil1Title{
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #a1734a;
		color: #FFF;
		padding-left: 20px;
		box-sizing: border-box;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 30px;
		letter-spacing: 3px;
	}
	#Mil1Text{
		width: 100%;
		font-size: 15px;
		line-height: 30px;
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: 30px;
	}
	#Mil1LineM{
		width: 1px;
		height: 70px;
		border-left: 1px solid #a5a5a5;
		margin: 0 auto;
	}
	#Milist1MImg{
		width: 100%;
		height: 300px;
		margin-bottom: 30px;
		overflow: hidden;
	}
	#Milist1MImg img{
		width:100%;
	}
	#Mil2Info{
		width: 100%;
		padding: 0px 30px;
		box-sizing: border-box;
		
	}
	#Mil2Year{
		width: 100%;
		height: 50px;
		color: #69a3aa;
		font-size: 50px;
		font-weight: 300;
		font-style: italic;
		margin-bottom: 40px;	
		margin-top: 30px;
		text-align: center;
	}
	#Mil2Title{
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #a1734a;
		color: #FFF;
		padding-left: 20px;
		box-sizing: border-box;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 30px;
		letter-spacing: 3px;
	}
	#Mil2Text{
		width: 100%;
		font-size: 15px;
		line-height: 30px;
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: 30px;
	}
	#Mil2LineM{
		width: 1px;
		height: 70px;
		border-left: 1px solid #a5a5a5;
		margin: 0 auto;
	}
	#Milist2Img{
		width: 100%;
		height: 300px;
		margin-bottom: 30px;
		overflow: hidden;
	}
	#Milist2Img img{
		width: 150%;
		text-align: center;
	}
	#Mil3Info{
		width: 100%;
		padding: 0px 30px;
		box-sizing: border-box;
		
	}
	#Mil3Year{
		width: 100%;
		height: 50px;
		color: #69a3aa;
		font-size: 50px;
		font-weight: 300;
		font-style: italic;
		margin-bottom: 40px;	
		margin-top: 30px;
		text-align: center;
	}
	#Mil3Title{
		width: 100%;
		min-height: 50px;
		line-height: 30px;
		background: #a1734a;
		color: #FFF;
		padding-left: 20px;
		box-sizing: border-box;
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 30px;
		letter-spacing: 3px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	#Mil3Text{
		width: 100%;
		font-size: 15px;
		line-height: 30px;
		font-weight: 600;
		letter-spacing: 1px;
		margin-bottom: 30px;
	}
	#Mil3LineM{
		width: 1px;
		height: 70px;
		border-left: 1px solid #a5a5a5;
		margin: 0 auto;
	}
	#Milist3MImg{
		width: 100%;
		height: 300px;
		margin-bottom: 30px;
	}
	#Milist3MImg img{
		width: 100%;
	}
	/* 如今 Start*/
	#Item{
		width: 100%;
		padding: 0px 30px 100px 30px;
		box-sizing: border-box;
	}
	#ItemForm{
		width: 100%;
		max-width: var(--MaxWidth);
		height: 633px;
		background: url("/Assets/Web/Images/About/About2MBg.jpg") no-repeat;
		background-size: contain;
		margin: 0 auto;
		padding: 30px;
		box-sizing: border-box;
	}

	#ItemTitle{
		width: 100%;;
		height: 60px;
		border-bottom: 1px solid #FFF;
		margin-bottom: 30px;
	}
	#ItemText1{
		width: 100px;
		height: 50px;
		line-height: 30px;
		font-size: 40px;
		font-weight: 300;
		font-style: italic;
		color: #FFF;
		text-align: center;
		margin-bottom: 10px;
		letter-spacing: 2px;
		float: left;
	}
	#ItemText2{
		width: 60px;
		height: 22px;
		font-size: 22px;
		font-weight: 500;
		color: #FFF;
		text-align: right;		
		box-sizing: border-box;
		text-align-last:justify;
		
	
		float: right;
	}

	#ItemText3{
		width: 100%;
		height: 50px;
		line-height: 50px;
		color: #646464;
		font-size: 18px;
		text-align: center;
		background: #FFF;
		font-weight: 600;
		margin-bottom: 35px;
		letter-spacing: 3px;
	}
	#ItemText4{
		width: 100%;
		font-size: 15px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 1px;
		color: #FFF;
		
	}
	
}