/********gl********/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: Tahoma, Geneva, Verdana, sans-serif, sans-serif, Helvetica, AppleGothic, "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", 宋体, SimSun, STXihei, "华文细黑";
}

@font-face {
    font-family: 'ROBOTO-BOLD';
    src: url("../fonts/ROBOTO-BOLD.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.mainfonts {
    font-family: 'ROBOTO-BOLD';
}
.gl-body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #000;
}
.gl-sec1-bg {
    background: url(../img/gl-landing/galaxy-bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}
.gl-body .image-box img {
    width: 100%;
}
.gl-main-title {
    width: 90vw;
    margin: 0 auto;
    padding-top: 10vw;
}
    .gl-main-title h3 {
        font-size: 5.8vw;
        font-weight: bold;
        line-height: 1.2em;
        color: #fff;
        font-family: 'ROBOTO-BOLD';
        text-transform: uppercase;
    }
    .gl-main-title h4 {
        font-size: 4.1vw;
        font-weight: bold;
        line-height: 1.2em;
        color: #fff;
        font-family: 'ROBOTO-BOLD';
       /* text-transform: uppercase;*/
    }
.header-box {
    background: linear-gradient(90deg, #000000 20%, transparent 50%);
}

.head-logo {
    display: inline-block;
    padding: 15px;
    width: 380px;
}

    .head-logo img {
        width: 100%;
    }

.base-earth img {
    position: absolute;
    top: -13vw;
    right: -16.5vw;
    width: 55vw;
    z-index: 5;
}
.base-earth .gl-glow {
    position: absolute;
    z-index: 1;
    mix-blend-mode: screen;
    width: 58vw;
    animation: rotationbeat 50s linear infinite;
}
.base-earth .zoominout {
    animation: zoominout 5s ease-out infinite;
}
.footer-sec {

}
    .footer-sec p {
        font-size: .96vw;
        color: #d2d2d2;
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 4%;
    }
/*county*/
.country-box {
}
    .country-box .ph, .dubai, .jap, .sing, .hk, .sey {
        position: absolute;
        z-index: 10;
        text-align: center;
    }
    .country-box img {
       width: 3vw;
    }
    .country-box h5 {
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        font-family: 'ROBOTO-BOLD';
        filter: drop-shadow(2px 4px 0px #001961) drop-shadow(0px -1px 2px #001961);
    }
    .country-box .ph {
        top: 14vw;
        right: 4vw;
    }
    .country-box .dubai {
        top: 5vw;
        right: 31vw;
    }
    .country-box .jap {
        top: 2vw;
        right: 1vw;
    }
    .country-box .sing {
        top: 18vw;
        right: 14vw;
    }
    .country-box .hk {
        top: 9vw;
        right: 10vw;
    }
    .country-box .sey {
        top: 26vw;
        right: 29vw;
    }
/*Animation*/
.aura1 {
    /*box-shadow: 0px 0px 10px 0px red;*/
    animation: escalar 3.5s infinite linear;
}

.aura2 {
    /*box-shadow: 0px 0px 10px 0px ORANGE;*/
    animation: escalar 3s infinite linear;
}

.aura3 {
   /* box-shadow: 0px 0px 10px 0px WHITE;*/
    animation: escalar 2.5s infinite linear;
}

.aura4 {
    box-shadow: 0px 0px 10px 0px yellow;
    animation: escalar 1s infinite linear;
}

.one {
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.two {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
}

.three {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
}

.four {
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.five {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    animation-delay: 3s;
}

.six {
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
}


.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}


@keyframes escalar {
    0% {
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes rotationbeat {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes zoominout{
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(1, 1);
    }
}

/*=== Trigger  ===*/
.countryAnimate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}/*=== Trigger  ===*/
.titleAnimate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/*=== FADE IN  ===*/
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    .footer-sec p {
        font-size: 1.96vw;
    }
        .gl-body .image-box .pc-bg {
        display: none;
    }

    .country-box h5 {
        font-size: 3vw;
    }
    .country-box img {
        width: 6vw;
    }

    .country-box .ph {
        top: 92vw;
        right: 39vw;
    }

    .country-box .dubai {
        top: 79vw;
        right: 86vw;
    }

    .country-box .jap {
        top: 75vw;
        right: 33vw;
    }

    .country-box .sing {
        top: 99vw;
        right: 56vw;
    }

    .country-box .hk {
        top: 86vw;
        right: 49vw;
    }

    .country-box .sey {
        top: 113vw;
        right: 79vw;
    }

    .base-earth img {
        position: absolute;
        top: 50vw;
        right: 6vw;
        width: 90vw;
        z-index: 5;
    }
    .base-earth .gl-glow {
        width: 95vw;
    }
    .gl-main-title {
       text-align: center;
    }

        .gl-main-title h3 {
            font-size: 7.8vw;
        }

        .gl-main-title h4 {
            font-size: 5.1vw;
        }

}

.gl-body .image-box .mobi-bg {
    display: none;
}
@media (max-width: 768px) {

    .head-logo {
        width: 48vw;
    }
}
@media (max-width: 490px) {
    .footer-sec p {
        font-size: 2.2vw;
    }
    .country-box h5 {
        font-size: 3.5vw;
        margin-top: -7px;
    }

    .country-box img {
        width: 7vw;
    }

    .country-box .ph {
        top: 105vw;
        right: 36vw;
    }

    .country-box .dubai {
        top: 89vw;
        right: 84vw;
    }

    .country-box .jap {
        top: 85vw;
        right: 34vw;
    }

    .country-box .sing {
        top: 108vw;
        right: 56vw;
    }

    .country-box .hk {
        top: 96vw;
        right: 48vw;
    }

    .country-box .sey {
        top: 118vw;
        right: 79vw;
    }

    .base-earth img {
        top: 60vw;
    }

}