:root {
	--about1-blue: #086ee8;
	--about1-dark: #07162c;
	--about1-ink: #18263a;
	--about1-muted: #445268;
	--about1-line: #e4eaf1;
	--about1-pale: #f4f7fb
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

.about1-page {
	margin: 0;
	color: var(--about1-ink);
	font: 15px/2 "Microsoft YaHei", "PingFang SC", Arial, sans-serif
}

.about1-page a {
	color: inherit;
	text-decoration: none
}

.about1-container {
	width: min(1180px, calc(100% - 48px));
	margin: auto
}

.about1-header {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 76px;
	color: #fff;
	border-bottom: 1px solid #ffffff26
}

.about1-header-inner {
	height: 100%;
	display: flex;
	align-items: center
}

.about1-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	font-size: 17px;
	font-weight: 700
}

.about1-logo>b {
	display: grid;
	place-items: center;
	width: 31px;
	height: 31px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 10px;
	font-style: italic
}

.about1-logo small {
	display: block;
	color: #9bb8d9;
	font-size: 6px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1
}

.about1-nav {
	display: flex;
	gap: 34px;
	margin: auto
}

.about1-nav a {
	position: relative;
	color: #bdcde0;
	font-size: 12px
}

.about1-nav a:hover,
.about1-nav .about1-active {
	color: #fff
}

.about1-active:after {
	content: "";
	position: absolute;
	bottom: -23px;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #4bc4ff;
	transform: translateX(-50%)
}

.about1-phone {
	padding-left: 20px;
	border-left: 1px solid #ffffff26
}

.about1-phone small,
.about1-phone strong {
	display: block
}

.about1-phone small {
	color: #8ea8c7;
	font-size: 8px
}

.about1-phone strong {
	font-size: 14px;
	line-height: 1.2
}

.about1-menu {
	display: none
}

.about1-hero {
	position: relative;
	height: 430px;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(115deg, #06152c, #073c78)
}

.about1-hero:after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
	background-size: 70px 70px;
	mask-image: linear-gradient(90deg, transparent, #000)
}

.about1-hero-inner {
	position: relative;
	z-index: 2;
	padding-top: 155px
}

.about1-hero p {
	margin: 0;
	color: #49c4ff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px
}

.about1-hero h1 {
	margin: 4px 0 10px;
	font-size: 45px;
	line-height: 1.3;
	letter-spacing: 3px
}

.about1-hero span {
	color: #a9bfd8
}

.about1-hero-word {
	position: absolute;
	right: -30px;
	bottom: -56px;
	color: #ffffff09;
	font: bold 118px Arial, sans-serif;
	letter-spacing: -5px
}

.about1-layout {
	display: grid;
	grid-template-columns: 245px 1fr;
	gap: 100px;
	align-items: start;
	padding-top: 105px;
	padding-bottom: 120px
}

.about1-aside {
	position: sticky;
	top: 35px
}

.about1-aside>p,
.about1-section-head p,
.about1-contact p {
	margin: 0;
	color: var(--about1-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px
}

.about1-aside>h2 {
	margin: 4px 0 29px;
	font-size: 25px
}

.about1-aside nav {
	border-top: 1px solid var(--about1-line)
}

.about1-aside nav a {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 13px 4px;
	border-bottom: 1px solid var(--about1-line);
	color: #4a5870;
	font-size: 13px;
	transition: .2s
}

.about1-aside nav span {
	color: #687586;
	font-size: 9px
}

.about1-aside nav a:hover,
.about1-aside nav .about1-aside-active {
	padding-left: 10px;
	color: var(--about1-blue);
	font-weight: 700
}

.about1-aside-note {
	margin-top: 35px;
	padding: 25px;
	color: #fff;
	background: var(--about1-blue)
}

.about1-aside-note small,
.about1-aside-note b {
	display: block
}

.about1-aside-note small {
	color: #bfe1ff;
	font-size: 7px;
	letter-spacing: 1.4px
}

.about1-aside-note b {
	margin: 0px 0;
	font-size: 15px
}

.about1-aside-note p {
	margin: 0;
	color: #d7ecff;
	font-size: 11px;
	line-height: 1.7
}

.about1-article {
	min-width: 0
}

.about1-section {
	padding: 0 0 90px;
	margin-bottom: 90px;
	border-bottom: 1px solid var(--about1-line);
	scroll-margin-top: 150px
}

.about1-section:last-child {
	margin-bottom: 0
}

.about1-section-head {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	margin-bottom: 38px
}

.about1-section-head>span {
	padding-top: 4px;
	color: #687586;
	font-size: 11px
}

.about1-section-head h2 {
	margin: 0;
	font-size: 35px;
	line-height: 1.4
}

.about1-section p {
	/* margin: 0 0 10px; */
	color: var(--about1-muted);
	text-align: justify
}

.about1-section .about1-lead {
	color: #25364b;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.8;
	text-align: left
}

.about1-section blockquote {
	margin: 45px 0 0;
	padding: 28px 34px;
	border-left: 4px solid var(--about1-blue);
	color: #53667d;
	background: var(--about1-pale);
	font-size: 18px
}

.about1-section blockquote b {
	color: var(--about1-blue);
	font-size: 24px
}

.about1-business-list {
	margin-top: 45px;
	border-top: 1px solid var(--about1-line)
}

.about1-business-list>div {
	display: grid;
	grid-template-columns: 55px 225px 1fr;
	gap: 18px;
	align-items: center;
	padding: 23px 0;
	border-bottom: 1px solid var(--about1-line)
}

.about1-business-list span {
	color: #687586;
	font-size: 10px
}

.about1-business-list h3 {
	margin: 0;
	font-size: 16px
}

.about1-business-list p {
	margin: 0;
	font-size: 13px;
	text-align: left
}

.about1-subtitle {
	position: relative;
	margin: 42px 0 20px;
	padding-left: 17px;
	font-size: 19px
}

.about1-subtitle:before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	width: 3px;
	background: var(--about1-blue)
}

.about1-highlight {
	margin-top: 38px;
	padding: 30px 35px;
	color: #fff;
	background: linear-gradient(100deg, #086ee8, #049de5)
}

.about1-highlight b {
	font-size: 21px
}

.about1-highlight p {
	margin: 8px 0 0;
	color: #d9efff;
	text-align: left
}

.about1-recognition-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px
}

.about1-recognition-grid>div {
	padding: 32px;
	border: 1px solid var(--about1-line)
}

.about1-recognition-grid small {
	color: var(--about1-blue);
	font-size: 8px;
	letter-spacing: 1.5px
}

.about1-recognition-grid h3 {
	margin: 7px 0 18px;
	font-size: 20px
}

.about1-recognition-grid p {
	margin: 0;
	font-size: 13px;
	text-align: left
}

.about1-service-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	padding: 30px;
	background: var(--about1-pale)
}

.about1-service-row>div {
	text-align: center
}

.about1-service-row b,
.about1-service-row span {
	display: block
}

.about1-service-row b {
	color: var(--about1-blue);
	font-size: 19px
}

.about1-service-row span {
	color: var(--about1-muted);
	font-size: 11px;
	line-height: 1.7
}

.about1-service-row i {
	color: #b2becb;
	font-style: normal
}

.about1-vision {
	position: relative;
	overflow: hidden;
	padding: 55px !important;
	border: 0 !important;
	color: #fff;
	background: var(--about1-dark)
}

.about1-vision::before {
	content: "";
	position: absolute;
	right: -6%;
	bottom: -18%;
	width: 62%;
	height: 78%;
	opacity: .32;
	background:
		radial-gradient(circle at 16% 24%, #5ed3ff 0 3px, transparent 4px),
		radial-gradient(circle at 58% 24%, #5ed3ff 0 3px, transparent 4px),
		radial-gradient(circle at 58% 68%, #5ed3ff 0 3px, transparent 4px),
		radial-gradient(circle at 88% 68%, #5ed3ff 0 3px, transparent 4px),
		linear-gradient(90deg, transparent 15%, #36bffc 15% 15.5%, transparent 15.5% 58%, #36bffc 58% 58.5%, transparent 58.5%),
		linear-gradient(0deg, transparent 23%, #36bffc 23% 23.8%, transparent 23.8% 67%, #36bffc 67% 67.8%, transparent 67.8%);
	transform: skewX(-12deg);
	pointer-events: none
}

.about1-vision::after {
	content: "";
	position: absolute;
	right: 5%;
	top: 14%;
	width: 120px;
	height: 120px;
	border: 1px solid rgba(102, 207, 255, .18);
	border-radius: 50%;
	box-shadow: 0 0 0 18px rgba(102, 207, 255, .04), 0 0 0 42px rgba(102, 207, 255, .025);
	pointer-events: none
}

.about1-vision>* {
	position: relative;
	z-index: 1
}

.about1-vision .about1-section-head p {
	color: #66cfff
}

.about1-vision .about1-section-head>span {
	color: #728aa5
}

.about1-vision>p {
	color: #afc0d4
}

.about1-vision>strong {
	display: block;
	margin-top: 45px;
	color: #fff;
	font-size: 37px;
	line-height: 1.5
}

.about1-contact {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(105deg, #086ee8, #008dcc)
}

.about1-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .3;
	background:
		radial-gradient(circle at 67% 24%, rgba(255,255,255,.9) 0 2px, transparent 3px),
		radial-gradient(circle at 82% 42%, rgba(255,255,255,.75) 0 2px, transparent 3px),
		radial-gradient(circle at 58% 72%, rgba(255,255,255,.7) 0 2px, transparent 3px),
		repeating-linear-gradient(128deg, transparent 0 31px, rgba(255,255,255,.16) 32px, transparent 33px 64px);
	clip-path: polygon(45% 0, 100% 0, 100% 100%, 25% 100%);
	pointer-events: none
}

.about1-contact::after {
	content: "";
	position: absolute;
	right: -9%;
	top: 18%;
	width: 62%;
	height: 62%;
	border-top: 1px solid rgba(255,255,255,.32);
	border-bottom: 1px solid rgba(255,255,255,.16);
	transform: rotate(-17deg);
	box-shadow: 0 -22px 0 -21px rgba(255,255,255,.18), 0 22px 0 -21px rgba(255,255,255,.18);
	pointer-events: none
}

.about1-contact>* {
	position: relative;
	z-index: 1
}

.about1-contact>.about1-container {
	min-height: 210px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.about1-contact p {
	color: #c6ecff
}

.about1-contact h2 {
	margin: 3px 0;
	font-size: 29px
}

.about1-contact a {
	padding: 13px 24px;
	color: var(--about1-blue);
	background: #fff;
	font-weight: 700
}

.about1-contact a span {
	margin-left: 28px
}

.about1-footer {
	color: #aab8c9;
	background: #07111f
}

.about1-footer>.about1-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 45px 0
}

.about1-footer p {
	margin: 0;
	color: #65758a;
	font-size: 11px
}

.about1-footer strong {
	color: #fff;
	font-size: 22px
}

.about1-copyright {
	padding: 12px 20px;
	border-top: 1px solid #ffffff12;
	color: #58687a;
	text-align: center;
	font-size: 10px
}

.about1-backtop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: var(--about1-blue);
	opacity: 0;
	transform: translateY(10px);
	transition: .25s
}

.about1-backtop-show {
	opacity: 1;
	transform: none
}

.about1-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: .65s
}

.about1-visible {
	opacity: 1;
	transform: none
}

.about1-container {
	width: 88%;
	max-width: none
}

.about1-value-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px;
	margin-top: 45px
}

.about1-value-grid blockquote,
.about1-value-grid .about1-highlight {
	height: 100%;
	margin: 0
}

.about1-value-grid .about1-highlight {
	display: flex;
	flex-direction: column;
	justify-content: center
}

.about1-vision-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 25px
}

.about1-vision-contact-grid .about1-vision {
	height: 100%;
	margin: 0;
	padding: 42px !important
}

.about1-vision-contact-grid .about1-vision>strong {
	font-size: 29px
}

.about1-vision-contact-grid .about1-contact {
	height: 100%;
	padding: 42px
}

.about1-contact-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between
}

.about1-vision-contact-grid .about1-contact a {
	margin-top: 30px
}

@media(max-width:850px) {
	.about1-phone {
		display: none
	}

	.about1-nav {
		gap: 20px
	}

	.about1-layout {
		grid-template-columns: 190px 1fr;
		gap: 50px
	}

	.about1-business-list>div {
		grid-template-columns: 35px 180px 1fr
	}
}

@media(max-width:680px) {
	.about1-container {
		width: calc(100% - 36px)
	}

	.about1-header {
		height: 65px
	}

	.about1-menu {
		display: grid;
		gap: 4px;
		margin-left: auto;
		padding: 8px;
		border: 0;
		background: none
	}

	.about1-menu i {
		width: 22px;
		height: 1px;
		background: #fff
	}

	.about1-nav {
		position: absolute;
		top: 65px;
		left: 0;
		display: none;
		flex-direction: column;
		width: 100%;
		gap: 0;
		padding: 12px 20px;
		background: #07162cf2
	}

	.about1-nav-open {
		display: flex
	}

	.about1-nav a {
		padding: 9px
	}

	.about1-active:after {
		display: none
	}

	.about1-hero {
		height: 360px
	}

	.about1-hero-inner {
		padding-top: 125px
	}

	.about1-hero h1 {
		font-size: 38px
	}

	.about1-hero-word {
		font-size: 65px
	}

	.about1-layout {
		display: block;
		padding-top: 65px;
		padding-bottom: 70px
	}

	.about1-aside {
		position: static;
		margin-bottom: 65px
	}

	.about1-aside nav {
		display: grid;
		grid-template-columns: 1fr 1fr
	}

	.about1-aside-note {
		display: none
	}

	.about1-section {
		padding-bottom: 60px;
		margin-bottom: 60px
	}

	.about1-section-head h2 {
		font-size: 28px
	}

	.about1-section .about1-lead {
		font-size: 18px
	}

	.about1-business-list>div {
		display: block;
		padding: 20px 0
	}

	.about1-business-list h3 {
		margin: 5px 0
	}

	.about1-recognition-grid {
		grid-template-columns: 1fr
	}

	.about1-service-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 25px
	}

	.about1-service-row i {
		display: none
	}

	.about1-vision {
		padding: 35px 28px !important
	}

	.about1-vision>strong {
		font-size: 29px
	}

	.about1-contact>.about1-container {
		display: block;
		padding: 48px 0
	}

	.about1-contact h2 {
		font-size: 25px
	}

	.about1-contact a {
		display: inline-block;
		margin-top: 20px
	}

	.about1-footer>.about1-container {
		display: block
	}

	.about1-footer p {
		margin: 20px 0
	}

	.about1-footer strong {
		display: block
	}
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	.about1-reveal {
		opacity: 1;
		transform: none
	}
}

@media(max-width:680px) {
	.about1-value-grid {
		grid-template-columns: 1fr
	}
}

@media(max-width:680px) {
	.about1-vision-contact-grid {
		grid-template-columns: 1fr
	}

	.about1-vision-contact-grid .about1-contact {
		padding: 35px 28px
	}

	.about1-contact-card {
		min-height: 230px
	}
}

/* About page: readable descriptions in the requested sections. */
.about1-page .about1-business-list p,
.about1-page .about1-recognition-grid p,
.about1-page #about1-service > p,
.about1-page .about1-service-row span {
    color: #000;
    font-size: 16px;
    line-height: 1.8;
}
@media (max-width: 680px) {
    .about1-page .about1-business-list p,
    .about1-page .about1-recognition-grid p,
    .about1-page #about1-service > p,
    .about1-page .about1-service-row span {
        font-size: 16px;
    }
}