.container {
    max-width: 2250px;
    overflow-x: hidden;
    overflow-y: auto;
    background-image: url("images/bg.jpg");
    position: relative;
    margin: 0 auto;
}

.logo {
    margin-top: 6.800vw;
    margin-left: 8.000vw;
}

.logo img {
    width: 24.267vw;
}

.title {
    text-align: right;
    margin-top: 11.600vw;
    margin-right: 1.867vw;
}

.title img {
    width: 48.800vw;
}

.introduction {
    margin-top: 1.511vw;
    margin-left: 7.733vw;
    display: flex;
}

.introduction-color-block {
    width: 1.778vw;
    background: #CC993D;
}

.introduction-content {
    width: 67.067vw;
    padding: 4.800vw 9.644vw 4.444vw 5.733vw;
    font-size: 3.200vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 4.533vw;
}

.introduction-content > span {
    color: #CC993D;
    font-size: 3.467vw;
}

.rule {
    margin-top: 10.800vw;
    margin-left: 7.867vw;
    margin-right: 7.956vw;
}

.rule > .rule-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5.333vw;
}

.rule > .rule-title > .left {
    display: flex;
    align-items: center;
    font-size: 5.333vw;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 3.200vw;
}

.rule > .rule-title > .left > .color-block {
    width: 1.733vw;
    height: 2.800vw;
    background: #CC993D;
    margin-right: 1.689vw;
}

.rule > .rule-title > .right {
    font-size: 3.333vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 3.200vw;
    opacity: 0.6;
    margin-right: 0.800vw;
}

.rule-content {
    background: #2D2D2D;
    border: 0.089vw solid #4C4C4C;
    opacity: 0.85;
    border-radius: 1.111vw;
}

.rule-content > div {
    padding: 5.644vw 7.067vw 0;
}

.rule-content > div > .content {
    font-size: 3.200vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 4.533vw;
    margin-bottom: 7.733vw;
}

.rule-content > div > .content > span {
    color: #CC993D;
    /*font-family: OPPOSans-R;*/
}

.rule-content > div > .reward > div {
    display: flex;
    align-items: center;
    font-size: 2.933vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 3.200vw;
}

.rule-content > div > .reward > div > div {
    margin-left: 7.511vw;
}

.rule-content > div > .reward > div > div span {
    color: #CC993D;
}

.rule-content > div > .reward > hr {
    height: 0.267vw;
    border: none;
    border-top: 0.089vw dotted #FFFFFF;
    opacity: 0.8;
    margin: 4.533vw 1.378vw 4.044vw 0.311vw;
}

.rule-content > div > .tip {
    margin-top: 7.867vw;
    margin-bottom: 6.267vw;
    margin-right: 2.711vw;
    font-size: 3.200vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 4.533vw;
}

.rule-chair {
    background: #2D2D2D;
    border: 0.267vw solid #4C4C4C;
    border-radius: 1.333vw;
    padding: 2.933vw 2.933vw 1.867vw 2.578vw !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5.333vw;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 5.600vw 4.711vw 6.800vw;
}

.rule-chair img {
    width: 52.800vw;
}

.rule-chair > div {
    writing-mode: vertical-lr;
}

.sign-up {
    margin: 12.667vw 8.000vw 0;
}

.sign-up > .sign-up-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sign-up > .sign-up-title > .left {
    display: flex;
    align-items: center;
    font-size: 4.800vw;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 3.200vw;
}

.sign-up > .sign-up-title > .left > .color-block {
    width: 1.733vw;
    height: 2.800vw;
    background: #CC993D;
    margin-right: 1.511vw;
}

.sign-up > .sign-up-title > .right {
    font-size: 3.333vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 3.200vw;
    opacity: 0.6;
}

.sign-up > .sign-up-form {
    margin-top: 5.733vw;
    background: #2D2D2D;
    border: 0.267vw solid #4C4C4C;
    border-radius: 1.333vw;
    padding: 6.578vw 5.067vw 6.400vw 3.733vw;
}

.sign-up > .sign-up-form > div {
    text-align: center;
}

.sign-up > .sign-up-form .sign-up-form-label {
    margin-bottom: 2.267vw;
    text-align: left;
    font-size: 3.200vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 4.000vw;
}

.sign-up > .sign-up-form .sign-up-form-label:after {
    color: #FF0101;
    content: "*";
}

.sign-up > .sign-up-form .sign-up-form-input {
    background: #FFFFFF;
    border-radius: 1.067vw;
    padding: 3.067vw 0 3.244vw 0.933vw;
    font-size: 3.200vw;
    font-weight: 400;
    line-height: 4.000vw;
    width: 100%;
}

.sign-up > .sign-up-form .sign-up-button {
    height: 9.333vw;
    background: #CC993D;
    border-radius: 1.067vw;
    width: 100%;
    font-size: 3.200vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 4.000vw;
    padding: 0;
    border: none;
}

.warning-tip {
    font-size: 1.867vw;
    font-weight: 300;
    color: #FFFFFF;
    line-height: 3.200vw;
    text-align: right;
    margin-top: 2.178vw;
    margin-right: 8.356vw;
}

.footer {
    margin-top: 13.778vw;
    margin-bottom: 25.333vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-code {
    width: 21.467vw;
    background: #FFFFFF;
    border-radius: 1.067vw;
}

.footer-left {
    margin-right: 3.689vw;
}

.footer-tip {
    font-size: 4.000vw;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 4.000vw;
    margin-bottom: 2.444vw;
}

.triangle {
    width: 9.733vw;
}