/* GLOBAL */
body {
    background-color: #24120a;
    overflow-x: hidden;
}

#fireflyCanvas {
    position: absolute;
    pointer-events: none;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    max-height: 100vh;
}

.gb-web-footer {
    border-top: 0.2vw #8d2801 solid;
    background: #24120a;
}

.gb-web-footer-content {
    border-top: 0.2vw #bb3b0a solid;
}

.detail-title {
    text-align: center;
    font-size: 2.5rem;
    color: orange;
    text-shadow: 3px 5px #1d1300;
}

#detailModal1, #detailModal2, #detailModal3, #detailModal4 {
    text-transform: uppercase;
    font-family: 'Anton Regular';
    font-size: 1.4rem;
    text-align: left;
}

/* FLOATING */
.gb-bullet-floating-login {
    display: none;
    opacity: 0;
    position: fixed;
    top: 2%;
    left: 1%;
    z-index: 3;
    width: 12%;
    transition: opacity 0.4s ease;
}

.gb-bullet-floating-login.visible {
    display: block !important;
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .gb-bullet-floating-login,
    .gb-bullet-floating-login.visible {
        display: none !important;
    }
}
/* END FLOATING */
/* END GLOBAL */

/* SECTION 1 */
.gb-168-container {
    position: relative;
}

.gb-168-sc-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(../../images/event/168hours/EN/sc1/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;

    gap: 1.3vw;
    padding: 7vw 0;
    padding-top: 3vw;
}

.gb-168-sc-1-logo {
    display: block;
    width: 13vw;
}

.gb-168-sc-1-schedule {
    display: block;
    width: 36vw;
}

.gb-168-sc-1-title {
    display: block;
    width: 44vw;
}

.gb-168-sc-1-desc {
    display: block;
    width: 39vw;
}

.gb-solar-sc-1-buttons {
    display: flex;
    justify-content: center;
    gap: 2vw;
}

.gb-solar-sc-1-buttons > a > img {
    display: block;
    width: 15vw;
}

.gb-168-sc-1-char-left {
    position: absolute;
    display: block;
    left: 0;
    width: 28vw;
}

.gb-168-sc-1-char-right {
    position: absolute;
    display: block;
    right: 0;
    width: 29vw;
}

.gb-168-sc-1-title-mobile {
    display: none;
}

.gb-bullet-sc-1-floating {
    position: absolute;
    left: 2%;
    top: 1%;
    width: 12vw;
    z-index: 1;
}

@media(max-width: 768px) {
    .gb-168-sc-1-title {
        display: none;
    }

    .gb-168-sc-1-title-mobile {
        position: relative;
        display: block;
        width: 90vw;
        z-index: 2;
    }

    .gb-168-sc-1-logo {
        width: 37vw;
    }

    .gb-168-sc-1-schedule {
        position: relative;
        width: 95vw;
        z-index: 2;
    }

    .gb-168-sc-1-desc {
        position: relative;
        width: 90vw;
        z-index: 2;
    }

    .gb-solar-sc-1-buttons > a > img {
        width: 53vw;
    }

    .gb-solar-sc-1-buttons {
        flex-direction: column;
        gap: 3vw;
    }

    .gb-168-sc-1 {
        background: url(../../images/event/168hours/EN/sc1/bg-mobile.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        gap: 7.3vw;
        padding: 11vw 0;
        padding-top: 3vw;
    }

    .gb-168-sc-1-char-left,
    .gb-168-sc-1-char-right {
        display: none;
    }

    .gb-bullet-sc-1-floating {
        width: 28vw;
    }
}
/* END SECTION 1 */

/* SECTION 2 */
.gb-168-sc-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(../../images/event/168hours/EN/sc2/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;

    gap: 1.3vw;
    padding: 7vw 0;
}

.gb-168-sc-2-detail-1 {
    display: block;
    width: 13vw;
}

.gb-168-sc-2-title {
    display: block;
    width: 39vw;
}

.gb-168-sc-2-desc-1 {
    display: block;
    width: 22vw;
}

.gb-168-sc-2-reward-container {
    position: relative;
}

.gb-168-sc-2-reward {
    display: block;
    width: 49vw;
}

.gb-168-sc-2-desc-2 {
    display: block;
    width: 49vw;
}

.gb-168-sc-2-title-mobile {
    display: none;
}

.gb-168-sc-2-reward-mobile {
    display: none;
}

.gb-168-sc-2-desc-2-mobile {
    display: none;
}

.gb-168-sc-2-ach-1 {
    position: absolute;
    display: block;
    left: 8.2%;
    top: 34%;
    width: 6.2vw;
}

.gb-168-sc-2-ach-2 {
    position: absolute;
    display: block;
    left: 32.1%;
    top: 34%;
    width: 6.2vw;
}

.gb-168-sc-2-ach-3 {
    position: absolute;
    display: block;
    left: 55.8%;
    top: 34%;
    width: 6.2vw;
}

.gb-168-sc-2-ach-4 {
    position: absolute;
    display: block;
    left: 79.8%;
    top: 34%;
    width: 6.2vw;
}

@media(max-width: 768px) {
    .gb-168-sc-2-title {
        display: none;
    }

    .gb-168-sc-2-desc-1 {
        width: 70vw;
    }

    .gb-168-sc-2-title-mobile {
        display: block;
        width: 80vw;
    }

    .gb-168-sc-2-reward {
        display: none;
    }

    .gb-168-sc-2-reward-mobile {
        display: block;
        width: 75vw;
    }

    .gb-168-sc-2-desc-2 {
        display: none;
    }

    .gb-168-sc-2-desc-2-mobile {
        display: block;
        width: 89vw;
    }

    .gb-168-sc-2-detail-1 {
        width: 38vw;
    }

    .gb-168-sc-2 {
        background: url(../../images/event/168hours/EN/sc2/bg-mobile.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        gap: 4.3vw;
        padding: 10vw 0;
    }

    .gb-168-sc-2-ach-1 {
        left: 16.2%;
        top: 16%;
        width: 17.2vw;
    }

    .gb-168-sc-2-ach-2 {
        left: 62.2%;
        top: 16%;
        width: 17.2vw;
    }

    .gb-168-sc-2-ach-3 {
        left: 16.2%;
        top: 69%;
        width: 17.2vw;
    }

    .gb-168-sc-2-ach-4 {
        left: 62.2%;
        top: 69%;
        width: 17.2vw;
    }
}
/* END SECTION 2 */

/* SECTION 3 */
.gb-168-sc-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background: url(../../images/event/168hours/EN/sc3/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 7vw 0;
}

.gb-168-sc-3-char {
    display: block;
    width: 38vw;
}

.gb-168-sc-3-content-container {
    position: relative;
    margin-left: -5%;
}

.gb-168-sc-3-content {
    display: block;
    width: 53vw;
}

.gb-168-sc-3-detail-2 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -64%);
    width: 13.9vw;
}

.gb-168-sc-3-20x-good-shot {
    position: absolute;
    color: white;
    top: 23%;
    left: 54.5%;
    font-family: 'Anton Regular';
    font-size: 1.6vw;
    text-align: center;
    text-shadow: 0 0 7px red;
    text-transform: uppercase;
}

.gb-168-sc-3-15x-great-shot {
    position: absolute;
    color: white;
    top: 43.8%;
    left: 54.5%;
    font-family: 'Anton Regular';
    font-size: 1.6vw;
    text-align: center;
    text-shadow: 0 0 7px red;
    text-transform: uppercase;
}

.gb-168-sc-3-20x-excellent-shot {
    position: absolute;
    color: white;
    top: 62.2%;
    left: 54.5%;
    font-family: 'Anton Regular';
    font-size: 1.6vw;
    text-align: center;
    text-shadow: 0 0 7px red;
    text-transform: uppercase;
}

@media(max-width: 768px) {
    .gb-168-sc-3 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url(../../images/event/168hours/EN/sc3/bg-mobile.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        padding: 19vw 0;
    }

    .gb-168-sc-3-char {
        order: 2;
        width: 86vw;
        margin-top: -6vw;
    }

    .gb-168-sc-3-content-container {
        order: 1
    }

    .gb-168-sc-3-content {
        width: 106vw;
    }

    .gb-168-sc-3-detail-2 {
        width: 29.9vw;
    }

    .gb-168-sc-3-20x-good-shot {
        font-size: 3.5vw;
    }

    .gb-168-sc-3-15x-great-shot {
        font-size: 3.5vw;
    }

    .gb-168-sc-3-20x-excellent-shot {
        font-size: 3.5vw;
    }
}
/* ENDS SECTION 3 */

/* SECTION 4 */
.gb-168-sc-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url(../../images/event/168hours/EN/sc3/bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 7vw 0;
    gap: 2vw;
}

.gb-168-sc-4-title {
    display: block;
    width: 49vw;
}

.gb-168-sc-4-desc {
    display: block;
    width: 26vw;
}

.gb-168-sc-4-reward-container {
    position: relative;
}

.gb-168-sc-4-reward {
    display: block;
    width: 50vw;
}

.gb-168-sc-4-detail-3 {
    display: block;
    width: 13vw;
}

.gb-168-sc-4-title-mobile {
    display: none;
}

.gb-168-sc-4-reward-mobile {
    display: none;
}

.gb-168-sc-4-1k-dmg {
    position: absolute;
    text-shadow: 0 0 16px black;
    top: 12.2%;
    left: 7.9%;
    color: white;
    font-family: 'Anton Regular';
    font-size: 1.5vw;
    text-align: center;
    text-transform: uppercase;
}

.gb-168-sc-4-2k-dmg {
    position: absolute;
    text-shadow: 0 0 16px black;
    top: 12.2%;
    left: 41.4%;
    color: white;
    font-family: 'Anton Regular';
    font-size: 1.5vw;
    text-align: center;
    text-transform: uppercase;
}

.gb-168-sc-4-nado {
    position: absolute;
    text-shadow: 0 0 16px black;
    top: 12.2%;
    left: 75.5%;
    color: white;
    font-family: 'Anton Regular';
    font-size: 1.5vw;
    text-align: center;
    text-transform: uppercase;
}

.gb-168-sc-4-1k-dmg.BR,
.gb-168-sc-4-1k-dmg.ES {
    left: 8.3%;
}

.gb-168-sc-4-2k-dmg.BR,
.gb-168-sc-4-2k-dmg.ES {
    left: 42%;
}

.gb-168-sc-4-nado.BR,
.gb-168-sc-4-nado.ES {
    left: 76%;
}

.gb-168-sc-4-1k-dmg.ID {
    top: 13.2%;
    left: 9.7%;
}

.gb-168-sc-4-2k-dmg.ID {
    top: 13.2%;
    left: 43.4%;
}

.gb-168-sc-4-nado.ID {
    top: 13.2%;
    left: 77.4%;
}

@media(max-width: 768px) {
    .gb-168-sc-4-title {
        display: none;
    }

    .gb-168-sc-4-title-mobile {
        display: block;
        width: 82vw;
    }

    .gb-168-sc-4-desc {
        width: 67vw;
    }

    .gb-168-sc-4-reward-mobile {
        display: block;
        width: 80vw;
    }

    .gb-168-sc-4-detail-3 {
        width: 40vw;
    }

    .gb-168-sc-4 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url(../../images/event/168hours/EN/sc4/bg-mobile.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        padding: 19vw 0;
        gap: 2vw;
    }

    .gb-168-sc-4-reward {
        display: none;
    }

    .gb-168-sc-4-1k-dmg {
        position: absolute;
        text-shadow: 0 0 16px black;
        top: 6%;
        left: 11.9%;
        color: white;
        font-family: 'Anton Regular';
        font-size: 4.1vw;
        text-align: center;
    }

    .gb-168-sc-4-2k-dmg {
        position: absolute;
        text-shadow: 0 0 16px black;
        top: 6%;
        left: 62.4%;
        color: white;
        font-family: 'Anton Regular';
        font-size: 4.1vw;
        text-align: center;
    }

    .gb-168-sc-4-nado {
        position: absolute;
        text-shadow: 0 0 16px black;
        top: 56.5%;
        left: 37.6%;
        color: white;
        font-family: 'Anton Regular';
        font-size: 4.1vw;
        text-align: center;
        white-space: nowrap;
    }

    .gb-168-sc-4-1k-dmg.BR,
    .gb-168-sc-4-1k-dmg.ES {
        left: 11.4%;
    }

    .gb-168-sc-4-2k-dmg.BR,
    .gb-168-sc-4-2k-dmg.ES {
        left: 62.3%;
    }

    .gb-168-sc-4-nado.BR, 
    .gb-168-sc-4-nado.ES {
        left: 37.3%;
    }

    .gb-168-sc-4-1k-dmg.ID {
        top: 6.2%;
        left: 13.7%;
    }

    .gb-168-sc-4-2k-dmg.ID {
        top: 6.2%;
        left: 64.3%;
    }

    .gb-168-sc-4-nado.ID {
        top: 57.2%;
        left: 39.4%;
    }
}
/* END SECTION 4 */