@charset "UTF-8";

/* container */
.about-content .about-container-l{
	max-width: 1400px;
	width: 90%;
	margin: 0 auto;
	padding: 100px 0;
}
.about-content .about-container-m{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
	padding: 100px 0;
}
.about-content .about-container-s{
	max-width: 1000px;
	width: 90%;
	margin: 0 auto;
	padding: 100px 0;
}
/* text */
.about-content .about-title{
	color: #595757;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}
.about-content .font-title{
	color: #595757;
	font-size: 24px;
	font-weight: 600;
}
.about-content .font-sub{
	color: #595757;
	font-size: 20px;
	font-weight: 500;
}
.about-content .font-text{
	color: #595757;
	font-size: 16px;
	line-height: 24px;
}
/* top */
.about-content .top{
	position: relative;
}
.about-content .top .about{
	max-width: 600px;
	width: 90%;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.about-content .top .about h4,
.about-content .top .about h1{
	font-weight: 600;
}
.about-content .top .about p{
	color: #000;
	font-size: 14px;
	margin-top: 30px;
}
.about-content .top .about a{
	width: 112px;
	background: #000;
	color: #fff;
	font-size: 14px;
	padding: 7px 0;
	display: inline-block;
}
.about-content .top .about a:hover{
	background: #ffae00;
}
.about-content .top .video-container{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	opacity: .3;
	pointer-events: none;
}
.about-content .top .video-container iframe,
.about-content .top .video-container object,
.about-content .top .video-container embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* 商標精神 */
.about-content .about-section1{
	background: url('../images/p2_bg.png') top / 100% auto no-repeat;
}
.about-content .about-section1 .wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.about-content .about-section1 .wrap .about-title{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.about-content .about-section1 .wrap .img{
	width: 25%;
}
.about-content .about-section1 .wrap .img img{
	width: 100%;
	height: auto;
	display: block;
	margin-top: 40px;
}
.about-content .about-section1 .wrap .img .logo1{
	width: 70%;
	margin: 0 auto;
}
.about-content .about-section1 .wrap .text{
	width: 68%;
}
.about-content .about-section1 .wrap .text .box{
	margin: 40px 0;
}
.about-content .about-section1 .wrap .text .box .font-sub{
	color: #106AB1;
	margin-bottom: 0;
}
/* 企業文化 */
.about-content .about-section2{
	background: url('../images/p3_bg.png') bottom / 100% auto no-repeat;
}
.about-content .about-section2 .wrap{
	display: flex;
	justify-content: space-around;
	margin-top: 50px;
}
.about-content .about-section2 .wrap .box{
	width: 30%;
	text-align: center;
}
.about-content .about-section2 .wrap .box img{
	width: 90%;
	max-width: 140px;
	height: auto;
	margin: 0 auto;
}
.about-content .about-section2 .wrap .box .font-sub{
	margin-top: 30px;
}
.about-content .about-section2 .wrap .box .font-title{
	margin-top: 50px;
}
/* 歷史沿革 */
.about-content .about-section3{
	background: url('../images/p4_bg.png') bottom / 100% auto no-repeat;
}
.about-content .about-section3 .wrap{
	display: flex;
	justify-content: center;
}
.about-content .about-section3 .wrap .history-list{
	border-left: 2px solid #595757;
	margin-left: 70px;
	padding-left: 70px;
}
.about-content .about-section3 .wrap .history-list::before,
.about-content .about-section3 .wrap .history-list::after{
	content: "";
	width: 10px;
	height: 10px;
	background: #595757;
	display: block;
	border-radius: 50%;
	margin-left: -76px;
}
.about-content .about-section3 .wrap .history-list .history-item{
	margin-bottom: 20px;
}
.about-content .about-section3 .wrap .history-list .history-item:last-child{
	margin-bottom: 0;
}
/* 240319新增width */
.about-content .about-section3 .wrap .history-list .history-item p{
	width: calc(100% - 95px);
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
}
.about-content .about-section3 .wrap .history-list .history-item span{
	color: #595757;
	display: inline-block;
	vertical-align: middle;
}
.about-content .about-section3 .wrap .history-list .history-item span::after{
	content: "";
	width: 20px;
	height: 1px;
	background: #595757;
	display: inline-block;
	vertical-align: middle;
	margin: 15px;
}
/* 主要服務 */
.about-content .about-section4{
	background: url('../images/p5_bg.png') center / 100% auto no-repeat;
}
.about-content .about-section4 .wrap{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}
.about-content .about-section4 .wrap .box{
	width: 30%;
}
.about-content .about-section4 .wrap .box img{
	width: 100%;
	max-width: 360px;
	height: auto;
	display: block;
	border-radius: 15px;
	box-shadow: 5px 5px 10px rgba(000, 000, 000, .3);
	margin-bottom: 10px;
}
.about-content .about-section4 .wrap .box .font-title{
	font-weight: 400;
	margin-top: 30px;
}
/* 專業團隊 */
.about-content .about-section5{
	background: url('../images/p6_bg.jpg') center / cover no-repeat;
}
.about-content .about-section5 .wrap{
	display: flex;
	justify-content: space-around;
	margin-top: 50px;
}
.about-content .about-section5 .wrap .box{
	width: 45%;
	max-width: 360px;
}
.about-content .about-section5 .wrap .box img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 15px;
	box-shadow: 5px 5px 10px rgba(000, 000, 000, .3);
	margin: 0 auto 10px auto;
}
.about-content .about-section5 .wrap .box .font-sub{
	font-weight: 400;
	text-align: center;
	margin: 20px;
}
.about-content .about-section5 .wrap .box .font-sub span{
	display: block;
}
/* 公司展聽 */
.about-content .about-section6{
	background: url('../images/p4_bg.png') bottom / 100% auto no-repeat;
}
.about-content .about-section6 .wrap{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}
.about-content .about-section6 .wrap .box{
	width: 23%;
}
.about-content .about-section6 .wrap .box img{
	width: 100%;
	height: auto;
	display: block;
}
.about-content .about-section6 .font-sub{
	text-align: center;
	margin-top: 50px;
}
/* RWD */
@media screen and (max-width:1024px) {
	.about-content .about-container-l,
	.about-content .about-container-m,
	.about-content .about-container-s{
		padding: 50px 0;
	}
	.about-content .top .video-container{
		background: url('../images/123.jpg') top / 100% auto no-repeat;
	}
	.about-content .top .video-container iframe{
		display: none;
	}
}
@media screen and (max-width:768px){
	.about-content .about-section1{
		background-size: cover;
	}
	.about-content .about-section1 .wrap{
		flex-wrap: wrap;
	}
	.about-content .about-section1 .wrap .about-title{
		position: static;
	}
	.about-content .about-section3 .wrap{
		display: block;
	}
	.about-content .about-section3 .wrap .history-list{
		margin-top: 30px;
		margin-left: 0;
		padding-left: 30px;
	}
	.about-content .about-section3 .wrap .history-list::before,
	.about-content .about-section3 .wrap .history-list::after{
		margin-left: -36px;
	}
}
@media screen and (max-width:767px){
	.about-content{
		margin-top: 121px;
	}
}
@media screen and (max-width:640px){
	.about-content .top .about p{
		display: none;
	}
	.about-content .about-title{
		font-size: 24px;
	}
	.about-content .font-title{
		font-size: 20px;
	}
	.about-content .font-sub{
		font-size: 18px;
	}
	.about-content .font-text{
		font-size: 15px;
	}
	.about-content .about-section2 .wrap .box .font-title{
		margin-top: 30px;
	}
	.about-content .about-section3 .wrap .history-list .history-item p{
		display: block;
	}
}
@media screen and (max-width:480px){
	.about-content .about-section1 .wrap .img,
	.about-content .about-section1 .wrap .text{
		width: 100%;
	}
	.about-content .about-section1 .wrap .img{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.about-content .about-section1 .wrap .img .logo1,
	.about-content .about-section1 .wrap .img .logo2{
		width: 45%;
		margin: 0;
	}
	.about-content .about-section2 .wrap{
		display: block;
	}
	.about-content .about-section2 .wrap .box{
		width: 270px;
		text-align: left;
		display: flex;
		flex-direction: column-reverse;
		position: relative;
		padding-left: 100px;
		margin:0 auto 30px auto;
	}
	.about-content .about-section2 .wrap .box img{
		width: 100%;
		max-width: 72px;
		position: absolute;
		left: 0;
		top: 0;
	}
	.about-content .about-section2 .wrap .box .font-sub,
	.about-content .about-section2 .wrap .box .font-title{
		margin: 10px 0 0 0;
	}
	.about-content .about-section4 .wrap,
	.about-content .about-section5 .wrap,
	.about-content .about-section6 .wrap{
		flex-wrap: wrap;
	}
	.about-content .about-section4 .wrap .box,
	.about-content .about-section5 .wrap .box{
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
	}
	.about-content .about-section4 .wrap .box img{
		margin: 0 auto 10px auto;
	}
	.about-content .about-section6 .wrap .box{
		width: 49%;
		margin-bottom: 10px;
	}
	
}