@charset "UTF-8";

a,
body,
html,
input {
    -webkit-tap-highlight-color: transparent
}

#container,
.top img,
body,
html {
    width: 100%
}

.clearfix,
.home .top img,
.top,
.top img {
    display: block
}

.china-list-box .rows .row .active span,
.china-list-box li,
.home .china-rank .name span,
.home .china-rank .project {
    text-overflow: ellipsis;
    white-space: nowrap
}

a,
abbr,
acronym,
address,
article,
aside,
audio,
blockquote,
body,
canvas,
caption,
code,
command,
datalist,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
iframe,
img,
input,
keygen,
label,
legend,
li,
mark,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
section,
source,
span,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
ul,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    list-style: none
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

a:active,
a:hover,
a:link,
a:visited {
    text-decoration: none
}

a {
    color: #006DDD
}

body,
html {
    height: 100%;
    min-height: 12rem;
    color: #000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden
}

body {
    font-family: '\9ED1\4F53', Arial, \5FAE\8F6F\96C5\9ED1;
    font-size: 12px;
    background-color: #F9F9F9
}

input::-webkit-input-placeholder {
    color: #fff
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0
}

#container,
.home .bars,
.home .main,
.top {
    margin: 0 auto
}

a,
input {
    outline: 0
}

html {
    font-size: 50px
}

#container {
    max-width: 750px;
    font-size: .24rem
}

@media screen and (min-width:480px) {
    html {
        font-size: 50px !important
    }
}

@media screen and (min-width:568px) {
    html {
        font-size: 50px !important
    }
}

@media screen and (min-width:598px) {
    html {
        font-size: 56.2px !important
    }
}

@media screen and (min-width:667px) {
    html {
        font-size: 58.5px !important
    }
}

@media screen and (min-width:736px) {
    html {
        font-size: 64.6px !important
    }
}

@font-face {
    font-family: FZJingKHJW;
    src: url(../font/FZJingKHJW.ttf)
}

.top {
    position: relative
}

.home .top {
    width: 6.7rem
}

.home .top img {
    width: 100%
}

.home .bar,
.home .bars {
    display: flex;
    align-items: center
}

.home .top .date {
    line-height: .28rem;
    position: absolute;
    top: .55rem;
    left: 1.22rem;
    z-index: 10;
    font-size: .15rem;
    color: rgba(255, 255, 255, .6)
}

.home .bar,
.home .bars,
.home .china {
    position: relative
}

.home .bars {
    background: #FFF;
    z-index: 10;
    width: 6.02rem;
    height: .96rem;
    justify-content: space-between;
    flex-flow: nowrap
}

.home .bar {
    justify-content: center;
    flex-flow: nowrap;
    font-size: .3rem
}

.home .date-list {
    font-family: FZJingKHJW;
    font-size: 32rpx;
    color: #9E1F30
}

.home .date-list img {
    display: block
}

.home .date-list .text {
    width: 1.91rem
}

.home .date-list .add {
    width: .28rem;
    margin-right: .28rem;
    margin-left: .04rem
}

.home .date-list .vote-number {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: nowrap
}

.home .date-list .vote-number span {
    display: block;
    width: 10px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-image: url(../images/number.png)
}

.home .date-list .vote-number span.num0 {
    background-position: 0 0
}

.home .date-list .vote-number span.num1 {
    background-position: 0 -15.5px
}

.home .date-list .vote-number span.num2 {
    background-position: 0 -30px
}

.home .date-list .vote-number span.num3 {
    background-position: 0 -45px
}

.home .date-list .vote-number span.num4 {
    background-position: 0 -60px
}

.home .date-list .vote-number span.num5 {
    background-position: 0 -75px
}

.home .date-list .vote-number span.num6 {
    background-position: 0 -90px
}

.home .date-list .vote-number span.num7 {
    background-position: 0 -105px
}

.home .date-list .vote-number span.num8 {
    background-position: 0 -120px
}

.home .date-list .vote-number span.num9 {
    background-position: 0 -135px
}

.home .date-list .arror {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: nowrap;
    margin-left: .1rem
}

.home .date-list .arror img {
    width: .12rem
}

.home .date-list .arror img:nth-child(1) {
    animation: arrorApacity .9s linear infinite
}

.home .date-list .arror img:nth-child(2) {
    animation: arrorApacity .9s linear infinite .3s
}

.home .date-list .arror img:nth-child(3) {
    animation: arrorApacity .9s linear infinite .6s
}

.home .china .photo,
.home .china .photo.end {
    animation: scaleBlue 1.5s linear infinite
}

.home .china .photo {
    position: relative;
    transition: all .3s ease-in;
    transform: scale(.8)
}

.home .china .photo img {
    display: block;
    width: 1.93rem
}

.home .china .photo.start {
    transform: scale(1.5)
}

.home .china .photo .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #000;
    opacity: 0
}

.home .china .total {
    opacity: 0;
    position: absolute;
    top: .24rem;
    left: 1.4rem;
    z-index: 10;
    background: linear-gradient(to right, #f11a14, #fc7157);
    padding: 0 .15rem;
    color: #fff;
    font-size: .2rem;
    border-radius: 5px 5px 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: .28rem;
    transition: all .3s ease-in
}

.home .color-bars {
    position: absolute;
    bottom: .8rem;
    right: 0;
    width: 2rem;
    z-index: 10;
    pointer-events: none
}

.home .color-bar {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .3s ease-in;
    opacity: 1;
    z-index: 100
}

.home .color-bar img {
    position: absolute;
    right: 0;
    top: 0;
    width: 6.9rem
}

.home .notice,
.swiper-container {
    position: relative;
    box-sizing: border-box
}

.home .notice {
    width: 6.02rem;
    height: .58rem;
    border: 1px solid #d5f6fd;
    background: #f6fcff;
    margin: 0 auto;
    padding: 0 .1rem;
    overflow: hidden;
    color: #333
}

.home .notice .name {
    width: auto
}

.home .notice .name .flag {
    width: .3rem !important;
    height: .19rem !important
}

.home .china-rank {
    display: block;
    color: #000;
    height: .56rem
}

.home .china-rank.active {
    animation: notice .5s linear forwards 1
}

.home .china-rank li {
    float: left;
    display: block;
    height: .56rem;
    line-height: .56rem
}

.home .china-rank .date {
    font-size: .18rem;
    width: .7rem
}

.home .china-rank .name {
    font-size: .26rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: nowrap;
    padding: 0
}

.home .china-rank .name span {
    display: block;
    min-width: 1.3rem;
    max-width: 1.8rem;
    overflow: hidden
}

.home .china-rank .name img {
    display: block;
    height: 100%;
    width: 100%;
    margin-right: .16rem
}

.home .china-rank .project {
    font-size: .22rem;
    overflow: hidden;
    width: 1.9rem;
    box-sizing: border-box;
    padding-left: .1rem
}

.home .china-rank .award {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: nowrap;
    font-size: .22rem;
    float: right
}

.home .china-rank .award img {
    display: block;
    width: .24rem;
    margin-right: .18rem
}

.home .top-ten-box .row {
    background: #fff
}

@keyframes colorbar {
    0% {
        opacity: 0;
        transform: scale(.5) translateY(30px)
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateY(0)
    }

    100% {
        opacity: 0;
        transform: scale(.9) translateY(10px)
    }
}

@keyframes arrorApacity {

    0%,
    100% {
        opacity: .3
    }

    50% {
        opacity: 1
    }
}

@keyframes scaleBlue {

    0%,
    100% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1)
    }
}

@keyframes notice {
    0% {
        opacity: 1;
        margin-top: 0
    }

    100% {
        opacity: 0;
        margin-top: -.56rem
    }
}

.swiper-container {
    width: 100%;
    height: 100%;
    padding-top: .8rem
}

.swiper-container .swiper-slide {
    overflow-y: auto
}

.swiper-container .swiper-slide.not-in-app {
    padding-bottom: 1.2rem;
    box-sizing: border-box
}

.ranking {
    background: #f9f9f9
}

.ranking .top .date {
    line-height: .2rem;
    position: absolute;
    top: 1.65rem;
    left: 1.17rem;
    z-index: 10;
    font-size: .15rem;
    color: rgba(255, 255, 255, .7)
}

.ranking .tabs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .8rem;
    display: flex;
    flex-flow: nowrap;
    align-items: center;
    justify-content: center;
    background: #FFF;
    box-shadow: 0 1px 5px 2px rgba(211, 211, 211, .5)
}

.ranking .tabs:after,
.ranking .tabs:before {
    display: none !important
}

.ranking .swiper-pagination-bullet {
    outline: 0;
    flex: 1 auto;
    line-height: .8rem;
    text-align: center;
    font-size: .28rem;
    height: 100%;
    background: 0 0;
    color: #333;
    opacity: 1;
    position: relative
}

.ranking .swiper-pagination-bullet:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(140deg, #0DF 0, #00A5EB 100%);
    transition: all .3s ease-in;
    opacity: 0
}

.ranking .swiper-pagination-bullet-active {
    color: #00A5EB
}

.ranking .swiper-pagination-bullet-active::after {
    opacity: 1;
    width: .4rem
}

.ranking .rows .row {
    position: relative
}

.ranking .rows .row:nth-child(odd) {
    background: #fff
}

.ranking .rows .row:nth-child(odd):after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1px;
    display: block;
    transform: translateX(-25%) scale(.5);
    background: #ddd
}

.top-ten-box .rows .name {
    font-size: .26rem
}

.top-ten-box .rows .date,
.top-ten-box .rows .medal {
    font-size: .28rem
}

.top-ten-box .name {
    position: relative;
    padding-left: 1.08rem;
    box-sizing: border-box
}

.top-ten-box .name .rank {
    position: absolute;
    left: .48rem;
    color: #00A5EB;
    font-size: .24rem
}

.top-ten-box .name .rank img {
    display: block;
    width: .3rem
}

.top-ten-box .name b {
    font-weight: 400;
    text-align: left
}

.top-ten-box .medal {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%
}

.top-ten-box .medal img {
    display: block;
    width: .24rem
}

.top-ten-box li {
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    text-align: center;
    line-height: .4rem;
    flex: 1 auto
}

.china-list-box .row {
    height: .92rem;
    overflow: hidden;
    background: #f9f9f9
}

.china-list-box li {
    float: left;
    overflow: hidden;
    line-height: .92rem;
    box-sizing: border-box;
    padding-left: .1rem;
    color: #333
}

.china-list-box .rows .row .name,
.china-list-box .rows .row .project {
    font-size: .26rem
}

.china-list-box .rows .row .active {
    color: #00A5EB;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-flow: nowrap
}

.china-list-box .rows .row .active:after {
    content: '';
    height: .24rem;
    width: .24rem;
    background: url(../images/arror.png) no-repeat;
    background-size: cover;
    display: inline-block
}

.china-list-box .rows .row .active span {
    display: inline-block;
    overflow: hidden;
    max-width: 2.7rem
}

.china-list-box header {
    font-size: .24rem
}

.empty,
.guide-content {
    text-align: center;
    font-size: .3rem
}

.china-list-box .name {
    width: 3.02rem;
    padding-left: .8rem;
    position: relative
}

.china-list-box .name img {
    display: block;
    height: .24rem;
    width: .24rem;
    position: absolute;
    left: .38rem;
    top: 50%;
    margin-top: -.12rem
}

.china-list-box .project {
    width: 3.18rem
}

.china-list-box .date {
    width: 1.3rem;
    text-align: center
}

.empty {
    color: #333;
    line-height: .4rem;
    padding: .4rem 0
}

.top-ten-box .row {
    height: .92rem;
    overflow: hidden;
    background: #f9f9f9;
    padding-right: .1rem
}

.top-ten-box .row li {
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: .85rem
}

.top-ten-box .row li.name {
    justify-content: flex-start;
    width: 3.3rem
}

.top-ten-box.top-ten-box-home {
    background-color: #fff
}

.top-ten-box.top-ten-box-home .row {
    height: .7rem
}

.guide-app {
    position: fixed;
    bottom: .4rem;
    width: 100%;
    z-index: 2
}

.guide-content {
    padding: .2rem 0;
    width: 90%;
    margin: 0 auto;
    color: #fff;
    border-radius: 3rem;
    background: linear-gradient(to right, #bd212a, #761b2a)
}

.guide-content a {
    color: #fff
}

.hide {
    display: none
}

.flag,
.flag img,
.show {
    display: block
}

.rank-top-ten .row:nth-child(1) .name .rank,
.rank-top-ten .row:nth-child(2) .name .rank,
.rank-top-ten .row:nth-child(3) .name .rank {
    color: rgba(255, 255, 255, 0);
    height: .3rem;
    width: .3rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: -.1rem
}

.rank-top-ten .row:nth-child(1) .rank {
    background-image: url(../images/rank1.png)
}

.rank-top-ten .row:nth-child(2) .rank {
    background-image: url(../images/rank2.png)
}

.rank-top-ten .row:nth-child(3) .rank {
    background-image: url(../images/rank3.png)
}

.flag {
    height: .26rem;
    width: .4rem;
    margin-right: .16rem;
    position: relative;
    box-sizing: border-box
}

.flag:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    transform: scale(.5) translate(-50%, -50%);
    border: 1px solid #d5d5d5;
    box-sizing: border-box
}

.flag img {
    width: 100%;
    height: 100%
}

.top-ten-box-home>header {
    box-shadow: 0px -1px 4px 0px rgba(216, 239, 245, 0.33);
}