@font-face {
  font-family: "Roboto-Regular";
  src: url("./fonts/Roboto-Regular.ttf");
}

@font-face {
  font-family: "Roboto-Bold";
  src: url("./fonts/Roboto-Bold.ttf");
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("./fonts/Roboto-Medium.ttf");
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 14px;
}

p {
  word-break: break-word;
}

@keyframes upDown {
  0% {
    transform: translateY(-5px);
  }
  25% {
    transform: translateY(3px);
  }
  50% {
    transform: translateY(-5px);
  }
  75% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-5px);
  }
}
@media (min-width: 960px) {
  .main {
    width: 1200px;
    margin: 0 auto;
    position: relative;
  }
  .one-view {
    width: 100%;
    height: 734px;
    position: relative;
    overflow: hidden;
  }
  .one-view .wave {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .wave-m {
    display: none;
  }
  .one-view .nav {
    width: 100%;
    padding-top: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .one-view .nav .nav-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .one-view .nav .nav-box .toggle {
    display: none;
  }
  .one-view .nav .logo {
    width: 282px;
    height: 42px;
    background-image: url("../images/logo.png");
    background-size: 100% 100%;
  }
  .one-view .nav .nav-list {
    display: flex;
  }
  .one-view .nav .nav-list li {
    margin-left: 40px;
    display: flex;
    align-items: center;
  }
  .one-view .nav .nav-list li:hover {
    opacity: 0.7;
  }
  .one-view .nav .nav-list li a {
    display: flex;
    align-items: center;
  }
  .one-view .nav .nav-list li img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .one-view .nav .nav-list li a {
    font-size: 16px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 19px;
    text-decoration: none;
  }

  .one-view .content {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .one-view .content .left {
    margin-top: 260px;
  }
  .one-view .content .left h1 {
    width: 562px;
    height: 72px;
    font-size: 60px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #ffffff;
    line-height: 72px;
    margin-bottom: 24px;
  }
  .one-view .content .left p {
    width: 540px;
    height: 56px;
    font-size: 18px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 28px;
  }
  .one-view .content .left .appDownBox {
    display: flex;
  }
  .one-view .content .left .googlePlay {
    display: inline-block;
    width: 165px;
    height: 49px;
    background-image: url("../images/google-play.png");
    margin-top: 32px;
    margin-right: 20px;
  }
  .one-view .content .left .googlePlay:hover {
    box-shadow: 0px 5px 16px rgba(18, 18, 29, 0.36);
  }
  .one-view .content .left .iosStore {
    display: inline-block;
    width: 165px;
    height: 49px;
    background-image: url("../images/iosStore.png");
    margin-top: 32px;
    position: relative;
  }
  .one-view .content .left .iosStore:hover {
    box-shadow: 0px 5px 16px rgba(18, 18, 29, 0.36);
  }
  .one-view .content .left .iosStore img {
    display: none;
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .one-view .content .left .iosStore:hover img {
    display: block;
  }
  .one-view .content .left .down {
    display: flex;
    cursor: pointer;
    margin-top: 41px;
  }
  .one-view .content .left .down:hover {
    opacity: 0.7;
  }
  .one-view .content .left .down .icon {
    width: 14px;
    height: 14px;
    background-image: url("../images/down.png");
    margin-right: 6px;
    animation: upDown 1s infinite;
  }
  .one-view .content .left .down .text {
    height: 16px;
    font-size: 14px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;
  }
  .one-view .content .right {
    width: 352px;
    height: 584px;
    background-image: url("../images/Introduction.png");
    background-size: 100% 100%;
    position: relative;
    bottom: -84px;
  }
  .two-view {
    margin-top: 195px;
  }
  .two-view .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .two-view .main .img {
    width: 614px;
    height: 299px;
    background-image: url("../images/map.png");
  }
  .two-view .main .text {
    width: 470px;
  }
  .two-view .main .text h5 {
    font-size: 24px;
    font-family: Roboto-Medium, Roboto;
    color: #333333;
    line-height: 36px;
    margin-bottom: 20px;
    font-weight: 500;
  }
  .two-view .main .text p {
    font-size: 18px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 28px;
  }
  .three-view {
    margin-top: 127px;
  }
  .three-view .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .three-view .main .text {
    width: 690px;
  }
  .three-view .main .text h5 {
    font-size: 24px;
    font-family: Roboto-Medium, Roboto;
    color: #333333;
    line-height: 36px;
    margin-bottom: 20px;
    font-weight: 500;
  }
  .three-view .main .text p {
    font-size: 18px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 28px;
  }
  .three-view .main .img {
    width: 382px;
    height: 280px;
    background-image: url("../images/buy.png");
  }
  .what-view {
    width: 100%;
    margin-top: 210px;
  }
  .what-view h2 {
    font-size: 36px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #3e3e3e;
    line-height: 42px;
    text-align: center;
  }
  .what-view ul {
    display: flex;
    justify-content: space-between;
    margin-top: 95px;
  }
  .what-view ul li {
    width: 320px;
  }
  .what-view ul li img {
    width: 48px;
    height: 48px;
  }
  .what-view ul li:nth-child(2) img {
    width: 58px;
  }
  .what-view ul li h5 {
    font-size: 20px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #3e3e3e;
    line-height: 30px;
    margin-top: 22px;
  }
  .what-view ul li p {
    font-size: 16px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 24px;
    margin-top: 14px;
  }
  .four-view {
    width: 100%;
    height: 734px;
    position: relative;
    overflow: hidden;
    margin-top: 153px;
  }
  .four-view .wave {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .four-view .main h3 {
    font-size: 36px;
    font-family: Roboto-Medium, Roboto;
    color: #333333;
    line-height: 42px;
    margin-top: 153px;
    text-align: center;
    font-weight: 500;
  }
  .four-view .main .comment-box {
    width: 100%;
    margin-top: 113px;
  }
  .four-view .main .comment-box ul {
    display: flex;
  }
  .four-view .main .comment-box ul li {
    flex: 1;
  }
  .four-view .main .comment-box ul li .acatar {
    width: 66px;
    height: 66px;
  }
  .four-view .main .comment-box ul li:nth-child(1) .acatar {
    background: url("../images/avatar1.png");
    background-size: 100% 100%;
  }
  .four-view .main .comment-box ul li:nth-child(2) {
    margin: 0 80px;
  }
  .four-view .main .comment-box ul li:nth-child(2) .acatar {
    background: url("../images/avatar2.png");
    background-size: 100% 100%;
  }

  .four-view .main .comment-box ul li:nth-child(3) .acatar {
    background: url("../images/avatar3.png");
    background-size: 100% 100%;
  }
  .four-view .main .comment-box ul li .name-box {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 18px;
    margin-bottom: 16px;
  }
  .four-view .main .comment-box ul li .name-box .name {
    font-size: 20px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #3e3e3e;
    margin-right: 18px;
  }
  .four-view .main .comment-box ul li .name-box .stars {
    display: flex;
  }
  .four-view .main .comment-box ul li .name-box .stars i {
    width: 18px;
    height: 18px;
    background-image: url("../images/star.png");
    margin-right: 6px;
  }
  .four-view .main .comment-box ul li p {
    font-size: 16px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #7c7c7c;
    line-height: 24px;
  }
  .five-view {
    width: 100%;
    margin-top: 100px;
    background: #fafafa;
  }
  .five-view .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
  }
  .five-view .main h1 {
    font-size: 48px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #333333;
    line-height: 90px;
  }
  .five-view .main p {
    font-size: 18px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 28px;
    text-align: center;
    margin: 24px 0 32px;
  }
  .five-view .main .googlePlay {
    display: inline-block;
    width: 165px;
    height: 49px;
    background-image: url("../images/google-play.png");
    margin-right: 20px;
  }
  .five-view .main .googlePlay:hover {
    box-shadow: 0px 5px 16px rgba(18, 18, 29, 0.36);
  }
  .five-view .main .iosStore {
    display: inline-block;
    width: 165px;
    height: 49px;
    background-image: url("../images/iosStore.png");
    margin-top: 32px;
    position: relative;
  }
  .five-view .main .iosStore:hover {
    box-shadow: 0px 5px 16px rgba(18, 18, 29, 0.36);
  }
  .five-view .main .iosStore img {
    display: none;
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .five-view .main .iosStore:hover img {
    display: block;
  }
  .footer-box {
    width: 100%;
    background: #363f4a;
    padding: 42px 0;
  }
  .footer-box ul {
    display: flex;
    justify-content: center;
  }
  .footer-box ul li {
    margin: 0 20px;
  }
  .footer-box ul li a {
    font-size: 14px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;
    text-decoration: none;
  }
}

@media (max-width: 960px) {
  .one-view {
    width: 100%;
    height: 13.41rem;
    position: relative;
    padding: 0.31rem 0.4rem;
    box-sizing: border-box;
    text-align: center;
  }
  .wave {
    display: none;
  }
  .one-view .wave-m {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .one-view .nav {
    overflow-y: hidden;
    transition: all 0.3s;
  }
  .one-view .nav .nav-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
  }
  .one-view .nav .logo {
    width: 3.81rem;
    height: 0.58rem;
    background-image: url("../images/mobile/logo.png");
    background-size: 100% 100%;
  }
  .one-view .nav .toggle {
    width: 0.4rem;
    height: 0.4rem;
  }
  .one-view .nav .nav-list {
    display: none;
    width: 100%;
    padding-bottom: 0.3rem;
  }
  .one-view .nav .nav-list li {
    width: 100%;
    display: flex;
  }
  .one-view .nav .nav-list li a {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 0.3rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.35rem;
    text-decoration: none;
    padding: 0.15rem 0;
  }
  .one-view .nav .nav-list img {
    width: 0.28rem;
    height: 0.28rem;
    margin-right: 0.13rem;
  }
  .one-view .content .left h1 {
    font-size: 0.64rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #ffffff;
    line-height: 0.75rem;
    text-align: center;
    margin-top: 1.1rem;
    margin-bottom: 0.32rem;
  }
  .one-view .content .left p {
    font-size: 0.3rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.46rem;
    text-align: center;
    margin-bottom: 0.32rem;
  }
  .one-view .content .left .appDownBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .one-view .content .left .googlePlay {
    display: inline-block;
    width: 2.6rem;
    height: 0.77rem;
    background-image: url("../images/mobile/google-play.png");
    background-size: 2.6rem 0.77rem;
    margin-right: 0.36rem;
  }
  .one-view .content .left .googlePlay:active {
    box-shadow: 0px 5px 16px rgba(18, 18, 29, 0.36);
  }
  .one-view .content .left .iosStore {
    display: inline-block;
    width: 2.6rem;
    height: 0.77rem;
    background-image: url("../images/mobile/iosStore.png");
    background-size: 2.6rem 0.77rem;
    position: relative;
  }
  .one-view .content .left .iosStore img {
    width: 1.62rem;
    height: 0.72rem;
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: none;
  }
  .one-view .content .left .iosStore:active img {
    display: block;
  }
  .one-view .content .left .down {
    display: none;
  }
  .one-view .content .right {
    width: 4.92rem;
    height: 8.18rem;
    background-image: url("../images/mobile/Introduction.png");
    background-size: 100% 100%;
    position: relative;
    margin: 0.85rem auto 0;
  }
  .two-view {
    width: 100%;
    padding: 0 0.4rem;
    box-sizing: border-box;
    margin-top: 3.06rem;
    text-align: center;
  }
  .two-view .main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
    overflow: hidden;
  }
  .two-view .main .img {
    width: 6.76rem;
    height: 3.3rem;
    background-image: url("../images/map.png");
    background-size: 6.76rem 3.3rem;
  }
  .two-view .main .text {
    width: 100%;
  }
  .two-view .main .text h5 {
    font-size: 0.38rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #333333;
    line-height: 0.56rem;
    margin-bottom: 0.2rem;
  }
  .two-view .main .text p {
    font-size: 0.26rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 0.42rem;
    margin-bottom: 0.4rem;
  }

  .three-view {
    width: 100%;
    padding: 0 0.4rem;
    box-sizing: border-box;
    margin-top: 1.6rem;
    text-align: center;
  }
  .three-view .main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .three-view .main .text {
    width: 100%;
  }
  .three-view .main .text h5 {
    font-size: 0.38rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #333333;
    line-height: 0.56rem;
    margin-bottom: 0.2rem;
  }
  .three-view .main .text p {
    font-size: 0.28rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 0.42rem;
    margin-bottom: 0.4rem;
  }
  .three-view .main .img {
    width: 5.5rem;
    height: 4.03rem;
    background-image: url("../images/mobile/buy.png");
    background-size: 5.5rem 4.03rem;
  }
  .what-view {
    width: 100%;
    margin-top: 2.01rem;
  }
  .what-view h2 {
    font-size: 0.64rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #333333;
    line-height: 0.96rem;
    text-align: center;
    padding: 0 0.4rem;
    box-sizing: border-box;
  }
  .what-view ul {
    margin-top: 0.8rem;
    padding: 0 0.55rem;
    box-sizing: border-box;
  }
  .what-view ul li {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }
  .what-view ul li img {
    width: 0.96rem;
    height: 0.96rem;
  }
  .what-view ul li:nth-child(2) img {
    width: 1.16rem;
  }
  .what-view ul li h5 {
    font-size: 0.38rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #3e3e3e;
    line-height: 0.56rem;
    margin-top: 0.3rem;
  }
  .what-view ul li p {
    font-size: 0.28rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 0.42rem;
    margin-top: 0.2rem;
  }
  .four-view {
    width: 100%;
    height: 19.76rem;
    position: relative;
    overflow: hidden;
    margin-top: 1.6rem;
    padding: 1rem 0.4rem 0;
    box-sizing: border-box;
    text-align: center;
  }
  .four-view .wave-m {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .four-view .main h3 {
    font-size: 0.64rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #333333;
    line-height: 0.96rem;
    margin-bottom: 1rem;
  }
  .four-view .main .comment-box {
    width: 100%;
  }
  .four-view .main .comment-box ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0 0.1rem;
    box-sizing: border-box;
  }
  .four-view .main .comment-box ul li:last-child {
    margin-bottom: 0;
  }
  .four-view .main .comment-box ul li .acatar {
    width: 1.32rem;
    height: 1.32rem;
    background-size: 1.32rem;
    margin-right: 0.24rem;
  }
  .four-view .main .comment-box ul li:nth-child(1) .acatar {
    background-image: url("../images/mobile/avatar1.png");
  }
  .four-view .main .comment-box ul li:nth-child(2) .acatar {
    background-image: url("../images/mobile/avatar2.png");
  }
  .four-view .main .comment-box ul li:nth-child(3) .acatar {
    background-image: url("../images/mobile/avatar3.png");
  }
  .four-view .main .comment-box ul li .hader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.4rem;
  }
  .four-view .main .comment-box ul li .name-box {
    text-align: left;
    display: flex;
    flex-direction: column;
  }
  .four-view .main .comment-box ul li .name-box .name {
    font-size: 0.4rem;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #3e3e3e;
    margin-bottom: 0.26rem;
  }
  .four-view .main .comment-box ul li .name-box .stars {
    display: flex;
  }
  .four-view .main .comment-box ul li .name-box .stars i {
    width: 0.36rem;
    height: 0.36rem;
    background-image: url("../images/mobile/star.png");
    background-size: 0.36rem;
    margin-right: 0.12rem;
  }
  .four-view .main .comment-box ul li p {
    font-size: 16px;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #7c7c7c;
    line-height: 24px;
  }
  .five-view {
    width: 100%;
    margin-top: 0.64rem;
    background: #fafafa;
    padding: 1rem 0.4rem;
    box-sizing: border-box;
    text-align: center;
  }
  .five-view .main h1 {
    font-size: 0.64rem;
    font-family: Roboto-Medium, Roboto;
    color: #333333;
    line-height: 0.75rem;
    margin-bottom: 0.32rem;
    font-weight: 500;
  }
  .five-view .main p {
    width: 6.6rem;
    font-size: 0.3rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #444444;
    line-height: 0.46rem;
    margin: 0 auto;
    margin-bottom: 0.32rem;
  }
  .five-view .main .googlePlay {
    display: inline-block;
    width: 2.6rem;
    height: 0.77rem;
    background-image: url("../images/mobile/google-play.png");
    background-size: 2.6rem 0.77rem;
    margin-right: 0.36rem;
  }
  .five-view .main .googlePlay:active {
    box-shadow: 0px 5px 16px rgba(18, 18, 29, 0.36);
  }
  .five-view .main .iosStore {
    display: inline-block;
    width: 2.6rem;
    height: 0.77rem;
    background-image: url("../images/mobile/iosStore.png");
    background-size: 2.6rem 0.77rem;
    position: relative;
  }
  .five-view .main .iosStore img {
    width: 1.62rem;
    height: 0.72rem;
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: none;
  }
  .five-view .main .iosStore:active img {
    display: block;
  }
  .footer-box {
    width: 100%;
    background: #363f4a;
    padding: 0.2rem 0;
  }
  .footer-box ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-box ul li {
    margin: 0.2rem;
  }
  .footer-box ul li a {
    font-size: 0.28rem;
    font-family: Roboto-Regular, Roboto;
    font-weight: 400;
    color: #ffffff;
    line-height: 0.36rem;
    text-decoration: none;
  }
}