li {
    list-style: none;
}

ul,
div {
    padding: 0;
    margin: 0;
}

body {
    background: #eceef3;
}

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

.clear {
    zoom: 1;
}

.top {
    background: black !important;
}

.top-img {
    float: left;
    margin-top: -9px;
    position: absolute;
    left: -195px;
}

.nav .on {
    color: yellow;
}

.nav li {
    float: left;
    list-style: none;
    margin-right: 36px;
    color: white;
}

.nav-input {
    float: left;
}

.nav-input {
    width: 193px;
    height: 31px;
    border-radius: 15px;
    border: 0;
    background: white;
    margin-top: -5px;
}

.nav-input input {
    width: 146px;
    margin-left: 14px;
    margin-top: 5px;
    border: 0;
}

.nav {
    float: left;
    margin-left: 98px;
}

.container {
    padding-top: 14px;
    position: relative;
}

.i {
    color: #7d7d7d;
}

.banner {
    width: 1047px;
    margin: 0 auto;
}

.banner-wrap {
    height: 650px;
    background: url("/public/dist/img/competition_img/banner.png");
    margin-top: 50px;
}

.banner__img {
    float: left;
}

.banner__l {
    float: left;
    margin-left: 53px;
}

.banner__l .match {
    float: left;
    font-size: 96px;
    color: #122f4d;
    font-weight: 600;
    margin-top: -32px;
}

.banner__l .sign {
    float: left;
    margin-top: 21px;
    margin-left: 27px;
    margin-top: -8px;
}

.banner__l .sign span:nth-child(1) {
    display: block;
    font-size: 34px;
    color: #000000;
}

.banner__l .sign span:nth-child(2) {
    font-size: 34px;
    color: #f57823;
}

.banner__l p:nth-child(1) {
    font-size: 30px;
    color: #000000;
    letter-spacing: -0.72px;
    margin-top: 84px;
}

.banner__l p:nth-child(2) {
    font-size: 96px;
    color: #122f4d;
    letter-spacing: -2.32px;
}

.banner-img {
    padding-left: 230px;
    position: relative;
}

.half {
    width: 100px;
    height: 50px;
    background-color: white;
    border-radius: 50px 50px 0 0;
    position: absolute;
    left: 455px;
    margin-top: -13px;
}

.triangle {
    height: 0px;
    width: 0px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 23px solid #3ab2e2;
    margin-top: 13px;
    margin-left: 36px;
}

.option {
    width: 1205px;
    margin-top: 109px !important;
    margin: 0 auto;
}

.option li:nth-child(6) {
    margin-right: 0;
}

.option li {
    width: 149px;
    height: 149px;
    background: #ffffff;
    border: 1px solid #979797;
    border-radius: 100%;
    float: left;
    text-align: center;
    padding-top: 23px;
    margin-right: 54px;
    position: relative;
}

.option li .mask {
    position: absolute;
    width: 149px;
    height: 149px;
    border-radius: 50%;
    top: 0;
    background: rgba(29, 140, 255, 0.8);
    padding-top: 24px;
    opacity: 0;
}

.option li .mask p:nth-child(2) {
    border: 1px solid #ffffff;
    width: 1px;
    height: 11px;
    display: -webkit-inline-box;
}

.option li .mask p {
    font-size: 22px;
    color: #ffffff;
}

.option li .mask:hover {
    opacity: 1;
}

.option li span {
    display: block;
    font-size: 20px;
    color: #000000;
    padding-top: 17px;
}

.exhibition-title {
    text-align: center;
    font-size: 40px;
    color: #3ab2e2;
    margin-bottom: 70px;
}

.exhibition {
    width: 1204px;
    margin: 0 auto;
    margin-top: 131px;
}

.exhibition li:nth-child(3n) {
    margin-right: 0;
}

.exhibition li {
    float: left;
    margin-right: 54px;
    margin-bottom: 50px;
}

.exhibition li p {
    text-align: center;
    font-size: 18px;
    color: #4a4a4a;
    padding-top: 26px;
}

.details {
    width: 1204px;
    margin: 0 auto;
}

.details--title {
    font-size: 40px;
    color: #3ab2e2;
    text-align: center;
    margin-bottom: 54px;
}

.details ul {
    width: 529px;
    margin: 0 auto;
}

.details li {
    float: left;
    margin-right: 63px;
}

.details li:nth-child(4) {
    margin-right: 0;
}

.percentage {
    width: 607px !important;
    margin-top: 21px !important;
}

.percentage li {
    width: 150px;
    height: 20px;
    margin-right: 0;
}

.percentage li:nth-child(1) {
    background: #50badf;
    border-radius: 15px 0 0 15px;
}

.percentage li:nth-child(2) {
    background: #5ec699;
}

.percentage li:nth-child(3) {
    background: #a5e01f;
}

.percentage li:nth-child(4) {
    background: #4aa2e2;
    border-radius: 0px 15px 15px 0px;
}

.introduce {
    margin-top: 62px;
}

.introduce-l {
    font-size: 16px;
    color: #4a4a4a;
    width: 552px;
    float: left;
}

.introduce-l p:nth-child(2) {
    line-height: 23px;
}

.introduce-r {
    float: left;
    width: 547px;
    float: left;
    width: 547px;
    margin-left: 105px;
}

.introduce-r-l {
    width: 105px;
    font-size: 16px;
    color: #3ab2e2;
    float: left;
    position: relative;
    padding-top: 8px;
    margin-right: 6px;
}

.introduce-r-r {
    /* background: url("../img/k.png"); */
    width: 436px;
    height: 162px;
    float: left;
    font-size: 16px;
    padding-left: 20px;
    padding-top: 12px;
    line-height: 29px;
    border: 1px solid #979797;
    border-radius: 3px;
}

.sjx {
    position: absolute;
    height: 0px;
    width: 0px;
    border-top: 5px solid transparent;
    border-right: 7px solid black;
    border-bottom: 7px solid transparent;
    right: -6px;
    top: 12px;
}

.sjx:after {
    content: '';
    position: absolute;
    top: -5px;
    left: 1px;
    border-top: 5px solid transparent;
    border-right: 7px solid #eceef3;
    border-bottom: 7px solid transparent;
}

.content {
    margin-top: 80px;
}

.content-l {
    float: left;
    width: 522px;
}

.content-l p:nth-child(1) {
    font-size: 24px;
    color: #4a4a4a;
}

.content-l p:nth-child(2) {
    font-size: 16px;
    color: #4a4a4a;
}

.content-r {
    width: 522px;
    float: left;
    margin-left: 136px;
}

.content-r .template {
    margin-bottom: 30px;
}

.signup {
    width: 1204px;
    margin: 0 auto;
}

.signup h3 {
    text-align: center;
    font-size: 40px;
    color: #3ab2e2;
    font-weight: 600;
}

.signup li {
    float: left;
    font-size: 24px;
    color: #4a4a4a;
}

.signup .list {
    border-bottom: 1px solid #3ab2e2;
}

.signup .list ul {
    width: 442px;
    margin: 0 auto;
    margin-top: 87px;
    margin-bottom: 28px;
}

.signup .list li {
    margin-right: 113px;
    position: relative;
}

.signup .list li:nth-child(3) {
    margin-right: 0;
}

.signup .list .on::before {
    position: absolute;
    content: '';
    top: 39px;
    left: 23px;
    border-left: 14px solid #eceef3;
    border-right: 14px solid transparent;
    border-bottom: 23px solid #3ab2e2;
}

.signup .list .on-f::before {
    position: absolute;
    content: '';
    top: 39px;
    left: 11px;
    border-left: 14px solid #eceef3;
    border-right: 14px solid transparent;
    border-bottom: 23px solid #3ab2e2;
}

.signup .scratch {
    float: left;
    margin-top: 63px;
}

.signup .scratch h3 {
    font-size: 40px;
    color: #4a4a4a;
    width: 400px;
}

.signup .scratch img {
    margin: 30px 0;
}

.signup .scratch a {
    width: 400px;
    height: 60px;
    color: white;
    background: #3ab2e2;
    display: block;
    font-size: 28px;
    line-height: 60px;
    text-align: center;
}

.width__ {
    width: 1102px;
    margin: 0 auto;
}

.list--width {
    width: 618px !important;
}

.list--width li:nth-child(3) {
    margin-right: 113px !important;
}

.list--width li:nth-child(4) {
    margin-right: 0;
}

.signup {
    margin-top: 148px;
}

.marvellous {
    height: 44px;
    background: #e8e8e8;
    font-size: 24px;
    color: #4a4a4a;
    line-height: 44px;
    padding-left: 14px;
    margin-top: 10px;
}

.marvellous-list {
    margin-top: 28px;
}

.marvellous-list li {
    margin-right: 66px;
}

.marvellous-list li:nth-child(4) {
    margin-right: 0;
}

.marvellous-list p {
    font-size: 18px;
    color: #4a4a4a;
    text-align: center;
    padding-top: 17px;
}

.top__ {
    margin-top: 73px;
}

@media screen and (max-width: 375px) {
    .introduce-r-r {
        background: url("/public/dist/img/competition_img/k.png") center;
        width: 369px;
    }
    .top-img {
        display: none;
    }
    .exhibition,
    .details,
    .introduce-l,
    .content-l,
    .signup,
    .width__,
    .list--width {
        width: 363px;
        overflow: hidden;
    }
    .m-p {
        width: 363px;
    }
    .introduce-r {
        margin-left: 0;
        width: 380px;
    }
    .scratch {
        margin-left: 0 !important;
    }
    .option li {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .option li:nth-child(2n) {
        margin-left: 38px;
    }
    .option {
        width: 340px;
        margin: 0 auto;
    }
    .banner-wrap {
        display: none;
        width: 0;
    }
    .m-banner {
        width: 100%;
        height: 566px;
        background: url("/public/dist/img/competition_img/7.png") center center no-repeat;
        background-size: cover;
    }
    .m-list {
        width: 351px;
        margin: 0 auto;
    }
    .percentage li {
        width: 89px;
    }
    .details li {
        margin-right: 10px;
    }
    .percentage li {
        margin-right: 0 !important;
    }
    .content-r {
        margin-left: 0;
    }
    .signup .list li {
        margin-right: 70px;
    }
    .signup .list ul {
        width: 432px;
    }
    .list--width li {
        margin-right: 31px !important;
    }
    .list--width li:nth-child(3) {
        margin-right: 31px !important;
    }
    .content-r {
        width: 373px;
    }
    .nav-input {
        display: none;
    }
}

@media screen and (max-width: 440px) and (min-width: 376px) {
    .top-img {
        display: none;
    }
    .introduce-r-r {
        background: url("/public/dist/img/competition_img/k.png") center;
    }
    .exhibition,
    .details,
    .introduce-l,
    .content-l,
    .signup,
    .width__,
    .list--width {
        width: 402px;
        overflow: hidden;
    }
    .nav-input {
        display: none;
    }
    .marvellous-list {
        width: 250px;
        margin: 0 auto;
        margin-top: 25px;
    }
    .introduce-r {
        margin-left: 0;
        width: 403px;
    }
    .scratch {
        margin-left: 0 !important;
    }
    .option li {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .option li:nth-child(2n) {
        margin-left: 38px;
    }
    .option {
        width: 340px;
        margin: 0 auto;
    }
    .banner-wrap {
        display: none;
        width: 0;
    }
    .m-banner {
        width: 100%;
        height: 566px;
        background: url("/public/dist/img/competition_img/7.png") center center no-repeat;
        background-size: cover;
    }
    .m-list {
        width: 351px;
        margin: 0 auto;
    }
    .percentage li {
        width: 100px;
    }
    .details li {
        margin-right: 24px;
    }
    .percentage li {
        margin-right: 0 !important;
    }
    .content-r {
        margin-left: 0;
    }
    .signup .list li {
        margin-right: 92px;
    }
    .signup .list ul {
        width: 432px;
    }
    .list--width li {
        margin-right: 31px !important;
    }
    .list--width li:nth-child(3) {
        margin-right: 31px !important;
    }
}

/*# sourceMappingURL=main.css.map */