* {
    padding: 0;
    margin: 0
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    font-size: 35px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent
}

nav {
    display: block
}

body {
    margin: 0;
    font-family: ibmplexsans,sans-serif;
    font-size: 0.55rem;
    font-weight: 400;
    line-height: 1.6;
    color: #161c2d;
    text-align: left;
    background-color: #fff
}

ul {
    margin-top: 0;
    margin-bottom: 1rem
}

li {
    list-style: none
}

a {
    color: #0b65c6;
    text-decoration: none;
    background-color: transparent
}

a:hover {
    color: #07407e;
    text-decoration: none
}

img {
    vertical-align: middle;
    border-style: none
}

section {
    display: inline-block;
    width: 100%
}

.cont {
    width: calc(100% - 2rem);
    padding: 0 1rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 1040px
}

.ptname {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 0.5rem
}

div.btn-download {
    text-align: center
}

div.btn-download a {
    background-color: #0b65c6;
    margin-top: 20px;
    color: #fff;
    display: inline-block;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 10px 20px;
    font-size: 17px;
    line-height: 30px;
    border-radius: 10px
}

header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height: 86px;
    line-height: 86px;
    background: #0b65c6
}

header .logo img {
    width: 160px;
    height: 39px
}

header .abtn,header .mnavb {
    display: none
}

header .navb {
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    float: right
}

header .navb li {
    padding: 0 0.5rem;
    line-height: 96px
}

header .navb li a {
    color: #fff;
    font-size: 16px;
    font-weight: 600
}

header .navb li a:hover,header .navb li a:focus {
    opacity: 0.75
}

.part1 {
    background: #0b65c6;
    overflow: hidden
}

.part1 .lt {
    width: 50%;
    float: left;
    color: #fff
}

.part1 .lt .p1 {
    line-height: 1.2;
    font-size: 1.152rem;
    font-weight: 700;
    margin: 1rem 0 .5rem
}

.part1 .lt .p2 {
    color: rgba(255,255,255,.9);
    margin-bottom: 1rem;
    font-size: 0.6rem;
    font-weight: 400
}

.part1 .lt .p3 a {
    width: 165px;
    height: 51px;
    display: inline-block;
    background: url(../picture/icon.png) no-repeat;
    margin-bottom: 0.5rem
}

.part1 .lt .p3 .a1 {
    background-position: 0 -55px
}

.part1 .lt .p3 .a2 {
    background-position: 0 -109px
}

.part1 .lt .p3 .a3 {
    background-position: 0 -1px
}

.part1 .rt {
    float: right;
    padding: 0;
    width: 50%;
    position: relative
}

.part1 .rt img {
    width: 130%
}

.rt .appshow {
    width: 100%;
    display: block;
    text-align: center;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.rt .appshow>svg {
    width: 100%;
    height: 90%;
    -webkit-transform: translateZ(0)
}

.rt .appshow>svg .ellip .ellipbox {
    -webkit-transform: translateX(-.3%);
    transform: translateX(-.3%)
}

.rt .appshow>svg .ellip .ellipbox .ellipop {
    -webkit-transform-origin: 203pt 202pt;
    transform-origin: 203pt 202pt;
    opacity: .3;
    filter: alpha(opacity=30)
}

.rt .appshow>svg .ellip .ellipbox .ellipop.ellipop1 {
    -webkit-animation: tocircle 4s linear infinite;
    animation: tocircle 4s linear infinite
}

.rt .appshow>svg .ellip .ellipbox .ellipop.ellipop2 {
    -webkit-transform: rotate(135deg) translate(-1.2%,-1%);
    transform: rotate(135deg) translate(-1.2%,-1%);
    -webkit-animation: tocircle 2s linear infinite;
    animation: tocircle 2s linear infinite
}

.rt .appshow>svg .ellip .ellipbox .ellipop.ellipop3 {
    -webkit-transform: rotate(75deg) translate(1.5%,-1.2%);
    transform: rotate(75deg) translate(1.5%,-1.2%);
    -webkit-animation: tocircle 5s linear infinite;
    animation: tocircle 5s linear infinite
}

.rt .appshow>svg .ellip .elliptop {
    opacity: 1;
    filter: alpha(opacity=100)
}

.part2 {
    padding-top: 1rem !important
}

.part2 label {
    font-weight: 600;
    float: left;
    font-size: 19px;
    width: 33%;
    text-align: center
}

.part2 label:first-child {
    text-align: left
}

.part2 label:last-child {
    text-align: right
}

.part2 label em {
    height: 1rem;
    width: 1rem;
    text-align: center;
    line-height: 1rem;
    font-style: normal;
    font-size: 0.5rem;
    background: #E6EFF9;
    color: #0b65c6;
    border-radius: 50%;
    margin-right: 0.35rem;
    display: inline-block
}

.part3 {
    padding-top: 1.5rem
}

.part3 .ddv {
    float: left;
    width: 48%
}

.part3 .rt {
    float: right
}

.part3 div label {
    position: relative;
    display: block;
    padding: .75rem .75rem;
    background-color: #fff;
    border: 1px solid #f1f4f8;
    margin-bottom: 0;
    font-size: 18px
}

.part3 .lt label:first-child,.part3 .rt label:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px
}

.part3 .lt label:nth-child(2),.part3 .rt label:nth-child(2) {
    border-width: 0 1px
}

.part3 .lt label:last-child,.part3 .rt label:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px
}

.part3 div label em {
    background: #32A071;
    margin-right: 0.35rem;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    text-align: center;
    height: 18px;
    line-height: 16px;
    border-radius: 50%
}

.part4 {
    padding-top: 2rem
}

.part4 label {
    display: flex;
    align-items: center !important;
    flex-wrap: wrap
}

.part4 label img {
    width: 100%
}

.part4 label .ptname {
    text-align: left
}

.part4 label .ptx {
    color: #6f7276;
    font-size: 18px
}

.part4 label>div {
    flex: 0 0 50%;
    max-width: 50%
}

.part4 .rt {
    order: 2
}

.part5 {
    padding-top: 2rem
}

.part5 label {
    text-align: center;
    width: 30%;
    float: left;
    margin-top: 0.5rem;
    min-width: 216px;
    margin: 0 1% 1rem
}

.part5 label img {
    margin-bottom: 0.25rem
}

footer {
    padding: 1.5rem 0
}

footer .cont {
    display: flex
}

footer .lt {
    position: relative;
    width: calc(60% - 2rem)
}

footer .lt img {
    width: 160px;
    height: 39px
}

footer .lt p {
    font-size: 14px;
    margin-top: 10px
}

footer .rt1 {
    width: calc(40% - 2rem);
    margin-right: 1rem
}

footer .rt2 {
    width: 3.5rem;
    margin: 0
}

footer .rt1 h4 {
    font-size: .7rem;
    letter-spacing: .08em;
    line-height: 2;
    font-weight: 700
}

footer .rt1 ul li {
    margin-bottom: 0.25rem
}

footer .rt1 ul a {
    color: #6f7276;
    font-size: .5rem
}

@media (max-width: 600px) {
    html {
        font-size:25px
    }
}

@media (min-width: 601px) and (max-width:800px) {
    html {
        font-size:30px
    }
}

@media (max-width: 760px) {
    header .abtn {
        display:inline-block;
        font-size: 27px;
        vertical-align: bottom;
        color: #fff;
        float: right
    }

    header .navb {
        display: none
    }

    header .mnavb {
        display: none;
        background: #fff;
        border-radius: 10px;
        position: absolute;
        top: 86px;
        left: 5%;
        z-index: 10;
        width: 90%
    }

    header .mnavb li {
        border-bottom: 1px solid #f1f1f1;
        line-height: 60px
    }

    header .mnavb li:last-child {
        border: none
    }

    header .mnavb li a {
        color: #000;
        padding: 0 1rem;
        font-size: 16px;
        font-weight: 600
    }

    header .mnavb li a:hover,header .navb li a:focus {
        opacity: 0.75
    }

    .part1 .lt {
        width: 100%
    }

    .part1 .lt .p3 {
        text-align: center;
        display: inline-block;
        width: 100%
    }

    .part1 .rt {
        width: 80%
    }

    .part4 label {
        display: inline-block
    }

    .part4 label>div {
        max-width: 100% !important
    }

    .part5 label:nth-child(2) {
        float: right
    }
}

@media (max-width: 640px) {
    .part2 label {
        width:100%;
        text-align: center !important;
        margin-bottom: 1rem
    }
}

@media (max-width: 1110px) {
    .part3 .ddv {
        float:unset;
        width: 100%;
        margin-bottom: 0.5rem
    }
}

@media (max-width: 520px) {
    .part5 label {
        float:unset !important
    }

    footer .cont {
        display: inline-block
    }

    footer .lt {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem
    }

    footer .rt1 {
        width: 50%;
        float: left;
        margin: 0
    }

    footer .rt2 {
        float: right;
        text-align: right
    }
}