body, #app {
    background: #001D30
}

h3 {
    color: white
}

img[introduction] {
    margin: 0 auto
}

.wrap[introduction] {
    width: 768px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.8
}

p[introduction] {
    margin: 0 auto
}

h4[introduction], h5[introduction] {
    margin: 10px 0;
    font-size: 26px
}

em[introduction] {
    font-size: 20px;
    font-weight: 500;
    font-style: normal
}

h5[introduction] {
    margin-top: 30px
}

.background[background] {
    margin-top: 50px;
    position: relative;
}

.background[background] .river {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
}

img[background] {
    display: block;
    margin: 0 auto
}

.wrap[background] {
    width: 920px;
    height: 812px;
    position: relative;
    background: url(./images/background.b237275b.png) no-repeat 50%/contain;
    padding: 0 180px 0 116px;
    margin: -60px auto 0
}

h3[background] {
    padding: 150px 0 0;
    font-size: 28px
}

p[background] {
    margin: 50px 0 0;
    font-size: 20px;
    line-height: 1.8
}

ul[feature] {
    display: flex;
    list-style: none;
    justify-content: center;
    margin: 0;
    padding: 0
}

li[feature] {
    padding: 0 34px 0 70px;
    flex: 0 0 310px;
    height: 392px;
    background: url(./images/feature.38babff3.png) no-repeat 50%/contain
}

h3[feature] {
    font-size: 32px;
    line-height: 1;
    margin: 12px 0 66px
}

p[feature] {
    font-size: 20px;
    text-align: left;
    line-height: 1.7
}

.wrap[theme] {
    max-width: 1114px;
    margin: 0 auto;
    position: relative;
    background: url(images/theme.png) no-repeat 50%/contain
}

.bg[theme] {
    padding-top: 93.71634%
}

.text[theme] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

h3[theme] {
    font-size: 48px;
    line-height: 86px;
    padding-top: 22.1%;
    color: #000
}

h4[theme] {
    color: #000;
    font-size: 36px;
    line-height: 1
}

h5[theme] {
    font-size: 50px;
    color: #000;
    margin: 4% 0 20px;
    line-height: 1;
    font-weight: 400
}

p[theme] {
    margin: 0 auto;
    color: #000;
    width: 62%;
    font-size: 20px;
    line-height: 1.8
}

.wrap[progress] {
    background: url(./images/progress.e5b35e14.svg) no-repeat 50%/contain;
    width: 912px;
    height: 496px;
    margin: -20px auto 0;
    position: relative
}

.wrap div[progress] {
    position: absolute;
    text-align: left;
    top: 140px
}

.wrap span[progress] {
    display: block;
    font-size: 26px;
    line-height: 37px
}

.wrap p[progress] {
    font-size: 20px;
    line-height: 1.4
}

.wrap .p1[progress] {
    left: 84px
}

.wrap .p2[progress] {
    left: 382px
}

.wrap .p3[progress] {
    left: 668px
}

.wrap .p4[progress] {
    top: 329px;
    left: 580px
}

.wrap .p4 h3[progress] {
    display: flex
}

.wrap .p4 i[progress] {
    font-style: normal;
    font-size: 20px;
    line-height: 1.2;
    margin-left: 4px
}

.wrap .p5[progress] {
    top: 329px;
    left: 344px
}

.wrap .p6[progress] {
    top: 334px;
    left: 84px
}

h3[progress] {
    font-size: 32px;
    line-height: 45px
}

.other[progress] {
    font-size: 20px;
    line-height: 1.4;
    opacity: .5
}

.wrap[awards] {
    background: url(./images/awards.5bf07e57.png) no-repeat 50%/contain;
    width: 894px;
    height: 839px;
    position: relative;
    color: #000;
    margin: 0 auto
}

h3[awards] {
    color: #000;
}

.wrap div[awards] {
    position: absolute;
    text-align: center
}

.awards-h5 {
    display: none;
}

.wrap .lv1[awards] {
    top: 81px;
    left: 415px
}

.wrap .lv2[awards] {
    top: 248px;
    left: 112px
}

.wrap .lv3[awards] {
    top: 248px;
    left: 656px
}

.wrap .lv4[awards] {
    top: 362px;
    left: 380px
}

.wrap .lv5[awards] {
    top: 547px;
    left: 136px
}

.wrap .lv6[awards] {
    top: 512px;
    left: 660px
}

.wrap span[awards] {
    display: block;
    font-size: 26px;
    line-height: 37px
}

.wrap h3[awards] {
    font-size: 32px;
    line-height: 45px
}

.wrap p[awards] {
    font-size: 20px;
    line-height: 1.4
}

.details[details] {
    margin: -220px 0 0;
    position: relative
}

.details .wrap[details] {
    background: url(./images/details.b4014b74.png) no-repeat 50%/contain;
    width: 581px;
    height: 206px;
    margin: -20px auto 0;
    padding-top: 100px;
    font-size: 20px
}

.wrap[requirement] {
    background: url(./images/requirement.dbde42fb.png) no-repeat 50%/contain;
    width: 695px;
    height: 278px;
    padding: 110px 80px 0 60px
}

.wrap[submit], .wrap[requirement] {
    margin: -30px auto 0;
    font-size: 20px;
    line-height: 1.8
}

.wrap[submit] {
    background: url(./images/submit.cf7eb3a6.png) no-repeat center 0/contain;
    width: 894px;
    height: 1660px;
    padding: 83px 90px 0 260px;
    transform: translateX(-90px);
}

.dog-h5 {
    display: none;
}

.wrap h3[submit] {
    height: 90px;
    line-height: 90px
}

.last[submit] {
    margin-top: 50px;
    opacity: .8
}

.wrap[statement] {
    background: url(./images/statement.c90bd268.png) no-repeat 50%/contain;
    width: 716px;
    height: 862px;
    margin: -40px auto 0;
    padding: 126px 80px 0 60px;
    font-size: 20px;
    line-height: 1.8;
    text-align: left
}

.wrap[rule] {
    display: flex;
    justify-content: center;
    width: 900px;
    flex-wrap: wrap;
    margin: 0 auto
}

.wrap[faq] {
    background: url(./images/faq.4d6a62eb.png) no-repeat 50%/contain;
    width: 697px;
    height: 358px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 1;
    text-align: center
}

.wrap h2[faq] {
    font-size: 36px;
    padding: 100px 0 0;
    margin: 0
}

.wrap[faq] h2.sub {
    display: none;
    line-height: 1;
    font-size: 24px;
    margin: 0;
    padding: 10px;
}

.wrap dl[faq] {
    display: flex;
    justify-content: center;
    margin: 44px 0 0;
    align-items: center
}

.wrap dd[faq], .wrap dt[faq] {
    margin: 0
}

.wrap dt[faq] {
    font-size: 20px
}

.wrap dd[faq] {
    font-size: 28px;
    font-weight: 700
}

ul[organization] {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center
}

li + li[organization] {
    margin-left: 128px
}

h3[organization] {
    font-size: 32px;
    margin: 44px 0
}

p[organization] {
    font-size: 20px;
    margin: 0 0 70px
}

* {
    box-sizing: border-box
}

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #fff;
    margin: 0;
    min-width: 1024px
}

#app img {
    display: block;
    margin: 50px auto 0
}

body {
    padding: 0;
}

body, h3, h4, h5, h6, p {
    margin: 0
}

.dog2[hjs] {
    margin-top: -131px !important
}

img[hjs] {
    display: block;
    margin: 0 auto;
    width: 100%
}

.content-contest-detail div.tabs_wrapper {
    border: 0;
}

.content-contest-detail .tabs_wrapper .profile_nav.px_tabs {
    display: flex;
    justify-content: center;
    border: 0;
    flex-wrap: wrap;
}

.content-contest-detail .tabs_wrapper .profile_nav.px_tabs > li {
    width: 226px;
    height: 119px;
    display: block;
    background: url("images/btns/btn-default.png") no-repeat center / contain;
}

.content-contest-detail .tabs_wrapper .profile_nav.px_tabs > .active {
    background: url("images/btns/btn-active.png") no-repeat center / contain;
}
.content-contest-detail .tabs_wrapper .profile_nav.px_tabs > .active a {
    color: black;
}

.content-contest-detail .tabs_wrapper .profile_nav.px_tabs > li a {
    color: white;
    padding: 0;
    line-height: 112px;
    font-size: 22px;
}

.download a {
    color: white;
    text-decoration: none;
}

.download a p {
    display: inline;
    border-bottom: 1px solid white;
}

#app .wrap[theme] > img,
#app .wrap[statement] > img,
#app .wrap[submit] > img {
    display: none;
}
#app .wrap[submit] > .web-logo {
    display: block;
}

@media screen and (max-width: 600px) {
    #app {
        min-width: 0;
        max-width: 100vw;
    }

    #app img {
        max-width: 100vw;
    }

    .wrap[introduction] {
        width: 100vw;
        padding: 0 10vw;
        font-size: 16px;
    }

    .background[background] {
        width: 100vw;
        overflow: hidden;
    }

    .wrap[background] {
        /*transform: translateX(20px);*/
        padding: 100px 0 0;
        width: 100vw;
        height: 760px;
        background: url(./images/h5/background.svg) no-repeat 86% 0 /contain;
        margin: 0;
    }

    .wrap[background] > * {
        width: 216px;
        margin: 0 auto;
    }

    h3[background] {
        padding: 0 0 20px;
        font-size: 20px;
        line-height: 36px;
    }

    p[background] {
        padding: 0;
        font-size: 16px;
        line-height: 28px;
    }

    ul[feature] {
        display: block;
    }

    li[feature] {
        width: 296px;
        background: url(./images/h5/feature-bg.svg) no-repeat center /contain;
        margin: 10px auto;
        padding: 0 41px 0 51px;
        height: 217px;
    }

    h3[feature] {
        font-size: 16px;
        margin: 5px 0 28px;
    }

    p[feature] {
        font-size: 14px;
        margin: 5px 0;
        line-height: 2;
    }

    .wrap[theme] {
        /*width: 317px;*/
        margin: 0 auto;
        max-width: 100vw;
        width: 100vw;
        background: none;
        /*background: url(./images/h5/theme.svg) no-repeat 50%;*/
    }

    #app .wrap[theme] img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 1000px;
        height: 100%;
        transform: scaleX(1.4);
        display: block;
    }

    .bg[theme] {
        /*padding: 0;*/
        /*height: 718px;*/
        display: none;
    }

    .text[theme] {
        position: relative;
        padding-bottom: 20vw;
    }

    h3[theme] {
        font-size: 22px;
        width: 200px;
        margin: 0 auto;
        line-height: 2;
        padding-top: 25%;
    }

    p[theme] {
        width: 200px;
        font-size: 14px;
        line-height: 2;
    }

    h4[theme], h5[theme] {
        margin: 4px auto;
        width: 200px;
        font-size: 16px;
        line-height: 2;
    }

    .wrap[progress] {
        background: url(./images/h5/progress.svg) no-repeat 13vw 0 /contain;
        width: 100vw;
        height: 643px;
        margin: 0 auto;
        padding: 0 0 0 35vw;
    }

    .wrap div[progress] {
        position: static;
    }

    h3[progress] {
        font-size: 18px;
        padding: 27px 0 0;
        line-height: 1;
    }

    .wrap span[progress] {
        font-size: 16px;
        line-height: 1;
        padding: 13px 0 10px;
    }

    .wrap p[progress] {
        font-size: 14px;
        line-height: 1;
    }

    .wrap .p4 i[progress] {
        font-size: 12px;
        line-height: 2;
        font-weight: 400;
    }

    .other[progress] {
        line-height: 2;
        font-size: 14px;
    }

    .wrap[awards] {
        background: url(./images/h5/award.png) no-repeat 50%/contain;
        width: 280px;
        height: 520px;
        position: relative;
        color: #000;
        margin: 0 auto;
        padding: 40px 0 0;
    }

    .wrap div[awards] {
        position: static;
        display: flex;
        height: 72px;
        align-items: center;
    }

    .wrap h3[awards] {
        font-size: 18px;
        padding: 0;
        flex: 0 0 54px;
        text-align: right;
        line-height: 1;
        margin-left: 40px;
    }

    .wrap h3[awards] + h3 {
        font-size: 16px;
        margin-left: 0;
    }

    .wrap p[awards] {
        font-size: 12px;
    }

    .awards-h5 {
        display: block;
        margin-left: 16px;
        width: 92px;
    }

    .awards-h5 ~ p {
        display: none;
    }

    .dog2[hjs] {
        margin-top: 0 !important
    }

    .details[details] {
        margin: -27vw auto 0;
        position: relative
    }

    .details .wrap[details] {
        width: 100vw;
        font-size: 16px;
        padding-top: 23vw;
        height: 50vw;
    }

    .wrap[requirement] {
        background: url(./images/h5/requirement.svg) no-repeat 55% 50% /contain;
        width: 100vw;
        height: 63vw;
        margin: 0;
        padding: 46px 90px 0 86px;
        font-size: 14px;
        line-height: 2;
    }

    .wrap[submit] {
        margin: 0 auto;
        transform: translateX(-30px);
        /*background: url(./images/h5/submit.svg) no-repeat center 0/contain;*/
        background: none;
        width: 100vw;
        height: auto;
        padding: 12vw 15vw 10vw 30vw;
        font-size: 14px;
    }

    #app .wrap[submit] > .web-logo {
        display: none;
    }

    #app .wrap[submit] > * {
        position: relative;
    }

    #app .wrap[submit] img.bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 1000px;
        height: 100%;
        transform: scaleX(1.4);
        display: block;
    }

    #app .web-logo {
        display: none;
    }

    .dog-h5 {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    #app .dog-h5 img {
        display: block;
        width: 100%;
        margin: 0;
    }

    .last[submit] {
        margin: 30px auto 0;
        width: 80%;
    }

    .wrap[statement] {
        /*background: url(./images/h5/statement.svg) no-repeat 50%/contain;*/
        background: none;
        width: 100vw;
        height: auto;
        margin: -10px auto 10vw;
        padding: 50px 100px 0 110px;
        font-size: 14px;
        line-height: 2;
        text-align: left;
        position: relative;
    }

    #app .wrap[statement] > * {
        position: relative;
    }

    #app .wrap[statement] img.bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 1000px;
        height: 100%;
        transform: scaleX(1.3);
        display: block;
    }

    #app .wrap[rule] {
        width: 100vw;
        padding: 0 5vw;
    }

    #app .wrap[rule] img {
        height: 8vw;
    }

    .wrap[faq] {
        background: url(./images/h5/faq.svg) no-repeat 50% / 75vw;
        width: 100vw;
        height: 358px;
        margin: 0 auto;
        font-size: 20px;
        line-height: 1;
        text-align: center
    }

    .wrap[faq] h2 {
        line-height: 1;
        font-size: 24px;
        margin: 0;
        padding: 80px 0 0;
    }

    .wrap[faq] h2.sub {
        display: block;
    }


    .wrap[faq] h2 span {
        display: none;
    }

    .wrap[faq] dl {
        margin: 20px;
        display: block;
    }

    .wrap[faq] dd {
        font-size: 16px;
        padding: 10px;
    }

    ul[organization] {
        padding: 0;
        margin: 0;
        display: block;
    }

    li + li[organization] {
        margin: 0;
    }

    h3[organization] {
        font-size: 24px;
        margin: 5vw 0;
        line-height: 1;
    }

    p[organization] {
        line-height: 1;
        font-size: 16px;
        margin: 0 0 8vw;
    }

    #app .dog1 {
        margin-top: 0;
    }

    [titleImage] {
        height: 14vw;
    }

    .content-contest-detail .tabs_wrapper .profile_nav.px_tabs > li {
        width: 25vw;
        height: 13.2vw;
        margin: 0;
        overflow: hidden;
    }

    .content-contest-detail .tabs_wrapper .profile_nav.px_tabs > li a{
        font-size:16px;
        line-height:13.2vw;
    }

    .content-contest-detail .tabs_wrapper .profile_nav.px_tabs > li + li {
        margin-left: 2vw;
    }

    #app img {
        margin: 5vw auto 0
    }

    h5[introduction] {
        margin: 10px 0;
        font-size: 18px;
    }

    .wrap h3[submit] {
        height: 40px;
        line-height: 60px;
    }
}

/* todo ********** ********** ********** reset ********** ********** ********* */

.content-contest-detail .contest-head-infor div.contest-time {
    color: white;
}