:root {
	/* color */
	/* size */
}

html,
body {
	margin: 0rem;
}

html ::-webkit-scrollbar, body ::-webkit-scrollbar {
		display: none;
	}

:root {
	/* 设计稿 375 */
	font-size: 26.6667vw;
}

:root div {
		box-sizing: border-box;
	}

:root a {
		-webkit-text-decoration: none;
		text-decoration: none;
		color: rgba(0, 0, 0, 1);
	}

.m-mg-b-4 {
	margin-bottom: 0.04rem;
}

.m-mg-b-16 {
	margin-bottom: 0.16rem;
}

.m-pd-b-16 {
	padding-bottom: 0.16rem;
}

.m-mg-t-24 {
	margin-top: 0.24rem;
}

.m-mg-t-48 {
	margin-top: 0.48rem;
}

.m-mg-t-16 {
	margin-top: 0.16rem;
}

html,
body {
  margin: 0px;
}

html a, body a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: rgba(0, 0, 0, 1);
  }

html,
body {
  font-family: PingFang SC;
  overflow-x: hidden;
}

/** pc 和 移动端布局不同，长度单位的分别定义 */

/* 行样式 */

.page-row {
  width: 1440px;
}

.page-row-content {
  width: 1200px;
}

/* 居中*/

.position-x-center {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.position-xy-center {
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.mg-center {
  margin: 0px auto;
}

/* font-size */

.fs-0 {
  font-size: 0px;
}

/* flex */

.flex-dir-c {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-r-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex-ai-end {
  align-items: end;
}

.flex-dir-rv {
  display: flex;
  flex-direction: revert;
  align-items: center;
}

/* 背景图 */

.cover-centger-bg {
  background-size: cover;
  background-pisition: center;
}

/* margin */

.mg-l-80 {
  margin-left: 80px;
}

.mg-b-32 {
  margin-bottom: 32px;
}

.mg-b-64 {
  margin-bottom: 64px;
}

.mg-r-24 {
  margin-right: 24px;
}

.mg-t-24 {
  margin-top: 24px;
}

.mg-t-48 {
  margin-top: 48px;
}

.mg-t-16 {
  margin-top: 16px;
}

.clean-margin {
  margin: 0px !important;
}

.padding-tb-18 {
  padding: 18px 0px;
}

.padding-tb-28 {
  padding: 28px 0px;
}

/* button */

.button-white-bg {
  background: #f7f8fa;
  border-radius: 3px;
  color: #000000;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.header {
  position: fixed;
  top: 0rem;
  left: 0rem;
  height: 0.44rem;
  width: 100%;
  padding: 0rem 0.16rem 0rem 0.24rem;
  z-index: 99999;
}

.header .logo,
  .header .logo img {
    display: block;
    width: 0.88rem;
    height: 0.16rem;
  }

.header .menu {
    position: absolute;
    right: 0.16rem;
    top: 0.12rem;
    width: 0.2rem;
    height: 0.2rem;
  }

.header-bg-dark {
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0rem 0.01rem 0rem 0rem rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10rem);
          backdrop-filter: blur(10rem);
}

.header-bg {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0rem 0.01rem 0rem 0rem rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(0.1rem);
          backdrop-filter: blur(0.1rem);
}

.footer {
  color: rgba(0, 0, 0, 1);
  font-size: 0.12rem;
  line-height: 0.2rem;
  /* padding: 0.16rem 0.22rem 0.16rem 0.24rem; */
  padding: 0.16rem 0.12rem 0.16rem 0.12rem;
}

.footer .link-row {
    padding: 0.16rem 0.12rem;
  }

.footer .link-row .name {
      font-size: 0.14rem;
      font-weight: 400;
      line-height: 0.2rem;
    }

.footer .link-row .arrow-right {
      width: 0.12rem;
      height: 0.12rem;
    }

.footer .hotline {
    padding: 0rem 0.12rem;
    margin-top: 0.16rem;
    margin-bottom: 0.24rem;
  }

.footer .hotline .title {
      font-size: 0.12rem;
      font-weight: 400;
      line-height: 0.2rem;
      color: rgba(0, 0, 0, 0.6);
    }

.footer .hotline .phoneNo {
      font-size: 0.18rem;
      font-weight: 500;
      line-height: 0.26rem;
    }

.footer .divider {
    height: 0.01rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0.23rem;
  }

.footer .serverAndPrivate {
    font-size: 0.12rem;
    font-weight: 400;
    line-height: 0.2rem;
  }

.footer .serverAndPrivate a {
      color: rgba(0, 0, 0, 0.6);
    }

.footer .serverAndPrivate .divider-v {
      width: 0.01rem;
      height: 0.12rem;
      border: 0.01rem solid rgba(0, 0, 0, 0.2);
      margin: 0rem 0.09rem 0rem 0.1rem;
    }

.footer .serverAndPrivate,
  .footer .recordNo {
    margin-bottom: 0.04rem;
  }

.footer .serverAndPrivate a, .footer .recordNo a {
      color: rgba(0, 0, 0, 0.6);
    }

.footer .serverAndPrivate {
    padding-left: 0.12rem;
    color: rgba(0, 0, 0, 0.6);
  }

.footer .recordNo {
    padding-left: 0.12rem;
    color: rgba(0, 0, 0, 0.6);
  }

.footer .copyright {
    padding-left: 0.12rem;
    color: rgba(0, 0, 0, 0.6);
  }

.footer .gongan {
    color: rgba(0, 0, 0, 0.6);
    padding-left: 0.12rem;
  }

.footer .gongan img {
      width: 0.12rem;
      height: 0.12rem;
      margin-right: 0.06rem;
    }

.mask-box {
  position: fixed;
  top: 0rem;
  left: 0rem;
  overflow: hidden;
  height: 0vh;
  z-index: 2;
  transition: height 0.5s;
  transition-timing-function: curve(0.25, 0.1, 0.25, 1);
}

.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(30rem);
          backdrop-filter: blur(30rem);
}

.mask .mask-item {
    opacity: 0;
    transition-property: opacity transfrom;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }

.mask .mask-item-0 {
    transition-delay: 0s;
  }

.mask .mask-item-1 {
    transition-delay: 0.15s;
  }

.mask .mask-item-2 {
    transition-delay: 0.23s;
  }

.mask .mask-item-3 {
    transition-delay: 0.31s;
  }

.mask .mask-item-4 {
    transition-delay: 0.39s;
  }

.mask a {
    -webkit-text-decoration: none;
    text-decoration: none;
  }

.mask .close {
    position: absolute;
    top: 0.12rem;
    right: 0.16rem;
    width: 0.198rem;
    height: 0.198rem;
  }

.mask .enheylig-pic {
    position: absolute;
    top: 0.76rem;
    left: 0.56rem;
    width: 0.72rem;
    height: 0.15rem;
  }

.mask .server {
    color: #ffffff;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask .developer {
    color: #ffffff;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask .download {
    color: #ffffff;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask .about {
    color: #ffffff;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask .server {
    top: 1.39rem;
  }

.mask .server a {
    display: block;
    margin-top: 0.16rem;
    color: #666666;
    font-weight: 400;
    font-size: 0.14rem;
  }

.mask .server a:active {
    color: #00b386;
  }

.mask .server a.active {
    color: #00b386;
  }

/* .developer {
		top: 2.11rem;
	} */

/* .download {
		top: 2.83rem;
	}
	.about {
		top: 3.55rem;
	} */

.mask .download {
    top: 3.7rem;
  }

.mask .about {
    top: 4.4rem;
  }

.mask-white {
  background: rgba(255, 255, 255, 0.7);
}

.mask-white .server {
    color: rgba(0, 0, 0, 1);
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask-white .developer {
    color: rgba(0, 0, 0, 1);
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask-white .download {
    color: rgba(0, 0, 0, 1);
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.mask-white .about {
    color: rgba(0, 0, 0, 1);
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 0.24rem;
    position: absolute;
    left: 0.56rem;
  }

.banner {
	position: relative;
	color: #ffffff;
	font-size: 0rem;
}

.banner .banner-pic {
		height: 2.81rem;
	}

.banner .title {
		position: absolute;
		top: 1.2rem;
		left: 0.55rem;
		line-height: 0.4rem;
		font-size: 0.32rem;
		font-weight: 600;
	}

.introduce {
	padding: 0.32rem 0.2rem;
	color: #141414;
}

.introduce .title {
		font-size: 0.24rem;
		font-weight: 500;
		line-height: 0.32rem;
		text-align: center;
	}

.introduce .text-body {
		font-size: 0.14rem;
		font-weight: 400;
		line-height: 0.22rem;
	}

.milepost {
	background-color: #fafafa;
	padding: 0.32rem 0.24rem 0.4rem 0.34rem;
	position: relative;
}

.milepost .panel-point {
		position: absolute;
		left: 0.16rem;
		top: 0.54rem;
	}

.milepost .panel-point .node {
			width: 0.1rem;
			height: 0.1rem;
			border: 0.03rem solid #000000;
			border-radius: 50%;
			position: absolute;
			left: -0.035rem;
		}

.milepost .panel-point .ps-t-54 {
			top: 0rem;
		}

.milepost .panel-point .ps-t-152 {
			top: 0.98rem;
		}

.milepost .panel-point .ps-t-196 {
			top: 1.96rem;
		}

.milepost .panel-point .ps-t-394 {
			top: 2.94rem;
		}

.milepost .panel-point .ps-t-388 {
			top: 3.88rem;
		}

.milepost .panel-point .ps-t-490 {
			top: 4.9rem;
		}

.milepost .panel-point .ps-t-544 {
			top: 5.98rem;
		}

.milepost .panel-point .ps-t-598 {
			top: 7.2rem;
		}

.milepost .panel-point .ps-t-652 {
			top: 8.81rem;
		}

.milepost .panel-point .ps-t-706 {
			top: 10.14rem;
		}

.milepost .panel-point .line {
			height: 11.27rem;
			border: 0.02rem solid red;
			-o-border-image: linear-gradient(
					180deg,
					rgba(0, 0, 0, 0.08),
					rgba(0, 0, 0, 0)
				)
				2 2;
			   border-image: linear-gradient(
					180deg,
					rgba(0, 0, 0, 0.08),
					rgba(0, 0, 0, 0)
				)
				2 2;
		}

.milepost .milepost-body .card {
			width: 3.17rem;
			background-color: #ffffff;
			box-shadow: 0rem 2rem 6rem 0rem rgba(0, 0, 0, 0.06);
			border-radius: 0.06rem;
			color: rgba(0, 0, 0, 1);
			padding: 0.16rem 0.16rem 0.16rem 0.16rem;
		}

.milepost .milepost-body .card .years {
				font-size: 0.16rem;
				line-height: 0.22rem;
				font-weight: 500;
				margin-bottom: 0.08rem;
			}

.milepost .milepost-body .card .events {
				font-size: 0.14rem;
				font-weight: 400;
				line-height: 0.2rem;
			}

.certificate {
	/* height: 5.36rem; */
	background-image: url("/images-m/m-certificate-bg.png");
	background-size: cover;
	overflow: hidden;
	text-align: center;
	color: #141414;
}

.certificate .title {
		font-size: 0.24rem;
		font-weight: 500;
		line-height: 0.32rem;
		margin: 0.64rem 0rem 0.4rem 0rem;
	}

.certificate .logo-box {
		display: grid;
		grid-template-columns: 1.02rem 1.02rem 1.02rem;
		grid-template-row: 0.82rem 0.82rem 0.82rem;
		grid-row-gap: 0.16rem;
		grid-column-gap: 0.12rem;
		font-size: 0rem;
		padding: 0rem 0.24rem 0.16rem;
	}

.certificate .logo-box .box {
			padding-top: 0.1rem;
			width: 1.02rem;
			height: 0.8rem;
			background: #ffffff;
			box-shadow: 0rem 0.02rem 0.06rem 0rem rgba(0, 0, 0, 0.06);
			border-radius: 0.06rem;
		}

.certificate .logo-box .box .certificate-logo {
				width: 0.4rem;
				height: 0.4rem;
				margin-bottom: 0.02rem;
			}

.certificate .logo-box .box .name {
				font-size: 0.12rem;
				font-weight: 400;
				line-height: 0.18rem;
			}

.join-us {
	background-image: url("/images-m/m-join-us.png");
	background-size: cover;
	height: 2.6rem;
	color: #ffffff;
	text-align: center;
	padding-top: 0.48rem;
}

.join-us .title {
		font-size: 0.24rem;
		font-weight: 500;
		line-height: 0.32rem;
	}

.join-us .text-body {
		width: 2.67rem;
		height: 0.6rem;
		font-size: 0.12rem;
		line-height: 0.2rem;
		margin: 0rem auto;
		margin-top: 0.16rem;
		margin-bottom: 0.32rem;
	}

.join-us .button {
		width: 0.96rem;
		height: 0.32rem;
		background: #f7f8fa;
		border-radius: 0.02rem;
		font-size: 0.12rem;
		color: rgba(0, 0, 0, 1);
		line-height: 0.2rem;
		line-height: 0.32rem;
		margin: 0rem auto;
	}