.fw {

}

.fxw {
	/* width: 1280px; */
	margin: auto;
	padding: 0 20px;
}

h1 {
	font-size: 2rem;
}

h3 {
	color: #fff;
	text-align: center;
	font-weight: 700;
	margin-top: 52px;
}

h4 {
	/* text-align: center; */
}

/* header */

header {
	background-color: #fff;
	height: 72px;
	width: 100%;
	line-height: 72px;
	position: fixed;
	z-index: 2800;
}

	.logo {
		float: left;
	}

		.logo img {
			padding-top: 10px;
			height: 52px;
		}

	ul.nav {
		/* float: right; */
		display: none;
		background-color: #222;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3000;
	}

		ul.nav>p:first-child {
			text-align: right;
			line-height: 10px;
			margin-right: 20px;
		}

			ul.nav>p:first-child a {
				font-size: 2rem;
				color: #fff;
			}

		ul.nav li {
			/* float: left; */
			margin: 0 30px;
			text-align: center;
			border-bottom: 1px solid #666;
			line-height: 100px;
		}

		ul.nav li:last-child {
			border: 0;
			color: #666;
		}

			ul.nav li:last-child p {
				display: inline;
				padding: 0 40px;
			}

		ul.nav li a {
			color: #fff;
			transition: color 0.3s;
			font-weight: 700;
		}

		ul.nav li a:hover {
			/* color: #d8b64a;
			transition: color 0.3s; */
		}

		ul.nav li:last-child i {
			/* font-size: 1.25rem;
			padding-top: 27px; */
			display: none;
		}

	header .bar {
		float: right;
	}

		header .bar a {
			font-size: 1.6rem;
			color: #222;
		}

/* banner */

/* zac 0915 */
.banner {
	/* height: 280px; */
	height: 600px;
	background: #ccc url('../images/banner.png') center center no-repeat;
	background-size: cover;
	padding-top: 192px;
}

/* news	 */

.news {
	background-color: #222222;
	padding: 80px 0;
}

	.news h2 {
		/* float: left; */
		margin-bottom: 40px;
	}

	.news div.list {
		/* width: 78%;
		float: right; */
	}

	.news ul {
		border-top: 1px solid #666;
	}

		.news li {
			border-bottom: 1px solid #666;
			padding: 4px 0;
			line-height: 29px;
		}

	.news .date {
		color: #fff;
		font-size: 0.875rem;
	}

	.news .tag, .news-main .tag, .article-content .tag {
		color: #000;
		width: 102px;
		height: 29px;
		line-height: 29px;
		background-color: #d8b64a;
		text-align: center;
		font-size: 0.875rem;
		display: inline-block;
		margin: 20px;
	}

	.news .news_title {
		display: inline-block;
		margin-bottom: 20px;
	}

	.news .news_title a {
		color: #fff;
		transition: color 0.3s;
	}

	.news .news_title a:hover {
		/* color: #d8b64a;
		transition: color 0.3s; */
	}

	.news .news_title i {
		font-size: 0.9rem;
		margin-left: 10px;
	}

	p.more {
		text-align: right;
		margin-top: 60px;
	}

	.cta {
	  position: relative;
	  margin: auto;
	  padding: 19px 22px;
	  transition: all 0.2s ease;
	  color: #fff;
	}

	.cta:before {
	  content: "";
	  position: absolute;
	  top: 8px;
	  left: 0;
	  display: block;
	  border-radius: 28px;
	  background: rgba(173,71,48,0.5);
	  width: 56px;
	  height: 56px;
	  transition: all 0.3s ease;
	}

	.cta span {
	  position: relative;
	  line-height: 18px;
	  font-weight: 400;
	  letter-spacing: 0.05em;
	  vertical-align: middle;
	}

	.cta svg {
	  position: relative;
	  top: 0;
	  margin-left: 10px;
	  fill: none;
	  stroke-linecap: round;
	  stroke-linejoin: round;
	  stroke: #fff;
	  stroke-width: 2;
	  transform: translateX(-5px);
	  transition: all 0.3s ease;
	}

	/*
	.cta:hover:before {
	  width: 100%;
	  background: #ad4730 ;
	}

	.cta:hover svg {
	  transform: translateX(0);
	}

	.cta:active {
	  transform: scale(0.96);
	} */

/* services */

.sers {
	background-color: #222222;
	padding: 20px 0 100px 0;
}

	.sers h2 {
		padding-bottom: 40px;
	}

	.sers li {
		/* width: calc(33.3% - 85px);
		float: left; */
		line-height: 40px;
		background: url(../images/leaf.png) left center no-repeat;
		padding: 20px 0 20px 45px;
		border-bottom: 1px solid #666;
		margin-right: 40px;
	}

	.sers li a {
		color: #fff;
		transition: color 0.3s;
	}

	.sers li a:hover {
		/* color: #d8b64a;
		transition: color 0.3s; */
	}

	.sers li div {
		display: inline;
	}

	.sers i {
		float: right;
		line-height: 40px;
	}

/* teams */

.team {
	background-color: #222;
}

.team .fxw {
	background-color: #fff;
	/* height: 608px; */
	padding: 0;
}

	.team h2 {
		color: #000;
		margin-bottom: 60px;
	}

	.team .img {
		/* width: 40%; */
		/* height: 100%; */
		height: 200px;
		background: #ccc url('../images/banner_b.png') center center no-repeat;
		background-size: cover;
		/* float: left; */
	}

	.team .content {
		/* width: calc(60% - 160px); */
		/* float: right; */
		padding: 40px 20px;
	}

		.team .cta, .about .cta {
			color: #222;
		}

		.team .cta:hover, .about .cta:hover {
			/* color: #fff; */
		}

		.team .cta svg, .about .cta svg {
			stroke: #222;
		}

		.team .cta:hover svg, .about .cta:hover svg {
			/* stroke: #fff; */
		}

/* brand */

.brand {
	background-color: #222;
	padding: 100px 0 80px 0;
}

	.brand h2 {
		margin-bottom: 50px;
	}

	.brand h4 {
		margin-bottom: 10px;
	}

	.brand .item {
		/* width: calc(33.3% - 20px);
		float: left; */
		margin-bottom: 20px;
		border-bottom: 1px solid #666;
	}

		.brand .item p {
			margin-top: 0;
			margin-bottom: 20px;
			width: calc(100vw - 157px);
			float: right;
		}

		.brand .item::after {
			content: "";
			display: block;
			clear: both;
		}

	.brand .item:nth-child(3n+2) {
		/* margin: 0 30px; */
	}

		.brand .item .img {
			background-color: #fff;
			width: 80px;
			height: 80px;
			float: left;
			margin-right: 20px;
		}

		.brand .item img {
			/* width: 100%; */
			width: 80px;
			margin-right: 20px;
		}

	.brand a {
		color: #fff;
		transition: color 0.3s;
	}

	/* .brand a:hover {
		color: #d8b64a;
		transition: color 0.3s;
	} */

	.brand p {
		font-size: 0.875rem;
		/* text-align: center; */
		color: #fff;
	}

/* about */

.about {
	/* background: #ccc url(../images/about.png) left center no-repeat;
	background-size: cover; */
}

	.about>div:nth-child(1) {
		height: 200px;
		overflow: hidden;
		background: #ccc url('../images/about.png') left top no-repeat;
		background-size: cover;
	}

	.about>div:nth-child(2) {
		/* width: calc(50% - 160px);
		float: right; */
		background-color: rgba(216,182,74,1);
		/* backdrop-filter: blur(9px); */
		padding: 40px 20px;
	}

	.about h2 {
		color: #000;
	}

/* map */

.map {
	padding: 60px 0 30px 0;
	background-color: #f3f3f3;
}

	.map h5 {
		border-top-width: 0;
		color: #222;
	}

	.map .fxw div:nth-child(1) {
		/* width: 50%;
		float: left; */
		margin-bottom: 40px;
	}

	@media screen and (min-width:768px) and (max-width:1026px) {
		.map .fxw div:nth-child(1) img {
			width: 320px;
		}
	}

	@media screen and (max-width:767.9px) {
		.map .fxw div:nth-child(1) img {
			width: 100%;
		}
	}

	.map .fxw div:nth-child(2) {
		/* width: 50%;
		float: right; */
	}

		.map ul {
			margin-top: 20px;
		}

			.map li {
				padding: 10px 0;
				font-weight: 400;
				font-size: 0.875rem;
			}

				.map li img {
					width: 40px;
				}

	.map a {
		color: #222;
	}

/* about.html */

.about-main, .team-main, .news-main, .ser-main, .bg-main {
	background-color: #222;
	padding-top: 160px;
	padding-bottom: 120px;
	color: #fff;
}

.about-main .fxw {
	padding: 0;
}

.about-main .fxw > div:nth-child(1) div:nth-child(1) {
	/* width: 35%; */
	/* height: 551px; */
	/* float: right; */
	background: #ccc url('../images/about_1.png') center center no-repeat;
	background-size: cover;
	aspect-ratio: 2/1;
}

.about-main .fxw > div:nth-child(1) div:nth-child(2) {
	/* width: 60%;
	float: left; */
	padding: 60px 20px 0 20px;
}

.about-main .fxw > div:nth-child(1) div:nth-child(2) h2,
.about-main .fxw > div:nth-child(3) div:nth-child(2) h2{
	color: #d8b64a;
}

.about-main .fxw > div:nth-child(1) div:nth-child(2) p,
.about-main .fxw > div:nth-child(3) div:nth-child(2) p {
	margin: 40px 0;
}

.about-main .fxw > div:nth-child(2) {
	background: url('../images/about_2.png') center center no-repeat;
	background-size: cover;
	margin: 100px 0 40px 0;
}

.about-main .fxw > div:nth-child(2) .overlay {
	background-color: rgba(0,0,0,0.2);
	padding: 60px 20px;
}

.about-main .fxw > div:nth-child(2) .overlay div {
	margin-top: 60px;
	background-color: rgba(255,255,255,0.1);
	backdrop-filter: blur(6px);
	padding: 20px;
}

.about-main .fxw > div:nth-child(3) {
	/* margin-bottom: 100px; */
}

.about-main .fxw > div:nth-child(3) div:nth-child(1) {
	/* width: 418px; */
	/* height: 486px; */
	background: url('../images/about_3.png') center -100px no-repeat;
	background-size: cover;
	/* float: left; */
	aspect-ratio: 2/1;
}

.about-main .fxw > div:nth-child(3) div:nth-child(2) {
/* 	width: 50%;
	float: left; */
	padding: 60px 0;
	margin-left: 5%;
}

/* team main */

.team-main h2 {
	margin-bottom: 50px;
	padding-left: 20px;
}

.team-main .item {
	width: calc(50% - 40px);
	float: left;
	padding: 20px;
	margin-bottom: 20px;
}

	.team-main .item a {
		display: block;
		color: #fff;
		transition: color 0.3s;
		font-weight: bold;
	}

		.team-main .item a span {
			font-size: 0.875rem;
			font-weight: normal;
		}

	.team-main .item a:hover {
		color: #d8b64a;
		transition: color 0.3s;
	}

	.team-main .item div {
		/* width: 300px;
		height: 300px; */
		/* background-color: #ccc; */
		overflow: hidden;
	}

	.team-main .item div img {
		width: 100%;
	}

/* news-main */

.filter {
	background-color: rgba(255,255,255,0.1);
	padding: 0 10px;
	font-size: 0.85rem;
	margin: 40px 10px 0 10px;
}

	.news-main .item {
		/* width: calc(25% - 20px);
		float: left; */
		margin: 40px 10px;
	}

		.news-main h2 {
			padding-left: 10px;
		}

		.news-main .item img {
			width: 100%;
		}

		.news-main .tag {
			margin: 0;
			/* float: left; */
		}

		.news-main .item a > div:nth-child(2) {
			height: 2rem;
			margin: 15px 0;
			line-height: 2rem;
			display: flex;
			justify-content: space-between;
		}

		.news-main .date {
			/* float: right; */
			font-size: 0.9rem;
		}

		.news-main .item > div:nth-child(3) {
			clear: both;
		}

		.news-main a {
			color: #fff;
		}

		.filter label {
			display: inline-block;
			position: relative;
			padding-left: 25px;
			margin: 15px 0;
		}

		.news-main .filter input[type="radio"] {
			display: none;
		}

		.news-main .filter span {
			height: 1.1rem;
			width: 1.1rem;
			border-radius: 50%;
			display: inline-block;
			position: absolute;
			top: 2px;
			left: 0;
			background-color: #fff;
		}

		.news-main .filter span::after {
			content: "";
			display: block;
			height: 0.7rem;
			width: 0.7rem;
			border-radius: 50%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #ad4730;
			opacity: 0;
			transition: opacity 0.2s;
		}

		.news-main .filter input:checked ~ span::after {
			opacity: 1;
		}

/* ser-main */

.ser-main .fxw > div {
	border-top: 1px solid #666;
	margin: 60px 0;
}

	.ser-main .ser-title {
		border-bottom: 1px solid #666;

	}

		.ser-main .ser-title a {
			color: #fff;
			display: flex;
			align-items: center;
			padding: 20px 0;
		}

		.ser-main .ser-title a.hover,
		.ser-main .ser-title a.active
		{
			background-color: rgba(255,255,255,.2);
			color: #d8b64a;
		}

		.ser-main .ser-title img {
			width: 40px;
			margin: 0 10px 0 20px;
		}

		.ser-main .icon {
			margin-left: auto;
		}

	.ser-main .ser-content {
		background-color: rgba(255,255,255,.1);
		padding: 10px 30px;
		border-bottom: 1px solid #666;
	}

	.clients {
		margin: 60px -20px !important;
	}

	.clients h2 {
		color: #222;
		padding: 50px 30px;
	}

	.clients > div:nth-child(1) {
		background: url('../images/client.png') center center no-repeat;
		background-size: cover;
	}

	.clients .slider {
		height: 900px;
		background-color: #fff;
		padding: 40px 20px;
	}

	@media screen and (min-width: 630px) and (max-width: 1025.9px) {
		.clients .slider div {
			width: calc(33.3% - 30px);
		}
	}

	@media screen and (max-width: 629.9px) {
		.clients .slider div {
			width: calc(50% - 30px);
		}
	}

		.clients .slider div {
			height: 100px;
			margin: 15px;
			background-color: #fff;
			float: left;
			overflow: hidden;
		}

			.clients .slider div img {
				width: 100%;
			}

/* team-content */

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

	.team-content .head {
		/* display: flex;
		justify-content: space-between; */
		/* margin: 0 -20px; */
	}

		.team-content .head>div {
			width: 100%;
		}

		.team-content .head .photo {
			/* width: 100%; */
			/* height: 280px; */
			aspect-ratio: 1;
			background-color: #ccc;
			overflow: hidden;
			margin: 0 -20px;
		}

		.team-content .head .data {
			/* width: 60%; */
			padding: 20px 0;
		}

			.team-content h2 span {
				display: block;
				margin: 30px 0;
			}

			.team-content .data div {
				border-top: 1px solid #666;
				padding: 20px 0;
				display: flex;
                flex-wrap: wrap;
                article {
                    word-break: break-all;
                    width: calc(100% - 131px - 10px);
                    padding-left: 10px;

                }
			}

				.team-content .data div p:first-child {
					width: 102px;
					color: #d8b64a;
					display: inline-block;
					margin: 0;
				}

		.team-content .detail {
			padding: 0;
		}

		.team-content h5 {
			color: #d8b64a;
			border-top: 1px solid #666;
			padding-top: 30px;
			margin-top: 30px;
		}

		.team-content .detail h5:first-child {
			border-top-width: 0;
		}

}

@media screen and (min-width: 768px) and (max-width: 1025.9px) {

	.team-content .head {
		display: flex;
		justify-content: space-between;
	}

		.team-content .head>div {
			width: 40%;
		}

		.team-content .head .photo {
			width: 100%;
			/* height: 480px; */
			background-color: #ccc;
			overflow: hidden;
			aspect-ratio: 1/1;
		}

		.team-content .head .data {
			/* width: 740px; */
			padding-top: 20px;
			width: 50%;
		}

			.team-content h2 span {
				display: block;
				margin: 30px 0;
			}

			.team-content .data div {
				border-top: 1px solid #666;
				padding: 20px 0;
				display: flex;
                flex-wrap: wrap;
                article {
                    word-break: break-all;
                    width: calc(100% - 131px - 10px);
                    padding-left: 10px;

                }
			}

				.team-content .data div p:first-child {
					width: 102px;
					color: #d8b64a;
					display: inline-block;
					margin: 0;
				}

		.team-content .detail {
			padding: 0 80px;
		}

		.team-content h5 {
			color: #d8b64a;
			border-top: 1px solid #666;
			padding-top: 40px;
			margin-top: 40px;
		}

		.team-content .detail h5:first-child {
			border-top-width: 0;
		}

}

/* article-content */

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

	.article-content .head {
		display: flex;
		font-size: 0.875rem;
		align-items: center;
		margin: 20px 0;
	}
    /* zac 0915 */
		.article-content .head div {
			margin: 0 10px 0 0;
		}

		.article-content .main h2 {
			margin-bottom: 30px;
		}

			.article-content .main .sub img {
				width: 100%;
			}

		.article-content .social {
			display: flex;
			justify-content: center;
			margin-top: 100px;
			padding-bottom: 100px;
			border-bottom: 1px solid #666;
		}

			.article-content .social img {
				width: 40px;
				margin: 0 10px;
			}

		.article-content .plus h2 {
			text-align: center;
			margin: 60px 0 40px 0;
		}

		.article-content .main p {
			line-height: 1.5rem;
		}

			.article-content .plus .other {
				/* display: flex;
				justify-content: space-between; */
			}

			.article-content .plus .item {
				/* width: 48%; */
				margin-top: 40px;
			}

			.article-content .plus .item img {
				width: 100%;
			}

			.article-content .plus .item .tag {
				margin: 0;
			}

			.article-content .plus .item a>div:nth-child(2) {
				margin: 10px 0;
				display: flex;
				justify-content: space-between;
			}

			.article-content .plus .item>div:nth-child(2),
			.article-content .plus .item>div:nth-child(3) {
				padding: 0 10px;
			}

			.article-content .plus .item a {
				color: #fff;
				transition: color 0.3s;
			}

			.article-content .plus .item a:hover {
				color: #d8b64a;
				transition: color 0.3s;
			}

}

@media screen and (min-width: 768px) and (max-width: 1025.9px) {

	.article-content .head {
		display: flex;
		font-size: 0.875rem;
		align-items: center;
		margin: 20px 0;
	}

		.article-content .head div {
			margin: 0 40px 0 0;
		}

		.article-content .main h2 {
			margin-bottom: 30px;
		}

		.article-content .fxw {
			width: 592px;
		}

			.article-content .main .sub img {
				width: 100%;
			}

		.article-content .social {
			display: flex;
			justify-content: center;
			margin-top: 100px;
			padding-bottom: 100px;
			border-bottom: 1px solid #666;
		}

			.article-content .social img {
				width: 40px;
				margin: 0 10px;
			}

		.article-content .plus h2 {
			text-align: center;
			margin: 60px 0 40px 0;
		}

			.article-content .plus .other {
				display: flex;
				justify-content: space-between;
			}

			.article-content .plus .item {
				width: 48%;
			}

			.article-content .plus .item img {
				width: 100%;
			}

			.article-content .plus .item .tag {
				margin: 0;
			}

			.article-content .plus .item a>div:nth-child(2) {
				margin: 10px 0;
				display: flex;
				justify-content: space-between;
			}

			.article-content .plus .item>div:nth-child(2),
			.article-content .plus .item>div:nth-child(3) {
				padding: 0 10px;
			}

			.article-content .plus .item a {
				color: #fff;
				transition: color 0.3s;
			}

			.article-content .plus .item a:hover {
				color: #d8b64a;
				transition: color 0.3s;
			}

}