@import "layui_self.css";
@import "../font/iconfont.css";

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    vertical-align: baseline;
}

div {
    box-sizing: border-box;
}
img.block{
    display: block;
    width: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul, li {
    list-style: none;
}

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

th, td {
    vertical-align: middle;
}

/* custom */
:root {
    font-size: 5.208vw;
}
@media screen and (min-width: 1920px){
    :root {
        font-size: 100px;
    }
}

@media all
and (-moz-min-device-pixel-ratio: 1.01) and (-moz-max-device-pixel-ratio: 3),
(-webkit-min-device-pixel-ratio: 1.01) and (-webkit-max-device-pixel-ratio: 3),
(min-resolution: 1.01dppx) and (max-resolution: 3dppx) {

    :root {
        font-size: 100px;
    }
    @media screen and (max-width: 1670px) {
        :root {
            font-size: 80px;
        }
    }
    @media screen and (max-width: 1366px) {
        :root {
            font-size: 75px;
        }
    }
    @media screen and (max-width: 1280px) {
        :root {
            font-size: 70px;
        }
    }
    @media screen and (min-width: 1024px) and (max-width: 1279px){
        :root {
            font-size: 60px;
        }
    }
    @media screen and (max-width: 1023px) {
        :root {
            font-size: 6.416vw;
        }
    }
}


@media all
and (-moz-min-device-pixel-ratio: 0.01) and (-moz-max-device-pixel-ratio: 0.99),
(-webkit-min-device-pixel-ratio: 0.01) and (-webkit-max-device-pixel-ratio: 0.99),
(min-resolution: 0.01dppx) and (max-resolution: 0.99dppx) {
    :root {
        font-size: 100px;
    }
    @media screen and (max-width: 1540px) {
        :root {
            font-size: 80px;
        }
    }
    @media screen and (max-width: 1366px) {
        :root {
            font-size: 75px;
        }
    }
}

/*@media screen and (max-width: 1680px) {*/
/*:root{*/
/*font-size: 90px;*/
/*}*/
/*}*/
/*@media screen and (max-width: 1536px) {*/
/*:root{*/
/*font-size: 80px;*/
/*}*/
/*}*/
/*@media screen and (max-width: 1366px) {*/
/*:root{*/
/*font-size: 75px;*/
/*}*/
/*}*/
/*@media screen and (max-width: 1280px) {*/
/*:root{*/
/*font-size: 70px;*/
/*}*/
/*}*/

html, body {
    max-width: 1920px;
    margin: 0 auto;
    font-family:PingFangSC-Regular, Helvetica,"微软雅黑Light","Microsoft YaHei", serif;
    overflow-x: hidden;
}

a {
    outline: none;
    color: inherit;
    text-decoration: none;
    -webkit-backface-visibility: hidden;
}

a:focus {
    outline: none;
}

input:focus, select:focus, textarea:focus {
    outline: -webkit-focus-ring-color auto 0;
}
.text-red{
    color: #ff0000;
}
.text-blue{
    color: #0b6ec7;
}
.banner{
    width: 100%;
    position: relative;
}
.banner img{
    width: 100%;
    display: block;
}

.container{
    width:15.2rem;
    padding: .2rem 0;
    margin: 0 auto;
    overflow: hidden;
}



.banner-title{
    position: absolute;
    color: #333;
    font-size: .52rem;
    border-bottom: .06rem solid #a9a9a9;
    bottom:1.1rem;
    left: 15%;
    padding-right: .4rem;
    padding-bottom: .16rem;
}
.mid-nav{
    overflow: hidden;
    line-height: .7rem;
    border-bottom: 1px solid #a9a9a9;
}

.mid-breadcrumb {
    float: left;
    font-size: .2rem;
    position: relative;
    height: .7rem;
    color: #595757;
}
.mid-breadcrumb .separator{
    margin: 0 4px;
    font-family: serif,cursive,monospace;
    font-weight: 600;
}
.mid-breadcrumb .active{
    color: #0b6ec7;
}

.mid-type{
    float: right;
    font-size: .28rem;
    height: .7rem;
}
.mid-type a{color: #333}
.mid-type .separator{
    margin: 0 4px;
    font-weight: lighter;
    font-family: serif,cursive,monospace;
    font-size: .36rem;
    vertical-align: top;
    color: #a9a9a9;
}
.mid-type .active{
    color: #0b6ec7;
}
.index-title{
    font-size: .35rem;
    color: #000000;
    text-align: center;
    /*width: 5rem;*/
    margin: 1rem auto .9rem;
    position: relative;
    font-weight: bold;
}
/*.index-title:before{
    content: '';
    width: 80%;
    height: .06rem;
    background: #c9cacb;
    position: absolute;
    bottom: -.2rem;
    left: 10%;
}*/
.index-title:after{
    content: '';
    width: 0.6rem;
    height: 2px;
    background: #85C555;
    position: absolute;
    bottom: -.2rem;
    left: 50%;
    transform: translateX(-50%);

}
.about-title-container {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
.about-title-container h1{
    font-size: .46rem;
    font-weight: bold;
}
.about-title-container p{
    font-size: .2rem;
}
.new-contribute-container{
    width: 79.17%;margin: 0 auto 1rem;display: flex;align-items: center
}
.new-contribute-title{
    font-size: 0.6rem;font-weight: bold;margin-right: 0.16rem;
}
.new-contribute-line{
    flex: 1;height: 0.06rem;background-color: #0F6FC7
}
.new-contribute-branch{
    width: 0.45rem;border: 0.06rem solid #0F6FC7;border-right: none;height: 2.5rem
}
.new-contribute-content{
    width: 60%;padding: 0.5rem;color: #fff;border-radius: 0.5rem
}
.new-contribute-content-item{
    display: flex;height: 1.4rem;align-items: center
}
.new-contribute-content-num{
    width: 28%;font-weight: bold;font-size: 1rem;margin-right: 0.38rem
}
.new-contribute-content-unit{
    font-size: 0.58rem;line-height: 0.7rem
}
.new-contribute-content-detail{
    font-size: 0.36rem
}
.new-contribute-content-img{
    width: 1.2rem;
    text-align: center;
}
.new-contribute-content-word{
    flex:1;display: flex;justify-content: space-between;align-items: center;
}

@media screen and (min-width: 1024px) and (max-width: 1280px){
    .container{
        width:17.6rem;
    }
    .index-title{
        font-size: 0.38rem;
        font-weight: 600;
    }
    .index-title:after{
        content: '';
        width: 0.76rem;

    }
}

@media screen and (max-width: 1023px) {
    .container{
        width:88%;
    }
    .mid-nav{
        border: none;
        line-height: .6rem;
    }
    .mid-breadcrumb{
        font-size: .34rem;
        top: 0;
    }
    .mid-type{
        display: none;
    }
    .index-title{
        font-size: 0.45rem;
        font-weight: 600;
    }
    .index-title:after{
        content: '';
        width: 0.9rem;

    }
    .about-title-container{
        top: 50%;
    }
    .about-title-container h1{
        font-size: .6rem;
    }
    .about-title-container p{
        font-size: .26rem;
    }
    .new-contribute-title{
        font-size: 0.55rem;
    }
    .new-contribute-content-unit{
        font-size: 0.5rem;line-height: 0.7rem
    }
    .new-contribute-content-detail{
        font-size: 0.3rem
    }
}

@media all
and (-moz-min-device-pixel-ratio: 1.01) and (-moz-max-device-pixel-ratio: 3),
(-webkit-min-device-pixel-ratio: 1.01) and (-webkit-max-device-pixel-ratio: 3),
(min-resolution: 1.01dppx) and (max-resolution: 3dppx) {
    @media screen and (min-width: 1024px) and (max-width: 1280px){
        .container{
            width:16.6rem;
        }
    }
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        .container{
            width:88%;
        }
    }
}

@media screen and (max-width: 1367px) {

    @media all and (-moz-device-pixel-ratio: 3),(-webkit-device-pixel-ratio: 3),(resolution: 3dppx),(-moz-device-pixel-ratio: 2),(-webkit-device-pixel-ratio: 2),(resolution: 2dppx) {
        .about-title-container p{
            margin-top: -0.2rem !important;
        }
    }
}