.page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  position : relative;
  margin   : 0 auto;
  width    : 100%;
  min-width: 300px;
}

.preloader {
  position           : fixed;
  left               : 0px;
  top                : 0px;
  height             : 100%;
  width              : 100%;
  z-index            : 99999;
  background-color   : #eee;
  background-position: center center;
  background-repeat  : no-repeat;
  background-image   : url(../images/logo-2.png);
}

/* logo */

.nav-bar {
  width     : 100%;
  height    : 80;
  position  : fixed;
  top       : 0;
  left      : 0;
  z-index   : 13;
  transition: all 0.5s;
}

.nav-bar .logo {
  position: absolute;
  top     : 30px;
  left    : 5%;
  display : block;
  width   : 271px;
  height  : 34px;
  overflow: hidden;
}

.nav-bar .logo img {
  width: 100%;
}

/* 视频 */
.front-page {
  width     : 100%;
  height    : 100%;
  position  : fixed;
  left      : 0;
  top       : -100%;
  transition: all 1s;
  overflow  : hidden;
  z-index   : 11;
}

body.full-page .front-page {
  top: 0;
}

.section-page {
  width   : 100%;
  height  : 100%;
  overflow: hidden;
}

video {
  min-width : 100%;
  min-height: 100%;
  width     : auto;
  height    : auto;
  position  : absolute;
  top       : 50%;
  left      : 50%;
  transform : translate3d(-50%, -50%, 0);
  object-fit: fill;
}

.front-mask {
  width             : 100%;
  height            : 100%;
  position          : absolute;
  top               : 0;
  left              : 0;
  /* background     : url("../images/heart.png") no-repeat center center; */
  background-size   : cover;
  transition        : transform 0.4s ease-out;
  z-index           : 4;
}

.front-mask.show {
  transform: scale(1);

}

.front-mask.hide {
  transform          : scale(4);
  transition-duration: 0.4s;
}


/* **** */

.arrow {
  width                : 87px;
  height               : 87px;
  line-height          : 87px;
  position             : absolute;
  left                 : 50%;
  margin-left          : -44px;
  bottom               : 4%;
  cursor               : pointer;
  display              : block;
  -moz-border-radius   : 50%;
  -webkit-border-radius: 50%;
  border-radius        : 50%;
  z-index              : 1111111111;
}

.arrow img {
  text-align: center;
  position  : relative;
  top       : 25%;
  left      : 40%;
}

.arrow:before,
.arrow:after {
  content              : '';
  position             : absolute;
  left                 : 0;
  top                  : 0;
  -moz-border-radius   : 50%;
  -webkit-border-radius: 50%;
  border-radius        : 50%;
  pointer-events       : none
}

.arrow:before {
  width             : 88px;
  height            : 88px;
  border            : 1px solid #fff;
  -moz-transition   : all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -o-transition     : all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transition: all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition        : all 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)
}

.arrow:after {
  width             : 86px;
  height            : 86px;
  border            : 2px solid #fff;
  background-color  : rgba(255, 255, 255, 0.1);
  opacity           : 0;
  -moz-transform    : scale(0.5, 0.5);
  -ms-transform     : scale(0.5, 0.5);
  -webkit-transform : scale(0.5, 0.5);
  transform         : scale(0.5, 0.5);
  -moz-transition   : all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition     : all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition        : all 0.8s cubic-bezier(0.77, 0, 0.175, 1)
}

.arrow:hover:before {
  opacity           : 0;
  -moz-transform    : scale(1.5, 1.5);
  -ms-transform     : scale(1.5, 1.5);
  -webkit-transform : scale(1.5, 1.5);
  transform         : scale(1.5, 1.5);
  -moz-transition   : all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition     : all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition        : all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.arrow:hover:after {
  opacity          : 1;
  -moz-transform   : scale(1, 1);
  -ms-transform    : scale(1, 1);
  -webkit-transform: scale(1, 1);
  transform        : scale(1, 1)
}

/* g-w */

.front-main {
  width     : 100%;
  transition: all 1s;
  background: #fff;
  top       : 0;
  left      : 0;
  padding   : 0;
}

body.full-page .front-main {
  top: 100%;
}

.banner {
  width           : 100%;
  height          : 100vh;
  height          : 920px\0;
  background-image: url(../images/banner.jpg);
  position        : relative;
  z-index         : 1;
}

.banner .bannerbox {
  width             : 50%;
  height            : 100%;
  position          : absolute;
  top               : 0;
  z-index           : 5;
  background-size   : cover;
  background-repeat : no-repeat;
  -webkit-transition: all 0.8s ease;
  transition        : all 0.8s ease;
}

.banner .bannerbox:hover {
  width  : 100%;
  z-index: 10;
}

.banner .bannerleft {
  left               : 0;
  background-image   : url(../images/01.jpg);
  background-position: left top;
}

.banner .bannerright {
  right              : 0;
  background-image   : url(../images/04.jpg);
  background-position: right top;
}

.banner .btns {
  width     : 100%;
  text-align: center;
  position  : absolute;
  left      : 0;
  right     : 0;
  bottom    : 8%;
  z-index   : 1;
}

.banner .btns span {
  display    : block;
  width      : 320px;
  height     : 65px;
  line-height: 32px;
  border     : 1px solid #fff;
  margin     : 0 auto;
  font-size  : 26px;
  color      : #fff;
  padding: 10px 0 0; 
}
.banner .btns span p{
  font-size: 16px; 
}
.banner .btns span :hover {
  color: #014099;
}

.banner .btns span:before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 0;
  height    : 65px;
  background: #014099;
}

.banner .btns p {
  font-size: 14.5px;
  color    : #fff;
}

.banner .links {
  display           : block;
  position          : absolute;
  left              : 0;
  right             : 0;
  top               : 0;
  bottom            : 0;
  z-index           : 10;
  opacity           : 0;
  -webkit-transition: all 0.8s ease-in;
  transition        : all 0.8s ease-in;
  background-size   : cover;
}

.banner .bannerright .links {
  /*background-attachment:fixed;*/
  background-position: right top;
}


.banner .BgBtns {
  width   : 10%;
  height  : 100%;
  position: absolute;
  top     : 0;
  z-index : 20;
}

.banner .BtnsLeft {
  left: 0;
}

.banner .BtnsRight {
  right: 0;
}

.banner .banTit {
  position      : absolute;
  left          : 0;
  top           : 430px;
  right         : 0;
  text-align    : center;
  font-size     : 36px;
  color         : #fff;
  z-index       : 30;
  line-height   : 45px;
  letter-spacing: 10px;
  /*padding-left  : 9px*/
}

.banner .banTit span {
  display       : block;
  font-size     : 29px;
  font-family   : Arial, Helvetica, sans-serif;
  letter-spacing: 0px;
}
.banner .banTit p{
  font-size: 20px; 
  letter-spacing: 0;
  text-align:center;
  padding-right:13px;
}
.video-p,
.b-p {
  display: none;
}

/* **** */
@media screen and (max-width: 1024px) {

  * {
    position: initial !important;
  }

  body {
    height: 100% !important;
  }

  .arrow {
    display: none;
  }

  video {
    height     : 650px;
    min-width  : initial;
    min-height : initial;
    position   : initial;
    top        : initial;
    left       : initial;
    transform  : initial;
    object-fit : fill;
    margin-left: -10%;
  }

  .front-mask {
    display: none;
  }

  .front-mask.show {
    display: none;

  }

  .front-mask.hide {
    display: none;
  }

  .front-page {
    width : 100%;
    height: 650px;
  }

  .banner .banTit {
    display: none;
  }

  .front-main {
    width : 100%;
    height: auto;
  }

  .banner {
    display: none;
  }

  .b-p {
    display: block;
    width  : 100%;
  }

  .gmcc,
  .gmcc img,
  .welling,
  .welling img {
    width : 100%;
    height: 100%;
  }

  .welling {
    margin-top: -5px;
  }

  .nav-bar {
    width     : 100%;
    height    : 80;
    position  : fixed !important;
    top       : 0;
    left      : 0;
    z-index   : 13;
    transition: all 0.5s;
  }

  .nav-bar .logo {
    position: absolute !important;
    top     : 30px;
    left    : 5%;
    display : block;
    width   : 271px;
    height  : 34px;
    overflow: hidden;
  }

  .nav-bar .logo img {
    width: 180px;
  }

}

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

  video {
    height     : 280px !important;
    min-width  : initial;
    min-height : initial;
    position   : initial;
    top        : initial;
    left       : initial;
    transform  : initial;
    object-fit : fill;
    margin-left: -13%;
  }

  .front-mask {
    display: none;
  }

  .front-mask.show {
    display: none;

  }

  .front-mask.hide {
    display: none;
  }

  .front-page {
    margin-top: -10px;
    width     : 100%;
    height    : 280px !important;
  }

}