@charset "UTF-8";

.margin-top10 {

  margin-top: 2.66667vw;
}



.margin-top20 {

  margin-top: 5.33333vw;
}



.margin-bottom10 {

  margin-bottom: 2.66667vw;
}



.margin-bootom20 {

  margin-bottom: 5.33333vw;
}



.padding-top0 {

  padding-top: 0vw !important;
}



.padding-bottom0 {

  padding-bottom: 0vw !important;
}



.padding-bottom30 {

  padding-bottom: 8vw !important;
}



.pink {

  background: #F6F6F6;
}



* {

  box-sizing: border-box;

  -webkit-tap-highlight-color: transparent;
}



body {

  font-size: 14px;

  font-family: Arial, Helvetica Neue, Helvetica, PingFang SC, Source Han Sans CN, Microsoft YaHei, Open Sans, Myriad Pro, Myriad, San Francisco, Segoe UI, Verdana, Hiragino Sans GB, Wenquanyi Micro Hei, sans-serif;

  margin: 0;

  padding: 0;

  width: 100%;

  color: #333333;

  background-color: #fff;
}



/* 头部导航栏 */

.header-nav-box {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 10.66667vw;

  z-index: 2;

  transition: background 0.8s;
}

.header-nav-box .logo-box {

  position: absolute;

  top: 1.86667vw;

  left: 4.26667vw;

  width: 18.13333vw;

  height: 6.93333vw;

  background: url("../images/logo.png") no-repeat center/cover;

  z-index: 2;

  transition: background 0.8s;
}

.header-nav-box .on-trial-btn {

  position: absolute;

  top: 1.86667vw;

  right: 13.86667vw;

  width: 17.6vw;

  height: 6.93333vw;

  background: #049ffe;

  border-radius: 1.06667vw;

  font-size: 3.2vw;

  font-weight: 500;

  text-align: center;

  color: #FFFFFF;

  line-height: 7vw;

  display: none;

  transition: display 0.8s;
}

.header-nav-box .nav-btn,

.header-nav-box .close-nav-btn {

  position: absolute;

  top: 2.66667vw;

  right: 4.26667vw;

  width: 5.33333vw;

  height: 5.33333vw;

  z-index: 2;
}

.header-nav-box .nav-btn {

  transition: background 0.8s;

  background: url("../images/nav-btn.png") no-repeat center/cover;
}

.header-nav-box .close-nav-btn {

  background: url("../images/close_nav.png") no-repeat center/cover;
}

.header-nav-box.opaque {

  background: #FFFFFF;

  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
}

.header-nav-box.opaque .logo-box {

  background: url("../images/logo-dark.png") no-repeat center/cover;
}

.header-nav-box.opaque .on-trial-btn {

  display: block;
}

.header-nav-box.opaque .nav-btn {

  background: url("../images/black_nav-btn.png") no-repeat center/cover;
}

header {

  position: relative;

  width: 100vw;

  height: 106.66667vw;
}

header .banner-box {

  position: relative;

  width: 100vw;

  height: 106.66667vw;

  color: #FFFFFF;

  text-align: center;

  overflow: hidden;
}

header .banner-box .banner-big-title {

  font-size: 5.86667vw;

  font-weight: 600;

  line-height: 8vw;

  margin: 18.66667vw auto 0 auto;
}

header .banner-box .banner-big--sub-title {
  font-size: 5.86667vw;

  font-weight: 600;

  line-height: 8vw;

  margin: 0 auto 8vw auto;
}

header .banner-box .banner-small-title {

  font-size: 3.73333vw;

  font-weight: 400;

  line-height: 5.33333vw;
  margin-bottom: 4vw;
}


header .banner-box .banner-content-img {

  width: 74.66667vw;

  height: 42.93333vw;

  margin: 6.4vw auto;
}

header .banner-box .banner-content-img img {

  height: 100%;

  width: 100%;
}

header .banner-box .immediate-use {

  width: 25.6vw;

  height: 8.53333vw;

  font-size: 3.73333vw;

  line-height: 5.33333vw;

  font-weight: bold;

  color: #0088ff;

  border: 0px solid transparent;

  outline: none;

  border-radius: 6.93333vw;

  background-color: #fff;
}

header .new {

  background: url("../images/wap-new-banner.png") no-repeat center/cover;
}

header .swiper-pagination {

  bottom: 2.66667vw;

  left: 0;

  width: 100%;
}

header .swiper-pagination .swiper-pagination-bullet {

  width: 3.2vw;

  height: 0.26667vw;

  line-height: 0vw;

  font-size: 3.73333vw;

  color: #fff;

  background: rgba(255, 255, 255, 0.9);

  margin: 0 0.8vw;

  border-radius: 0%;
}

header .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {

  background: white;
}



nav {

  width: 100%;

  padding: 10.66667vw 4.26667vw 8vw 4.26667vw;
}

nav .nav-item {

  width: 100%;

  display: flex;

  justify-content: space-between;

  margin-bottom: 6.4vw;
}

nav .nav-item img {

  display: block;

  height: 13.33333vw;

  width: 13.33333vw;

  margin-right: 2.66667vw;
}

nav .nav-item .nav-item-content {

  display: flex;

  flex: 1;

  flex-direction: column;

  justify-content: space-around;

  height: 13.33333vw;

  width: 75.46667vw;
}

nav .nav-item .nav-item-content .nav-item-content-title {

  width: auto;

  height: auto;

  line-height: 6vw;

  font-size: 4.26667vw;

  color: #333333;

  font-weight: 500;
}

nav .nav-item .nav-item-content .nav-item-content-info {

  width: auto;

  height: auto;

  line-height: 4vw;

  font-size: 2.93333vw;

  color: #999999;

  font-weight: 400;
}

nav .nav-item:last-chaild {

  margin-bottom: 0;
}



/* 页面title */

.page-title-box {

  padding: 8vw 4.26667vw 2.66667vw 4.26667vw;
}

.page-title-box .page-bold-title {

  font-size: 5.33333vw;

  font-weight: 500;

  line-height: 7.46667vw;
}

.page-title-box .page-title-info {

  font-size: 3.2vw;

  font-weight: 400;

  line-height: 4.53333vw;

  color: #999999;

  margin-top: 2.66667vw;
}



/* 大图模块 */

.bigimg-section {

  width: 100%;

  padding: 8vw 4.26667vw;
}

.bigimg-section .bigimg {

  width: 91.46667vw;

  height: 91.46667vw;
}

.bigimg-section .bigimg img {

  width: 100%;

  height: 100%;
}

.bigimg-section .bold-title {

  font-size: 4vw;

  line-height: 5.6vw;

  font-weight: 600;
}

.bigimg-section .bigimg-section-list {

  font-size: 3.73333vw;

  color: #999999;

  font-weight: 400;

  line-height: 5vw;

  margin-top: 2.66667vw;
}

.bigimg-section .bigimg-section-item-box {

  width: 100%;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;
}

.bigimg-section .bigimg-section-item {

  width: 31%;

  display: flex;

  align-items: center;

  margin-top: 5.33333vw;
}

.bigimg-section .bigimg-section-item img {

  display: block;

  width: 5.33333vw;

  height: 5.33333vw;

  margin-right: 2.13333vw;
}

.bigimg-section .bigimg-section-item span {

  font-size: 3.46667vw;

  color: #666666;
}

.bigimg-section .bigimg-tag-box {

  width: 100%;

  display: flex;

  justify-content: space-between;
}

.bigimg-section .bigimg-tag-box .bigimg-tag {

  width: 26.66667vw;

  height: 8.53333vw;

  background: #EEEEEE;

  border: 0.53333vw solid #E5E5E5;

  border-radius: 5.33333vw;

  font-size: 3.73333vw;

  color: #0088FF;

  font-weight: 500;

  line-height: 8vw;

  text-align: center;

  margin-top: 2.66667vw;
}



/* 平铺模块 */

.tiling-section {

  width: 100%;

  padding: 0vw 4.26667vw 8vw 4.26667vw;
}

.tiling-section .tiling-section-item {

  position: relative;

  width: 91.46667vw;

  height: 21.6vw;

  color: #FFFFFF;

  margin-top: 2.66667vw;
}

.tiling-section .tiling-section-item img {

  height: 100%;

  width: 100%;
}

.tiling-section .tiling-section-item .bold-title {

  position: absolute;

  top: 4.53333vw;

  left: 5.33333vw;

  font-size: 4.8vw;

  font-weight: 500;

  line-height: 6.66667vw;
}

.tiling-section .tiling-section-item .tiling-section-item-info {

  position: absolute;

  bottom: 4.26667vw;

  left: 5.33333vw;

  font-size: 3.2vw;

  font-weight: 400;

  line-height: 4.53333vw;
}

.tiling-section .tiling-section-item .one-title {

  position: absolute;

  top: 0vw;

  left: 0vw;

  width: 100%;

  height: 100%;

  text-align: center;

  line-height: 22vw;

  font-size: 5.33333vw;

  font-weight: 500;
}



/* 头像 */

.head-portrait-section {

  width: 100%;

  padding: 8vw 4.26667vw 0vw 4.26667vw;
}

.head-portrait-section .head-portrait-section-top {

  width: 100%;

  height: 13.33333vw;

  display: flex;

  align-items: center;
}

.head-portrait-section .head-portrait-section-top img {

  display: block;

  width: 10.66667vw;

  height: 10.66667vw;

  margin-right: 2.66667vw;
}

.head-portrait-section .head-portrait-section-top .people-info-box {

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-around;
}

.head-portrait-section .head-portrait-section-top .people-info-box .people-name {

  font-size: 4.26667vw;

  color: #333333;

  line-height: 5.86667vw;

  font-weight: 600;
}

.head-portrait-section .head-portrait-section-top .people-info-box .people-info {

  font-size: 3.2vw;

  color: #999999;

  line-height: 5.33333vw;

  font-weight: 400;
}

.head-portrait-section .people-comment {

  font-size: 3.73333vw;

  font-weight: 400;

  line-height: 7.46667vw;

  margin-top: 2.66667vw;
}



/* 他们都在用格子匠 */

.tiling-usegzj-section {

  padding-bottom: 10.66667vw;

  display: flex;

  flex-wrap: wrap;
}

.tiling-usegzj-section .tiling-usegzj-item {

  width: 18vw;

  text-align: center;

  margin: 5.33333vw 0vw 0vw 5.33333vw;
}

.tiling-usegzj-section .tiling-usegzj-item img {

  display: block;

  width: 12.8vw;

  height: 12.8vw;

  margin: 0vw auto 2.66667vw auto;
}

.tiling-usegzj-section .tiling-usegzj-item span {

  font-size: 3.2vw;

  font-weight: 400;

  color: #606266;

  line-height: 4.53333vw;
}



/* footer */

footer {

  width: 100%;
}

footer .footer-bgbox {

  position: relative;

  width: 100%;

  height: 53.33333vw;

  text-align: center;

  margin-bottom: 19.46667vw;

  background: url("../images/wap-footer_bg.png") no-repeat center/cover;
}

footer .footer-bgbox .footer-layer {

  position: absolute;

  left: 33.86667vw;

  bottom: -11.46667vw;

  width: 32.26667vw;

  height: 26.66667vw;
}

footer .footer-bgbox .bold-title {

  padding-top: 5.33333vw;

  font-size: 4.8vw;

  color: #FFFFFF;

  line-height: 6.66667vw;

  font-weight: 500;

  z-index: 2;
}

footer .footer-bgbox .small-title {

  font-size: 3.2vw;

  color: rgba(255, 255, 255, 0.6);

  line-height: 4.26667vw;

  font-weight: 400;

  z-index: 2;

  margin: 2.66667vw auto 5.33333vw auto;
}

footer .footer-bgbox .immediate-use {

  width: 25.6vw;

  height: 8.53333vw;

  font-size: 3.73333vw;

  line-height: 5.33333vw;

  font-weight: 500;

  color: #FFFFFF;

  background: linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.25));

  border: 0px solid transparent;

  outline: none;

  border-radius: 6.93333vw;

  margin: auto;
}

footer .contact-us {

  margin-left: 4.26667vw;

  font-size: 4.8vw;

  color: #333333;

  font-weight: 500;

  line-height: 6.66667vw;
}

footer .footer-content {

  padding: 3.46667vw 4.26667vw 0 4.26667vw;
}

footer .footer-content .footer-content-top {

  width: 100%;

  height: 36.53333vw;

  display: flex;

  justify-content: space-between;

  padding-bottom: 8vw;

  margin-bottom: 5.33333vw;
}

footer .footer-content .footer-content-top .contact-info {

  height: 100%;

  padding-top: 1.86667vw;

  display: flex;

  flex-direction: column;

  justify-content: space-between;
}

footer .footer-content .footer-content-top .contact-info span {

  font-size: 3.73333vw;

  color: #666666;

  font-weight: 400;

  line-height: 5.33333vw;
}

footer .footer-content .footer-content-top .contact-qr-code {

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;
}

footer .footer-content .footer-content-top .contact-qr-code img {

  width: 21.33333vw;

  height: 21.33333vw;
}

footer .footer-content .footer-content-top .contact-qr-code span {

  font-size: 3.2vw;

  color: #666666;

  font-weight: 400;

  line-height: 4.53333vw;
}

footer .footer-content .copyright {

  font-size: 3.2vw;

  color: #999999;

  font-weight: 400;

  line-height: 5.33333vw;
}