.move-touch {
    -webkit-overflow-scrolling: touch
}

.auto-center ul li .pict {
    display: table;
    width: 100%;
    text-align: center
}

.auto-center ul li .pict i {
    vertical-align: middle;
    display: table-cell
}

.vague {
    -webkit-filter: blur(2px);
    transition: .3s;
}

.rogate {
    transition: .3s;
}

.rogate:hover {
    transform: rotate(90deg)
}

.arrow {
    position: relative;
    line-height: 1;
    margin-left: .1rem
}

.arrow:before {
    content: "";
    position: absolute;
    top: -.02rem;
    left: 0;
    width: 0;
    height: 0;
    border-bottom: .08rem solid;
    border-right: .08rem solid transparent;
    border-top: .08rem solid transparent;
    border-left: .08rem solid transparent
}

.arrow:after {
    content: "";
    position: absolute;
    top: .18rem;
    left: 0;
    width: 0;
    height: 0;
    border-top: .08rem solid;
    border-right: .08rem solid transparent;
    border-bottom: .08rem solid transparent;
    border-left: .08rem solid transparent
}

.arrow.one:before {
    display: none
}

.arrow.one:after {
    top: .14rem
}

.border-top:before {
    background: #dadada;
    content: "";
    position: absolute;
    height: 1px;
    transform-origin: 0 0;
    transform: scale(.5, .5);
    width: 200%;
    top: 0;
    left: 0
}

.border-bottom:after {
    background: #dadada;
    content: "";
    position: absolute;
    height: 1px;
    transform-origin: 0 0;
    transform: scale(.5, .5);
    width: 200%;
    bottom: -1px;
    left: 0
}

.flex-slide {
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.flex-slide>* {
    flex-shrink: 0
}

.lines {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.icon-container {
    width:15%;
    height: auto;
}			

.icon-container img {
    width: 100%;
}

@keyframes floating2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating2 {
    animation: floating2 2s ease-in-out infinite;
}

.lines .icon-container:nth-child(1) {
    animation-delay: 0s;
}

.lines .icon-container:nth-child(2) {
    animation-delay: 0.2s;
}

.lines .icon-container:nth-child(3) {
    animation-delay: 0.4s;
}

.lines .icon-container:nth-child(4) {
    animation-delay: 0.6s;
}

.box-space-between {
    display: flex;
    justify-content: space-between
}

.box-space-between>* {
    flex-shrink: 0
}

.touch-state {
    position: relative
}

.touch-state label {
    position: relative;
    background: #fff;
    display: block;
    width: .9rem;
    height: .45rem;
    border: 1px solid #ccc;
    border-radius: .3rem;
    transition: .3s;
}

.touch-state label:after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    width: .41rem;
    height: .41rem;
    background: #fff;
    box-shadow: 0 0 .1rem rgba(0, 0, 0, .4);
    border-radius: 50%;
    transition: .3s;
}

.touch-state input {
    position: absolute;
    z-index: 0;
    opacity: 0;
    left: 45%;
    top: 20%
}

.touch-state input:checked+label {
    background: #47b92c;
    border-color: #47b92c
}

.touch-state input:checked+label:after {
    left: calc(100% - .41rem)
}

.swiper-kanan {
    overflow: hidden !important; 
}

.swiper-kanan .swiper-slide {
    margin-right: 0px !important; 
    margin-left: 0px !important; 
    width: 100% !important; 
}

.swiper-kiri {
    direction: rtl !important; 
    overflow: hidden !important; 
}
.swiper-kiri .swiper-wrapper {
    direction: rtl !important;
}
.swiper-kiri .swiper-slide {
    direction: ltr !important; 
    margin-right: 0px !important; 
    margin-left: 0px !important; 
}

.swiper-slide {
    height: 1.19rem;
    width: 20rem;
    background-repeat: no-repeat;
    background-size: 100% auto; 
}

.game-pg1-atas { background-image: url(../images/pg1.png); }
.game-pg2-atas { background-image: url(../images/pg2.png); }
.game-pp1-atas { background-image: url(../images/pp1.png); }
.game-mix1-atas { background-image: url(../images/mix1.png); }
.game-mix2-atas { background-image: url(../images/mix2.png); }

.game-pg1-bawah { background-image: url(../images/pg1.png); }
.game-pg2-bawah { background-image: url(../images/pg2.png); }
.game-pp1-bawah { background-image: url(../images/pp1.png); }
.game-mix1-bawah { background-image: url(../images/mix1.png); }
.game-mix2-bawah { background-image: url(../images/mix2.png); }

.game-pg1-atas, 
.game-pg2-atas, 
.game-pp1-atas, 
.game-mix1-atas, 
.game-mix2-atas {
    background-position: 0% 0%; 
}

.game-pg1-bawah, 
.game-pg2-bawah, 
.game-pp1-bawah, 
.game-mix1-bawah, 
.game-mix2-bawah {
    background-position: 0% -1.19rem; 
}

.game-mix1-bawah, 
.game-mix2-bawah {
    background-position: 0% -1.2rem;
}

.mohu {
    filter: blur(1px);
}

.fixed-top {
    position: fixed;
    left: 0;
    width: 100%;
    top: 0;
    z-index: 2;
    background: #fff
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    background: #fff
}

.column {
    display: flex
}

.column>* {
    column-count: 1;
    flex-grow: 1;
    flex-shrink: 0;
    text-align: center
}

a,
body,
button,
dd,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
i,
img,
input,
li,
p,
select,
span,
strong,
textarea,
ul {
    margin: 0;
    padding: 0
}

b,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: 400
}

table {
    border-spacing: 0
}

body {
    font-family: "microsoft yahei", Arial;
    font-size: .26rem;
    line-height: 1;
    background-color: #481371;
    -webkit-user-select: none;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

::-webkit-scrollbar {
    width: 0;
    height: 0
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box
}

li {
    list-style-type: none;
    float: left
}

a {
    text-decoration: none;
    color: #333;
    outline: 0
}

img {
    border: none;
    vertical-align: middle
}

em,
i,
var {
    font-style: normal
}

button {
    font-family: "microsoft yahei", Arial;
    outline: 0;
    cursor: pointer;
    font-size: .26rem;
    border: none
}

iframe {
    border: none
}

input,
select,
textarea {
    outline: 0;
    font-family: "microsoft yahei", Arial;
    font-size: .26rem;
    border-radius: 0;
    border: none;
    background: 0 0
}

input:disabled {
    opacity: 1;
    color: #333
}

button,
input[type=button],
input[type=date],
input[type=number],
input[type=password],
input[type=reset],
input[type=submit],
input[type=text],
textarea {
    -webkit-appearance: none;
    border: none;
    background: 0 0
}

textarea {
    resize: none
}

.ico {
    display: inline-block;
    vertical-align: middle
}

.fl {
    float: left
}

.fr {
    float: right
}

.clear {
    clear: both
}

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

.clearfix {
    zoom: 1
}

.hide {
    display: none !important
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none
}

input {
    -webkit-user-select: auto
}

.mobile-wrap {
    position: relative;
    min-height: 100vh;
    width: 100%;
    float: left;
    background: #481371 url(../images/fw1200.jpg) top center no-repeat;
    background-size: 100% auto;
    padding-top: 1.1rem;
    padding-bottom: 1.5rem;
}

body,
html {
    width: 100%;
    height: 100%
}

.sticky-icon a.is-clicked {
    animation: none !important;
    transform: translateX(0) !important;
    transition: transform 0.3s ease-out; 
}

.rounded {
    border-radius: 0.1rem;
}

.w-full {
    width: 100%;
}

.min-h-\[128px\] {
    min-height: 128px;
}

*
 {
    box-sizing: border-box;
}

.sticky-icon {
    position: fixed;
    z-index: 89;
    top: 45%;
    margin-top: -.86rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
}

.sticky-icon a {
    display: flex; 
    justify-content: center; 
    align-items: center;
    width: 0.75rem; 
    height: 0.75rem;
    margin: 0.05rem 0; 
    text-decoration: none;
    border-radius: 0 50px 50px 0; 
    opacity: 1;
    transition: background-color 0.3s;
}

.sticky-icon a.YouTube {
    animation: slideSequence 12s ease-in-out infinite 0s;
    background-color: #ff0000;
}
.YouTube i {
    color: #ff0000;
}

.sticky-icon a.Facebook {
    animation: slideSequence 12s ease-in-out infinite 1.5s;
    background-color: #1877f2;
}
.Facebook i {
    color: #1877f2;
}

.sticky-icon a.WhatsApp {
    animation: slideSequence 12s ease-in-out infinite 3.0s;
    background-color: #25d366;
}
.WhatsApp i {
    color: #25d366;
}

.sticky-icon a.Telegram {
    animation: slideSequence 12s ease-in-out infinite 4.5s;
    background-color: #0088cc;
}
.Telegram i {
    color: #0088cc;
}

.icon-circle {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 0.6rem; 
    height: 0.6rem;
    background-color: #ffffff; 
    border-radius: 50%; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

.sticky-icon a .icon-circle i {
    font-size: 0.4rem;
    line-height: 1;
    transition: transform 0.5s ease;
    transform: rotate(0deg); 
}

.sticky-icon a:hover .icon-circle i {
    transform: rotate(360deg);
}

.sticky-icon a:active .icon-circle i {
    transform: rotate(360deg);
}

.Facebook {
    background-color: #1877f2;
}
.Facebook i {
    color: #1877f2;
}

.YouTube {
    background-color: #ff0000;
}
.YouTube i {
    color: #ff0000;
}

.WhatsApp {
    background-color: #25d366;
}
.WhatsApp i {
    color: #25d366;
}

.Telegram {
    background-color: #0088cc;
}
.Telegram i {
    color: #0088cc;
}

.banner {
    width: 100%;
    position: relative;
    padding: 0 0.1rem;
    margin-top: -3.7rem;
    max-width: 750px;
    overflow: hidden;
}

.banner .chi1 {
    z-index: 2;
    position: relative;
    left: 0.1rem;
}

.banner .chi2 {
    position: absolute;
    z-index: 1;
    top: 3.7rem;
    LEFT: 0.3rem;
    width: 3rem;
}

.banner .chi3 {
    position: absolute;
    bottom: 1.4rem;
    width: 3.8rem;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.banner .chi4 {
    position: absolute;
    bottom: 0.75rem;
    z-index: 4;
    padding: 0 0.1rem;
}

.slider_spaceman {
    position: absolute; 
    height: auto;
    width: auto;
    max-height: 100%;
    left: 65%; 
    width: 16%;
    z-index: 4;
    animation: Up 15s linear infinite;
}

.flip-horizontal {
  transform: scaleX(-1);
}

#spine-animation-canvas {
width: 100%;
height: 100%;
display: block;
}

.banner .chi5 {
    z-index: 2;
    position: relative;
    width: 100%;
    max-width: 2.7rem;
    TOP: 5.5rem;
    left: 4.5rem;
    margin-right: auto;
    text-align: center;
}

.banner .chi5 img,
.banner .chi4 img {
    width: 100%;
}

.banner .chi3 img {
    width: 3.8rem;
}

.banner img {
    max-width: 100%;
}

.service {
    width: 100%;
    position: relative;
    padding: 0 0.3rem;
    margin: 0.2rem auto;
}

.service .chi1 {
    width: 100%;
    position: relative;
    z-index: 5;
}


.service .chi2 {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    bottom: 0.3rem;
    right: 0.47rem;
    z-index: 6;
}

.service .chi5 {
    position: absolute;
    width: 1rem;
    height: 1rem;
    bottom: 0.3rem;
    right: 0.90rem;
    z-index: 3;
}

.service .chi6 {
    position: absolute;
    width: 1rem;
    height: 1rem;
    bottom: 0.3rem;
    right: 2.47rem;
    z-index: 3;
}

.service .chi7 {
    position: absolute;
    width: 1rem;
    height: 1rem;
    bottom: 0.3rem;
    left: 2.47rem;
    z-index: 3;
}

.service .chi8 {
    position: absolute;
    width: 1rem;
    height: 1rem;
    bottom: 0.3rem;
    left: 0.90rem;
    z-index: 3;
}

.service .chi9 {
    position: absolute;
    width: 6rem;
    height: 6rem;
    top: 80%; 
    left: 52%;
    transform: translate(-50%, -50%); 
    z-index: 3;
}

.service img {
    max-width: 100%;
}

.service .chi1 img {
    max-width: 100%;
}

.service .chi9 img {
    animation: flag-wave 4s ease-in-out infinite;
}

.config {
    position: relative;
    padding: 0.3rem 0.6rem 1.1rem;
    margin: 0rem;
    align-items: center;
    width: 100vw;
    max-width: 750px;
}

.config .chi2 {
    padding: 1rem 0 0 0;
}

.bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: -1rem;
}

.chi2 {
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.chi2 img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0;
}

@media (
    max-width: 750px) {
.bottom 
    {
        padding: -1px;
    }
}

.config img {
    max-width: 100%;
}

.ga {
    padding: 0.34rem 0.3rem 0.34rem 0.3rem;
}

.ga .chi1 {
    padding: 0 0.7rem;
}

.ga .chi2 {
    padding: 0.2rem 0;
}

.ga .chi3 {
    padding: 0.5rem 0 0.15rem;
}

.ga img {
    max-width: 100%;
}

.rms {
    padding: 0 0.25rem 0.52rem 0.25rem;
}

.rms .chi1 {
    padding: 0.39rem 0.7rem;
}

.ga .chi15 {
    width: 100%;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0rem; 
    display: flex;
    justify-content: center;
}

.ga .chi15 video {
    width: 100%; 
    height: auto;
    max-width: 100%; 
}

.rms .chi2 {
    background-image: url(../images/GJHTNFL965EFVFDF.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.rms .chi3 {
    width: 33%;
    height: 2.6rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rms .chi3 img {
    width: 1.53rem;
    margin: auto auto 0.15rem auto;
}

.rms img {
    max-width: 100%;
}

.lines1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    z-index: 4;
    width: 100%;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.lines {
    padding: 0 0.2rem 0.3rem 0.2rem;
}

.lines .conts .list {
    display: flex;
    flex-direction: column;
}

.lines .conts .list .item {
    margin: 0.12rem 0;
    display: flex;
    flex-direction: row;
    height: 0.73rem;
    line-height: 0.67rem;
    font-size: 0.28rem;
    color: #ffffff;
}

.lines .conts .list .item .text {
    display: flex;
    justify-content: space-between;
    margin: auto 0.1rem auto 0rem;
    border-radius: 1rem;
    background-color: #491371;
    border: solid 0.03rem #fee8a6;
    flex: 1;
}

.lines .conts .list .item .ms {
    width: 1.66rem;
    text-align: center;
    border-radius: 1rem;
    background-image: linear-gradient(90deg,
            #481371 0%,
            #481371 100%),
        linear-gradient(#481371,
            #17002c);
    border-right: solid 0.03rem #fee8a6;
    color: #fee8a6;
}

.lines .conts .list .item .txts {
    margin: auto 0.5rem;
    flex: 1;
    text-align: center;
}

.lines .conts .list .item .btns {
    width: 2.16rem;
    height: 0.73rem;
    background: url(../images/hgrrfbcbxfzsvdsrg.png) left no-repeat;
    background-size: contain;
}

.fix-menu {
    width: 7.5rem;
    height: 2rem;
    background: url(../images/LADHGPOIXNV.png) left no-repeat;
    background-size: 100% 100%;
    position: fixed;
    bottom: -0.1rem;
    z-index: 98;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.2rem;
}

.fix-menu .chi1 {
    transform: translateY(6px);
}

.fix-menu .chi2 {
    transform: translateY(6px);
}

.fix-menu .chi3 {
    transform: translateY(6px);
}

.fix-menu img {
    max-width: 100%
}

.head {
    width: 7.5rem;
    padding: 0 .22rem;
    height: 1.08rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(../images/RTH6KU3FGFF23G.png);
    background-size: 100% auto;
    position: fixed;
    left: 50%;
    z-index: 98;
    margin-left: -3.75rem;
    top: 0
}

.head:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .03rem;
    background-image: linear-gradient(to right, #e0d5a5, #8e7358, #e0d5a5, #8e7358, #e0d5a5, #8e7358)
}


.fix-service {
    position: fixed;
    right: 50%;
    margin-right: -3.75rem;
    top: 50%;
    margin-top: -.96rem;
    z-index: 88
}

.fix-service img {
    width: 1.24rem
}

.mask {
    position: absolute;
    top: 0;
    width: 100%;
    padding-top: 1.08rem;
    background-color: #3b33455c;
    z-index: 100;
    overflow: scroll;
    display: none;
}

.mask .chi1 {
    background-color: #000;
    width: 100%;
    height: 1.1rem;
}

.mask .chi1 img {
    float: right;
    width: 1rem;
    padding: 0.3rem 0.3rem 0.1rem 0;
}

.mask img {
    max-width: 100%;
}

.border-animation {
    width: 5.5rem;
    height: 1.8rem;
    margin: auto;
    position: relative;
    overflow: hidden;
    max-width: 100%;
    text-align: center;
    animation: zoom25 2s infinite;
}

.border-animation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24.98rem; 
    background-image: url(../images/spritesheet.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% 26.82rem;
    animation: border-translate 1.5s steps(1, end) infinite;
}

@keyframes border-translate {
    0%      { transform: translateY(-0.1308rem); }
    6.67%   { transform: translateY(-1.896rem); }
    13.33%  { transform: translateY(-3.663rem); }
    20%     { transform: translateY(-5.429rem); }
    26.67%  { transform: translateY(-7.195rem); }
    33.33%  { transform: translateY(-8.961rem); }
    40%     { transform: translateY(-10.741rem); }
    46.67%  { transform: translateY(-12.506rem); }
    53.33%  { transform: translateY(-14.272rem); }
    60%     { transform: translateY(-16.052rem); }
    66.67%  { transform: translateY(-17.818rem); }
    73.33%  { transform: translateY(-19.598rem); }
    80%     { transform: translateY(-21.364rem); }
    86.67%  { transform: translateY(-23.143rem); }
    100%    { transform: translateY(-24.909rem); }
}

@keyframes zoom25 {
    0%, 100% {
        transform: scale(0.95);
    }
    25% { 
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.95);
    }
    75% { 
        transform: scale(1.1);
    }
}

@keyframes slideSequence {
    0% {
        transform: translateX(-0.4rem); 
    }
    10% {
        transform: translateX(-0.4rem); 
    }
    30% {
        transform: translateX(0rem); 
    }
    70% {
        transform: translateX(0rem); 
    }
    90% {
        transform: translateX(-0.4rem);
    }
    100% {
        transform: translateX(-0.4rem);
    }
}

@keyframes Up {
    0% {
        bottom: 58%;
        opacity: 0;
        transform: scaleX(-1);
    }
    10% {
        opacity: 1;
        transform: scaleX(-1);
    }
    90% {
        opacity: 1;
        transform: scaleX(-1);
    }
    100% {
        bottom: 96%;
        opacity: 0;
        transform: scaleX(-1);
    }
}

@keyframes flag-wave {
    0% {
        transform: perspective(300px) rotateY(0deg);
    }
    50% {
        transform: perspective(300px) rotateY(10deg);
    }
    100% {
        transform: perspective(300px) rotateY(0deg);
    }
}

@keyframes zoom80 {
    0%, 100% {
        transform: scale(1.05);
    }

    50% {
        transform: scale3d(.95, .95, .95);
    }
}

@keyframes zoom90 {
    0%, 100% {
        transform: scale(1.15);
    }

    50% {
        transform: scale3d(1, 1, 1);
    }
}

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

    50% {
        transform: scale3d(.95, .95, .95);
    }
}

@keyframes floating {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-30px);
    }

    40% {
        transform: translateX(15px);
    }

    60% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}


@keyframes bzoom {
    0%, 100% {
        transform: scale(0.95);
    }

    50% {
        transform: scale(1.05);
    }
}

.bzoom {
    animation: bzoom 2s infinite;
    margin-bottom: -0.3rem;
}

.zoom80 {
    animation: zoom80 1s linear infinite;
}

.zoom90 {
    animation: zoom90 1.5s linear infinite;
}

.zoom95 {
    animation: zoom95 3s linear infinite;
}

.floating {
    animation: floating 1.5s ease-in-out infinite;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(+2px, 0, 0);
    }

    30%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(+4px, 0, 0);
    }

    50% {
        transform: translate3d(-4px, 0, 0);
    }
}

.shake {
    animation: shake 2s infinite;
}


@keyframes shake1 {
    10% {
        transform: rotate(8deg);
    }

    20% {
        transform: rotate(-8deg);
    }

    30% {
        transform: rotate(4deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50%, 100% {
        transform: rotate(0deg);
    }
}

.shake1 {
    display: inline-block;
    animation: shake1 1s 0.15s linear infinite;
    margin-bottom: -0.3rem;
}

@keyframes floating2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.3rem);
    }

    100% {
        transform: translateY(0);
    }
}


.floating2 {
    animation: floating2 1.5s ease-in-out infinite;
}

@keyframes sloating1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.sloating1 {
    display: flex;
    width: 500%;
    animation: sloating1 25s linear infinite;
    white-space: nowrap;
}

.rms1 {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.shi3 {
    width: 30%;
    flex-shrink: 0;
    padding: 0 5px;
    box-sizing: border-box;
}