@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
  text-align: center;
}

img {
  vertical-align: middle;
  max-width: 100%;
}

a {
  text-decoration: none;
}

@keyframes beat {
  0% {
    transform: translate(0, 10px);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 10px);
  }
}
.title {
  color: #333;
  font-size: 60px;
  font-weight: 500;
}
.title span {
  color: #62A09B;
}

.slogin {
  color: rgba(51, 51, 51, 0.6);
  font-size: 26px;
  margin-top: 20px;
}

@font-face {
  font-family: font1;
  src: url("../fonts/5c8a06ae38e9a1552549550.otf");
}
#main {
  height: 100vh;
}
#main .swiper-slide {
  overflow: hidden;
}
#main .box-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#main #main-1 {
  background: url(../img/1.jpg) center bottom;
  background-size: cover;
}
#main #main-1 .wrap {
  height: calc(100vh - 240px);
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#main #main-1 .wrap > div {
  width: 100%;
}
#main #main-1 .wrap .logo-wrap {
  margin-bottom: 73px;
  text-align: center;
}
#main #main-1 .wrap .text {
  font-size: 60px;
  color: #1E4E4A;
  font-weight: 300;
  margin-bottom: 92px;
  font-family: font1;
  line-height: 1;
  letter-spacing: 28px;
}
#main #main-1 .wrap .btn {
  width: 493px;
  display: inline-block;
  font-size: 50px;
  color: #1E4E4A;
  height: 104px;
  line-height: 98px;
  border-radius: 52px;
  border: 3px solid #1E4E4A;
}
#main #main-1 .more {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 20px;
}
#main #main-1 .more img {
  animation: beat 2s infinite;
  cursor: pointer;
  width: 50px;
}
#main #main-1 .mobile-main-1 {
  width: 100%;
  position: relative;
}
#main #main-1 .mobile-main-1 > div {
  flex-shrink: 0;
  width: 100%;
}
#main #main-1 .mobile-main-1 .logo {
  width: 2rem;
}
#main #main-1 .mobile-main-1 .txt {
  font-size: 0.32rem;
  color: #6E6E6E;
  margin: 0.16rem auto 0.6rem;
}
#main #main-1 .mobile-main-1 .btn {
  display: inline-block;
  width: 3.6rem;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.4rem;
  background-color: #62A09B;
  color: #fff;
  font-size: 0.34rem;
}
#main #main-1 .mobile-main-1 .cc {
  height: 8rem;
  background: url(../img/mobile/3.png) center no-repeat;
  background-size: 130%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#main #main-1 .mobile-main-1 .cc > div {
  width: 5.62rem;
  height: 6.9rem;
  background: url(../img/mobile/1.png) center no-repeat;
  background-size: cover;
}
#main #main-1 .mobile-main-1 .c1 {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.32rem;
  background-color: #F3B7B7;
  position: absolute;
  top: 1.62rem;
  left: 1.04rem;
}
#main #main-1 .mobile-main-1 .c2 {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 0.42rem;
  background-color: #FAD664;
  position: absolute;
  top: 3.68rem;
  left: 6.54rem;
}
#main #main-1 .mobile-main-1 .c3 {
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 0.82rem;
  background-color: #79BFBA;
  position: absolute;
  top: 8.9rem;
  left: 0.4rem;
}
#main #main-2 .wrap {
  width: 100%;
}
#main #main-2 .wrap .pic {
  margin-top: 85px;
}
#main #main-2 .wrap .pic img {
  margin-left: 53px;
  opacity: 0;
  transition-duration: 1s;
  margin-top: 54px;
}
#main #main-2 .wrap .pic img:first-child {
  margin-left: 0;
}
#main #main-2 .wrap .pic.f img {
  opacity: 1;
}
#main #main-2 .wrap .pic.f img:nth-child(2n-1) {
  margin-top: 0;
}
#main #main-2 .wrap .pic.f img:nth-child(2n) {
  margin-top: 107px;
}
#main #main-2 .wrap #main-3-swiper {
  display: none;
}
#main #main-3 .wrap {
  width: 100%;
}
#main #main-3 .wrap .wrap-phone {
  height: 70vh;
  border-radius: 40px;
  border: 10px solid #333;
  position: relative;
  z-index: 2;
  margin-top: 5vh;
}
#main #main-3 .wrap .wrap-sea {
  margin-top: -42vh;
  height: 42vh;
  background-image: url(../img/2.jpg);
  background-size: cover;
  transform: translate(0, -40px);
}
#main #main-4 #main-4-swiper-wrap {
  position: relative;
}
#main #main-4 #main-4-swiper-wrap #main-4-swiper {
  margin: 80px auto auto;
  width: 800px;
}
#main #main-4 #main-4-swiper-wrap #main-4-swiper img {
  border-radius: 30px;
}
#main #main-4 #main-4-swiper-wrap .swiper-button-next, #main #main-4 #main-4-swiper-wrap .swiper-button-prev {
  width: 46px;
  height: 81px;
  background-image: url(../img/1.png);
  left: 50%;
  margin-left: -700px;
}
#main #main-4 #main-4-swiper-wrap .swiper-button-next {
  transform: rotate(180deg);
  margin-left: 650px;
}
#main #main-4.swiper-slide-active #main-4-swiper-wrap #main-4-swiper .swiper-slide:nth-child(2n) {
  margin-top: 65px;
}
#main #main-4 .swiper-slide {
  transition-duration: 1s;
}
#main #main-5 {
  background-color: #62A09B;
}
#main #main-5 .wrap {
  margin-top: -120px;
}
#main #main-5 .text {
  margin: 40px auto 70px;
  color: #fff;
  font-size: 60px;
}
#main #main-5 .btn {
  width: 339px;
  display: inline-block;
  height: 72px;
  line-height: 66px;
  border-radius: 52px;
  border: 3px solid #FFFFFF;
  color: #fff;
  font-size: 34px;
}
#main #main-5 .footer {
  background-color: #fff;
  height: 215px;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  font-size: 14px;
  color: #B2B2B5;
  line-height: 2;
  padding-top: 70px;
}
#main #main-5 .footer a {
  color: #B2B2B5;
}

@media (min-width: 980px) {
  .pc {
    display: inherit;
  }
  .mobile {
    display: none;
  }
}
/*手机端*/
@media (max-width: 767px) and (min-width: 768px), (max-width: 979px) {
  .pc {
    display: none;
  }
  .mobile {
    display: initial;
  }
  .title {
    font-size: 0.6rem;
  }
  .slogin {
    font-size: 0.32rem;
    margin-top: 0.12rem;
    color: rgba(51, 51, 51, 0.8);
  }
  #main > .swiper-wrapper {
    overflow-y: auto;
    display: block;
  }
  #main > .swiper-wrapper .swiper-slide {
    display: flex;
    align-items: baseline;
    justify-content: center;
    height: auto;
  }
  #main #main-1 {
    background-image: url("");
    margin-top: 1.18rem;
  }
  #main #main-2 {
    margin-top: 1.04rem;
  }
  #main #main-2 .wrap .pic {
    display: none;
  }
  #main #main-2 .wrap #main-3-swiper {
    margin-top: 1.04rem;
    display: block;
  }
  #main #main-2 .wrap #main-3-swiper .swiper-slide:nth-child(2n) {
    margin-top: 0.84rem;
  }
  #main #main-3 {
    margin-top: 1.2rem;
  }
  #main #main-3 .wrap .wrap-phone {
    height: 6.9rem;
    border-width: 0.1rem;
    border-radius: 0.4rem;
    background-color: #000;
  }
  #main #main-3 .wrap .wrap-sea {
    height: 3.32rem;
    margin-top: -3.32rem;
    transform: translate(0, -0.74rem);
  }
  #main #main-4 {
    margin-top: 1.2rem;
  }
  #main #main-4 .wrap {
    width: 100%;
  }
  #main #main-4 .wrap #main-4-swiper-wrap #main-4-swiper {
    margin: 0.4rem auto auto;
    width: 7.5rem;
    padding-top: 0.52rem;
  }
  #main #main-4 .wrap #main-4-swiper-wrap #main-4-swiper::after {
    content: "";
    display: block;
    width: 5.64rem;
    height: 5.64rem;
    background-color: #62A09B;
    border-radius: 5.64rem;
    left: 50%;
    top: 50%;
    margin: -2.82rem auto auto -2.82rem;
    position: absolute;
  }
  #main #main-4 .wrap #main-4-swiper-wrap #main-4-swiper img {
    width: 4.02rem;
    border-radius: 0.4rem;
  }
  #main #main-4 .wrap #main-4-swiper-wrap #main-4-swiper .swiper-pagination {
    bottom: auto;
    top: 0;
    font-size: 0;
  }
  #main #main-4 .wrap #main-4-swiper-wrap #main-4-swiper .swiper-pagination .swiper-pagination-bullet {
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 0.12rem;
    margin: 0 0.08rem;
  }
  #main #main-4 .wrap #main-4-swiper-wrap #main-4-swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #62A09B;
  }
  #main #main-5 {
    margin-top: 1.2rem;
    padding-top: 0.56rem;
  }
  #main #main-5 .wrap {
    margin-top: 0;
    width: 100%;
  }
  #main #main-5 img {
    width: 2.08rem;
  }
  #main #main-5 .text {
    font-size: 0.32rem;
    margin: 0.08rem auto 0.88rem;
  }
  #main #main-5 .btn {
    width: 3.6rem;
    height: 0.8rem;
    line-height: 0.8rem;
    border-radius: 0.4rem;
    background-color: #44817C;
    color: #fff;
    font-size: 0.34rem;
    border: none;
    margin-bottom: 1.38rem;
  }
  #main #main-5 .footer {
    font-size: 0.24rem;
    color: #9B9B9B;
    padding-top: 0.6rem;
    position: relative;
    height: 2.02rem;
  }
}