:root{
    --000000:#000000;
    --282828: #282828;
    --ffffff:#ffffff;
    --00002f:#00002F;
    --7d83a0:#7d83a0;
    --19193a:#19193a;
    --f9811d:#f9811d;
    --ffd733:#ffd733;
    --0603bc:#0603bc;
    --ff010c:#ff010c;
    --2cb250:#2cb250;
}
body{
    line-height: 1.4;
    color: var(--ffffff);
    background-color: var(--00002f);
}
#app{
    background-color: var(--00002f);
    width: 100%;
    margin: 0 auto;
}
.page{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
header{
    width: 100%;
    min-height: 80vh;
    background: var(--00002f) url(../images/bg.jpg) no-repeat top;
    background-size: cover;
    background-position: 20% 0;
    display: flex;
    align-items: center;
}
.banner .bn_tt{
    width: 80%;
    margin-left: 10%;
}
.banner h1{
    font-size: 52px;
    margin-bottom: .2em;
}
.banner p{
    font-size: 18px;
}

.banner img{
    width: 100%;
    height: auto;
}
/*  */
.margin_top{
    margin-top: 80px;
}
main{
    margin-top: 40px;
}
.content{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.mn_left{
    width: 48%;
    position: relative;
    border-radius: 1em;
    background-color: var(--ffffff);
}
#mn_iframe{
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 1em;
}
#mn_iframe1{
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 1em;
}
.mn_left::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: -1em;left: -1em;
    background-color: var(--0603bc);
    border-radius: 1em;
    z-index: -1;
}
.mn_left::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 1em;right: -1em;
    background-color: var(--ff010c);
    border-radius: 1em;
    z-index: -1;
}
.mn_right{
    width: 49%;
    height: 100%;
}
.rt_sum{
    overflow: hidden;
    background-color: var(--ffffff);
    padding: 10px;
    border-radius: .5em;
}
#calendar{
    width: 100%;
    height: 100%;
}
.rt_item{
    display: flex;
    margin-bottom: 10px;
}
.rt_item img{
    width: 30px;
    height: 30px;
    margin-top: 8px;
}
.title{
    font-size: 24px;
    color: var(--ffd733);
    margin-bottom: 1em;
}
.rt_im_t{
    font-size: 16px;
    color: var(--ffffff);
    padding-left: .5em;
}
.tt_0{
    font-size: 14px;
    color: var(--7d83a0);
}
.tt_1{
    font-size: 14px;
}
/*  */
#mt_iframe{
    width: 100%;
    height: 80vh;
    border: 0;
}
.news_ranking{
    margin-top: 80px;
}
.ns_rk{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.news{
    width: 68%;
}
.ranking{
    width: 30%;
}
.ranking .title{
    cursor: pointer;
}
.list_sum{
    max-height: 680px;
    overflow: auto;
}
.ns_list{
    background-color: var(--19193a);
    font-size: 16px;
    border-radius: .6rem;
    padding: 1rem 1rem .5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1em;
}
.ns_list .ns_is_1{
    width: auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-right: 1em;
}
.ns_list .ns_is_2 {
    width: 30%;
    min-width: 30%;
}
.ns_is_2 img{
    width: 100%;
    height: auto;
}
.ns_is_1 p{
    font-size: 20px;
    color: var(--ffffff);
}
.icon{
    color: var(--f9811d);
    border: 1px solid var(--f9811d);
    padding: .2em .5em;
    line-height: 1;
    margin: .8em 0 1.4em;
}
.ns_is_1 span{
    color: var(--7d83a0);
}
.ct_title{
    display: flex;
}
.ct_title .title{
    margin-right: 1em;
    color: var(--7d83a0);
}
.line{
    margin-top: 6px;
    width: 50%;
    height: 4px;
    background-color: var(--ffd733);
    display: none;
}
.title.active{
    color: var(--ffffff);
}
.title.active .line{
    display: block;
}
.tk_list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--ffffff);
    padding: 16px 0;
    background: url(../images/line.png) no-repeat bottom;
}
.is_l{
    width: 88%;
    display: flex;
    align-items: flex-start;
}
.is_r{
    width: 10%;
}
.is_r span{
    background-color: rgba(138, 146, 159, .3);
    padding: .2em .45em;
    border-radius: .1em;
}
.tk_list0 .is_r span{
    background: url(../images/top1.png) no-repeat center;
    background-size: 120%,120%;
    color: transparent;
}
.tk_list1 .is_r span{
    background: url(../images/top2.png) no-repeat center;
    background-size: 120%,120%;
    color: transparent;
}
.tk_list2 .is_r span{
    background: url(../images/top3.png) no-repeat center;
    background-size: 120%,120%;
    color: transparent;
}
.is_logo{
    width: 42%;
    min-width: 45%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.is_logo img{
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.is_logo .biao{
    width: 80%;
    height: 24px;
    background-color: var(--2cb250);
    position: absolute;
    top: 0;left: 0;
    border-radius: 6px 0 12px 0;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.biao.biaobg{
    background-color: #b2243c;
}
.is_tx{
    margin-left: 2%;
}
.tx_p{
    display: flex;
    line-height: 1;
    align-items: flex-end;
    margin: .5em 0;
}
.tx_p p{
    margin-right: .5em;
}

.tx_p span,
.above span{
    color: var(--7d83a0);
    font-size: 12px;
    line-height: 1;
}
.above span{
    padding: .2em .6em;
    border: 1px solid var(--7d83a0);
    border-radius: .3em;
}
.more{
    display: flex;
    justify-content: center;
}
.me-btn{
    margin: 2em 0;
    font-size: 20px;
    padding: .3em 1.5em;
    color: var(--7d83a0);
    border: 2px solid var(--7d83a0);
    border-radius: 4em;
    cursor: pointer;
}
/*  */
footer{
    background-color: var(--ffd733);
    padding: 50px 0 80px 0;
}
.ft_logo{
    width: 40%;
    max-width: 200px;
}
.ft_logo img{
    width: 100%;
    height: auto;
}
footer p{
    text-align: center;
    font-size: 18px;
    padding: 1em 0 1.5em;
    color: var(--282828);
}
.sns{
    display: flex;
    align-items: center;
    justify-content: center;
}
.sns .sn_li{
    width: 70px;
    min-width: 70px;
    height: 70px;
    background-color: var(--282828);
    border-radius: 50%;
    padding: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0 16px;
    cursor: pointer;
}
.sn_li.facebook{
    padding: 26px;
}
.sns .sn_li img{
    width: 100%;
    height: auto;
}
.ft_logo{
    width: 60%;
    height: auto;
    margin: 0 auto;
}
.ft_logo img{
    width: 100%;
    height: auto;
}

@media (max-width: 1280px){
    .page {
        padding: 0 5%;
    }
    .margin_top{
        margin-top: 60px;
    }
    .title {
        font-size: 22px;
    }
    .ns_is_1 p {
        font-size: 18px;
    }
    .ns_list {
        font-size: 14px;
    }
    .is_tx h4{
        font-size: 14px;
    }
    .tx_p {
        margin: .3em 0;
    }
    .tx_p p {
        margin-right: .3em;
    }
    .above span {
        padding: .1em .4em;
        line-height: 1;
    }
    .news{
        width: 60%;
    }
    .ranking{
        width: 38%;
    }
}

@media (max-width: 799px) {
    header {
        height: 100vh;
        min-height: 700px;
        background: url(../images/bg-wap.jpg) no-repeat center;
        background-size: cover;
        display: flex;
        align-items: center;
    }
    .banner .bn_tt {
        width: 80%;
        margin-left: 5%;
        transform: translateY(-50%);
    }
    .banner h1 {
        font-size: 36px;
    }
    .content {
        flex-direction: column;
    }
    .mn_left {
        width: 100%;
    }
    .mn_left::before{
        top: -.5em;left: -.5em;
    }
    .mn_left::after{
        top: .1em;right: -.5em;
    }
    .mn_right {
        width: 100%;
        margin-top: 40px;
    }
    .ns_rk{
        flex-direction: column;
    }
    .news {
        width: 100%;
    }
    .ranking {
        width: 100%;
        margin-top: 40px;
    }
    .title {
        font-size: 20px;
    }
    .margin_top {
        margin-top: 40px;
    }
    .rt_im_t {
        font-size: 14px;
    }
    .rt_item img {
        width: 18px;
        height: 18px;
        margin-top: 4px;
    }
    .ns_list {
        font-size: 12px;
        border-radius: .4em;
        align-items: center;
        padding: .6rem .6rem .3rem;
    }
    .ns_is_1 p {
        font-size: 16px;
    }
    .line {
        margin-top: 4px;
        width: 50%;
        height: 3px;
    }
    .is_tx h4 {
        font-size: 14px;
    }
    .tx_p p {
        font-size: 13px;
    }
    .sns .sn_li {
        width: 45px;
        min-width: 45px;
        height: 45px;
        padding: 13px;
        margin: 0 8px;
    }
    .sn_li.facebook {
        padding: 16px;
    }
}
.download{
    z-index: 99;
    position: fixed;
    bottom: 20%;
    right: 2%;
}
.close{
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;right: -20px;
    cursor: pointer;
}
.close img{
    width: 100%;
    height: auto;
}
.dd_box{
    width: 100px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--ffffff);
}
.dd_phone{
    padding: 0 5%;
}
.dd_phone img{
    width: 100%;
    height: auto;
}
.dd_tt{
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dd_tt svg{
    height: 20px;
    height: 20px;
}

@media (max-width: 799px) {
    .download{
        bottom: 40%;
        right: 2%;
    }
    .dd_box{
        width: 80px;
    }
    .dd_tt{
        font-size: 10px;
    }
    .dd_tt svg{
        height: 14px;
        height: 14px;
    }
    .close{
        width: 24px;
        height: 24px;
        position: absolute;
        top: -10px;right: -6px;
        cursor: pointer;
    }
}