@charset "utf-8";

html {
    color: #333;
    background: #f2f2f2;
    -webkit-text-size-adjust: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none
}

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,img {
    margin: 0;
    padding: 0
}

body,button,input,select,textarea {
    font: 12px/1.5 Helvetica,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

audio,canvas,video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

img {
    border: 0;
    max-width: 100%;
    height: auto
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%
}

em {
    font-style: normal
}

ul,ol {
    list-style: none
}

img {
    border: 0
}

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0.3)
}

.clearfix:after {
    content: "\20";
    display: block;
    clear: both
}

.clearfix {
    zoom: 1
}

.fl {
    float: left
}

.fr {
    float: right
}

.clear {
    clear: both
}

html,body {
    height: 100%
}

.wrapper {
    width: 100%;
    height: 100%
}

.header {
    width: 100%;
    display: block;
    background: #ffffff;
}

.footer {
    text-align: center;
    border-top: 1px solid #b5c5d0;
    background: #c7d7e2
}

.footer a,.footer .copyright {
    color: #596f8a;
    text-decoration: none
}

.footer .line {
    color: #596f8a
}

.mod-banner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.copy{
    color: blue;
    cursor: pointer;
}
.mod-banner .banner-logo {
    top: 0;
    left: 10px;
    z-index: 10px;
    background: url(./logo.png) no-repeat;
    margin: 0 auto;
}

.mod-banner .banner-icon {
    position: absolute;
    top: 0;
    right: 0;
    background: url(/images/phone/banner-icon.jpg) right no-repeat;
}

.mod-banner .banner-logo {
    width: 200px;
    height: 104px;
    background-size: contain;
    background-position: 50%;
}

.mod-banner .banner-icon {
    width: 218px;
    height: 104px;
    background-size: 218px 104px;
}

.mod-list li {
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #b5c5d0
}

.mod-list li:nth-last-of-type(1) {
    border-bottom: 0
}

.item-app {
    display: flex;
    align-items: center;
    background: #f7fcff;
    background-image: -webkit-linear-gradient(top,#f7fcff,#e6f4fd);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f7fcff),to(#e6f4fd))
}

.download-btn-groups {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item-app .btn {
    text-align: center;
    text-decoration: none;
    color: #545454;
    margin-bottom: 15px;
}

.item-app .btn-download,.item-app .btn-hell {
    border: 1px solid #bbb;
    background: #dfdfdf;
    background-image: -webkit-linear-gradient(bottom,#dfdfdf,#f3f3f3);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#dfdfdf),to(#f3f3f3))
}

.item-app .btn-download-hover {
    border: 1px solid #9c9c9c;
    background: #e2e2e2
}

.item-app .btn-disable {
    border: 1px solid #9e9e9e;
    color: #FFF;
    background: #b4b4b4;
    background-image: -webkit-linear-gradient(bottom,#b4b4b4,#747474);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#b4b4b4),to(#747474))
}

.item-app .btn-blue {
    text-align: center;
    color: #fefefe;
    text-decoration: none;
    background-color: #1e73c7;
    background-image: -webkit-linear-gradient(bottom,#1e73c7,#71bafc);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#1e73c7),to(#71bafc));
    -webkit-text-shadow: 0 2px 1px #1669b9;
    text-shadow: 0 2px 1px #1669b9;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 2px 1px #b7dbff,0 1px 1px #000b21;
    box-shadow: inset 0 2px 1px #b7dbff,0 1px 1px #000b21
}

.mod-app {
    width: 80%;
}

.mod-app .mod-app-hd {
    float: left;
    margin-right: 3.91%
}

.mod-app .mod-app-hd>a {
    display: inline-block
}

.mod-app .mod-app-hd img {
    display: inline-block;
    vertical-align: top;
    text-align: center
}

.mod-app .mod-app-bd {
    overflow: hidden
}

.mod-app .name {
    color: #444
}

.mod-app .name a {
    color: #444;
    text-decoration: none
}

.mod-app .description {
    margin-bottom: 2px
}

.mod-app .description,.mod-app .activity {
    color: #999
}

.mod-download {
    width: 100%
}

.mod-download .inner {
    position: relative;
    text-align: center;
    border-top: 1px solid #9da3a8;
    border-bottom: 1px solid #cad2d8;
    background-color: #dde6ed;
    background-image: -webkit-linear-gradient(top,#b6bec3,#d7dfe6 1%,#dde6ed 2%,#d7dfe6);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#b6bec3),color-stop(0.01,#d7dfe6),color-stop(0.02,#dde6ed),to(#d7dfe6))
}

.mod-download .inner::before {
    content: "\20";
    position: absolute;
    right: 8.7%;
    width: 6.875%;
    background: transparent url(../images/arrow.png) no-repeat 0 0
}

.mod-download .inner>a {
    display: inline-block;
    width: 34.3%;
    text-align: center;
    color: #fefefe;
    text-decoration: none;
    border-top: 1px solid #67a3df;
    border-right: 1px solid #498bcd;
    border-bottom: 1px solid #1b63aa;
    border-left: 1px solid #3b7fc2;
    background-color: #1e73c7;
    background-image: -webkit-linear-gradient(bottom,#1e73c7,#71bafc);
    background-image: -webkit-gradient(linear,left bottom,left top,from(#1e73c7),to(#71bafc))
}

.mod-download .inner>a.btn-disable {
    border: 1px solid #9e9e9e;
    color: #FFF;
    background: #b4b4b4;
    background-image: -webkit-linear-gradient(top,#b4b4b4,#747474);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#b4b4b4),to(#747474));
    -webkit-text-shadow: 0 2px 1px rgba(0,0,0,.15);
    text-shadow: 0 2px 1px rgba(0,0,0,.15);
    -webkit-box-shadow: inset 0 1px 1px #d1d1d1,0 1px 2px rgba(0,0,0,.25);
    box-shadow: inset 0 1px 1px #d1d1d1,0 1px 2px rgba(0,0,0,.25)
}

.mod-download .inner>a:nth-of-type(1) {
    margin-right: 12.1%
}

.mod-download .inner .download-tips {
    color: #5e5e5e
}

.mod-detail {
    background-color: #f7fcff;
    background-image: -webkit-linear-gradient(top,#d2d2d2,#f1f6f9 1%,#f7fcff 2%,#e6f4fd);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#d2d2d2),color-stop(0.01,#f1f6f9),color-stop(0.02,#f7fcff),to(#e6f4fd))
}

.mod-detail .item-app {
    background: #f6fbff
}

.mod-detail .mod-download .inner::before {
    background: 0
}

.mod-detail .mod-download .inner {
    border-top: 1px solid #c5c9cc;
    border-bottom: 1px solid #c3c8cc;
    background-color: #dce1e5;
    background: -webkit-linear-gradient(top,#dce1e5,#dbe1e5);
    background: -webkit-gradient(linear,left top,left bottom,from(#dce1e5),to(#dbe1e5));
    -webkit-box-shadow: none;
    box-shadow: none
}

.mod-rating .star {
    float: left;
    margin-right: 1.56%;
    background: url(./star-off.png) no-repeat;
}

.mod-rating .star .score {
    display: inline-block;
    width: 0;
    background: url(./star-on.png) repeat-x;
}

.mod-rating .rating-total {
    float: left;
    color: #a5a5a5
}

@media only screen and (min-width:1025px) {
    .footer {
        padding-top: 25px;
        padding-bottom: 34px;
        font-size: 1.5em
    }

    .footer .line {
        padding-left: 10px;
        padding-right: 10px
    }

    .mod-banner {
        height: 138px
    }

    .item-app {
        padding: 15px 20px;
    }

    .item-app .btn {
        top: 36px;
        width: 110px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        -webkit-border-radius: 24px;
        border-radius: 24px
    }

    .item-app .btn-download,.item-app .btn-hell {
        -webkit-text-shadow: 0 2px 1px #fff;
        text-shadow: 0 2px 1px #fff;
        -webkit-box-shadow: 0 2px 1px #fff,inset 0 2px 2px #fff;
        box-shadow: 0 2px 1px #fff,inset 0 2px 2px #fff
    }

    .item-app .btn-download-hover {
        -webkit-box-shadow: 0 2px 1px #fff,inset 0 2px 2px #9f9f9f;
        box-shadow: 0 2px 1px #fff,inset 0 2px 2px #9f9f9f
    }

    .mod-app .mod-app-hd {
        margin-right: 15px
    }

    .mod-app .mod-app-hd img {
        max-width: 112px;
        max-height: 112px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.2);
        box-shadow: 1px 3px 3px rgba(0,0,0,.2)
    }

    .mod-app .name {
        margin-bottom: .38em;
        font-size: 1.8em;
        line-height: 1.25em
    }

    .mod-app .description {
        margin-bottom: 2px
    }

    .mod-app .description,.mod-app .activity {
        font-size: 1.5em;
        line-height: 1.2
    }

    .mod-download .inner {
        padding-top: 20px;
        padding-left: 14px;
        -webkit-box-shadow: inset 0 3px 2px rgba(96,96,96,.15);
        box-shadow: inset 0 3px 2px rgba(96,96,96,.15)
    }

    .mod-download .inner::before {
        top: -22px;
        right: 92px;
        width: 44px;
        height: 26px;
        background-size: 100% 100%
    }

    .mod-download .inner>a {
        width: 220px;
        height: 56px;
        line-height: 56px;
        font-size: 2.166em;
        -webkit-text-shadow: 0 2px 1px #1669b9;
        text-shadow: 0 2px 1px #1669b9;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 2px 1px #b7dbff,0 1px 1px #000b21;
        box-shadow: inset 0 2px 1px #b7dbff,0 1px 1px #000b21
    }

    .mod-download .inner .download-tips {
        padding: .667em 0;
        font-size: 1.5em
    }

    .mod-detail .item-app,.mod-detail .mod-introduction {
        -webkit-box-shadow: 0 1px 1px #b5c5d0,0 2px 1px #FFF;
        box-shadow: 0 1px 1px #b5c5d0,0 2px 1px #FFF
    }

    .mod-rating .star {
        width: 128px;
        height: 26px;
        line-height: 26px;
        background-size: 26px 26px
    }

    .mod-rating .star .score {
        width: 128px;
        height: 26px;
        line-height: 26px;
        background-size: 26px 26px;
    }

    .mod-rating .rating-total {
        height: 26px;
        line-height: 26px;
        font-size: 1.5em
    }
}

@media only screen and (max-width:480px) and (orientation:portrait),only screen and (min-width:481px) and (max-width:1024px) {
    .footer {
        padding-top: 1.562em;
        padding-bottom: 1.562em;
        font-size: 1.2em
    }

    .footer .line {
        padding-left: 10px;
        padding-right: 10px
    }

    .mod-banner {
        height: 104px
    }

    .item-app {
        padding: 1em 3.12%
    }

    .item-app .btn {
        top: 24px;
        height: 30px;
        width: 90px;
        line-height: 30px;
        font-size: 1.025em;
        -webkit-border-radius: 24px;
        border-radius: 24px
    }

    .item-app .btn-download,.item-app .btn-hell {
        -webkit-text-shadow: 0 1px 0 #fff;
        text-shadow: 0 1px 0 #fff;
        -webkit-box-shadow: 0 2px 1px #fff,inset 0 2px 1px #fff;
        box-shadow: 0 2px 1px #fff,inset 0 2px 1px #fff
    }

    .item-app .btn-download-hover {
        -webkit-box-shadow: 0 2px 1px #fff,inset 0 2px 1px #9f9f9f;
        box-shadow: 0 2px 1px #fff,inset 0 2px 1px #9f9f9f
    }

    .item-app .btn-blue {
        -webkit-text-shadow: 0 1px 0 #1669b9;
        text-shadow: 0 1px 0 #1669b9;
        -webkit-box-shadow: inset 0 1px 1px #b7dbff,0 1px 1px #000b21;
        box-shadow: inset 0 1px 1px #b7dbff,0 1px 1px #000b21
    }

    .mod-app .mod-app-hd img {
        max-width: 84px;
        max-height: 84px;
        -webkit-border-radius: 16px;
        border-radius: 16px;
        -webkit-box-shadow: 1px 3px 3px rgba(0,0,0,.2);
        box-shadow: 1px 3px 3px rgba(0,0,0,.2)
    }

    .mod-app .name {
        margin-bottom: 0em;
        font-size: 1.2em;
        line-height: 1.2em
    }

    .mod-app .description {
        margin-bottom: 2px
    }

    .mod-app .description,.mod-app .activity {
        font-size: 1.333em;
        line-height: 1.2
    }

    .mod-download .inner {
        padding-top: 15px;
        padding-left: 10px;
        -webkit-box-shadow: inset 0 1px 2px rgba(96,96,96,.15);
        box-shadow: inset 0 1px 2px rgba(96,96,96,.15)
    }

    .mod-download .inner::before {
        top: -13px;
        height: 20px;
        background-size: 75% 75%
    }

    .mod-download .inner>a {
        height: 42px;
        line-height: 42px;
        font-size: 1.625em;
        -webkit-text-shadow: 0 1px 1px #1669b9;
        text-shadow: 0 1px 1px #1669b9;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 2px 1px #b7dbff,0 1px 1px #000b21;
        box-shadow: inset 0 2px 1px #b7dbff,0 1px 1px #000b21
    }

    .mod-download .inner .download-tips {
        padding: 1em 0;
        font-size: 1.125em
    }

    .mod-detail .item-app,.mod-detail .mod-introduction {
        -webkit-box-shadow: 0 1px 1px #b5c5d0,0 2px 1px #FFF;
        box-shadow: 0 1px 1px #b5c5d0,0 2px 1px #FFF
    }

    .mod-rating .star {
        width: 100px;
        height: 20px;
        line-height: 20px;
        background-size: 20px 20px
    }

    .mod-rating .star .score {
        width: 100px;
        height: 20px;
        line-height: 20px;
        background-size: 20px 20px
    }

    .mod-rating .rating-total {
        height: 20px;
        line-height: 20px;
        font-size: 1.333em
    }
}

@media only screen and (max-width:320px),only screen and (max-width:480px) and (orientation:landscape) {
    .footer {
        padding-top: 1.041em;
        padding-bottom: 1.417em;
        font-size: 1em
    }

    .footer .line {
        padding-left: 5px;
        padding-right: 5px
    }

    .mod-banner {
        height: 69px
    }

    .mod-banner .banner-logo {
        width: 145px;
        height: 69px;
        background-size: 145px 69px
    }

    .mod-banner .banner-icon {
        width: 145px;
        height: 69px;
        background-size: 145px 69px
    }

    .item-app {
        padding: .66em 3.12%
    }

    .item-app .btn {
        top: 16px;
        height: 2.083em;
        line-height: 2.083em;
        font-size: 1.083em;
        -webkit-border-radius: 24px;
        border-radius: 24px
    }

    .item-app .btn-download,.item-app .btn-hell {
        -webkit-text-shadow: 0 1px 0 #fff;
        text-shadow: 0 1px 0 #fff;
        -webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 0 #fff;
        box-shadow: 0 1px 0 #fff,inset 0 1px 0 #fff
    }

    .item-app .btn-download-hover {
        background: #e2e2e2;
        -webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px #9f9f9f;
        box-shadow: 0 1px 0 #fff,inset 0 1px 1px #9f9f9f
    }

    .
item-app .btn-blue {
        -webkit-text-shadow: 0 1px 0 #1669b9;
        text-shadow: 0 1px 0 #1669b9;
        -webkit-box-shadow: inset 0 1px 1px #b7dbff,0 1px 1px #000b21;
        box-shadow: inset 0 1px 1px #b7dbff,0 1px 1px #000b21
    }

    .mod-app .mod-app-hd img {
        max-width: 56px;
        max-height: 56px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,.2);
        box-shadow: 1px 2px 2px rgba(0,0,0,.2)
    }

    .mod-app .name {
        margin-bottom: .38em;
        font-size: 1.333em;
        line-height: 1.333em
    }

    .mod-app .description {
        margin-bottom: 2px
    }

    .mod-app .description,.mod-app .activity {
        font-size: 1em;
        line-height: 1.2
    }

    .mod-download .inner {
        padding-top: 10px;
        padding-left: 7px;
        -webkit-box-shadow: inset 0 1px 1px rgba(96,96,96,.15);
        box-shadow: inset 0 1px 1px rgba(96,96,96,.15)
    }

    .mod-download .inner::before {
        top: -5px;
        height: 14px;
        background-size: 50% 50%
    }

    .mod-download .inner>a {
        height: 2.291em;
        line-height: 2.291em;
        font-size: 1.083em;
        -webkit-text-shadow: 0 1px 0 #1669b9;
        text-shadow: 0 1px 0 #1669b9;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px #b7dbff,0 1px 1px #000b21;
        box-shadow: inset 0 1px 1px #b7dbff,0 1px 1px #000b21
    }

    .mod-download .inner .download-tips {
        padding: 1.33em 0;
        font-size: .75em
    }

    .mod-detail .item-app,.mod-detail .mod-introduction {
        -webkit-box-shadow: 0 1px 0 #b5c5d0,0 2px 0 #FFF;
        box-shadow: 0 1px 0 #b5c5d0,0 2px 0 #FFF
    }

    .mod-rating .star {
        width: 64px;
        height: 1.083em;
        line-height: 1.083em;
        background-size: 13px 13px
    }

    .mod-rating .star .score {
        width: 64px;
        height: 1.083em;
        line-height: 1.083em;
        background-size: 13px 13px
    }

    .mod-rating .rating-total {
        height: 1.083em;
        line-height: 1.083em;
        font-size: 1em
    }
}