/* SECTION 1 */
.gb-bound-sc-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background: url('../../images/event/boundtothegunnew/EN/Section1/bg.jpg') center center / cover no-repeat;
    padding-bottom: 7%;

    max-width: 100vw;
    overflow: hidden;
}

.gb-bound-sc-1-logo {
    display: block;
    max-width: 362px;
    width: 19%;
}

.gb-bound-sc-1-title {
    display: block;
    max-width: 933px;
    width: 49%;
}

.gb-bound-sc-1-schedule {
    display: block;
    max-width: 648px;
    width: 34%;
    margin-top: 2%;
}

.gb-bound-sc-1-desc {
    display: block;
    max-width: 610px;
    width: 32%;
    margin-top: 1.5%;
    margin-bottom: 1%;
}

.gb-bound-sc-1-buttons {
    display: flex;
    font-size: 1.3vw;
    gap: 1.6vw;
    font-family: 'Anton Regular', 'Calibri';
    text-shadow: 0 0 6px black;
    color: #ffffff;
    margin-top: 0.6vw;
}

.gb-bound-sc-1-login-btn {
    background: url('../../images/event/conquer-2/Section2/btn-login.png') center center / 100% 100% no-repeat;
    padding: 0 5vw;
}

.gb-bound-sc-1-logout-btn {
    background: url('../../images/event/conquer-2/Section2/btn-logout.png') center center / 100% 100% no-repeat;
    padding: 0 5vw;
}

.gb-bound-sc-1-update-progress {
    background: url('../../images/event/boundtothegun/Section2/btn-update.png') center center / 100% 100% no-repeat;
    word-break: break-all;
    padding: 0 5vw;
    padding: 1vw 3vw;
}

.gb-bound-sc-1-update-rules {
    background: url('../../images/event/rtg-3/Section2/btn-claim.png') center center / 100% 100% no-repeat;
    padding: 0 5.5vw;
}

.gb-bound-sc-1-floating {
    display: block;
    max-width: 186px;
    width: 10vw;
    position: absolute;
    top: 3%;
    left: 2%;
}

@media(min-width: 1920px) {
    .gb-bound-sc-1-buttons {
        font-size: 1.5rem;
        gap: 2rem;
    }

    .gb-bound-sc-1-login-btn {
        padding: 0 5rem;
    }

    .gb-bound-sc-1-update-progress {
        padding: 1rem 4rem;
    }

    .gb-bound-sc-1-update-rules {
        padding: 0 6rem;
    }
}

@media(max-width: 768px) {
    .gb-bound-sc-1-buttons {
        flex-direction: column;
        font-size: 6.3vw;
    }

    .gb-bound-sc-1-logo {
        width: 46%;
    }

    .gb-bound-sc-1-title {
        width: 93%;
    }

    .gb-bound-sc-1-schedule {
        width: 76%;
    }

    .gb-bound-sc-1-desc {
        width: 90%;
    }

    .gb-bound-sc-1-floating {
        width: 27vw;
    }

    .gb-bound-sc-1-login-btn {
        padding: 0 5vw;
        min-height: 21vw;
        min-width: 58vw;
    }

    .gb-bound-sc-1-update-progress {
        padding: 0 5vw;
        padding: 4vw 3vw;
    }

    .gb-bound-sc-1-update-rules {
        padding: 4vw 5.5vw;
        min-height: 22vw;
    }

    .gb-bound-sc-1 {
        gap: 5vw;
    }
}
/* SECTION 1 END */

/* SECTION 2 */
.gb-bound-sc-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background: url('../../images/event/boundtothegunnew/EN/Section2/bg.jpg') top center / cover no-repeat;
    padding-top: 7%;
    padding-bottom: 7%;

    max-width: 100vw;
    overflow: hidden;
}

.gb-bound-sc-2-rewards > div {
    position: relative;
    background: url(../../images/event/boundtothegunnew/EN/Section2/box.png) center center / 100% 100% no-repeat;
    width: 8vw;
    padding: 1.5vw 1.5vw;
}

.gb-bound-sc-2-rewards > div > img {
    width: 80%;
}

.gb-bound-sc-2-title {
    display: block;
    margin-bottom: 1%;
    max-width: 1050px;
    width: 56%;
}

.gb-bound-sc-2-desc {
    display: block;
    margin-bottom: 6%;
    max-width: 839px;
    width: 44%;
}

.gb-bound-sc-2-rewards {
    gap: 2vw;
    margin-bottom: 9%;
}

.gb-bound-sc-2-cumulative {
    display: block;
    margin-bottom: 3%;
    max-width: 1171px;
    width: 62%;
}

.gb-bound-sc-2-rewards > div > .iterator {
    position: absolute;
    text-align: center;
    top: -42.2%;
    color: white;
    font-family: 'Anton Regular';
    font-size: 1.4vw;
    background: #d0183ce6;
    padding: 0.4vw 0.8vw;
    box-shadow: 0 0 0 2.4px #fb163a;
    border-radius: 4px;
    width: 100%;
}

.gb-bound-sc-2-rewards > div > .item-name {
    position: absolute;
    text-align: center;
    bottom: -71%;
    color: white;
    font-family: 'Anton Regular';
    font-size: 1vw;
    background: #d0183ce6;
    padding: 0.4vw 0.8vw;
    box-shadow: 0 0 0 2.4px #fb163a;
    border-radius: 4px;
    min-height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    width: 100%;
}

.gb-bound-sc-2-char {
    position: absolute;
    left: -9%;
    top: 7%;
    width: 26%;
}

@media(min-width: 1920px) {
    .gb-bound-sc-2-rewards > div > .iterator {
        font-size: 1.4rem;
    }

    .gb-bound-sc-2-rewards > div > .item-name {
        font-size: 1.2rem;
    }
}

@media(max-width: 768px) {
    .gb-bound-sc-2-title {
        width: 94%;
    }

    .gb-bound-sc-2-desc {
        margin-top: 5%;
        margin-bottom: 12%;
        width: 94%;
    }

    .gb-bound-sc-2-char {
        display: none;
    }

    .gb-bound-sc-2-rewards {
        width: 100%;
        justify-content: center;
        row-gap: 47vw;
        column-gap: 7vw;
        margin-top: 7vw;
    }

    .gb-bound-sc-2-rewards > div {
        aspect-ratio: 1 / 1;
        flex: 0 0 40%;
        max-width: 40%;
    }

    .gb-bound-sc-2-rewards > div > .iterator {
        top: -28.2%;
        font-size: 6.4vw;
    }

    .gb-bound-sc-2-rewards > div > .item-name {
        bottom: -50%;
        font-size: 6vw;
        height: 18vw;
    }

    .gb-bound-sc-2-cumulative {
        margin-top: 18%;
        width: 90%;
    }
}
/* SECTION 2 END */

/* SECTION 3 */
.gb-bound-sc-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background: url('../../images/event/boundtothegunnew/EN/Section3/bg.jpg') top center / cover no-repeat;
    padding-top: 7%;
    padding-bottom: 7%;

    max-width: 100vw;
    overflow: hidden;
}

.gb-bound-sc-3-reward {
    position: relative;
    background: url(../../images/event/boundtothegunnew/EN/Section3/reward.png) center center / 100% 100% no-repeat;
    height: 14vw;
    width: 13vw;
}

.gb-bound-sc-3-reward > img {
    display: block;
    width: 5.5vw;
    margin-left: -14%;
}

.gb-bound-sc-3-reward-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.gb-bound-sc-3-reward-row {
    margin-top: 2vw;
    row-gap: 2vw;
    column-gap: 5vw;
}

.gb-bound-sc-3-title {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 865px;
    width: 46%;
}

.gb-bound-sc-3-desc {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 870px;
    width: 46%;
    margin-top: 2%;
}

.gb-bound-sc-3-gp-count-container > img {
    position: absolute;
    display: block;
    max-width: 182px;
    width: 15vw;
    margin-top: -3%;
}

.gb-bound-sc-3-gp-count {
    margin-top: 40%;
}

.gb-bound-sc-3-gp-count img {
    /* background: url('../../images/event/boundtothegunnew/EN/Section3/total_gp_frame.png') center center / 100% 100% no-repeat; */
    width: 10vw;
    height: 3vw;
    justify-content: center;
    display: flex;
    align-items: center;
    max-width: 192px;
}

.gb-bound-sc-3-gp-count span {
    font-family: 'Anton Regular';
    font-size: 1.7vw;
    position: absolute;
    top: 48.1%;
    left: 50%;
    transform: translate(-50%, -50%);
    word-break: keep-all;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.gb-bound-sc-3-char {
    position: absolute;
    z-index: 1;
    top: 5%;
    right: -13%;
    max-width: 790px;
    width: 30%;
}

.gb-bound-sc-3-reward > .gb-bound-sc-3-reward-goal {
    position: absolute;
    top: 4.5%;
    left: 44%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Anton Regular';
    font-style: italic;
    font-size: 1.4vw;
    color: #fff;
}

.gb-bound-sc-3-reward > .gb-bound-sc-3-reward-name {
    position: absolute;
    bottom: 3%;
    position: absolute;
    left: 13.7%;
    font-family: 'Anton Regular';
    font-style: italic;
    font-size: 1vw;
    color: #fff;
    text-transform: uppercase;
}

.gb-bound-sc-3-gp-count-container.mobile {
    display: none !important;
}

@media(min-width: 1920px) {
    .gb-bound-sc-3-reward {
        max-width: 250px;
        max-height: 269px;
    }

    .gb-bound-sc-3-reward > .gb-bound-sc-3-reward-goal {
        font-size: 1.7rem;
    }

    .gb-bound-sc-3-reward > .gb-bound-sc-3-reward-name {
        font-size: 1.2rem;
    }

    .gb-bound-sc-3-gp-count span {
        font-size: 2.2rem;
    }
}

@media(max-width: 768px) {
    .gb-bound-sc-3-title {
        width: 90%;
    }

    .gb-bound-sc-3-desc {
        width: 90%;
    }

    .gb-bound-sc-3-reward {
        height: 30vw;
        width: 27vw;
    }

    .gb-bound-sc-3-reward > .gb-bound-sc-3-reward-goal {
        font-size: 3vw;
    }

    .gb-bound-sc-3-reward > .gb-bound-sc-3-reward-name {
        font-size: 2.1vw;
    }

    .gb-bound-sc-3-reward > img {
        width: 14.5vw;
    }

    .gb-bound-sc-3-gp-count-container {
        display: none !important;
    }

    .gb-bound-sc-3-gp-count-container.mobile {
        display: flex !important;
    }

    .gb-bound-sc-3-gp-count-container > img {
        width: 43vw;
        margin-top: -12%;
    }

    .gb-bound-sc-3-gp-count img {
        width: 38vw;
        height: 14vw;
    }

    .gb-bound-sc-3-gp-count span {
        font-size: 6.7vw;
        top: 48.1%;
        left: 50%;
    }

    .gb-bound-sc-3 {
        padding-top: 10%;
        padding-bottom: 10%;
        gap: 3vw;
    }

    .gb-bound-sc-3-char {
        display: none;
    }
}
/* SECTION 3 END */

/* SECTION 4 */
.gb-bound-sc-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background: url('../../images/event/boundtothegunnew/EN/Section4/bg.jpg') top center / cover no-repeat;
    padding-top: 7%;
    padding-bottom: 7%;

    max-width: 100vw;
    overflow: hidden;
    gap: 1.3vw;
}

.gb-bound-sc-4-gp-counter-container > img {
    display: block;
    max-width: 192px;
    width: 10vw;
    height: 3vw;
}

.gb-bound-sc-4-gp-counter-container > span {
    position: absolute;
    font-family: 'Anton Regular';
    font-size: 1.7vw;
    top: 48.1%;
    left: 50%;
    transform: translate(-50%, -50%);
    word-break: keep-all;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.gb-bound-sc-4-gp-counter > img {
    position: relative;
    display: block;
    max-width: 182px;
    width: 15vw;
    margin-bottom: 13%;
}

.gb-bound-sc-4-separator {
    display: block;
    max-width: 25px;
    width: 1.3vw;
}

.gb-bound-sc-4-gp-container {
    gap: 14%;
}

.gb-bound-sc-4-reward-container {
    background: url(../../images/event/boundtothegunnew/EN/Section4/reward-frame.png) top center / cover no-repeat;
    width: 7vw;
    height: 7vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.1vw;
}

.gb-bound-sc-4-rewards-container {
    gap: 2vw;
}

.gb-bound-sc-4-reward-container > img {
    display: block;
    width: 100%;
}

.gb-bound-sc-4-title {
    display: block;
    max-width: 724px;
    width: 39%;
}

.gb-bound-sc-4-rewards {
    display: block;
    max-width: 305px;
    width: 16%;
}

.gb-bound-sc-4-reward-banner {
    display: block;
    max-width: 1049px;
    width: 56%;
    margin-top: 6%;
}

.gb-bound-sc-4-desc {
    display: block;
    max-width: 1028px;
    width: 54%;
}

.gb-bound-sc-4-reward-container .item-name {
    position: absolute;
    text-align: center;
    bottom: -71%;
    color: white;
    font-family: 'Anton Regular';
    font-size: 1vw;
    background: #d0183ce6;
    padding: 0.4vw 0.8vw;
    box-shadow: 0 0 0 2.4px #fb163a;
    border-radius: 4px;
    min-height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    width: 100%;
}

@media(min-width: 1920px) {
    .gb-bound-sc-4-gp-counter-container > span {
        font-size: 2.1rem;
    }
}

@media(max-width: 768px) {
    .gb-bound-sc-4-title {
        width: 90%;
    }

    .gb-bound-sc-4-desc {
        width: 92%;
        margin-top: 3vw;
        margin-bottom: 3vw;
    }

    .gb-bound-sc-4-desc {
        width: 92%;
        margin-top: 3vw;
        margin-bottom: 3vw;
    }

    .gb-bound-sc-4-gp-counter > img {
        width: 29vw;
    }

    .gb-bound-sc-4-gp-counter-container > span {
        font-size: 4.7vw;
    }

    .gb-bound-sc-4-title {
        width: 90%;
    }

    .gb-bound-sc-4-gp-counter-container > img {
        width: 32vw;
        height: 11vw;
    }

    .gb-bound-sc-4-separator {
        width: 4.3vw;
    }

    .gb-bound-sc-4-rewards {
        margin-top: 5%;
        width: 50%;
    }

    .gb-bound-sc-4-rewards-container {
        flex-wrap: wrap;
        width: 90%;
        row-gap: 33vw;
    }

    .gb-bound-sc-4-reward-container {
        flex: 0 0 45%;
        max-width: 50%;
        height: 41vw;
    }

    .gb-bound-sc-4-reward-container {
        background: url(../../images/event/boundtothegunnew/EN/Section4/reward-frame.png) top center / 100% 100% no-repeat;
    }

    .gb-bound-sc-4-reward-container > img {
        width: 67%;
    }

    .gb-bound-sc-4 {
        gap: 2.3vw;
    }

    .gb-bound-sc-4-reward-banner {
        margin-top: 32%;
        width: 90%;
    }

    .gb-bound-sc-4-reward-container .item-name {
        bottom: -65%;
        font-size: 7vw;
        height: 24vw;
    }
}
/* END SECTION 4 */

