@charset "UTF-8";
* {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

h1, p {
    padding: 0;
    margin: 0;
}

ul, ol {
    list-style: inside none none;
    padding: 0;
}

/* android */
.banner-bg {
    background: #00BBD7;
    padding: 30px 0 90px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    color: #fff;
    height: 380px;
}

.banner-bg > h1 {
    margin-bottom: 15px;
    font-size: 30px;
    margin-top: 50px;
}

.p_top {
    margin-top: 30px;
}

.p_top > p {
    font-size: 20px;
    line-height: 2;
}

.button_top {
    margin-top: 75px;
}
.button_top2 {
    margin-top: 45px !important;
}
.button_top > div {
    display: inline-block;
}

.banner-bg > div > a {
    background: #1394EF;
    padding: 15px 20px;
    font-size: 20px;
    border-radius: 5px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.button_top > div > a {
    background: #1394EF;
    padding: 15px 20px 15px 15px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    display: inline-block;
}

.button_top > div > p {
    margin-top: 8px;
}

.pingpai {
    width: 100%;
    position: absolute;
    bottom: 10px;
}

.pingpai .container {
    display: flex;
}

.pingpai > div > div {
    width: calc(100% / 7);
    padding: 10px 0;
}

.htc {
    margin-top: 5px;
}

.list-ng img {
    width: 100%;
}

.con-bg {
    background: #ECEEED;
}

.con-nav {
    z-index: 3;
}

.con-nav > div {
    text-align: center;
    padding: 10px 0;
}

.con-nav > div > a {
    display: block;
    font-size: 18px;
    color: #000;
}

.con-nav > div:nth-child(1) {
    background: #CBCBCB;
}

.con-nav > div:nth-child(1) > a {
    color: #fff;
}

.con-nav > div:nth-child(2) > a {
    border-right: 1px solid #A8A8A8;
}

.con-nav > div:nth-child(3) > a {
    border-right: 1px solid #A8A8A8;
}

.con-nav > div > a:hover {
    color: #21b0eb;
}

.font-h2 {
    margin: 0;
    font-size: 24px;
    padding: 10px 0 25px 0;
    color: #666;
}

.container-bg2 {
    background: #ffffff;
    padding: 70px 0;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

.font-p {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}

.ma1 > div {
    margin-top: 10px;
}

.ma2 {
    text-align: center;
    margin-top: 30px;
}

.ma2 > div > div {
    margin-top: 20px;
    border: 1px solid #F3F3F3;
    padding: 10px 0;
}

.ma2 .col-lg-3:hover {
    border: 1px solid #8a8a8a;
}

.ma2 > div > div > img {
    width: 75px;
}

.ma2 > div > div > p {
    font-size: 16px;
    margin-top: 20px;
}

.font-p1 {
    display: inline-block;
    font-size: 20px;
    margin-top: 30px;
    padding: 10px 0;
    letter-spacing: 1px;
    color: #000;
}

.uls > li {
    border: 1px solid #22aa84;
    border-radius: 5px;
    overflow: hidden;
    line-height: 52px;
    margin: 10px 0;
}

.uls > li:hover {
    border: 1px solid #fff;
    background: #90E5BC;
}

.uls > li:hover span {
    color: #fff;
}

.uls > li > img {
    width: 50px;
    height: 50px;
    float: left;
    margin: 0 20px;
}

.h {
    height: 180px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.h > p {
    /*padding-top: 10px;*/
    font-size: 16px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0); /* IE 9 */
    -moz-transform: translate(-50%, 0); /* Firefox */
    -webkit-transform: translate(-50%, 0); /* Safari 和 Chrome */
    -o-transform: translate(-50%, 0);
}

.uls > li > span {
    vertical-align: middle;
    font-size: 18px;
}

/* format */

.uls2 {
    padding-left: 30px;
}

.uls2 > li {
    border: 0 none;
}

#go4 > div {
    text-align: center;
}

#go4 > div > span {
    display: inline-block;
    font-size: 20px;
    margin: 20px 0 0 0;
}

.list-ul > li {
    line-height: 70px;
    overflow: hidden;
    border: 2px solid #C0D6DA;
    border-radius: 10px;
    margin-bottom: 20px;
}

.list-ul > li > img {
    width: 70px;
    height: 70px;
    float: left;
    display: block;
    margin: 0 20px;
}

.list-ul > li > span {
    font-size: 20px;
}

.will {
    width: 150px;
    height: 150px;
}

/* sd */

.banner-bg3 {
    background: url("../images/resource/banner-sd.png") no-repeat center center;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.ma3 {
    text-align: center;
}

.ma3 img {
    width: 100px;
    height: 100px;
    margin-top: 20px;
}

.ma3 p {
    font-size: 18px;
    margin-top: 30px;
}

.ma4 {
    text-align: center;
}

.ma4 img {
    width: 124px;
    height: 124px;
}

.ma5 {
    margin-top: 20px;
}

/* mac */

.mac-bg {
    background: url("../images/resource/banner-mac.jpg") no-repeat center center;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* text-align: center;*/
    text-align: left;
    padding-left: 200px;
}

.mab30 {
    margin-bottom: 30px;
}

.list-ul1 > li > img {
    width: 50px;
    height: 50px;
}

.list-ul1 > li {
    line-height: 50px;
    overflow: hidden;
    border: 2px solid #C0D6DA;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #C0D6DA;
}

.mat30 {
    margin-top: 30px;
}

/* iphone */
.style span {
    display: inline-block;
    font-size: 16px;
    margin: 20px 0;
}

.song > div {
    margin-top: 10px;
}

.song span {
    font-size: 16px;
    display: inline-block;
    margin: 20px 0;
}

.download {
    background: #00BBD7;
    text-align: center;
    padding: 45px 0;
    /*margin-top: 30px;*/
}

.download > a {
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 30px;
    font-size: 20px;
}

.footer-bg {
    margin-top: 0;
    padding: 20px 0;
}

.ma2 > div .etc {
    line-height: 100px;
    font-weight: bold;
    font-size: 22px;
}

.reference {
    overflow: hidden;
    color: #666666;
}

.reference > h3 {
    margin-top: 0;

}

#cao p {
    font-size: 18px;
    margin-bottom: 10px;
}

#cao .row {
    margin-bottom: 20px;
}

#cao span {
    color: #777;
}

#cen1 {
    cursor: pointer;
    position: relative;
    border: 2px solid #000000;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    border-bottom: 0 none;
    margin-bottom: 30px;
    text-align: center;
}

#cen1 > a {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 999;
}

.video {
    width: 800px;
    margin: 0 auto;
}

.na {
    margin-bottom: 40px;
}

.container-bg {
    background: #FDFDFD;
    padding: 30px 0;
}

.container-bg1 {
    padding: 30px 0;
    background: #F3F3F3;
}

.container-bg5 {
    padding: 30px 0;
    background: #dddddd;

}

#nei_list p {
    font-size: 18px;
}

.uls > li > span {
    color: #8A8A8A;
}

.root-blc .container {
    padding: 30px 15px;
    box-sizing: border-box;
}

.s9 {
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
}

.s9:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

#nei_list img {
    width: 70px;
    display: block;
    vertical-align: middle;
}

.lei_list > li > div {
    border: 1px solid #01B2D7;
    overflow: hidden;
    padding: 10px;
    margin: 10px;
}

.lei_list > li > div:hover {
    border: 1px solid orange;
}

.lei_list h3 {
    margin: 0;
    margin-bottom: 10px;
}

td {
    padding: 10px;
}

.lei_list p {
    font-size: 16px;
}

.buttons {
    margin-top: 30px;
}

.buttons > a {
    display: inline-block;
    text-align: center;
    width: 256px;
    background: #fff;
    padding: 13px 0;
    border-radius: 64px;
    font-size: 20px;
    color: #95c2fa;
    border: 2px solid #00BBD7;
}

.buttons > a:hover {
    color: #fff;
    border: 2px solid #00BBD7;
    background: #00BBD7;
}

.p-font {
    font-size: 16px;
}

.ul-li {
    margin-top: 10px;
    list-style: inside;
}

.ul-li > li {
    line-height: 30px;
    font-size: 16px;
}

.ul-li > li > span {
    margin-left: 30px;
}

.btn-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 24px;
    overflow: hidden;
}

.btt1 {
    background: #00BBD7;
    padding: 15px 0;
    border-radius: 64px;
    font-size: 18px;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
    width: 256px;
    text-align: center;
    box-sizing: border-box;
    margin-right: 30px;
}

.btt1:hover {
    color: #fff;
}

.border_top_bottom {
    padding: 40px 0;
    border-bottom: 1px solid #dddddd;
}

.btt2 {
    color: #00BBD7;
    border: 2px solid #00BBD7;
    border-radius: 64px;
    font-size: 18px;
    letter-spacing: 1px;
    text-decoration: none;
    width: 256px;
    text-align: center;
    padding: 15px 0;
    box-sizing: border-box;
}

.btt2:hover {
    color: #fff;
    border: 2px solid #00BBD7;
    background: #00BBD7;
}

.root {
    padding: 30px 0;
}

.list-bottom-text {
    padding: 20px 25px;
}

.list-bottom-text > h4 {
    font-size: 24px;
    margin: 0 0 10px 0;
}

.an {
    width: 200px;
    display: inline-block;
    padding: 10px 0;
    text-align: center;
    margin: 1.25em;
    font-size: 1em;
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, .16);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .16);
    border: 1px solid #77c159;
    color: #18a15f;
    border-radius: 40px;
    font-weight: 700;
}

.shadow {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .16);
    margin-bottom: 20px;
    border: 1px solid #fff;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
}

.shadow:hover {
    border: 1px solid orange;
}

.root-title {
    text-align: center;
    margin: 0;
    font-size: 24px;
    padding-bottom: 30px;
    color: #666;
}

.h > img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.font-h4 {
    font-size: 28px;
    color: #3679E3;
    padding: 80px 0 10px 0;
}

.pc {
    font-size: 20px;
}

/*  改版  图文框 */

/* image_text */
.image_text img {
    width: 64px;
    text-align: center;
}

.image_text > div > div > div {
    padding: 15px 0;
    text-align: center;
    height: 124px;
}

.image_text > div > div > div > p {
    margin-top: 10px;
}

.shen {
    background: #efefef;
}

.qian {
    background: #F8F8F8;
}

.bo {

    background: #fff;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding: 40px 0;
}

/* 改 Key Features */

.list-key {
    background: #fff;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .16);
    margin-bottom: 20px;
    border: 1px solid #fff;
    padding: 10px;
    box-sizing: border-box;
}

.list-key > h2 {
    font-size: 18px;
    color: #005BAD;
    font-weight: 700;
}

.list_img_text {
    overflow: hidden;
    margin-top: 20px;
    height: 80px;
}

.list-key:hover {
    border: 1px solid orange;
}

/* list 2 */

.mask {
    height: 0;
    border-bottom: 400px solid #1788E2;
    border-right: 50px solid transparent;
    position: relative;
}

.mask-list {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 20px;
    left: 10px;
}

.mask-li {
    width: 95%;
    display: flex;
    flex-direction: row;
    color: #fff;
    vertical-align: middle;
    padding: 10px 0 0 10px;
    border-bottom: 1px solid #fff;
    position: relative;
}

.mask-li:hover {
    background: #fff;
    color: #8A8A8A;
}

.hied {
    display: none;
}

.mask-li:hover .shows {
    display: none;
}

.mask-li:hover .hied {
    display: block;
}

.mask-li > img {
    width: 64px;
    height: 64px;
}

.mask-li > span {
    line-height: 64px;
    margin-left: 20px;
}

.mask-i {
    display: none;
    position: absolute;
    right: -20px;
    top: 16px;
    width: 0px;
    height: 0px;
    border-top: 20px solid rgba(0, 0, 0, 0);
    border-bottom: 20px solid rgba(0, 0, 0, 0);
    border-left: 20px solid #fff;
}

.mask-li:hover .mask-i {
    display: block;
}

/* mac_table_list */

#table td {
    border: 1px solid #ddd;
    padding: 10px 20px;
    box-sizing: border-box;
}

#table td p {
    line-height: 2;
}

#table td h4 {
    line-height: 1.2;
}

#table tr td img {
    width: 50px;
    margin-right: 30px;

}

.wi {
    width: 20%;
    overflow: hidden;
    float: left;
}

.wi1 {
    width: 70%;
    float: left;
}

.wi3 ul {
    padding: 0;
    margin: 0;
}

.wi3 ul li {
    line-height: 2;
}

.banner-bg > div .but_on {
    margin-left: 15px;
    text-decoration: none;
    background: #fff;
    color: #1394EF;
}

/* format */

#wen .col-lg-6:nth-child(1) {
    border-right: 1px solid #e0e0e0;
}

#wen .col-lg-6 > div {
    text-align: center;
    width: 376px;
    padding: 0 34px;
    box-sizing: border-box;
    margin: 0 auto;
}

#wen .col-lg-6 > div > h3 {
    margin: 30px 0 20px 0;
    line-height: 1.5;
    color: #666666;
}

#wen .col-lg-6 > div > p {
    color: #666666;
    line-height: 1.5;
}

.pagew980 {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

#text h4 {
    color: #114887;
}

#text h2 {
    font-size: 26px;
    line-height: 150%;
    padding-bottom: 15px;
}

#table_format b {
    font-weight: 100;
}

#text2 .col-lg-4 {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}

.flo {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 15px;
}

.flo2 {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#text3 .col-lg-6 {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}

.pagew980 .title {
    margin-top: 30px;
    margin-bottom: 50px;
}

.xia {
    border-bottom: 1px solid #dddddd;
}

.ftleft {
    list-style: disc;
}

.icare_uguide li {
    line-height: 2;
    color: #fff;
}

#bgcolor h4 {
    color: #646464;
}

.icare_uguide a {
    color: #fff;
}

.ftleft li {
    padding: 2px 0;
}

.product_block li {
    padding: 5px 0;
    color: #666666;
}

.table > tbody > tr > td {
    vertical-align: middle;
}

.td_s {
    text-align: center;
}

#bgcolor {
    background: url(../images/nav-footer-icon/mosha.jpg) #2E2E2E top center;
    border-bottom: 1px solid #fff;
}

.bussw {
    padding: 0 0 50px 0;
    margin: 0;
    text-align: center;
    color: #fff;
}
/*star*/

.star_01, .star_02, .star_03 {display:inline-block; width:14px;height:16px;overflow:hidden;vertical-align:middle; background:url("../img/page_icons1.png") no-repeat;}
.star_04, .star_05, .star_06 {display:inline-block; width:16px;height:16px;overflow:hidden;vertical-align:middle;}
.star_01 {background-position:-448px -16px;}
.star_02 {background-position:-464px -16px;}
.star_03 {background-position:-480px -16px;}
.star_04 {background:url("../img/start4.png") no-repeat top center;}
.star_05 {background:url("../img/start5.png") no-repeat top center;}
.star_06 {background:url("../img/start6.png") no-repeat top center;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
html .clearfix{*height:1%;}
*:first-child+html.clearfix{zoom:1;}
.clearfix{display:block;}

.reviews1 {margin:0 0 0 1rem; padding:0.5rem 0 0 1rem; color:#999; font-size:14px;}
/*star end*/

@media (max-width: 780px) {
    .banner-bg > div > a {
        display: block;
        font-size: 18px;
        margin-top: 5px;
    }

    .download > a {
        display: inline-block

    }

    .banner-bg > div .but_on {
        margin: 0;
        margin-top: 5px;

    }

    .lei_list h3, #nei_list h2, #h2, .song h2, .na, .banner-bg > h1, #cao h2 {
        font-size: 20px;
    }

    #nei_list p, .p-font, .ul-li > li, .p_top p {
        font-size: 14px;
    }

    .button_top {
        margin-top: 30px;
    }

    .font-h2 {
        padding: 10px 0 20px 0;
    }

    .mask {
        height: auto;
        background: #1788E2;
        border-bottom: 0;
        border-right: 0;
    }

    .pingpai .container {
        display: none;
    }

    .mask-list {
        position: inherit;
    }

    .banner-bg > p, .btt1, .btt2 {
        font-size: 14px;
    }

    .con-nav > div:nth-child(2) > a {
        border-right: 0 none;
    }

    .banner-bg2 {
        text-align: center;
        padding: 0;
    }

    .banner-bg2 > h1 {
        font-size: 30px;
        margin-bottom: 10px;
    }

    /* format */
    .row iframe {
        width: auto;
        margin: 0 auto;
    }

    #wen .col-lg-6 > div, .pagew980 {
        width: auto;
    }

    #wen .col-lg-6:nth-child(1) {
        border-right: 0 none;
    }

}