body .vertical-centered-box {



  position: absolute;



  width: 100%;



  height: 100%;



  text-align: center;



}



body .vertical-centered-box:after {



  content: '';



  display: inline-block;



  height: 100%;



  vertical-align: middle;



  margin-right: -0.25em;



}



body .vertical-centered-box .content {



  -webkit-box-sizing: border-box;



  -moz-box-sizing: border-box;



  box-sizing: border-box;



  display: inline-block;



  vertical-align: middle;



  text-align: left;



  font-size: 0;



}







.loader-circle {



  position: absolute;



  left: 50%;



  top: 50%;



  width: 120px;



  height: 120px;



  border-radius: 50%;



  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);



  margin-left: -60px;



  margin-top: -60px;



}



.loader-line-mask {



  position: absolute;



  left: 50%;



  top: 50%;



  width: 60px;



  height: 120px;



  margin-left: -60px;



  margin-top: -60px;



  overflow: hidden;



  -webkit-transform-origin: 60px 60px;



  -moz-transform-origin: 60px 60px;



  -ms-transform-origin: 60px 60px;



  -o-transform-origin: 60px 60px;



  transform-origin: 60px 60px;



  -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));



  -webkit-animation: rotate 1.2s infinite linear;



  -moz-animation: rotate 1.2s infinite linear;



  -o-animation: rotate 1.2s infinite linear;



  animation: rotate 1.2s infinite linear;



}



.loader-line-mask .loader-line {



  width: 120px;



  height: 120px;



  border-radius: 50%;



  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);



}



#particles-background,



#particles-foreground {



  left: -51%;



  top: -51%;



  width: 202%;



  height: 202%;



  -webkit-transform: scale3d(0.5, 0.5, 1);



  -moz-transform: scale3d(0.5, 0.5, 1);



  -ms-transform: scale3d(0.5, 0.5, 1);



  -o-transform: scale3d(0.5, 0.5, 1);



  transform: scale3d(0.5, 0.5, 1);



}



#particles-background {

background-image: linear-gradient(180deg, 

  #0575e6 0%, 

  #021b79 100%);

}



lesshat-selector {



  -lh-property: 0; } 



@-webkit-keyframes rotate{ 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);}}



@-moz-keyframes rotate{ 0% { -moz-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg);}}



@-o-keyframes rotate{ 0% { -o-transform: rotate(0deg);} 100% { -o-transform: rotate(360deg);}}



@keyframes rotate{ 0% {-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}



[not-existing] {



  zoom: 1;



}



lesshat-selector {



  -lh-property: 0; } 



@-webkit-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}



@-moz-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}



@-o-keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}



@keyframes fade{ 0% { opacity: 1;} 50% { opacity: 0.25;}}



[not-existing] {



  zoom: 1;



}



lesshat-selector {



  -lh-property: 0; } 



@-webkit-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}



@-moz-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}



@-o-keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}



@keyframes fade-in{ 0% { opacity: 0;} 100% { opacity: 1;}}



[not-existing] {



  zoom: 1;



}



canvas{



    width: 100%;



    height: 100%;



}

.abanner{

  max-width: 1920px;

  margin: 0 auto;

  position: relative;

font-size: 16px;

z-index: 4;

height: 700px;

}

.z_int {

  width: 100%;

  position: absolute;

  padding-top: 206px;

  margin-left: auto;

  margin-right: auto;

  text-align: center;

}

.z_int h1{

font-family:  Microsoft YaHei;

font-size: 125px;

font-weight: 600;

font-stretch: normal;

letter-spacing: 15px;

color: #ffffff;

}

.z_int p{

font-family: Microsoft YaHei;

font-size: 28px;

font-weight: normal;

font-stretch: normal;

letter-spacing: 0px;

color: #ffffff;

}

.box1{

  width: 100%;

}

.box1 ul{

  margin: 0 auto;

  width: 1450px;

  padding: 5%;

}

.box1 ul li{

      display: inline-block;

      width: 21%;

      margin-left: 3%;

}

.box1 ul li p{

font-family: Microsoft YaHei;

font-size: 36px;

color: #00a8ff;

text-align: center;

}

.box_2{

  width: 100%;

}

.title1{

  text-align: center;

font-family: Microsoft YaHei;

font-size: 48px;

font-weight: 600;

font-stretch: normal;

letter-spacing: 6px;

color: #000000;

}

.title1 span{

  text-align: center;

font-family: Microsoft YaHei;

font-size: 48px;

font-weight: 600;

font-stretch: normal;

letter-spacing: 6px;

color: #0567d5;

}

.title2{

  text-align: center;

font-family: Microsoft YaHei;

font-size: 24px;

font-weight: normal;

font-stretch: normal;

letter-spacing: -1px;

color: #959595;

}

.box_2 ul{

  /* margin: 0 auto;

  width: 1800px;

  padding: 5%; */

}



.box_2 ul li{

  width: 100%;

height: 425px;



text-align: center;

}



.box_2 ul li:nth-child(odd){



background-color: #d1f4ff;



}





.box_2 ul li .div{

     padding-top: 3%;

}

.box_2 ul li h3{



font-family: Microsoft YaHei;

font-size: 45px;

font-weight: 600;

font-stretch: normal;

letter-spacing: 3px;

margin: auto;

display: inline-block;

}

.box_2 ul li h2{

  font-family: Microsoft YaHei;

  color: #6f6f6f;

  }

.box_2 ul li p{

  font-family: Microsoft YaHei;

  font-size: 24px;

  font-weight: normal;

  font-stretch: normal;

  letter-spacing: 0px;

  color: #787878;

  margin: 0 auto;

  width: 36%;

  margin-top: 2%;

 /* text-align: justify; */

}



.title3{

  margin-top: 69px;

  text-align: center;

font-family: Microsoft YaHei;

font-size: 29px;

font-weight: normal;

font-stretch: normal;

line-height: 27px;

letter-spacing: 0px;

color: #787878;

}

.join{

      width: 100%;

      height: 750px;



}

.box4{

  width: 1200px;

  margin: 0 auto;

  margin-top: 50px;

}

.box4 ul li{

  display: inline-block;

  width: 49%;

  margin-top: 30px;

}

.img{

  width: 82px;

  display: inline-block;

  float: left;

  margin-top: 10px;

}

.box4 ul li input{

      width: 480px;

  height: 80px;

      background-color: #eeeeee;

      border: solid 1px #e5e5e5;

  border: none;

  padding-left: 2%;

  font-size: 16px;

  vertical-align: bottom;

  

}

::placeholder {

font-family: Microsoft YaHei;

font-size: 28px;

font-weight: normal;

font-stretch: normal;

letter-spacing: 0px;

color: #787878;

}



#vcode{

  width: 234px;

}

#code{

  margin-right: 15%;

  float: right;

  margin-top: 2%;

}

.text1{

  margin-top: 4%;

}

#jmessage{

  padding-left: 2%;

padding-top: 8px;

  width: 1080px;

height: 323px;

  border: none;

background-color: #eeeeee;

border: solid 1px #e5e5e5;

}

#bookbtn {

  width: 340px;

  height: 61px;

  display: block;

  background-color: #00a8ff;

  border: none;

  cursor: pointer;

  font-size: 16px;

  line-height: 56px;

  color: #ffffff;

  -moz-border-radius: 3px;

  border-radius: 3px;

  transition: all 0.5s;

  -moz-transition: all 0.5s;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  margin: 0 auto;

  margin-top: 28px;

  }

  #bookbtn:hover {

  background-color: #57abff;

  color: #ffffff;

  }



  .box_2 ul li .div div img{



    margin-left: -3%;



    width: 45px;

}





  @media screen and (min-width: 800px) and (max-width:1200px) {

    .box_2 ul li {

      width: 100%;

      height: 329px;

      text-align: center;

      

  }

  .box_2 ul li p {

    font-family: Microsoft YaHei;

    font-size: 24px;

    font-weight: normal;

    font-stretch: normal;

    letter-spacing: 0px;

    color: #787878;

    margin: 0 auto;

    width: 70%;

    margin-top: 2%;

    /* text-align: justify; */

}

  }



  @media screen and (min-width: 200px) and (max-width:768px) {

    .box_2 ul li .div div img {

      margin-left: -5%;

      width: 25px;

  }

    .box_2 ul li {

      width: 100%;

      height: 200px;

      text-align: center;

  }

    .box_2 ul li h2 {

      font-family: Microsoft YaHei;

      color: #6f6f6f;

      font-size: 15px;

  }

  .box_2 ul li h3 {

    font-family: Microsoft YaHei;

    font-size: 30px;

    font-weight: 600;

    font-stretch: normal;

    letter-spacing: 3px;

  }

  

        .abanner {

            max-width: 1920px;

            margin: 0 auto;

            position: relative;

            font-size: 16px;

            z-index: 4;

            height: 260px;

        }

        .z_int {

            width: 100%;

            position: absolute;

            padding-top: 91px;

            margin-left: auto;

            margin-right: auto;

            text-align: center;

        }

        .z_int h1 {

            font-family: Microsoft YaHei;

            font-size: 55px;

            font-weight: 600;

            font-stretch: normal;

            letter-spacing: 15px;

            color: #ffffff;

        }

        .z_int p {

            font-family: Microsoft YaHei;

            font-size: 14px;

            font-weight: normal;

            font-stretch: normal;

            letter-spacing: 0px;

            color: #ffffff;

        }

        .box1 ul {

            margin: 0 auto;

            width: 100%;

            padding: 5%;

        }

        .box1 ul li {

            display: inline-grid;

            width: 100%;

            margin-left: 0%;

            text-align: center;

        }

        .box1 ul li img{

            margin: 0 auto;

        }

        .box_2 ul {

            margin: 0 auto;

            width: 100%;

        

        }

        .box_2 ul li p {

          font-family: Microsoft YaHei;

          font-size: 13px;

          font-weight: normal;

          font-stretch: normal;

          letter-spacing: 0px;

          color: #787878;

          margin: 0 auto;

          width: 90%;

          margin-top: 4%;

          /* text-align: justify; */

      }

        .box4 {

            width: 100%;

            margin: 0 auto;

            margin-top: 50px;

            padding-left: 8%;

        }

        .img {

            width: 17px;

            display: inline-block;

            float: left;

            margin-top: 0px;

            margin: 2% 5% 0% 4%;

        }

        .img img{

         width: 100%;

        }

        .box4 {

            width: 100%;

            margin: 0 auto;

            margin-top: 50px;

            height: 580px;

        }

        .box4 ul li {

            display: inline-block;

            width: 100%;

            margin-top: 30px;

        }

        .box4 ul li input {

            width: 70%;

            height: 42px;

            background-color: #eeeeee;

            border: solid 1px #e5e5e5;

            border: none;

            padding-left: 2%;

            font-size: 16px;

            vertical-align: bottom;

        }

        #vcode {

            width: 34%;

        }

        ::placeholder {

            font-family: Microsoft YaHei;

            font-size: 13px;

            font-weight: normal;

            font-stretch: normal;

            letter-spacing: 0px;

            color: #787878;

        }

        #code {

            margin-right: 20%;

            float: right;

            width: 30%;

            margin-top: 0%;

        }

        #jmessage {

            padding-left: 2%;

            padding-top: 8px;

            width: 70%;

            height: 162px;

            border: none;

            background-color: #eeeeee;

            border: solid 1px #e5e5e5;

        }

        #bookbtn {

            width: 30%;

            height: 50px;

            display: block;

            background-color: #00a8ff;

            border: none;

            cursor: pointer;

            font-size: 16px;

            line-height: 56px;

            color: #ffffff;

            -moz-border-radius: 3px;

            border-radius: 3px;

            transition: all 0.5s;

            -moz-transition: all 0.5s;

            -webkit-transition: all 0.5s;

            -o-transition: all 0.5s;

            margin: 0 auto;

            margin-top: 28px;

        }

  }

@media screen and (min-width: 200px) and (max-width:767px) {

  .box_2 ul li .div div img {

    margin-left: -6%;

    width: 17px;

}

  .box_2 ul li {

    width: 100%;

    height: 200px;

    text-align: center;

}

  .box_2 ul li h2 {

    font-family: Microsoft YaHei;

    color: #6f6f6f;

    font-size: 15px;

}

.box_2 ul li h3 {

  font-family: Microsoft YaHei;

  font-size: 20px;

  font-weight: 600;

  font-stretch: normal;

  letter-spacing: 3px;

}



      .abanner {

          max-width: 1920px;

          margin: 0 auto;

          position: relative;

          font-size: 16px;

          z-index: 4;

          height: 260px;

      }

      .z_int {

          width: 100%;

          position: absolute;

          padding-top: 91px;

          margin-left: auto;

          margin-right: auto;

          text-align: center;

      }

      .z_int h1 {

          font-family: Microsoft YaHei;

          font-size: 55px;

          font-weight: 600;

          font-stretch: normal;

          letter-spacing: 15px;

          color: #ffffff;

      }

      .z_int p {

          font-family: Microsoft YaHei;

          font-size: 14px;

          font-weight: normal;

          font-stretch: normal;

          letter-spacing: 0px;

          color: #ffffff;

      }

      .box1 ul {

          margin: 0 auto;

          width: 100%;

          padding: 5%;

      }

      .box1 ul li {

          display: inline-grid;

          width: 100%;

          margin-left: 0%;

          text-align: center;

      }

      .box1 ul li img{

          margin: 0 auto;

      }

      .box_2 ul {

          margin: 0 auto;

          width: 100%;

      

      }

      .box_2 ul li p {

        font-family: Microsoft YaHei;

        font-size: 13px;

        font-weight: normal;

        font-stretch: normal;

        letter-spacing: 0px;

        color: #787878;

        margin: 0 auto;

        width: 90%;

        margin-top: 4%;

        /* text-align: justify; */

    }

      .box4 {

          width: 100%;

          margin: 0 auto;

          margin-top: 50px;

          padding-left: 8%;

      }

      .img {

          width: 17px;

          display: inline-block;

          float: left;

          margin-top: 0px;

          margin: 2% 5% 0% 4%;

      }

      .img img{

       width: 100%;

      }

      .box4 {

          width: 100%;

          margin: 0 auto;

          margin-top: 50px;

          height: 580px;

      }

      .box4 ul li {

          display: inline-block;

          width: 100%;

          margin-top: 30px;

      }

      .box4 ul li input {

          width: 70%;

          height: 42px;

          background-color: #eeeeee;

          border: solid 1px #e5e5e5;

          border: none;

          padding-left: 2%;

          font-size: 16px;

          vertical-align: bottom;

      }

      #vcode {

          width: 34%;

      }

      ::placeholder {

          font-family: Microsoft YaHei;

          font-size: 13px;

          font-weight: normal;

          font-stretch: normal;

          letter-spacing: 0px;

          color: #787878;

      }

      #code {

          margin-right: 20%;

          float: right;

          width: 30%;

          margin-top: 0%;

      }

      #jmessage {

          padding-left: 2%;

          padding-top: 8px;

          width: 70%;

          height: 162px;

          border: none;

          background-color: #eeeeee;

          border: solid 1px #e5e5e5;

      }

      #bookbtn {

          width: 30%;

          height: 50px;

          display: block;

          background-color: #00a8ff;

          border: none;

          cursor: pointer;

          font-size: 16px;

          line-height: 56px;

          color: #ffffff;

          -moz-border-radius: 3px;

          border-radius: 3px;

          transition: all 0.5s;

          -moz-transition: all 0.5s;

          -webkit-transition: all 0.5s;

          -o-transition: all 0.5s;

          margin: 0 auto;

          margin-top: 28px;

      }

}