@import url('https://fonts.googleapis.com/css2?family=Battambang:wght@400&family=Koulen&family=Moulpali&family=Roboto&display=swap');

*{

    margin: 0;

    padding: 0;

}

body {

    background: url(../images/wrapper/ww-min.jpg) fixed center;

    background-image: url(../images/wrapper/ww-min.jpg);

    background-attachment: fixed;

}

header {

    width: 100%;

    height: auto;

    background-image: url(../images/header/bg_cock.jpg);

    background-repeat: no-repeat;

}

nav {

    max-width: 1580px;

    height: 100px;

    background-image: url(../images/header/menu-bg.png);

    margin: 0 auto;

    background-position: center;

    background-size: 100%;

    background-repeat: no-repeat;

    padding-top: 15px;

}

nav .nav-links{

    position: relative;

    max-width: 1380px;

    height: auto;

    margin: 0 auto;

    z-index: 3;

}

nav .nav-links ul {

    display: flex;

    justify-content: center;

    align-items: center;

}

nav .nav-links ul li{

    line-height: 90px;

    list-style: none;

    transition: ease 0.3s;

    padding: 0px 10px;

}

nav .nav-links ul li:hover{

    background-image: linear-gradient(#00fff7, #04353d);

    line-height: 40px;

    border-radius: 10px;

}

nav .nav-links ul li a {

    text-decoration: none;

    color: #fff;

    font-size: 16px;

    font-family: 'Battambang', cursive;

    overflow: hidden;

    z-index: 999;

    text-transform: uppercase;

}

nav .nav-links ul li img {

    position: relative;

    height: 40px;

    top: 15px;

}

nav .nav-links ul li ion-icon {

    position: relative;

    font-size: 25px;

    top: 5px;

}

.nav-links a:hover{

    color: #fff;

}

.checkbtn{

    font-size: 30px;

    color: #fff;

    line-height: 40px;

    float: right;

    cursor: pointer;

    display: none;

    margin-right: 20px;

}

#check{

    display: none;

}

.h-main {

    width: 100%;

    height: auto;

}

.h-main .container {

    max-width: 1680px;

    height: auto;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    margin: 0 auto;

}

.h-main .container .row {

    padding: 0;

}

.h-main .container .row .welcome {

    margin-top: 10px;

}

.h-main .container .row .welcome img {

    display: block;

    height: 300px;

    margin-left: auto;

    margin-right: auto;

    animation: logo linear 5s infinite;

}

@keyframes logo {

    0% {

        transform: rotateZ(0deg);

    }

    

    25% {

        transform: rotateZ(10deg);

    }

    50% {

        transform: rotateZ(0deg);

    }

    75% {

        transform: rotateZ(-10deg);

    }

}

.h-main .container .row .welcome h2 {

    font-size: 24px;

    font-family: 'Koulen', cursive;

    color: #fff;

    text-align: center;

    word-break: break-all;

    border-radius: 5px;

}

.h-main .container .row .welcome p {

    font-size: 15px;

    font-family: 'Battambang', cursive;

    color: #fff;

    text-align: center;

    padding-top: 20px;

    background-color: rgba(0, 0, 0, 0.5);

    border: 1px solid rgb(237, 190, 2);

    border-radius: 10px;

    padding: 10px;

    word-break: break-all;

    margin-top: 30px;

}

.h-main .container .row .cock_01{

    position: relative;

}

.h-main .container .row .cock_01 .cock_img1 {

    position: absolute;

    z-index: 3;

    max-width: 500px;

    animation: cockanimate 4s infinite;

    max-width: 100%;

}

.h-main .container .row .cock_01 .cock_img2 {

    position: absolute;

    top: 400px;

    left: 200px;

    z-index: 2;

    animation: cockanimate 4s infinite;

    max-width: 100%;

}

.h-main .container .row .cock_01 .cock_img3 {

    position: absolute;

    top: 360px;

    left: 100px;

    z-index: 1;

    animation: cockanimate 4s infinite;

    max-width: 100%;

}

@keyframes cockanimate{

    0% { transform:scale(0.8) ;}

    25% { transform:scale(0.9) ;} 

    50% { transform:scale(0.8) ;}

    75% { transform:scale(0.9) ;}

    100% { transform:scale(0.8) ;} 

 }



 .h-main .container .row .cock_02{

    position: relative;

}

.h-main .container .row .cock_02 .cock_img1 {

    position: absolute;

    z-index: 3;

    max-width: 100%;

    animation: cockanimate 4s infinite;

}

.h-main .container .row .cock_02 .cock_img2 {

    position: absolute;

    top: 350px;

    right: 200px;

    z-index: 2;

    animation: cockanimate 4s infinite;

    max-width: 100%;

}

.h-main .container .row .cock_02 .cock_img3 {

    position: absolute;

    top: 360px;

    z-index: 1;

    animation: cockanimate 4s infinite;

    max-width: 100%;

}

@keyframes cockanimate{

    0% { transform:scale(0.8) ;}

    25% { transform:scale(0.9) ;} 

    50% { transform:scale(0.8) ;}

    75% { transform:scale(0.9) ;}

    100% { transform:scale(0.8) ;} 

 }

.buttom-animate {

    position: relative;

    padding-top: 30px;

    padding-bottom: 20px;

 }

.buttom-animate a {

    display: flex;

    position: relative;

    width: 250px;

    height: 60px;

    line-height: 58px;

    background: #000;

    text-transform: uppercase;

    font-size: 20px;

    text-decoration: none;

}

.buttom-animate a::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(45deg, #fb0094,#00f,#0f0,#ff0,#f00,#fb0094,#00f,#0f0,#ff0,#f00);

    background-size: 400%;

    filter: blur(20px);

    transition: 0.5s;

    animation: animate 20s linear infinite;

}

.buttom-animate a::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(45deg, #fb0094,#00f,#0f0,#ff0,#f00,#fb0094,#00f,#0f0,#ff0,#f00);

    background-size: 400%;

    transition: 0.5s;

    border-radius: 5px;

}

@keyframes animate {

    0% {

        background-position: 0 0;

    }

    50% {

        background-position: 300% 0;

    }

    100% {

        background-position: 0 0;

    }

}

.buttom-animate a span {

    position: absolute;

    display: block;

    top: 1px;

    left: 1px;

    right: 1px;

    bottom: 1px;

    text-align: center;

    background: #0c0c0c;

    color: #fff;

    font-size: 20px;

    font-family: 'Battambang', cursive;

    transition: 0.5s;

    z-index: 1;

    border-radius: 5px;

}

.buttom-animate a span:hover {

    color: rgba(255, 255, 255,1);

}

.buttom-animate a span::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 50%;

    background: rgba(0, 167, 222, 0.1);

}

/* jssor slider loading skin spin css */

.jssorl-009-spin img {

    animation-name: jssorl-009-spin;

    animation-duration: 1.6s;

    animation-iteration-count: infinite;

    animation-timing-function: linear;

}



@keyframes jssorl-009-spin {

    from {

        transform: rotate(0deg);

    }



    to {

        transform: rotate(360deg);

    }

}

/*jssor slider bullet skin 132 css*/

.jssorb132 {position:absolute;}

.jssorb132 .i {position:absolute;cursor:pointer;}

.jssorb132 .i .b {fill:#fff;fill-opacity:0.8;stroke:#000;stroke-width:1600;stroke-miterlimit:10;stroke-opacity:0.7;}

.jssorb132 .i:hover .b {fill:#000;fill-opacity:.7;stroke:#fff;stroke-width:2000;stroke-opacity:0.8;}

.jssorb132 .iav .b {fill:#000;stroke:#fff;stroke-width:2400;fill-opacity:0.8;stroke-opacity:1;}

.jssorb132 .i.idn {opacity:0.3;}



.jssora051 {display:block;position:absolute;cursor:pointer;}

.jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}

.jssora051:hover {opacity:.8;}

.jssora051.jssora051dn {opacity:.5;}

.jssora051.jssora051ds {opacity:.3;pointer-events:none;}



.topbox {
    width: 100%;
    height: auto;
    background: linear-gradient(to bottom, rgb(142, 4, 255) 0%, rgb(102, 0, 175) 50%, rgb(33, 0, 73) 51%, rgb(41, 0, 144) 75%, rgb(135, 81, 234) 100%);
    position: relative;
}

.topbox .container{

    max-width: 1270px;

    height: auto;

    margin: 0 auto;

    padding: 5px;

    background-color: none;

}

.topbox .container span {
    height: auto;
    color: #fff;
    font-size: 20px;
    font-family: DB-Heavent-Cond;
    padding: 0px 10px;
    float: left;
    margin-left: 50px;
}
.topbox .container i{
    font-size: 14px;
}
.topbox .container .row{
    max-width: 1280px;
    margin-left: 120px;
    background-color: #000;
    border: 1px solid rgb(75, 0, 0);
    border-radius: 5px;
    padding: 3px;
}
.topbox .container .row #textShow{
    position: relative;
    top: 0px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-family: 'Battambang', cursive;
    line-height: 15px;
    text-transform: uppercase;
}

.agentwrapper {

    width: 100%;

    height: auto;

    padding: 10px 0;

    background: url(../images/pgvip889/wrapper/bg.jpg) center;

    background-size: 100%;

}

.agentwrapper h2{

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

    text-align: center;

    font-family: 'Battambang', cursive;

    font-size: 24px;

    color: #000;

    border-radius: 5px;

    font-weight: 500px;

    background: linear-gradient(135deg, rgb(222, 172, 41) 0%, rgb(253, 248, 70) 50%, rgb(215, 159, 36) 100%);

}

.agentwrapper .container {

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(5,1fr);

    box-sizing: border-box;

    gap: 1em;

}

.agentwrapper .container .row{

    cursor: pointer;

    position: relative;

    top: 0;

}

.agentwrapper .container .row:hover {

    transition: 0.3s ease;

    top: -5px;

    filter: brightness(150%);

}

.agentwrapper .container .row img{

    width: 100%;

}

.type {

    width: 100%;

    height: auto;

}

.type .container {

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 1em;

}

.type .container .row {

    cursor: pointer;

}

.type .container .row:hover {

    transition: 0.3s ease;

    filter: brightness(150%);

}

.type .container .row img {

    width: 100%;

    height: auto;

}

.type .container .row p {

    font-family: 'Koulen', cursive;

    font-size: 16px;

    color: #000;

    padding: 3px;

    text-align: center;

    background: linear-gradient(135deg, rgb(222, 172, 41) 0%, rgb(253, 248, 70) 50%, rgb(215, 159, 36) 100%);

}

.section5 {

    width: 100%;

    height: auto;

    position: relative;

    z-index: 2;

}

.section5 .container {

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(9,1fr);

    box-sizing: border-box;

    gap: 1em;

}

.section5 .container .row{

    border: 1px solid rgb(0, 117, 138);

    transition: 0.3s;

    background-color: rgba(0, 167, 222, 0.1);

}

.section5 .container .row:hover{

    transform: scale(1.1);

}

.section5 .container .row img{

    width: 100%;

}

.sport1 {

    width: 100%;

    height: auto;

    padding-top: 10px;

}

.sport1 .container {

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    box-sizing: border-box;

    gap: 1em;

}

.sport1 .container .row {

    cursor: pointer;

}

.sport1 .container .row img {

    width: 100%;

    border-radius: 10px;

}

.livescore {

    width: 100%;

    height: auto;

}

.livescore .container {

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

}

.demo{
    width: 100%;
    height: auto;
    background: linear-gradient(135deg, rgb(54, 0, 101) 0%, rgb(105, 1, 210) 50%, rgb(0, 19, 22)00%);
}

.demo .container{

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

}

.demo .container h2{

    text-align: center;

    color: #fff;

    font-family: 'Koulen', cursive;

    font-size: 26px;

    font-weight: 500;

    text-transform: uppercase;

    word-break: break-all;

}

.demo .container p{

    text-align: center;

    color: #fff;

    font-family: 'Battambang', cursive;

    font-size: 15px;

    text-transform: uppercase;

    word-break: break-all;

    padding: 10px 0px;

}

.bank{

    position: relative;

    width: 100%;

    height: auto;

    padding: 20px 0px;

    z-index: 2;

    background: linear-gradient(to bottom,rgba(251,216,36,1) 0%,rgba(255,255,117,1) 50%,rgba(189,131,0,1) 51%,rgba(223,177,30,1) 75%,rgba(234,194,81,1) 100%);

}

.bank .container{

    max-width: 720px;

    height: auto;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(6,1fr);

    box-sizing: border-box;

    gap: 0.5em;

    padding: 0px 50px;

}

.bank .container .row{

    transition: all 0.3s ease;

}

.bank .container .row img{

    width: 100%;

    height: auto;

    border-radius: 20px;

}

.bank .container p{

    color: #000;

    text-align: center;

    text-transform: uppercase;

    font-family: DB-Heavent-Cond;

    font-size: 20px;

}

.bank .container .row:hover{

    margin-top: -10px;

}

.clear {

    margin-top: 60px;

}

#menus {

    width: 100%;

    bottom: 0;

    position: fixed;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(to bottom,rgb(142, 4, 255) 0%,rgb(102, 0, 175) 50%,rgb(33, 0, 73) 51%,rgb(41, 0, 144) 75%,rgb(135, 81, 234) 100%);

    background-size: 100%;

    background-position: center;

    background-repeat: no-repeat;

    padding: 20px 0px 15px;

    z-index: 3;

}

#menus li {

    list-style-type: none;

}

#menus li a {

    width: 75px;

    height: 25px;

    color: #000;

    text-align: center;

    font-size: 20px;

    text-decoration: none;

    display: block;

    transition: 1s;

    text-transform: uppercase;

    position: relative;

}

#menus li a i {

    width: 100%;

    font-size: 20px;

    position: absolute;

    left: 0px;

    transition-delay: .3s;

    z-index: 9;

    color: #fff;

    top: -10px;

}

#menus li a.active-icon i {

    top: -60%;

    transition-delay: .3s;

    transition: 1s;

}

#menus li a span {

    display: block;

    font-size: 14px;

    width: 100%;

    position: absolute;

    bottom: -10px;

    transition-delay: .3s;

    transition: 1s;

    z-index: 9;

    color: #fff;

    font-family: 'Battambang', cursive;

}

#menus li a.active-icon span {

    bottom: 14px;

    transition-delay: .5s;

    transition: 1s;

    opacity: 1;

}

.videoshow {

    width: 100%;

    height: auto;

}

.videoshow .container {

    max-width: 1280px;

    height: auto;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2,1fr);

    box-sizing: border-box;

    gap: 1.5em;

}

.videoshow .container .row {

    padding: 0;

}

.videoshow .container .row video {

    width: 100%;

    border: 5px solid rgb(227, 205, 0);

}

.logo-re {

    display: none;

}

.btn_3 {

    display: none;

}