body { position: relative; padding-top:142px; transition-property: padding; transition-duration: .3s; }
.site-header { position: fixed; left:0; width: 100%; top:0; }
.header-top {
	padding:20px 0;  background-color: #fff; z-index: 100;
	transition-property: padding; transition-duration: .3s;
}
.header-top .cols { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.header-top .logo-a { display: flex; align-items: center; }
.header-top .logo-img {
	height: 60px; margin-right: 0.5rem;
	transition-property: height; transition-duration: .3s;
}
.header-top .logo-a .business-name {
	font-size: 1.5rem; color: teal; font-weight: 700; line-height: 1; text-transform: uppercase;
	transition-property: font-size; transition-duration: .3s;
}

body.affix { padding-top:122px; }
body.affix .header-top { padding-top:15px; padding-bottom: 15px; }
body.affix .header-top .logo-a .business-name { font-size: 1.25rem; }
body.affix .header-top .logo-img { height: 50px; }

.header-top .ph-a {
	font-size: 1.75rem; color:teal; border:2px solid teal; line-height: 46px; border-radius: 25px;
	padding:0 16px 0 calc(48px + 16px); font-weight: 600; position: relative; display: block;
}
.header-top .ph-a::before {
	font-family: "Font Awesome 5 Pro"; content:"\f879"; font-size: 1.25rem; color:#fff;
	background-color: teal; display: block; position: absolute; left:-2px; top:-2px;
	width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%;
	transform: rotate(135deg); transition-property: transform; transition-duration: .6s;
}
.header-top .ph-a:hover:before { transform: rotate(270deg); }
.header-btm { background-color: teal; color: #fff; }
.header-btm .site-menu {
	display: flex; justify-content: space-between; text-transform: uppercase;
	padding: 0.25rem 0; font-size: 1.25rem; font-weight: 600;
}
.accreditation-company-logos { display: flex; align-items: center; justify-content: center; margin:0 -1rem -3rem; }
.accreditation-company-logos > .col { margin:0 1rem 3rem; }
.accreditation-company-logos > .col > img { max-height: 120px;}

.site-footer {
	text-align: center; padding:10px 0; color: #fff; background-color: teal;
}

.contact-info { display: flex; justify-content: space-between; }
.contact-info > .col { width: calc((100% - 40px) / 3); font-weight: 600; }
.contact-info .ico {
	display: block; font-size: 2rem; color: teal; margin-bottom: 1rem;
}
.contact-info .wechat-id::before { margin-right: 0.25rem; }

.contact-form { display: flex; flex-wrap: wrap; justify-content: space-between; margin:0 -10px -20px; }
.contact-form > .col { width: 100%; margin:0 10px 20px; }
.contact-form > .col.name,
.contact-form > .col.phone,
.contact-form > .col.email {
	width: calc((100% - 60px) / 3);
}
.contact-form .wpcf7-not-valid-tip {
	position: absolute; left:0.5rem; top:calc(100% - 8px); background-color: teal; color: #fff;
	z-index: 10; display: block; padding:2px 0.5rem; border-radius: 0.25rem; font-size: 16px;
}
.contact-form .wpcf7-not-valid-tip::before {
	content: ""; position: absolute; bottom:100%; left:0.5rem;
	border-color: transparent transparent teal transparent; border-style: solid;
	border-width: 8px 6px;
}


@media (max-width:1050px) {
	.header-btm .site-menu .mob { display: none; }
}
@media (max-width:992px) {
	.header-btm .site-menu { text-transform: none; }
	.contact-info { justify-content: space-around; }
	.contact-info > .col { width: auto; }
}
@media (max-width:850px) {
	body { padding-top: 136px; }
	body.affix { padding-top: 116px; }
	.header-btm .site-menu { font-size: 1rem; }
}
@media (max-width:768px) {
	.accreditation-company-logos { margin: 0 -0.5rem -3rem; }
	.accreditation-company-logos > .col { margin: 0 0.5rem 3rem; }

	.contact-form > .col.name, 
	.contact-form > .col.phone, 
	.contact-form > .col.email {
		width: 100%;
	}

	.contact-info { justify-content: space-between; }
}
@media (max-width:650px) {
	body { padding-top: 101px; }
	body.affix { padding-top: 71px; }
	body.affix .header-top { padding-top: 10px; padding-bottom: 10px; }
	.site-header { border-bottom: 1px solid teal; }
	.header-btm { display: none; }
}
@media (max-width:600px) {
	.header-top { padding:10px 0; }
	.header-top .logo-a .business-name { font-size: 1.25rem; }
	.header-top .logo-img { height: 50px; }
	.header-top .ph-a { font-size: 1.5rem; }

	.contact-info { display: block; text-align: left; }
	.contact-info .ico {
		display: inline-block; margin-right: 0.5rem; font-size: 1rem; margin-bottom: 0; vertical-align: middle;
	}
	.contact-info > .col + .col { margin-top:0.5rem; }
}
@media (max-width:500px) {
	.header-top .ph-a { font-size: 0; padding:0 0 0 46px; }
}
@media (max-width:500px) {
	.site-footer { font-size: 16px; }
}
@media (max-width:350px) {
	.site-footer br.mob-elm { display: inline; }
}