/*
 * CSS Reset
 */
 /*======= Document =======*/
 * {
     -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
 }
 html {
     -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }

/*======= Sections =======*/
 body {
     margin: 0; padding: 0;
     font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
     font-size: 18rem; line-height: 1.5;
     -webkit-overflow-scrolling: touch;
 }
 main {
     display: block;
 }
 ul, ol, li, dl, dt, dd {
     margin: 0; padding: 0;
 }
 ul, ol {
     list-style: none outside none;
 }
/*======= Table =======*/
 table {
     border-collapse: collapse; border-spacing: 0;
 }
 th, td {
     padding: 0;
 }

 // Embedded content
 img {
     border: 0; vertical-align: middle;
 }

 // Forms
 button, input, optgroup, select, textarea {
     margin: 0;
     outline: none;
     font-family: inherit; font-size: 100%; line-height: 1.15;
 }
 button, select {
     text-transform: none;
 }
 button, input[type="button"], input[type="reset"], input[type="submit"] {
     -webkit-appearance: button; cursor: pointer;
 }
 button[disabled], input[disabled] {
     cursor: default;
 }
 input {
     line-height: normal;
 }
 input[type="checkbox"], input[type="radio"] {
     box-sizing: border-box; padding: 0;
 }
 input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
     height: auto; -webkit-appearance: none;
 }
 input[type="search"] {
     -webkit-appearance: textfield; -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box; box-sizing: border-box;
     outline-offset: -2rem;
 }
 ::-webkit-file-upload-button {
     -webkit-appearance: button;
     font: inherit;
 }
 /*取消ie下的输入框的大×和眼睛*/
 ::-ms-clear,::-ms-reveal{display:none;}
 input[type="text"],
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
 }
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
     padding: 0; border-style: none;
 }
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline: 1rem dotted ButtonText;
 }
 legend {
     display: table;
     max-width: 100%;
     margin: 0; padding: 0;
     color: inherit; white-space: normal;
     box-sizing: border-box;
 }
 fieldset {
     padding: 0.35em 0.75em 0.625em;
 }
 progress {
     vertical-align: baseline;
 }
 textarea { overflow: auto; resize: vertical; }

/*======= Interactive =======*/
 details {
     display: block;
 }
 summary {
     display: list-item;
 }

/*======= Text-level semantics =======*/
 h1, h2, h3, h4, h5, h6, p, figure, form, blockquote {
     margin: 0;
 }
 ul, ol, li, dl, dt, dd {
     margin: 0; padding: 0;
 }
 ul, ol {
     list-style: none outside none;
 }
 h1, h2, h3 {
     line-height: 1.15; font-weight: normal;
 }
 h1 {
     font-size: 24rem;
 }
 h2 {
     font-size: 40rem;
 }
 h3 {
     font-size: 16rem;
 }
 b, strong {
     font-weight: bolder;
 }
 abbr[title] {
     border-bottom: none;
     text-decoration: underline;
     text-decoration: underline dotted;
 }
 code, kbd, samp {
     font-family: monospace, monospace;
     font-size: 1em;
 }
 small {
     font-size: 80%;
 }
 sub, sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }
 sub {
     bottom: -0.25em;
 }
 sup {
     top: -0.5em;
 }
 a {
     background: transparent; text-decoration: none;
     -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
 }
 a:active {
     outline: 0;
 }
/*======= Misc =======*/
 template {
     display: none;
 }
 [hidden] {
     display: none;
 }
 i, cite, em, var, address, dfn{
     font-style:normal;
 }


@media screen and (min-width: 320px) and (max-width: 750px) {
    html {
        font-size: calc(100 * (100vw / 75000));
    }
}
@media screen and (min-width: 751px) {
    html {
          font-size: 1px;
    }
}
@media screen and (max-width: 319px) {
    html {
          font-size: calc(100 * (320 / 75000) * 1px);
    }
}

/*======= Layout =======*/
.wrapper {
    width: 100%;
    overflow: hidden;
}
.w {
    width: 1020rem;
    margin: 0 auto;
}
.wrapper h2 {
    font-size: 40rem;
}
.header {
    padding: 20rem 0;
    margin-bottom: 36rem;
}
.logo {
    width: 196rem;
    height: 60rem;
    background: url('../images/logo.png') no-repeat 0 0 / 100% 100%;
    text-indent: -99999rem;
    overflow: hidden;
}

.download-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 424rem;
}
.download-box .btn {
    width: 200rem;
    height: 61rem;
    background: url('../images/appstore.png') no-repeat 0 0 / 100% 100%;
    text-indent: -99999rem;
    overflow: hidden;
}
.download-box .btn:last-child {
    background-image: url('../images/googleplay.png');
}

.area-1 {
    width: 100%;
    height: 654rem;
    background: #003B7D url('../images/bg-1.png') no-repeat top center / auto 100%;
}
.area-1 .explain {
    height: 518rem;
    padding-left: 440rem;
    background: url('../images/phone-1.png') no-repeat 0 0;
    color: #fff;
}
.area-1 .explain h2 {
    padding: 140rem 0 30rem;
}
.area-1 p {
    margin-bottom: 40rem;
    text-align: left;
}
.area-2 {
    padding: 90rem 0;
    background-color: #EFF3F8;
}
.area-2 .w {
    position: relative;
}
.area-2 .bg {
    position: absolute;
    top: -90rem;
    right: -450rem;
    width: 1061rem;
    height: 696rem;
    background: url('../images/bg-2.png') no-repeat 0 0;
}
.area-2 h2 {
    position: relative;
    margin-bottom: 35rem;
    font-weight: 700;
    color: #23272F;
    text-align: center;
}
.area-2 p {
    position: relative;
    margin-bottom: 70rem;
    font-weight: 400;
    line-height: 1.5;
    color: #23272F;
    text-align: center;
}
.area-2 .list {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.area-2 dl {
    width: 237rem;
    margin-bottom: 40rem;
    font-size: 14rem;
    font-weight: 400;
    color: #23272F;
    line-height: 1.5;
    text-align: justify;
}
.area-2 dl dt {
    margin-bottom: 20rem;
    font-size: 20rem;
    font-weight: 700;
    color: #23272F;
    text-align: center;
}
.area-2 .icon {
    display: block;
    width: 80rem;
    margin: 0 auto 20rem;
    border-radius: 50%;
}
.area-2 .img {
    width: 100%;
}

.area-3 {
    padding-top: 70rem;
    background-color: #fff;
    background: url('../images/bg-3.png') no-repeat bottom center;
}
.area-3 .explain {
    height: 640rem;
    padding-left: 476rem;
    background: url('../images/phone-2.png') no-repeat 0 0;
    color: #23272F;
}
.area-3 .explain h2 {
    padding: 190rem 0 30rem;
}

.area-4 {
    padding-top: 70rem;
    background:#EFF3F8 url('../images/bg-4.png') no-repeat top center;
}
.area-4 .explain {
    height: 640rem;
    padding-right: 476rem;
    background: url('../images/phone-3.png') no-repeat bottom right;
    color: #23272F;
}
.area-4 .explain h2 {
    padding: 190rem 0 30rem;
}
.area-4 .explain p {
    margin-bottom: 15rem;
}

.area-5 {
    height: 654rem;
    text-align: center;
    background: linear-gradient(0deg, #ffffff80 0%, #ffffff80 100%), url("../images/bg-5.png") center bottom / auto auto no-repeat;
}
.area-5 h2 {
    padding: 190rem 0 30rem;
    text-align: center;
}
.area-5 .download-box {
    margin: 0 auto;
    padding: 40rem 0 16rem;
}
.area-5 .annotation {
    font-size: 12rem;
    font-weight: 400;
}

.footer {
    padding: 23rem 0;
    text-align: center;
    font-weight: 400;
    color: #fff;
    line-height: 1.5;
    background-color: #121820;
}
.footer a {
    color: #fff;
    text-decoration: none;
}
.footer a img {
    position: relative;
    margin: -1rem 5rem auto 0;
    vertical-align: middle;
}

@media screen and (max-width: 750px) {
    body {
        font-size: 24rem;
    }
    h2 {
        font-size: 32rem;
        font-weight: bold;
    }
    .w {
        width: 100%;
        padding: 0 40rem;
    }
    .area-1 {
        height: auto;
    }
    .area-1 .explain {
        height: auto;
        padding: 0 0 810rem;
        text-align: center;
        background-position: bottom center;
        background-size: 498rem 750rem;
    }
    .area-1 .explain h2 {
        padding-top: 20rem;
    }
    .area-1 .explain .download-box {
        margin: 0 auto
    }
    .area-2 {
        background:#EFF3F8 url('../images/bg-2.png') no-repeat top center / 140% auto;
    }
    .area-2 .bg {
        display: none;
    }
    .area-2 .list {
        flex-wrap: wrap-reverse;
    }
    .area-2 dl {
        width: 315rem;
        font-size: 24rem;
    }
    .area-3 {
        background-size: 100% auto;
    }
    .area-3 .explain {
        height: auto;
        padding: 0 54% 84rem 0;
        background-position: right bottom;
        background-size: 50% auto;
    }
    .area-3 .explain h2 {
        padding-top: 85rem;
    }
    .area-4 {
        background-size: 100% auto;
    }
    .area-4 .explain {
        height: auto;
        padding: 0 0 84rem 54%;
        background-position: left bottom;
        background-size: 50% auto;
    }
    .area-4 .explain h2 {
        padding-top: 60rem;
    }
    .area-5 {
        background-size: cover;
    }
    .area-5 .annotation {
        font-size: 22rem;
    }
    .footer {
        padding-left: 20rem;
        padding-right: 20rem;
    }
}